:root{
    --krayt_radius_large: 12px;
    --krayt_radius_nav: 50%;

    --main_color: #1B1B1B;

    --main_bg_gray: #F4F4F4;

    --main_text_gray: #9D9D9D;

    --main_text_black: #1B1B1B;
    --main-txt:#1b1b1b;

    --main_text_button: #ffffff;

    --main_active_red: #1B1B1B;

    --white:#fff;
    --main_button_color:#000000;

    --yellow-button-hover:#2176DF;

    --yellow-button-active:#154D92;

    --gray-button-hover:#D8D8D8;
    --gray-button-color:#9C9C9C;

    --old-price-gray: #727272;
    --new-price-gray: #727272;

    --scroll-bar-light: #EDEDED;
    --scroll-bar-dark: #DEDEE5;

    --border-bottom-gray:#ECECEC;

    --background-filter:#FAFAFA;

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

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

    --footer-gray-text:#808080;
    --footer-gray-border:#E2E2E2;

    --hover-tab:#DDDFE1;
    --active-tab:#455360;

    --main_error:#FF381D;

    --color-primary: #1366CC;
    --bg-gray: #F3F3F5;
    --bg-gray-hover: #EBECED;
    --main-black: #1B1B1B;
    --text-secondary: #808080;
    --border-gray: #DEDEDE;

    --button-disabled: #E4E4E4;
    --button-text-disabled: var(--main-black);

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

    --button-secondary: #FFFFFF;
    --button-secondary-hover: #B9B9B9;
    --button-secondary-active: #F6F6F6;

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

    --button-outline-text: var(--main-black);
    --button-outline-text-bg: #ffffff;
    --button-outline-border: #DEDEDE;

    --button-outline-hover-text: var(--main-black);
    --button-outline-hover-text-bg: #ffffff;
    --button-outline-hover-border: #B9B9B9;

    --button-outline-active-text: var(--main-black);
    --button-outline-active-text-bg: #F6F6F6;
    --button-outline-active-border: #B9B9B9;

    --button-outline-disabled-text: #BBBBBB;
    --button-outline-disabled-text-bg: #FFFFFF;
    --button-outline-disabled-border: #DEDEDE;

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

    --checkbox-radius: 2px;
    --checkbox-border: var(--border-gray);
    --checkbox-border-hover: #535353;

    --radio-border: #E6E6E6;
    --radio-border-hover: #B9B9B9;
    --radio-border-active: #1B1B1B;

    --switcher-bg: #D1D1D6;
    --switcher-bg-hover: #B1B4BE;

    --amount-button-radius: 2px;
    --amount-button-hover: #F5F5F5;
    --amount-button-active: #EAEAEA;
    --amount-button-large-hover: #F3F3F5;
    --amount-button-large-active: #E7E7E9;

    --blue-link: var(--main_color);

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

    --form-radius: 8px;
    --form-radius-large:12px;
    --form-border-default: #DEDEDE;
    --form-border-hover: #B9B9B9;
    --form-border-active: #5B5B5B;
    --form-border-placeholder: #9D9D9D;
    --form-border-error: #F3542A;

    --button-like-radius: 4px;
    --button-like: #959CAA;
    --button-like-hover: #626672;

    --button-icon: #959CAA;
    --button-icon-hover: #626672;
    --button-icon-active: #F0633E;

    --color-border: #DCDFE5;
    --color-border-hover: #BCC3D1;

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

    --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: 10px 40px;

    transition: 0.3s ease;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    height: 46px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
}

.button.button-large{
    padding: 16px;
    height: 56px;
    line-height: 100%;

}
.product_card_detail .block_buy_on_click{
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);
}
.prods-of-day .product-item-button-container .button{

}
#agreement-modal button{

}

.button.button-full{
    width: 100%;
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);;
}

.button-primary{
    background-color: var(--button-primary);
    color: var(--main_text_button);
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);
}

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

@media (hover: none) {
    .button-primary:active{
        background-color: var(--button-primary-active);
        color: var(--main_text_button);
    }
}


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

.button-secondary{
    background-color: var(--button-outline-text-bg);
    color: var(--button-outline-text);
    border: 1px solid var(--button-outline-border);
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);
}

@media (hover: hover) {
    .button-secondary:hover{
        background-color: var(--button-outline-hover-text-bg);
        color: var(--button-outline-hover-text);
        border: 1px solid var(--button-outline-hover-border);
    }
}

@media (hover: none) {
    .button-secondary:active{
        background-color: var(--button-outline-active-text-bg);
        color: var(--button-outline-active-text);
        border: 1px solid var(--button-outline-active-border);
    }
}

.button-secondary:active{
    background-color: var(--button-outline-active-text-bg);
    color: var(--button-outline-active-text);
    border: 1px solid var(--button-outline-active-border);
}

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

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

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

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

.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;
}

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

@media (hover: none) {
    .button-outline:active{
        background-color: var(--bg-gray);
        color: var(--main_text_black);
    }
}
.button-outline:active{
    background-color: var(--bg-gray);
    color: var(--main_text_black);
}
.button-outline.active{
    background-color: #ffffff;
    color: #1b1b1b;
    border-color: #1b1b1b !important;
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);
}
.button-outline.active:hover{
    background-color: #ffffff !important;
    color: #1b1b1b !important;
    border-color: #1b1b1b !important;
}

.button.button-rounded{
    min-width: unset;
    padding: 0;

    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
}

.button-rounded.button-next,
.button-rounded.button-prev{
    transform: translateZ(0);
    color: var(--main-black);
    border: 1px solid #DEDEDE;
}

.button-rounded.button-rounded--small{
    width: 28px;
    height: 28px;
}
.button-rounded.button-rounded--large{
    width: 50px;
    height: 50px;
    border-radius: var(--krayt_radius_nav);
}

