@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 100;
    src: url('/assets/wl/yandex360/fonts/YS Text-Thin.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 100;
    src: url('/assets/wl/yandex360/fonts/YS Text-Thin Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 300;
    src: url('/assets/wl/yandex360/fonts/YS Text-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 300;
    src: url('/assets/wl/yandex360/fonts/YS Text-Light Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/wl/yandex360/fonts/YS Text-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 400;
    src: url('/assets/wl/yandex360/fonts/YS Text-Regular Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/wl/yandex360/fonts/YS Text-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 500;
    src: url('/assets/wl/yandex360/fonts/YS Text-Medium Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/wl/yandex360/fonts/YS Text-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 700;
    src: url('/assets/wl/yandex360/fonts/YS Text-Bold Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 800;
    src: url('/assets/wl/yandex360/fonts/YS Text-Heavy.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 800;
    src: url('/assets/wl/yandex360/fonts/YS Text-Heavy Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 900;
    src: url('/assets/wl/yandex360/fonts/YS Text-Black.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 900;
    src: url('/assets/wl/yandex360/fonts/YS Text-Black Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'YS Variable';
    font-style: normal;
    font-weight: 100 900;
    src: url('/assets/wl/yandex360/fonts/8113fa84bd78944d1415(1).woff2') format('woff2');
}

:root {
    --font: 'YS Text', sans-serif;
    --header-height: 0;
    --color-text-button_accent: #8B5CF6;
    --color-background-button_accent: #8B5CF6;
    --color-background-button_accent-hover: #8B5CF6;
    --color-text-list_item-accent: #8B5CF6;
    --color-text-button_accent-hover: #8B5CF6;
    --color-border-button_accent: #8B5CF6;
    --color-border-button_accent-hover: #8B5CF6;
    --color-text-accent: #8B5CF6;
    --color-background-list_item-accent_secondary: #8B5CF6;
    --color-background-button_accent-active: #8B5CF6;
    --color-background-page: #fff;
    --color-background-page-secondary: #fff;
    --color-background-bundles-page: #fff;
    --generic-color-background-page-secondary: #fff;
    --color-background-sidebar: #fff;
    --color-background-input: #f4f4f6;
    --color-background-solutions: #fff;
}

.al-header {
    display: none;
}

.al-layout .al-layout__inner {
    min-width: 0;
    position: relative;
}

.al-layout .al-layout__container {
    margin: 0;
    max-width: none;
    width: 100%;
}

.al-yandex360-sidebar__nav {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.al-yandex360-sidebar__title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
}

.al-yandex360-sidebar__title-beta {
    background-color: #42424B;
    border-radius: 1000px;
    color: #F3F4F5;
    display: inline-flex;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px;
    vertical-align: middle;
}

.al-yandex360-sidebar__link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    color: #34343C;
    text-decoration: none;
}

.al-yandex360-sidebar__link:hover {
    background-color: rgba(181, 183, 192, 0.15);
    color: #34343C;
    text-decoration: none;
}

.al-yandex360-sidebar__link_active {
    background-color: rgba(181, 183, 192, 0.15);
}

.al-yandex360-sidebar__icon {
    color: var(--color-text-secondary);
    font-size: 20px;
    width: 20px;
}

.al-yandex360-sidebar__label {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;

}

.al-yandex360-sidebar__footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px;
}

.al-yandex360-sidebar__footer-link {
    color: #6B6C77;
    font-size: 12px;
    line-height: 16px;
    width: fit-content;
}

.al-yandex360-sidebar__footer-link:hover {
    color: var(--color-text-primary);
    text-decoration: none;
}

.al-yandex360-sidebar__brand {
    display: block;
    height: auto;
    margin-top: auto;
    width: 114px;
}

.al-solution-list {
    justify-content: flex-start !important;
}

.al-solution-list_wl {
    margin-top: 0;
    min-height: auto;
}

@media (min-width: 1024px) {
    .al-layout .al-layout__inner {
        box-sizing: border-box;
        margin: 0 auto;
        max-width: 1540px;
        padding-left: 312px;
        width: 100%;
    }

    .al-layout .al-layout__inner:has(.al-layout__container_credentials) {
        padding-left: 280px;
    }

    .al-layout .al-layout__inner:has(#solutionBuilderScrollbar) {
        padding-left: 280px;
    }

    .al-layout .al-yandex360-sidebar {
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column;
        left: max(20px, calc((100vw - 1540px) / 2 + 20px));
        min-height: 100dvh;
        padding: 32px 16px 24px 0;
        position: fixed;
        top: 0;
        width: 260px;
        border-right: 1px solid rgba(181, 183, 192, 0.2);
    }

    .al-credentials__sidebar,
    .al-universal-sidebar {
        border-right: 1px solid rgba(181, 183, 192, 0.2);
    }

    .al-layout .al-layout__container {
        margin: 0 auto !important;
        max-width: none !important;
        width: 100% !important;
    }

    .al-bundles__controls.al-grid-row {
        grid-template-columns: repeat(3, 240px) !important;
        justify-content: start !important;
        margin-bottom: 24px;
    }

    .al-bundles__controls.al-grid-row>.al-grid-col_span_4 {
        grid-column: span 1 !important;
        min-width: 0;
    }

    .al-bundles__controls.al-grid-row>.al-grid-col_span_full {
        grid-column: 1 / -1 !important;
    }

    .al-credentials {
        height: 100vh;
    }

    .al-page_has-sidebar {
        gap: 24px;
    }
}

.al-universal-sidebar-scrollable::after {
    background: transparent;
}

@media (min-width: 1280px) {
    .al-bundles-cards-list, .wl-solution-list {
        grid-template-columns: repeat(3, minmax(0, 310px)) !important;
    }

    .al-bundles__controls {
        grid-template-columns: repeat(4, minmax(0, 240px)) !important;
    }
}

.al-bundle-card {
    min-height: 168px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.al-bundle-card_view_empty {
    padding-top: 0;
    padding-bottom: 0;
}

.icon-add-circle_orange {
    background-color: #fff;
}

.wl-bundle-history-filter-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.al-layout__container, .al-universal-sidebar {
    min-height: 100dvh;
}

.al-bundle-history-table__layout-table, .al-bundle-history-filter__filter {
    padding-right: 24px !important;
}

.al-solutions-marketplace__search-container {
    max-width: 240px !important;
}

.wl-solutions-empty-constructor-wrapper {
    padding-top: 24px !important;
}

.al-solution-version-select__add {
    background-color: #8B5CF6 !important;
    color: #fff !important;
    border: none !important;
}

.wl-bundle-history-id {
    display: none !important;
}

.al-solutions-marketplace__search-container, .al-bundles__container {
    margin-right: 24px !important;
}

.wl-service-search-icons {
    right: 8px !important;
    transform: translateY(-50%) !important;
}

.wl-service-search-icons.rotate-180 {
    transform: translateY(-50%) rotate(180deg) !important;
}

.font-primary, .font-secondary {
    font-family: 'YS Text', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
b {
    font-family: 'YS Variable', sans-serif;
}

.al-typography_size_subtitle {
    font-family: 'YS Variable', sans-serif;
}

.al-modal__title_text,
.al-modal__subtitle,
.al-modal__description {
    font-family: 'YS Variable', sans-serif;
}

.al-finance-tariffs__plan-header-title-text,
.al-finance-tariffs__plan-price-currency,
.al-finance-tariffs__plan-contact-us,
.al-finance-tariffs__features-title,
.al-finance-tariffs__features-section-title-text {
    font-family: 'YS Variable', sans-serif;
}

.al-country-modal__title-text {
    font-family: 'YS Variable', sans-serif;
}

.al-webhook-modal h1 {
    font-family: 'YS Variable', sans-serif;
}

.al-bundle-card-header__title,
.al-bundles__title,
.al-profile-tariff__name,
.al-scenarios__title,
.al-scenarios__scenario-title,
.al-bundle-editor__title,
.al-wizard__title,
.al-yandex360-sidebar__title {
    font-family: 'YS Variable', sans-serif;
}

.al-bundle-history__table-wrapper {
    padding-right: 24px !important;
}