*{ box-sizing: border-box; font-family: 'Open Sans', sans-serif; touch-action: manipulation; -ms-touch-action: manipulation;}
/* *:not(.no-rule *){ margin: 0; padding: 0;} */
/* *{ margin: 0; padding: 0;} */
/* *:not(.no-rule *){ margin: revert; padding: revert} */
*:where(:not(.no-rule *)) { margin: 0; padding: 0}

html,body{ min-height: 100%;}
html.open-nav{ overflow-x: hidden;}

.p-c{ width: 100%;}
.p-c > div{ max-width: 1200px; padding: 20px 10px 0; margin: 0 auto;}

body{
    --blue:  #2e56dc;
    --green:  #33ad11;
    --star-yellow:  #f8ce0b;
    --black-bg: #000;
    --black-txt: #000;
    --black-o: 0, 0, 0;
    --white-bg: #fff;
    --white-txt: #fff;
    --white-o: 255, 255, 255;
}


body._1{
    --main-blue-bg: #eaeff2;
    --main-blue-bg-o: 234, 239, 242;
    --main-blue-txt: #344558;
    --main-dark-blue-txt: #162237;
    --main-blue-border: #d8dee1;
    --main-blue-txt-o: 121, 126, 145;
    --main-dark-blue-txt-o: 35, 42, 65;
    --main-red: #EA4461;
    --main-dark-red: #d42744;
    --main-red-o: 234, 68, 97;
}

body._2{
    --main-blue-bg: #f2eaeb;
    --main-blue-bg-o: 234, 239, 242;

    --main-blue-txt: #58343c;
    --main-blue-txt-o: 88, 52, 60;
    --main-blue-border: #e1d8da;

    --main-dark-blue-txt: #373516;
    --main-dark-blue-txt-o: rgb(35, 42, 65);

    --main-red: #e26200;
    --main-red-o: 226, 98, 0;
    --main-dark-red: #974200;    
}

body._3{
    --main-blue-bg: #f1f1f1;
    --main-blue-bg-o: 255, 255, 255;

    --main-blue-txt: #00ad91;
    --main-blue-txt-o: 0, 173, 145;
    --main-blue-border: #d8e1e0;

    --main-dark-blue-txt: #005748;
    --main-dark-blue-txt-o: 0, 87, 72;

    --main-red: #005748;
    --main-red-o: 0, 87, 72;
    --main-dark-red: #00332b;    
}

body._4{
    --main-blue-bg: #fff5ff;
    --main-blue-bg-o: 255, 245, 255;
    --main-blue-txt: #500064;
    --main-blue-txt-o: 88, 0, 110;
    --main-blue-border: #ffedff;
    --main-dark-blue-txt: #380046;
    --main-dark-blue-txt-o: 255, 245, 255;
    --main-red: #c60099;
    --main-red-o: 1, 168, 118;
    --main-dark-red: #500064;  
}


body._5{
    --main-blue-bg: #f2f4f4;
    --main-blue-bg-o: 234, 242, 242;
    --main-blue-txt: #002e49;
    --main-blue-txt-o: 0, 89, 141;
    --main-blue-border: #f0f9ff;
    --main-dark-blue-txt: #01283f;
    --main-dark-blue-txt-o: 1, 40, 63;
    --main-red: #0088d2;
    --main-red-o: 1, 40, 63;
    --main-dark-red: #01283f; 
}
body._6{
    --main-blue-bg: #eaeff2;
    --main-blue-bg-o: 234, 239, 242;
    --main-blue-txt: #4122cc;
    --main-dark-blue-txt: #162237;
    --main-blue-border: #d8dee1;
    --main-blue-txt-o: 121, 126, 145;
    --main-dark-blue-txt-o: 35, 42, 65;
    --main-red: #4122cc;
    --main-dark-red: #281580;
    --main-red-o: 40, 21, 128;   
}

body._7{
    --main-blue-bg: #f1f1f1;
    --main-blue-bg-o: 255, 255, 255;

    --main-blue-txt: #008bad;
    --main-blue-txt-o: 0, 173, 145;
    --main-blue-border: #d8e1e0;

    --main-dark-blue-txt: #008bad;
    --main-dark-blue-txt-o: 0, 87, 72;

    --main-red: #008bad;
    --main-red-o: 0, 87, 72;
    --main-dark-red: #00332b;    
}
body._8 {
    --main-blue-bg: #f1f1f1;
    --main-blue-bg-o: 241, 241, 241;
    --main-blue-txt: #c7002c;
    --main-blue-txt-o: 241, 241, 241;
    --main-blue-border: #d7d7d7;
    --main-dark-blue-txt: #3a3a3a;
    --main-dark-blue-txt-o: rgb(0 0 0);
    --main-red: #3a3a3a;
    --main-red-o: 199, 0, 44;
    --main-dark-red: #c7002c;
}
body._9 {
    --main-blue-bg: #f5f5f5;
    --main-blue-bg-o: 255, 255, 255;
    --main-blue-txt: #008872;
    --main-blue-txt-o: 0, 173, 145;
    --main-blue-border: #e6f5f3;
    --main-dark-blue-txt: #007661;
    --main-dark-blue-txt-o: 0, 87, 72;
    --main-red: #005048;
    --main-red-o: 0, 87, 72;
    --main-dark-red: #00332b;
}
body._10 {
    --main-blue-bg: #eceff1;
    --main-blue-bg-o: 234, 239, 242;
    --main-blue-txt: #494058;
    --main-dark-blue-txt: #494058;
    --main-blue-border: #d8dee1;
    --main-blue-txt-o: 121, 126, 145;
    --main-dark-blue-txt-o: 35, 42, 65;
    --main-red: #ff9800;
    --main-dark-red: #0f0053;
    --main-red-o: 40, 21, 128;
}
body._11 {
    --main-blue-bg: #9e80430f;
    --main-blue-bg-o: 255, 255, 255;
    --main-blue-txt: #1b453d;
    --main-blue-txt-o: 0, 173, 145;
    --main-blue-border: #684b1133;
    --main-dark-blue-txt: #1b453d;
    --main-dark-blue-txt-o: 0, 87, 72;
    --main-red: #966d19;
    --main-red-o: 0, 87, 72;
    --main-dark-red: #142421;
}

body._12 {
    --main-blue-bg: #f1ece880;
    --main-blue-bg-o: 255, 255, 255;
    --main-blue-txt: #13354f;
    --main-blue-txt-o: 0, 173, 145;
    --main-blue-border: #684b1133;
    --main-dark-blue-txt: #8c4b41;
    --main-dark-blue-txt-o: 0, 87, 72;
    --main-red: #8b4a40;
    --main-red-o: 0, 87, 72;
    --main-dark-red: #030409;
}

body._13 {
    --main-blue-bg: #ececec;
    --main-blue-bg-o: 255, 255, 255;
    --main-blue-txt: #000000;
    --main-blue-txt-o: 0, 173, 145;
    --main-blue-border: #00000024;
    --main-dark-blue-txt: #000000;
    --main-dark-blue-txt-o: 0, 87, 72;
    --main-red: #e3c759;
    --main-red-o: 0, 87, 72;
    --main-dark-red: #142421;
}
body._14 {
    --main-blue-bg: #d7d43617;
    --main-blue-bg-o: 255, 255, 255;
    --main-blue-txt: #000000;
    --main-blue-txt-o: 0, 173, 145;
    --main-blue-border: #d7d4365e;
    --main-dark-blue-txt: #000000;
    --main-dark-blue-txt-o: 0, 87, 72;
    --main-red: #000000;
    --main-red-o: 0, 87, 72;
    --main-dark-red: #142421;
}
body._15 {
    --main-blue-bg: #1c453d12;
    --main-blue-bg-o: 255, 255, 255;
    --main-blue-txt: #1b453d;
    --main-blue-txt-o: 0, 173, 145;
    --main-blue-border: #1c453d33;
    --main-dark-blue-txt: #1b453d;
    --main-dark-blue-txt-o: 0, 87, 72;
    --main-red: #966d19;
    --main-red-o: 0, 87, 72;
    --main-dark-red: #142421;
}
button{
    font-family: 'Open Sans', sans-serif;
}
/* body.pink-theme{
    --main-blue-bg: #c1a9c6;
    --main-blue-txt: #8d4e88;
    --main-blue-border: #8d4e88;
    --main-blue-txt-o: 141, 78, 136;

    --main-red: #2e9d92;
    --main-red-0: 6, 157, 146;

    --black-bg: #000;
    --black-txt: #000000;
    --black-o: 0, 0, 0;

    --white-bg: #ffffff;
    --white-txt: #fff;
    --white-o: 255, 255, 255;

    --blue:  #2e56dc;
    --green:  #33ad11;
} */
/* :root{
    --main-blue-bg: #eaeff2;
    --main-blue-txt: #797e91;
    --main-blue-border: #d8dee1;
    --main-blue-txt-o: 121, 126, 145;
    --main-red: #ea44c3;
    --main-red-0: 234, 68, 195;
    --black-bg: #000;
    --black-txt: #000;
    --black-o: 0, 0, 0;
    --white-bg: #fff;
    --white-txt: #fff;
    --white-o: 255, 255, 255;
    --blue:  #2e56dc;
    --green:  #33ad11;
} */

body{
    position: relative;
    left: 0;
    transition: all .4s ease;
}

.pt-0{ padding-top: 0 !important;}
.d-none{ display: none;}

.fill{ min-height: calc((var(--vh, 1vh) * 100) - (60px + 302px));}

.blue-btn{ background-color: var(--main-blue-txt) !important; color: var(--white-bg) !important; border: 1px solid var(--main-blue-txt) !important;}
.blue-btn:hover{ background-color: var(--white-bg) !important; color: var(--main-blue-txt) !important;}
.blue-btn.outlined{ background-color: var(--white-bg) !important; color: var(--main-blue-txt) !important;}
.blue-btn.outlined:hover{ background-color: var(--main-blue-txt) !important; color: var(--white-txt) !important;}
.red-btn{}
.red-btn.outlined{}
.btn{ width: fit-content; border-radius: 3px; transition: all .2s ease; display: flex; align-items: center; justify-content: baseline; padding: 7px 15px; text-decoration: none; font-weight: 600; font-size: 13px;}
.p{ cursor: pointer;}
.h-u:hover{ text-decoration: underline;}

.draggble * { cursor: grabbing;}


.mt-0{ margin-top: 0px !important;}
.mt-1{ margin-top: 5px !important;}
.mt-2{ margin-top: 10px !important;}
.mt-3{ margin-top: 15px !important;}
.mt-4{ margin-top: 20px !important;}
.mt-5{ margin-top: 25px !important;}
.mt-6{ margin-top: 30px !important;}


