:root{
    /* Главный цвет */
    --main_color: #1366CC;

    /*	Светло-серый цвет фона*/
    --main_bg_gray: #F3F3F5;

    /* Светло-серый цвет текста*/
    --main_text_gray: #949CAD;

    /*	Основной цвет текста*/
    --main_text_black: #252525;
    --main-txt:#252525;

    /*	Основной цвет текста в кнопках*/
    --main_text_button: #ffffff;

    /*	Активный красный*/
    --main_active_red: #1366CC;

    /* Белый */
    --white:#fff;

    /*Желтая кнопка при наведении*/
    --yellow-button-hover:#2176DF;
    /*Желтая кнопка при нажатии*/
    --yellow-button-active:#154D92;

    /*Серая кнопка при наведении*/
    --gray-button-hover:#D8D8D8;
    --gray-button-color:#AEAEAE;

    /*old price*/
    --old-price-gray: #949CAD;

    /*Цвета полос прокрутки*/
    --scroll-bar-light: #EDEDED;
    --scroll-bar-dark: #DEDEE5;

    /*Цвет рамок в списках*/
    --border-bottom-gray:#ECECEC;

    /*background filter*/
    --background-filter:#FAFAFA;

    /*text-color filter*/
    --text-filter:#808080;
    --active-filter:#455360;
    --selected-checkbox:#FFE974;

    /*dark border*/
    --dark-border-gray:#EFEFEF;
    --dark-border-gray-input:#CBCDCE;

    /*footer*/
    --footer-gray-text:#93939D;
    --footer-gray-border:#E2E2E2;

    /*tabs*/
    --hover-tab:#DDDFE1;
    --active-tab:#455360;

    --main_error:#FF381D;

    /*commons*/
    --color-primary: #1366CC;
    --bg-gray: #F3F3F5;
    --bg-gray-hover: #EBECED;
    --main-black: #252525;
    --text-secondary: #949CAD;
    --border-gray: #E6E9F0;

    /*buttons*/
    --button-disabled: var(--bg-gray);
    --button-border-radius: 4px;

    --button-primary: var(--main_color);
    --button-primary-hover: var(--yellow-button-hover);
    --button-primary-active: var(--yellow-button-active);

    --button-secondary:var(--bg-gray);
    --button-secondary-hover: var(--bg-gray-hover);
    --button-secondary-active: #DADCDD;

    --button-secondary-dark: #E5E6EA;
    --button-secondary-dark-hover: #DADCE0;
    --button-secondary-dark-active: #C6C9CE;

    --button-outline-active: var(--main-black);
    --button-outline-border: var(--border-gray);
    --button-outline-border-hover: #BCC3D1;

    /* Checkbox */
    --checkbox-radius: 2px;
    --checkbox-border: var(--border-gray);
    --checkbox-border-hover: #C3C8D1;

    /*Radio*/
    --radio-border: #DCDFE5;
    --radio-border-hover: #BCC3D1;
    --radio-border-active: var(--main-black);

    /*Switcher*/
    --switcher-bg: #D1D1D6;
    --switcher-bg-hover: #B1B4BE;

    /*Amount*/
    --amount-button-radius: 2px;
    --amount-button-hover: #E7E7E9;
    --amount-button-active: #DFDFE2;
    --amount-button-large-hover: #F3F3F5;
    --amount-button-large-active: #E7E7E9;

    /*Link*/
    --blue-link: var(--main_color);

    /*El search*/
    --el-search-radius: 4px;
    --el-search-border-hover: #DDDDE4;

    /*Form*/
    --form-radius: 4px;
    --form-border-hover: #DDDDE4;
    --form-border-error: #F3542A;

    /*Button Like*/
    --button-like-radius: 4px;
    --button-like: #959CAA;
    --button-like-hover: #626672;

    /*Button Icon*/
    --button-icon: #959CAA;
    --button-icon-hover: #626672;
    --button-icon-active: #F0633E;

    /*Color*/
    --color-border: #DCDFE5;
    --color-border-hover: #BCC3D1;

    /*Flag*/
    --flag-of-day: #F55C33;
    --flag-action: #7E3FE4;
    --flag-new: #62D12D;
    --flag-promotion: #2594FB;
    --flag-hit: #9764EA;
    --flag-label-ring: #F55C33;

    --green-label: #4ECB13;
}
.row-cs{
    display: flex;
    align-items: center;
    column-gap: 12px;
    margin-bottom: 24px;
}
.row-cs > span{
    flex-shrink: 0;
}
.loading{
    pointer-events: none;
}
.icon{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease;
}