@media (hover: hover) {
    .button-rounded.button-next:hover,
    .button-rounded.button-prev:hover{
        color: var(--main_color);
        border: 1px solid #B9B9B9;
        box-shadow: none;
    }
}

@media (hover: none) {
    .button-rounded.button-next:active,
    .button-rounded.button-prev:active{
        background-color: #F6F6F6;
    }
}

.button-rounded.button-next:active,
.button-rounded.button-prev:active{
    background-color: #F6F6F6;
}

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

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

.button.disabled,
.button.disable{
    background-color: #fff;
    color: #bbbbbb;
    pointer-events: none;
}

.button-primary.disabled,
.button-primary.disable{
    background-color: var(--button-disabled);
    color: var(--button-text-disabled);
    border: none;
    pointer-events: none;
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);
}

.button-secondary.disabled,
.button-secondary.disable{
    background-color: #FFFFFF;
    color: #BBBBBB;
    border-color: #DEDEDE;
    pointer-events: none;
}

.button.button-radius{
    height: 40px;
    width: 40px;
    padding: 8px;
    transition: background-color 0.2s;
    background-color: white;
}

@media (hover: hover) {
    .button.button-radius:hover{
        background-color: #f5f5f5;
    }
}

.button.button-radius:hover{
    background-color: #f5f5f5;
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);
}

.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)
    }
}

.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: center;
    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: 24px;
    height: 24px;
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);
    border: 1px solid #A7A7A7;
    background-color: var(--white);
    transition: 0.3s ease;
}

.el-checkbox-label-text{
    font-size: 16px;
    font-weight: 500;
    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_text_black);
    background-color: var(--main_text_black);
}

.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: 7px;
    height: 14px;
    transform: translate(-50%, -50%) rotate(37deg);
    border: 2px solid var(--white);
    border-left: transparent;
    border-top: transparent;
}

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

.el-checkbox-round-label.disabled{
    border-color: var(--radio-border);
    pointer-events: none;
}

.el-checkbox-round-label.disabled .el-checkbox-round-label-check > span{
    opacity: 0.5;
}

.el-checkbox-round-label-check{
    width: 40px;
    height: 40px;

    transition: 0.3s ease;
    border: 1px 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: 30px;
    height: 30px;
    background: var(--main_color);

}

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

.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;

    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;

    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;
}

.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;

    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;

}

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

.el-switcher-label{
    flex-shrink: 0;
    cursor: pointer;
    padding: 3px;
    width: 46px;
    height: 24px;

    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;

    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));
}

.el-amount{
    width: 100%;
    display: inline-flex;
    column-gap: 9px;
    justify-content: space-between;
}

.el-amount.el-amount--large{
    width: 100%;
    border: 1px solid #DEDEDE;
    background-color: #FFFFFF;
    padding: 12px;

}

.el-amount-btn{
    width: 24px;
    height: 24px;
    background-color: transparent;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);
    transition: 0.3s ease;
}

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

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

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

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

@media (hover: none) {
    .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-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: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    line-height: 100%;
}

.basket-items-list-item-wrapper .el-amount-input{
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.64px;
}



.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,a.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, a.link:hover{
    border-color: var(--blue-link);
    color: var(--blue-link);
}

.el-search{
    padding: 13px 16px;
    background-color: #FFF;
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);
    border: 1px solid #DEDEDE;
    transition: border-color 0.3s ease;
    display: flex;
    align-items: center;
    column-gap: 8px;
    height: 46px;
}
.wrp-js-search .el-search{
    width: 100%;
    border: none;
    border-bottom: 1px solid #E1E1E1;
    max-width: 1300px;
    margin: 0 auto;
    padding: 8px 0 13px 2px;
    border-radius: 0;
}

.wrp-js-search .el-search .el-search-input:placeholder-shown + button {
    color: #D9D9D9;
}

.el-search:hover{
    border-color: #B9B9B9;
}

.el-search:focus-within{
    border-color: #5B5B5B;
}

.el-search-input{
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    background-color: transparent;
}

.el-search-input::placeholder{
    color: var(--text-secondary);
}

.wrp-js-search .el-search-input{
    flex: 1;
    font-size: 24px;
    font-weight: 700;
    color: #1B1B1B;
}
.wrp-js-search .el-search-input::placeholder {
    color: #D9D9D9;
}

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

    transition: color 0.2s;
    background-color: white;
}
.el-search .icon:hover{
    color: #989898 !important;
}
.el-search .icon:hover svg path{
}
.el-search button{
    background: transparent;
}

.form{
    max-width: 500px;
}

.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, .form-control{
    width: 100%;
    background-color: white;
    padding: 13px 16px;
    border-radius: max(calc(var(--krayt_radius_large) - 4px), 0px);
    border: 1px solid var(--form-border-default);
    transition: 0.3s ease;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.64px;
}
select.form-control{
    padding: 0 16px;
}
.el-form-input::placeholder, .form-control::placeholder{
    color: var(--form-border-placeholder);
}
.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(--form-border-active);
}

.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-compare{
    color: var(--button-like);
    width: 50px;
    height: 50px;

    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{
    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-close{
    cursor: pointer;
    color: var(--main-black);
}

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

.icon-hint{
    color: #D1D1D6;
}

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

.color{
    transition: 0.3s ease;
    width: 34px;
    height: 34px;

    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;

}

.flag{
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 6px;

    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;

    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: 1000px){
    .wrp-js-search .el-search-input{
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .wrp-js-search .el-search {
        height: auto;
        padding: 40px 0 10px 0px;
    }
}

@media (max-width: 576px) {
    .button{
        padding: 0 12px;
        height: 36px;
    }
    .button-outline{
        height: 36px;
        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;
    }
}