.top-bar{ background-color: #17171d; border-bottom: 1px solid #50505e;}
.top-bar > div{ display: flex; align-items: center; justify-content: space-between; padding: 3px 10px 4px; width: 100%; max-width: 1200px; margin: 0 auto;}
.top-bar > div .left{}
.top-bar > div .right{ display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px 0;}
.top-bar > div a{ transition: all .2s ease; padding: 0 7px; color: rgba(255, 255, 255, .7); font-size: 11px; text-decoration: none;}
.top-bar > div a.active,
.top-bar > div a:hover{ color: white;}

/*
-------------**************-------------
---------------- Header ----------------
-------------**************-------------
*/
header{ background-color: var(--white-bg); border-bottom: 1px solid #c7cdd3;}
header > div{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; height: 60px; display: flex; align-items: center; justify-content: space-between;}
header > div .logo-area{ display: flex; align-items: center; gap: 15px;}
header > div .logo-area .open-left-nav{ display: none; cursor: pointer; font-size: 18px; line-height: 1;}
header > div .logo-area .go-back{ font-size: 20px; color: var(--black-txt); display: none;}
header > div .logo-area .logo{ }
header > div .logo-area .logo img{ height: 25px;}
header > div .search-area{}
header > div .search-area .input-area{ border: 1px solid var(--main-blue-border); background-color: var(--main-blue-bg); display: flex; height: 35px; width: 270px; border-radius: 3px; overflow: hidden;}
header > div .search-area .input-area .icon{ font-size: 13px; width: 35px; height: 35px; margin: -2px 3px 0 4px; display: flex; align-items: center; justify-content: center;}
header > div .search-area .input-area input{ background-color: transparent; border: none; width: 100%; height: 100%;}
header > div .search-area .input-area input:focus{ outline: none;}
header > div .buttons{ display: flex; gap: 20px;}
header > div .buttons > div{ position: relative;}
header > div .buttons > div > a{ color: var(--main-dark-blue-txt); text-decoration: none; cursor: pointer; display: flex; gap: 3px; align-items: center; justify-content: center; flex-direction: column;}
header > div .buttons > div > a .icon{ font-size: 20px;}
header > div .buttons > div > a .txt{ font-size: 12px; font-weight: 500;}

/* MY BASKET AREA */
header > div .buttons > div > div{ z-index: 10; opacity: 0; height: 0; pointer-events: none; overflow: hidden; position: absolute; border: 1px solid var(--main-blue-border); right: 0; top: 100%; width: 308px; padding-bottom: 10px; border-radius: 3px; transition: all .3s ease-out; background-color: var(--white-bg);}
header > div .buttons > div > div.open{ height: 465px; opacity: 1; pointer-events: all;}
header > div .buttons > div > div.open.free{ height: 323px;}
header > div .buttons > div > div .header{ padding: 10px 10px; background-color: rgba(var(--black-o), .03); border-bottom: 1px solid rgba(var(--black-o), .1);}
header > div .buttons > div > div .header strong{ font-size: 15px;}
header > div .buttons > div > div .header span{ font-size: 12px;}
header > div .buttons > div > div .products{ min-height: 281px; max-height: 281px; overflow-y: auto; background-color: var(--white-bg);}
header > div .buttons > div > div .products::-webkit-scrollbar{ width: 7px; background-color: rgba(var(--black-o), .15);}
header > div .buttons > div > div .products::-webkit-scrollbar-thumb{ background-color: var(--main-blue-txt);}
header > div .buttons > div > div .products .product{ display: flex; gap: 5px; padding: 10px; border-bottom: 1px solid rgba(var(--black-o), .15);}
header > div .buttons > div > div .products .product .product-img{ width: 87px; height: 120px; min-width: 87px; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1px; border: 1px solid rgba(var(--black-o), .15);}
header > div .buttons > div > div .products .product .product-img img{ width: 100%;}
header > div .buttons > div > div .products .product .product-detail{ display: flex; flex-direction: column; justify-content: center; gap: 5px; position: relative;}
header > div .buttons > div > div .products .product .product-detail > span{ position: absolute; right: 0; top: 0; color: #bc2626; font-weight: 600; font-size: 20px; line-height: .4; cursor: pointer;}
header > div .buttons > div > div .products .product .product-detail > div.price{ cursor: default;}
header > div .buttons > div > div .products .product .product-detail > div.price > b{ color: var(--main-dark-blue-txt); font-size: 14px;;}
header > div .buttons > div > div .products .product .product-detail > div.price > span{ color: rgba(var(--black-o), .6); text-decoration: line-through; font-size: 12px;}
header > div .buttons > div > div .products .product .product-detail a{ text-decoration: none; font-size: 12px; color: rgba(var(--black-o), 1); max-height: 196px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
header > div .buttons > div > div .products .product .product-detail a b{ font-size: 14px; color: var(--black-txt); transition: all .2s;}
header > div .buttons > div > div .products .product .product-detail a:hover b{ color: var(--main-red);}
header > div .buttons > div > div .products .product .product-detail > div.info{ display: flex; gap: 2px; font-size: 12px; cursor: default;}
header > div .buttons > div > div .products .empty-basket{ min-height: 282px; max-height: 282px; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
header > div .buttons > div > div .products .empty-basket > div{ width: 50px; height: 50px; margin-bottom: 10px; border-radius: 50%; border: 4px solid var(--black-txt); color: var(--black-txt); /*display: flex; align-items: center; justify-content: center;*/ padding: 14px 0 0 9.5px; font-size: 18px;}
header > div .buttons > div > div .products .empty-basket > b{  font-size: 14px; margin-bottom: 5px;}
header > div .buttons > div > div .products .empty-basket > span{ font-size: 12px; color: rgba(var(--black-o), .7); text-align: center;}
header > div .buttons > div > div .pay{ padding: 10px; background-color: var(--white-bg); width: 100%; border-top: 1px solid rgba(var(--black-o), .15);}
header > div .buttons > div > div .pay > div{ display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px;}
header > div .buttons > div > div .pay .buy{ display: inline-block; width: 100%; padding: 10px 0; margin: 10px 0; background-color: var(--main-blue-txt); border: 2px solid var(--main-blue-txt); color: var(--white-txt); font-weight: 700; text-align: center; border-radius: 5px; transition: all .2s ease; text-decoration: none;}
header > div .buttons > div > div .pay .buy:hover{ background-color: var(--white-bg); color: var(--main-blue-txt); cursor: pointer;}
header > div .buttons > div > div .pay .continue{ display: block; width: fit-content; margin: 3px auto 0; font-size: 12px; color: var(--main-blue-txt); text-decoration: underline; font-weight: 800; cursor: pointer;}



.vertical-sidebar{ border-radius: 10px; width: calc(100% - 20px); margin: 0 auto; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap !important; background-color: white; border: 1px solid var(--main-blue-border);}
.vertical-sidebar::-webkit-scrollbar{ display: none; border-radius: 0 0 10px 10px; background-color: #ddd; height: 3px;}
.vertical-sidebar::-webkit-scrollbar-thumb{ border-radius: 0 0 10px 10px; background-color: var(--main-blue-txt);}
.vertical-sidebar > div{ display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto;}
.vertical-sidebar > div > a{ transition: all .2s ease; position: relative; text-decoration: none; text-align: center; padding: 7px 15px; display: flex; gap: 3px; white-space: nowrap; align-items: center; justify-content: flex-start; color: var(--main-blue-txt); font-size: 13px;}
.vertical-sidebar > div > a.active{ color: var(--main-red);}
.vertical-sidebar > div > a.active::before{ transform: translateX(-50%) translateY(7px);}
/* .vertical-sidebar > div > a.active::after{ transform: translateX(-50%) translateY(-5px);} */
.vertical-sidebar > div > a:hover{ color: var(--main-red);}
.vertical-sidebar > div > a::before,
.vertical-sidebar > div > a::after{ transition: all .2s ease; content: ''; display: inline-block; width: calc(100% - 20px); position: absolute; left: 50%; height: 6px; background-color: var(--main-red);}
.vertical-sidebar > div > a::before{ top: 100%; transform: translateX(-50%) translateY(10px); border-radius: 6px 6px 0 0;}
.vertical-sidebar > div > a::after{ bottom: 100%; transform: translateX(-50%) translateY(-10px); border-radius: 0 0 6px 6px;}
/* .vertical-sidebar > div > a:hover::before{ transform: translateX(-50%) translateY(5px);} */
.vertical-sidebar > div > a:not(:last-child){ border-right: 1px solid rgba(var(--main-blue-txt-o), .1);}
.vertical-sidebar > div > a i{ font-size: 16px; margin-right: 5px;}


@media screen and (max-width: 660px) {
    .vertical-sidebar{ width: 100%; border-radius: 0;}
}



/*
-------------**************-------------
----------------- Main -----------------
-------------**************-------------
*/
.main-area{ min-height: 85%; background-color: var(--main-blue-bg); padding: 20px 0;}
.main-area .first-section{ align-items: flex-start; width: 100%; max-width: 1200px; padding: 0 10px; margin: 0 auto; display: grid; grid-template-columns: 230px calc(100% - 235px); gap: 5px;}

footer + #left-nav-container{ display: none;}
#left-nav-container{ border: 1px solid var(--main-blue-border); background-color: var(--white-bg); padding: 15px; border-radius: 3px;}
#left-nav-container .nav{ display: flex; flex-direction: column; gap: 2px;}
#left-nav-container .nav a{ transition: all .2s ease; border-radius: 15px 0 0 15px; font-size: 14px; display: flex; align-items: center; line-height: 1; text-decoration: none; padding: 13px 0 13px 10px; color: var(--main-blue-txt);}
#left-nav-container .nav a:not(.active):hover{ color: var(--black-txt);}
#left-nav-container .nav a.active{ position: relative; color: var(--main-red); background-color: rgba(var(--main-red-0), .07);}
#left-nav-container .nav a::before{ transition: all .2s ease; content: ''; position: absolute; right: 0; top: 0; display: inline-block; width: 0px; height: 100%; background-color: var(--main-red); border-radius: 3px 0 0 3px;}
#left-nav-container .nav a.active::before{ width: 3px;}
#left-nav-container .nav a i{ width: 13px; text-align: center; margin-right: 11px;}
#left-nav-container .header{ width: 100%; display: none; align-items: center; justify-content: space-between; padding: 15px 15px; box-shadow: 0 0 7px 1px rgba(var(--black-o), .3);}
#left-nav-container .header .close-left-nav{ cursor: pointer; line-height: 1; font-size: 20px;}

.main-area .first-section > .right{ width: 100%;}
.main-area .first-section > .right .slider-area{ border: 1px solid var(--main-blue-border); border-radius: 3px; overflow: hidden; position: relative; height: 325px; width: 100%;}
.main-area .first-section > .right .slider-area .sliders{ scroll-behavior: smooth; overflow: hidden; display: flex; flex-wrap: nowrap; height: 100%;}
.main-area .first-section > .right .slider-area .sliders > .slider{ text-decoration: none; color: inherit; position: relative; display: flex; align-items: center; justify-content: center; min-width: 100%; max-width: 100%; height: 100%;}
.main-area .first-section > .right .slider-area .sliders > .slider.show{ background-color: var(--main-red);}
.main-area .first-section > .right .slider-area .sliders > .slider.img .txt-area{ background-color: rgba(var(--white-o), .3);}
.main-area .first-section > .right .slider-area .sliders > .slider img{ position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main-area .first-section > .right .slider-area .sliders > .slider .txt-area{ padding: 30px; border-radius: 20px; display: flex; position: relative; z-index: 2; gap: 5px; align-items: center; justify-content: center; flex-direction: column;}
.main-area .first-section > .right .slider-area .sliders > .slider .txt-area span{ font-size: 35px; font-weight: 600; text-align: center;}
.main-area .first-section > .right .slider-area .sliders > .slider .txt-area p{ font-weight: 300; text-align: center;}
.main-area .first-section > .right .slider-area .sliders > .slider.show .txt-area span{ color: var(--white-txt);}
.main-area .first-section > .right .slider-area .sliders > .slider.show .txt-area p{ color: var(--white-txt);}
.main-area .first-section > .right .slider-area .controller{ background-color: rgba(var(--white-o), .1); padding: 10px 13px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;}
.main-area .first-section > .right .slider-area .controller > span{ cursor: pointer; transition: all .2s ease; display: inline-block; width: 15px; height: 6px; border-radius: 10px; background-color: rgba(var(--black-o), .65);}
.main-area .first-section > .right .slider-area .controller > span:hover{ background-color: rgba(var(--black-o), .9);}
.main-area .first-section > .right .slider-area .controller > span.active{ pointer-events: none; background-color: var(--white-bg); box-shadow: 0 0 3px 0 rgba(var(--black-o), .3);}
.main-area .first-section > .right .slider-area .arr{ cursor: pointer; transition: all .2s ease; width: 40px; height: 80px; background-color: rgba(var(--white-o), .1); display: flex; align-items: center; justify-content: center; border-radius: 30px; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);}
.main-area .first-section > .right .slider-area .arr.disabled{ pointer-events: none;}
.main-area .first-section > .right .slider-area .arr:hover{ background-color: rgba(var(--black-o), .2); color: var(--white-txt);}
.main-area .first-section > .right .slider-area .arr.left-arr{ left: 20px;}
.main-area .first-section > .right .slider-area .arr.right-arr{ right: 20px;}

.main-area .first-section > .right .slider-area .sliders > .slider img.mobile{display: none;}
@media screen and (max-width: 660px) {
    .main-area .first-section > .right .slider-area{ height: unset;}
    .main-area .first-section > .right .slider-area .sliders > .slider img{ width: 100% !important; position: unset; width: unset; left: unset; top: unset; transform: unset;}
    .main-area .first-section > .right .slider-area .sliders > .slider img.web{ display: none;}
    .main-area .first-section > .right .slider-area .sliders > .slider img.mobile{display: block;}
}

.main-area .first-section > .right .l-stories{ overflow-x: auto; overflow-y: hidden; border: 1px solid var(--main-blue-border); border-radius: 3px; margin-top: 5px; width: 100%; background-color: var(--white-bg);}
.main-area .first-section > .right .l-stories > div{ width: fit-content; min-width: 100%; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 15px;}
.main-area .first-section > .right .l-stories > div > .story{ position: relative; border-radius: 50%; transition: all .2s ease; cursor: pointer; box-shadow: -1px 1.3px 3px 0 rgba(var(--black-o), .2); background-color: var(--main-blue-bg); min-width: 55px; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center;}
.main-area .first-section > .right .l-stories > div > .story:hover{ transform: scale(1.1) translateY(-2px); box-shadow: 0 3px 5px 0 rgba(var(--black-o), .3);}
.main-area .first-section > .right .l-stories > div > .story .img{ width: 100%; height: 100%; border-radius: 50%; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.main-area .first-section > .right .l-stories > div > .story .img img{ width: 100%;}
.main-area .first-section > .right .l-stories > div > .story svg { display: none; transform: scale(1.3); position: absolute; fill:none; stroke:#8a3ab8; stroke-width:3px; stroke-dasharray:1; stroke-dashoffset:0; stroke-linecap:round; animation: loading 4500ms ease-in-out 2 alternate;}
.main-area .first-section > .right .l-stories > div > .story.active svg{ display: block;}

@keyframes loading {
    100% {
        stroke:#cd476b;
        stroke-dasharray:10;
        transform:rotate(200deg) scale(1.3);
    }
}

/* .story-modal-container{ opacity: 0; pointer-events: none; transition: all .3s ease; width: 100%; height: calc(var(--vh, 1vh) * 100); z-index: 20; position: fixed; top: 0; left: 0; background-color: rgba(var(--black-o), .8); display: flex; align-items: center; justify-content: center;}
.story-modal-container.active{ opacity: 1; pointer-events: all;}
.story-modal-container .story-modal{ position: relative; transition: all .1s ease; opacity: .8; transform: scale(1.2); position: relative; height: 601px; width: 369px; background-color: var(--black-bg); border-radius: 3px;}
.story-modal-container.active .story-modal{ opacity: 1; transform: scale(1);}
.story-modal-container .story-modal .arr{ transition: all .2s ease; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; color: var(--white-txt); font-size: 20px; background-color: rgba(var(--black-o), .3); display: flex; align-items: center; justify-content: center; border: none;}
.story-modal-container .story-modal .arr.hide{ display: none;}
.story-modal-container .story-modal .arr i{ transition: all .2s ease; display: inline-block;}
.story-modal-container .story-modal .arr:hover{ background-color: rgba(var(--black-o), .6);}
.story-modal-container .story-modal .arr:active{ box-shadow: inset 0 0 15px 0px rgba(var(--white-o), .2);}
.story-modal-container .story-modal .arr.left-arr{ left: -60px;}
.story-modal-container .story-modal .arr.left-arr:active i{ transform: translateX(-1.5px);}
.story-modal-container .story-modal .arr.right-arr{ right: -60px;}
.story-modal-container .story-modal .arr.right-arr:active i{ transform: translateX(1.5px);}
.story-modal-container .story-modal .content{ overflow: hidden; width: 100%; height: 100%; perspective: 800px; perspective-origin: 50%; display: flex; align-items: center; justify-content: center;}
.story-modal-container .story-modal .content .three-d{ transition: all .7s ease; transform-style: preserve-3d; transform: rotateY(0deg); position: relative; width: 300px; height: 485px; display: flex; align-items: center; justify-content: center;}
.story-modal-container .story-modal .content .three-d .story{ overflow: hidden; position: absolute; width: 300px; height: 100%;}
.story-modal-container .story-modal .content .three-d .story.front{ transform: translateZ(150px); background-color: pink;}
.story-modal-container .story-modal .content .three-d .story.right{ transform: rotateY(-270deg) translateX(150px); transform-origin: 100% 0; background-color: orange;}
.story-modal-container .story-modal .content .three-d .story.back{ transform: translateZ(-150px) rotateY(180deg); background-color: burlywood;}
.story-modal-container .story-modal .content .three-d .story.left{ transform: rotateY(270deg) translateX(-150px); transform-origin: 0 50%; background-color: teal;}
.story-modal-container .story-modal .content .three-d .story > div{ position: relative; width: 100%; height: 100%; background-color: var(--white-bg);}
.story-modal-container .story-modal .content .three-d .story > div::before,
.story-modal-container .story-modal .content .three-d .story > div::after{ content: ''; position: absolute; z-index: 1; display: inline-block; width: 100%; height: 0px; box-shadow: 0 0 35px 13px rgba(var(--black-o), .7);}
.story-modal-container .story-modal .content .three-d .story > div::before{ top: 0;}
.story-modal-container .story-modal .content .three-d .story > div::after{ bottom: 0;}
.story-modal-container .story-modal .content .three-d .story > div .bars{ z-index: 2; position: absolute; top: 0; left: 0; width: 100%; padding: 10px; display: flex; gap: 5px;}
.story-modal-container .story-modal .content .three-d .story > div .bars > div{ position: relative; overflow: hidden; width: 100%; height: 2px; border-radius: 3px; background-color: var(--main-blue-txt);}
.story-modal-container .story-modal .content .three-d .story > div .bars > div::before{ content: ''; position: absolute; left: 0; display: inline-block; width: 0%; height: 100%; background-color: var(--white-bg);}
.story-modal-container .story-modal .content .three-d .story > div .bars > div.reset::before{ width: 0% !important; transition: none !important;}
.story-modal-container .story-modal .content .three-d .story > div .bars > div.active::before{ transition: all 8s linear; width: 100%;}
.story-modal-container .story-modal .content .three-d .story > div .bars > div.seen::before{ transition: none; width: 100%;}
.story-modal-container .story-modal .content .three-d .story > div .user{ z-index: 2; position: absolute; padding: 0 10px; top: 20px; width: 100%; display: flex; align-items: center; justify-content: space-between;}
.story-modal-container .story-modal .content .three-d .story > div .user .info{ display: flex; align-items: center; gap: 8px;}
.story-modal-container .story-modal .content .three-d .story > div .user .info .img-area{ width: 35px; height: 35px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.story-modal-container .story-modal .content .three-d .story > div .user .info > span{ color: var(--white-txt); font-weight: 600; font-size: 11px;}
.story-modal-container .story-modal .content .three-d .story > div .user .time{ color: var(--white-txt); font-size: 9px;}
.story-modal-container .story-modal .content .three-d .story > div .user .info .img-area img{ width: 100%;}
.story-modal-container .story-modal .content .three-d .story > div .stories{ transition: all .5s ease; display: flex; flex-wrap: nowrap;}
.story-modal-container .story-modal .content .three-d .story > div .stories > a{ position: relative; z-index: 19; min-width: 100%; width: 100%; height: 100%; background-color: var(--black-txt); display: flex; align-items: center; justify-content: center;}
.story-modal-container .story-modal .content .three-d .story > div .stories > a > img{ width: 100%;}
.story-modal-container .close-story-modal-btn{ cursor: pointer; z-index: 3; position: absolute; right: 20px; top: 13px; line-height: 1; font-size: 25px; color: rgba(var(--white-o), .9); background-color: transparent; border: none;}
.story-modal-container .close-story-modal-btn:hover{ color: rgba(var(--white-o), 1);} */



/* .main-area .first-section > .right .products{ display: flex; flex-direction: column;}
.main-area .first-section > .right .products.preceded{ margin-top: 20px;}
.main-area .first-section > .right .products .header{ border-bottom: 1px solid var(--main-blue-txt); display: flex; align-items: center; justify-content: space-between; padding: 5px 5px;}
.main-area .first-section > .right .products .header b{ font-size: 15px; font-weight: 600;}
.main-area .first-section > .right .products .header a{ transition: all .2s ease; display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--main-blue-txt); font-size: 12px; font-weight: 600;}
.main-area .first-section > .right .products .header a:hover{ color: var(--black-txt);}
.main-area .first-section > .right .products .header a i{ font-size: 11px;}
.main-area .first-section > .right .products .body{ display: grid; gap: 15px; padding-top: 10px;}
.main-area .first-section > .right .products._4 .body{  grid-template-columns: repeat(4, 1fr);}
.main-area .first-section > .right .products._5 .body{  grid-template-columns: repeat(5, 1fr);}
.main-area .first-section > .right .products .body .product{ border: 1px solid var(--main-blue-border); background-color: var(--white-bg); border-radius: 3px; overflow: hidden; padding: 3px 10px;}
.main-area .first-section > .right .products .body .product .img-area{ position: relative; width: 100%; height: 170px; padding: 5px; display: flex; align-items: center; justify-content: center;}
.main-area .first-section > .right .products .body .product .img-area .img{ height: 100%; min-width: 60%; background-color: var(--main-blue-bg); display: flex; align-items: center; justify-content: center; overflow: hidden;}
.main-area .first-section > .right .products .body .product .img-area .img img{ height: 100%;}
.main-area .first-section > .right .products .body .product .detail{ padding: 5px;}
.main-area .first-section > .right .products .body .product .detail .top{ display: flex; justify-content: space-between;}
.main-area .first-section > .right .products .body .product .detail .top .left{ display: flex; flex-direction: column;}
.main-area .first-section > .right .products .body .product .detail .top .left .star{ display: flex; align-items: center; height: fit-content;}
.main-area .first-section > .right .products .body .product .detail .top .left .star .stars-inner::before,
.main-area .first-section > .right .products .body .product .detail .top .left .star .stars-outer::before{ font-size: 10px; display: inline-block; transform: translateY(-4px);}
.main-area .first-section > .right .products .body .product .detail .top .left .product-star-count{ font-size: 11px; font-weight: 500; line-height: 1; margin-left: 2px;}
.main-area .first-section > .right .products .body .product .detail .top .left .evaluations{ font-size: 9px; color: var(--blue);}
.main-area .first-section > .right .products .body .product .detail .top .left .evaluations span{ margin-right: 2px; color: var(--black-txt);}
.main-area .first-section > .right .products .body .product .detail .top .p-info{ font-size: 9px; font-weight: 600; padding-top: 5px; color: var(--green);}
.main-area .first-section > .right .products .body .product .detail .info{ padding-top: 5px;}
.main-area .first-section > .right .products .body .product .detail .info .name{ font-size: 12px; word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.main-area .first-section > .right .products .body .product .detail .info .name b{ font-size: 500; margin-right: 2px; color: rgba(var(--black-o), .8);}
.main-area .first-section > .right .products .body .product .detail .info .name span{}
.main-area .first-section > .right .products .body .product .detail .info .price{ line-height: 1; margin-top: 10px; display: flex; align-items: flex-end; gap: 6px;}
.main-area .first-section > .right .products .body .product .detail .info .price > span > span{ margin-right: 2px;}
.main-area .first-section > .right .products .body .product .detail .info .price .current{ font-size: 15px; font-weight: 700; color: var(--main-red);}
.main-area .first-section > .right .products .body .product .detail .info .price .last{ font-size: 12px; font-weight: 500; text-decoration: line-through; color: var(--main-blue-txt);}
.main-area .first-section > .right .products .body .product .detail > button{ cursor: pointer; transition: all .2s ease; margin-top: 15px; font-size: 12px; font-weight: 700; width: 100%; border: 2px solid var(--main-red); border-radius: 3px; color: var(--main-red); background-color: transparent; padding: 5px 0 6px;}
.main-area .first-section > .right .products .body .product .detail > button:hover{ background-color: var(--main-red); color: var(--white-txt); transform: translate(2px, -2px); box-shadow: -2px 2px 5px 0 rgba(var(--black-o), .6);}
.main-area .first-section > .right .products .body .product .detail > button:active{ transform: translate(0, 0); box-shadow: none;} */


.products{ display: flex; flex-direction: column;}
.products.preceded{ margin-top: 20px;}
.products.nowrap .body{ display: flex; flex-wrap: nowrap; flex-direction: row;}
.products .header{ border-bottom: 1px solid var(--main-blue-txt); display: flex; align-items: center; justify-content: space-between; padding: 5px 5px;}
.products .header b{ font-size: 15px; font-weight: 600;}
.products .header a{ transition: all .2s ease; display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--main-blue-txt); font-size: 12px; font-weight: 600;}
.products .header a:hover{ color: var(--black-txt);}
.products .header a i{ font-size: 11px;}
.products .body{ display: grid; gap: 5px; padding-top: 10px;}
.products._2 .body{  grid-template-columns: repeat(2, 1fr);}
.products._3 .body{  grid-template-columns: repeat(3, 1fr);}
.products._4 .body{  grid-template-columns: repeat(4, 1fr);}
.products._5 .body{  grid-template-columns: repeat(5, 1fr);}
.products .body .product{ height: auto; width: auto; text-decoration: none; transition: all .2s ease; text-decoration: none; border: 1px solid var(--main-blue-border); background-color: var(--white-bg); border-radius: 3px; overflow: hidden; padding: 3px 10px;}
.products .body .product:hover{ box-shadow: 0 10px 10px -5px rgba(var(--black-o), .3); border-color: transparent;}
.products .body .product .img-area{ position: relative; width: 100%; height: 220px; padding: 5px; display: flex; align-items: center; justify-content: center;}
.products .body .product .img-area .img{ height: 100%; min-width: 60%; background-color: var(--main-blue-bg); display: flex; align-items: center; justify-content: center; overflow: hidden;}
.products .body .product .img-area .img img{ height: 100%;}
.products .body .product .detail{ padding: 5px;}
.products .body .product .detail .top{ height: 25px; display: flex; justify-content: space-between;}
.products .body .product .detail .top .left{ display: flex; flex-direction: column; gap: 2px;}
.products .body .product .detail .top .left .star{ display: flex; align-items: center; height: fit-content;}
.products .body .product .detail .top .left .star .stars-inner::before,
.products .body .product .detail .top .left .star .stars-outer::before{ font-size: 10px; display: inline-block;}
.products .body .product .detail .top .left .product-star-count{ font-size: 11px; font-weight: 500; line-height: 1; margin-left: 2px;}
.products .body .product .detail .top .left .evaluations{ font-size: 9px; color: var(--blue);}
.products .body .product .detail .top .left .evaluations span{ margin-right: 2px; color: var(--black-txt);}
.products .body .product .detail .top .p-info{ font-size: 9px; font-weight: 600; padding-top: 5px; color: var(--green);}
.products .body .product .detail .info{ padding-top: 5px;}
.products .body .product .detail .info .name{ color: var(--black-txt); font-size: 12px; word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 32px; overflow: hidden;}
.products .body .product .detail .info .name b{ font-weight: 500; margin-right: 2px; color: rgba(var(--black-o), .8);}
.products .body .product .detail .info .name span{}
.products .body .product .detail .info .price{ line-height: 1; margin-top: 10px; display: flex; align-items: flex-end; gap: 6px;}
.products .body .product .detail .info .price > span > span{ margin-right: 2px;}
.products .body .product .detail .info .price .current{ font-size: 15px; font-weight: 700; color: var(--main-red);}
.products .body .product .detail .info .price .last{ font-size: 12px; font-weight: 500; text-decoration: line-through; color: var(--main-blue-txt);}
.products .body .product .detail .buttons{ display: flex; gap: 3px; padding-top: 15px;}
.products .body .product .detail .buttons button{ cursor: pointer; transition: all .2s ease; font-size: 12px; font-weight: 700; width: 100%; border: 2px solid var(--main-red); border-radius: 3px 0 0 3px; color: var(--main-red); background-color: transparent; padding: 5px 0 6px;}
.products .body .product .detail .buttons span{ pointer-events: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; font-size: 12px; font-weight: 700; width: 100%; border-radius: 3px 0 0 3px; background-color: transparent; padding: 5px 0 6px;}
.products .body .product .detail .buttons button.fav{ width: 40px; border-radius: 0 3px 3px 0; transition: all .2s ease; cursor: pointer;}
.products .body .product .detail .buttons button:not(.outlined).fav.active{ background-color: var(--main-red) !important; color: var(--white-txt) !important; border-color: var(--main-red) !important;}
.products .body .product .detail .buttons button.outlined.fav.active{ color: var(--main-red) !important; border-color: var(--main-red) !important;}
.products .body .product .detail .buttons button.outlined.fav.active:hover{ background-color: var(--white-bg) !important;}
/* .products .body .product .detail .buttons button.fav.active.outlined{ background-color: var(--white-bg) !important; color: var(--main-red) !important; border-color: var(--main-red) !important;} */
/* .products .body .product .detail > button:hover{ background-color: var(--main-red); color: var(--white-txt); transform: translate(2px, -2px); box-shadow: -2px 2px 5px 0 rgba(var(--black-o), .6);}
.products .body .product .detail > button:active{ transform: translate(0, 0); box-shadow: none;} */



.products-area{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px;}
.products-area > div{ }

.before-category{ font-size: 13px; text-decoration: none; color: #666;}
.before-category:hover{ text-decoration: underline;}

.blogs-area{ width: 100%; max-width: 1200px; margin: 30px auto; padding: 0 10px;}
.blogs-area > div{ }
.blogs-area .blogs .header{ border-bottom: 1px solid var(--main-blue-txt); display: flex; align-items: center; justify-content: space-between; padding: 5px 5px;}
.blogs-area .blogs .header b{ font-size: 15px; font-weight: 600;}
.blogs-area .blogs .header a{ transition: all .2s ease; display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--main-blue-txt); font-size: 12px; font-weight: 600;}
.blogs-area .blogs .header a:hover{ color: var(--black-txt);}
.blogs-area .blogs .header a i{ font-size: 11px;}
/* .blogs-area .blogs .body{ display: grid; gap: 5px; padding-top: 10px;}
.blogs-area .blogs._6 .body{ grid-template-columns: repeat(6, 1fr);}
.blogs-area .blogs .body .blog{ background-color: var(--white-bg);}
.blogs-area .blogs .body .blog > div{ background-color: rgba(var(--color), .1); border: 1px solid rgba(var(--color), .1); display: flex; flex-direction: column; gap: 7px; padding: 10px;}
.blogs-area .blogs .body .blog > div .img-area{ position: relative; width: 100%; height: 140px; border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.blogs-area .blogs .body .blog > div .img-area .img{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.blogs-area .blogs .body .blog > div .img-area .img img{ width: 100%;}
.blogs-area .blogs .body .blog > div .detail{ padding: 0 3px;}
.blogs-area .blogs .body .blog > div .detail .name{ font-weight: 500; font-size: 15px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; word-break: break-all; overflow: hidden;}
.blogs-area .blogs .body .blog > div .detail .txt{ font-size: 12px; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} */
.blogs-area .blogs .body{ display: grid; gap: 5px; padding-top: 10px;}
.blogs-area .blogs._2 .body{ grid-template-columns: repeat(2, 1fr);}
.blogs-area .blogs .body .blog{ border-radius: 3px; background-color: var(--white-bg); padding: 5px;}
.blogs-area .blogs .body .blog > a{ text-decoration: none; color: var(--black-txt); cursor: pointer; transition: all .2s ease; border-radius: 3px; background-color: rgba(var(--color), .1); border: 1px solid rgba(var(--color), .1); display: flex; gap: 7px; padding: 10px;}
.blogs-area .blogs .body .blog:hover > a{ background-color: rgba(var(--color), .05); border-color: rgba(var(--color), 1);}
.blogs-area .blogs .body .blog > a .img-area{ background-color: rgba(var(--color), .1); position: relative; width: 150px; min-width: 150px; height: 140px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.blogs-area .blogs .body .blog > a .img-area .img{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.blogs-area .blogs .body .blog > a .img-area .img img{ width: 100%;}
.blogs-area .blogs .body .blog > a .detail{ padding: 5px 3px; display: flex; flex-direction: column; justify-content: space-between;}
.blogs-area .blogs .body .blog > a .detail .name{ margin-bottom: 5px; font-weight: 500; font-size: 15px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;}
.blogs-area .blogs .body .blog > a .detail .txt{ height: 48px; font-size: 12px; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.blogs-area .blogs .body .blog > a .detail .info{ display: flex; gap: 15px; align-items: center;}
.blogs-area .blogs .body .blog > a .detail .info small{ font-size: 10px; padding: 4px 10px 4px; border-radius: 15px; border: 1px solid black; color: var(--black-txt); text-decoration: none;}
.blogs-area .blogs .body .blog > a .detail .info span{ font-size: 11px;}



/* .category-area{ width: 100%; max-width: 1200px; padding: 0 10px; margin: 20px auto 0;}
.category-area > div{ padding: 10px 15px; border: var(--main-blue-border); border-radius: 3px; background-color: var(--white-bg);}
.category-area > div .categories{ display: flex; flex-wrap: nowrap; gap: 15px; padding: 10px;}
.category-area > div .categories .category{ position: relative; width: calc(((100% / 7) - (15px)) + (15px / 7)); height: 120px; border-radius: 10px; overflow: hidden;}
.category-area > div .categories .category .img-area{ background-color: var(--main-blue-bg); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.category-area > div .categories .category .img-area img{ width: 100%;}
.category-area > div .categories .category .txt-area{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px; background-color: rgba(var(--white-o), .3); z-index: 2; width: 100%; height: 100%; display: flex; gap: 3px; align-items: center; justify-content: center; flex-direction: column;}
.category-area > div .categories .category .txt-area b{ font-weight: 600; font-size: 15px; color: rgba(var(--black-o), .8);}
.category-area > div .categories .category .txt-area span{ font-size: 14px; color: rgba(var(--black-o), 1);} */

.category-area{ width: 100%; max-width: 1200px; padding: 0 10px; margin: 20px auto 0;}
.category-area > div{ flex-wrap: wrap; padding: 10px 15px; border: var(--main-blue-border); border-radius: 3px; background-color: var(--white-bg);}
.category-area > div .categories{ overflow-x: auto; display: flex; flex-wrap: nowrap; gap: 20px; padding: 10px;}
.category-area > div .categories .category{ cursor: pointer; position: relative; width: calc(((100% / 7) - (20px)) + (15px / 7)); min-width: 210px; height: 210px; border-radius: 10px; overflow: hidden;}
.category-area > div .categories .category .img-area{ background-color: var(--main-blue-bg); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.category-area > div .categories .category .img-area img{ width: 100%;}
.category-area > div .categories .category .txt-area{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px;  z-index: 3; width: 100%; height: 100%; display: flex; gap: 3px; align-items: center; justify-content: center; flex-direction: column;}
.category-area > div .categories .category .txt-area b{ font-weight: 600; font-size: 15px; color: rgba(var(--white-o), .8);}
.category-area > div .categories .category .txt-area span{ font-size: 14px; color: rgba(var(--white-o), 1);}
.category-area > div .categories .category .gradient{ transition: all .2s ease; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; opacity: .6; background: linear-gradient(180deg, rgba(var(--white-o), .0), var(--black-bg));}
.category-area > div .categories .category:hover .gradient{ opacity: .3;}


.category-area-2{ width: 100%; max-width: 1200px; padding: 0 10px; margin: 10px auto 0;}
.category-area-2.has-bg > div{ flex-wrap: wrap; padding: 10px 15px; border: 1px solid var(--main-blue-border); border-radius: 3px 3px 0 0;  background-color: var(--white-bg);}
.category-area-2 > div{ flex-wrap: wrap; padding: 10px 9;}
.category-area-2 > div .categories{ flex-wrap: wrap; overflow-x: auto; display: flex; gap: 10px; padding: 10px 0;}
.category-area-2 > div .categories.scroll{ flex-wrap: nowrap;}
.category-area-2 > div .categories::-webkit-scrollbar{ border-radius: 8px; background-color: #ddd; height: 6px;}
.category-area-2 > div .categories::-webkit-scrollbar-thumb{ border-radius: 8px; background-color: var(--main-blue-txt);}
.category-area-2 > div .categories .category{ padding: 15px; background-color: var(--white-bg); border: 1px solid var(--main-blue-border); display: flex; position: relative; width: calc(((100% / 3) - (10px)) + (10px / 3)); min-width: calc(((100% / 3) - (10px)) + (10px / 3)); border-radius: 10px; overflow: hidden;}
.category-area-2 > div .categories .category .left{ position: relative; width: 160px; min-width: 160px; height: 160px; border-radius: 10px; overflow: hidden;}
.category-area-2 > div .categories .category .left .img-area{ background-color: var(--main-blue-bg); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.category-area-2 > div .categories .category .left .img-area img{ width: 100%;}
.category-area-2 > div .categories .category .left .txt-area{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px;  z-index: 3; width: 100%; height: 100%; display: flex; gap: 3px; align-items: center; justify-content: center; flex-direction: column;}
.category-area-2 > div .categories .category .left .txt-area b{ font-weight: 600; font-size: 15px; color: rgba(var(--white-o), .8);}
.category-area-2 > div .categories .category .left .txt-area span{ font-size: 14px; color: rgba(var(--white-o), 1); text-align: center;}
.category-area-2 > div .categories .category .left .gradient{ transition: all .2s ease; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; opacity: .6; background: linear-gradient(180deg, rgba(var(--white-o), .0), var(--black-bg));}
.category-area-2 > div .categories .category .left:hover .gradient{ opacity: .3;}
.category-area-2 > div .categories .category .right{ width: 100%; padding-left: 5px;}
.category-area-2 > div .categories .category .right > div{ padding-right: 5px; max-height: 160px; overflow-y: auto; display: flex; gap: 1px; flex-direction: column;}
.category-area-2 > div .categories .category .right > div::-webkit-scrollbar{ border-radius: 6px; background-color: #ddd; width: 3px;}
.category-area-2 > div .categories .category .right > div::-webkit-scrollbar-thumb{ border-radius: 6px; background-color: var(--main-blue-txt);}
.category-area-2 > div .categories .category .right > div a{ min-height: 22px; height: 22px; transition: all .2s ease; border-radius: 3px; word-break: break-all; padding: 0px 7px; padding-right: 30px; position: relative; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 2; font-size: 11px; font-weight: 600; text-decoration: none; color: var(--main-blue-txt);}
.category-area-2 > div .categories .category .right > div a:hover{ background-color: var(--main-blue-bg);}
.category-area-2 > div .categories .category .right > div a small{ position: absolute; top: 50%; right: 7px; transform: translateY(-50%);}

.category-area-2 > div .categories .category._6:has(.center){ padding: 0; width: calc(((100% / 6) - (10px)) + (10px / 6)); min-width: calc(((100% / 6) - (10px)) + (10px / 6));}
.category-area-2 > div .categories .category._5:has(.center){ padding: 0; width: calc(((100% / 5) - (10px)) + (10px / 5)); min-width: calc(((100% / 5) - (10px)) + (10px / 5));}
.category-area-2 > div .categories .category._4:has(.center){ padding: 0; width: calc(((100% / 4) - (10px)) + (10px / 4)); min-width: calc(((100% / 4) - (10px)) + (10px / 4));}
.category-area-2 > div .categories .category._3:has(.center){ padding: 0; width: calc(((100% / 3) - (10px)) + (10px / 3)); min-width: calc(((100% / 3) - (10px)) + (10px / 3));}
.category-area-2 > div .categories .category:has(.center) a{ display: flex; align-items: center; justify-content: center; width: 100%;}
.category-area-2 > div .categories .category._6:has(.center) .img-area{ width: 100%; height: 180px;}
.category-area-2 > div .categories .category._5:has(.center) .img-area{ width: 100%; max-height: 210px; height: 17vw;}
.category-area-2 > div .categories .category._4:has(.center) .img-area{ width: 100%; height: 240px;}
.category-area-2 > div .categories .category._3:has(.center) .img-area{ width: 100%; max-height: 280px; height: 30vw;}
.category-area-2 > div .categories .category:has(.center) .img-area img{ width: 100%; height: 100%; object-fit: cover;}
.category-area-2 > div .categories .category:has(.center) .txt-area{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px;  z-index: 3; width: 100%; height: 100%; display: flex; gap: 3px; align-items: center; justify-content: center; flex-direction: column;}
.category-area-2 > div .categories .category:has(.center) .txt-area b{ text-align: center; font-weight: 600; font-size: 15px; color: rgba(var(--white-o), .8);}
.category-area-2 > div .categories .category:has(.center) .txt-area span{ font-size: 14px; color: rgba(var(--white-o), 1);}
.category-area-2 > div .categories .category:has(.center) .gradient{ transition: all .2s ease; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; opacity: .6; background: linear-gradient(180deg, rgba(var(--white-o), .0), var(--black-bg));}
.category-area-2 > div .categories .category:has(.center):hover .gradient{ opacity: .05;}

@media screen and (max-width: 1110px) {
    .category-area-2 > div .categories .category{ width: calc(((100% / 2) - (10px)) + (10px / 2)); min-width: calc(((100% / 2) - (10px)) + (10px / 2));}
    .category-area-2 > div .categories .category._6:has(.center){ width: calc(((100% / 3) - (10px)) + (10px / 3)); min-width: calc(((100% / 3) - (10px)) + (10px / 3));}
    .category-area-2 > div .categories .category._6:has(.center) .img-area{ height: 30vw;}
}
@media screen and (max-width: 780px){
    .category-area-2 > div .categories .category{ width: 100%; min-width: 100%;}
}
@media screen and (max-width: 916px){
    .category-area-2 > div .categories .category._4:has(.center){ padding: 0; width: calc(((100% / 3) - (10px)) + (10px / 3)); min-width: calc(((100% / 3) - (10px)) + (10px / 3));}
    .category-area-2 > div .categories .category._4:has(.center) .img-area{ width: 100%; height: 30vw;}
}
@media screen and (max-width: 660px){
    .category-area-2 > div .categories .category._6:has(.center),
    .category-area-2 > div .categories .category._4:has(.center){ width: calc(((100% / 2) - (10px)) + (10px / 2)); min-width: calc(((100% / 2) - (10px)) + (10px / 2));}
    .category-area-2 > div .categories .category._6:has(.center) .img-area,
    .category-area-2 > div .categories .category._4:has(.center) .img-area{ height: 40vw;}
    .category-area-2 > div .categories .category._3:has(.center),
    .category-area-2 > div .categories .category._5:has(.center){ width: 100%; min-width: 100%;}
    .category-area-2 > div .categories .category._3:has(.center) .img-area,
    .category-area-2 > div .categories .category._5:has(.center) .img-area{ height: 90vw; min-height: 310px;}
}

.g-empty{ display: none; align-items: center; justify-content: center; flex-direction: column; padding: 80px 0; background-color: white; border: 1px solid #cbcbcb; border-radius: 7px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05);}
.g-empty.active{ display: flex;}
.g-empty .icon{ margin-bottom: 10px; color: var(--main-blue-txt); position: relative; font-size: 40px; opacity: .9; width: 80px; height: 80px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--main-blue-txt);}
.g-empty b{ font-size: 15px; margin-bottom: 7px; font-weight: 600; color: #111;}
.g-empty span{ text-align: center; margin-bottom: 13px; font-size: 12px; font-weight: 500; max-width: 50%; color: #333;}
.g-empty a{ transition: all .2s ease; text-decoration: none; font-weight: 600; font-size: 13px; padding: 7px 20px; border-radius: 20px; background-color: var(--main-blue-txt); color: white; border: 2px solid var(--main-blue-txt); box-shadow: 0 0 3px 1px #999;}
.g-empty a[href=""]:active{ box-shadow: none !important; transform: scale(1) !important;}
.g-empty a:hover{ cursor: pointer; background-color: white; color: var(--main-blue-txt); box-shadow: 0 5px 10px 3px #c0c0c0; transform: scaleX(1.05);}


.site-banner{ width: 100%; background-color: var(--main-blue-txt); margin: 40px 0;}
.site-banner > div{ width: 100%; max-width: 1200px; padding: 30px 10px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.site-banner > div .left{ color: var(--white-txt); display: flex; flex-direction: column; gap: 1px;}
.site-banner > div .left h3{ font-weight: 700; font-size: 22px;}
.site-banner > div .left p{ font-size: 14px; font-weight: 300;}
.site-banner > div .right{}
.site-banner > div .right{ display: flex; gap: 5px; flex-direction: column; align-items: flex-end;}
.site-banner > div .right .phone{ display: flex; gap: 12px;}
.site-banner > div .right .phone .input-area{ border-radius: 3px; background-color: var(--white-bg); height: 27px; display: flex; align-items: center;}
.site-banner > div .right .phone .input-area span{ color: var(--main-blue-txt); display: inline-block; width: 17px; text-align: center; margin: 0 5px;}
.site-banner > div .right .phone .input-area input{ color: var(--main-blue-txt); border: none; background-color: transparent;}
.site-banner > div .right .phone .input-area input:focus{ outline: none;}
.site-banner > div .right .phone button{ transition: all .2s ease; cursor: pointer; font-weight: 600; padding: 3px 15px 4px; border-radius: 3px;}
.site-banner > div .right .phone button:hover{ transform: translate(2px, -2px); box-shadow: -2px 2px 5px 0 rgba(var(--black-o), .3);}
.site-banner > div .right .phone button:active{ transform: translate(0, 0); box-shadow: none;}
.site-banner > div .right .chckbx{ position: relative; padding-left: 20px;}
.site-banner > div .right .chckbx input{ left: 0; top: 0;}
.site-banner > div .right .chckbx input[type="checkbox"]::before,
.site-banner > div .right .chckbx input[type="checkbox"]:checked:before{ color: var(--main-blue-txt); font-size: 11px; background-color: var(--white-bg); width: 12px; height: 12px;}
.site-banner > div .right .chckbx label{ font-size: 11px; color: var(--white-txt);}



/*
-------------**************-------------
---------------- Input -----------------
-------------**************-------------
*/
input[type="checkbox"]{ position: absolute; cursor: pointer; transform: translate(6.5px, 10px); top: 6px; width: 2px; height: 2px;}
input[type="checkbox"]::before{ transition: all .1s ease; box-shadow: inset 0 0 7px 0px rgba(var(--main-blue-txt)); content: ''; position: absolute; left: 0; top: 0; display: inline-block; box-shadow: inset 0 0 5px 0 rgba(var(--black-o), .2); border: 1px solid var(--main-blue-border); background-color: var(--white-bg); width: 15px; height: 15px; border-radius: 3px;}
input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-size: 13px; font-weight: 900; color: var(--white-txt); background-color: var(--main-red); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 15px; height: 15px;}
input[type="checkbox"]::before,
input[type="checkbox"]:checked:before{ transform: translate(-6.5px, -10px);}





/*
-------------**************-------------
---------------- Stars -----------------
-------------**************-------------
*/
.stars-outer{ position: relative; display: inline-block;}
.stars-inner{ position: absolute; top: 0; left: 0; white-space: nowrap; overflow: hidden; width: 0;}
.stars-outer::before{ content: '\f005 \f005 \f005 \f005 \f005'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 13px; color: #ccc;}
.stars-inner::before{ content: '\f005 \f005 \f005 \f005 \f005'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 13px; color: var(--star-yellow);}


/*
-------------**************-------------
---------------- Hearth -----------------
-------------**************-------------
*/
.hearth-btn{ display: inline-block; background-color: var(--white-bg); color: #bebebe; width: 38px; height: 38px; position: absolute; right: 5px; top: 5px; border-radius: 50%; font-size: 20px; padding-top: 1px; cursor: pointer; transition: all .2s; box-shadow: -1px 1px 5px 1px #cecece; z-index: 2; border: none;}
.hearth-btn.active{ color: rgb(249, 11, 51); animation: hearth-effect-shadow 1.5s linear 1;}
.hearth-btn.active i{ animation: hearth-effect 1.5s linear 1; display: inline-block;}

@keyframes hearth-effect-shadow{
    0%{ box-shadow: 0 0 0 0 white;}
    25%{ box-shadow: 0 0 10px 1px rgb(255, 134, 154);}
    50%{ box-shadow: 0 0 0 0 white;}
    75%{ box-shadow: 0 0 10px 1px rgb(255, 134, 154);}
    100%{ box-shadow: 0 0 0 0 white;}
}
@keyframes hearth-effect{
    0%{ transform: scale(1);}
    25%{ transform: scale(1.2);}
    50%{ transform: scale(1);}
    75%{ transform: scale(1.2);}
    100%{ transform: scale(1);}
}


/* LOGIN MODAL */
.modalx-container form{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; width: 280px; margin: 0 auto;}
.modalx-container form .phone-label{ color: rgba(var(--black-o), .6); font-weight: 600; font-size: 12px; position: relative; display: inline-block; margin-bottom: 10px; width: 100%;}
.modalx-container form .phone-label::before{ content: ''; display: inline-block; width: 100%; height: .1px; background-color: rgba(var(--black-o), .3); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.modalx-container form .phone-label span{ background-color: white; padding-right: 10px; position: relative; z-index: 2;}
.modalx-container form .input-area{ position: relative; transition: all .2s ease; background-color: var(--main-blue-bg); display: flex; gap: 5px; border: 1px solid var(--main-blue-bg); padding: 2px 10px; height: 45px; width: 280px; border-radius: 8px;}
.modalx-container form .input-area.err{ border-color: var(--main-red); background-color: rgba(var(--main-red-o), .1); color: rgba(var(--main-red-o), .9);}
.modalx-container form .input-area.err input{ color: rgba(var(--main-red-o), 1);}
.modalx-container form .input-area.err input::placeholder{ color: rgba(var(--main-red-o), .6);}
.modalx-container form .input-area::before{ transition: all .2s ease; content: 'Eksik Telefon Numarası'; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%) translateY(-20px); opacity: 0; color: var(--main-red); font-size: 11px; font-weight: 600;}
.modalx-container form .input-area.err::before{ transform: translateX(-50%) translateY(0px); opacity: 1;}
.modalx-container form:not(.code) .input-area:focus-within { box-shadow: 0 0 10px 0 #c9334c2b; background-color: white;}
.modalx-container form .input-area .select-area{ position: relative; display: flex; align-items: center; justify-content: center;}
.modalx-container form .input-area .select-area > label{ display: flex; align-items: center; justify-content: center;}
.modalx-container form .input-area .select-area > label > img{ width: 27px;}
.modalx-container form .input-area .select-area > select{ position: absolute; left: 0; width: 27px; opacity: 0;}
.modalx-container form .input-area .select-area > select option{ }
.modalx-container form .input-area > input{ background-color: transparent; width: 100%; border: none; padding: 0 5px;}
.modalx-container form .input-area > input:focus{ outline: none;}
.modalx-container form > button{ cursor: pointer; transition: all .2s ease; width: 280px; height: 45px; border-radius: 8px; border: none; margin-top: 30px; background-color: var(--main-red); font-weight: 600; color: var(--white-txt);}
.modalx-container form.code > button{ margin-top: 20px;}
.modalx-container form > button:hover{ background-color: #c9334d;}
.modalx-container form .agreement{ width: 280px; margin-top: 10px;}
.modalx-container form .agreement p { color: rgba(var(--black-o), 1); font-size: 10px; font-weight: 500;}
.modalx-container form .agreement p a{ font-weight: 700; text-decoration: none; color: rgba(var(--black-o), .8);}
.modalx-container form .agreement p a:hover{ text-decoration: underline;}


.code-input-area{ transition: all .4s ease; overflow: hidden; height: 0px;}
.modalx-container form.code .code-input-area{ height: 135px;}
.code-input-area > div{ transition: all .4s ease; transform: translateY(-135px) scale(.5); margin-top: 20px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.modalx-container form.code .code-input-area > div{ transform: translateY(0px) scale(1);}
.code-input-area > div::before{ transition: all .2s ease; content: 'Hatalı Kod Girdiniz'; position: absolute; left: 50%; bottom: -25px; white-space: nowrap; transform: translateX(-50%) translateY(-20px); opacity: 0; color: var(--main-red); font-size: 12px; font-weight: 600;}
.code-input-area.err > div::before{ transform: translateX(-50%) translateY(0px); opacity: 1;}
.code-input-area > div > label{ font-size: 14px; font-weight: 600;}
.code-input-area > div > .countdown{ color: rgba(var(--black-o), .8);}
.code-input-area > div > .countdown .time{ font-size: 14px; font-weight: 600;}
.code-input-area > div > .countdown .colon{}
.code-input-area > div .code-input{ display: inline-block; position: relative;  margin-top: 5px;}
.code-input-area > div .code-input > div{ bottom: 7px; position: absolute; width: 17px; height: 1px; background-color: rgba(var(--black-o), .4);}
.code-input-area > div .code-input > div.u1{ left: 25px;}
.code-input-area > div .code-input > div.u2{ left: 46px;}
.code-input-area > div .code-input > div.u3{ left: 68px;}
.code-input-area > div .code-input > div.u4{ left: 89px;}
.code-input-area > div .code-input input{ margin-top: 0; line-height: 1; color: rgba(var(--black-o), .6); transition: all .2s ease; background-color: var(--main-blue-bg); border: 1px solid var(--main-blue-bg); padding: 3px 12px 3px 26px; border-radius: 8px; width: 130px; font-size: 20px; letter-spacing: 10px; height: 45px;}
.code-input-area.err > div .code-input input{ border-color: var(--main-red); background-color: rgba(var(--main-red-o), .1); color: rgba(var(--main-red-o), .9);}
.code-input-area.err > div .code-input > div{ background-color: rgba(var(--main-red-o), .9);}
.code-input-area > div .code-input input:focus-visible{ box-shadow: 0 0 10px 0 #c9334c2b; background-color: white; outline: none;}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
input[type=number] { -moz-appearance: textfield;}


/*
-------------**************-------------
---------------- Footer ----------------
-------------**************-------------
*/
footer{ width: 100%;}
footer .footer{ width: 100%; background-color: var(--main-blue-txt);}
footer .footer > div{ gap: 30px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 10px; display: flex; align-items: flex-start; justify-content: space-between;}
footer .footer > div .left{ display: flex; flex-direction: column; gap: 20px;}
footer .footer > div .left > b{ color: white; font-size: 20px; font-weight: 600;}
footer .footer > div .left > img{ height: 40px;}
footer .footer > div .left .agent{ display: flex; flex-direction: column; gap: 2px;}
footer .footer > div .left .agent > span{ font-size: 11px; color: #ccc;}
footer .footer > div .left .agent > a{font-size: 13px; font-weight: 600; text-decoration: none; color: #ddd;}
footer .footer > div .left .agent > a:hover{ text-decoration: underline;}
footer .footer > div .left .contact{ display: flex; flex-direction: column; gap: 3px;}
footer .footer > div .left .contact > a{ transition: all .2s ease; font-size: 13px; gap: 10px; color: #ddd; display: flex; align-items: center; text-decoration: none;}
footer .footer > div .left .contact > a:hover{ color: white;}
footer .footer > div .left .contact > a i{ width: 7px; display: flex; justify-content: center;}
footer .footer > div .left .contact > a span{}
footer .footer > div .right{ display: flex; width: 100%; max-width: 700px; justify-content: space-between;}
footer .footer > div .right > div{ display: flex; gap: 20px; flex-direction: column;}
footer .footer > div .right > div > a{ font-size: 16px; font-weight: 600; text-decoration: none; color: white;}
footer .footer > div .right > div > p{ font-size: 13px; font-weight: 500; color: #ddd; max-width: 250px;}
footer .footer > div .right > div > div:not(.input){ display: flex; flex-direction: column; gap: 12px;}
footer .footer > div .right > div > div:not(.input) > a{ cursor: pointer; transition: all .2s ease; font-size: 13px; font-weight: 500; text-decoration: none; color: #ddd;}
footer .footer > div .right > div > div:not(.input) > a:hover{ color: white;}
footer .footer > div .right > div > .input{display: flex; outline: 1px solid white; background-color: white; height: 30px; border-radius: 3px; overflow: hidden;}
footer .footer > div .right > div > .input input{ font-size: 13px; background-color: transparent; padding: 0 7px; border: none; width: 100%;}
footer .footer > div .right > div > .input input::placeholder{ color: #aaa; opacity: 1;}
footer .footer > div .right > div > .input input:focus{ outline: none;}
footer .footer > div .right > div > .input button{ background-color: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; text-decoration: none; font-size: 13px; color: var(--main-blue-txt);}
footer .copy{ background-color: var(--main-blue-txt); box-shadow: 0 0 10px 0 rgba(var(--black-o), .5);}
footer .copy > div{ width: 100%; max-width: 1200px; padding: 10px 10px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
footer .copy > div > span{ font-size: 13px; color: var(--white-txt);}
footer .copy > div .cards{ display: flex; align-items: center; gap: 10px;}
footer .copy > div .cards > i{ font-size: 20px; color: var(--white-txt);}


@media screen and (max-width: 830px) {
    footer .footer > div{ flex-direction: column;}
}
@media screen and (max-width: 660px){
    footer .footer > div{ width: 100%; max-width: 550px; margin: 0 auto; padding: 40px 30px;}
    footer .footer > div .right{ flex-direction: column; gap: 50px;}
    footer .footer > div .right > div > .input{ width: 200px;}
    footer .footer > div .right > div > div:not(.input){ gap: 10px;}
    footer .footer > div .right > div > p{ max-width: unset;}
    footer .copy > div{ padding: 10px 30px;}
}

.contracts-area > div{ font-size: 14px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px;}

@media screen and (max-width: 660px) {
    .contracts-area > div{ font-size: 13px;}
}

.mobile{ display: none !important;}

@media screen and (max-width: 1020px) {
    .products._5 .body{ grid-template-columns: repeat(4, 1fr);}

    /* .blogs-area .blogs .body{ grid-template-columns: repeat(5, 1fr);} */
}

@media screen and (max-width: 916px) {
    /* header > div .logo-area .open-left-nav{ display: inline-block;} */

    .products._5 .body{ grid-template-columns: repeat(3, 1fr);}

    html.open-nav body{ position: relative; left: 280px;}
    .main-area .first-section{ grid-template-columns: 100vw; overflow: hidden; padding: 0;}
    .main-area .first-section > .right{ width: 100%; max-width: unset;}
    .main-area.main-page .first-section > .right{ display: flex; flex-direction: column-reverse;}
    .main-area.main-page{ padding-top: 0;}
    .main-area.main-page .first-section > .right .stories{ margin: 0; border: none; border-bottom: 1px solid var(--main-blue-border);}
    footer + #left-nav-container{ display: block;}
    #left-nav-container{ transition: all .4s ease; position: fixed; z-index: 20; height: (var(--vh, 1vh) * 100); width: 280px; top: 0; left: -280px; padding: 0;}
    #left-nav-container.open{ left: 0;}
    #left-nav-container .filter{ transition: all .3s ease; position: fixed; top: 0; right: -100%; height: (var(--vh, 1vh) * 100); width: calc(100% - 280px); background-color: rgba(var(--black-o), .5);}
    #left-nav-container.open .filter{ right: 0;}
    #left-nav-container .nav{ padding: 15px; padding-top: 20px;}
    #left-nav-container .header{ display: flex;}

    /* .blogs-area .blogs .body{ grid-template-columns: repeat(4, 1fr);} */
    .blogs-area .blogs .body .blog > a .img-area{ width: 120px; min-width: 120px; height: 110px;}
    .blogs-area .blogs .body .blog > a .detail .name{ font-size: 14px;}
    .blogs-area .blogs .body .blog > a .detail .txt{ font-size: 11px;}
    .blogs-area .blogs .body .blog > a .detail .info{ gap: 10px;}
    .blogs-area .blogs .body .blog > a .detail .info span{ font-size: 10px;}
}

@media screen and (max-width: 768px) {
    .mobile{ display: flex !important; align-items: center;}
    .web{ display: none !important;}
    header > div .logo-area .open-left-nav{ display: inline-block;}
    header > div .logo-area .logo img{ height: 18px;}
    header > div .buttons > div > div{ display: none;}

    .blogs-area .blogs._2 .body{ grid-template-columns: 1fr;}
    .blogs-area .blogs .body .blog > a .img-area{ width: 22vw; min-width: 22vw; height: 20vw;}

    .products._4 .body{ grid-template-columns: 1fr 1fr;}
    .products._3 .body{ grid-template-columns: 1fr;}

    .products._3 .body .product .img-area{ height: unset !important;}
    .products._3 .body .product .img-area .img img{ height: unset; width: 90vw; max-width: 400px;}
}

@media screen and (max-width: 660px){
    header > div{ display: grid; gap: 15px 0; grid-template-columns: .7fr 1fr; height: auto; padding: 10px;}
    header > div .search-area{ grid-row: 2; grid-column-start: 1; grid-column-end: 3;}
    header > div .search-area .input-area{ width: 100%;}
    header > div .buttons{ justify-content: end;}

    .main-area .first-section > .right .stories > div{ padding: 17px 15px;}

    /* .blogs-area .blogs .body{ grid-template-columns: repeat(3, 1fr);} */
    /* .blogs-area .blogs .body .blog .img-area{ height: 30vw;} */
    .products._5 .body{ gap: 10px; grid-template-columns: repeat(2, 1fr);}
    .products._5.remove-last .body > a:last-child{ display: none;}
    .products .body .product .img-area{ height: 40vw;}
    .category-area{ padding: 0;}
    .category-area > div{ flex-wrap: nowrap;}

    .site-banner > div{ flex-direction: column; gap: 20px;}
    .site-banner > div .left h3{ text-align: center;}
    .site-banner > div .left p{ text-align: center;}

    /* .blogs-area .blogs .body{ gap: 15px 10px; grid-template-columns: 1fr 1fr;} */
    /* .blogs-area .blogs .body .blog .img-area{ height: 45vw;} */
    /* .blogs-area .blogs .body .blog .detail .name{ font-size: 14px;} */
    /* .blogs-area .blogs .body .blog .detail .txt{ font-size: 12px; font-weight: 500; word-break: break-all;} */
}

@media screen and (max-width: 540px) {
    .story-modal-container .story-modal{ height: 100%; width: 100%;}
    .story-modal-container .story-modal .arr{ border-radius: 0; height: 75%; background-color: rgba(var(--black-o), .05);}
    .story-modal-container .story-modal .arr:hover{ background-color: rgba(var(--black-o), .1);}
    .story-modal-container .story-modal .arr.left-arr{ left: 0;}
    .story-modal-container .story-modal .arr.right-arr{ right: 0;}
    .story-modal-container .story-modal .content .three-d .story{ height: auto;}
    .story-modal-container .story-modal .content .three-d .story > div{ display: flex; align-items: center; justify-content: center;}


    .blogs-area .blogs .body .blog > a{ align-items: center;}
    .blogs-area .blogs .body .blog > a .img-area{ width: 80px; min-width: 80px; height: 70px;}
    .blogs-area .blogs .body .blog > a .detail .name{ font-size: 13px;}
    .blogs-area .blogs .body .blog > a .detail .info{ margin-top: 5px;}
}

@media screen and (max-width: 485px) {
    .products .body .product .detail .top{ flex-direction: column;}
    .products .body .product .detail .top{ height: 42px;}

}





/* MODAL */
.modalx{ opacity: 0; pointer-events: none; transition: all .3s ease; position: fixed; top: 0; left: 0; width: 100%; height: (var(--vh, 1vh) * 100); background-color: rgba(0, 0, 0, 0.6); z-index: 25; display: flex; align-items: center; justify-content: center;}
.modalx.active{ opacity: 1; pointer-events: all;}
.modalx .modalx-container{ transition: all .4s ease; opacity: 0; transform: translateY(100px); width: calc(100% - 20px); max-width: 450px; max-height: 90vh; height: 600px; background-color: white; border-radius: 7px; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);}
.modalx.a-height .modalx-container{ max-height: unset; height: auto;}
.modalx .modalx-container.md{ max-height: 90vh; max-width: 850px;}
.modalx.active .modalx-container{ opacity: 1; transform: translateY(0);}
.modalx .modalx-container .header{ position: relative; height: 50px; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: center;}
.modalx .modalx-container .header h5{ font-size: 18px; font-weight: 600;}
.modalx .modalx-container .header span{ cursor: pointer; font-weight: 600; font-size: 30px; position: absolute; right: 20px;}
.modalx .modalx-container .header span:hover{ color: rgb(74, 0, 0);}
.modalx .modalx-container .header span:has(i){ font-size: unset; line-height: 1; top: 50%; transform: translateY(-50%);}
.modalx .modalx-container .header span:has(i) i{ font-size: 18px;}
.modalx .modalx-container .body:not(:has(#login-form)){ padding: 15px; height: calc(100% - 50px);}
.modalx .modalx-container .body .txt-area{ font-size: 13px; background-color: #f0f0f0; border-radius: 10px; padding: 15px; height: 100%;}
.modalx .modalx-container .body .txt-area > div{ padding-right: 15px; overflow-y: auto; height: 100%;}
.modalx .modalx-container .body .txt-area > div::-webkit-scrollbar{ border-radius: 6px; width: 6px; background-color: #ddd;}
.modalx .modalx-container .body .txt-area > div::-webkit-scrollbar-thumb{ border-radius: 6px; background-color: var(--main-blue-txt);}

.g-empty{ display: none; align-items: center; justify-content: center; flex-direction: column; padding: 80px 0; background-color: white; border: 1px solid #cbcbcb; border-radius: 7px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05);}
.g-empty.active{ display: flex;}
.g-empty .icon{ margin-bottom: 10px; color: var(--main-blue-txt); position: relative; font-size: 40px; opacity: .9; width: 80px; height: 80px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--main-blue-txt);}
.g-empty b{ font-size: 15px; margin-bottom: 7px; font-weight: 600; color: #111;}
.g-empty span{ text-align: center; margin-bottom: 13px; font-size: 12px; font-weight: 500; max-width: 50%; color: #333;}
.g-empty a{ transition: all .2s ease; text-decoration: none; font-weight: 600; font-size: 13px; padding: 7px 20px; border-radius: 20px; background-color: var(--main-blue-txt); color: white; border: 2px solid var(--main-blue-txt); box-shadow: 0 0 3px 1px #999;}
.g-empty a[href=""]:active{ box-shadow: none !important; transform: scale(1) !important;}
.g-empty a:hover{ cursor: pointer; background-color: white; color: var(--main-blue-txt); box-shadow: 0 5px 10px 3px #c0c0c0; transform: scaleX(1.05);}









/* body{font-family: 'Rubik', sans-serif; background-color: #f1f2f7; overflow-x: hidden;} */

.mb-1{ margin-bottom: 5px !important;}
.mb-2{ margin-bottom: 10px !important;}
.mb-3{ margin-bottom: 15px !important;}
.mb-4{ margin-bottom: 20px !important;}
.mb-5{ margin-bottom: 25px !important;}
.mb-6{ margin-bottom: 30px !important;}
.mb-7{ margin-bottom: 35px !important;}
.mt-1{ margin-top: 5px !important;}
.mt-2{ margin-top: 10px !important;}
.mt-3{ margin-top: 15px !important;}
.mt-4{ margin-top: 20px !important;}
.mt-5{ margin-top: 25px !important;}
.mt-6{ margin-top: 30px !important;}
.mt-7{ margin-top: 35px !important;}


/* my-account-container{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 10px; gap: 20px; display: grid; grid-template-columns: 280px 1fr;} */
/* my-account-container .left{ height: 600px; background-color: #fff; border-radius: 3px;} */
/* my-account-container .right{ display: flex; flex-direction: column;} */

.my-account-container{}
.my-account-container .right .advanced-search-area{ margin-bottom: 25px; background-color: white; padding: 25px; border-radius: 7px;}
.my-account-container .right .advanced-search-area h2{ margin-bottom: 20px; font-size: 20px; color: #273142;}
.my-account-container .right .advanced-search-area > div{ display: grid; gap: 20px; grid-template-columns: 1fr 1.3fr 1fr;}
.my-account-container .right .advanced-search-area > div .l{ }
.my-account-container .right .advanced-search-area > div .m > div{ display: none;}
.my-account-container .right .advanced-search-area > div .m > div.active:not(#date){ display: flex;}
.my-account-container .right .advanced-search-area > div .m > #date.active{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.my-account-container .right .advanced-search-area > div .m > div{ width: 100%;}
.my-account-container .right .advanced-search-area > div :where(input, select){ width: 100%; height: 35px; border-radius: 3px; border: 1px solid #cbd0d3; outline: none; padding: 0 8px;}
.my-account-container .right .advanced-search-area > div .r{ }
.my-account-container .right .advanced-search-area > div .r > a{ font-size: 14px; height: 35px; border-radius: 5px; background-color: #273142; color: white; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 100%;}

.my-account-container .right .payment-h{ margin-bottom: 25px; border-radius: 7px; background-color: white; padding: 25px;}
.my-account-container .right ._2{ margin-bottom: 25px;}
.my-account-container .right .payment-h h2{ margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;}
.my-account-container .right .payment-h h2 span{ font-size: 20px; color: #273142;}
.my-account-container .right .payment-h h2 a{ transition: all .2s ease; font-size: 13px; text-decoration: underline; font-weight: 400; color: #777d86;}
.my-account-container .right .payment-h h2 a:hover{ color: #10141b;}
.my-account-container .right .payment-h .dates{ display: flex; flex-wrap: nowrap; overflow-y: auto; gap: 7px;}
.my-account-container .right .payment-h .dates > a{ transition: all .2s ease; padding: 8px 15px; background-color: #f0f0f0; color: #273142; font-size: 13px; font-weight: 400; text-decoration: none; border-radius: 20px;}
.my-account-container .right .payment-h .dates > a.active{ background-color: #273142; color: white;}
.my-account-container .right .payment-h .total{ margin-top: 25px;}
.my-account-container .right .payment-h .total > span{ font-size: 15px; margin-bottom: 15px; display: inline-block; font-weight: 400; color: #273142;}
.my-account-container .right .payment-h .total .price{ display: flex; gap: 15px; margin-bottom: 15px;}
.my-account-container .right .payment-h .total .price strong{ font-weight: 600; font-size: 27px; color: #273142;}
.my-account-container .right .payment-h .total .price span{ display: flex; align-items: center; gap: 5px; color: #34d634; font-size: 13px; font-weight: 500;}
.my-account-container .right .payment-h .total .price span i{ font-size: 13px;}
.my-account-container .right .payment-h .total .download{ display: flex; align-items: center; gap: 7px;}
.my-account-container .right .payment-h .total .download img{ height: 15px;}
.my-account-container .right .payment-h .total .download a{ font-size: 13px; color: #525862;}
.my-account-container .right .payment-h .detail{ display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 25px; background-color: #f0f4f6; border-radius: 7px; padding: 25px;}
.my-account-container .right .payment-h .detail > div{ display: flex; align-items: center; justify-content: center; gap: 6px; flex-direction: column;}
.my-account-container .right .payment-h .detail > div:not(:last-child){ border-right: 2px solid #dadee4;}
.my-account-container .right .payment-h .detail > div > span{ font-weight: 400; font-size: 14px; color: #273142;}
.my-account-container .right .payment-h .detail > div > strong{ font-weight: 500; font-size: 14px; color: #273142;}
.my-account-container .right .payment-h .payments{ display: grid;}
.my-account-container .right .payment-h .payments > div{ white-space: nowrap; display: none; overflow-x: auto;}
.my-account-container .right .payment-h .payments > div > div{ background-color: white; border-radius: 7px; padding: 15px; min-width: 330px; width: 330px; display: inline-block;}
.my-account-container .right .payment-h .payments > div > div:not(:last-child){ margin-right: 15px;}
.my-account-container .right .payment-h .payments > div > div > b{ font-size: 11px; color: #8f99aa; margin-bottom: 5px;}
.my-account-container .right .payment-h .payments > div > div > strong{ font-weight: 600; font-size: 18px; margin-bottom: 20px;}
.my-account-container .right .payment-h .payments > div > div > span{ white-space: break-spaces; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500;}
.my-account-container .right .payment-h .payments > div > div > span.msg-s{ color: #22c93e;}
.my-account-container .right .payment-h .payments > div > div > span.msg-i{ color: #6c767999;}
.my-account-container .right .payment-h .payments > div > div > span i{ font-size: 13px;}
.my-account-container .right .payment-h .payments > div > div > .dtl{ nav-right: 5px; display: grid; grid-template-columns: 1fr 1fr;}
.my-account-container .right .payment-h .payments > div > div > .dtl > div:nth-child(even){ text-align: end;}
.my-account-container .right .payment-h .payments > div > div > .dtl > div span{ font-size: 13px;}
.my-account-container .right .payment-h .payments > div > div > .dtl > div b{ font-size: 13px;}

.my-account-container .right .current-balance{ text-decoration: none; transition: all .2s ease; gap: 15px; border-radius: 7px; background-color: white; padding: 25px; display: flex; align-items: center;}
.my-account-container .right > .current-balance{ margin-bottom: 25px;}
.my-account-container .right .current-balance.a:hover{ cursor: pointer; box-shadow: 0 10px 10px -7px rgba(0, 0, 0, .3);}
.my-account-container .right .current-balance .i{ font-size: 18px; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.my-account-container .right .current-balance .i.green{ background-color: #0bc15c; color: white;}
.my-account-container .right .current-balance .i.yellow{ background-color: #b5c10b; color: white;}
.my-account-container .right .current-balance .i.red{ background-color: #c11a0b; color: white;}
.my-account-container .right .current-balance .r{ display: flex; gap: 5px; flex-direction: column;}
.my-account-container .right .current-balance .r .txt{ display: flex; align-items: center; gap: 10px; position: relative;}
.my-account-container .right .current-balance .r .txt > span{ font-weight: 500; font-size: 14px; color: #495260;}
.my-account-container .right .current-balance .r .txt > small{ cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid #777d86; color: #777d86; font-size: 8px; min-width: 15px; width: 15px; height: 15px; border-radius: 50%;}
.my-account-container .right .current-balance .r .txt > div{ transition: all .33s ease; position: absolute; left: calc(100% + 5px); transform: translateY(15px); opacity: 0; pointer-events: none; border-radius: 7px; padding: 10px; background-color: #273142; color: white; font-size: 12px; font-weight: 400; width: 240px;}
.my-account-container .right .current-balance .r .txt > small:hover + div,
.my-account-container .right .current-balance .r .txt > small + div:hover{ transform: translateY(0); opacity: 1; pointer-events: all;}
.my-account-container .right .current-balance .r > strong{ font-size: 22px; font-weight: 500;}
.my-account-container .right .current-balance .r.green > strong{ color: #26ae26;}
.my-account-container .right .current-balance .r.yellow > strong{ color: #aea026;}
.my-account-container .right .current-balance .r.red > strong{ color: #ae2626;}

.my-account-container .right .future-payouts{ background-color: white; padding: 25px; border-radius: 7px;}
.my-account-container .right .future-payouts h2{ margin-bottom: 20px; font-size: 20px; color: #273142;}
.my-account-container .right .future-payouts .info{ margin-bottom: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.my-account-container .right .future-payouts .info > div{ position: relative; background-color: #f0f4f6; padding: 20px; border-radius: 7px;}
.my-account-container .right .future-payouts .info > div{ display: flex; align-items: center; gap: 20px;}
.my-account-container .right .future-payouts .info > div:first-child{ z-index: 2;}
.my-account-container .right .future-payouts .info > div .i{ }
.my-account-container .right .future-payouts .info > div .i img{ }
.my-account-container .right .future-payouts .info > div .txt{ display: flex; flex-direction: column;}
.my-account-container .right .future-payouts .info > div .txt .t{ margin-bottom: 10px; display: flex; align-items: center; gap: 10px; position: relative;}
.my-account-container .right .future-payouts .info > div .txt .t > span{ font-weight: 500; font-size: 12px; color: #495260;}
.my-account-container .right .future-payouts .info > div .txt .t > small{ cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid #777d86; color: #777d86; font-size: 8px; min-width: 15px; width: 15px; height: 15px; border-radius: 50%;}
.my-account-container .right .future-payouts .info > div .txt .t > div{ transition: all .33s ease; position: absolute; left: calc(100% + 5px); transform: translateY(15px); opacity: 0; pointer-events: none; border-radius: 7px; padding: 10px; background-color: #273142; color: white; font-size: 12px; font-weight: 400; width: 170px;}
.my-account-container .right .future-payouts .info > div .txt .t > small:hover + div,
.my-account-container .right .future-payouts .info > div .txt .t > small + div:hover{ transform: translateY(0); opacity: 1; pointer-events: all;}
.my-account-container .right .future-payouts .info > div .txt > strong{ margin-bottom: 5px; font-size: 20px; font-weight: 500; color: #273142;}
.my-account-container .right .future-payouts .info > div .txt > span{ font-size: 12px; font-weight: 500; color: #8f99aa;}
.my-account-container .right .future-payouts .info > div > div > a{ font-size: 12px; text-decoration: none; padding: 5px 15px; border: 1px solid #273142; color: #273142; border-radius: 3px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.c-table{ border-radius: 7px; overflow: hidden; border: 1px solid #d1d6e0;}
.c-table .h{ background-color: #f0f4f6; border-bottom: 1px solid #d1d6e0;}
.c-table .h,
.c-table .b > div{ display: grid; font-size: 11px;}
.c-table .h > div,
.c-table .b > div > div{ padding: 15px;}
.c-table .h > div{ font-weight: 600; color: #676e79;}
.c-table .h > div:not(:last-child){ border-right: 1px solid #d1d6e0;}
.c-table .b > div{}
.c-table .b > div > div{ color: #333a45;}
.c-table .b > div:not(:last-child){ border-bottom: 1px solid #d1d6e0;}
.c-table .b > div > div:not(:last-child){ border-right: 1px solid #d1d6e0;}
.c-table .b > div > div.end{ text-align: end;}
.c-table .b > div.green-bg{ background-color: #25d75a;}
.c-table .b > div.green-bg > div{ border-color: #a3ddbc; font-weight: 600; font-size: 12px; color: white;}
.c-table .b > div > div a{ color: #222;}
.hidden-table{ display: none;}
.hidden-table.active{ display: block;}


.c-table.future-table .h,
.c-table.future-table .b > div{ grid-template-columns: 100px repeat(5, 1fr);}
.c-table.payment-detail .h,
.c-table.payment-detail .b > div{ grid-template-columns: 100px 100px 100px 100px 1fr 100px 100px 100px;}
.c-table.summary-view .h,
.c-table.summary-view .b > div{ grid-template-columns: 150px 1fr 150px 120px;}


.orange{ color: #b58800;}
.red{ color: #900000;}
.green{ color: #0bc15c;}
.gray{ color: #566565;}


.my-account-container .right ._2{ display: grid; grid-template-columns: 1fr 1fr; gap: 25px;}

.my-account-container .right .route{ margin-bottom: 15px; display: flex; gap: 30px;}
.my-account-container .right .route > a{ text-decoration: none; color: #273142; font-weight: 500; font-size: 13px; position: relative; display: inline-block;}
.my-account-container .right .route > a:hover{ text-decoration: underline;}
.my-account-container .right .route > a:not(:last-child)::after{ pointer-events: none; content: '\f105'; display: inline-block; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; position: absolute; top: 50%; right: -16px; transform: translateY(-50%);}
.my-account-container .right .route > a:last-child{ pointer-events: none; color: #8f939b;}

.my-account-container .right .title{ margin-bottom: 15px; display: grid; grid-template-columns: 1fr 1fr 1fr; background-color: white; border-radius: 7px; padding: 15px;}
.my-account-container .right .title .status{ display: flex; align-items: center; justify-content: flex-end; font-size: 14px;}
.my-account-container .right .title .status > span i{ margin-right: 3px;}
.my-account-container .right .title .date{ display: flex; align-items: center; justify-content: center;}
.my-account-container .right .title .date b{ font-weight: 500; font-size: 17px; color: #222;}
.my-account-container .right .title .price{ display: flex; align-items: center; justify-content: flex-start;}
.my-account-container .right .title .price span{ font-size: 14px; margin-right: 5px;}
.my-account-container .right .title .price b{ font-weight: 500; font-size: 20px;}

.my-account-container .right .btns{ display: flex; align-items: center; justify-content: center; gap: 10px;}
.my-account-container .right .btns > a{ transition: all .2s ease; display: flex; align-items: center; justify-content: center; font-size: 13px; width: 170px; height: 37px; background-color: white; color: #273142; border: 1px solid #dadfe2; border-radius: 40px;}
.my-account-container .right .btns > a.active{ pointer-events: none; background-color: #273142; color: white; transform: translateY(0); box-shadow: none;}
.my-account-container .right .btns > a:hover{ border-color: #b1babf; cursor: pointer; transform: translateY(-2px); box-shadow: 0 10px 10px -7px rgba(7, 19, 54, 0.3);}
.my-account-container .right .btns > a:active{ transform: translateY(0); box-shadow: none;}

.my-account-container .right .table-area{ margin-top: 15px; background-color: white; border-radius: 7px; padding: 15px;}




.my-account-container .right .past-payments{ display: flex; flex-direction: column; gap: 15px;}
.my-account-container .right .past-payments > div{ width: 100%; border-radius: 7px; background-color: white; padding: 15px;}
.my-account-container .right .past-payments > div > div{}
.my-account-container .right .past-payments > div > div > div{}
.my-account-container .right .past-payments > div .top{ display: grid; grid-template-columns: 200px 1fr 180px 70px;}
.my-account-container .right .past-payments > div .top > div{}
.my-account-container .right .past-payments > div .top .date{ display: flex; align-items: center; gap: 4px;}
.my-account-container .right .past-payments > div .top .date > b{ font-size: 16px; font-weight: 500; color: #000;}
.my-account-container .right .past-payments > div .top .date > span{ font-size: 14px;}
.my-account-container .right .past-payments > div .top .status{ padding: 0 10px; display: flex; align-items: center;}
.my-account-container .right .past-payments > div .top .status > span{ font-size: 14px; display: flex; align-items: center;}
.my-account-container .right .past-payments > div .top .status > span i{ margin-right: 10px; width: 10px; display: flex; align-items: center; justify-content: center;}
.my-account-container .right .past-payments > div .top .status > span.orange{ color: #e98d03;}
.my-account-container .right .past-payments > div .top .status > span.red{ color: #900000;}
.my-account-container .right .past-payments > div .top .status > span.green{ color: #0bc15c;}
.my-account-container .right .past-payments > div .top .status > span.gray{ color: #566565;}
.my-account-container .right .past-payments > div .top .price{ display: flex; align-items: center; justify-content: flex-start; gap: 4px;}
.my-account-container .right .past-payments > div .top .price > span{ font-size: 14px;}
.my-account-container .right .past-payments > div .top .price > b{ font-weight: 500; font-size: 14px;}
.my-account-container .right .past-payments > div .top .price b.orange{ color: #e98d03;}
.my-account-container .right .past-payments > div .top .price b.red{ color: #900000;}
.my-account-container .right .past-payments > div .top .price b.green{ color: #0bc15c;}
.my-account-container .right .past-payments > div .top .price b.gray{ color: #566565;}
.my-account-container .right .past-payments > div .top .more{ display: flex; align-items: center; justify-content: center;}
.my-account-container .right .past-payments > div .top .more > a{ transition: all .2s ease; display: flex; align-items: center; justify-content: center; background-color: #eee; color: #555; text-decoration: none; font-size: 20px; width: 40px; height: 40px; border-radius: 5px;}
.my-account-container .right .past-payments > div .top .more > a:hover{ color: #ddd; background-color: #273142;}
.my-account-container .right .past-payments > div p{ font-size: 13px; display: flex; align-items: center; gap: 10px; border-top: 1px solid #ddd; margin-top: 15px; padding-top: 15px; color: #777;}




.helper-nav{ position: relative; z-index: 98; width: 100%; background-color: #273142;}
.helper-nav > div{ height: 65px; display: flex; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px;}
.helper-nav > div .logo{ margin-right: 20px;}
.helper-nav > div .logo a{ font-size: 20px; color: #eee; text-decoration: dashed;}
.helper-nav > div .nav nav{ display: flex; justify-content: center; align-items: center; gap: 3px;}
.helper-nav > div .nav nav > div{ position: relative;}
.helper-nav > div .nav nav > div > a{ color: #c5cdd7; text-decoration: none; transition: all .2s ease; cursor: pointer; font-size: 13px; height: 65px; display: flex; align-items: center; padding: 0 15px;}
.helper-nav > div .nav nav > div > a .new{ position: absolute; transform: translate(-6px, -6px);}
.helper-nav > div .nav nav > div > a:hover{ color: #fff;}
.helper-nav > div .nav nav > div.more > a::after{ transition: all .2s ease; margin-left: 13px; color: #ddd; transform: translateY(.5px); content: '\f107'; display: inline-block; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
.helper-nav > div .nav nav > div.more > a:hover::after{ color: #fff;}
.helper-nav > div .nav nav > div.more:has(a + div:hover) > a,
.helper-nav > div .nav nav > div.more:has(a + div:hover) > a::after{ color: #ddd;}
.helper-nav > div .nav nav > div > a + div{ position: relative; transition: all .3s ease; opacity: 0; min-height: fit-content !important; pointer-events: none; transform-origin: top; transform: rotateX(90deg) translateX(-50%); position: absolute; left: 50%; top: 100%; background-color: white; box-shadow: 0 3px 15px 0 rgba(0, 0, 0, .15); border-radius: 5px; padding: 5px 0; display: flex; flex-direction: column;}
.helper-nav > div .nav nav > div > a + div::before{ content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%) translateY(-100%); width: 0; height: 0; border-style: solid; border-width: 0 10px 8px 10px; border-color: transparent transparent #fff transparent;}
.helper-nav > div .nav nav > div > a:hover + div,
.helper-nav > div .nav nav > div > a + div:hover{ opacity: 1; pointer-events: all; transform: rotateX(0deg) translateX(-50%);}
.helper-nav > div .nav nav > div > a + div > a{ position: relative; word-break: keep-all; white-space: nowrap; text-decoration: none; transition: all .2s ease; color: rgba(0, 0, 0, .9); height: 40px; display: flex; align-items: center; padding: 0 23px; font-size: 14px;}
.helper-nav > div .nav nav > div > a + div > a .new{ position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}
.helper-nav > div .nav nav > div > a + div > a:hover{ background-color: #e0e5e9;}
.helper-nav > div .toggle-btn{ margin-right: 5px; margin-left: auto; display: none;}
.helper-nav > div .toggle-btn > span{ width: 22px; height: 22px; position: relative; cursor: pointer; font-size: 18px; color: white; display: inline-block;}
.helper-nav > div .toggle-btn > span i{ opacity: 1; display: inline-block; transition: all .2s ease; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.helper-nav > div .toggle-btn > span .close{ opacity: 0; pointer-events: none;}
.helper-nav > div .nav.active + .toggle-btn > span .open{ opacity: 0; pointer-events: none;}
.helper-nav > div .nav.active + .toggle-btn > span .close{ opacity: 1; pointer-events: none;}

.new{ display: inline-block; position: relative; width: 7px; height: 7px; border-radius: 50%; background-color: orangered; z-index: 5;}
.new::before{ animation: wave 1s forwards infinite; content: ''; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; display: inline-block; position: absolute; width: calc(100%); height: calc(100%); outline: 3px solid orangered; transition: all .2s ease;}

@keyframes wave {
    0%{ width: calc(100%); height: calc(100%);}
    80%{ width: calc(100% + 15px); height: calc(100% + 15px);}
    100%{ width: calc(100% + 20px); height: calc(100% + 20px); opacity: 0;}
}


@media screen and (max-width: 998px) {
    body:has(.helper-nav > div .nav.active){ overflow: hidden;}
    .helper-nav > div .nav{ display: none; z-index: 90; opacity: 1; overflow: hidden; pointer-events: none; transition: all .2s ease; position: absolute; top: 100%; left: 0; width: 100%; height: calc((var(--vh, 1vh) * 100) - 120px);}
    .helper-nav > div .nav.active{ display: block; opacity: 1; pointer-events: all;}
    .helper-nav > div .nav > nav{ overflow-y: auto; transform: translateX(-100%); transition: all .2s ease; padding: 0px; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #fff; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
    .helper-nav > div .nav.active > nav{ transform: translateX(0);}
    .helper-nav > div .nav > nav > b{ display: inline-block; width: 100%; position: relative; text-align: center; font-size: 14px; color: var(--main-red); opacity: 1; font-weight: 700; margin-bottom: 0px; padding: 25px;}
    .helper-nav > div .nav > nav > b::after{content: ''; width: calc(100% - 50px); position: absolute; right: 25px; top: 50%; transform: translateY(-50%); height: 1px; background-color: var(--main-red);}
    .helper-nav > div .nav > nav > b span{ position: relative; display: inline-block; padding: 0 10px; background-color: #191b41; z-index: 2;}
    .helper-nav > div .nav > nav > div{ width: 100%;}
    .helper-nav > div .nav > nav > div > a{ font-size: 16px; padding: 10px 20px; color: #273142; border-bottom: 1px solid #c7ccd5; width: 100%; display: flex; align-items: center; justify-content: space-between;}
    .helper-nav > div .nav > nav > div > a:hover,
    .helper-nav > div .nav > nav > div.more{ transition: all var(--all-2);}
    .helper-nav > div .nav > nav > div.more.open { margin-bottom: 10px; }
    .helper-nav > div .nav > nav > div.more > a:hover::after{ color: #273142;}
    .helper-nav > div .nav > nav > div.more > a::after,
    .helper-nav > div .nav > nav > div > a:hover{ color: #273142;}
    .helper-nav > div .nav > nav > div.more.open > a::after{ transform: rotate(180deg);}
    .helper-nav > div .nav nav > div.more:has(a + div:hover) > a,
    .helper-nav > div .nav nav > div.more:has(a + div:hover) > a::after{ color: #273142 !important;}
    .helper-nav > div .nav nav > div > a:hover + div, .helper-nav > div .nav nav > div > a + div:hover{ opacity: 0; pointer-events: none; transform: unset;}
    .helper-nav > div .nav nav > div > a + div{ overflow: hidden; transition: all .2s ease; opacity: 1 !important; pointer-events: all !important; transform: unset !important; position: static !important; background-color: #f3f3f3; box-shadow: unset !important; width: 100% !important; border-radius: 0 !important; padding: 0; display: flex; flex-direction: column;}
    .helper-nav > div .nav nav > div.open > a + div{ padding: 5px 0;}
    .helper-nav > div .nav nav > div > a + div a{ border-bottom: 1px solid #ddd; color: #273142; font-size: 13px; padding: 0 30px; min-height: 45px;}
    .helper-nav > div .nav nav > div > a + div a:hover{ background-color: transparent; padding: 0 30px;}
    .helper-nav > div .nav nav > div > a + div::before{ display: none;}
    .helper-nav > div .toggle-btn{ display: inline-block;}
    .helper-nav > div .toggle-btn > span{ font-size: 22px;}
}



@media screen and (max-width: 998px){
    .my-account-container{ padding: 10px;}
    .my-account-container .right .advanced-search-area,
    .my-account-container .right > .current-balance{ margin-bottom: 25px;}

    .my-account-container .right .payment-h,
    .my-account-container .right ._2{ margin-bottom: 10px;}

    .my-account-container .left{ display: none;}
    .my-account-container .right .advanced-search-area{ background-color: transparent; padding: 0;}
    .my-account-container .right .advanced-search-area > div{ grid-template-columns: 1fr; background-color: white; padding: 15px; border-radius: 7px;}

    
    .my-account-container .right .payment-h .dates,
    .my-account-container .right .payment-h .total,
    .my-account-container .right .payment-h .detail{ display: none;}
    .my-account-container .right .payment-h{ background-color: transparent; padding: 20px 0 0; transform: translateX(-10px); width: calc(100% + 20px);}
    .my-account-container .right .payment-h h2{ padding: 0 10px;}
    .my-account-container .right .payment-h .payments > div{ padding: 0 10px; display: flex; padding-bottom: 20px;}
    .my-account-container .right .payment-h .payments > div > div > b{ display: block; font-size: 13px;}
    .my-account-container .right .payment-h .payments > div > div > strong{ font-size: 22px; margin: 5px 0 12px; display: inline-block;}
    .my-account-container .right .payment-h .payments > div > div > span{ margin-bottom: 12px;}
    /* .my-account-container .right .payment-h .payments > div::-webkit-scrollbar{ height: 5px; border-radius: 3px;}
    .my-account-container .right .payment-h .payments > div::-webkit-scrollbar-thumb{ background-color: #273142; border-radius: 3px;} */
    
    .my-account-container .right .future-payouts .info{ grid-template-columns: 1fr;}
    .my-account-container .right .future-payouts .info > div .txt .t > small,
    .my-account-container .right .future-payouts .info > div .txt .t > div{ display: none;}
    
    .my-account-container .right .current-balance .r .txt > div,
    .my-account-container .right .current-balance .r .txt > small{ display: none;}

    .my-account-container .right ._2{ gap: 10px; grid-template-columns: 1fr;}    
    .my-account-container .right .current-balance{ padding: 20px;}
    
    .my-account-container .right .future-payouts{ background-color: transparent; padding: 0; display: grid;}
    .my-account-container .right .future-payouts .info{ display: flex; gap: 15px; overflow-x: auto; white-space: nowrap; padding-bottom: 10px;}
    .my-account-container .right .future-payouts .info > div{ background-color: white; display: inline-block; width: calc(50% - 15px); min-width: 310px;}
    .my-account-container .right .future-payouts .info > div > div{ display: flex; align-items: center; gap: 15px;}
    .my-account-container .right .future-payouts .info > div > div > a{ display: none;}
    .my-account-container .right .future-payouts .info > div .txt{ white-space: normal;}

    .my-account-container .right .future-payouts .future-table .h{ display: none;}
    .my-account-container .right .future-payouts .future-table .b{ padding: 0 15px; background-color: white;}
    .my-account-container .right .future-payouts .future-table .b > div{ grid-template-columns: 1fr 1fr; padding: 12px 0;}
    .my-account-container .right .future-payouts .future-table .b > div > div{ padding: 5px 0; font-size: 13px;}
    .my-account-container .right .future-payouts .future-table .b > div > div:not(:last-child){ border-right: none;}
    .my-account-container .right .future-payouts .future-table .b > div > div > span{ color: black; font-weight: 600;}
    .my-account-container .right .future-payouts .future-table .b > div > div:nth-child(1){ white-space: nowrap;}
    .my-account-container .right .future-payouts .future-table .b > div > div:nth-child(1) > span::after{ content: 'Tahmini Ödeme'; font-weight: 500; padding-left: 6px; color: #777;}
    .my-account-container .right .future-payouts .future-table .b > div > div:nth-child(2) > span{ font-size: 15px;}
    .my-account-container .right .future-payouts .future-table .b > div > div:nth-child(3),
    .my-account-container .right .future-payouts .future-table .b > div > div:nth-child(5){ text-align: start;}
    .my-account-container .right .future-payouts .future-table .b > div > div:nth-child(2) ~ div::before{ margin-right: 5px; font-weight: 500; color: #777;}
    .my-account-container .right .future-payouts .future-table .b > div > div:nth-child(3)::before{ content: 'Satış:';}
    .my-account-container .right .future-payouts .future-table .b > div > div:nth-child(4)::before{ content: 'Komisyon:';}
    .my-account-container .right .future-payouts .future-table .b > div > div:nth-child(5)::before{ content: 'Kargo:';}
    .my-account-container .right .future-payouts .future-table .b > div > div:nth-child(6)::before{ content: 'Diğer:';}
    .my-account-container .right .future-payouts .future-table .b > div:last-child{ transform: translateX(-15px); width: calc(100% + 30px); padding: 10px 15px;}
    .my-account-container .right .future-payouts .future-table .b > div:last-child > div:nth-child(2) ~ div{ display: none;}
    .my-account-container .right .future-payouts .future-table .b > div:last-child > div:nth-child(2) > span{ color: white;}


    .my-account-container .right .table-area{ border-radius: 0; background-color: transparent; padding: 0; border-radius: 0;}
    .c-table:where(.payment-detail, .summary-view){ border-radius: 0; border: none;}
    .c-table:where(.payment-detail, .summary-view) .b{ display: flex; flex-direction: column; gap: 15px;}
    .c-table:where(.payment-detail, .summary-view) .b > div:not(:last-child){ border-bottom: none;}
    .c-table.payment-detail .h{ display: none;}
    .c-table.payment-detail .b > div{ position: relative; padding: 7px; overflow: hidden; display: flex; flex-direction: column; background-color: white; border-radius: 7px; grid-template-columns: 1fr;}
    .c-table.payment-detail .b > div > div{ order: 10; display: flex; align-items: center; justify-content: space-between;}
    .c-table.payment-detail .b > div > div:nth-child(1){ order: 3;}
    .c-table.payment-detail .b > div > div:nth-child(1)::before{ content: 'İşlem Tipi';}
    .c-table.payment-detail .b > div > div:nth-child(2){ order: 2;}
    .c-table.payment-detail .b > div > div:nth-child(2)::before{ content: 'Sipariş No';}
    .c-table.payment-detail .b > div > div:nth-child(3)::before{ content: 'İşlem Tarihi';}
    .c-table.payment-detail .b > div > div:nth-child(4){ border-bottom: 1px solid #d1d6e0; border-radius: 0 0 7px 7px;}
    .c-table.payment-detail .b > div > div:nth-child(4)::before{ content: 'Ekstre Tarihi';}
    .c-table.payment-detail .b > div > div:nth-child(5){ border-top: 1px solid #d1d6e0; padding-bottom: 63px; border-radius: 7px 7px 0 0; order: 1; background-color: #f1f2f7; font-size: 12.5px; font-weight: 500;}
    .c-table.payment-detail .b > div > div:nth-child(6),
    .c-table.payment-detail .b > div > div:nth-child(7),
    .c-table.payment-detail .b > div > div:nth-child(8){ gap: 2px; display: flex; flex-direction: column-reverse; border-right: none; border-left: none !important; position: absolute; top: 38px; font-size: 13px; font-weight: 600;}
    .c-table.payment-detail .b > div > div:nth-child(6)::after,
    .c-table.payment-detail .b > div > div:nth-child(7)::after,
    .c-table.payment-detail .b > div > div:nth-child(8)::after{ color: #444; font-weight: 500;}
    .c-table.payment-detail .b > div > div:nth-child(6){ left: 20px;}
    .c-table.payment-detail .b > div > div:nth-child(6)::after{ content: 'Tutar';}
    .c-table.payment-detail .b > div > div:nth-child(7){ left: 50%; transform: translateX(-50%);}
    .c-table.payment-detail .b > div > div:nth-child(7)::after{ content: 'Komisyon';}
    .c-table.payment-detail .b > div > div:nth-child(8){ right: 20px;}
    .c-table.payment-detail .b > div > div:nth-child(8)::after{ content: 'Net Tutar';}
    .c-table.payment-detail .b > div{ font-size: 12px;}
    .c-table.payment-detail .b > div > div:not(:last-child){ border-left: 1px solid #d1d6e0;}

    .c-table.summary-view .h, .c-table.summary-view .b > div{}
    .c-table.summary-view .h{ display: none;}
    .c-table.summary-view .b > div{ display: flex; flex-direction: column;}
    .c-table.summary-view .b > div > div:not(:last-child){ border-right: 1px solid #d1d6e0;}
    .c-table.summary-view .b{ display: flex; flex-direction: column; gap: 15px;}
    .c-table.summary-view .b > div{ background-color: white; border-radius: 7px;}
    .c-table.summary-view .b > div > div{ padding: 14px; font-size: 12px; display: flex; align-items: center; justify-content: space-between;}
    .c-table.summary-view .b > div > div:nth-child(1)::before{ content: 'İşlem Tipi';}
    .c-table.summary-view .b > div > div:nth-child(2){ order: 1; font-weight: 500;}
    .c-table.summary-view .b > div > div:nth-child(3)::before{ content: 'Fatura Numarası';}
    .c-table.summary-view .b > div > div:nth-child(4)::before{ content: 'Net Tutar';}

    .my-account-container .right .title{ display: flex; gap: 5px; flex-direction: column; align-items: flex-start;}
    .my-account-container .right .title > div{ display: flex;}
    .my-account-container .right .title > div:nth-child(1){ order: 1;}
    .my-account-container .right .title > div:nth-child(2)::after{ margin-bottom: 3px; content: 'Tarihli Ödeme'; margin-left: 5px;}
}




@media screen and (max-width: 768px){
    .my-account-container .right .past-payments > div .top{ padding-right: 55px; grid-template-columns: 1fr; position: relative; gap: 7px;}
    .my-account-container .right .past-payments > div .top .more{ position: absolute; right: 5px; top: 50%; transform: translateY(-50%);}
    .my-account-container .right .past-payments > div .top .status{ padding: 0; margin-bottom: 10px;}
    /* my-account-container .right .past-payments > div .top .status > span{ align-items: flex-start;}
    my-account-container .right .past-payments > div .top .status > span i{ margin-top: 3px;} */
}






.feedback{}
.feedback .fb-filter{ opacity: 0; pointer-events: none; transition: all .2s ease; position: fixed; z-index: 99; inset: 0; background-color: rgba(var(--black-o), .6);}
.feedback .toggle-btn{ position: fixed; transform: translateY(-50%) translateX(calc(100% - 18px)) rotate(-90deg); transition: all .33s ease-in-out; right: 0; gap: 10px; top: 50%; z-index: 97; background-color: #344558; color: white; height: 36px; width: fit-content; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 5px 5px 0 0; padding: 0 13px; white-space: nowrap;}
.feedback .toggle-btn.active{ transform: translateY(-50%) translateX(calc(50% - 18px)) rotate(-90deg);}
.feedback .toggle-btn > span{ }
.feedback .toggle-btn > i{ transform: rotate(90deg); font-size: 13px;}
.feedback .feedback-container{ transition: all .33s ease-in-out; transform: translateX(calc(100% + 10px)) translateY(-50%); width: calc(100% - 20px); max-width: 350px; position: fixed; z-index: 100; right: 10px; top: 50%; background-color: white; padding: 20px; border-radius: 10px; box-shadow: none;}
.feedback .feedback-container.active{ transform: translateX(calc(0% - 0px)) translateY(-50%); box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .3);}
.feedback .feedback-container .head{ border-bottom: 1px dashed rgba(var(--black-o), .15); padding-bottom: 15px; display: flex; flex-direction: column;}
.feedback .feedback-container .head b{ font-size: 16px; margin-bottom: 5px; font-weight: 700; color: #000;}
.feedback .feedback-container .head span{ font-size: 12px; font-weight: 500; color: rgba(var(--black-o), .5);}
.feedback .feedback-container .body{ padding-top: 15px;}
.feedback .feedback-container .body .text{}
.feedback .feedback-container .body .text > span{ font-size: 11px; font-weight: 500; color: rgba(var(--black-o), .5); margin-bottom: 7px; display: inline-block;}
.feedback .feedback-container .body .text .text-area{ transition: all .2s ease; outline: 1px solid transparent; border: 1px solid var(--main-blue-border); border-radius: 7px; padding: 10px; display: flex; flex-direction: column;}
.feedback .feedback-container .body .text .text-area:focus-within{ border-color: var(--main-blue-txt);}
.feedback .feedback-container .body .text .text-area textarea{ font-size: 11px; width: 100%; height: 170px; border: none; outline: none; resize: none;}
.feedback .feedback-container .body .text .text-area > div{ transition: all .2s ease; border-top: 1px solid rgba(var(--black-o), .05); padding-top: 10px; margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: flex-end;}
.feedback .feedback-container .body .text .text-area > div > div{ color: rgba(var(--black-o), .3); font-size: 12px; font-weight: 500;}
/* .feedback .feedback-container .body .text .text-area:focus-within > div{ border-color: var(--main-blue-txt);} */
.feedback .feedback-container .body .text .text-area > div > div span{ }
.feedback .feedback-container .body .text .text-area > div > div span.char-count{ color: rgba(var(--black-o), .8);}
.feedback .feedback-container .footer{ display: flex; gap: 15px; margin-top: 15px;}
.feedback .feedback-container .footer button{ transition: all .2s ease; cursor: pointer; border: 1px solid; height: 35px; padding: 0 20px; font-size: 13px; font-weight: 600; border-radius: 7px;}
.feedback .feedback-container .footer button:hover{ box-shadow: 0 7px 7px -3px rgba(var(--black-o), .2);}
.feedback .feedback-container .footer button.no{ border-color: var(--main-blue-txt); color: var(--main-blue-txt); background-color: white;}
.feedback .feedback-container .footer button.yes{ width: 100%; border-color: var(--main-blue-txt); background-color: var(--main-blue-txt); color: white;}
.feedback .feedback-container .close-btn{ transition: all .2s ease; cursor: pointer; position: absolute; top: 15px; right: 20px; font-size: 20px; color: rgba(var(--black-o), .4);}
.feedback .feedback-container .close-btn:hover{ color: rgba(var(--black-o), .7);}


@media screen and (max-width: 668px) {
    /* .feedback .toggle-btn{ transform: translateY(100%); right: 10px; gap: 10px; bottom: -1px; top: unset !important;  background-color: #344558; color: white; height: 36px; width: fit-content; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 5px 5px 0 0; padding: 0 13px; white-space: nowrap;}
    .feedback .toggle-btn.active{ transform: translateY(0%);} */
    .feedback .toggle-btn{ transform: translateY(-50%) translateX(calc(100% - 0px)) rotate(0); border-radius: 5px 0 0 5px;}
    .feedback .toggle-btn.active{ transform: translateY(-50%) translateX(calc(50% - 18px)) rotate(0deg);}
    .feedback .toggle-btn > span{ display: none;}
    .feedback .toggle-btn > i{ transform: unset;}
    /* .feedback .feedback-container{ transition: all .33s ease-in-out; transform: translateY(calc(100% + 10px)); width: calc(100% - 20px); max-width: unset; right: 10px; left: 10px; top: unset; bottom: calc(0% + 10px);}
    .feedback .feedback-container.active{ transform: translateY(calc(0% + 0px)); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);} */
    .feedback .feedback-container{ transition: all .33s ease-in-out; transform: translateY(calc(-100% - 10px)); width: calc(100% - 20px); max-width: unset; right: 10px; left: 10px; top: calc(0% + 10px); bottom: unset;}
    .feedback .feedback-container.active{ transform: translateY(calc(0% + 0px)); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);}
    .feedback .feedback-container .body .text .text-area textarea{ height: 130px;}
    .feedback .fb-filter.active{ opacity: 1; pointer-events: all;}
    body:has(.feedback .fb-filter.active){ overflow: hidden;}
}