.button{
    cursor: pointer;
    user-select: none;
    padding: 11px 16px;
    border-radius: var(--button-border-radius);
    transition: 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    height: 42px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
}

.button.button-large{
    padding: 10px 38px;
    height: 50px;
    line-height: 100%;
}

/*button full row*/
.button.button-full{
    width: 100%;
}

/*button primary*/
.button-primary{
    background-color: var(--button-primary);
    color: var(--main_text_button);
}

.button-primary:hover{
    background-color: var(--button-primary-hover);
    color: var(--main_text_button);
}

.button-primary:active{
    background-color: var(--button-primary-active);
    color: var(--main_text_button);
}

/*button secondary*/
.button-secondary{
    background-color: var(--button-secondary);
    color: var(--main_text_black);
}

.button-secondary:hover{
    background-color: var(--button-secondary-hover);
    color: var(--main_text_black);
}

.button-secondary:active{
    background-color: var(--button-secondary-active);
    color: var(--main_text_black);
}

/*button secondary dark*/
.button-secondary-dark{
    background-color: var(--button-secondary-dark);
    color: var(--main_text_black);
}

.button-secondary-dark:hover{
    background-color: var(--button-secondary-dark-hover);
    color: var(--main_text_black);
}

.button-secondary-dark:active{
    background-color: var(--button-secondary-dark-active);
    color: var(--main_text_black);
}

/*button outline*/
.button-outline{
    background-color: var(--white);
    color: var(--main_text_black);
    border: 1px solid var(--button-outline-border);
    padding: 8px 24px;
    height: 38px;
    white-space: nowrap;
}

.button-outline:hover{
    border-color: var(--button-outline-border-hover);
    color: var(--main_text_black);
}

.button-outline:active{
    background-color: var(--bg-gray);
    color: var(--main_text_black);
}
.button-outline.active{
    background-color: #032C7F;
    border-color: #032C7F;
    color: var(--white);
}

/*button rounded*/
.button.button-rounded{
    min-width: unset;
    padding: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
}

.button-rounded.button-next,
.button-rounded.button-prev{
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.10);
    transform: translateZ(0);
    color: var(--main-black);
}

.button-rounded.button-rounded--small{
    width: 28px;
    height: 28px;
}
.button-rounded.button-rounded--large{
    width: 46px;
    height: 46px;
}

.button-rounded.button-next:hover,
.button-rounded.button-prev:hover{
    color: var(--main_color);
}

.button-rounded.button-next:active,
.button-rounded.button-prev:active{
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.10);
}

.button-rounded.button-rounded--fill{
    width: 50px;
    height: 50px;
    background-color: var(--bg-gray);
}

.button-rounded.button-rounded--fill:hover{
    background-color: var(--bg-gray-hover);
}

/*button disabled*/
.button.disabled,
.button.disable{
    background-color: var(--button-disabled) !important;
    color: #949CAD;
    pointer-events: none;
}


/*loader*/
.lds-dual-ring {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite;
    margin: auto;
}

.lds-dual-ring:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 2px solid currentColor;
    -webkit-animation: prixClipFix 2s linear infinite;
    animation: prixClipFix 2s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }
    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }
    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }
    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
    }
    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
    }
}

/*Checkbox*/
.el-checkbox,
.el-switcher,
.el-checkbox-round,
.el-radio,
.el-checkbox-rect{
    line-height: 0;
}
.el-checkbox-input,
.el-switcher-input,
.el-checkbox-round-input,
.el-radio-input,
.el-checkbox-rect-input{
    display: none;
}

