/* 
- Scroll_bar
- Font_assignment
- Temp_classes_style
- Unselected_elem
- Elem_cursor_style
- Color_variables
- Grid_variable
- Layout_adaptation_0+
- Layout_adaptation_320+
- Layout_adaptation_450+
-_Layout_adaptation_580_
- Layout_adaptation_720+
- Layout_adaptation_1024_
_ Layout_adaptation_1280+
- Layout_adaptation_1366+
- Layout_adaptation_1920+
- Icons
*/




/* - Scroll_bar
************************************************************************/

@media screen and (min-width: 1px) { 
    ::-webkit-scrollbar {width: 5px !important; height: 5px !important;}
    ::-webkit-scrollbar-track {background: var(--grey3) !important;}
    ::-webkit-scrollbar-thumb {background: var(--orange) !important;}
}

/* - Font_assignment
************************************************************************/
.mb_title_text,
.count_units_cart,
.ds_wrap_nav_list,
.header_tabs{
    font-family: 'Oswald';
}


.mb_cat_list,
.stap_page,
.unit_list,
.cart_body *,
.item_detales *
    {font-family: 'Roboto'}


/* - Temp_classes_style
************************************************************************/
.wrapper,
.header,
.header_btn,
.header_tabs,
.hTab,
.hTabActive,
.header_logo,
.header_panel,
.ds_nav,
.ds_nav_list,
.mb_nav,
.mb_nav_list,
.container,
.left_sidebar,
.main,
.unit_list,
.right_sidebar,
.footer{font-style: unset;}

.header_logo{
    text-align: center;
    font-size: 31px;
    color: var(--red);
    font-weight: 900;
    padding: 5px 0 0 0;
    font-family: streamster;
    letter-spacing: 1px;
}
.scroll_block{
    overflow-y:hidden;
}
.btn_search{
    background-color: var(--black);
    border: 1px solid var(--black);
    color: var(--white);
}
.field_search{
    padding: 0 0 0 10px;
    float: left;
    border: 1px solid var(--black);
    border-radius: 0px!important;
    -webkit-border-radius: 0px!important;
    -webkit-appearance: none!important;
}


