/* MY BASKET HTML */
.my-basket-section{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; margin-top: 10px; min-height: 500px;}
.my-basket-section > h3{ font-size: 25px; font-weight: 300; margin-bottom: 20px;}
.my-basket-section > h3 .basket-head{ display: none;}
.my-basket-section > h3 a{ display: none;}
.my-basket-section > div{ display: flex; gap: 20px; padding-bottom: 20px;}
.my-basket-section > div > .products-in-basket{ width: 100%; display: flex; flex-direction: column; gap: 20px; margin-bottom: 80px;}
.my-basket-section > div > .products-in-basket .seller-products{ border-radius: 7px; overflow: hidden; border: 1px solid #e1e1e1;}
.my-basket-section > div > .products-in-basket .seller-products .header{ position: relative; background-color: #f8f8f8; height: 50px; display: flex; align-items: center; padding-left: 20px; border-bottom: 1px solid #e1e1e1;}
.my-basket-section > div > .products-in-basket .seller-products .header .check-all-seller-product{ position: relative; width: 16px; height: 16px; border-radius: 2px; outline: 1px solid #7c7c7c; background-color: white; margin-right: 15px; cursor: pointer;}
.my-basket-section > div > .products-in-basket .seller-products .header .check-all-seller-product.chckd::before{ content: '\f00c'; display: flex; align-items: center; justify-content: center; position: absolute; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; width: 100%; height: 100%; background-color: var(--main-color); color: white; top: 0; left: 0; outline: 1px solid var(--main-color); border-radius: 2px; font-size: 13px;}
.my-basket-section > div > .products-in-basket .seller-products .header > span{ color: #919191; font-size: 14px; font-weight: 300;}
.my-basket-section > div > .products-in-basket .seller-products .header > a{ text-decoration: none; margin-left: 5px;}
.my-basket-section > div > .products-in-basket .seller-products .header > a .seller-name{ color: black; font-weight: 600; font-size: 14px;}
.my-basket-section > div > .products-in-basket .seller-products .header > a .store-rating{ padding: 1px 5px; border-radius: 3px; margin-left: 6px; color: white; font-size: 11px;}
.my-basket-section > div > .products-in-basket .seller-products .header > a i{ font-size: 13px;}
.my-basket-section > div > .products-in-basket .seller-products .header > .free-cargo{ position: absolute; right: 0; height: 100%; padding: 0 30px; background-color: rgb(171, 255, 171); display: flex; align-items: center;}
.my-basket-section > div > .products-in-basket .seller-products .header > .free-cargo i{ color: rgb(0, 141, 0); margin-right: 3px;}
.my-basket-section > div > .products-in-basket .seller-products .header > .free-cargo span{ color: rgb(0, 12, 0); font-weight: 600; font-size: 13px;}
.my-basket-section > div > .products-in-basket .seller-products .header > {}
.my-basket-section > div > .products-in-basket .seller-products .body{}
.my-basket-section > div > .products-in-basket .seller-products .body > div{ display: flex; align-items: center; background-color: white;}
.my-basket-section > div > .products-in-basket .seller-products .body > div > span{ display: none;}
.my-basket-section > div > .products-in-basket .seller-products .body > div:not(div:last-child){ border-bottom: 1px solid #e0e0e0;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .check-area{ display: flex; align-items: center; justify-content: flex-end; min-width: 37px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .check-area .check-seller-product{ position: relative; width: 16px; height: 16px; border-radius: 2px; outline: 1px solid #7c7c7c; background-color: white; cursor: pointer;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .check-area .check-seller-product.chckd::before{ content: '\f00c'; display: flex; align-items: center; justify-content: center; position: absolute; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; width: 100%; height: 100%; background-color: var(--main-color); color: white; top: 0; left: 0; outline: 1px solid var(--main-color); border-radius: 2px; font-size: 13px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-img{ width: 43px; height: 64px; min-width: 43px; min-height: 64px; margin-left: 12px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-img img{ width: 100%;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area{ display: flex;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area{ display: flex; align-items: center; gap: 10px; padding: 20px 15px 20px 10px; text-decoration: none; width: 100%;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail{ display: flex; flex-direction: column; /*width: calc(100% - 43px);*/}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > p{ display: flex; width: 100%; height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; font-size: 14px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > p b{ white-space: nowrap;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > p span{ white-space: nowrap; width: 100%; width: 100%; background-color: var(--main-color);}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > div{ font-size: 13px; color: #7c7c7c;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > div b{ color: black; font-size: 12px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control{ display: flex;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area{ display: flex; align-items: center; justify-content: center; min-width: 136px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div{ display: flex; width: 150px; border-radius: 5px; width: fit-content; outline: 1px solid #e0e0e0; position: relative;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div > span{ position: absolute; font-size: 10px; color: #8d0000; font-weight: 700; top: -6px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; opacity: 0; transition: all .1s ease-in  ;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div > span.full{ opacity: 1; top: -16px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div button{ width: 25px; height: 35px; pointer-events: none; background-color: #f9f9f9; border: none; font-size: 17px; color: #d0d0d0; transition: all .1s;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div button.active{ color: var(--main-color); pointer-events: all;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div button.active:hover{ background-color: #f1f1f1; cursor: pointer;}
/* .my-basket-section > div > .products-in-basket .seller-products .body > div .count-area > div button.active:hover{ background-color: var(--main-color); color: white; cursor: pointer;} */
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div .down{ border-right: 1px solid #e0e0e0; font-size: 14px; padding-top: 2px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div .down i{ pointer-events: none;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div .up{ border-left: 1px solid #e8e8e8;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div input{ width: 45px; height: 35px; border: none; text-align: center; padding: 0 6px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div input::-webkit-outer-spin-button,.my-basket-section > div > .products-in-basket .seller-products .body > div .count-area > div input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div input[type=number] { -moz-appearance: textfield;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .price-area{ color: var(--main-color); font-weight: 400; font-size: 15px; display: flex; align-items: center; justify-content: center; min-width: 102px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .delete-area{ display: flex; align-items: center; justify-content: center; min-width: 51px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .delete-area span{ color: rgb(151, 0, 0); font-size: 18px;}
.my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .delete-area span:hover{ animation: shake 1s normal 1; cursor: pointer;}

.my-basket-section > div > .products-in-basket .empty-basket{ width: 100%; padding: 60px 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #bbbbbb; background-color: white; border-radius: 3px;}
.my-basket-section > div > .products-in-basket .empty-basket > div{ width: 55px; height: 55px; margin-bottom: 10px; border-radius: 50%; border: 4px solid var(--main-color); color: var(--main-color); padding: 10px 0 0 11px; font-size: 20px;}
.my-basket-section > div > .products-in-basket .empty-basket > b{  font-size: 15px; margin-bottom: 5px;}
.my-basket-section > div > .products-in-basket .empty-basket > span{ font-size: 13px; color: #444; text-align: center;}
.my-basket-section > div > .products-in-basket .empty-basket > a{ font-size: 14px; font-weight: 700; margin-top: 10px; color: var(--main-color); text-align: center; transition: all .1s;}
.my-basket-section > div > .products-in-basket .empty-basket > a:hover{ opacity: .8;}

@keyframes shake{
    0%{ transform: rotate(-15deg);}
    25%{ transform: rotate(15deg);}
    50%{ transform: rotate(-15deg);}
    75%{ transform: rotate(15deg);}
    100%{ transform: rotate(0deg);}
}

/* .my-basket-section > div > .products-in-basket .seller-products .body > div > div:nth-child(odd){background-color: rgba(102, 51, 153, 0.118);}
.my-basket-section > div > .products-in-basket .seller-products .body > div > div:nth-child(even){background-color: rgba(0, 0, 0, 0.396);} */
/* .my-basket-section > div > .products-in-basket .seller-products .body > div > div{ padding: 20px 0;} */

.my-basket-section > div .basket-price{ width: 235px; min-width: 235px; height: fit-content; position: sticky; top: 20px;}
.my-basket-section > div .basket-price > #order-summary{ position: relative; overflow: hidden; border: 1px solid #e0e0e0; border-radius: 5px; padding: 20px 15px; box-shadow: 0 0 5px 1px #e0e0e0; transition: all .3s;}
.my-basket-section > div .basket-price > #order-summary::after{ content: ''; display: inline-block; position: absolute; width: 100px; height: 15px; transform: rotate(30deg); background: linear-gradient(90deg, #ff5f5f, var(--main-color), #ff5f5f); top: 10px; right: -25px; transition: all .3s;}
.my-basket-section > div .basket-price > #order-summary.buy{ box-shadow: -5px 7px 19px 1px #006d16; transform: translateX(2px) translateY(-2px);}
.my-basket-section > div .basket-price > #order-summary.buy .total-price span{ color: #006d16;}
.my-basket-section > div .basket-price > #order-summary.buy::after{ background: linear-gradient(90deg, #006d16, #19f006, #006d16);}
.my-basket-section > div .basket-price > #order-summary h4{ font-weight: 100; font-size: 20px; margin-bottom: 10px;}
.my-basket-section > div .basket-price > #order-summary .products-price{ }
.my-basket-section > div .basket-price > #order-summary .products-price > div{ display: grid; grid-template-columns: 1fr 1fr; font-size: 12px; padding: 3px 0;}
.my-basket-section > div .basket-price > #order-summary .products-price > div span{ text-align: end; font-size: 15px; font-weight: 700;}
.my-basket-section > div .basket-price > #order-summary hr{ margin: 10px 0; border-top: .1px solid rgb(187, 187, 187);}
.my-basket-section > div .basket-price > #order-summary .total-price{ display: grid; grid-template-columns: 1fr 1fr;}
.my-basket-section > div .basket-price > #order-summary .total-price b{ font-size: 14px;}
.my-basket-section > div .basket-price > #order-summary .total-price span{ text-align: end; color: var(--main-color); font-weight: 700; font-size: 16px;}
.my-basket-section > div .basket-price > .contract{ border: 1px solid #e0e0e0; border-radius: 5px; overflow: hidden; margin-top: 10px;}
.my-basket-section > div .basket-price > .contract.active{ animation: flash 2s ease-in-out 1.5;}
.my-basket-section > div .basket-price > .contract > div > .lightning{ font-size: 11px; cursor: pointer; padding: 10px; border-bottom: 1px solid #ebebeb; color: var(--main-color); display: inline-block; line-height: 14px;}
.my-basket-section > div .basket-price > .contract > div > .lightning:hover{ text-decoration: underline;}
.my-basket-section > div .basket-price > .contract > div > .checkbox{ display: flex; padding: 10px;}
.my-basket-section > div .basket-price > .contract > div > .checkbox input[type="checkbox"]{ position: absolute; cursor: pointer; height: 0; width: 0;}
.my-basket-section > div .basket-price > .contract > div > .checkbox input[type="checkbox"]::before{ content: ''; position: absolute; left: 0%; top: 3px; display: inline-block; border: 1px solid #a7a7a7; background-color: #f8f8f8; width: 14px; height: 14px; border-radius: 3px;}
.my-basket-section > div .basket-price > .contract > div > .checkbox input[type="checkbox"]:checked::before{ content: '\f00c'; font-size: 11px; padding: 1px 0.5px 0 0; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: var(--main-color); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 3px; border: 1px solid var(--main-color); width: 14px; height: 14px;}
.my-basket-section > div .basket-price > .contract > div > .checkbox label{ cursor: pointer; display: inline-block; font-size: 11px; padding-left: 20px;}
.my-basket-section > div .basket-price > .contract > div > .checkbox label span{ display: none; font-size: 10px; color: red;}
.my-basket-section > div .basket-price > .contract > div > .checkbox label span.active{ display: inline-block;}
.my-basket-section > div .basket-price > .contract > div > .secure{ display: none; font-size: 10px; padding: 10px; color: black;  border-top: 1px solid #ebebeb;}
/* .my-basket-section > div .payment-steps.payment + .basket-price > .contract > div .lightning{ display: none;} */
/* .my-basket-section > div .payment-steps.payment + .basket-price > .contract > div .checkbox{ display: none;} */
.my-basket-section > div .payment-steps.payment + .basket-price > .contract > div > .secure{ display: inline-block;}
.my-basket-section > div .basket-price > button{ position: relative; overflow: hidden; width: 100%; height: 40px; transition: all .3s; font-size: 18px; border-radius: 5px; font-weight: 500; box-shadow: 0 0 5px 1px #ddd; outline: 2px solid var(--main-color); border: none; margin-top: 15px;}
.my-basket-section > div .basket-price > button.disabled{ pointer-events: none; outline: 2px solid #ccc;}
.my-basket-section > div .basket-price > button.disabled::before{ content: 'Sepetiniz Boş'; color: #999; background-color: #f5f5f5; outline: 2px solid #ccc;}
.my-basket-section > div .basket-price > button::before{ content: 'Satın Al'; background-color: var(--main-color); color: white; position: absolute; top: 0; left: 0; border-radius: 3px; display: inline-block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: all .3s ease;}
.my-basket-section > div .basket-price > button::after{ content: 'Sepeti Onayla'; position: absolute; color: white; top: 0; left: 0; transform: translateY(100%) skewX(-100deg); border-radius: 3px; display: inline-block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #04b622;  transition: all .3s ease;}
.my-basket-section > div .payment-steps.address + .basket-price > button.go-ahead::before{ content: 'Kaydet ve Devam Et'; font-size: 17px;}
.my-basket-section > div .payment-steps.address + .basket-price > button.go-ahead::after{ content: 'Kaydet ve Devam Et'; font-size: 17px;}
.my-basket-section > div .payment-steps.payment + .basket-price > button.go-ahead::before{ content: 'Ödeme Yap'; font-size: 17px;}
.my-basket-section > div .payment-steps.payment + .basket-price > button.go-ahead::after{ content: 'Siparişi Tamamla'; font-size: 17px;}
.my-basket-section > div .basket-price > button:hover::after{ transform: translateY(0) skewX(0deg);}
.my-basket-section > div .basket-price > button:hover::before{ transform: translateY(-100%) skew(100deg);}
.my-basket-section > div .basket-price > button:hover{ outline-color: #04b622; cursor: pointer;}
.my-basket-section > div .basket-price > button:hover ~ div{ background-color: var(--main-color);}

@keyframes flash{
    0%{ box-shadow: none; border-color: #e0e0e0;}
    25%{ box-shadow: 0 0 5px 1px var(--main-color); border-color: var(--main-color);}
    50%{ box-shadow: 0 0 3px 1px #e6193b30; border-color: var(--main-color);}
    75%{ box-shadow: 0 0 5px 1px var(--main-color); border-color: var(--main-color);}
    100%{ box-shadow: none; border-color: #e0e0e0;}
}

.my-basket-section .mobile-order-summary-container{ display: none; width: 100%; height: 80px; position: fixed; bottom: 0; left: 0; z-index: 10;}
.my-basket-section .mobile-order-summary-container .mobile-order-summary{ display: flex; width: 100%; height: 80px; background-color: white; border-top: 2px solid #e1e1e1; box-shadow: 0 0 7px 1px #d3d3d3;; align-items: center; justify-content: space-between; padding: 0 10px 0 15px; flex-direction: row;}
.my-basket-section .mobile-order-summary-container .mobile-order-summary > button{ width: 200px; height: 45px; background-color: var(--main-color); border: 2px solid var(--main-color); color: white; font-size: 16px; border: 2px solid var(--main-color); border-radius: 7px; transition: all .2s;}
.my-basket-section .mobile-order-summary-container .mobile-order-summary > button:hover{ background-color: white; color: var(--main-color);}
.my-basket-section .mobile-order-summary-container .mobile-order-summary > button.disabled{ background-color: #f5f5f5; border: 1px solid #ccc; color: #999;}
.my-basket-section .mobile-order-summary-container .mobile-order-summary > .order-price{ display: flex; align-items: center; gap: 10px; z-index: 10;}
.my-basket-section .mobile-order-summary-container .mobile-order-summary > .order-price > span{ color: var(--main-color); transition: all .2s; display: inline-block;}
.my-basket-section .mobile-order-summary-container .mobile-order-summary > .order-price > div{ display: flex; flex-direction: column;}
.my-basket-section .mobile-order-summary-container .mobile-order-summary > .order-price > div h5{ font-size: 15px; font-weight: 400; color: #4e4e4e;}
.my-basket-section .mobile-order-summary-container .mobile-order-summary > .order-price > div > span{ color: var(--main-color); font-weight: 600;}
.my-basket-section .mobile-order-summary-container .order-detail-area{ height: calc(100vh - 80px); width: 100%; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(.5px); position: absolute; top: calc(-100vh + 80px); left: 0; opacity: 0; pointer-events: none; transition: all .2s ease-in; z-index: -1;}
.my-basket-section .mobile-order-summary-container .order-detail-area .order-detail{ width: 100%; background-color: white; position: absolute; bottom: 0; padding: 15px 10px; transform: translateY(100%); transition: all .2s ease; z-index: 1;}
.my-basket-section .mobile-order-summary-container .order-detail-area .order-detail > div{ display: grid; grid-template-columns: 1fr 1fr; font-size: 15px; padding: 3px 0;}
.my-basket-section .mobile-order-summary-container .order-detail-area .order-detail > div span{ text-align: end; font-size: 16px; font-weight: 700;}

.my-basket-section .mobile-order-summary-container.open .mobile-order-summary > .order-price > span{ transform: rotate(-180deg);}
.my-basket-section .mobile-order-summary-container.open .order-detail-area{ opacity: 1; pointer-events: all;}
.my-basket-section .mobile-order-summary-container.open .order-detail-area .order-detail{ transform: translateY(0);}


/* .my-basket-section > div .basket-price > button::after{ content: 'Sepeti Onayla'; position: absolute; color: white; top: 0; left: 0; transform: translateY(200%) rotate(20deg); border-radius: 3px; display: inline-block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #04b622;  transition: all .3s ease;}
.my-basket-section > div .basket-price > button:hover::after{ transform: translateY(0) rotate(0deg)}
.my-basket-section > div .basket-price > button:hover::before{ transform: translateY(-200%) rotate(-20deg)} */


@media screen and (max-width: 768px) {
    .my-basket-section .mobile-order-summary-container{ display: block;}

    .my-basket-section{ padding: 0 0 50px; margin-top: 0; height: 100vh; overflow-y: auto; background-color: #efefef;}
    /* .navbar .navbar-container .navbar-detail{ display: none;} */
    .my-basket-section > h3{ background-color: white; border-bottom: 1px solid #d0d0d0; text-align: center; font-size: 16px; font-weight: 600; position: relative; padding: 10px 0;}
    .my-basket-section > h3 a{ display: inline-block; position: absolute; left: 10px; font-size: 23px; top: 50%; transform: translateY(-50%); color: black;}
    /* .basket-price{ display: none;} */
    .my-basket-section > div > .products-in-basket .seller-products .header{ background-color: white;}
    .my-basket-section > div > .products-in-basket .seller-products .header > a i{ display: none;}
    .my-basket-section > div > .products-in-basket .seller-products .header > a .store-rating{ display: none;}
    .my-basket-section > div > .products-in-basket .seller-products .header > .free-cargo{ background-color: white; padding: 0 10px;}
    .my-basket-section > div > .products-in-basket .seller-products .header > .free-cargo i{ font-size: 12px;}
    .my-basket-section > div > .products-in-basket .seller-products .header > .free-cargo span{ font-size: 12px; color: #006d16;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div{ padding: 15px 10px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .check-area{ min-width: 26px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-img{ width: 65px; min-width: 65px; height: 100px; min-height: 100px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area{ flex-direction: column; width: 100%; position: relative;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area{ padding: 0 0 0 10px; justify-content: start;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > p{ font-size: 13px; height: 36px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > p b{ display: block;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > div{ font-size: 12px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > div b{ font-size: 10px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control{ margin-top: 15px; margin-bottom: 6px; justify-content: space-between; padding-left: 10px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area{ min-width: 95px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .delete-area{ position: absolute; right: 0; top: -8px; min-width: 16px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .delete-area span{ font-size: 15px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div input{ height: 27px; font-size: 13px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div button{ height: 27px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div .down{ padding-top: 4px; padding-bottom: 0; font-size: 14px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div > span{ top: unset; bottom: -6px;}
    .my-basket-section > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div > span.full{ top: unset; bottom: -16px;}
}
@media screen and (max-width: 830px) {
    .my-basket-section > div{ flex-direction: column-reverse;}
    .my-basket-section > div > .products-in-basket{ padding: 0 10px;}

    .basket-price{ min-width: 100% !important; margin-bottom: 30px;}
}


/* BASKET PAYMENT */
/* .my-basket-section > div .payment-steps{ width: 100%;}
.my-basket-section > div .payment-steps.address .steps-nav::before{ left: 0;}
.my-basket-section > div .payment-steps .steps-nav{ position: relative; display: grid; border-radius: 3px; overflow: hidden; grid-template-columns: 1fr 1fr; border: 1px solid #ddd;}
.my-basket-section > div .payment-steps .steps-nav::before{ content: ''; display: inline-block; position: absolute; bottom: 0; background-color: #ddd; height: 5px; width: 100%; z-index: 2;}
.my-basket-section > div .payment-steps .steps-nav::after{ transition: all .2s ease; content: ''; display: inline-block; position: absolute; bottom: 0; background-color: var(--main-color); height: 5px; width: 50%; z-index: 2;}
.my-basket-section > div .payment-steps.address .steps-nav::after{ left: 0;}
.my-basket-section > div .payment-steps.payment .steps-nav::after{ left: 50%;}
.my-basket-section > div .payment-steps .steps-nav > div{ transition: all .2s ease; cursor: pointer; background-color: #fafafa; padding: 15px;}
.my-basket-section > div .payment-steps .steps-nav > div:first-child{ border-right: 1px solid #ddd;}
.my-basket-section > div .payment-steps .steps-nav > div h2{ font-size: 18px; font-weight: 600; color: #333; margin-bottom: 5px;}
.my-basket-section > div .payment-steps .steps-nav > div.address-nav{ display: flex; flex-direction: column;}
.my-basket-section > div .payment-steps.address .steps-nav > div.address-nav{ background-color: white;}
.my-basket-section > div .payment-steps.address .steps-nav > div.address-nav h2{ color: var(--main-color);}
.my-basket-section > div .payment-steps .steps-nav > div.address-nav .address{}
.my-basket-section > div .payment-steps.payment .steps-nav > div.payment-nav{ background-color: white;}
.my-basket-section > div .payment-steps.payment .steps-nav > div.payment-nav h2{ color: var(--main-color);}
.my-basket-section > div .payment-steps .steps-nav > div.address-nav .address > span{ width: 100%; height: 16px; font-size: 12px; font-weight: 500; color: #555; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;}
.my-basket-section > div .payment-steps .steps-nav > div.address-nav .address .header{ margin-bottom: 3px; font-weight: 600;}
.my-basket-section > div .payment-steps .steps-nav > div.address-nav .address .statment{}
.my-basket-section > div .payment-steps .steps-nav > div.address-nav .address .city{}
.my-basket-section > div .payment-steps .steps-nav > div.payment-nav{}
.my-basket-section > div .payment-steps .steps-nav > div.payment-nav p{ font-size: 12px; color: #555;} */


.my-basket-section > div .payment-steps{ width: 100%;}
.my-basket-section > div .payment-steps .steps-nav{ width: 100%; margin-bottom: 30px;}
.my-basket-section > div .payment-steps .steps-nav > div{ position: relative; width: 100%; display: flex; align-items: baseline; justify-content: space-around;}
.my-basket-section > div .payment-steps .steps-nav > div::before{ content: ''; width: 100%; height: 5px; border-radius: 10px; background-color: #ddd; z-index: 1; position: absolute; top: 15px; left: 0;}
.my-basket-section > div .payment-steps .steps-nav > div::after{ transition: all .6s ease; content: ''; width: 0; height: 5px; border-radius: 10px; background-color: var(--main-color); z-index: 2; position: absolute; top: 15px; left: 0;}
.my-basket-section > div .payment-steps.address .steps-nav > div::after{ width: 50%;}
.my-basket-section > div .payment-steps.payment .steps-nav > div::after{ width: 100%;}
.my-basket-section > div .payment-steps .steps-nav > div > div{ cursor: pointer; position: relative; z-index: 3; display: flex; gap: 2px; align-items: center; justify-content: center; flex-direction: column;}
.my-basket-section > div .payment-steps .steps-nav > div > div .circle{ transition: all .5s; position: relative; width: 40px; background-color: white; height: 40px; border: 4px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.my-basket-section > div .payment-steps .steps-nav > div > div .circle::before{ transition: all .5s; content: '\f00d'; font-family: 'FONT AWESOME 5 FREE'; color: white; font-size: 14px; font-weight: 900; display: inline-block; box-sizing: border-box; padding: 6px 0 0 7.7px; width: 25px; height: 25px; border-radius: 50%;  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #ddd;}
.my-basket-section > div .payment-steps.address .steps-nav > div > div.address-nav .circle, .my-basket-section > div .payment-steps.payment .steps-nav > div > div.address-nav .circle{ border-color: var(--main-color);}
.my-basket-section > div .payment-steps.address .steps-nav > div > div.address-nav h2, .my-basket-section > div .payment-steps.payment .steps-nav > div > div.address-nav h2{ color: var(--main-color);}
.my-basket-section > div .payment-steps.address .steps-nav > div > div.address-nav .circle::before, .my-basket-section > div .payment-steps.payment .steps-nav > div > div.address-nav .circle::before{ content: '\f00c'; background-color: var(--main-color); padding: 6px 0 0 6px;}
.my-basket-section > div .payment-steps.payment .steps-nav > div > div.payment-nav .circle{ border-color: var(--main-color);}
.my-basket-section > div .payment-steps.payment .steps-nav > div > div.payment-nav h2{ color: var(--main-color);}
.my-basket-section > div .payment-steps.payment .steps-nav > div > div.payment-nav .circle::before{ content: '\f00c'; background-color: var(--main-color); padding: 6px 0 0 6px;}
.my-basket-section > div .payment-steps .steps-nav > div > div h2{ text-align: center; font-size: 12px; font-weight: 700;}
.my-basket-section > div .payment-steps .steps-container{ min-height: 256px;}
.my-basket-section > div .payment-steps .steps-container > div{ transition: all .6s ease; opacity: 0; transform: translateY(30px); display: none; padding: 15px; border: 1px solid #ddd; box-shadow: 0 0 3px 1px #ddd; border-radius: 3px;}
.my-basket-section > div .payment-steps .steps-container > div > div h3{ font-size: 17px; font-weight: 600;}
.my-basket-section > div .payment-steps.address .steps-container > div.address-container{ display: block;}
.my-basket-section > div .payment-steps.address.animate .steps-container > div.address-container{ opacity: 1; transform: translateY(0);}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div{ position: relative;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div.addresses{ margin-top: 20px; display: grid; gap: 15px; grid-template-columns: 1fr 1fr;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div.checkbox{ position: absolute; right: 0px; top: 0px;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div.checkbox input[type="checkbox"]{ position: absolute; cursor: pointer; height: 0; width: 0; transform: translate(-20px, 1px);}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div.checkbox input[type="checkbox"]::before{ content: ''; position: absolute; left: 0%; top: 3px; display: inline-block; border: 1px solid #a7a7a7; background-color: #f8f8f8; width: 14px; height: 14px; border-radius: 3px;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div.checkbox input[type="checkbox"]:checked::before{ content: '\f00c'; font-size: 11px; padding: 1px 0.5px 0 0; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: var(--main-color); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 3px; border: 1px solid var(--main-color); width: 14px; height: 14px;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div.checkbox label{ font-size: 12px;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div > div{ height: 125px; border-radius: 3px;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .new-address{ font-family: 'Open Sans', sans-serif; height: 125px; border-radius: 3px; border: 1px solid #ddd; gap: 5px; transition: all .2s ease; background-color: #f6f6f6; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .new-address:hover{ cursor: pointer; background-color: white; border: 1px solid var(--main-color); transform: translate(2px, -2px); box-shadow: -2px 2px 4px 1px #cccccc;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .new-address:active{ transform: translate(0, 0); box-shadow: none;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .new-address .icon{ font-size: 45px; line-height: 27px; color: var(--main-color);}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .new-address .txt{ font-size: 13px; font-weight: 600;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address{ cursor: pointer; display: flex; gap: 2px; flex-direction: column; outline: 1px solid #ddd; padding: 18px 18px 12px;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .user{ margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .user > span{ font-size: 12px;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .user > .name{ font-weight: 500; color: black;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .user > .name i{ color: var(--main-color);}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .user > .phone{ }
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .user > .phone i{ }
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address > span{ width: 100%; height: 16px; font-size: 12px; font-weight: 500; color: #555; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address > span{ }
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address > .header{ font-weight: 600; color: black;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .control{ margin-top: 5px; display: flex; align-items: center; justify-content: space-between;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .control .edit{ opacity: 0; pointer-events: none; font-weight: 600; cursor: pointer; position: relative; background-color: transparent; border: none; font-family: 'Open Sans', sans-serif; font-size: 11px; color: var(--main-color);}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .control .edit::before{ transition: all .2s ease; content: ''; display: inline-block; width: 0; height: 1.1px; background-color: var(--main-color); position: absolute; left: 0; bottom: -1px;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .control .edit:hover::before{ width: 100%;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .control .edit i{ transform: translateY(-1px);}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address.invoice .control .edit, .my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address.selected .control .edit{ opacity: 1; pointer-events: all;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .control .radio{ color: #444; font-size: 11px; display: flex; opacity: 0; pointer-events: none; align-items: center; gap: 3px;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div> div.diffrent-invoice  .address .control .radio{ opacity: 1; pointer-events: all;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .control .radio input{ transform: translateY(2px);}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .control input[type='radio']:after { width: 7px; height: 7px; border-radius: 50%; top: -2.7px; left: 2.7px; position: relative; box-shadow: 0 0 0 2px white, 0 0 0 3px #ababab; background-color: #bdbdbd; content: ''; display: inline-block; visibility: visible;}
.my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .address .control input[type='radio']:checked:after { width: 7px; height: 7px; border-radius: 50%; top: -2.7px; left: 2.7px; position: relative; box-shadow: 0 0 0 2px white, 0 0 0 3px var(--main-color); background-color: var(--main-color); content: ''; display: inline-block; visibility: visible;}

div .payment-steps .steps-container > div.address-container > div > div .address.selected{ position: relative; overflow: hidden; outline: 2px solid #12b91d; background-color: #e0ffe2;}
div .payment-steps .steps-container > div.address-container > div > div .address .success{ top: -25px; right: -5px; display: none; width: 30px; height: 60px; background-color: #32d53d; position: absolute; transform: rotate(-45deg);}
div .payment-steps .steps-container > div.address-container > div > div .address.selected .success{ display: inline-block;}
div .payment-steps .steps-container > div.address-container > div > div .address .success > span{ margin: 22px 0px 0px 5px; display: inline-block; transform: rotate(35deg); color: white; font-size: 15px;}
div .payment-steps .steps-container > div.address-container > div > div .address.selected .user .name i{ color: green;}
div .payment-steps .steps-container > div.address-container > div > div .address.selected .control .edit{ color: green;}
div .payment-steps .steps-container > div.address-container > div > div .address.selected .control .edit::before{ background-color: green;}
div .payment-steps .steps-container > div.address-container > div > div .address.selected .control input[type='radio']:checked:after { box-shadow: 0 0 0 2px white, 0 0 0 3px #00c900; background-color: #00c900;}

div .payment-steps .steps-container > div.address-container > div > div .address.invoice{ position: relative; overflow: hidden; outline: 2px solid var(--main-color); background-color: #ffedf0;}
div .payment-steps .steps-container > div.address-container > div > div .address .invoice{ top: -25px; right: -5px; display: none; width: 30px; height: 60px; background-color: #ec516a; position: absolute; transform: rotate(-45deg);}
div .payment-steps .steps-container > div.address-container > div > div .address.invoice .invoice{display: inline-block;}
div .payment-steps .steps-container > div.address-container > div > div .address .invoice > span{ margin: 24px 0px 0px 7px; display: inline-block; transform: rotate(45deg); color: white; font-size: 13px;}


.my-basket-section > div .payment-steps .steps-container > div.payment-container{ padding: 0; box-shadow: none; border: none;}
.my-basket-section > div .payment-steps.payment .steps-container > div.payment-container{ display: block;}
.my-basket-section > div .payment-steps.payment.animate .steps-container > div.payment-container{ opacity: 1; transform: translateY(0);}
.my-basket-section > div .payment-steps .steps-container > div.payment-container{}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container{ border: 1px solid #e0e0e0; box-shadow: 0 0 2px 1px #e0e0e0; border-radius: 3px; background-color: #fafafa; margin-bottom: 20px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations{ width: 100%; max-width: 500px; margin: 20px auto; border: 1px solid #e0e0e0; background-color: white; border-radius: 3px; padding: 20px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations > h4{ font-size: 16px; font-weight: 600; margin-bottom: 10px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations label{ display: inline-block; font-size: 12px; font-weight: 500; color: #444; margin-bottom: 6px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations input, .my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations select{ transition: all .2s ease; background-color: #f8f8f8; border: 1px solid #ccc; height: 33px; border-radius: 3px; padding: 0 8px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations input::placeholder{ opacity: .4;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations input:focus, .my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations select:focus{ background-color: white; outline: none; box-shadow: 0 0 0 3px #e6193b30;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations input::-webkit-outer-spin-button, .my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations input[type=number] { -moz-appearance: textfield;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations .number{ display: flex; flex-direction: column; margin-bottom: 10px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations .number input{}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations .other{ display: flex; align-items: center; justify-content: space-between;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations .other .date > div{ display: flex; gap: 10px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations .other .date > div select{ width: 80px; padding: 0 5px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations .other .cvv{ display: flex; flex-direction: column;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations .other .cvv input{ width: 100px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .contracts{ padding: 15px; border: 1px solid #ddd; box-shadow: 0 0 3px 1px #ddd; border-radius: 3px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .contracts h4{ font-size: 16px; font-weight: 600; margin-bottom: 15px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .contracts > div{ margin-bottom: 10px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .contracts > div > b{ font-size: 13px; font-weight: 600; margin-bottom: 5px; display: inline-block;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .contracts > div > div{ border-radius: 10px; background-color: #f7f7f7; padding: 30px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .contracts > div > div > div{ max-height: 200px; font-size: 12px; color: #999; overflow-y: auto; padding-right: 15px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .contracts > div > div > div ul{ margin-left: 15px;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .contracts > div > div > div::-webkit-scrollbar{ width: 6px; border-radius: 10px; background-color: #e6e6e6;}
.my-basket-section > div .payment-steps .steps-container > div.payment-container .contracts > div > div > div::-webkit-scrollbar-thumb{ width: 6px; border-radius: 10px; background-color: #c9c9c9;}









/* BASKET SUMMARY */
.basket-summary{ padding-top: 20px; padding-bottom: 20px;}
.basket-summary > div{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px;}
.basket-summary > div .success-area{ display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; width: 100%; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 0 3px 1px #e0e0e0; padding: 40px 0;}
.basket-summary > div .success-area .icon{ font-size: 40px; color: green; display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 90px; height: 90px; background-color: #dffedf;}
.basket-summary > div .success-area h3{ font-size: 22px; font-weight: 600; color: green;}
.basket-summary > div .success-area .buttons{ display: flex; align-items: center; gap: 20px; justify-content: flex-end; margin: 20px 0 20px;}
.basket-summary > div .success-area .buttons a{ border-radius: 4px; transition: all .2s ease; width: 280px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;}
.basket-summary > div .success-area .buttons a:first-child{ border: 1px solid #ccc; background-color: white; color: black; text-decoration: none;;}
.basket-summary > div .success-area .buttons a:first-child:hover{ cursor: pointer; border-color: var(--main-color); color: var(--main-color);}
.basket-summary > div .success-area .buttons a:last-child{ border: 1px solid var(--main-color); background-color: var(--main-color); color: white; text-decoration: none;}
.basket-summary > div .success-area .buttons a:last-child:hover{ background-color: white; cursor: pointer; color: var(--main-color); transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #a6a6a6;}
.basket-summary > div .success-area .buttons a:last-child:active{ transform: translate(0,0); box-shadow: none;}
.basket-summary > div .stores{ margin-top: 20px; display: flex; flex-direction: column; gap: 20px;}
.basket-summary > div .stores .store{ border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
.basket-summary > div .stores .store .header{ border-bottom: 1px solid #ddd; background-color: #f7f7f7; padding: 15px; display: flex; align-items: center; justify-content: space-between;}
.basket-summary > div .stores .store .header .date{ font-size: 12px;}
.basket-summary > div .stores .store .header .date span{ color: var(--main-color); font-weight: 700;}
.basket-summary > div .stores .store .header .seller{ display: flex; align-items: baseline; gap: 3px; font-size: 12px;}
.basket-summary > div .stores .store .header .seller b{ font-weight: 600; color: black;}
.basket-summary > div .stores .store .header .seller a{ color: #154c9f; font-weight: 500; text-decoration: none;}
.basket-summary > div .stores .store .header .seller a:hover{ text-decoration: underline;}
.basket-summary > div .stores .store .header .seller button{ transition: all .15s ease; font-size: 11px; padding: 3px 7px; background-color: white; color: black; border: 1px solid #c7c7c7; border-radius: 3px; margin-left: 10px;}
.basket-summary > div .stores .store .header .seller button:hover{ cursor: pointer; border-color: var(--main-color); color: var(--main-color);}
.basket-summary > div .stores .store .body{}
.basket-summary > div .stores .store .body .product{ border-bottom: 1px solid #ddd; display: grid; grid-template-columns: 80px auto 120px 120px 120px;}
.basket-summary > div .stores .store .body .product:last-child{ border-bottom: none;}
.basket-summary > div .stores .store .body .product > div{ padding: 8px 5px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.basket-summary > div .stores .store .body .product > div small{ font-size: 12px; margin-bottom: 2px; font-weight: 600; color: #777;}
.basket-summary > div .stores .store .body .product > div span{ font-size: 13px; color: black;}
.basket-summary > div .stores .store .body .product .product-img .img{ border: 1px solid #f1f1f1; box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.05); border-radius: 10px; width: 55px; height: 70px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.basket-summary > div .stores .store .body .product .product-img .img img{ width: 100%;}
.basket-summary > div .stores .store .body .product .product-name{ align-items: baseline;}
.basket-summary > div .stores .store .body .product .product-name p{ font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 52px;}
.basket-summary > div .stores .store .body .product .price span{ font-size: 15px; font-weight: 600; color: var(--main-color);}
.basket-summary > div .other-infos{ margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.basket-summary > div .other-infos > div{ border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
.basket-summary > div .other-infos > div .header{ border-bottom: 1px solid #ddd; background-color: #f7f7f7; padding: 15px; display: flex; align-items: center; justify-content: space-between; height: 47px;}
.basket-summary > div .other-infos > div .header b{ color: var(--main-color); font-size: 12px; font-weight: 700;}
.basket-summary > div .other-infos > div .header button{ color: #888; position: relative; background-color: transparent; border: none; font-size: 13px; cursor: pointer;}
.basket-summary > div .other-infos > div .header button::before{ content: ''; display: inline-block; transition: all .2s ease; position: absolute; left: 0; bottom: -1px; height: .5px; width: 0; background-color: #888;}
.basket-summary > div .other-infos > div .header button:hover::before{ width: 100%;}
.basket-summary > div .other-infos > div .header > div{ display: flex; align-items: center; gap: 5px; font-size: 12px; color: black; font-weight: 600;}
.basket-summary > div .other-infos > div .header > div img{ height: 18px;}
.basket-summary > div .other-infos > div .body{ padding: 15px;}
.basket-summary > div .other-infos > div .body.address > span.name{ font-size: 13px; font-weight: 600; color: #222; display: inline-block; margin-bottom: 7px;}
.basket-summary > div .other-infos > div .body.address > span{ font-size: 12px; font-weight: 500; color: #333;}
.basket-summary > div .other-infos > div .body.address > span.address{ display: -webkit-box; -webkit-line-clamp: 2; line-height: 15px; -webkit-box-orient: vertical; overflow: hidden; height: 28px; margin-bottom: 2px;}
.basket-summary > div .other-infos > div .body.payment{}
.basket-summary > div .other-infos > div .body.payment > div{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;}
.basket-summary > div .other-infos > div .body.payment > div span{ font-size: 13px; color: #333; font-weight: 400;}
.basket-summary > div .other-infos > div .body.payment > .total{ border-top: 1px solid #ddd; padding-top: 5px;}
.basket-summary > div .other-infos > div .body.payment > .total b{ font-weight: 700; color: black; font-size: 14px;}
.basket-summary > div .other-infos > div .body.payment > .total span{ font-weight: 700; color: var(--main-color); font-size: 14px;}





/* ORDERS */
.my-account.account-blade{ min-height: 93%; background-color: #f5f5f5;}
.my-account.account-blade .top-menu{ width: 100%; height: auto; background: linear-gradient(to bottom, #240187 0%, #6d39fc 100%); padding: 10px 10px 0;}
.my-account.account-blade .top-menu .infos{ display: flex; align-items: center; justify-content: space-between; color: white;}
.my-account.account-blade .top-menu .infos .name{}
.my-account.account-blade .top-menu .infos .money{}
.my-account.account-blade .top-menu .menu{ position: relative; width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 40px; padding: 20px 30px; background-color: white; border-radius: 4px; box-shadow: 0 6px 9px 0 rgb(0 0 0 / 9%); transform: translateY(20px);}
 /*.my-account.account-blade .top-menu .menu::before{ content: ''; position: absolute; display: inline-block; width: 95%; height: 80%; border-radius: 4px; box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); left: 50%; top: 50%; transform: translate(-50%, -50%);} */
.my-account.account-blade .top-menu .menu a{ position: relative; display: flex; align-items: center; gap: 7px; justify-content: center; flex-direction: column; color: #555151; text-decoration: none; font-size: 18px; font-weight: 400;}
.my-account.account-blade .top-menu .menu a.active{ }
.my-account.account-blade .top-menu .menu a i{}
.my-account.account-blade .top-menu .menu a span{ font-size: 13px; font-weight: 500; color: #27173e;}
.my-account.account-blade .top-menu .menu a.active span{ color: var(--main-color);}
.my-account.account-blade .top-menu .menu a.active::before{ content: ''; display: inline-block; width: 100%; height: 1px; position: absolute; left: 0; bottom: -1px; background-color: var(--main-color);}
.my-account.account-blade .account-menu{ margin-top: 30px; padding: 10px;}
.my-account.account-blade .account-menu ul{ list-style: none; background-color: white; box-shadow: 0 0 20px 1px #ccc;}
.my-account.account-blade .account-menu ul li{ }
.my-account.account-blade .account-menu ul li a{ position: relative; display: flex; align-items: center; border: 1px solid #e6e6e6; color: #555151; text-decoration: none; justify-content: start; gap: 10px; padding: 15px; font-size: 13px;}
.my-account.account-blade .account-menu ul li a::after{ content: '\f105'; font-weight: 900; font-family: 'FONT AWESOME 5 FREE';  position: absolute; font-size: 16px; right: 15px; color: rgb(120, 99, 176)}
.my-account.account-blade .account-menu ul li a i{ font-size: 13.5px;}
.my-account.account-blade .support-line{ border: 1px solid #e6e6e6; width: calc(100% - 20px); background-color: white; margin: 15px auto 0; display: flex; align-items: center; justify-content: center; flex-direction: column; box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1); padding: 25px;}
.my-account.account-blade .support-line .icon{ display: flex; align-items: center; justify-content: center; flex-direction: column; text-decoration: none}
.my-account.account-blade .support-line .icon i{ color: var(--main-color); font-size: 14px;}
.my-account.account-blade .support-line .icon span{ font-size: 13px; color: var(--main-color);}
.my-account.account-blade .support-line > p{ margin: 5px 0; font-size: 13px; text-align: center; color: #999;}
.my-account.account-blade .support-line > p span{ color: black;}
.my-account.account-blade .support-line > a.number{ color: black; font-size: 13px; text-decoration: none; font-weight: 600;}


.my-account-container{ margin-top: 20px; padding-bottom: 20px;}
.my-account-container > div{ width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 0 10px;}
.my-account-container > div > div{ }
.my-account-container > div > div.left{ }
.my-account-container > div > div.left h1{ font-size: 24px; font-weight: 700; margin-bottom: 10px; padding-left: 10px;}
.my-account-container > div > div.left ul{ list-style: none;}
.my-account-container > div > div.left ul li{ width: 100%;}
.my-account-container > div > div.left ul li a{ transition: all .2s ease; width: 100%; padding: 10px 10px 11px; border-radius: 7px; display: flex; align-items: center; gap: 7px; color: #000000; font-weight: 500; text-decoration: none; font-size: 13px;}
.my-account-container > div > div.left ul li a:hover{ background-color: #f4f4f4; cursor: pointer;}
.my-account-container > div > div.left ul li a:hover i{ color: var(--main-color);}
.my-account-container > div > div.left ul li a.active{ pointer-events: none; background-color: #ffdce2;}
.my-account-container > div > div.left ul li a.active i{ color: var(--main-color);}
.my-account-container > div > div.left ul li a i{ color: #666;}
.my-account-container > div > div.right{ }
.my-account-container > div > div.right .order-nav{ padding: 15px; border: 1px solid #cbcbcb; /*ox-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05);*/ border-radius: 3px; display: flex; align-items: center; display: grid; grid-template-columns: 1fr 1fr 1fr; justify-content: space-between;}
.my-account-container > div > div.right .order-nav h2{ font-size: 19px; font-weight: 500;}
.my-account-container > div > div.right .order-nav .search-area{ display: flex; justify-content: center; align-items: center;}
.my-account-container > div > div.right .order-nav .search-area > div{ position: relative; width: 250px; height: 31px;}
.my-account-container > div > div.right .order-nav .search-area > div input{ transition: all .2s ease; background-color: transparent; font-size: 12px; padding: 0 24px 0 5px; width: 100%; height: 100%; border: 1px solid #d6d6d6; border-radius: 3px; background-color: #f9f9f9;}
.my-account-container > div > div.right .order-nav .search-area > div input:focus{ outline: none; background-color: white; border-color: var(--main-color); box-shadow: -2px 2px 3px 0px #dfdfdf;}
.my-account-container > div > div.right .order-nav .search-area > div button{ color: var(--main-color); cursor: pointer; position: absolute; right: 0; line-height: 10px; background-color: transparent; width: 24px; text-align: start; padding-left: 3px; height: 30px; border: none;}
.my-account-container > div > div.right .order-nav .filter-area{ display: flex; align-items: center; justify-content: end;}
.my-account-container > div > div.right .order-nav .filter-area select{ width: 170px; height: 31px; border-radius: 3px; background-color: #f9f9f9; border: 1px solid #d6d6d6;}
.my-account-container > div > div.right .order-nav .filter-area select:focus{ outline: none; background-color: white; border-color: #bebebe;}
.my-account-container > div > div.right > .buttons{ width: 100%; padding: 15px 0; display: flex; justify-content: start; gap: 10px;}
.my-account-container > div > div.right > .buttons button{ font-weight: 600; background-color: white; border: 2px solid transparent; box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; padding: 10px 15px; font-size: 13px; color: black; transition: border .2s ease, box-shadow .2s ease, transform .2s ease;}
.my-account-container > div > div.right > .buttons button:hover{ cursor: pointer; border-color: var(--main-color); color: var(--main-color); box-shadow: -2px 2px 5px 1px #cecece; transform: translate(1px, -1px);}
.my-account-container > div > div.right > .buttons button:active{  box-shadow: none; transform: translate(0, 0);}
.my-account-container > div > div.right > .buttons button.active{ pointer-events: none; background-color: white; color: var(--main-color); box-shadow: none; border: 2px solid var(--main-color); padding: 10px 15px;}
.my-account-container > div > div.right .content{ }
.my-account-container > div > div.right .content > div{}
.my-account-container > div > div.right .content > div .content-section{ display: none;}
.my-account-container > div > div.right .content > div .content-section.active{ display: block;}
.my-account-container > div > div.right .content > div .content-section .order{ margin-bottom: 25px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
.my-account-container > div > div.right .content > div .content-section .order .header{ background-color: #f7f7f7; border-bottom: 1px solid #ddd; display: grid; grid-template-columns: repeat(4, 1fr) 160px; padding: 15px;}
.my-account-container > div > div.right .content > div .content-section .order .header > div{ display: flex; flex-direction: column;}
.my-account-container > div > div.right .content > div .content-section .order .header > div b{ font-size: 12px; color: #444;}
.my-account-container > div > div.right .content > div .content-section .order .header > div span{ font-size: 12px;}
.my-account-container > div > div.right .content > div .content-section .order .header > div a{ font-size: 13px; font-weight: 600; width: 150px; height: 36px; color: white; background-color: var(--main-color); display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 3px;}
.my-account-container > div > div.right .content > div .content-section .order .header > div.button{ align-items: flex-end; justify-content: center;}
.my-account-container > div > div.right .content > div .content-section .order .body{ padding: 20px; display: flex; flex-direction: column; gap: 15px;}
.my-account-container > div > div.right .content > div .content-section .order .body > div{ width: 100%; display: grid; grid-template-columns: 400px auto 120px; padding: 15px; border: 1px solid #ddd; border-radius: 3px;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt{ height: 100%; display: flex; justify-content: center; flex-direction: column;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span{ font-size: 14.5px; display: flex; align-items: center; gap: 8px;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span::before{ content: ''; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span::after{ content: ''; font-weight: 400;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.delivered{ color: #31a331;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.delivered::before{ content: '\f00c';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.delivered::after{ content: 'Teslim Edildi';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.returned{ color: #e53939;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.returned::before{ content: '\f3e5';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.returned::after{ content: 'İade Edildi';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.returned-request{ color: #6d0000;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.returned-request::before{ content: '\e4c7';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.returned-request::after{ content: 'İade Kodu Alındı';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.cancelled{ color: #525252;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.cancelled::before{ content: '\f00d';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.cancelled::after{ content: 'İptal Edildi';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.continued{ color: #1969c5;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.continued::before{ content: '\f017';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.continued::after{ content: 'Devam Ediyor';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.order-taken{ color: #30b400;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.order-taken::before{ content: '\f164';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt span.order-taken::after{ content: 'Siparişiniz Alındı';}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt p{ font-size: 12px; font-weight: 500; margin-top: 5px; display: flex; align-items: center;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt p span{ border-left: 1px solid #ddd; margin-left: 8px; font-size: 11px; font-weight: 500;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .txt p span img{ height: 10px;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .products{ display: flex; gap: 10px; overflow-x: auto; margin-right: 20px; padding-bottom: 5px;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .products::-webkit-scrollbar{ height: 7px; background-color: #ddd; border-radius: 5px;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .products::-webkit-scrollbar-thumb{ background-color: #b4b4b4; border-radius: 5px;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .products a{ overflow: hidden; display: flex; align-items: center; justify-content: center; width: 45px; min-width: 45px; height: 60px; background-color: white; border-radius: 3px; border: 1px solid #ddd;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .products a img{ width: 100%;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .returned{ display: flex; align-items: center;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .returned a{ transition: all .15s ease; width: 150px; height: 32px; background-color: white; border-radius: 3px; border: 1px solid var(--main-color); font-weight: 500; font-size: 13px; color: var(--main-color); text-decoration: none; display: flex; align-items: center; justify-content: center;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .returned a:hover{ cursor: pointer; background-color: var(--main-color); color: white; transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #adadad;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .returned a:active{ transform: translate(0,0); box-shadow: none;}
.my-account-container > div > div.right > .info{ width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.my-account-container > div > div.right > .info a{ transition: color .15s ease; font-size: 12px; color: #999; text-decoration: none;}
.my-account-container > div > div.right > .info a:hover{ cursor: pointer; color: var(--main-color);}
.my-account-container > div > div.right > .info a i{ margin-right: 5px; font-size: 10px;}
.my-account-container > div > div.right .detail-info{ padding: 15px; border: 1px solid #e0e0e0; border-radius: 3px; display: grid; grid-template-columns: 200px 1fr 200px;}
.my-account-container > div > div.right .detail-info div h2{ font-size: 18px; font-weight: 600;}
.my-account-container > div > div.right .detail-info .texts{ display: flex; align-items: baseline; justify-content: center; gap: 50px;}
.my-account-container > div > div.right .detail-info .texts div{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
.my-account-container > div > div.right .detail-info .texts div b{ font-size: 11px;}
.my-account-container > div > div.right .detail-info .texts div span{ font-size: 11px;}
.my-account-container > div > div.right .detail-info .order-status{ display: flex; gap: 4px; justify-content: end; align-items: center;}
.my-account-container > div > div.right .detail-info .order-status span{ font-size: 13px; font-weight: 600;}
.my-account-container > div > div.right .detail-info .order-status span.green{ color: green;}
.my-account-container > div > div.right .detail-info .order-status span.red{ color: red;}
.my-account-container > div > div.right .detail-info .order-status span.gray{ color: #454545;}


.my-account-container > div > div.right .content > div .content-section .empty{ display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 13px; padding: 120px 0; background-color: white; border: 1px solid #cbcbcb; border-radius: 7px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05);}
.my-account-container > div > div.right .content > div .content-section .empty .icon{ color: #632df3; 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: 4px solid #7e0519;}
.my-account-container > div > div.right .content > div .content-section .empty .icon::before{ content: ''; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(145deg); width: 90px; height: 5px; background-color: #7e0519; outline: 3px solid white;}
.my-account-container > div > div.right .content > div .content-section .empty span{ font-size: 14px; font-weight: 500; color: #333;}
.my-account-container > div > div.right .content > div .content-section .empty a{ transition: all .2s ease; text-decoration: none; font-weight: 600; font-size: 13px; padding: 7px 20px; border-radius: 20px; background-color: #632df3; color: white; border: 2px solid #632df3; box-shadow: 0 0 3px 1px #999;}
.my-account-container > div > div.right .content > div .content-section .empty a:active{ box-shadow: none !important; transform: scale(1) !important;}
.my-account-container > div > div.right .content > div .content-section .empty a:hover{ cursor: pointer; background-color: white; color: #632df3; box-shadow: 0 5px 10px 3px #c0c0c0; transform: scaleX(1.05);}



/* ORDER DETAIL */
.my-account-container > div > div.right .orders{ margin-top: 15px; display: flex; flex-direction: column; gap: 15px;}
.my-account-container > div > div.right .orders .order{ border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
.my-account-container > div > div.right .orders .order .header{ background-color: #f9f9f9; border-bottom: 1px solid #ddd; padding: 15px; display: flex; justify-content: space-between; align-items: center;}
.my-account-container > div > div.right .orders .order .header .head{ display: flex; gap: 15px; align-items: center;}
.my-account-container > div > div.right .orders .order .header .head .logo{ width: 45px; height: 45px; border-radius: 50%; overflow: hidden; border: 1px solid #ddd; background-color: white; padding: 9.7px 0 0 11.5px; font-size: 17px; color: var(--main-color);}
.my-account-container > div > div.right .orders .order .header .head > div:not(.logo){ display: flex; flex-direction: column; font-size: 11.7px;}
.my-account-container > div > div.right .orders .order .header .head > div:not(.logo) span{ margin-top: 2px;}
.my-account-container > div > div.right .orders .order .header .head .delivery-no{ font-weight: 500; border-right: 1px solid #b9b8b8; padding-right: 15px;}
.my-account-container > div > div.right .orders .order .header .head .cargo{ font-weight: 500; color: #666;}
.my-account-container > div > div.right .orders .order .header .invoice{}
.my-account-container > div > div.right .orders .order .header .invoice button{ transition: all .15s ease; background-color: transparent; border: 1px solid #ddd; font-size: 13px; padding: 7px 13px; border-radius: 3px;}
.my-account-container > div > div.right .orders .order .header .invoice button:hover{ background-color: white; transform: translate(1px, -1px); cursor: pointer; box-shadow: -1px 1px 3px 1px #ddd;}
.my-account-container > div > div.right .orders .order .header .invoice button:active{ transform: translate(0,0); box-shadow: none;}
.my-account-container > div > div.right .orders .order .header .invoice button i{ color: var(--main-color); margin-right: 3px;}
.my-account-container > div > div.right .orders .order .body{ padding: 15px;}
.my-account-container > div > div.right .orders .order .body .seller-area{ display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 5px; background-color: #f9f9f9;}
.my-account-container > div > div.right .orders .order .body .seller-area .seller{ display: flex; gap: 5px;}
.my-account-container > div > div.right .orders .order .body .seller-area .seller b{ font-size: 13px;}
.my-account-container > div > div.right .orders .order .body .seller-area .seller a{ font-size: 13px; font-weight: 500; text-decoration: none; color: #0d49a3;}
.my-account-container > div > div.right .orders .order .body .seller-area .seller a:hover{ text-decoration: underline; cursor: pointer;}
.my-account-container > div > div.right .orders .order .body .seller-area .seller button{ transition: all .15s ease; font-size: 11px; padding: 3px 7px; background-color: white; color: black; border: 1px solid #c7c7c7; border-radius: 3px; margin-left: 5px;}
.my-account-container > div > div.right .orders .order .body .seller-area .seller button:hover{ cursor: pointer; border-color: var(--main-color); color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .seller-area .evaluation{ }
.my-account-container > div > div.right .orders .order .body .seller-area .evaluation button{ transition: all .15s; font-size: 12px; padding: 5px 12px 6px; background-color: var(--main-color); color: white; font-weight: 500; border: 1px solid var(--main-color); border-radius: 5px;}
.my-account-container > div > div.right .orders .order .body .seller-area .evaluation button:hover{ background-color: white; color: var(--main-color); cursor: pointer; box-shadow: -1px 1px 3px 1px #acacac; transform: translate(1px, -1px);}
.my-account-container > div > div.right .orders .order .body .seller-area .evaluation button:active{ transform: translate(0,0); box-shadow: none;}
.my-account-container > div > div.right .orders .order .body .status + .status{ border-top: 1px solid #ddd; margin-top: 20px; padding-top: 20px;}
.my-account-container > div > div.right .orders .order .body .status > span{ margin-top: 5px; font-size: 14.5px; display: flex; align-items: center; gap: 8px;}
.my-account-container > div > div.right .orders .order .body .status > span::before{ content: ''; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
.my-account-container > div > div.right .orders .order .body .status > span::after{ content: ''; font-weight: 400;}
.my-account-container > div > div.right .orders .order .body .status > span.delivered{ color: #31a331;}
.my-account-container > div > div.right .orders .order .body .status > span.delivered::before{ content: '\f00c';}
.my-account-container > div > div.right .orders .order .body .status > span.delivered::after{ content: 'Teslim Edildi';}
.my-account-container > div > div.right .orders .order .body .status > span.returned{ color: #e53939;}
.my-account-container > div > div.right .orders .order .body .status > span.returned::before{ content: '\f3e5';}
.my-account-container > div > div.right .orders .order .body .status > span.returned::after{ content: 'İade Edildi';}
.my-account-container > div > div.right .orders .order .body .status > span.returned-request{ color: #6d0000;}
.my-account-container > div > div.right .orders .order .body .status > span.returned-request::before{ content: '\e4c7';}
.my-account-container > div > div.right .orders .order .body .status > span.returned-request::after{ content: 'İade Kodu Alındı';}
.my-account-container > div > div.right .orders .order .body .status > span.cancelled{ color: #525252;}
.my-account-container > div > div.right .orders .order .body .status > span.cancelled::before{ content: '\f00d';}
.my-account-container > div > div.right .orders .order .body .status > span.cancelled::after{ content: 'İptal Edildi';}
.my-account-container > div > div.right .orders .order .body .status > span.continued{ color: #1969c5;}
.my-account-container > div > div.right .orders .order .body .status > span.continued::before{ content: '\f017';}
.my-account-container > div > div.right .orders .order .body .status > span.continued::after{ content: 'Devam Ediyor';}
.my-account-container > div > div.right .orders .order .body .status > span.order-taken{ color: #30b400;}
.my-account-container > div > div.right .orders .order .body .status > span.order-taken::before{ content: '\f164';}
.my-account-container > div > div.right .orders .order .body .status > span.order-taken::after{ content: 'Siparişiniz Alındı';}
.my-account-container > div > div.right .orders .order .body .status .product-location{}
.my-account-container > div > div.right .orders .order .body .status .product-location > div{ position: relative; width: 100%; max-width: 600px; margin: 15px auto; display: flex; align-items: baseline; justify-content: space-between;}
.my-account-container > div > div.right .orders .order .body .status .product-location > div::before{ content: ''; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); top: 7px; width: calc(100% - (30px * 2)); height: 2px; background-color: #c6c6c6;}
.my-account-container > div > div.right .orders .order .body .status .product-location > div::after{ content: ''; display: inline-block; position: absolute; left: 28px; top: 7px; width: 0px; height: 2px; background-color: var(--main-color); z-index: 2;}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._1::after{}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._2::after{ width: 30%;}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._3::after{ width: 60%;}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._4::after{ width: 90%;}
.my-account-container > div > div.right .orders .order .body .status .product-location > div > div{ position: relative; z-index: 3; display: flex; gap: 5px; align-items: center; width: 70px; justify-content: center; flex-direction: column;}
.my-account-container > div > div.right .orders .order .body .status .product-location > div > div .circle{ width: 16px; height: 16px; border-radius: 50%;  background-color: white; border: 1px solid #c6c6c6;}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._1 > div:nth-child(1) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._2 > div:nth-child(1) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._3 > div:nth-child(1) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._4 > div:nth-child(1) .circle{ background-color: var(--main-color); border-color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._1 > div:nth-child(1) span,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._2 > div:nth-child(1) span,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._3 > div:nth-child(1) span,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._4 > div:nth-child(1) span{color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._2 > div:nth-child(2) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._3 > div:nth-child(2) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._4 > div:nth-child(2) .circle{ background-color: var(--main-color); border-color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._2 > div:nth-child(2) span,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._3 > div:nth-child(2) span,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._4 > div:nth-child(2) span{color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._3 > div:nth-child(3) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._4 > div:nth-child(3) .circle{ background-color: var(--main-color); border-color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._3 > div:nth-child(3) span,
.my-account-container > div > div.right .orders .order .body .status .product-location > div._4 > div:nth-child(3) span{color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._4 > div:nth-child(4) .circle{ background-color: var(--main-color); border-color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .status .product-location > div._4 > div:nth-child(4) span{color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .status .product-location > div > div span{ font-size: 10px; font-weight: 700; text-align: center;}

.my-account-container > div > div.right .orders .order .body .status .product-location.green > div::after{ background-color: #009400;}
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._1 > div:nth-child(1) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._2 > div:nth-child(1) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._3 > div:nth-child(1) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._4 > div:nth-child(1) .circle{ background-color: #009400; border-color: #009400;}
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._1 > div:nth-child(1) span,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._2 > div:nth-child(1) span,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._3 > div:nth-child(1) span,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._4 > div:nth-child(1) span{color: #009400;}
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._2 > div:nth-child(2) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._3 > div:nth-child(2) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._4 > div:nth-child(2) .circle{ background-color: #009400; border-color: #009400;}
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._2 > div:nth-child(2) span,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._3 > div:nth-child(2) span,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._4 > div:nth-child(2) span{color: #009400;}
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._3 > div:nth-child(3) .circle,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._4 > div:nth-child(3) .circle{ background-color: #009400; border-color: #009400;}
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._3 > div:nth-child(3) span,
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._4 > div:nth-child(3) span{color: #009400;}
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._4 > div:nth-child(4) .circle{ background-color: #009400; border-color: #009400;}
.my-account-container > div > div.right .orders .order .body .status .product-location.green > div._4 > div:nth-child(4) span{color: #009400;}

.my-account-container > div > div.right .orders .order .body .status .infos{ display: flex; gap: 10px; align-items: center;}
.my-account-container > div > div.right .orders .order .body .status .infos > a{ font-size: 13px; text-decoration: none; color: #5a5a5a; border: 1px solid #b9b9b9; width: fit-content; display: flex; align-items: center; justify-content: center; padding: 5px 13px 6px; border-radius: 3px; margin-top: 13px;}
.my-account-container > div > div.right .orders .order .body .status .infos > span{font-size: 13px; text-decoration: none; color: #252525; background-color: #ffebee; border: 1px solid #ffebee; width: fit-content; display: flex; align-items: center; justify-content: center; padding: 5px 13px 6px; border-radius: 3px; overflow: hidden; margin-top: 13px;}
.my-account-container > div > div.right .orders .order .body .status > p{ margin-top: 10px; font-size: 13px; font-weight: 600;}
.my-account-container > div > div.right .orders .order .body .status > a{ transition: all .2s ease; font-size: 13px; text-decoration: none; color: #5a5a5a; border: 1px solid #b9b9b9; width: fit-content; display: flex; align-items: center; justify-content: center; padding: 5px 13px 6px; border-radius: 3px; margin-top: 13px;}
.my-account-container > div > div.right .orders .order .body .status > a:not(.bank):hover{ color: var(--main-color); border-color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .status > a.bank{ background-color: #f4f4f4; border-color: #f1f1f1;}
.my-account-container > div > div.right .orders .order .body .status .products{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px;}
.my-account-container > div > div.right .orders .order .body .status .products .product{ display: flex; gap: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 5px;}
.my-account-container > div > div.right .orders .order .body .status .products .product .img-area{ width: 85px; height: 110px; border: 1px solid #ddd; border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: white;}
.my-account-container > div > div.right .orders .order .body .status .products .product .img-area img{ width: 100%;}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area{ display: flex; flex-direction: column; justify-content: space-between; padding: 5px 0;}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > p{ font-size: 13px;}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > p .brand{ font-weight: 600;}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > p span{ font-weight: 500;}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > .summary{ font-size: 12px; color: #888; margin-top: 1px;}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > .summary span{}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > .prices{ margin-top: 1px;}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > .prices .current-price{ font-size: 15px; font-weight: 700; color: var(--main-color);}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > .prices .last-price{ font-size: 12px; font-weight: 500; color: #555; text-decoration: line-through;}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > button{ transition: all .2s ease; background-color: white; color: var(--main-color); border: 1px solid var(--main-color); border-radius: 5px; padding: 5px 10px; font-weight: 500; font-size: 13px;}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > button:hover{ cursor: pointer; background-color: var(--main-color); color: white; box-shadow: -1px 1px 3px 1px #acacac; transform: translate(1px, -1px);}
.my-account-container > div > div.right .orders .order .body .status .products .product .detail-area > div > button:active{ box-shadow: none; transform: translate(0,0);}

.my-account-container > div > div.right .other-infos{ margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.my-account-container > div > div.right .other-infos > div{ border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
.my-account-container > div > div.right .other-infos > div .header{ background-color: #f9f9f9; border-bottom: 1px solid #ddd; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center;}
.my-account-container > div > div.right .other-infos > div .header h4{ font-size: 13px;}
.my-account-container > div > div.right .other-infos > div .body{ padding: 15px; height: 156px;}
.my-account-container > div > div.right .other-infos .bill-infos{ }
.my-account-container > div > div.right .other-infos .bill-infos .body{ display: flex; flex-direction: column; justify-content: space-between;}
.my-account-container > div > div.right .other-infos .bill-infos .body b{ font-size: 13px; font-weight: 600; margin-bottom: 5px; color: black; display: inline-block;}
.my-account-container > div > div.right .other-infos .bill-infos .body p{ font-size: 13px; font-weight: 400; color: #333; margin-bottom: 5px;}
.my-account-container > div > div.right .other-infos .bill-infos .body a{ font-size: 13px; font-weight: 600; color: #666; text-decoration: none;}
.my-account-container > div > div.right .other-infos .bill-infos .body a:hover{ text-decoration: underline;}
.my-account-container > div > div.right .other-infos .pay-infos{ }
.my-account-container > div > div.right .other-infos .pay-infos .header{ }
.my-account-container > div > div.right .other-infos .pay-infos .header span{ font-size: 12px; display: flex; align-items: center;}
.my-account-container > div > div.right .other-infos .pay-infos .header span img{ height: 14px; margin-right: 3px;}
.my-account-container > div > div.right .other-infos .pay-infos .body{}
.my-account-container > div > div.right .other-infos .pay-infos .body > div{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d6d6d6; padding: 7px 0; font-size: 12px; font-weight: 400;}
.my-account-container > div > div.right .other-infos .pay-infos .body > div:last-child{ border-bottom: none;}
.my-account-container > div > div.right .other-infos .pay-infos .body > div span{ font-weight: 500;}
.my-account-container > div > div.right .other-infos .pay-infos .body > div span.red{ color: rgb(236, 90, 90);}
.my-account-container > div > div.right .other-infos .pay-infos .body > div span.price{ font-weight: 700; color: var(--main-color);}
.my-account-container > div > div.right .other-infos .pay-infos .body > div b{ font-size: 14px;}



/* Evaluations */
.my-account-container > div > div.right .evaluation-area{ border: 1px solid #ddd; border-top: none; border-radius: 5px;}
.my-account-container > div > div.right .evaluation-area .header{ padding: 15px 15px 0px; border-bottom: 1px solid #ddd; background-color: #fff; border-top: 1px solid #ddd; border-radius: 5px 5px 0 0; display: flex; gap: 13px;}
.my-account-container > div > div.right .evaluation-area .header button{ transition: all .15s ease; cursor: pointer; font-size: 14px; padding: 0 8px 7px; font-weight: 500; background-color: transparent; border: none; border-bottom: 2px solid transparent;}
.my-account-container > div > div.right .evaluation-area .header button:hover{ color: var(--main-color);}
.my-account-container > div > div.right .evaluation-area .header button.active{ color: var(--main-color); border-color:var(--main-color); pointer-events: none; transform: translateY(0px);}
.my-account-container > div > div.right .evaluation-area .body{ padding: 15px;}
.my-account-container > div > div.right .evaluation-area .body .products.free{ display: none; grid-template-columns: 1fr 1fr; gap: 15px;}
.my-account-container > div > div.right .evaluation-area .body .products.free .product{ display: flex; gap: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 5px;}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .img-area{ width: 100px; height: 130px; border: 1px solid #ddd; border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .img-area img{ width: 100%;}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .product-detail{ display: flex; flex-direction: column; justify-content: space-between;}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .product-detail .name{ font-size: 13px;}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .product-detail .name b{}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .product-detail .star{}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .product-detail .star span{ font-size: 13px;}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .product-detail .star small{ font-size: 10px; font-weight: 500; color: #555;}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .product-detail button{ transition: all .2s ease; background-color: white; color: var(--main-color); border: 1px solid var(--main-color); border-radius: 5px; padding: 7px 10px; font-weight: 600; font-size: 13px;}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .product-detail button:hover{ cursor: pointer; background-color: var(--main-color); color: white; box-shadow: -1px 1px 3px 1px #acacac; transform: translate(1px, -1px);}
.my-account-container > div > div.right .evaluation-area .body .products.free .product .product-detail button:active{ box-shadow: none; transform: translate(0,0);}
.my-account-container > div > div.right .evaluation-area .body .products.full{ display: none; grid-template-columns: 1fr 1fr; gap: 15px;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product{ display: flex; gap: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 5px;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .img-area{ width: 100px; min-width: 100px; height: 130px; border: 1px solid #ddd; border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .img-area img{ width: 100%;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail{ position: relative;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .name{ font-size: 11px; width: 100%; margin-top: 3px;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .name b{ color: #555;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .comment{ margin-top: 4px; height: 75px; overflow: hidden; font-size: 12px; font-weight: 600;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .star{}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .star span{ font-size: 13px; display: none;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .star small{ font-size: 10px; font-weight: 500; color: #555; display: none;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail button{ transition: all .2s ease; background-color: white; color: var(--main-color); border: 1px solid var(--main-color); border-radius: 5px; padding: 7px 10px; font-weight: 600; font-size: 13px;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail button:hover{ cursor: pointer; background-color: var(--main-color); color: white; box-shadow: -1px 1px 3px 1px #acacac; transform: translate(1px, -1px);}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail button:active{ box-shadow: none; transform: translate(0,0);}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .icon{ transition: all .15s; position: absolute; right: 0; top: 0; color: black;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .icon > span:hover{ cursor: pointer; color: var(--main-color);}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .icon > div{ opacity: 0; transform: translate(60px, -40px) scale(.3); pointer-events: none; transition: all .17s; position: absolute; right: 10px; width: 120px; background-color: white; border-radius: 5px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3), 0 0 8px 2px #ccc; display: flex; flex-direction: column; padding: 4px 10px;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .icon.active > div{ opacity: 1; transform: translate(0) scale(1); pointer-events: all;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .icon > div > span{ transition: all .1s ease; font-size: 13px; font-size: 13px; padding: 5px 0;}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .icon > div > span:hover{ cursor: pointer; color: var(--main-color);}
.my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .icon > div > span i{ margin-right: 8px;}
.my-account-container > div > div.right .evaluation-area .body.free .products.free{ display: grid;}
.my-account-container > div > div.right .evaluation-area .body.full .products.full{ display: grid;}


/* HELP */
.my-account-container > div > div.right .descriptions{}
.my-account-container > div > div.right .descriptions .description{ display: none;}
.my-account-container > div > div.right .descriptions .description.active{ display: block;}
.my-account-container > div > div.right .descriptions .description .header{ padding: 15px 20px; border-radius: 10px; margin-bottom: 20px; border: 1px solid #f1f1f1; box-shadow: 0 0 3px 1px #ddd; }
.my-account-container > div > div.right .descriptions .description .header h2{ font-size: 18px; font-weight: 600;}
.my-account-container > div > div.right .descriptions .description .body{ overflow: hidden; border-radius: 10px; border: 1px solid #f1f1f1; box-shadow: 0 0 3px 1px #ddd;}
.my-account-container > div > div.right .descriptions .description .body > div{ border-bottom: 1px solid #ddd; display: flex; flex-direction: column;}
.my-account-container > div > div.right .descriptions .description .body > div:last-child{ border-bottom: none;}
.my-account-container > div > div.right .descriptions .description .body > div > span{ transition: all .15s; display: inline-block; position: relative; padding: 15px 20px; font-size: 13px; font-weight: 600; cursor: pointer; overflow: hidden; width: 100%;}
.my-account-container > div > div.right .descriptions .description .body > div.active > span{ color: var(--main-color); border-bottom: 1px solid #ddd;}
.my-account-container > div > div.right .descriptions .description .body > div > span:hover{ background-color: #f5f5f5;}
.my-account-container > div > div.right .descriptions .description .body > div > span::after{ content: '\2b'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; display: inline-block; pointer-events: none; font-size: 15px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.my-account-container > div > div.right .descriptions .description .body > div.active > span::after{ content: '\f068'; }
/* .my-account-container > div > div.right .descriptions .description .body > div > span::before{ content: ''; display: inline-block; position: absolute; left: 20px; bottom: 23px; height: 10px; width: 100%; z-index: -1; background-color: rgba(230, 25, 59, 0.3);} */
.my-account-container > div > div.right .descriptions .description .body > div > div{ transition: all .3s ease; overflow: hidden; max-height: 0px; padding: 0 20px;}
.my-account-container > div > div.right .descriptions .description .body > div.active > div{ overflow: hidden; max-height: 100vh; padding: 20px;}
.my-account-container > div > div.right .descriptions .description .body > div > div *{ font-size: 13px; font-weight: 500;}
.my-account-container > div > div.right .descriptions .description .body > div > div ul, .my-account-container > div > div.right .descriptions .description .body > div.active > div ol{ margin-left: 20px;}
.my-account-container > div > div.right .descriptions .description .body > div > div li{ margin-bottom: 3px;}


/* USER INFORMATIONS */
.my-account-container > div > div.right .area-header{ padding: 15px 20px; border-radius: 10px; margin-bottom: 20px; border: 1px solid #f1f1f1; box-shadow: 0 0 2px 1px #eeeeee;}
.my-account-container > div > div.right .area-header h1{ font-size: 18px; font-weight: 600;}
.my-account-container > div > div.right .user-informations-area{ border-radius: 10px; margin-bottom: 20px; border: 1px solid #f1f1f1; box-shadow: 0 0 3px 1px #dddddd; display: grid; grid-template-columns: 1fr 1fr;}
.my-account-container > div > div.right .user-informations-area > form{ padding: 20px 15px;}
.my-account-container > div > div.right .user-informations-area > form:first-child{ border-right: 1px solid #ddd;}
.my-account-container > div > div.right .user-informations-area > form h2{ color: var(--main-color); font-size: 15px; font-weight: 700; margin-bottom: 10px;}
.my-account-container > div > div.right .user-informations-area > form > div > div._2{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.my-account-container > div > div.right .user-informations-area > form > div > div{ margin-bottom: 20px;}
.my-account-container > div > div.right .user-informations-area > form > div input:not([type='checkbox']){ transition: all .2s ease; width: 100%; height: 40px; border: 1px solid #d1d1d1; background-color: #fbfbfb; border-radius: 3px; padding: 0 8px;}
.my-account-container > div > div.right .user-informations-area > form > div select{ transition: all .2s ease; width: 100%; height: 40px; border: 1px solid #d1d1d1; background-color: #fbfbfb; border-radius: 3px; padding: 0 5pxpx;}
.my-account-container > div > div.right .user-informations-area > form > div input:not([type='checkbox']):focus{ outline: none; background-color: white; box-shadow: 0 0 0 3px #e6193b30;}
.my-account-container > div > div.right .user-informations-area > form > div select:focus{ outline: none; background-color: white; box-shadow: 0 0 0 3px #e6193b30;}
.my-account-container > div > div.right .user-informations-area > form > div label:not(.chckbx-label){ display: inline-block; font-size: 13px; font-weight: 600; margin-bottom: 7px;}
.my-account-container > div > div.right .user-informations-area > form > div input[type="checkbox"]{ position: absolute; cursor: pointer; height: 0; width: 0;}
.my-account-container > div > div.right .user-informations-area > form > div input[type="checkbox"]::before{ content: ''; position: absolute; left: 0%; top: 3px; display: inline-block; border: 1px solid #a7a7a7; background-color: #f8f8f8; width: 16px; height: 16px; border-radius: 3px;}
.my-account-container > div > div.right .user-informations-area > form > div input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: var(--main-color); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 5pxpx; border: 1px solid var(--main-color); width: 16px; height: 16px;}
.my-account-container > div > div.right .user-informations-area > form > div .phone-area > div{ display: flex; gap: 15px; align-items: center;}
.my-account-container > div > div.right .user-informations-area > form > div .phone-area > div select{pointer-events: none; width: 90px; /*-webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: '';*/}
.my-account-container > div > div.right .user-informations-area > form > div .phone-area > div button{ transition: all .15s ease; height: 40px; background-color: var(--main-color); border: 1px solid var(--main-color); font-weight: 600; font-size: 13px; color: white; padding: 3px 13px; border-radius: 3px;}
.my-account-container > div > div.right .user-informations-area > form > div .phone-area > div button.disabled{ pointer-events: none; opacity: .4;}
.my-account-container > div > div.right .user-informations-area > form > div .birth-of-day > div{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;}
.my-account-container > div > div.right .user-informations-area > form > div .genders > div{ display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 35px; outline: 1px solid #cecece; border-radius: 3px;}
.my-account-container > div > div.right .user-informations-area > form > div .genders > div input{ width: 0px; height: 0px; opacity: 0; position: absolute;}
.my-account-container > div > div.right .user-informations-area > form > div .genders > div input#gender-man:checked + label{ background-color: white; color: #e11441; outline: 2px solid #e11441; border-radius: 3px; position: relative; z-index: 2;}
.my-account-container > div > div.right .user-informations-area > form > div .genders > div input#gender-woman:checked + label{ background-color: white; color: #e11441; outline: 2px solid #e11441; border-radius: 3px; position: relative; z-index: 2;}
.my-account-container > div > div.right .user-informations-area > form > div .genders > div label{ transition: all 0s ease; cursor: pointer; display: inline-block; font-size: 13px; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #f9f9f9;}
.my-account-container > div > div.right .user-informations-area > form > div .genders > div div:last-child label{ border-left: 1px solid #cecece;}
.my-account-container > div > div.right .user-informations-area > form > div .corporate{}
.my-account-container > div > div.right .user-informations-area > form > div .corporate > div{ display: flex;}
.my-account-container > div > div.right .user-informations-area > form > div .corporate > div label{ display: inline-block; font-size: 12px; font-weight: 500; color: #333333; padding-left: 25px;}
.my-account-container > div > div.right .user-informations-area > form > div > button{ transition: all .2s ease; background-color: #fff; color: var(--main-color); font-weight: 600; border-radius: 3px; border: 1px solid var(--main-color); width: 100%; font-size: 15px; padding: 10px 0; }
.my-account-container > div > div.right .user-informations-area > form > div > button.disabled{ pointer-events: none; background-color: #ededed; border: 1px solid #ccc; color: #a9a9a9;}
.my-account-container > div > div.right .user-informations-area > form > div > button:hover{ cursor: pointer; background-color: var(--main-color); color: #fff; transform: translate(2px, -2px); box-shadow: -2px 2px 3px 1px #6f6f6f;}
.my-account-container > div > div.right .user-informations-area > form > div > button:active{ transform: translate(0,0); box-shadow: none;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control{ width: 100%;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control:not(.new){ margin-bottom: 15px;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control small{ font-size: 11px; color: #333;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control > div{ display: none; align-items: center; justify-content: space-between; margin-top: 8px;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control.active > div{ display: flex;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control > div span{ display: none; width: 40px; font-size: 12px; font-weight: 700;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control.low > div span.low-txt{ display: inline-block; color: #7e0606;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control.mid > div span.mid-txt{ display: inline-block; color: #a66306;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control.high > div span.high-txt{ display: inline-block; color: #019301;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control > div .bar{ position: relative; width: 85%; height: 6px; background-color: #ececec; border-radius: 10px;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control > div .bar::before{ content: ''; transition: all .35s linear; position: absolute; left: 0; top: 0; width: 0; z-index: 2; height: 6px; border-radius: 10px;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control.low > div .bar::before{ width: 20%; background-color: #d90707;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control.mid > div .bar::before{ width: 50%; background-color: #c29c02;}
.my-account-container > div > div.right .user-informations-area > form > div .password-control.high > div .bar::before{ width: 100%; background-color: #1fc202;}

.my-account-container > div > div.right .cancel-req-area .success-area{ display: flex; padding: 0 15px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; width: 100%; border: 1px solid #ddd; border-radius: 10px; padding: 40px 0;}
.my-account-container > div > div.right .cancel-req-area .success-area .icon{ font-size: 40px; color: green; display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 90px; height: 90px; background-color: #dffedf;}
.my-account-container > div > div.right .cancel-req-area .success-area h3{ font-size: 22px; font-weight: 600; color: green;}
.my-account-container > div > div.right .cancel-req-area .success-area p{ max-width: 800px; text-align: center; font-weight: 400; font-size: 16px; color: #555;}
.my-account-container > div > div.right .cancel-req-area .last-check{ margin-top: 20px; border-radius: 10px; border: 1px solid #f1f1f1; box-shadow: 0 0 2px 1px #eeeeee;}
.my-account-container > div > div.right .cancel-req-area .last-check .header{ background-color: #f5f5f5; padding: 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ddd;}
.my-account-container > div > div.right .cancel-req-area .last-check .header > span{ font-size: 14px; font-weight: 600;}
.my-account-container > div > div.right .cancel-req-area .last-check .header > div{ display: flex; align-items: center; justify-content: center; flex-direction: column;}
.my-account-container > div > div.right .cancel-req-area .last-check .header > div > span{ font-size: 11px; font-weight: 600;}
.my-account-container > div > div.right .cancel-req-area .last-check .header > div > b{ font-size: 13px; font-weight: 700; color: var(--main-color);}
.my-account-container > div > div.right .cancel-req-area .last-check .body{ padding: 15px;}
.my-account-container > div > div.right .cancel-req-area .last-check .body .products{ display: grid; gap: 15px; grid-template-columns: 1fr 1fr 1fr;}
.my-account-container > div > div.right .cancel-req-area .last-check .body .products .product{ padding: 15px; display: flex; gap: 10px; border: 1px solid #ddd;}
.my-account-container > div > div.right .cancel-req-area .last-check .body .products .product .img-area{ width: 80px; min-width: 80px; height: 100px; border: 1px solid #ddd; border-radius: 3px; display: flex; align-items: center; justify-content: center;}
.my-account-container > div > div.right .cancel-req-area .last-check .body .products .product .img-area img{ width: 100%;}
.my-account-container > div > div.right .cancel-req-area .last-check .body .products .product .product-detail{ display: flex; flex-direction: column; justify-content: space-between;}
.my-account-container > div > div.right .cancel-req-area .last-check .body .products .product .product-detail > div{ display: flex; flex-direction: column;}
.my-account-container > div > div.right .cancel-req-area .last-check .body .products .product .product-detail > div .brand{ font-size: 12px; margin-bottom: 3px; font-weight: 700;}
.my-account-container > div > div.right .cancel-req-area .last-check .body .products .product .product-detail > div .name{ font-size: 11px; font-weight: 500; color: #444; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; height: 14px; margin-bottom: 3px;}
.my-account-container > div > div.right .cancel-req-area .last-check .body .products .product .product-detail > div .info{ font-size: 10px; font-weight: 500; color: #999; line-height: 1.1;}
.my-account-container > div > div.right .cancel-req-area .last-check .body .products .product .product-detail .price{ font-size: 14px; font-weight: 700; color: var(--main-color);}
.my-account-container > div > div.right .cancel-req-area .buttons{ display: flex; align-items: center; justify-content: flex-end; margin-top: 20px; gap: 15px;}
.my-account-container > div > div.right .cancel-req-area .buttons a:first-child{ transition: all .15s ease; padding: 7px 15px 8px; border-radius: 4px; border: 1px solid #ccc; background-color: white; color: black; text-decoration: none; font-size: 13px; font-weight: 500;}
.my-account-container > div > div.right .cancel-req-area .buttons a:first-child:hover{ cursor: pointer; border-color: var(--main-color); color: var(--main-color); transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #a6a6a6;}
.my-account-container > div > div.right .cancel-req-area .buttons a:last-child{ transition: all .15s ease; padding: 7px 15px 8px; border-radius: 4px; border: 1px solid var(--main-color); background-color: var(--main-color); color: white; text-decoration: none; font-size: 13px; font-weight: 500;}
.my-account-container > div > div.right .cancel-req-area .buttons a:last-child:hover{ cursor: pointer; transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #a6a6a6;}




/* RETURNED REQUEST  */
.my-account-container > div > div.right.first .first-step{ display: block;}
.my-account-container > div > div.right.first .second-step{ display: none;}
.my-account-container > div > div.right.first .thrid-step{ display: none;}

.my-account-container > div > div.right.second .first-step{ display: none;}
.my-account-container > div > div.right.second .second-step{ display: block;}
.my-account-container > div > div.right.second .thrid-step{ display: none;}

.my-account-container > div > div.right.thrid .first-step{ display: none;}
.my-account-container > div > div.right.thrid .second-step{ display: none;}
.my-account-container > div > div.right.thrid .thrid-step{ display: block;}


.my-account-container > div > div.right#returned-req-container .area-header{ display: flex; justify-content: space-between; align-items: center;}
.my-account-container > div > div.right#returned-req-container .area-header a{ color: black; font-weight: 600; font-size: 13px; color: black;}
.my-account-container > div > div.right .retrned-req-area{ border-radius: 10px; border: 1px solid #f1f1f1; box-shadow: 0 0 2px 1px #eeeeee;}
.my-account-container > div > div.right .retrned-req-area .header{ border-bottom: 1px solid #ddd; font-size: 13px; font-weight: 600; padding: 15px 15px;}
.my-account-container > div > div.right .retrned-req-area .products{ width: 100%;}
.my-account-container > div > div.right .retrned-req-area .products .product{ width: 100%; display: grid; grid-template-columns: 70px auto 300px; padding: 15px 15px 15px 0; border-bottom: 1px solid #ddd;}
.my-account-container > div > div.right .retrned-req-area .products .product:last-child{ border-bottom: none;}
.my-account-container > div > div.right .retrned-req-area .products .product .chckbx{ display: flex; align-items: center; justify-content: center;}
.my-account-container > div > div.right .retrned-req-area .products .product .chckbx input[type="checkbox"]{ position: absolute; cursor: pointer; height: 0; width: 0;}
.my-account-container > div > div.right .retrned-req-area .products .product .chckbx input[type="checkbox"]::before{ content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-block; border: 1px solid #a7a7a7; background-color: #f8f8f8; width: 16px; height: 16px; border-radius: 3px;}
.my-account-container > div > div.right .retrned-req-area .products .product .chckbx input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: var(--main-color); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0px; border: 1px solid var(--main-color); width: 16px; height: 16px;}
.my-account-container > div > div.right .retrned-req-area .products .product .product-detail{ display: flex; gap: 10px;}
.my-account-container > div > div.right .retrned-req-area .products .product .product-detail .img-area{ width: 80px; min-width: 80px; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #ddd; border-radius: 3px;}
.my-account-container > div > div.right .retrned-req-area .products .product .product-detail .img-area img{ width: 100%;}
.my-account-container > div > div.right .retrned-req-area .products .product .product-detail .detail{ display: flex; flex-direction: column; justify-content: space-between;}
.my-account-container > div > div.right .retrned-req-area .products .product .product-detail .detail > div{ display: flex; flex-direction: column;}
.my-account-container > div > div.right .retrned-req-area .products .product .product-detail .detail > div .brand{ font-size: 12px; font-weight: 700; color: black; margin-bottom: 5px;}
.my-account-container > div > div.right .retrned-req-area .products .product .product-detail .detail > div .name{ font-size: 12px; color: #444; font-weight: 500; margin-bottom: 3px;}
.my-account-container > div > div.right .retrned-req-area .products .product .product-detail .detail > div .info{ font-size: 11px; color: #878787; font-weight: 400;}
.my-account-container > div > div.right .retrned-req-area .products .product .product-detail .detail .price{ font-size: 15px; color: var(--main-color); font-weight: 700;}
.my-account-container > div > div.right .retrned-req-area .products .product .select-area{ display: flex; align-items: center; justify-content: center; gap: 7px;}
.my-account-container > div > div.right .retrned-req-area .products .product .select-area label{ white-space: nowrap; font-size: 12px; font-weight: 600;}
.my-account-container > div > div.right .retrned-req-area .products .product .select-area select{ width: 100%; padding: 5px; font-size: 12px; background-color: #f9f9f9; border-radius: 3px; border: 1px solid #dddddd;}
.my-account-container > div > div.right .retrned-req-area .products .product .select-area select:focus{ outline: none; background-color: white;}
.my-account-container > div > div.right .retrned-req-area .buttons{ border-top: 1px solid #ddd; background-color: #f9f9f9; padding: 15px; display: flex; align-items: center; justify-content: space-between;}
.my-account-container > div > div.right .retrned-req-area .buttons a{ transition: all .15s ease; padding: 7px 15px 8px; border-radius: 4px; border: 1px solid #ccc; background-color: white; color: black; text-decoration: none; font-size: 13px; font-weight: 500;}
.my-account-container > div > div.right .retrned-req-area .buttons a:hover{ cursor: pointer; border-color: var(--main-color); color: var(--main-color);}
.my-account-container > div > div.right .retrned-req-area .buttons button{ transition: all .15s ease; padding: 7px 15px 8px; border-radius: 4px; border: 1px solid var(--main-color); background-color: var(--main-color); color: white; text-decoration: none; font-size: 13px; font-weight: 500;}
.my-account-container > div > div.right .retrned-req-area .buttons button.disabled{ background-color: #e5e5e5; border-color: #bababa; color: #656565; pointer-events: none;}
.my-account-container > div > div.right .retrned-req-area .buttons button:hover{ background-color: white; cursor: pointer; color: var(--main-color); transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #a6a6a6;}
.my-account-container > div > div.right .retrned-req-area .buttons button:active{ transform: translate(0,0); box-shadow: none;}
.my-account-container > div > div.right .second-step .cargo-information{ margin-bottom: 20px; display: flex; gap: 20px; align-items: center; padding: 15px; border-radius: 10px; border: 1px solid #f1f1f1; box-shadow: 0 0 2px 1px #eeeeee;}
.my-account-container > div > div.right .second-step .cargo-information .img-area{ height: 67px; border-radius: 3px; padding: 5px; overflow: hidden; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;}
.my-account-container > div > div.right .second-step .cargo-information .img-area img{ width: 120px;}
.my-account-container > div > div.right .second-step .cargo-information p{ font-size: 13px;}
.my-account-container > div > div.right .second-step .last-check{ border-radius: 10px; border: 1px solid #f1f1f1; box-shadow: 0 0 2px 1px #eeeeee;}
.my-account-container > div > div.right .second-step .last-check .header{ padding: 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ddd;}
.my-account-container > div > div.right .second-step .last-check .header > span{ font-size: 14px; font-weight: 600;}
.my-account-container > div > div.right .second-step .last-check .header > div{ display: flex; align-items: center; justify-content: center; flex-direction: column;}
.my-account-container > div > div.right .second-step .last-check .header > div > span{ font-size: 11px; font-weight: 600; text-align: center;}
.my-account-container > div > div.right .second-step .last-check .header > div > b{ font-size: 13px; font-weight: 700; color: var(--main-color);}
.my-account-container > div > div.right .second-step .last-check .body{ padding: 15px;}
.my-account-container > div > div.right .second-step .last-check .body .products{ display: grid; gap: 15px; grid-template-columns: 1fr 1fr 1fr;}
.my-account-container > div > div.right .second-step .last-check .body .products .product{ padding: 15px; display: flex; gap: 10px; border: 1px solid #ddd;}
.my-account-container > div > div.right .second-step .last-check .body .products .product .img-area{ width: 80px; min-width: 80px; height: 100px; border: 1px solid #ddd; border-radius: 3px; display: flex; align-items: center; justify-content: center;}
.my-account-container > div > div.right .second-step .last-check .body .products .product .img-area img{ width: 100%;}
.my-account-container > div > div.right .second-step .last-check .body .products .product .product-detail{ display: flex; flex-direction: column; justify-content: space-between;}
.my-account-container > div > div.right .second-step .last-check .body .products .product .product-detail > div{ display: flex; flex-direction: column;}
.my-account-container > div > div.right .second-step .last-check .body .products .product .product-detail > div .brand{ font-size: 12px; margin-bottom: 3px; font-weight: 700;}
.my-account-container > div > div.right .second-step .last-check .body .products .product .product-detail > div .name{ font-size: 11px; font-weight: 500; color: #444; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; height: 14px; margin-bottom: 3px;}
.my-account-container > div > div.right .second-step .last-check .body .products .product .product-detail > div .info{ font-size: 10px; font-weight: 500; color: #999; line-height: 1.1;}
.my-account-container > div > div.right .second-step .last-check .body .products .product .product-detail .price{ font-size: 14px; font-weight: 700; color: var(--main-color);}
.my-account-container > div > div.right .second-step .last-check .buttons{ border-top: 1px solid #ddd; background-color: #f9f9f9; padding: 15px; display: flex; align-items: center; justify-content: space-between;}
.my-account-container > div > div.right .second-step .last-check .buttons a{ transition: all .15s ease; padding: 7px 15px 8px; border-radius: 4px; border: 1px solid #ccc; background-color: white; color: black; text-decoration: none; font-size: 13px; font-weight: 500;}
.my-account-container > div > div.right .second-step .last-check .buttons a:hover{ cursor: pointer; border-color: var(--main-color); color: var(--main-color);}
.my-account-container > div > div.right .second-step .last-check .buttons button{ transition: all .15s ease; padding: 7px 15px 8px; border-radius: 4px; border: 1px solid var(--main-color); background-color: var(--main-color); color: white; text-decoration: none; font-size: 13px; font-weight: 500;}
.my-account-container > div > div.right .second-step .last-check .buttons button:hover{ background-color: white; cursor: pointer; color: var(--main-color); transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #a6a6a6;}
.my-account-container > div > div.right .second-step .last-check .buttons button:active{ transform: translate(0,0); box-shadow: none;}
.my-account-container > div > div.right .thrid-step{ }
.my-account-container > div > div.right .thrid-step .approval{ overflow: hidden; margin-bottom: 20px; border-radius: 10px; border: 1px solid #ddd; box-shadow: 0 0 2px 1px #eeeeee;}
.my-account-container > div > div.right .thrid-step .approval .body{ padding: 20px 15px 40px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.my-account-container > div > div.right .thrid-step .approval .body .icon{font-size: 55px; color: var(--main-color); margin-bottom: 20px;}
.my-account-container > div > div.right .thrid-step .approval .body h2{ font-size: 19px; font-weight: 600; color: #333; margin-bottom: 15px;}
.my-account-container > div > div.right .thrid-step .approval .body p{ font-size: 14px; color: #333; font-size: 14px; font-weight: 400; text-align: center; margin-bottom: 20px;}
.my-account-container > div > div.right .thrid-step .approval .body .buttons{ display: flex; justify-content: center; align-items: center; gap: 15px; width: 100%; }
.my-account-container > div > div.right .thrid-step .approval .body .buttons a{ padding: 10px 20px; border-radius: 25px; color: #888; font-size: 13px; text-align: center; font-weight: 400; border: 1px solid #b1b1b1;}
.my-account-container > div > div.right .thrid-step .approval .body .buttons a span{ color: var(--main-color);}
.my-account-container > div > div.right .thrid-step .approval .footer{ background-color: #f7f7f7; border-top: 1px solid #ddd; padding: 15px; font-size: 12px; font-weight: 600;}
.my-account-container > div > div.right .thrid-step .approval .footer span{ color: var(--main-color); font-size: 16px; margin-right: 5px;}
.my-account-container > div > div.right .thrid-step .help{ margin-bottom: 20px; border: 1px solid #ddd; box-shadow: 0 0 2px 1px #eeeeee;}
.my-account-container > div > div.right .thrid-step .help .header{ padding: 15px; border-bottom: 1px solid #ddd;}
.my-account-container > div > div.right .thrid-step .help .header span{ font-size: 18px; font-weight: 600;}
.my-account-container > div > div.right .thrid-step .help .body{ padding: 20px; gap: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.my-account-container > div > div.right .thrid-step .help .body > div{ padding: 50px 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #ddd;}
.my-account-container > div > div.right .thrid-step .help .body > div .img-area{ margin-bottom: 10px; font-size: 40px; color: var(--main-color);}
.my-account-container > div > div.right .thrid-step .help .body > div p{ font-size: 12px; width: 80%; text-align: center; font-weight: 500; color: #444;}
.my-account-container > div > div.right .thrid-step .required{ margin-bottom: 20px; display: flex; justify-content: center; flex-direction: column; border: 1px solid #ddd;}
.my-account-container > div > div.right .thrid-step .required > div{ display: flex; align-items: center; font-size: 12px; color: #333; padding: 10px; font-weight: 600;}
.my-account-container > div > div.right .thrid-step .required > div:first-child{ border-bottom: 1px solid #ddd;}
.my-account-container > div > div.right .thrid-step .required > div span{ color: var(--main-color); font-size: 20px; margin-right: 8px;}
.my-account-container > div > div.right .thrid-step .returned-package{ border-radius: 10px; border: 1px solid #ddd; box-shadow: 0 0 2px 1px #eeeeee;}
.my-account-container > div > div.right .thrid-step .returned-package .header{ padding: 15px; border-bottom: 1px solid #ddd;}
.my-account-container > div > div.right .thrid-step .returned-package .header span{ font-size: 18px; font-weight: 600;}
.my-account-container > div > div.right .thrid-step .returned-package .body{ padding: 15px;}
.my-account-container > div > div.right .thrid-step .returned-package .body .products{ display: grid; gap: 15px; grid-template-columns: 1fr 1fr 1fr;}
.my-account-container > div > div.right .thrid-step .returned-package .body .products .product{ padding: 15px; display: flex; gap: 10px; border: 1px solid #ddd;}
.my-account-container > div > div.right .thrid-step .returned-package .body .products .product .img-area{ width: 80px; min-width: 80px; height: 100px; border: 1px solid #ddd; border-radius: 3px; display: flex; align-items: center; justify-content: center;}
.my-account-container > div > div.right .thrid-step .returned-package .body .products .product .img-area img{ width: 100%;}
.my-account-container > div > div.right .thrid-step .returned-package .body .products .product .product-detail{ display: flex; flex-direction: column; justify-content: space-between;}
.my-account-container > div > div.right .thrid-step .returned-package .body .products .product .product-detail > div{ display: flex; flex-direction: column;}
.my-account-container > div > div.right .thrid-step .returned-package .body .products .product .product-detail > div .brand{ font-size: 12px; margin-bottom: 3px; font-weight: 700;}
.my-account-container > div > div.right .thrid-step .returned-package .body .products .product .product-detail > div .name{ font-size: 11px; font-weight: 500; color: #444; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; height: 14px; margin-bottom: 3px;}
.my-account-container > div > div.right .thrid-step .returned-package .body .products .product .product-detail > div .info{ font-size: 10px; font-weight: 500; color: #999; line-height: 1.1;}
.my-account-container > div > div.right .thrid-step .returned-package .body .products .product .product-detail .price{ font-size: 14px; font-weight: 700; color: var(--main-color);}
.my-account-container > div > div.right .thrid-step .returned-footer-buttons{ display: flex; align-items: center; gap: 20px; justify-content: flex-end; margin: 20px 0 20px;}
.my-account-container > div > div.right .thrid-step .returned-footer-buttons a:first-child{ transition: all .15s ease; padding: 7px 15px 8px; border-radius: 4px; border: 1px solid #ccc; background-color: white; color: black; text-decoration: none; font-size: 13px; font-weight: 500;}
.my-account-container > div > div.right .thrid-step .returned-footer-buttons a:first-child:hover{ cursor: pointer; border-color: var(--main-color); color: var(--main-color);}
.my-account-container > div > div.right .thrid-step .returned-footer-buttons a:last-child{ transition: all .15s ease; padding: 7px 15px 8px; border-radius: 4px; border: 1px solid var(--main-color); background-color: var(--main-color); color: white; text-decoration: none; font-size: 13px; font-weight: 500;}
.my-account-container > div > div.right .thrid-step .returned-footer-buttons a:last-child:hover{ background-color: white; cursor: pointer; color: var(--main-color); transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #a6a6a6;}
.my-account-container > div > div.right .thrid-step .returned-footer-buttons a:last-child:active{ transform: translate(0,0); box-shadow: none;}



/* MY FAVORİES  */

.my-account-container > div > div.right .favorite-products{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;}
.my-account-container > div > div.right .favorite-products .product{ transition: all .3s; border: 1px solid #efefef; border-radius: 3px; overflow: hidden; text-decoration: none;}
.my-account-container > div > div.right .favorite-products .product:hover{ box-shadow: 0 0 7px 1px #cacaca;}
.my-account-container > div > div.right .favorite-products .product .img-area{ position: relative; width: 100%; height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.my-account-container > div > div.right .favorite-products .product .img-area img{ transition: all .6s ease; width: 100%;}
.my-account-container > div > div.right .favorite-products .product:hover .img-area img{ transform: scale(1.05);}
.my-account-container > div > div.right .favorite-products .product .img-area > span{ transition: all .15s ease; display: inline-block; position: absolute; right: 5px; top: 5px; width: 30px; height: 30px; color: black; font-size: 30px; font-weight: 200; background-color: #fafafa; border: 1px solid #e6e6e6; border-radius: 50%; padding: 0 0 0 5px; line-height: 25px;}
.my-account-container > div > div.right .favorite-products .product .img-area > span:hover{ background-color: #ffdfdf; color: #2e0000; border-color: #ffcdcd;}
.my-account-container > div > div.right .favorite-products .product .product-detail{ padding: 10px;}
.my-account-container > div > div.right .favorite-products .product .product-detail > span{ font-size: 13px; color: black; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; height: 35px;}
.my-account-container > div > div.right .favorite-products .product .product-detail > span b{}
.my-account-container > div > div.right .favorite-products .product .product-detail > .star{}
.my-account-container > div > div.right .favorite-products .product .product-detail > .star > span{ color: black; font-size: 12px;}
.my-account-container > div > div.right .favorite-products .product .product-detail > .star > small{ color: #333; font-size: 11px;}
.my-account-container > div > div.right .favorite-products .product .product-detail > b{ display: inline-block; color: var(--main-color); margin-top: 5px;}
.my-account-container > div > div.right .favorite-products .product .product-detail > .add-basket-btn{ margin-top: 10px;}
.my-account-container > div > div.right .favorite-products .product .product-detail > .add-basket-btn button{ transition: all .2s ease; width: 100%; background-color: transparent; border-radius: 3px; border: 1px solid var(--main-color); color: var(--main-color); font-weight: 600; font-size: 13px; padding: 5px 0;}
.my-account-container > div > div.right .favorite-products .product .product-detail > .add-basket-btn button:hover{ transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #c5c5c5; cursor: pointer;}
.my-account-container > div > div.right .favorite-products .product .product-detail > .add-basket-btn button:active{ transform: translate(0, 0); box-shadow: none;}

.my-account-container > div > div.right .empty{ display: flex; 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);}
.my-account-container > div > div#my-favorites-container .empty{ display: none;}
.my-account-container > div > div#my-favorites-container.free-area .empty{ display: flex;}
.my-account-container > div > div.right .empty .icon{ margin-bottom: 10px; color: #632df3; 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 #632df3;}
/* .my-account-container > div > div.right .empty .icon::before{ content: ''; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(145deg); width: 90px; height: 5px; background-color: #7e0519; outline: 3px solid white;} */
.my-account-container > div > div.right .empty b{ font-size: 15px; margin-bottom: 7px; font-weight: 600; color: #111;}
.my-account-container > div > div.right .empty span{ text-align: center; margin-bottom: 13px; font-size: 12px; font-weight: 500; max-width: 50%; color: #333;}
.my-account-container > div > div.right .empty a{ transition: all .2s ease; text-decoration: none; font-weight: 600; font-size: 13px; padding: 7px 20px; border-radius: 20px; background-color: #632df3; color: white; border: 2px solid #632df3; box-shadow: 0 0 3px 1px #999;}
.my-account-container > div > div.right .empty a:active{ box-shadow: none !important; transform: scale(1) !important;}
.my-account-container > div > div.right .empty a:hover{ cursor: pointer; background-color: white; color: #632df3; box-shadow: 0 5px 10px 3px #c0c0c0; transform: scaleX(1.05);}




/* STORES I FOLLOW  */
.my-account-container > div > div.right .follow-stores{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.my-account-container > div > div.right .follow-stores .store{ border: 1px solid #ddd; border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 15px;}
.my-account-container > div > div.right .follow-stores .store > div{ display: flex; gap: 10px; align-items: center;}
.my-account-container > div > div.right .follow-stores .store > div .img-area{ box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;}
.my-account-container > div > div.right .follow-stores .store > div .img-area img{ width: 100%;}
.my-account-container > div > div.right .follow-stores .store > div .store-detail{}
.my-account-container > div > div.right .follow-stores .store > div .store-detail .name{ display: flex; align-items: center; gap: 5px;}
.my-account-container > div > div.right .follow-stores .store > div .store-detail .name b{ font-size: 16px; font-weight: 600;}
.my-account-container > div > div.right .follow-stores .store > div .store-detail .name div{ font-weight: 500; font-size: 10px; color: white;  display: flex; align-items: center; justify-content: center; padding: 1px 5px 2px; border-radius: 3px;}
.my-account-container > div > div.right .follow-stores .store > div .store-detail .follower{ font-size: 11px; font-weight: 600;}
.my-account-container > div > div.right .follow-stores .store > a{ transition: all .15s ease; text-decoration: none; padding: 5px 15px 7px; border-radius: 3px; font-size: 12px; font-weight: 600; border: 1px solid var(--main-color); color: var(--main-color);}
.my-account-container > div > div.right .follow-stores .store > a:hover{ background-color: var(--main-color); color: white; transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #9b9b9b;}
.my-account-container > div > div.right .follow-stores .store > a:active{ transform: translate(0,0); box-shadow: none;}

.my-account-container > div > div.right .stores-i-like{ margin-top: 30px;}
.my-account-container > div > div.right .stores-i-like h2{ font-size: 16px; font-weight: 600;}
.my-account-container > div > div.right .stores-i-like .stores-container{ width: 100%; display: flex; gap: 10px; margin-top: 10px; position: relative;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area{ width: 100%; max-width: 960px; overflow: hidden;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores{ transition: all .5s ease-in-out;  width: fit-content; display: flex; flex-wrap: nowrap; gap: 15px;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store{ border: 1px solid #ddd; border-radius: 3px; overflow: hidden; display: flex; align-items: center; flex-direction: column;  padding: 20px 15px; width: 180px; gap: 10px;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store .img-area{ box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store .img-area img{ width: 100%;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store .store-detail{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store .store-detail .name{ display: flex; align-items: center; gap: 5px;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store .store-detail .name b{ text-align: center; font-size: 15px; font-weight: 600;  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store .store-detail .follower{ font-size: 11px; font-weight: 600;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store .store-detail .store-rating{ margin-top: 3px; font-weight: 500; font-size: 10px; color: white;  display: flex; align-items: center; justify-content: center; padding: 1px 5px 2px; border-radius: 3px;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store > a{ cursor: pointer; transition: all .15s ease; text-decoration: none; padding: 5px 15px 7px; border-radius: 3px; margin-top: 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--main-color); color: var(--main-color);}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store > a.active{ background-color: var(--main-color); color: white;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store > a:hover{ background-color: var(--main-color); color: white; transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #9b9b9b;}
.my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store > a:active{ transform: translate(0,0); box-shadow: none;}
.my-account-container > div > div.right .stores-i-like .stores-container .arr{ transition: all .2s ease; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; font-size: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: white; border: 1px solid #ddd; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);}
.my-account-container > div > div.right .stores-i-like .stores-container .arr.disabled{ pointer-events: none; background-color: #f5f5f5; border: 1px solid #ccc; color: #c0c0c0;}
.my-account-container > div > div.right .stores-i-like .stores-container .arr:hover{ cursor: pointer; background-color: #f9f9f9; box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.22); transform: scale(1.02) translateY(-50%);}
.my-account-container > div > div.right .stores-i-like .stores-container .arr:active{ background-color: white; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1); transform: scale(1) translateY(-50%);}
.my-account-container > div > div.right .stores-i-like .stores-container .left-arr{ left: -20px;}
.my-account-container > div > div.right .stores-i-like .stores-container .right-arr{ right: -20px;}



/* ADDRESS INFORMATION */
.my-account-container > div > div.right .area-header{ position: relative;}
.my-account-container > div > div.right .area-header > button.add-address{ cursor: pointer; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background-color: transparent; border: none; color: black; font-size: 13px; font-weight: 600;}
.my-account-container > div > div.right .area-header > button.add-address::before{ transition: all .2s ease; content: ''; display: inline-block; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 0px; background-color: var(--main-color);}
.my-account-container > div > div.right .area-header > button.add-address:hover::before{ width: 100%;}
.my-account-container > div > div.right .area-header > button.add-address i{ font-size: 14px; color: var(--main-color);}
.my-account-container > div > div.right .my-address-area{ border: 1px solid #ddd; padding: 15px; border-radius: 10px;}
.my-account-container > div > div.right .my-address-area > div{ display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr);}
.my-account-container > div > div.right .my-address-area > div .address{ border: 1px solid #ddd; border-radius: 3px; overflow: hidden;}
.my-account-container > div > div.right .my-address-area > div .address .header{ padding: 10px; border-bottom: 1px solid #ddd; background-color: #f5f5f5; display: flex; align-items: center; justify-content: space-between;}
.my-account-container > div > div.right .my-address-area > div .address .header > b{ font-size: 13px; color: #333; font-weight: 600;}
.my-account-container > div > div.right .my-address-area > div .address .header > span{ padding: 3px 8px; font-size: 12px; border-radius: 2px; background-color: #e6e6e6; color: #888;}
.my-account-container > div > div.right .my-address-area > div .address .body{ padding: 10px; display: flex; flex-direction: column; gap: 5px;}
.my-account-container > div > div.right .my-address-area > div .address .body > span{ width: 100%; height: 16px; font-size: 12px; font-weight: 500; color: #555; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;}
.my-account-container > div > div.right .my-address-area > div .address .body > .buttons{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.my-account-container > div > div.right .my-address-area > div .address .body > .buttons button{ position: relative; cursor: pointer; background-color: transparent; border: none; font-size: 14px; padding: 2px;}
.my-account-container > div > div.right .my-address-area > div .address .body > .buttons button::before{ transition: all .2s ease; content: ''; display: inline-block; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0px;}
.my-account-container > div > div.right .my-address-area > div .address .body > .buttons button:hover::before{ width: 100%;}
.my-account-container > div > div.right .my-address-area > div .address .body > .buttons button.remove{ color: #777;}
.my-account-container > div > div.right .my-address-area > div .address .body > .buttons button.remove::before{ background-color: #777;}
.my-account-container > div > div.right .my-address-area > div .address .body > .buttons button.update{ color: var(--main-color); font-weight: 500;}
.my-account-container > div > div.right .my-address-area > div .address .body > .buttons button.update::before{ background-color: var(--main-color);}

.my-account-container > div > div#my-addresses-container .empty{ display: none;}
.my-account-container > div > div#my-addresses-container.free-area .empty{ display: flex;}
.my-account-container > div > div#my-addresses-container.free-area .my-address-area{ display: none;}


/* address modal */
.address-control-modal .modalx-container{ max-width: 550px;}
.address-control-modal .modalx-container > .body > form div._2{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.address-control-modal .modalx-container > .body > form .checkboxs{ position: relative;}
.address-control-modal .modalx-container > .body > form .corporate-area > div{ margin-bottom: 10px;}
.address-control-modal .modalx-container > .body > form .checkboxs label{ display: inline-block; padding-left: 25px;}
.address-control-modal .modalx-container > .body > form > div{ margin-bottom: 20px;}
.address-control-modal .modalx-container > .body > form input:not([type='checkbox']){ transition: all .2s ease; width: 100%; height: 40px; border: 1px solid #d1d1d1; background-color: #fbfbfb; border-radius: 3px; padding: 0 8px;}
.address-control-modal .modalx-container > .body > form input:not([type='checkbox']):focus{ outline: none; background-color: white; box-shadow: 0 0 0 3px #e6193b30;}
.address-control-modal .modalx-container > .body > form textarea{ transition: all .2s ease; width: 100%; height: 40px; border: 1px solid #d1d1d1; background-color: #fbfbfb; border-radius: 3px; padding: 8px; height: 80px; resize: none; font-family: Arial, Helvetica, sans-serif;}
.address-control-modal .modalx-container > .body > form textarea:focus{ outline: none; background-color: white; box-shadow: 0 0 0 3px #e6193b30;}
.address-control-modal .modalx-container > .body > form select{ transition: all .2s ease; width: 100%; height: 40px; border: 1px solid #d1d1d1; background-color: #fbfbfb; border-radius: 3px; padding: 0 5pxpx;}
.address-control-modal .modalx-container > .body > form select:focus{ outline: none; background-color: #ffffff; box-shadow: 0 0 0 3px #e6193b30;}
.address-control-modal .modalx-container > .body > form label:not(.chckbx-label){ display: inline-block; font-size: 13px; font-weight: 600; margin-bottom: 7px;}
.address-control-modal .modalx-container > .body > form input[type="checkbox"]{ position: absolute; cursor: pointer; height: 0; width: 0;}
.address-control-modal .modalx-container > .body > form input[type="checkbox"]::before{ content: ''; position: absolute; left: 0%; top: 3px; display: inline-block; border: 1px solid #a7a7a7; background-color: #f8f8f8; width: 16px; height: 16px; border-radius: 3px;}
.address-control-modal .modalx-container > .body > form input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: var(--main-color); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 5pxpx; border: 1px solid var(--main-color); width: 16px; height: 16px;}
.address-control-modal .modalx-container > .body > form .phone-area > div{ display: flex; gap: 15px; align-items: center;}
.address-control-modal .modalx-container > .body > form .phone-area > div select{pointer-events: none; width: 90px; /*-webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: '';*/}
.address-control-modal .modalx-container > .body > form .phone-area > div button{ transition: all .15s ease; height: 40px; background-color: var(--main-color); border: 1px solid var(--main-color); font-weight: 600; font-size: 13px; color: white; padding: 3px 13px; border-radius: 3px;}
.address-control-modal .modalx-container > .body > form .phone-area > div button.disabled{ pointer-events: none; opacity: .4;}
.address-control-modal .modalx-container > .body > form .birth-of-day > div{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;}
.address-control-modal .modalx-container > .body > form .invoices > div{ display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 35px; outline: 1px solid #cecece; border-radius: 3px;}
.address-control-modal .modalx-container > .body > form .invoices > div input{ width: 0px; height: 0px; opacity: 0; position: absolute;}
.address-control-modal .modalx-container > .body > form .invoices > div input#individual-select:checked + label{ background-color: white; color: #e11441; outline: 2px solid #e11441; border-radius: 3px; position: relative; z-index: 2;}
.address-control-modal .modalx-container > .body > form .invoices > div input#corporate-select:checked + label{ background-color: white; color: #e11441; outline: 2px solid #e11441; border-radius: 3px; position: relative; z-index: 2;}
.address-control-modal .modalx-container > .body > form .invoices > div input#individual-select-2:checked + label{ background-color: white; color: #e11441; outline: 2px solid #e11441; border-radius: 3px; position: relative; z-index: 2;}
.address-control-modal .modalx-container > .body > form .invoices > div input#corporate-select-2:checked + label{ background-color: white; color: #e11441; outline: 2px solid #e11441; border-radius: 3px; position: relative; z-index: 2;}
.address-control-modal .modalx-container > .body > form .invoices > div label{ transition: all 0s ease; cursor: pointer; display: inline-block; font-size: 13px; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #f9f9f9;}
.address-control-modal .modalx-container > .body > form .invoices > div div:last-child label{ border-left: 1px solid #cecece;}
.address-control-modal .modalx-container > .body > form .corporate{}
.address-control-modal .modalx-container > .body > form .corporate > div{ display: flex;}
.address-control-modal .modalx-container > .body > form .corporate > div label{ display: inline-block; font-size: 12px; font-weight: 500; color: #333333; padding-left: 25px;}
.address-control-modal .modalx-container > .body > form > button{ transition: all .2s ease; background-color: #fff; color: var(--main-color); font-weight: 600; border-radius: 3px; border: 1px solid var(--main-color); width: 100%; font-size: 15px; padding: 13px 0; }
.address-control-modal .modalx-container > .body > form > button.disabled{ pointer-events: none; background-color: #ededed; border: 1px solid #ccc; color: #a9a9a9;}
.address-control-modal .modalx-container > .body > form > button:hover{ cursor: pointer; background-color: var(--main-color); color: #fff; transform: translate(2px, -2px); box-shadow: -2px 2px 3px 1px #6f6f6f;}
.address-control-modal .modalx-container > .body > form > button:active{ transform: translate(0,0); box-shadow: none;}
.address-control-modal .modalx-container > .body > form .password-control{ width: 100%;}
.address-control-modal .modalx-container > .body > form .password-control:not(.new){ margin-bottom: 15px;}
.address-control-modal .modalx-container > .body > form .password-control small{ font-size: 11px; color: #333;}
.address-control-modal .modalx-container > .body > form .password-control > div{ display: none; align-items: center; justify-content: space-between; margin-top: 8px;}
.address-control-modal .modalx-container > .body > form .password-control.active > div{ display: flex;}
.address-control-modal .modalx-container > .body > form .password-control > div span{ display: none; width: 40px; font-size: 12px; font-weight: 700;}
.address-control-modal .modalx-container > .body > form .password-control.low > div span.low-txt{ display: inline-block; color: #7e0606;}
.address-control-modal .modalx-container > .body > form .password-control.mid > div span.mid-txt{ display: inline-block; color: #a66306;}
.address-control-modal .modalx-container > .body > form .password-control.high > div span.high-txt{ display: inline-block; color: #019301;}
.address-control-modal .modalx-container > .body > form .password-control > div .bar{ position: relative; width: 85%; height: 6px; background-color: #ececec; border-radius: 10px;}
.address-control-modal .modalx-container > .body > form .password-control > div .bar::before{ content: ''; transition: all .35s linear; position: absolute; left: 0; top: 0; width: 0; z-index: 2; height: 6px; border-radius: 10px;}
.address-control-modal .modalx-container > .body > form .password-control.low > div .bar::before{ width: 20%; background-color: #d90707;}
.address-control-modal .modalx-container > .body > form .password-control.mid > div .bar::before{ width: 50%; background-color: #c29c02;}
.address-control-modal .modalx-container > .body > form .password-control.high > div .bar::before{ width: 100%; background-color: #1fc202;}

/* DELETE ADDRESS MODAL */
#delete-address-modal .modalx-container{ max-width: 400px;}
#delete-address-modal .modalx-container .body .warning-area{ padding: 0 0 30px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;}
#delete-address-modal .modalx-container .body .warning-area .icon{ font-size: 45px; color: #222;}
#delete-address-modal .modalx-container .body .warning-area > p{ font-size: 13px; font-weight: 500; }
#delete-address-modal .modalx-container .body .warning-area .buttons{ display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 10px;}
#delete-address-modal .modalx-container .body .warning-area .buttons button{ transition: all .2s ease; cursor: pointer; width: 150px; height: 33px; background-color: white; border: 1px solid; border-radius: 3px; font-weight: 600;}
#delete-address-modal .modalx-container .body .warning-area .buttons button:hover{ transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #999;}
#delete-address-modal .modalx-container .body .warning-area .buttons button:active{ transform: translate(0, 0); box-shadow: none;}
#delete-address-modal .modalx-container .body .warning-area .buttons button.no{ color: #333; border-color: #333;}
#delete-address-modal .modalx-container .body .warning-area .buttons button.no:hover{ background-color: #333; color: white;}
#delete-address-modal .modalx-container .body .warning-area .buttons button.yes{ color: var(--main-color); border-color: var(--main-color);}
#delete-address-modal .modalx-container .body .warning-area .buttons button.yes:hover{ background-color: var(--main-color); color: white;}





/*------------------------------
------------ STARS -------------
------------------------------*/
.star-area{ display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 3px;}
.star-area span{ color: #5f5d5d;}
.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: #f8ce0b;}

/*------------------------------
---------- MODALS CSS ----------
------------------------------*/
.modalx{ transition: all .1s ease; opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 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 .3s ease; opacity: 0; transform: translateY(50px); width: calc(100% - 20px); background-color: white; border-radius: 7px; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2); overflow: hidden;}
.modalx.active .modalx-container{ transform: translateY(0); opacity: 1;}
.modalx .modalx-container .header{ background-color: #f9f9f9; 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; color: #222;}
.modalx .modalx-container .header span{ transition: all .15s ease; cursor: pointer; font-weight: 500; font-size: 30px; position: absolute; right: 20px; color: #999;}
.modalx .modalx-container .header span:hover{ color: #320000;}
.modalx .modalx-container .body{ padding: 15px; max-height: 85vh; overflow-y: auto;}
.modalx .modalx-container .body::-webkit-scrollbar{ background-color: #e4e4e4; width: 12px; border-bottom-right-radius: 7px;}
.modalx .modalx-container .body::-webkit-scrollbar-thumb{ background-color: #b7b7b7; border-bottom-right-radius: 7px;}

/* RATE SELLER MODAL  */
#rate-seller-modal .modalx-container{ max-width: 550px;}
#rate-seller-modal .modalx-container > .body{}
#rate-seller-modal .modalx-container > .body .store-area{ display: flex; justify-content: space-between; background-color: #f2f2f2; padding: 10px; margin-bottom: 20px;}
#rate-seller-modal .modalx-container > .body .store-area > div{ display: flex; align-items: center; gap: 10px;}
#rate-seller-modal .modalx-container > .body .store-area > div .img-area{ width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;}
#rate-seller-modal .modalx-container > .body .store-area > div .img-area img{ width: 100%;}
#rate-seller-modal .modalx-container > .body .store-area > div > b{ text-transform: uppercase; font-size: 16px; font-weight: 700;}
#rate-seller-modal .modalx-container > .body .store-area > div .store-rating{ font-size: 12px; padding: 1px 5px; border-radius: 3px; color: white;}
#rate-seller-modal .modalx-container > .body .store-area > button{ transition: all .15s ease; font-size: 11px; padding: 3px 7px; background-color: white; color: black; border: 1px solid #c7c7c7; border-radius: 3px; margin-left: 5px;}
#rate-seller-modal .modalx-container > .body .store-area > button:hover{ cursor: pointer; border-color: var(--main-color); color: var(--main-color);}
#rate-seller-modal .modalx-container > .body .rate-area{ display: flex; align-items: center; justify-content: space-between; padding: 10px; border-radius: 10px; background-color: #f6f6f6;}
#rate-seller-modal .modalx-container > .body .rate-area b{ font-size: 16px; font-weight: 600;}
#rate-seller-modal .modalx-container > .body .rate-area .stars{ text-align: center;}
#rate-seller-modal .modalx-container > .body .rate-area .stars .star{ font-size: 25px; color: #c3c3c3; cursor: pointer;}
#rate-seller-modal .modalx-container > .body .rate-area .stars .star.active{ color: #f4f021;}
#rate-seller-modal .modalx-container > .body .rate-seller-star{ margin-bottom: 10px;}
#rate-seller-modal .modalx-container > .body .rate-cargo-star{ }
#rate-seller-modal .modalx-container > .body > small{ color: #555; font-size: 10px; font-weight: 500;}
#rate-seller-modal .modalx-container > .body .comment-area{ margin-top: 20px;}
#rate-seller-modal .modalx-container > .body .comment-area label{ font-size: 14px; font-weight: 600; color: black;}
#rate-seller-modal .modalx-container > .body .comment-area textarea{ transition: all .2s ease; margin-top: 7px; width: 100%; height: 100px; resize: none; border: 1px solid #cecece; background-color: #f8f8f8; font-family: Arial, Helvetica, sans-serif; padding: 7px; border-radius: 5px;}
#rate-seller-modal .modalx-container > .body .comment-area textarea:focus{ outline: none; border-color: #f17086; box-shadow: 0 0 0 3px #ffb4c1; background-color: white;}
#rate-seller-modal .modalx-container > .body .comment-area .char{ text-align: end; margin-top: 3px; font-size: 12px; font-weight: 500; color: #777;}
#rate-seller-modal .modalx-container > .body .checkboxes{ display: flex; flex-direction: column; gap: 3px; margin-top: 15px;}
#rate-seller-modal .modalx-container > .body .checkboxes input[type="checkbox"]{ position: absolute; cursor: pointer; height: 0; width: 0;}
#rate-seller-modal .modalx-container > .body .checkboxes input[type="checkbox"]::before{ content: ''; position: absolute; left: 0; top: 5px; display: inline-block; border: 1px solid #cbcbcb; background-color: #f6f6f6; width: 15px; height: 15px; border-radius: 3px;}
#rate-seller-modal .modalx-container > .body .checkboxes input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: var(--main-color); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 5px; border: 1px solid var(--main-color); width: 15px; height: 15px;}
#rate-seller-modal .modalx-container > .body .checkboxes > div{ height: fit-content;}
#rate-seller-modal .modalx-container > .body .checkboxes > div label{ display: inline-block; font-size: 12px; padding-left: 22px; line-height: 1.3;}
#rate-seller-modal .modalx-container > .body .checkboxes > div label a{ color: black; font-weight: 500;}
#rate-seller-modal .modalx-container > .body > button{ width: 100%; height: 40px; font-family: Arial, Helvetica, sans-serif; font-weight: 600; font-size: 14px; color: #555; border: 1px solid var(--main-color); background-color: var(--main-color); color: white; border-radius: 5px; margin-top: 20px;}


/* RATE PRODUCT MODAL */
#rate-product-modal .modalx-container{ max-width: 500px;}
#rate-product-modal .modalx-container > .body .product{ display: flex; gap: 20px;}
#rate-product-modal .modalx-container > .body .product .img-area{ width: 120px; min-width: 120px; height: 150px; border: 1px solid #ddd; border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
#rate-product-modal .modalx-container > .body .product .img-area img{ width: 100%;}
#rate-product-modal .modalx-container > .body .product .product-detail{ }
#rate-product-modal .modalx-container > .body .product .product-detail > b{ font-size: 16px; font-weight: 700; color: black;}
#rate-product-modal .modalx-container > .body .product .product-detail > p{ height: 58px; margin-bottom: 5px; font-size: 14px; font-weight: 500; color: #555;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;}
#rate-product-modal .modalx-container > .body .product .product-detail > span{ font-weight: 700; font-size: 13px; color: var(--main-color); display: inline-block; margin-top: 15px;}
#rate-product-modal .modalx-container > .body .product .product-detail > span.hide{ display: none;}
#rate-product-modal .modalx-container > .body .product .product-detail .stars{}
#rate-product-modal .modalx-container > .body .product .product-detail .stars .star{ font-size: 22px; color: #cccccc; cursor: pointer;}
#rate-product-modal .modalx-container > .body .product .product-detail .stars .star.active{ color: #f4f021;}
#rate-product-modal .modalx-container > .body .comment-area{ margin-top: 20px;}
#rate-product-modal .modalx-container > .body .comment-area .head{ display: flex; align-items: center; justify-content: space-between;}
#rate-product-modal .modalx-container > .body .comment-area .head label{ font-size: 14px; font-weight: 600; color: black;}
#rate-product-modal .modalx-container > .body .comment-area .head a{ font-size: 10px; font-weight: 600; color: black;}
#rate-product-modal .modalx-container > .body .comment-area textarea{ transition: all .2s ease; margin-top: 7px; width: 100%; height: 100px; resize: none; border: 1px solid #cecece; background-color: #f8f8f8; font-family: Arial, Helvetica, sans-serif; padding: 7px; border-radius: 5px;}
#rate-product-modal .modalx-container > .body .comment-area textarea:focus{ outline: none; border-color: #f17086; box-shadow: 0 0 0 3px #ffb4c1; background-color: white;}
#rate-product-modal .modalx-container > .body .comment-area .char{ text-align: end; margin-top: 3px; font-size: 12px; font-weight: 500; color: #777;}
#rate-product-modal .modalx-container > .body .checkboxes{ display: flex; flex-direction: column; gap: 3px; margin-top: 15px;}
#rate-product-modal .modalx-container > .body .checkboxes input[type="checkbox"]{ position: absolute; cursor: pointer; height: 0; width: 0;}
#rate-product-modal .modalx-container > .body .checkboxes input[type="checkbox"]::before{ content: ''; position: absolute; left: 0; top: 5px; display: inline-block; border: 1px solid #cbcbcb; background-color: #f6f6f6; width: 15px; height: 15px; border-radius: 3px;}
#rate-product-modal .modalx-container > .body .checkboxes input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: var(--main-color); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 5px; border: 1px solid var(--main-color); width: 15px; height: 15px;}
#rate-product-modal .modalx-container > .body .checkboxes > div{ height: fit-content;}
#rate-product-modal .modalx-container > .body .checkboxes > div label{ display: inline-block; font-size: 12px; padding-left: 22px; line-height: 1.3;}
#rate-product-modal .modalx-container > .body .checkboxes > div label a{ color: black; font-weight: 500;}
#rate-product-modal .modalx-container > .body > button{ transition: all .2s ease; width: 100%; height: 40px; font-family: Arial, Helvetica, sans-serif; font-weight: 600; font-size: 14px; color: #555; border: 1px solid var(--main-color); background-color: var(--main-color); color: white; border-radius: 5px; margin-top: 20px;}
#rate-product-modal .modalx-container > .body > button:hover{ cursor: pointer; transform: translate(1px, -1px); box-shadow: -1px 1px 3px #ccc; background-color: white; color: var(--main-color);}
#rate-product-modal .modalx-container > .body > button:active{ transform: translate(0,0); box-shadow: none;}



/* WARNING MODAL */
.modalx.warning-modal{}
.modalx.warning-modal .modalx-container{ max-width: 450px;}
.modalx.warning-modal .modalx-container .body{ }
.modalx.warning-modal .modalx-container .body > div{ padding: 20px 0 30px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.modalx.warning-modal .modalx-container .body > div .icon{ margin-bottom: 20px; width: 70px; height: 70px; border-radius: 50%; position: relative; position: relative;}
.modalx.warning-modal .modalx-container .body > div .icon::before{ font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; font-size: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.modalx.warning-modal .modalx-container .body > div p{ margin-bottom: 30px; text-align: center;}
.modalx.warning-modal .modalx-container .body > div .buttons{ display: flex; align-items: center; justify-content: center; gap: 15px;}
.modalx.warning-modal .modalx-container .body > div .buttons a{ text-decoration: none; cursor: pointer; border-radius: 3px; transition: all .2s ease; width: 130px; height: 33px; display: flex; align-items: center; justify-content: center; border: 1px solid; font-weight: 600;}
.modalx.warning-modal .modalx-container .body > div .buttons a.dark{ color: #333; border-color: #333;}
.modalx.warning-modal .modalx-container .body > div .buttons a.dark:hover{ background-color: #333; color: white;}
.modalx.warning-modal .modalx-container .body > div .buttons a.light{ color: var(--main-color); border-color: var(--main-color);}
.modalx.warning-modal .modalx-container .body > div .buttons a.light:hover{ background-color: var(--main-color); color: white;}
.modalx.warning-modal .modalx-container .body > div .buttons a:hover{ transform: translate(1px, -1px); box-shadow: -1px 1px 3px 1px #999;}
.modalx.warning-modal .modalx-container .body > div .buttons a:active{ transform: translate(0, 0); box-shadow: none;}
.modalx.warning-modal .modalx-container .body > div.success .icon{ background-color: #25c80031;}
.modalx.warning-modal .modalx-container .body > div.success .icon::before{ content: '\f00c'; color: #25c800;}
.modalx.warning-modal .modalx-container .body > div.warning .icon{ background-color: #c89d0031;}
.modalx.warning-modal .modalx-container .body > div.warning .icon::before{ content: '\21'; color: #c89d00;}
.modalx.warning-modal .modalx-container .body > div.danger .icon{ background-color: #c8000031;}
.modalx.warning-modal .modalx-container .body > div.danger .icon::before{ content: '\f00d'; color: #d63838;}


/* Mobile Css */
/* orders */
.my-account-container > div > div.right .order-nav a{ display: none;}
.my-account-container > div > div.right > .buttons button .mobile{ display: none;}
.my-account-container > div > div.right .content > div .content-section .order .header .button a .mobile{ display: none;}
.my-account-container > div > div.right .content > div .content-section .order .body > div .returned a i{ display: none;}

/* order-detail */
.my-account-container > div > div.right .detail-info h2 a{ display: none;}
.my-account-container > div > div.right .detail-info .texts div b span{ display: none;}
.my-account-container > div > div.right .detail-info .texts div.mobile{ display: none;}
.my-account-container > div > div.right .orders .order .header .head > div:not(.logo) b span{ display: none;}
.my-account-container > div > div.right .orders .order .body .status .infos > a b{ font-weight: 500;}
.my-account-container > div > div.right .orders .order .body .status .infos > span b{ font-weight: 500;}

/* cancel-order */

/* my-evalutions */
.evalutions-header{ display: none;}

/* my-favorites */
.area-header.favorites-header a{ display: none;}

/* help */
.help-blade > div .left h1 a{ display: none;}
.my-account-container > div > div.right .descriptions .description .header a{ display: none;}

@media screen and (max-width: 1100px) {
    .my-account-container > div > div.right .detail-info .texts{ gap: 20px;}
}

@media screen and (max-width: 900px) {
    .my-account-container > div{ grid-template-columns: 100%;}
    /* .my-account-container > div > div.left{ display: none;} */
    .my-account-container > div > div.right{ }
    .my-account-container > div > div.right .content > div .content-section .order .body > div{ }
    .my-account-container > div > div.right .content > div .content-section .empty{ width: calc(100% - 20px); margin: 0 auto;}
}

@media screen and (max-width: 830px){
    .my-basket-section > div .basket-price{ position: static;}
}

@media screen and (max-width: 768px){
    .navbar .navbar-container .navbar-detail{ background-color: #ffffff;}
    .my-account-container{ margin-top: 0; background-color: #ffffff; min-height: 93%;}
    .my-account-container > div{ padding: 0;}
    .my-account-container > div > div.left{ display: none;}
    .my-account-container > div > div.right .empty{ width: calc(100% - 20px); margin: 0 auto; padding: 70px 10px;}
    .my-account-container > div > div.right .empty span{ width: 100%; max-width: unset;}
    /* orders */
    .my-account-container > div > div.right .order-nav{ background-color: #fff; display: flex; flex-direction: column; padding: 0 0 10px; border: none; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .order-nav h2{ position: relative; width: 100%; text-align: center; padding: 10px; margin-bottom: 25px;}
    .my-account-container > div > div.right .order-nav h2::before{ content: ''; display: inline-block; width: 100%; height: 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; position: absolute; left: 0; bottom: -15px;}
    .my-account-container > div > div.right .order-nav a{ display: inline-block; position: absolute; left: 10px; color: black;}
    .my-account-container > div > div.right .order-nav .filter-area{ display: none;}
    .my-account-container > div > div.right > .buttons{ overflow-x: auto; padding: 15px 10px;}
    .my-account-container > div > div.right > .buttons::-webkit-scrollbar{ background-color: transparent; height: 0;}
    .my-account-container > div > div.right > .buttons::-webkit-scrollbar-thumb{ background-color: transparent;}
    .my-account-container > div > div.right > .buttons button{ font-size: 13px; white-space: nowrap;}
    .my-account-container > div > div.right > .buttons button .web{ display: none;}
    .my-account-container > div > div.right > .buttons button .mobile{ display: inline-block;}
    .my-account-container > div > div.right > .buttons button{ box-shadow: 0 0 0 1px #ddd;}
    .my-account-container > div > div.right .content > div .content-section .order { width: calc(100% - 20px); margin: 0 auto 20px;}
    .my-account-container > div > div.right .content > div .content-section .order .header{ position: relative; display: flex; gap: 2px; flex-direction: column; background-color: white;}
    .my-account-container > div > div.right .content > div .content-section .order .header div{ flex-direction: row; gap: 3px;}
    .my-account-container > div > div.right .content > div .content-section .order .header .button{ position: absolute; right: 10px; }
    .my-account-container > div > div.right .content > div .content-section .order .header .button a{ background-color: white; color: var(--main-color); padding: 10px; width: fit-content; height: fit-content;}
    .my-account-container > div > div.right .content > div .content-section .order .header .button a .web{ display: none;}
    .my-account-container > div > div.right .content > div .content-section .order .header .button a .mobile{ font-size: 13px; display: inline-block;}
    .my-account-container > div > div.right .content > div .content-section .order .header .button a .mobile i{ margin-left: 5px;}
    .my-account-container > div > div.right .content > div .content-section .order .header div:nth-child(1) b{ display: none;}
    .my-account-container > div > div.right .content > div .content-section .order .header div:nth-child(2){ display: none;}
    .my-account-container > div > div.right .content > div .content-section .order .header div:nth-child(3){ display: none;}
    .my-account-container > div > div.right .content > div .content-section .order .header > div span.price{ color: var(--main-color);}
    .my-account-container > div > div.right .content > div .content-section .order .body{ background-color: white; padding: 0;}
    .my-account-container > div > div.right .content > div .content-section .order .body > div{ display: flex; flex-direction: column; border: none; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .content > div .content-section .order .body > div .txt{ margin-bottom: 10px;}
    .my-account-container > div > div.right .content > div .content-section .order .body > div .products{ width: 100%; overflow-x: auto; margin-bottom: 10px;}
    .my-account-container > div > div.right .content > div .content-section .order .body > div > .returned{ justify-content: end;}
    .my-account-container > div > div.right .content > div .content-section .order .body > div > .returned a{ width: fit-content; height: fit-content; border: none;}
    .my-account-container > div > div.right .content > div .content-section .order .body > div > .returned a i{ display: inline-block; margin-left: 5px; font-size: 12px;}


    /* order-detail */
    .my-account-container > div > div.right > .info{ display: none;} /*mesafeli satış en altta olacak*/

    .my-account-container > div > div.right .detail-info{ display: flex; flex-direction: column; padding: 0; border: none;}
    .my-account-container > div > div.right .detail-info h2{ background-color: white; position: relative; width: 100%; text-align: center; padding: 10px; border-bottom: 1px solid #ddd; margin-bottom: 15px;}
    .my-account-container > div > div.right .detail-info h2 a{ display: inline-block; position: absolute; left: 10px; color: black;}
    .my-account-container > div > div.right .detail-info .texts{ flex-direction: column; align-items: baseline; justify-content: flex-start; gap: 5px; background-color: white; width: calc(100% - 20px); margin: 0 auto; padding: 15px; border: 1px solid #ddd;}
    .my-account-container > div > div.right .detail-info .texts div{ flex-direction: row; gap: 3px;}
    .my-account-container > div > div.right .detail-info .texts div.mobile{ display: flex;}
    .my-account-container > div > div.right .detail-info .texts div b{ font-size: 11px;}
    .my-account-container > div > div.right .detail-info .texts div b span{ display: inline-block;}
    .my-account-container > div > div.right .detail-info .texts div span{ font-size: 11px;}
    .my-account-container > div > div.right .detail-info .texts div span span.green{ color: green;}
    .my-account-container > div > div.right .detail-info .texts div span span.red{ color: red;}
    .my-account-container > div > div.right .detail-info .texts div span span.gray{ color: #454545;}
    .my-account-container > div > div.right .detail-info .texts div span.price{ color: var(--main-color);}
    .my-account-container > div > div.right .detail-info .order-status{ display: none;}
    .my-account-container > div > div.right .orders .order{ width: calc(100% - 20px); margin: 0 auto;}
    .my-account-container > div > div.right .orders .order .header{ border-bottom: none; padding-bottom: 0; background-color: white;}
    .my-account-container > div > div.right .orders .order .header .head{ flex-direction: column; align-items: baseline; gap: 7px;}
    .my-account-container > div > div.right .orders .order .header .head > div:not(.logo){ flex-direction: row; align-items: center; padding: 0; gap: 3px;}
    .my-account-container > div > div.right .orders .order .header .head .cargo{ color: black;}
    .my-account-container > div > div.right .orders .order .header .head > div:not(.logo) span{ margin-top: 0; font-weight: 400;}
    .my-account-container > div > div.right .orders .order .header .head > div:not(.logo) b{ font-weight: 600;}
    .my-account-container > div > div.right .orders .order .header .head > div:not(.logo) b span{ display: inline-block;}
    .my-account-container > div > div.right .orders .order .header .head .delivery-no{ border: none;}
    .my-account-container > div > div.right .orders .order .header .head .logo{ display: none;}
    .my-account-container > div > div.right .orders .order .body{ padding: 0 0 15px; background-color: white;}
    .my-account-container > div > div.right .orders .order .body .seller-area{ padding: 7px 15px 10px; flex-direction: column;align-items: baseline; border-bottom: 1px solid #ddd; background-color: white;}
    .my-account-container > div > div.right .orders .order .body .seller-area .seller{ width: 100%;}
    .my-account-container > div > div.right .orders .order .body .seller-area .seller b{ font-size: 11px; font-weight: 600;}
    .my-account-container > div > div.right .orders .order .body .seller-area .seller a{ font-size: 11px;}
    .my-account-container > div > div.right .orders .order .body .seller-area .seller a::after{ content: '\f105'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; margin-left: 3px;}
    .my-account-container > div > div.right .orders .order .body .seller-area .seller button{ margin-left: auto; padding: 6px 17px 5px;}
    .my-account-container > div > div.right .orders .order .body .status > span{ padding: 10px 15px;}
    .my-account-container > div > div.right .orders .order .body .status > p{ padding: 0 15px;}
    .my-account-container > div > div.right .orders .order .body .status > a{ margin-left: 10px;}
    .my-account-container > div > div.right .orders .order .body .status .infos{ flex-direction: column; align-items: baseline; gap: 3px; padding: 0 15px;}
    .my-account-container > div > div.right .orders .order .body .status .infos > a{ border: none; margin-top: 0; padding: 0; font-size: 11px; color: black;}
    .my-account-container > div > div.right .orders .order .body .status .infos > a b{ font-weight: 600; margin-right: 4px;}
    .my-account-container > div > div.right .orders .order .body .status .infos > span{ background-color: transparent; margin-top: 0; border: none; padding: 0; font-size: 11px; color: black;}
    .my-account-container > div > div.right .orders .order .body .status .infos > span b{ font-weight: 600; margin-right: 4px;}
    .my-account-container > div > div.right .orders .order .body .status + .status{ padding-top: 0;}
    .my-account-container > div > div.right .orders .order .body .status .products{ border-top: 1px solid #ddd;}
    .my-account-container > div > div.right .orders .order .body .status .product-location{ margin: 10px 0;}
    .my-account-container > div > div.right .orders .order .body .status .product-location > div{ width: calc(100% - 20px); margin: 0 auto;}
    .my-account-container > div > div.right .orders .order .body .status .product-location > div > div span{ font-weight: 600;}
    .my-account-container > div > div.right .orders .order .body .status .products{ grid-template-columns: 100%;}
    .my-account-container > div > div.right .orders .order .body .status .products .product{ border: none;}
    .my-account-container > div > div.right .other-infos{ grid-template-columns: 100%; padding: 0 10px;}
    .my-account-container > div > div.right .other-infos > div{ background-color: white;}
    .my-account-container > div > div.right .other-infos > div .header{ background-color: white;}
    #rate-seller-modal .modalx-container > .body .rate-area b{ font-size: 14px;}
    #rate-seller-modal .modalx-container > .body .rate-area .stars .star{ font-size: 20px;}
    #rate-seller-modal .modalx-container > .body > small{ font-size: 11px;}
    #rate-seller-modal .modalx-container > .body .comment-area textarea{ font-size: 13px;}
    #rate-product-modal .modalx-container > .body .product .product-detail > b{ font-size: 15px;}
    #rate-product-modal .modalx-container > .body .product .product-detail > span{ font-size: 12px; margin-top: 12px;}
    #rate-product-modal .modalx-container > .body .product .product-detail > p{ font-size: 12px; font-size: 12px; height: 64px; -webkit-line-clamp: 4;}

    /* cancel-order */
    .my-account-container > div > div.right .area-header{  background-color: white; position: relative; width: 100%; text-align: center; padding: 10px; box-shadow: none; border: none; border-bottom: 1px solid #ddd; margin-bottom: 15px;}
    .my-account-container > div > div.right .area-header a:not(.returned-conditions){ display: inline-block; position: absolute; left: 10px; color: black;}
    .my-account-container > div > div.right .cancel-req-area .success-area{ background-color: white; width: calc(100% - 20px); padding: 40px 15px; margin: 0 auto; border-radius: 0;}
    .my-account-container > div > div.right .cancel-req-area .success-area h3{ font-size: 16px;}
    .my-account-container > div > div.right .cancel-req-area .success-area p{ font-size: 13px;}
    .my-account-container > div > div.right .cancel-req-area .last-check{ background-color: white; width: calc(100% - 20px); margin: 20px auto 0; overflow: hidden; border-radius: 3px; box-shadow: none; border: 1px solid #ddd;}
    .my-account-container > div > div.right .cancel-req-area .last-check .header{ background-color: white;}
    .my-account-container > div > div.right .cancel-req-area .last-check .body{ padding: 0;}
    .my-account-container > div > div.right .cancel-req-area .last-check .body .products{ grid-template-columns: 100%; padding: 0;}
    .my-account-container > div > div.right .cancel-req-area .last-check .body .products .product{ border: none; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .cancel-req-area .last-check .body .products .product .product-detail > div .name{ height: 49px; -webkit-line-clamp: 3;}
    .my-account-container > div > div.right .cancel-req-area .buttons{ padding: 0 10px;}

    /* returned-request */
    .my-account-container > div > div.right .area-header a:not(.returned-conditions) + h1{ margin: 0 auto; font-size: 19px !important; font-weight: 500 !important;}
    .my-account-container > div > div.right .area-header a.returned-conditions{ display: inline-block; position: absolute; right: 10px; color: black; font-size: 11px !important;}
    .my-account-container > div > div.right.first .first-step{ background-color: white; width: calc(100% - 20px); margin:  0 auto; border-radius: 3px; box-shadow: none; border: 1px solid #ddd; border-radius: 3px;}
    .my-account-container > div > div.right .retrned-req-area .header{ font-size: 12px;}
    .my-account-container > div > div.right .retrned-req-area .products .product{ display: flex; flex-direction: column; padding: 10px 10px 10px 40px; position: relative;}
    .my-account-container > div > div.right .retrned-req-area .products .product .chckbx{ position: absolute; left: 20px; top: 60px;}
    .my-account-container > div > div.right .retrned-req-area .products .product .product-detail{ margin-bottom: 10px;}
    .my-account-container > div > div.right .retrned-req-area .products .product .select-area{ justify-content: space-between;}
    .my-account-container > div > div.right .retrned-req-area .products .product .select-area select{ max-width: calc(100% - 90px);}
    .my-account-container > div > div.right .retrned-req-area .buttons{ background-color: #fbfbfb;}
    .my-account-container > div > div.right .second-step{ padding-bottom: 20px;}
    .my-account-container > div > div.right .second-step .cargo-information{ gap: 10px; background-color: white; width: calc(100% - 20px); margin: 0 auto; border-radius: 0; box-shadow: none; border: 1px solid #ddd;}
    .my-account-container > div > div.right .second-step .cargo-information .img-area{ width: 100px; min-width: 100px;}
    .my-account-container > div > div.right .second-step .cargo-information .img-area img{ width: 100px;}
    .my-account-container > div > div.right .second-step .last-check{ background-color: white; width: calc(100% - 20px); margin: 15px auto 0; box-shadow: none; border: 1px solid #ddd; border-radius: 3px;}
    .my-account-container > div > div.right .second-step .last-check .header{ align-items: baseline;}
    .my-account-container > div > div.right .second-step .last-check .header > span{ font-size: 13px;}
    .my-account-container > div > div.right .second-step .last-check .body{ padding: 0;}
    .my-account-container > div > div.right .second-step .last-check .body .products{ grid-template-columns: 100%;}
    .my-account-container > div > div.right .second-step .last-check .body .products .product{ border: none; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .second-step .last-check .body .products .product:last-child{ border-bottom: none;}
    .my-account-container > div > div.right .second-step .last-check .body .products .product .product-detail > div .name{ height: 31px; -webkit-line-clamp: 2;}
    .my-account-container > div > div.right.thrid .thrid-step{ padding: 0 10px;}
    .my-account-container > div > div.right .thrid-step .approval{ border-radius: 3px; box-shadow: none; border: 1px solid #ddd; background-color: white;}
    .my-account-container > div > div.right .thrid-step .approval .body h2{ text-align: center;}
    .my-account-container > div > div.right .thrid-step .help{ background-color: white; box-shadow: none; border: 1px solid #ddd;}
    .my-account-container > div > div.right .thrid-step .help .body{ padding: 0; gap: 0;}
    .my-account-container > div > div.right .thrid-step .help .body > div{ border: none; justify-content: flex-start;}
    .my-account-container > div > div.right .thrid-step .help .body > div:first-child{ border-right: 1px solid #ddd;}
    .my-account-container > div > div.right .thrid-step .help .body > div p{ width: 100%;}
    .my-account-container > div > div.right .thrid-step .required{ background-color: white;}
    .my-account-container > div > div.right .thrid-step .returned-package{ background-color: white; box-shadow: none; border-radius: 3px;}
    .my-account-container > div > div.right .thrid-step .returned-package .body{ padding: 0;}
    .my-account-container > div > div.right .thrid-step .returned-package .body .products{ grid-template-columns: 100%;}
    .my-account-container > div > div.right .thrid-step .returned-package .body .products .product{ border: none; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .thrid-step .returned-package .body .products .product:last-child{ border-bottom: none;}
    .my-account-container > div > div.right .thrid-step .returned-package .body .products .product .product-detail > div .name{ height: 31px; -webkit-line-clamp: 2;}
    .my-account-container > div > div.right .thrid-step .returned-footer-buttons{ justify-content: space-between;}
    .my-account-container > div > div.right .thrid-step .approval .footer{ background-color: #fbfbfb;}

    /* my-evalutions */
    .my-account-container > div > div.right .evaluation-area{ border: none;}
    .my-account-container > div > div.right .evaluation-area .header{ border-top: 1px solid #ddd;}
    .my-account-container > div > div.right .evaluation-area .body{ padding: 0; margin-top: 10px;}
    .my-account-container > div > div.right .evaluation-area .body.free .products.free{ grid-template-columns: 100%; gap: 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .evaluation-area .body .products.free .product{ background-color: white; border: none; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .evaluation-area .body .products.free .product:last-child{ border-bottom: none;}
    .my-account-container > div > div.right .evaluation-area .body.full .products.full{ grid-template-columns: 100%; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .evaluation-area .body.full .products.full .product{ background-color: white;}
    .my-account-container > div > div.right .evaluation-area .body .products.full{ gap: 0;}
    .my-account-container > div > div.right .evaluation-area .body.full .products.full .product{ border: none; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .evaluation-area .body.full .products.full .product:last-child{ border: none; border-bottom: none;}
    .my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .comment{ height: 80px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;}
    .evalutions-header{ display: block;}
    .my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .icon > div{ width: 145px;}
    .my-account-container > div > div.right .evaluation-area .body .products.full .product .product-detail .icon > div > span{ padding: 15px 10px;}
    .my-account-container > div > div.right .evaluation-area .body .products.free .product .product-detail button{ font-size: 12px; padding: 7px 8px; width: 140px;}

    /* user-informations */
    .my-account-container > div > div.right .user-informations-area{ grid-template-columns: 100%; box-shadow: none; border: none; border-radius: 0;}
    .my-account-container > div > div.right .user-informations-area > form{ background-color: white; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .user-informations-area > form:first-child{ margin-bottom: 15px;}

    /* address-informations */
    .area-header.address-header{ margin-bottom: 65px !important;}
    .my-account-container > div > div.right .area-header > button.add-address{ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; top: unset; transform: translateY(0); width: 100%; left: 0; bottom: -55px; background-color: white; height: 45px; }
    .my-account-container > div > div.right .my-address-area > div{ grid-template-columns: 100%;}
    .my-account-container > div > div.right .my-address-area{ padding: 0; border-radius: 0; border: none;}
    .my-account-container > div > div.right .my-address-area > div .address{ background-color: white; width: calc(100% - 20px); margin: 0 auto;}
    .my-account-container > div > div.right .my-address-area > div .address .header{ background-color: white;}
    .address-control-modal .modalx-container > .body > form .invoices > div label{ padding-bottom: 1px;}
    ._2.mobile{ grid-template-columns: 100% !important;}

    /* my-favorites */
    .my-account-container > div > div.right .favorite-products{ grid-template-columns: 1fr 1fr; padding: 0 10px; gap: 10px;}
    .my-account-container > div > div.right .favorite-products .product{ background-color: white; padding: 5px; border: 1px solid #ddd;}
    .my-account-container > div > div.right .favorite-products .product .img-area{ height: 64vw;}
    .my-account-container > div > div.right .favorite-products .product .product-detail > span{ font-size: 12px; font-weight: 400; color: #555;}
    .my-account-container > div > div.right .favorite-products .product .product-detail > span b{ font-size: 12px; font-weight: 500; color: black;}
    .my-account-container > div > div.right .favorite-products .product .product-detail > .star > span{ display: none;}
    .my-account-container > div > div.right .favorite-products .product .product-detail > .star .stars-outer::before, .my-account-container > div > div.right .favorite-products .product .product-detail > .star .stars-inner::before{ font-size: 11px;}

    /* follow-stores */
    .my-account-container > div > div.right .follow-stores{ grid-template-columns: 100%; padding: 0 10px;}
    .my-account-container > div > div.right .follow-stores .store{ background-color: white; padding: 15px 10px;}
    .my-account-container > div > div.right .follow-stores .store > div .img-area{ width: 30px; height: 30px;}
    .my-account-container > div > div.right .follow-stores .store > div .store-detail .name b{ font-size: 14px;}
    .my-account-container > div > div.right .follow-stores .store > div .store-detail .follower{ font-size: 11px;}
    .my-account-container > div > div.right .follow-stores .store > div .store-detail .name div{ font-size: 9px; padding: 2px 5px;}
    .my-account-container > div > div.right .follow-stores .store > a{ font-size: 11px;}
    .my-account-container > div > div.right .stores-i-like{ background-color: white; padding: 20px 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
    .my-account-container > div > div.right .stores-i-like h2{ margin-bottom: 15px;}
    .my-account-container > div > div.right .stores-i-like .stores-container .arr{ display: none;}
    .my-account-container > div > div.right .stores-i-like .stores-container .stores-area{ overflow-x: auto; padding-bottom: 10px;}
    .my-account-container > div > div.right .stores-i-like .stores-container .stores-area .stores .store .img-area{ }

    /* help */
    .help-blade > div .left{ display: block !important;}
    .help-blade > div .left h1{ background-color: white; position: relative; width: 100%; text-align: center; padding: 10px; border-bottom: 1px solid #ddd; margin-bottom: 15px; font-size: 19px !important; font-weight: 500 !important;}
    .help-blade > div .left h1 a{ display: inline-block; position: absolute; left: 10px; color: black;}
    .help-blade > div > div.left ul{ width: calc(100% - 20px); margin: 0 auto; border: 1px solid #ddd; border-radius: 0; background-color: white; margin-top: 20px; box-shadow: 0 0 10px 1px #cbcbcb;}
    .help-blade > div > div.left ul li a{ border-bottom: 1px solid #ddd; position: relative; padding: 15px 15px; border-radius: 0;}
    .help-blade > div > div.left ul li a::after{ content: '\f105'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; position: absolute; right: 15px; color: var(--main-color); font-size: 15px;}
    .help-blade > div > div.left ul li:last-child a{ border-bottom: none;}
    .help-blade > div > div.left ul li a.active{ background-color: white;}
    .help-blade > div .right{ display: none;}

    .my-account-container > div > div.right .descriptions .description .header{background-color: white; position: relative; width: 100%; text-align: center; padding: 10px; border-bottom: 1px solid #ddd; margin-bottom: 15px; font-size: 19px !important; font-weight: 500 !important; box-shadow: none; border-radius: 0;}
    .my-account-container > div > div.right .descriptions .description .header a{ display: inline-block; position: absolute; left: 10px; color: black;}
    .my-account-container > div > div.right .descriptions .description .body{ width: calc(100% - 20px); margin: 0 auto; box-shadow: none; border: 1px solid #ddd; border-radius: 3px; background-color: white;}
    .my-account-container > div > div.right .descriptions .description .body > div.active > div{ color: #333;}
    .my-account-container > div > div.right .descriptions .description .body > div > span:hover{ background-color: white;}

    /* basket */
    .my-basket-section > div{ position: relative;}
    .my-basket-section > div .basket-price{ margin: 0; position: absolute; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; top: 100px; padding: 10px 0; background-color: white;}
    .my-basket-section > div .basket-price > #order-summary{ display: none;}
    .my-basket-section > div .basket-price > button{ display: none;}
    .my-basket-section > div .basket-price > .contract{ margin-top: 0; width: calc(100% - 20px); margin: 0 auto;}

    .my-basket-section > h3 .basket-head{ display: inline-block;}
    .my-basket-section > div .payment-steps .steps-nav{ margin-bottom: 160px; background-color: white; padding: 10px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
    .my-basket-section > div .payment-steps .steps-nav > div{ width: calc(100% - 20px); margin: 0 auto;}
    .my-basket-section > div .payment-steps .steps-container > div{ box-shadow: none; border: none; background-color: white; }
    .my-basket-section > div .payment-steps .steps-container > div.address-container > div > div.addresses{ grid-template-columns: 100%;}
    .my-basket-section > div .payment-steps .steps-container > div.address-container > div > div .new-address{ height: 80px; background-color: white; box-shadow: inset 0 0 7px 1px #ccc;}
    .my-basket-section > div .basket-price > .contract > div > .checkbox label{ padding-left: 25px;}
    .my-basket-section > div .payment-steps .steps-container{ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-bottom: 40px;}

    .my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container{ box-shadow: none; border-radius: 0; border: none; background-color: transparent;}
    .my-basket-section > div .payment-steps.payment.animate .steps-container > div.payment-container{ background-color: transparent;}
    .my-basket-section > div .payment-steps .steps-container > div.payment-container .card-container .card-informations{ padding: 15px 10px;}
    .my-basket-section > div .payment-steps .steps-container > div.payment-container .contracts{ background-color: white; box-shadow: none; border-radius: 0; border-right: none; border-left: none;}

    /* basket-summary */
    .basket-summary{ background-color: #f5f5f5; padding-top: 0;}
    .basket-summary > div{ padding: 0;}
    .basket-summary > div h2{ background-color: white; position: relative; width: 100%; text-align: center; padding: 10px; font-size: 18px; font-weight: 500; border-bottom: 1px solid #ddd; margin-bottom: 15px;}
    .basket-summary > div .success-area{ background-color: white; box-shadow: none; border-radius: 0; border-top: none; border: 1px solid #ddd;}
    .basket-summary > div .success-area .icon{ font-size: 36px; width: 80px; height: 80px;}
    .basket-summary > div .success-area .buttons{ flex-direction: column;}
    .basket-summary > div .stores .store{ background-color: white; width: calc(100% - 20px); margin: 0 auto;}
    .basket-summary > div .stores .store .header{ background-color: white; flex-direction: column; align-items: baseline; gap: 3px;}
    .basket-summary > div .stores .store .header .seller{ width: 100%;}
    .basket-summary > div .stores .store .header .seller button{ margin-left: auto; padding: 5px 10px;}
    .basket-summary > div .stores .store .body .product{ position: relative; padding: 10px 10px 10px 80px; display: flex; flex-direction: column; align-items: baseline;}
    .basket-summary > div .stores .store .body .product .product-img{ position: absolute; left: 10px;}
    .basket-summary > div .stores .store .body .product .product-img .img{ box-shadow: none; border-radius: 3px; border: 1px solid #ddd;}
    .basket-summary > div .stores .store .body .product > div{ flex-direction: row; padding: 0;}
    .basket-summary > div .stores .store .body .product .product-name{ margin-bottom: 3px;}
    .basket-summary > div .stores .store .body .product .product-name p{ font-size: 12px;}
    .basket-summary > div .stores .store .body .product > div small{ font-weight: 500; font-size: 10px; color: #000;}
    .basket-summary > div .stores .store .body .product > div small::after{ content: ':'; margin-right: 3px;}
    .basket-summary > div .stores .store .body .product > div span{ font-size: 10px; color: #000;}
    .basket-summary > div .stores .store .body .product > div.size{ margin-bottom: 0px;}
    .basket-summary > div .stores .store .body .product > div.count{ margin-bottom: 1px;}
    .basket-summary > div .stores .store .body .product .price span{ font-size: 13px;}
    .basket-summary > div .other-infos{ grid-template-columns: 100%;}
    .basket-summary > div .other-infos > div{ width: calc(100% - 20px); background-color: white; margin: 0 auto;}
}