.el-checkbox-label{
    display: inline-flex;
    column-gap: 8px;
    cursor: pointer;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1;
}

.el-checkbox-label.disabled{
    opacity: 0.3;
    pointer-events: none;
}

.el-checkbox-label-check{
    flex-shrink: 0;
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: var(--checkbox-radius);
    border: 1px solid var(--checkbox-border);
    background-color: var(--white);
    transition: 0.3s ease;
}

.el-checkbox-label-text{
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    color: var(--main_text_black);
}

.el-checkbox-label:hover .el-checkbox-label-check{
    border-color: var(--checkbox-border-hover);
}

.el-checkbox-input:checked + .el-checkbox-label-check,
.el-checkbox-input:checked + .el-checkbox-label .el-checkbox-label-check{
    border-color: var(--main_color);
    background-color: var(--main_color);
}

.el-checkbox-input:checked + .el-checkbox-label-check::before,
.el-checkbox-input:checked + .el-checkbox-label .el-checkbox-label-check::before{
    content: "";
    display: block;
    position: absolute;
    top: 44%;
    left: 50%;
    width: 6px;
    height: 11px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 2px solid var(--white);
    border-left: transparent;
    border-top: transparent;
}


/*checkbox round*/
.el-checkbox-round-label{
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
}

.el-checkbox-round-label.disabled .el-checkbox-round-label-check > span::before{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    z-index: 100;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAA/UlEQVQ4y5WSQQ6CQAxFOSBuwAtoAitc4R6MkKgYJULUi8Ax4DgKm9o/45BxBBNJmkB/33T6qUVEHkfDUXHY1sQD7V2DWg+JJox3lOZ3enYdf5IzAjnQkvxGa64Fg2S9PV3JXa4ozoovWEGbY0nOIqDkfIVeQ5hBAOQsAy5guO8FbEJxVqqDZ+rUuQ6rziJ3VLkBcs05BBxlF1nIADrJESYgE0YhAER0KH5DphEKFDNPuG1AhTAi4jnRWV17FNYhcT3NHLzLzuUnjI0YHP203EWY8ENqNsAq5Y3Qf4NuhIT7wTBsDxgIbRjvCfCUe6ozoFCuXIukj5c/lhy1/gvSDM3b8PrjegAAAABJRU5ErkJggg==) no-repeat center;
    opacity: .7;
}

.el-checkbox-round-label.disabled{
    opacity: 0.3;
    pointer-events: none;
}

.el-checkbox-round-label-check{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: 0.3s ease;
    border: 2px solid var(--radio-border);
    position: relative;
}

.el-checkbox-round-label:hover .el-checkbox-round-label-check{
    border-color: var(--radio-border-hover);
}

.el-checkbox-round-label .el-checkbox-round-label-check > span{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: var(--main_color);
    border-radius: 50%;
}

.el-checkbox-round-input:checked + .el-checkbox-round-label .el-checkbox-round-label-check{
    border-color: var(--radio-border-active);
}

/*checkbox rect*/
.el-checkbox-rect-label{
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
}

.el-checkbox-rect-label-check{
    width: 32px;
    height: 24px;
    border-radius: 4px;
    transition: 0.3s ease;
    border: 1px solid var(--radio-border);
    position: relative;
}

.el-checkbox-rect-label:hover .el-checkbox-rect-label-check{
    border-color: var(--radio-border-hover);
}