/* - Unselected_elem
************************************************************************/
.ct_dash *,
.count_units_cart,
.cuif_view_btn,
.buy_btn,
.header_tabs,
.ds_nav,
.it_btn_act,
.val_box,
.it_pr_box,
.chud_dp_name,
.chud_as_list_el,
.chud_liwar_list_el,
.chud_form_lable,
.chud_as_fval,
.chud_liwar_fval,
.chud_form_purchase_btn,
.header_logo{
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.hidden{
    display: none;
}

/* - Elem_cursor_style
************************************************************************/
.header_btn>span,
.mb_cat_list,
.cart_btn,
.hTab,
.ds_nav_item,
.val_box,
.mb_title_box,
.stap_page,
.btn_search,
.order_back_btn{
    cursor: pointer;
}

/* - Input default style clear
************************************************************************/
textarea:focus-within, textarea:focus, input:focus, input:focus-within {
    outline: none;
}
input[type="checkbox"] {
    display: none;
}
input[type= "checkbox"] + label span {
    width: 25px;
    height: 25px;
    margin: 0px 0px 0 0;
    background: url(../images/elems/red_checkbox.png) no-repeat;
    background-size: cover;
    background-position: left bottom;
    cursor: pointer;
    display: block;
    vertical-align: middle;
    float: left;
}
input[type="checkbox"]:checked + label span {
    background: url(../images/elems/red_checkbox_act.png) no-repeat;
    background-size: cover;
    background-position: left bottom;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #ссс;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
  background: inherit;
  border-radius: 0px;
}

/* - Color_variables
************************************************************************/
:root{
    --black: #000;
    --grey0: #484848;
    --grey1: #717171;
    --grey2: #949494;
    --grey3: #f5f5f5;
    --grey4: #fbfbfb;
    --grey5: #f1f1f1;
    --grey6: #505050;
    --grey7: #d7d7d7;
    --lblue: #f0f8ff;
    --white: #fff;
    --orange: #ff7315;
    --red: #d60000;
    --red1:#fbeded;
    --red2: #ff8a8a;
    --green1: #3da049;
    --link: #08006d;
}


/* - Grid_variable
************************************************************************/
.header			            {grid-area: h}
    .header_btn             {grid-area: hb}
    .header_tabs	        {grid-area: ht}
    .header_logo	        {grid-area: hl}
    .header_panel	        {grid-area: hp}
        .panel_wrap         {grid-area: pw}
        .search_wrap        {grid-area: srw}
            .field_search   {grid-area: fsr}
            .btn_search     {grid-area: bsr}
        .cart_wrap          {grid-area: ctw}
.ds_nav			            {grid-area: n}
    .ds_nav_list	        {grid-area: nl}
.mb_nav                     {grid-area: mn}
    .mb_nav_list            {grid-area: mnl}
.container		            {grid-area: c}
    .left_sidebar	        {grid-area: l}
    .main			        {grid-area: m}
        .breadcrumbs        {grid-area: bc}
        .unit_list          {grid-area: unl}
    .right_sidebar	        {grid-area: r}
.footer			            {grid-area: f}




/* - Layout_adaptation_0+
************************************************************************/
@media screen and (min-width: 0px){
    .wrapper{
        grid-template-columns: 20fr;
        grid-template-rows: 50px auto 50px;
        grid-template-areas: "h" "c" "f";
    }
    .header{
        grid-template-rows:auto;
        grid-template-columns: 4fr 16fr;
        grid-template-areas: "hb hp";
    }
    .header_panel{
        grid-template-rows: 10px 30px 10px;
        grid-template-areas: "." "pw" ".";
    }
    .panel_wrap{
        grid-template-columns: 15fr 5fr;
        grid-template-areas: "srw ctw";

    }
    .search_wrap{
        grid-template-columns: minmax(110px, 16fr) 4fr;
        grid-template-areas: "fsr bsr";
        grid-template-rows: auto;
    }
    .cart_btn{
        position: relative;
        width: 55px;
        margin: 0 auto;
    }
    .count_units_cart{
        position: absolute;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: var(--red);
        left: 55%;
        right: 45%;
        color: var(--white);
        text-align: center;
        font-size: 12px;
        overflow: hidden;
        border: 2px solid var(--white);
        box-sizing: content-box;
        top: -4px;
    }
    .mb_nav{
        position: fixed;
        top: 50px;
        left: -105%;
        width: 100%;
        height: 102%;
        background: var(--grey3);
        overflow-y: auto;
        z-index: 10;
        transition: 0.5s;
        box-shadow: 0px 3px 5px 0px var(--black);
        padding: 0 0 60px 0;
    }
    .mb_nav_visible{
        left: 0%;
    }
    .mb_title_box{
        padding: 10px 15px;
        height: 50px;
        border-bottom: 1px dotted var(--grey1);
    }
    .mb_title_ico{
        width: 30px;
        height: 100%;
        float: left;
    }
    .mb_title_text{
        padding: 5px 0 0px 20px;
        text-transform: uppercase;
        font-size: 16px;
        letter-spacing: 2px;
        float: left;
    }
    .mb_cat_list{
        overflow: hidden;
        height: 0px;
        transition: .5s;
    }
    .mb_cat_list_visible{
        height: auto;
    }
    .mb_nav_list>ul, .mb_nav_list>ul>li{
        list-style: none;
    }
    .mb_cat_list>li{
        font-size: 18px;
        height: 35px;
        border-bottom: 1px solid #d0d0d0;
        padding: 0 0 0 60px;
        background: var(--white);
        list-style: none;
    }
    .mb_cat_list>li:active{
        background: var(--grey2);
        color: var(--white);
    }
    .mb_cat_list li a {
        width: 100%;
        height: 100%;
        display: block;
        color: inherit;
    }
    .mb_item_ico{
        width: 20px;
        height: 100%;
        float: left;
        margin-right: 10px;
    }
    .mb_item_text{
        float: left;
        padding: 6px 0 0 0;
    }
    .cart_body{
        position: fixed;
        padding: 10px 10px 150px 10px;
        top: 50px;
        right: -105%;
        width: 100%;
        height: 102%;
        background: rgba(0, 0, 0, 0.70);
        overflow-y: auto;
        z-index: 10;
        transition: 0.5s;
        box-shadow: 0px 3px 5px 0px var(--black);
    }
    .cart_body_visible{
        right: 0%;
    }
    .cart_head{
        width: 100%;
        height: 30px;
        overflow: hidden;
        margin: 0 0 10px 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom: 1px solid var(--white);
    }
    .cart_title{
        width: 70%;
        height: 100%;
        float: left;
        text-align: left;
        padding-top: 7px;
        font-weight: 500;
        color: var(--white);
    }
    .cart_total{
        width: 30%;
        height: 100%;
        float: left;
        text-align: right;
        padding-top: 7px;
        font-weight: 500;
        color: var(--white);
    }
    .cart_empty{
        position: relative;
        width: 100%;
        overflow: hidden;
        color: var(--white);
        text-align: center;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
    }
    .cart_empty_ico{
        width: 100%;
        height: 400px;
        display: block;
        background-size: 200px 200px;
        margin: auto auto;
    }
    .cart_unit {
        position: relative;
        width: 100%;
        height: 180px;
        overflow: hidden;
        margin: 0 0 10px 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        grid-template-columns: 1fr;
        grid-template-rows: 1.3fr 5fr;
        background: var(--white);
        box-shadow: 1px 1px 1px var(--grey1);
    }
    .cu_item_desc {
        overflow: hidden;
        grid-template-columns: 1fr 11fr 2fr;
        grid-template-rows: 1fr;
        border-bottom: 1px dotted var(--grey1);
    }
    .cui_checkbox {
        float: right;
        width: 25px;
        height: 25px;
        margin: 5px 0px 0 5px;
    }
    .cui_desc_text {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 10px 5px 0 10px;
        color: var(--red);
        font-weight: 600;
    }
    .cu_item_wrap {
        grid-template-columns: minmax(135px, 245px) 4fr;
        grid-template-rows: 1fr;
    }
    .cu_item_iwrap {
        padding: 5px;
    }
    .cu_item_img {
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100%;
        height: 100%;
    }
    .cu_item_body {
        grid-template-columns: 1fr;
        grid-template-rows: 6fr 2fr;
    }
    .cu_item_dash {
        grid-template-columns: 10fr;
        grid-template-rows: 1fr;
    }
    .cuid_det {
        grid-template-columns: 5fr 5fr;
        grid-template-rows: 3fr 3fr 3fr;
    }
    .cuid_det *{
        padding: 10px 0 0 0;
        font-size: 16px;
        color: var(--black);
    }
    .cuid_det>div:nth-child(2n){
        text-align: right;
    }

    .cui_count {
        grid-template-columns: 1fr;
        grid-template-rows: 5fr 5fr;
    }
    .cui_count * {
        padding: 20px 0 0 0;
    }
    .cui_count>div>.cui_count_btn{
        width: 100%;
        height: 20px;
        display: block;
    }
    .cuid_pr_in, .cuid_tl_in{
        padding-right: 10px;
    }
    .cuid_ct_in{
        padding: 5px 0 0 0;
    }
    .ct_dash {
        width: 80px;
        display: flex;
        padding: 0;
        height: 25px;
        border: 1px solid var(--grey2);
        border-radius: 2px;
        float: right;
        margin: 0 10px 0 0;
    }
    .ct_unit_minus, .ct_unit_plus {
        width: 25px;
        height: 100%;
        float: left;
        padding: 0 0 0 0;
        display: block;
        text-align: center;
        background: var(--grey2);
        color: var(--white);
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
    }
    .ct_unit_minus {
        border-right: 1px solid var(--grey2);
    }
    .ct_unit_plus {
        border-left: 1px solid var(--grey2);
    }
    .ct_unit_minus:active, .ct_unit_plus:active{
        background: var(--grey3);
        color: var(--grey1);
    }
    .ct_unit_val {
        padding: 0;
        width: 30px;
        height: 100%;
        float: left;
        border: none;
        text-align: center;
    }
    .cu_item_foot {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    .cuif_del{
        padding: 0 0 0 0;
    }
    .cuif_del>.icon{
        width: 20px;
        height: 100%;
        display: block;
        margin: 0 5px 0 0;
        float: right;
        cursor: pointer;
    }
    .cuif_view_btn {
        height: 27px;
        border: 1px solid var(--black);
        text-align: center;
        padding: 3px 30px 0;
        float: right;
        margin: 0px 8px 0 0;
        background: var(--grey3);
        cursor: pointer;
        color: var(--black);
    }
    .cuif_view_btn:hover{
        box-shadow: 1px 1px 1px #dcdcdc;
    }
    .cuif_view_btn:active{
        color: var(--white);
        background: var(--grey1);
    }
    .cart_footer{
        position: fixed;
        height: 80px;
        width: calc(100% - 23px);
        overflow: hidden;
        padding: 15px 15px 0 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-top: 1px solid var(--white);
        bottom: 0px;
        background: var(--grey0);
    }
    .buy_btn{
        width: 200px;
        height: 30px;
        border: 1px solid var(--white);
        margin: 10px auto;
        text-align: center;
        padding: 7px;
        color: var(--white);
        background: var(--grey6);
        text-transform: uppercase;
        cursor: pointer;
        font-size: 14px;
    }
    .buy_btn:active{
        background: var(--white);
        color: var(--grey6);
    }
    .container{
        background: var(--grey3);
        grid-template-rows:auto;
        grid-template-columns: 20fr;
	    grid-template-areas: "m";
    }
    .main{
        grid-template-columns: 20fr;
        grid-template-rows: minmax(0px, auto) auto;
    }
    .search_result{
        position: absolute;
        top: 0;
        bottom: 0;
        height: max-content;
        width: 70%;
        margin: auto;
        right: 0;
        left: 0;
        text-align: center;
    }
    .unit_list{
        justify-content: center;
        flex-wrap: wrap;
        align-content: baseline;
        height: 100%;
    }
    .unit_wrap{
        position: relative;
        width: 280px;
        height: 420px;
        overflow: hidden;
        padding: 10px;
        margin: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 1px solid var(--grey7);
        background: var(--white);
        position: relative;
    }
    .unit_image{
        background-position: center; 
        background-repeat: no-repeat; 
        background-size: contain;
        width: 100%;
        height: 70%;
    }
    .unit_title{
        white-space: normal;
        display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        position: relative;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        max-height: 40px;
        font-size: 16px;
        margin: 5px 0 0 0;
        font-weight: 400;
        color: var(--black);
    }
    .unit_star_wrap{
        background: url(/images/vector/star.svg);
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        height: 14px;
        width: 88px;
        position: absolute;
        bottom: 50px;
    }
    .unit_price{
        display: table;
        width: 100%;
        position: absolute;
        bottom: 0px;
        left: 0;
        padding: 10px;
    }
    .unit_old_price{
        font-size: 20px;
        color: var(--grey2);
        width: 50%;
        float: left;
        padding: 5px 0 0 0;
        text-decoration: line-through;
    }
    .unit_now_price{
        text-align: right;
        font-size: 25px;
        font-weight: 600;
        width: 50%;
        float: right;
        color: var(--grey1);
    }
    .unit_price_currency{
        font-size: 14px;
    }
    .unit_hot_price{
        color: var(--red);
    }
    .item_detales{
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(300px, auto);
        margin: 10px 0 0 0;
        grid-gap: 10px;
    }
    .it_det_wrap{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-gap: 10px;
    }    
    .it_gal_box{
        padding: 0 10px; 
    }
    .it_buy_box{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        padding: 0 10px 0 10px;
        font-size: 14px;
    }
    .it_com_wrap{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .it_desc_box{
        padding: 0 10px 10px;
    }
    .it_desc{
        background: var(--white);
        min-width: 300px;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        /*box-shadow: 1px 1px 1px var(--grey2);*/
        border: 1px solid var(--grey7);
        padding: 10px;
    }
    .it_dash{
        background: var(--white);
        min-width: 300px;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        /*box-shadow: 1px 1px 1px var(--grey2);*/
        border: 1px solid var(--grey7);
        padding: 10px;
    }
    .it_dash_title{
        padding: 0 0 10px 0;
        font-size: 16px;
        position: relative;
        color: var(--red);
    }
    .it_dash_title:after{
        content: "";
        position: absolute;
        width: 100%;
        display: block;
        border-bottom: 1px solid var(--grey2);
        height: 10px;
    }
    .it_dash_separ{
        border-bottom: 1px dashed var(--grey2);
    }
    .it_dash_info{
        width: 100%;
        padding: 5px 0;
    }
    .it_count_box {
        display: table;
        text-align: center;
        height: 30px;
        border: 1px solid var(--grey1);
        border-radius: 2px;
    }
    .val_box{
        width: 40px;
        height: 27px;
        float: left;
        border: none;
        text-align: center;
        font-size: 14px;
    }
    .count_plus, .count_minus{
        width: 30px;
        height: 100%;
        float: left;
        cursor: pointer;
        background: var(--grey1);
        color: var(--white);
        font-size: 23px;
        font-weight: 600;
    }
    .count_plus:active, .count_minus:active{
        background: var(--grey3);
        color: var(--grey1);
    }
    .count_plus{
        border-left: 1px solid var(--grey1);
    }
    .count_minus{
        border-right: 1px solid var(--grey1);
    }
    .it_dash_action{
        width: 100%;
        padding: 5px 0; 
    }
    .it_delivery,
    .it_count,
    .it_price_box,
    .it_btn_box,
    .it_vendor{
        padding: 5px 0;
        display: table;
        width: 100%;
    }
    .it_btn_box{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: minmax(0, 200px) minmax(0, 200px);
        justify-content: start;
    }
    .it_delivery,
    .it_vendor{
        color: var(--grey1);
    }
    .delivery_true,
    .delivery_false{
    padding: 1px 5px;
    border-radius: 2px;
    margin: 0 0 0 10px;
    font-size: 12px;
    color: var(--white);
    }
    .delivery_true{
        background: var(--green1);
    }
    .delivery_false{
        background: var(--grey2);
    }
    .it_pr_box{
        display: table;
        width: calc(50% - 10px);
        float: left;
        padding: 5px 0;
    }
    .it_count{
        margin-right: 20px;
    }
    .it_price{
        text-align: right;
        font-size: 25px;
        font-weight: 600;
        color: var(--grey1);
    }
    .it_btn_act{
        display: table;
        float: left;
        height: 30px;
        border: 1px solid var(--black);
        padding: 3px 0;
        text-align: center;
        margin: 10px 0 0 0;
        cursor: pointer;
        font-size: 14px;
        color: var(--black);
        font-family: 'Oswald';
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    .it_btn_act:hover{
        background: var(--black);
        color: var(--white);
    }
    .it_btn_act:active{
        background: var(--grey1);
        color: var(--white);
    }

    .it_dash_def_cont{
        color: var(--grey2);
        font-size: 12px;
        width: 100%;
        padding: 5px 0;  
    }

    .it_dash_pay_method,
    .it_dash_delivery,
    .it_dash_guarantee{
        padding: 5px 0;
    }
    .it_dash_pay_method>h4,
    .it_dash_delivery>h4,
    .it_dash_guarantee>h4{
        color: var(--grey1);
    }
    .pay_method_cont,
    .delivery_cont,
    .guarantee_cont{
        padding: 0 10px;
    }

    .checkout_wrapper_box{
        grid-template-columns: 1fr;
        grid-template-rows: minmax(40px, 40px) auto;
        grid-gap: 10px;
        margin: 10px;
        height: max-content;
        padding: 0 10px 0 10px;
        background: var(--white);
    }

    .checkout_inner_title {
        width: 100%;
        border-bottom: 1px dashed var(--grey1);
        font-size: 20px;
        font-family: 'Oswald';
        letter-spacing: 1px;
        align-items: center;
        padding: 0 0 0 10px;
    }

    /*layout 0px*/
    .checkout_inner_order{
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }

    .checkout_inner_userData{
        grid-row-start: 2;
        border-right: none;
    }

    .chud_inner_form{
        width: 95%;
        margin: 0px auto 85px;
    }

    .chud_form_field {
        display: table;
        width: 100%;
        margin: 0 0 15px 0;
        height: 30px;
        padding: 0px 5px 0px 5px;
        border-radius: 2px;
        text-transform: capitalize;
        background-image: none;
        border: none;
        border-bottom: 1px solid var(--grey2);
        background: var(--grey4);
        box-shadow: 0px 0px 2px #0000002e;
    }

    .chud_form_field:focus{
        border-bottom: 1px solid var(--grey1);
        background: var(--grey3);
    }

    .chud_form_lable {
        font-size: 13px;
        font-weight: 500;
        padding: 10px 0 10px 0;
    }

    .chud_delivery_point{
        cursor: default;
        padding: 7px 0 6px 0;
    }

    .chud_dp_ico {
        width: 15px;
        height: 15px;
        display: block;
        float: left;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .cdi{
        position: absolute;
        top: 7px;
        left: 5px;
    }
    .chud_dp_name {
        display: block;
        font: 400 13.3333px Arial;
        text-transform: none;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 1px 0 0 10px;
    }
    .chud_peml{
        text-transform: none;
    }
    .chud_tarea_inp_wrap{
        height: auto;
        overflow: hidden;
        resize: inherit;
        text-transform: inherit;
        font-family: inherit;
        font: 400 13.3333px Arial;
        padding: 7px 5px 7px 5px;
    }

    .chud_as_inner,
    .chud_liwar_inner,
    .chud_lipay_inner{
        position: relative;
        cursor: pointer;
    }

    .chud_as_fval,
    .chud_liwar_fval{
        font-size: 14px;
        padding: 7px 0 6px 0;
        font: 400 13.3333px Arial;
        color: var(--grey1);
        text-transform: none;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
    }

    .chud_lipay_fval{
        font-size: 14px;
        padding: 7px 0 6px 0;
        font: 400 13.3333px Arial;
        color: var(--grey1);
        text-transform: none;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        background-position: left;
        background-repeat: no-repeat;
        background-size: 16px;
    }



    .el_selected{
        color: var(--black);
    }

    .chud_as_sel_wrap,
    .chud_liwar_sel_wrap,
    .chud_lipay_sel_wrap{
        border: 1px solid var(--grey2);
        padding: 5px;
        position: absolute;
        width: 100%;
        background: var( --grey4);
        margin: -10px 0 0 0;
        border-radius: 2px;
        z-index: 10;
    }

    .chud_as_inpfield{
        width: 100%;
        height: 30px;
        padding: 0 5px 0 5px;
        border-radius: 2px;
        background-image: none;
        border: none;
        border: 1px solid var(--orange);
        background: var(--white);
    }

    .chud_as_list_wrap {
        margin-top: 10px;
        max-height: 180px;
        overflow-x: auto;
        background: var(--grey4);
    }

    .chud_liwar_list_wrap,
    .chud_lipay_list_wrap{
        max-height: 220px;
        overflow-x: auto;
        background: var(--grey4);
    }

    .chud_as_dump_list,
    .chud_liwar_dump_list,
    .chud_lipay_dump_list{
        list-style: none;
    }

    .chud_as_list_el,
    .chud_liwar_list_el,
    .chud_lipay_list_el{
        padding: 5px 15px 5px 0px;
        margin: 1px 1px;
        cursor: pointer;
        font-size: 12px;
        background: var(--white);
    }

    .chud_as_list_el:hover,
    .chud_liwar_list_el:hover,
    .chud_lipay_list_el:hover {
        background-color: var(--grey5);
        padding-left: 1px;
    }
    .chud_liwar_error_el{
        padding: 5px 5px 5px 5px;
        margin: 1px;
        font-size: 12px;
        color: var(--red);
        text-align: center;
    }

    .chud_as_list_el:active, .chud_liwar_list_el:active{
        background: var(--grey3);
    }

    .chud_lipay_inp_wrap{
        position: relative;
    }
    .chud_elem_ico{
        background-position: left;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-left: 25px!important;
    }
    .chud_lipay_ico{
        padding-left: 25px!important;
    }    
    .chud_fs_btn{
        display: none;
    }
    .chud_err{
        border: 1px solid var(--red2);
    }
    .chud_errors_field {
        background: var(--red1);
        font-size: 12px;
        color: var(--grey0);
    }
    
    .chud_err_content{
        padding: 10px 10px 10px 10px;
    }
    .chud_err_txt{
        color: var(--red);
        letter-spacing: 0.7px;
    }
    .chud_form_purchase_btn {
        margin: 30px auto 30px;
        background: none;
        border: 1px solid var(--black);
        padding: 5px 50px;
        text-transform: uppercase;
        font-family: 'Oswald';
        letter-spacing: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 13px;
        width: 170px;
    }
    .chud_form_purchase_btn:hover {
        background: var(--black);
        color: var(--white);
    }
    .chud_form_purchase_btn:active{
        background: var(--grey1);
        color: var(--white);
    }
    .chud_liwar_loader{
        height: 35px;
    }
    .chud_war_loader{
        margin: 2px auto;
        width: 30px;
        height: 30px;
    }
    
    .chud_wl_one{border-bottom: 1px solid var(--black)}
    .chud_wl_two{border-right: 1px solid var(--black)}
    .chud_wl_thr{border-top: 1px solid var(--black)}

    .chuc_itemsList_wrap{
        padding: 10px;
        grid-gap: 10px;
        height: max-content;
    }

    .chuc_inner_item{
        position: relative;
        height: 120px;
        overflow: hidden;
        grid-template-columns: 1fr;
        grid-template-rows: 3fr 10fr;
        border-bottom: 1px dashed var(--grey2);
    }

    .chucItem_title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--red);
        text-shadow: 0px 0px 0px var(--black);
        font-family: 'Oswald';
        letter-spacing: 0.5px;
        text-decoration: underline;
        cursor: pointer;
    }

    .chucItem_detales{
        grid-template-columns: minmax(100px, 100px) 10fr;
        grid-template-rows: 1fr;
        grid-gap: 10px;
    }

    .chucItem_img{
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .chucItem_data{
        grid-template-rows: 1fr 1fr 1fr;
        font-size: 14px;
    }

    .chitData{
        grid-template-columns: 5fr 5fr;
        grid-template-rows: 1fr;
    }

    .chitData * {
        align-self: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .itdtv{
        text-align: right;
    }

    .chuc_itemsTotalPrice_wrap{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        font-weight: 600;
        color: var(--grey0);
    }
    .chitTotal_val{
        text-align: right;
    }

    .chuc_itemsDesc {
        color: var(--grey0);
        font-size: 12px;
        padding: 10px 10px;
        margin: 10px 0;
        background: var(--lblue);
        grid-template-rows: auto;
        grid-template-columns: 0.3fr 9.7fr;
    }

    .chuc_itemsList_Preload{
        height: 300px;
        justify-content: center;
        align-content: center;
    }
    .chucit_img_pre{
        width: 100px;
        height: 100px;
        background-image: url(../images/elems/preloader.gif);
        background-repeat: no-repeat;
        background-position: center;
    }

    .chuc_inner_empty {
        grid-gap: 10px;
        grid-template-columns: 1fr;
    }

    .chucEmpty_title {
        width: 100%;
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--red);
        text-align: center;
        font-weight: 500;
        height: 30px;
        align-items: center;
    }

    .chuk_empty_ico {
        height: 200px;
        display: block;
        background-size: 150px 150px;
        margin: auto auto;
    }

    .chucEmpty_link_bac{
        color: var(--link);
        text-decoration: underline;
    }

    .chucEmpty_back{
        align-self: center;
        justify-content: center;
        padding: 10px 0;
    }

    .order_wrapper_box{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .order_inner_box{
        grid-template-columns: 1fr;
        grid-template-rows: minmax(50px, auto) auto auto minmax(50px, auto) minmax(50px, auto);
        align-self: start;
        justify-items: center;
        text-align: center;
        grid-gap: 10px;
        margin: 10px;
        height: max-content;
        padding: 40px 10px 50px;
        background: var(--white);
    }

    .order_inner_title{
        font-family: 'Oswald';
        letter-spacing: 0.5px;
    }

    .order_back_btn{
        font-size: 13px;
        border: 1px solid var(--black);
        padding: 5px 30px;
        text-transform: uppercase;
        font-family: 'Oswald';
        letter-spacing: 2px;
        text-align: center;
    }
    .order_back_btn:hover {
        color: var(--white);
        background: var(--black);
    }
    .order_back_btn:active {
        background: var(--grey1);
        color: var(--white);
    }
    .order_inner_desc{
        border-bottom: 1px dashed var(--grey2);
    }

    .order_inner_title,
    .order_inner_img,
    .order_inner_desc,
    .order_inner_back{
        align-self: center;
        padding: 10px 0;
    }


    .order_inner_items{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
    .order_prew_item {
        display: grid;
        grid-template-columns: 65px 230px;
        grid-gap: 5px;
        border: 1px solid var(--grey2);
    }

    .opw_item_img{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 60px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .opw_item_desc {
        display: grid;
    }

    .opw_item_desc_title {
        font-size: 14px;
        text-align: right;
        color: var(--red);
        font-weight: 500;
        letter-spacing: 0.5px;
        align-self: center;
        padding: 0 10px 0 5px;
    }
    .opw_item_desc_price {
        font-size: 15px;
        text-align: right;
        color: var(--grey0);
        font-weight: 500;
        letter-spacing: 0.5px;
        align-self: center;
        padding: 0 10px 0 5px;
    }


    .order_img_thx{
        width: 100px;
        height: 100px;
        background-size: contain;
        display: block;
    }

    .footer{
        background: var(--black);
        color: var(--white);
        z-index: 9;
    }


    /*--------------------------slider_0+--------------------------*/
    .slider{
        background: var(--white);
        min-width: 300px;
        width: 100%;
        max-width: 600px;
        min-height: 300px;
        height: 100%;
        max-height: 450px;
        margin: auto;
        position: relative;
        /*box-shadow: 1px 1px 1px var(--grey2);*/
        border: 1px solid var(--grey7);
        padding: 10px;
    }
    
    /*------------------------slider_end_0+------------------------*/

    .mb_title_box,
    .cui_checkbox,
    .buy_btn,
    .order_back_btn,
    .chud_form_purchase_btn
    {display: block}

    .header_btn,
    .cart_wrap,
    .panel_wrap,
    .search_wrap,
    .header_panel,
    .footer,
    .wrapper,
    .header,
    .container,
    .main,
    .cart_unit,
    .cu_item_desc,
    .cu_item_wrap,
    .cu_item_body,
    .cu_item_dash,
    .cuid_det,
    .cui_count,
    .cu_item_foot,
    .item_detales,
    .it_det_wrap,
    .it_gal_box,
    .it_buy_box,
    .it_com_wrap,
    .it_desc_box,
    .checkout_wrapper_box,
    .checkout_inner_title,
    .checkout_inner_order,
    .checkout_inner_userData, 
    .checkout_inner_userCart,
    .chuc_itemsList_wrap,
    .chuc_inner_item,
    .chucItem_img,
    .chucItem_detales,
    .chitData,
    .chucItem_data,
    .chuc_itemsTotalPrice_wrap,
    .chuc_itemsDesc,
    .order_inner_box,
    .order_wrapper_box,
    .chucEmpty_back,
    .chucEmpty_title,
    .chuc_inner_empty,
    .chuc_itemsList_Preload
    {display: grid;}

    .unit_list
    {display: flex;}

    .left_sidebar,
    .right_sidebar,
    .ds_nav,
    .header_tabs,
    .header_logo,
    .breadcrumbs,
    .checkout_separator_box,
    .order_separator_box
    {display: none}
}


/* - Layout_adaptation_320+
************************************************************************/
@media screen and (min-width: 320px){
    .cu_item_wrap {
        grid-template-columns: minmax(135px, 135px) 4fr;
    }
}

/* - Layout_adaptation_450+
************************************************************************/
@media screen and (min-width: 450px){
    .cu_item_wrap {
        grid-template-columns: minmax(135px, 200px) 4fr;
    }

    .unit_wrap{
        width: 200px;
        height: 300px;
    }
    .order_inner_box {
        grid-gap: 40px;
        height: 100%;
        padding: 40px 10px 150px;
    }
}

/* - Layout_adaptation_580+
************************************************************************/
@media screen and (min-width: 580px){
    .cu_item_wrap {
        grid-template-columns: minmax(135px, 245px) 4fr;
    }
    .unit_wrap{
        width: 250px;
        height: 375px;
    }
    .it_desc img {
        width: 50%!important;
    }

    
}


/* - Layout_adaptation_720+
************************************************************************/
@media screen and (min-width: 720px){
    .wrapper{
        grid-template-columns: 20fr;
        grid-template-rows: 50px minmax(40px, 40px) auto 50px;
        grid-template-areas: "h" "n" "c" "f";
    }
    .header{
        grid-template-columns: 0.5fr 8fr 2.5fr 9fr;
        grid-template-areas: ". ht . hp";
    }
    .header_tabs{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .hTab{
        border-top: 1px solid var(--black);
        margin: 20px 1px 0px 0;
        padding: 4px 0 0 0;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-align: center;
        font-size: 14px;
        background: var(--black);
        color: var(--white);
    }
    .hTabActive{
        background: var(--white);
        color: var(--grey1);
    }
    .hTabActive:nth-child(1){
        border-left: 1px solid var(--black);
    }
    .hTabActive:last-child{
        border-right: 1px solid var(--black);
    }
    .ds_nav{
        grid-template-rows:auto;
        grid-template-columns: 1fr 18fr 1fr;
        grid-template-areas: ". nl .";
        background: var(--black);
        color: var(--white);
    }
    .ds_wrap_nav_list{
        list-style: none;
        text-align: center;
    }
    .ds_wrap_nav_list *{
        color: var(--white);
    }
    .ds_nav_item{
        margin: 7px 0px 7px 0px;
        letter-spacing: 1px;
    }
    .ds_nav_item:hover,
    .ds_sel_item{
        text-decoration: underline;
    }
    .ds_sel_item > a{
        color: var(--orange);
    }
    .separated{
        margin: 0 10px 0 10px;
    }

    .cart_body{
        top: 90px;
        width: 100%;
        max-width: 500px;
        padding-bottom: 190px;
    }

    .cart_footer{
        width: calc(100% - 23px);
        max-width: 477px;
    }

    .container{
        grid-template-columns: 1fr 18fr 1fr;
        grid-template-areas: ". m ."
    }

    .main{
        grid-template-rows: 40px auto;
        grid-template-areas: "bc" "unl";
    }

    .bc_list_wrap{
        list-style: none;
    }

    .stap_page{
        margin: 14px 0px 0px 0px;
        font-size: 12px;
        text-decoration: underline;
    }
    .stap_page a{
        color: var(--grey1);
    }
    .stap_page:last-child{
        color: var(--black);
        text-decoration: none;
        cursor: default;
    }

    .bc_list_wrap>.separated{
        margin: 0 5px;
        color: var(--grey1);
    }

    .item_detales{
        margin: 0 0 0 0;
    }
    .it_det_wrap{
        grid-template-columns: 11fr 9fr;
        grid-template-rows: auto;
    }

    .it_gal_box{
        padding: 0 0 0 0;
    }

    .it_buy_box{
        padding: 0 0 0 0;
    }

    .it_dash{
    	min-width: 300px;
    	max-width: 100%;
    	margin: 0 auto;
    }
    .it_desc_box{
        padding: 0 0;
    }
    .it_desc{
        max-width: none;
    }
    .slider{
        min-height: 400px;
    }

    .checkout_wrapper_box, .order_inner_box{
        margin-top: -30px;
    }

    .checkout_inner_order{
        grid-template-columns: 10fr 10fr;
        grid-template-rows: 1fr;
    }

    .checkout_inner_title{
        padding: 0 0 0 6%;
    }

    .checkout_inner_userData{
        grid-row-start: 1;
        border-right: 1px dotted var(--grey2);
    }

    .chud_inner_form{
        width: 75%;
    }





    .stap_page,
    .separated,
    .ds_nav_item{display: inline-block;}


    .ds_nav,
    .breadcrumbs,
    .checkout_separator_box,
    .order_separator_box,
    .header_tabs{display: grid;}

    .mb_nav,
    .separated:last-child,
    .header_btn{display: none}
}


/* - Layout_adaptation_1024+
************************************************************************/
@media screen and (min-width: 1024px){
    .header{
        grid-template-columns: 0.5fr 6fr 6fr 6.5fr;
        grid-template-areas: ". ht hl hp";
    }

    .it_det_wrap{
        grid-template-columns: minmax(0px, 600px) auto;
        grid-template-rows: auto;
    }
    .header_btn{visibility: hidden;}
    .header_logo{display: grid}

    /*--------------------------slider_1024+--------------------------*/
    .slider{
        margin: 0;
    }
    /*--------------------------slider_1024+--------------------------*/    
    	
}


/* - Layout_adaptation_1280+
************************************************************************/
@media screen and (min-width: 1280px){
/*    .it_det_wrap{
        grid-template-columns: minmax(0px, 600px) auto;
        grid-template-rows: auto;
    }*/
}


/* - Layout_adaptation_1366+
************************************************************************/
@media screen and (min-width: 1366px){
    .header {
        grid-template-columns: 1fr 6fr 6fr 6fr 1fr;
        grid-template-areas: ". ht hl hp .";
    }
}


/* - Layout_adaptation_1920+
************************************************************************/
@media screen and (min-width: 1920px){
    .header{
        grid-template-columns: 3fr 5fr 4fr 5fr 3fr;
        grid-template-areas: ". ht hl hp .";
    }
    .ds_nav{
        grid-template-columns: 3fr 14fr 3fr;
        grid-template-areas: ". nl .";       
    }
	.container{
        grid-template-columns: 3fr 14fr 3fr;
    }
}



/* - Icons
************************************************************************/
.ico_search{
    background-image: url(../images/vector/search.svg);
    background-size: 20px 20px;
}
.ico_cart{
    background-image: url(../images/vector/cart.svg);
    background-size: 30px 30px;
}
.ico_cart_empty{
    background-image: url(../images/vector/cart_empty.svg);
}
.ico_menu{
    background-image: url(../images/vector/menu.svg);
    background-size: 30px 30px;
}
.ico_home{background-image: url(../images/vector/home.svg);}
.ico_men{background-image: url(../images/vector/men.svg);}
.ico_female{background-image: url(../images/vector/female.svg);}
.ico_allitems{background-image: url(../images/vector/allitems.svg);}
.ico_bag{background-image: url(../images/vector/bag.svg);}
.ico_backpack{background-image: url(../images/vector/backpack.svg);}
.ico_clutch{background-image: url(../images/vector/clutch.svg);}
.ico_mpurse{background-image: url(../images/vector/m_purse.svg);}
.ico_wpurse{background-image: url(../images/vector/w_purse.svg);}
.ico_necklace{background-image: url(../images/vector/necklace.svg);}
.ico_accessory{background-image: url(../images/vector/accessory.svg);}
.ico_belt{background-image: url(../images/vector/belt.svg);}
.ico_top{background-image: url(../images/vector/top.svg);}
.ico_coupon{background-image: url(../images/vector/coupon.svg);}
.ico_witness{background-image: url(../images/vector/witness.svg);}
.ico_proposal{background-image: url(../images/vector/proposal.svg);}
.ico_forklift{background-image: url(../images/vector/forklift.svg);}
.ico_del{background-image: url(../images/vector/delete.svg);}
.ico_minus{background-image: url(../images/vector/minus.svg);}
.ico_plus{background-image: url(../images/vector/plus.svg);}
.ico_watch{background-image: url(../images/vector/watch.svg);}
.ico_delivery{background-image: url(../images/vector/delivery.svg);}
.ico_np{background-image: url(../images/elems/nova_poshta_37x37.png);}
.ico_pb{background-image: url(../images/elems/privat_bank_37x37.png);}
.ico_ord{background-image: url(../images/elems/red_checkmark.png);}
.ico_failed{background-image: url(../images/elems/failed.jpg);}

.icon{
    background-repeat: no-repeat;
    background-position: center;
}


/* PRELOADER
*************************************************************/
.loader {
    display: table;
    position: relative;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    perspective: 900px;
}

.loader_inner {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.loader_inner.inner_one {
    left: 0%;
    top: 0%;
    animation: loader_rotate-one 1.6s linear infinite;
    -o-animation: loader_rotate-one 1.6s linear infinite;
    -ms-animation: loader_rotate-one 1.6s linear infinite;
    -webkit-animation: loader_rotate-one 1.6s linear infinite;
    -moz-animation: loader_rotate-one 1.6s linear infinite;
}

.loader_inner.inner_two {
    right: 0%;
    top: 0%;
    animation: loader_rotate-two 1.6s linear infinite;
    -o-animation: loader_rotate-two 1.6s linear infinite;
    -ms-animation: loader_rotate-two 1.6s linear infinite;
    -webkit-animation: loader_rotate-two 1.6s linear infinite;
    -moz-animation: loader_rotate-two 1.6s linear infinite;
}

.loader_inner.inner_three {
    right: 0%;
    bottom: 0%;
    animation: loader_rotate-three 1.6s linear infinite;
    -o-animation: loader_rotate-three 1.6s linear infinite;
    -ms-animation: loader_rotate-three 1.6s linear infinite;
    -webkit-animation: loader_rotate-three 1.6s linear infinite;
    -moz-animation: loader_rotate-three 1.6s linear infinite;
}

@keyframes loader_rotate-one {
    0% {transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}
    100% {transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}
    }
@-o-keyframes loader_rotate-one {
    0% {-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}
    100% {-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}
    }
@-ms-keyframes loader_rotate-one {
    0% {-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}
    100% {-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}
    }
@-webkit-keyframes loader_rotate-one {
    0% {-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}
    100% {-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}
    }
@-moz-keyframes loader_rotate-one {
    0% {-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}
    100% {-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}
    }
@keyframes loader_rotate-two {
    0% {transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);}
    100% {transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}
    }
@-o-keyframes loader_rotate-two {
    0% {-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);}
    100% {-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}
    }
@-ms-keyframes loader_rotate-two {
    0% {-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);}
    100% {-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}
    }
@-webkit-keyframes loader_rotate-two {
    0% {-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);}
    100% {-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}
    }
@-moz-keyframes loader_rotate-two {
    0% {-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);}
    100% {-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}
    }
@keyframes loader_rotate-three {
    0% {transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);}
    100% {transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}
    }
@-o-keyframes loader_rotate-three {
    0% {-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);}
    100% {-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}
    }
@-ms-keyframes loader_rotate-three {
    0% {-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);}
    100% {-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}
    }
@-webkit-keyframes loader_rotate-three {
    0% {-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);}
    100% {-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}
    }
@-moz-keyframes loader_rotate-three {
    0% {-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);}
    100% {-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}
}