.el-checkbox-rect-label .el-checkbox-rect-label-check > span:first-child{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 18px;
    background: var(--main_color);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.el-checkbox-rect-input:checked + .el-checkbox-rect-label .el-checkbox-rect-label-check{
    border-color: transparent;
}

.el-checkbox-rect-label-check-layout{
    position: absolute;
    inset: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    background: rgba(19, 102, 204, 0.6);
    display: none;
}

.el-checkbox-rect-input:checked + .el-checkbox-rect-label .el-checkbox-rect-label-check-layout,
.el-checkbox-rect-label.active .el-checkbox-rect-label-check-layout{
    display: flex;
}

.el-checkbox-rect-label.disabled {
    pointer-events: none;
}

.el-checkbox-rect-label.disabled .el-checkbox-rect-label-check{
    opacity: 0.5;
}

.el-checkbox-rect-label.disabled{
    color: #949CAD;
}

    /*Radio*/
.el-radio-label{
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
}

.el-radio-label.disabled{
    opacity: 0.3;
    pointer-events: none;
}

.el-radio-label-check{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transition: 0.3s ease;
    border: 1px solid var(--radio-border);
    background-color: #fff;
    position: relative;
}

.el-radio-label:hover .el-radio-label-check{
    border-color: var(--radio-border-hover);
}

.el-radio-label .el-radio-label-check::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.el-radio-input:checked + .el-radio-label .el-radio-label-check{
    border-color: var(--main_color);
    background-color: var(--main_color);
}

/*Switcher*/
.el-switcher-label{
    flex-shrink: 0;
    cursor: pointer;
    padding: 3px;
    width: 46px;
    height: 24px;
    border-radius: 999px;
    background-color: var(--switcher-bg);
    transition: 0.3s ease;
}

.el-switcher-label:hover{
    background-color: var(--switcher-bg-hover);
}

.el-switcher-label-check{
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--white);
    transition: transform 0.3s ease;
}

.el-switcher-label.checked,
.el-switcher-input:checked + .el-switcher-label{
    background-color: var(--main_color);
}

.el-switcher-label.checked .el-switcher-label-check,
.el-switcher-input:checked + .el-switcher-label .el-switcher-label-check{
    transform: translateX(calc(100% + 4px));
}

/*Amount*/
.el-amount{
    width: 100%;
    padding: 6px;
    border-radius: 4px;
    display: inline-flex;
    background-color: var(--bg-gray);
    column-gap: 9px;
    justify-content: space-between;
}

.el-amount.el-amount--large{
    width: 100%;
    border: 1px solid var(--border-gray);
    background-color: var(--white);
    padding: 4px;
}

.el-amount-btn{
    width: 28px;
    height: 30px;
    background-color: transparent;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--amount-button-radius);
    transition: 0.3s ease;
}

.el-amount--large .el-amount-btn{
    width: 40px;
    height: 40px;
}

.el-amount-btn.disabled{
    opacity: 0.2;
    pointer-events: none;
}

.el-amount-btn:hover{
    background-color: var(--amount-button-hover);
}

.el-amount--large .el-amount-btn:hover{
    background-color: var(--amount-button-large-hover);
}

.el-amount-btn:active{
    background-color: var(--amount-button-active);
}

.el-amount--large .el-amount-btn:active{
    background-color: var(--amount-button-large-active);
}

.el-amount-input{
    max-width: 32px;
    background-color: transparent;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
}

.el-amount--large .el-amount-input{
    max-width: unset;
    flex: 1;
}

.el-amount-input::-webkit-inner-spin-button,
.el-amount-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/*Link*/
.link{
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    color: var(--blue-link);
    border-bottom: 1px solid transparent;
    transition: border 0.3s ease;
}

.link:hover{
    border-color: var(--blue-link);
}

/*el search*/
.el-search{
    padding: 14px 24px;
    background-color: var(--bg-gray);
    border-radius: var(--el-search-radius);
    border: 1px solid var(--bg-gray);
    transition: border-color 0.3s ease;
    display: flex;
    align-items: center;
    column-gap: 8px;
    height: 50px;
}

.el-search:hover{
    border-color: var(--el-search-border-hover);
}

.el-search:focus-within{
    border-color: var(--main_color);
}

.el-search-input{
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    background-color: transparent;
}
.el-search-input::placeholder{
    color: var(--text-secondary);
}

.el-search .icon{
    cursor: pointer;
    color: var(--main_color);
}

.el-search button{
    background: transparent;
}

/*Form*/
.form{
    max-width: 318px;
}

.el-form{
    margin-bottom: 24px;
}

.el-form-group.required .el-form-title::after{
    content: "*";
    margin-left: 4px;
    color: var(--form-border-error);
}

.el-form-title{
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
}

.el-form-group{
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 40px;
}

.el-form-group:last-of-type{
    margin-bottom: 0;
}

.el-form-input{
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    width: 100%;
    background-color: var(--bg-gray);
    padding: 16px 20px;
    border-radius: var(--form-radius);
    border: 1px solid Var(--bg-gray);
    transition: 0.3s ease;
    height: 50px;
}

.el-form-input::placeholder{
    color: #949CAD;
}

.el-form-input:hover{
    border-color: var(--form-border-hover);
}

.el-form-input.error{
    border-color: var(--form-border-error);
}

input[type=text].el-form-input:focus,
input.el-form-input:focus,
textarea.el-form-input:focus{
    border-color: var(--main_color);
}

.el-form-group.error input[type=text].el-form-input{
    border-color: var(--form-border-error);
}

.el-form-error{
    top: calc(100% + 8px);
    left: 0;
    position: absolute;
    color: var(--form-border-error);
    display: none;
}

.el-form-group.error .el-form-error{
    display: block;
}

/*Button like*/
.button-like, .button-compare{
    color: var(--button-like);
    width: 50px;
    height: 50px;
    border-radius: var(--button-like-radius);
    border: 1px solid var(--border-gray);
    padding: 0;
    background-color: var(--white);
    transition: none;
}

.button-like:hover, .button-compare:hover{
    color: var(--button-like-hover);
}

.button-like svg:nth-child(2){
    display: none;
}

.button-like.active svg:nth-child(2){
    display: block;
}

.button-like.active svg:nth-child(1){
    display: none;
}

.button-compare.active{
    color: #F3542A;
}

/*button-icon*/
.button-icon{
    border: 1px solid var(--border-gray);
    color: var(--button-icon);
    transition: none;
}

.button-icon:hover{
    color: var(--button-icon-hover);
}

.button-icon.active{
    color: var(--button-icon-active);
}

/*icon*/
.icon-close{
    cursor: pointer;
    color: var(--main-black);
}

.icon-close:hover{
    color: #B6BCC7;
}

.icon-hint{
    color: #D1D1D6;
}

.icon-hint:hover{
    color: #B1B4BE;
}

/*Color*/
.color{
    transition: 0.3s ease;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    position: relative;
}

.color:hover{
    border-color: var(--color-border-hover);
}

.color.active{
    border-color: var(--main-black);
}

.color-inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2E68AF;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

/*flag*/
.flag{
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 100%;
    color: #fff;
    width: fit-content;
    user-select: none;
}

.flag-of-day{
    padding: 0;
    border: 1px solid var(--flag-of-day);
    color: var(--flag-of-day);
}

.flag-of-day-label{
    padding: 6px;
    border-radius: 0 3px 3px 0;
    background-color: var(--flag-of-day);
    color: var(--white);
}

.flag-of-day-time{
    padding: 6px;
    color: var(--flag-of-day);
}

.flag-action{
    border: 1px solid var(--flag-action);
    color: var(--flag-action);
}

.flag-new{
    background-color: var(--flag-new);
}

.flag-promotion{
    background-color: var(--flag-promotion);
}
.flag-hit{
    background-color: var(--flag-hit);
}
.flag-label-ring{
    background-color: var(--flag-label-ring);
}

@media (max-width: 576px) {
    .button{
        padding: 0 12px;
        height: 36px;
        font-size: 12px;
    }
    .button-outline{
        height: 36px;
        font-size: 12px;
        font-weight: 400;
        padding: 0 24px;
    }
    .button.button-large{
        height: 46px;
        min-height: 46px;
    }
    .el-form-input{
        padding: 16px 24px;
    }
    .el-amount{
        height: 30px;
    }
    .el-amount.el-amount--large{
        height: 46px;
    }
    .el-amount--large .el-amount-btn{
        height: 100%;
    }
    .el-amount-input{
        font-size: 12px;
    }
    .el-checkbox-round-label-check{
        width: 32px;
        height: 32px;
    }
    .el-checkbox-round-label .el-checkbox-round-label-check > span{
        width: 22px;
        height: 22px;
    }
}