/* STORE PROFILE */
.store-profile-container{ padding: 20px 0 10px; background: #f5f5f5;}

.store-profile-container .profile-img-area{ width: 100%; padding: 0 10px; position: relative; z-index: 4;}
.store-profile-container .profile-img-area .profile-area{ position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; background-color: rebeccapurple; height: 275px; position: relative;}
.store-profile-container .profile-img-area .profile-area .profile-bg{ overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: black; display: flex; align-items: center; justify-content: center;}
.store-profile-container .profile-img-area .profile-area .profile-bg img{ width: 100%;}
.store-profile-container .profile-img-area .profile-area .user-buttons{ position: absolute; display: flex; align-items: flex-end; flex-direction: column; right: 0; top: 0; padding: 10px; gap: 7px;}
.store-profile-container .profile-img-area .profile-area .user-buttons > span{ width: 30px; height: 30px; font-size: 14px; border-radius: 3px; background-color: rgba(0, 0, 0, 0.5); color: #d9d9d9; border: 1px solid #222; display: none; align-items: center; justify-content: center;}
.store-profile-container .profile-img-area .profile-area .user-buttons > div{ }
.store-profile-container .profile-img-area .profile-area .user-buttons > div a{ cursor: pointer; transition: all .2s ease; border-radius: 3px; font-weight: 500; text-decoration: none; background: wheat; font-size: 11px; padding: 5px 10px; width: fit-content;}
.store-profile-container .profile-img-area .profile-area .user-buttons > div a.change-bg-btn{ color: #b5b5b5; background-color: #222; border: 2px solid #5b5b5b;}
.store-profile-container .profile-img-area .profile-area .user-buttons > div a.change-bg-btn:hover{ color: #eee; background-color: #3e3e3e; border-color: #b5b5b5;}
.store-profile-container .profile-img-area .profile-area .user-buttons > div a.edit-profile-btn{ color: #fff; background-color: #0052b5;}
.store-profile-container .profile-img-area .profile-area .user-buttons > div a.edit-profile-btn:hover{ color: #fff; background-color: #077ec8;}
.store-profile-container .profile-img-area .profile-area .user-buttons > div a i{ margin-right: 5px;}
.fa-location-dot:before, .fa-map-marker-alt:before{ display: inline-block; transform: translateX(-0.4px);}
.store-profile-container .profile-img-area .profile-area .profile-img{ width: 170px; height: 170px; outline: 2px solid white; box-shadow: 0 0 8px 1px black; display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); left: 20px;}
.store-profile-container .profile-img-area .profile-area .profile-img .img{ width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1;}
.store-profile-container .profile-img-area .profile-area .profile-img .img img{ width: 100%;}
.store-profile-container .profile-img-area .profile-area .profile-img .change-photo-btn{ transition: all .2s ease; z-index: 2; position: absolute; right: -7px; bottom: -7px; width: 33px; height: 33px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #b5b5b5; background-color: #222; border: 2px solid #5b5b5b;}
.store-profile-container .profile-img-area .profile-area .profile-img .change-photo-btn:hover{ color: #eee; background-color: #3e3e3e; border-color: #b5b5b5; cursor: pointer;}
.store-profile-container .profile-img-area .profile-area .profile-dtl{ width: 500px; height: 200; height: auto; position: absolute; left: 0; top: 60px; padding-left: 200px; color: white; display: flex; flex-direction: column;}
.store-profile-container .profile-img-area .profile-area .profile-dtl h3{ font-size: 17px; width: fit-content; padding-right: 30px;}
.store-profile-container .profile-img-area .profile-area .profile-dtl h3.trust{ position: relative; background-image: url(../assets/images/mavi-tik.png); background-size: 23px; background-repeat: no-repeat; background-position: 100% 2px;}
.store-profile-container .profile-img-area .profile-area .profile-dtl h3.trust::before{ transition: all .1s ease; content: 'Güvenilir Kullanıcı'; z-index: 5; position: absolute; background-color: rgba(8, 129, 199, 0.603); right: 10px; transform: translateX(50%) translateY(10px); top: -20px; font-size: 10px; color: #e0e0e0; font-weight: 400; opacity: 0; pointer-events: none; padding: 2px 7px; border-radius: 5px;}
.store-profile-container .profile-img-area .profile-area .profile-dtl h3.trust:hover::before{ transform: translateX(50%) translateY(0px); opacity: 1;}
.store-profile-container .profile-img-area .profile-area .profile-dtl .date{ position: relative; z-index: 2; width: fit-content; padding: 2px 7px; border-radius: 5px; display: flex; gap: 4px; align-items: center; font-size: 12px; margin-top: 5px; background: linear-gradient(90deg, #030200, rgba(58, 5, 5, 0.4));}
.store-profile-container .profile-img-area .profile-area .profile-dtl .year{ display: flex; align-items: center; font-weight: 700; font-size: 14px; margin-top: 10px;}
.store-profile-container .profile-img-area .profile-area .profile-dtl .year b{ display: inline-block;  margin-right: 7px;}
.store-profile-container .profile-img-area .profile-area .profile-dtl .phone{ color: white; text-decoration: none; font-size: 12px; margin-top: 5px; background-color: #3a3a3a; width: fit-content; padding: 3px 5px; display: flex; align-items: center; gap: 5px; border-radius: 5px; background: linear-gradient(45deg, #484848, #5e5e5e5e);}
.store-profile-container .profile-img-area .profile-area .profile-dtl .phone i{ width: 20px; height: 20px; border-radius: 50%; background-color: red; display: flex; align-items: center; justify-content: center;}
.store-profile-container .profile-img-area .profile-area .profile-dtl .location{ width: fit-content; display: flex; gap: 5px; color: white; text-decoration: none; font-size: 12px; margin-top: 5px; padding-left: 5px;}
.store-profile-container .profile-img-area .profile-area .profile-dtl .location i{ width: 20px; height: 20px; border-radius: 50%; background-color: red; display: flex; align-items: center; justify-content: center;}
.store-profile-container .profile-img-area .profile-area .profile-dtl .individual{ position: relative; z-index: 2; width: fit-content; padding: 2px 5px; border-radius: 5px; display: flex; gap: 4px; align-items: center; font-size: 12px; margin-top: 5px; background: linear-gradient(90deg, #b875037c, rgba(58, 5, 5, 0.181));}
.store-profile-container .profile-img-area .profile-area .profile-dtl .individual::before{ content: '\f183'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
.store-profile-container .profile-img-area .profile-area .profile-dtl .individual::after{ content: 'Bireysel Üye';}
.store-profile-container .profile-img-area .profile-area .profile-dtl .corporate{ position: relative; z-index: 2; width: fit-content; padding: 2px 5px; border-radius: 5px; display: flex; gap: 4px; align-items: center; font-size: 12px; margin-top: 5px; background: linear-gradient(90deg, #006d287c, rgba(58, 5, 5, 0.181));}
.store-profile-container .profile-img-area .profile-area .profile-dtl .corporate::before{ content: '\f2b5'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;}
.store-profile-container .profile-img-area .profile-area .profile-dtl .corporate::after{ content: 'Kurumsal Üye';}
.store-profile-container .profile-img-area .profile-area .profile-detail{ position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; background-color: rgba(0, 0, 0, .5);}
.store-profile-container .profile-img-area .profile-area .profile-detail{ display: flex; justify-content: space-between; padding: 10px 0 10px 210px;}
.store-profile-container .profile-img-area .profile-area .profile-detail .txt{ display: flex; flex-direction: column;}
.store-profile-container .profile-img-area .profile-area .profile-detail .txt h3{ color: white;}
.store-profile-container .profile-img-area .profile-area .profile-detail .txt > span{ color: #ffffff; font-size: 10px;}
.store-profile-container .profile-img-area .profile-area .profile-detail .txt > span > span{ color: #d1d1d1; font-size: 11px;}
.store-profile-container .profile-img-area .profile-area .profile-detail .social{ display: flex; align-items: center; gap: 10px; padding-right: 20px;}
.store-profile-container .profile-img-area .profile-area .profile-detail .social a{ cursor: pointer; font-size: 20px; width: 30px; height: 30px; color: white; display: flex; align-items: center; justify-content: center; border-radius: 5px; text-decoration: none;}
.store-profile-container .profile-img-area .profile-area .profile-detail .social a.wp{ background-color: rgb(32, 225, 32);}
.store-profile-container .profile-img-area .profile-area .profile-detail .social a.mail{ background-color: rgb(214, 146, 20);}
.store-profile-container .profile-img-area .profile-area .profile-detail .social a.twet{ background-color: rgb(11, 140, 209);}
.store-profile-container .profile-img-area .profile-area .profile-detail .social a.pint{ background-color: rgb(186, 0, 62);}
.store-profile-container .profile-img-area .profile-area .profile-detail .social a.insta{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}
.store-profile-container .profile-img-area .profile-area .profile-detail .social a.face{ background-color: rgb(71, 99, 234);}
.store-profile-container .profile-img-area .profile-area .profile-detail .social a.share{ background-color: transparent; color: #f5f5f5}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal{ opacity: 0; pointer-events: none; transition: all .3s ease; display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0, .7); backdrop-filter: blur(1px); z-index: 20;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal.active{ pointer-events: all; opacity: 1;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container{ opacity: 0; transform: translateY(50px); transition: all .25s; overflow: hidden; width: 90%; max-width: 500px; min-height: 30vh; background-color: white; box-shadow: 0 0 10px 1px #121212;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal.active .share-modal-container{ opacity: 1; transform: translateY(0px);}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .header{ box-shadow: 0 0 5px 1px #ccc; border-bottom: 2px solid #ccc; position: relative; padding: 10px;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .header h6{ font-size: 22px; font-weight: 600; width: 100%; text-align: center;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .header span{ transition: all .1s ease; cursor: pointer; position: absolute; right: 15px; top: 15px; font-size: 40px; height: 26px; line-height: 0.65;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .header span:hover{ color: #640000;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 20px 10px;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a{ display: block; text-decoration: none; cursor: pointer; transition: all .12s ease; display: flex; flex-direction: column; align-items: center; padding: 7px 0 5px; justify-content: center; color: white;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.facebook{ background-color: #023284; border: 2px solid #023284;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.facebook:hover{ background-color: white; color: #023284;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.twitter{ background-color: #49a8f1; border: 2px solid #49a8f1;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.twitter:hover{ background-color: white; color: #49a8f1;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.pinterest{ background-color: #8e0910; border: 2px solid #8e0910;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.pinterest:hover{ background-color: white; color: #8e0910;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.whatsapp{ background-color: #1f7202; border: 2px solid #1f7202;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.whatsapp:hover{ color: #1f7202; background-color: white;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.linkedin{ background-color: #0a66c2; border: 2px solid #0a66c2;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.linkedin:hover{ color: #0a66c2; background-color: white;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.mail{ background-color: #db8222; border: 2px solid #db8222;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a.mail:hover{ color: #db8222; background-color: white;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a span{ font-size: 16px;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a i{ font-size: 23px;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .share-buttons > a:last-child i{ font-size: 26px;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .copy-area{ position: relative; padding: 0 10px 20px; transition: all .2s ease; display: flex; gap: 10px; /* box-shadow: 0 0 5px 1px #ccc; border-top: 2px solid #ccc;*/}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .copy-area.active{ margin-top: 17px;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .copy-area::before{ content: 'Kopyalandı !'; opacity: 0; position: absolute; display: inline-block; left: 50%; transform: translateX(-50%); color: rgb(0, 16, 136); top: 0px; font-weight: 600; transition: all .2s ease-in-out;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .copy-area.active::before{ top: -27px; opacity: 1;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .copy-area input{ font-size: 14px; font-weight: 500; width: 100%; height: 40px; padding: 0 7px; box-shadow: none; outline: none; border: 1px solid #999;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .copy-area button{ width: 240px; background-color: white; color: #2d2d2d; border: 1px solid #999; transition: all .12s ease;}
.store-profile-container .profile-img-area .profile-area .profile-detail .share-modal .share-modal-container .copy-area button:hover{ box-shadow: 0 4px 8px 1px #888; background-color: white; color: black; border: 1px solid black; cursor: pointer;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 20;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal{ opacity: 0; pointer-events: none; transition: all .3s ease; display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0, .7); backdrop-filter: blur(1px); z-index: 20;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal.active{ pointer-events: all; opacity: 1;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container{ opacity: 0; transform: translateY(50px); transition: all .25s; overflow: hidden; width: 90%; max-width: 500px;border-radius: 5px; min-height: 30vh; background-color: white; box-shadow: 0 0 10px 1px #121212;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal.active .update-photo-modal-container{ opacity: 1; transform: translateY(0px);}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .header{ position: relative;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .header h4{ width: 100%; text-align: center; font-size: 20px; padding: 10px 0; font-weight: 600; border-bottom: 1px solid #999;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .header span{ cursor: pointer; position: absolute; font-size: 35px; font-weight: 500; right: 10px; top: 50%; transform: translateY(-50%);}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .header span:hover{ color: #570000;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container > span{ display: inline-block; padding: 8px 20px 0; font-size: 15px; color: black; text-align: center; line-height: 1.2;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container > span b{ font-weight: 600;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container > span span{ text-decoration: underline; color: rgb(82, 0, 0);}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area{ height: 400px; padding: 20px;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > input{position: absolute; opacity: 0; width: calc(100% - 40px); height: 360px;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label{ padding-bottom: 45px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 4px dashed #166fdc; width: 100%; height: 100%;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label.full{ padding-bottom: 15px; border-color: #05bd05;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .bg-img-area{ margin-top: 10px; margin-bottom: auto; width: calc(100% - 20px); height: 103px; background-color: #ebebeb; border: 1px solid #bebebe; display: flex; align-items: center; justify-content: center;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .bg-img-area span{ font-weight: 700; font-size: 25px; letter-spacing: 1px; color: #b6b6b6;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .bg-img-area img{ width: 0px;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .bg-img-area img.active{ width: 100%; height: 100%;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .pp-area{ position: relative; margin-top: 10px; margin-bottom: auto; width: calc(100% - 20px); height: 103px; background-color: #ebebeb; border: 1px solid #bebebe; display: flex; align-items: center; justify-content: center;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .pp-area span{ font-weight: 700; font-size: 25px; letter-spacing: 1px; color: #b6b6b6;}
/* .store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .pp-area img{ width: 80px; height: 80px; position: absolute; left: 20px; border: 1px solid black;} */
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .pp-area img{ width: 0; height: 0;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .pp-area img.active{ width: 80px; height: 80px; position: absolute; left: 20px; border: 1px solid black;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label i{ font-size: 80px; color: #0883e9; margin-bottom: 10px;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label.full i{ color: #05bd05;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label > b{ font-size: 17px; color: #001a3b;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label > span{ font-weight: 600; color: #777; font-size: 14px; margin-bottom: 10px;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label.full > span{ display: none;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label > a{ display: flex; align-items: center; justify-content: center; height: 30px; width: 160px; font-size: 14px; background-color: #2382e1; position: relative; transition: all .2s ease; border: 2px solid #2382e1; border-radius: 3px; color: white; font-weight: 500;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label > a:hover{ cursor: pointer; background-color: white; color: #2382e1;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label.full > a{ display: none;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .buttons{ display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; margin-top: 10px;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label.full .buttons{ display: flex;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .buttons b{ font-weight: 600; color: #777; font-size: 14px;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .buttons a{ font-size: 12px; font-weight: 600; color: #05bd05;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .buttons a:hover{ text-decoration: underline;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .buttons button{ transition: all .2s ease; font-weight: 500; position: relative; z-index: 3; font-size: 14px; padding: 6px 15px; border-radius: 3px; background-color: #05bd05; color: white; border: 2px solid #05bd05;}
.store-profile-container .profile-img-area .profile-area .update-photo-modal .update-photo-modal-container .photo-area > label .buttons button:hover{ cursor: pointer; background-color: white; color: #03a303;}



.store-profile-container .user-informations{ padding: 0 10px;}
.store-profile-container .user-informations > div{ width: calc(100% - 20px); max-width: 1180px; margin: 0 auto; margin-top: 15px; display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); position: relative; z-index: 1;}
.store-profile-container .user-informations > div > div{ position: relative; overflow: hidden; height: 100px; border-radius: 6px; background-color: white; box-shadow: 0 0 5px 1px #d6d6d6;}
.store-profile-container .user-informations > div > div > span{ position: absolute; color: #a1b9cf; font-size: 60px; left: 5px; top: 5px; z-index: 2; animation: flameMovement 2s ease-in-out infinite;}
.store-profile-container .user-informations > div > div > div{ position: relative; z-index: 3; height: 85px; width: 65%; padding: 5px 10px 0 0; margin-left: auto; display: flex; justify-content: space-between; flex-direction: column; text-align: end;}
.store-profile-container .user-informations > div > div::before{ content: '\e3a5'; font-family: 'Material Icons'; position: absolute; z-index: 1; font-size: 80px; color: #dcdcea; bottom: -20px; right: -20px;}
.store-profile-container .user-informations > div > div:hover::before{ animation: strange 3s cubic-bezier(0.58, 0.1, 0.31, 0.83) infinite;}
/* .store-profile-container .user-informations > div > div::after{ content: '\e3ea\e3ea\e3ea \A \e3ea\e3ea\e3ea \A \e3ea\e3ea\e3ea'; white-space: pre; font-family: 'Material Icons'; position: absolute; z-index: 1; font-size: 40px; color: #000081; bottom: -20px; left: -20px; transform: rotate(20deg); opacity: .04; z-index: 1;} */
.store-profile-container .user-informations > div > div::after{ content: ''; display: inline-block; position: absolute; z-index: 1; top: -10px; left: -10px; width: 20px; height: 20px; background-color: rgb(61, 120, 161); transform: rotate(45deg); z-index: 1;}
.store-profile-container .user-informations > div > div > div > span{ font-weight: 600; font-size: 15px; line-height: 1.3; color: #2b3242;}
.store-profile-container .user-informations > div > div > div > b{ font-size: 18px; color: #001a3b;}

@keyframes strange{
    0%{ transform: rotate(0) translate(0) scale(1);}
    25%{ transform: rotate(90deg) scale(1.5);}
    50%{ transform: translate(-2px) rotate(1.1) rotate(0deg);}
    75%{ transform: rotate(-10deg) scale( .95);}
    100%{ transform: rotate(0) translate(0) scale(1);}
}

/* .store-profile-container .user-informations > div > div{ background-color: #2dc021} */
/* .store-profile-container .user-informations > div > div::before{ color: #ebebeb;}
.store-profile-container .user-informations > div > div::after{ background-color: #ebebeb;}
.store-profile-container .user-informations > div > div > span{ color: #ebebeb;}
.store-profile-container .user-informations > div > div > div > span{ color: #ebebeb;}
.store-profile-container .user-informations > div > div > div > b{ color: #ebebeb;} */

.store-profile-container .user-informations > div > div:nth-child(1){ background: linear-gradient(20deg, #b9ffaf, #18a30b)}
.store-profile-container .user-informations > div > div:nth-child(1)::before{ color: #0c8801;}
.store-profile-container .user-informations > div > div:nth-child(1)::after{ background-color: #096b00;}
.store-profile-container .user-informations > div > div:nth-child(1) > span{ animation-delay: .2s; color: #129106;}
.store-profile-container .user-informations > div > div:nth-child(1) > div > span{ color: #f8fff7;}
.store-profile-container .user-informations > div > div:nth-child(1) > div > b{ color: #f4fff4;}

.store-profile-container .user-informations > div > div:nth-child(2){ background: linear-gradient(20deg, #bac8fc, #124fb8)}
.store-profile-container .user-informations > div > div:nth-child(2)::before{ color: #012388;}
.store-profile-container .user-informations > div > div:nth-child(2)::after{ background-color: #001d6b;}
.store-profile-container .user-informations > div > div:nth-child(2) > span{ animation-delay: .6s; color: #062291;}
.store-profile-container .user-informations > div > div:nth-child(2) > div > span{ color: #f7fbff;}
.store-profile-container .user-informations > div > div:nth-child(2) > div > b{ color: #f4f8ff;}

.store-profile-container .user-informations > div > div:nth-child(3){ background: linear-gradient(20deg, #fcefba, #a37707)}
.store-profile-container .user-informations > div > div:nth-child(3)::before{ color: #885d01;}
.store-profile-container .user-informations > div > div:nth-child(3)::after{ background-color: #6b4d00;}
.store-profile-container .user-informations > div > div:nth-child(3) > span{ animation-delay: 1s; color: #916506;}
.store-profile-container .user-informations > div > div:nth-child(3) > div > span{ color: #fffcf7;}
.store-profile-container .user-informations > div > div:nth-child(3) > div > b{ color: #fffdf4;}

.store-profile-container .user-informations > div > div:nth-child(4){ background: linear-gradient(20deg, #e8bafc, #8612b8)}
.store-profile-container .user-informations > div > div:nth-child(4)::before{ color: #760188;}
.store-profile-container .user-informations > div > div:nth-child(4)::after{ background-color: #5b006b;}
.store-profile-container .user-informations > div > div:nth-child(4) > span{ animation-delay: 1.4s; color: #780691;}
.store-profile-container .user-informations > div > div:nth-child(4) > div > span{ color: #fef7ff;}
.store-profile-container .user-informations > div > div:nth-child(4) > div > b{ color: #fef4ff;}

.store-profile-container .user-informations > div > div:nth-child(5){ background: linear-gradient(20deg, #fcbacd, #b81241)}
.store-profile-container .user-informations > div > div:nth-child(5)::before{ color: #880123;}
.store-profile-container .user-informations > div > div:nth-child(5)::after{ background-color: #6b0019;}
.store-profile-container .user-informations > div > div:nth-child(5) > span{ animation-delay: 1.8s; color: #910630;}
.store-profile-container .user-informations > div > div:nth-child(5) > div > span{ color: #fff7fa;}
.store-profile-container .user-informations > div > div:nth-child(5) > div > b{ color: #fff4f6;}



@keyframes flameMovement {
    50% { transform: scale(0.96,1.0) translate(0, 3px) rotate(-2deg);}
}


/* MESSAGES AREA */
.messages-container{ }
.messages-container > div{ display: grid; grid-template-columns: 350px 1fr; min-height: calc(100vh - 62px); width: 100%; max-width: 1200px; padding: 0 10px; margin: 0 auto;}
.messages-container > div > div{ height: 100%;}
.messages-container > div > .left-area{ border-left: 1px solid #e8ecef; border-right: 1px solid #e8ecef;}
.messages-container > div > .left-area .top{ }
.messages-container > div > .left-area .top .search-area{ display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; background-color: #f5f7f9; border-bottom: 1px solid #e8ecef;}
.messages-container > div > .left-area .top .search-area > div{ display: flex; align-items: center; width: calc(100% - 40px); margin: 0 auto; height: 37px; background-color: white; border: 1px solid #e8ecef;}
.messages-container > div > .left-area .top .search-area > div span{ display: inline-block;  margin: 0 10px;}
.messages-container > div > .left-area .top .search-area > div input{ width: 100%; height: 100%; border: none; font-weight: 500;}
.messages-container > div > .left-area .top .search-area > div input:focus{ outline: none;}
.messages-container > div > .left-area .top .nav{ height: 44px; padding: 7px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px;}
.messages-container > div > .left-area .top .nav > span{ border-radius: 2px; transition: all .1s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 7px 0; color: #555; font-size: 11px; font-weight: 600; }
.messages-container > div > .left-area .top .nav > span:hover{ color: black;}
.messages-container > div > .left-area .top .nav > span.active{ color: white; background-color: #f7931e;}
.messages-container > div > .left-area .top .nav > span small{ transition: all .15s; width: 17px; height: 17px; background-color: #f7931e; color: white; display: none; align-items: center; justify-content: center; border-radius: 50%; margin-left: 3px;}
.messages-container > div > .left-area .top .nav > span.unread-msg small{ display: flex;}
.messages-container > div > .left-area .top .nav > span.unread-msg.active small{ background-color: white; color: #f7931e;}
.messages-container > div > .left-area .middle{ background-color: #f5f7f9; height: calc(100vh - 226px); overflow: auto;}
.messages-container > div > .left-area .middle::-webkit-scrollbar{ background-color: #f5f7f9; width: 5px;}
.messages-container > div > .left-area .middle::-webkit-scrollbar-thumb{ background-color: #dee5eb;}
.messages-container > div > .left-area .middle .user{ text-decoration: none; color: black; transition: all .15s; position: relative; cursor: pointer; background-color: white; padding: 13px 13px 13px 30px; display: flex; border-bottom: 1px solid #e8ecef; gap: 10px;}
.messages-container > div > .left-area .middle .user.unread::before{ content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #f7931e; position: absolute; top: 50%; left: 12px; transform: translateY(-50%);}
.messages-container > div > .left-area .middle .user::after{ content: ''; display: inline-block; width: 0; height: 100%; position: absolute; right: 0; top: 0; transition: all .15s ease; background-color: #f7931e;}
.messages-container > div > .left-area .middle .user.active{ background-color: #f5f7f9;}
.messages-container > div > .left-area .middle .user.active::after{ width: 3px;}
.messages-container > div > .left-area .middle .user .img-area{ }
.messages-container > div > .left-area .middle .user .img-area > div{ width: 45px; height: 45px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.messages-container > div > .left-area .middle .user .img-area > div img{ width: 100%;}
.messages-container > div > .left-area .middle .user .detail{ display: flex; flex-direction: column; justify-content: center; position: relative; width: 100%;}
.messages-container > div > .left-area .middle .user .detail .name{ font-size: 13px; font-weight: 600;}
.messages-container > div > .left-area .middle .user .detail .last-msg{ position: relative; font-size: 12px; font-weight: 500; word-break: break-all; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.last-msg._1, .last-msg._2, .last-msg._3{ padding-left: 20px;}
.messages-container > div > .left-area .middle .user .detail .last-msg._1::before,
.messages-container > div > .left-area .middle .user .detail .last-msg._2::before,
.messages-container > div > .left-area .middle .user .detail .last-msg._3::before{ content: ''; display: inline-block; position: absolute; top: 3px; left: 5px; transform: rotate(45deg); width: 3px; height: 9px; border-bottom: 2px solid #999; border-right: 2px solid #999; }
.messages-container > div > .left-area .middle .user .detail .last-msg._2::after,
.messages-container > div > .left-area .middle .user .detail .last-msg._3::after{ content: ''; display: inline-block; position: absolute; top: 2.5px; left: 9px; transform: rotate(45deg); width: 2px; height: 9px; border-bottom: 2px solid #999; border-right: 2px solid #999; }
.messages-container > div > .left-area .middle .user .detail .last-msg._3::before,
.messages-container > div > .left-area .middle .user .detail .last-msg._3::after{ border-color: #00a208;}
.messages-container > div > .left-area .middle .user .detail .date{ position: absolute; font-weight: 600; color: #aaa; font-size: 9px; right: 0; top: 0;}
.messages-container > div > .left-area .middle .empty-area{ height: 100%; width: 100%; display: flex; gap: 15px; align-items: center; justify-content: center; flex-direction: column;}
.messages-container > div > .left-area .middle .empty-area .icon{ font-size: 65px; color: #ccc;}
.messages-container > div > .left-area .middle .empty-area p{ text-align: center; font-size: 14px; font-weight: 500; color: #999; }
.messages-container > div > .left-area .bottom{ height: 50px; display: flex; align-items: center; justify-content: center; background-color: #f5f7f9;}
.messages-container > div > .left-area .bottom span{ display: none; cursor: pointer; font-weight: 600; font-size: 12px;}
.messages-container > div > .left-area .bottom span.active{ display: inline-block;}
.messages-container > div > .left-area .bottom span:hover{ text-decoration: underline;}
.messages-container > div > .right-area{ border-right: 1px solid #e8ecef;}
.messages-container > div > .right-area .head{ position: relative; border-bottom: 1px solid #e8ecef; padding: 15px 20px; box-shadow: inset 0 0 5px 0 #e8ecef; display: flex; align-items: center; justify-content: space-between;}
.messages-container > div > .right-area .head .user{ display: flex; align-items: center; gap: 10px;}
.messages-container > div > .right-area .head .user .go-back{ left: 10px; display: none; color: #333; position: absolute; font-size: 20px;}
.messages-container > div > .right-area .head .user .img-area{ width: 50px; min-width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.messages-container > div > .right-area .head .user .img-area img{ width: 100%;}
.messages-container > div > .right-area .head .user .detail{ display: flex; flex-direction: column;}
.messages-container > div > .right-area .head .user .detail .name{ text-decoration: none; font-size: 15px; color: #222; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.messages-container > div > .right-area .head .user .detail .name:hover{ text-decoration: underline;}
.messages-container > div > .right-area .head .user .detail .last-seen{ font-size: 12px; font-weight: 500; color: #999;}
.messages-container > div > .right-area .head .more-option{ position: relative;}
.messages-container > div > .right-area .head .more-option .more-option-btn{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; background-color: transparent; border: none; transition: all .2s; font-size: 18px; color: #777;}
.messages-container > div > .right-area .head .more-option.active .more-option-btn{ transform: rotate(-145deg);}
.messages-container > div > .right-area .head .more-option .more-option-btn:hover{ color: black;}
.messages-container > div > .right-area .head .more-option .more-option-btn:active{ background-color: rgba(0, 0, 0, .1);}
.messages-container > div > .right-area .head .more-option .more-option-area{ transform-origin: top right; transition: all .3s ease; transform: scale(.5); opacity: 0; pointer-events: none; position: absolute; right: calc(100% - 8px); z-index: 2; top: calc(100% - 5px); width: 170px; display: flex; flex-direction: column; padding: 10px; background-color: white; border-radius: 3px; box-shadow: 0 0 5px 0px rgba(0, 0, 0, .2);}
.messages-container > div > .right-area .head .more-option.active .more-option-area{ transform: scale(1); opacity: 1; pointer-events: all;}
.messages-container > div > .right-area .head .more-option .more-option-area a{ transition: all .25s; color: rgb(94, 106, 116); cursor: pointer; font-size: 13px; display: inline-block; width: 100%; padding: 6px 5px; border-bottom: 1px solid #e8ecef; border-radius: 3px;}
.messages-container > div > .right-area .head .more-option .more-option-area a:hover{ background-color: #e8ecef; padding-left: 13px;}
.messages-container > div > .right-area .head .more-option .more-option-area a:last-child{ border-bottom: none;}
.messages-container > div > .right-area .head .more-option .more-option-area a span{ display: inline-block; width: 10px; text-align: center; margin-right: 15px;}
.messages-container > div > .right-area .body{ display: flex; flex-direction: column;}
.messages-container > div > .right-area .body .messages{ display: flex; flex-direction: column; gap: 20px; height: calc(100vh - 250px); overflow-y: auto; padding: 20px 15px}
.messages-container > div > .right-area .body .messages .see-more{ font-size: 12px; font-weight: 600; display: none; width: fit-content; cursor: pointer; margin: 0 auto 40px;}
.messages-container > div > .right-area .body .messages .see-more.active{ display: block;}
.messages-container > div > .right-area .body .messages::-webkit-scrollbar{ background-color: #f5f7f9; width: 7px;}
.messages-container > div > .right-area .body .messages::-webkit-scrollbar-thumb{ background-color: #dee5eb;}
.messages-container > div > .right-area .body .messages .timeline{ position: relative; text-align: center; font-weight: 500; font-size: 13px; text-align: center; color: #99a7af;}
.messages-container > div > .right-area .body .messages .timeline::before{ content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 1px; background-color: #99a7af;}
.messages-container > div > .right-area .body .messages .timeline span{ background-color: white; padding: 0 10px; position: relative;}
.messages-container > div > .right-area .body .messages .msg-box{ display: flex; flex-direction: column; gap: 3px;}
.messages-container > div > .right-area .body .messages .msg-box.to{ }
.messages-container > div > .right-area .body .messages .msg-box.me{ text-align: end;}
.messages-container > div > .right-area .body .messages .msg-box .msg{ border-radius: 7px; padding: 7px 17px; max-width: 70%; width: fit-content; font-size: 12px; font-weight: 500; line-height: 1.3;}
.messages-container > div > .right-area .body .messages .msg-box.to .msg{ border-bottom-left-radius: 0; background-color: #e3e9ec; }
.messages-container > div > .right-area .body .messages .msg-box.to + .msg-box.me{ margin-top: 10px;}
.messages-container > div > .right-area .body .messages .msg-box.me .msg{ text-align: left; border-bottom-right-radius: 0; background-color: #a3e0e180; margin-left: auto;}
.messages-container > div > .right-area .body .messages .msg-box.me + .msg-box.to{ margin-top: 10px;}
.messages-container > div > .right-area .body .messages .msg-box .time{ position: relative; font-weight: 500; font-size: 9.5px; color: #84979e;}
.messages-container > div > .right-area .body .messages .msg-box.me .time{ padding-right: 20px;}
.messages-container > div > .right-area .body .messages .msg-box.me._1 .time::before,
.messages-container > div > .right-area .body .messages .msg-box.me._2 .time::before,
.messages-container > div > .right-area .body .messages .msg-box.me._3 .time::before{ content: ''; display: inline-block; position: absolute; top: 0px; right: 5px; transform: rotate(45deg); width: 3px; height: 9px; border-bottom: 2px solid #999; border-right: 2px solid #999; }
.messages-container > div > .right-area .body .messages .msg-box.me._2 .time::after,
.messages-container > div > .right-area .body .messages .msg-box.me._3 .time::after{ content: ''; display: inline-block; position: absolute; top: .5px; right: 9px; transform: rotate(45deg); width: 2px; height: 9px; border-bottom: 2px solid #999; border-right: 2px solid #999; }
.messages-container > div > .right-area .body .messages .msg-box.me._3 .time::before,
.messages-container > div > .right-area .body .messages .msg-box.me._3 .time::after{ border-color: #00a208;}
.messages-container > div > .right-area .body .send-msg-area{ position: relative; height: 107px; display: flex; align-items: center; gap: 15px; padding: 15px; width: 100%; border-top: 1px solid #e8ecef;}
.messages-container > div > .right-area .body .send-msg-area .go-bottom{ cursor: pointer; position: absolute; right: 25px; top: -60px; width: 40px; height: 40px; border-radius: 50%; border: none; background-color: white; box-shadow: 0 0 4px 0 rgba(0, 0, 0, .4); display: none; align-items: center; justify-content: center;}
.messages-container > div > .right-area .body .send-msg-area .go-bottom.active{ display: flex;}
.messages-container > div > .right-area .body .send-msg-area .input-area{ width: 100%; height: 100%;}
.messages-container > div > .right-area .body .send-msg-area .input-area textarea{ transition: all .2s ease; font-family: 'Poppins', sans-serif; height: 100%; resize: none; border-radius: 2px; border: none; width: 100%; background-color: white;  padding: 7px; height: 70px;}
.messages-container > div > .right-area .body .send-msg-area .input-area textarea:focus{ outline: none; box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);}
.messages-container > div > .right-area .body .send-msg-area .send-msg{ transition: all .2s ease; box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2); overflow: hidden; cursor: pointer; background-color: #26c626; border: none; color: white; font-size: 15px; display: inline-block; min-width: 40px; height: 40px; border-radius: 50%; padding: 2px 2px 0 0 ;}
.messages-container > div > .right-area .body .send-msg-area .send-msg:active{ transform: scale(.94);}
.messages-container > div > .right-area .body .send-msg-area .send-msg:hover i{ animation: flight .7s ease 1;}
.messages-container > div > .right-area .body .send-msg-area .writing{ position: absolute; left: 20px; top: -25px; font-weight: 500; font-size: 12px;}
/* .messages-container > div > .right-area .body .send-msg-area .writing */


@media screen and (max-width: 869px) {
    .messages-container > div{ padding: 0; grid-template-columns: 1fr;}
    .messages-container > div > .right-area{ background-color: white; position: fixed; z-index: 2; top: 61px; left: 0; transform: translateX(100%); width: 100%; height: calc(100% - 62px);}
    .messages-container > div > div{ transition: all .2s ease;}
    .messages-container.show-message > div > .right-area{ transform: translateX(0%);}
    .messages-container.show-message > div > .left-area{transform: translateX(-100%);}
    .messages-container > div > .left-area .middle .user.active{ background-color: white;}
    .messages-container > div > .left-area .middle .user.active::after{ display: none;}
    .messages-container > div > .right-area .head{ padding: 15px 10px 15px 33px;}
    .messages-container > div > .right-area .head .user .go-back{ display: inline-block;}

}


@keyframes flight{
    0%{ transform: translate(0,0);}
    20%{ transform: translate(-10px, 10px);}
    50%{ transform: translate(21px, -21px) rotate(-10deg);}
    51%{ transform: translate(-21px, 21px) rotate(-10deg);}
    100%{ transform: translate(0px, 0px) rotate(0deg);}
}



/* Notification Area */
.navbar + .notification-container{ overflow: hidden; padding-top: 62px;}
.navbar + .notification-container > div{ display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 62px); width: 100%; max-width: 1200px; padding: 0 10px; margin: 0 auto;}
.navbar + .notification-container > div > div{ height: 100%;}
.navbar + .notification-container > div .left-area{ position: relative; box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1); z-index: 2;}
.navbar + .notification-container > div .left-area::before{ content: ''; display: inline-block; width: 50px; height: 100%; position: absolute; left: -50px; background-color: white;}
.navbar + .notification-container > div .left-area > div{ display: flex; flex-direction: column; gap: 7px; padding-top: 30px;}
.navbar + .notification-container > div .left-area > div a{ position: relative; display: flex; align-items: center; color: #a8b0ba; text-decoration: none; height: 36px;}
.navbar + .notification-container > div .left-area > div a.active{ }
.navbar + .notification-container > div .left-area > div a.active::after{ content: ''; display: inline-block; height: 100%; width: 3px; background-color: #f7992a; z-index: 2; position: absolute; right: 0; top: 0; border-radius: 2px 0 0 2px;}
.navbar + .notification-container > div .left-area > div a.active .icon{ color: #f7992a;}
.navbar + .notification-container > div .left-area > div a.active .txt{ color: #000;}
.navbar + .notification-container > div .left-area > div a .icon{ font-size: 16px; display: inline-block; margin-right: 15px; width: 20px; text-align: center;}
.navbar + .notification-container > div .left-area > div a .icon.bell{ font-size: 18px;}
.navbar + .notification-container > div .left-area > div a .txt{  font-weight: 500; font-size: 14px; transition: all .15s ease;}
.navbar + .notification-container > div .left-area > div a:hover .txt{ color: black;}
.navbar + .notification-container > div .left-area > span{ display: inline-block; width: 100%; max-width: calc(100% - 15px); border-top: 1px solid #d0d8e0; font-size: 12px; font-weight: 500; color: #a8b0ba; margin-top: 30px; padding-top: 5px;}
.navbar + .notification-container > div .left-area > span a{ color: #a8b0ba; text-decoration: none;}
.navbar + .notification-container > div .left-area > span a span{ transition: all .2s ease;}
.navbar + .notification-container > div .left-area > span a:hover .o{ color: rgba(247, 151, 42, 0.8);}
.navbar + .notification-container > div .left-area > span a:hover .b{ color: rgba(68, 202, 232, 0.8);}
.navbar + .notification-container > div .right-area{ position: relative; padding: 30px 10px 30px 40px; background-color: #f1f3f5;}
.navbar + .notification-container > div .right-area::after{ content: ''; display: inline-block; height: 100%; width: 100vw; position: absolute; top: 0; left: 500px; z-index: -1; background-color: #f1f3f5;}
.navbar + .notification-container > div .right-area > .head{ margin-bottom: 15px;}
.navbar + .notification-container > div .right-area > .head .h{ margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; font-weight: 400; font-size: 32px; color: #363d42;}
.navbar + .notification-container > div .right-area > .head .h h1{ font-weight: 400; font-size: 32px; color: #363d42;}
.navbar + .notification-container > div .right-area > .head .h span{ display: none; cursor: pointer; font-size: 12px; color: #f7992a; font-weight: 600;}
.navbar + .notification-container > div .right-area > .head .h span.active{ display: inline-block;}
.navbar + .notification-container > div .right-area > .head .h span:hover{ text-decoration: underline; color: #ee8c1d;}
.navbar + .notification-container > div .right-area.empty-area > .head .control{ display: none;}
.navbar + .notification-container > div .right-area > .head .control .user-control{ display: flex; justify-content: space-between; align-items: center;}
.navbar + .notification-container > div .right-area > .head .control .user-control > div{ user-select: none; display: flex; gap: 15px; font-size: 13px; font-weight: 600;}
.navbar + .notification-container > div .right-area > .head .control .user-control > div:first-child{ display: flex; align-items: flex-end; gap: 3px;}
.navbar + .notification-container > div .right-area > .head .control .user-control > div small{ font-weight: 400;}
.navbar + .notification-container > div .right-area > .head .control .user-control > div span:hover{ cursor: pointer; text-decoration: underline;}
.navbar + .notification-container > div .right-area > .head .control .user-control > div span.delete{ color: #ff0000;}
.navbar + .notification-container > div .right-area:not(.select) > .head .control .user-control > div span:not(.select):not(.select-all):not(small > span){ display: none;}
.navbar + .notification-container > div .right-area.select > .head .control .user-control > div span.select{ display: none;}
.navbar + .notification-container > div .right-area > .body{ display: flex; align-items: center; flex-direction: column; gap: 25px;}
.navbar + .notification-container > div .right-area > .body .notification{ overflow: hidden; position: relative; z-index: 2; transition: all .2s ease; display: flex; align-items: center; min-height: 100px; text-decoration: none; width: 100%; background-color: white; position: relative; padding: 15px 20px 15px 50px; border-radius: 3px; border: 1px solid #eee;}
.navbar + .notification-container > div .right-area:not(.select) > .body .notification:hover{ transform: translateY(-2px); width: calc(100% + 10px); box-shadow: none; box-shadow: 0 17px 15px -18px rgba(0, 0, 0, .5); padding: 15px 25px 15px 55px;}
.navbar + .notification-container > div .right-area > .body .notification.unread::before{ transition: all .2s ease; content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: rgb(79, 220, 57); position: absolute; left: 23px; top: 50%; transform: translateY(-50%);}
.navbar + .notification-container > div .right-area:not(.select) > .body .notification.unread:hover::before{ left: 28px; transform: translateY(calc(-50% - 10px));}
.navbar + .notification-container > div .right-area > .body .notification .open-delete-notification-modal{ opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 3; position: absolute; top: 50%; left: 22px; transform: translateY(-50%); color: #c44a4a;}
.navbar + .notification-container > div .right-area:not(.select) > .body .notification .open-delete-notification-modal:hover{ color: #b22525; animation: shake-trash normal 1s 1;}
.navbar + .notification-container > div .right-area:not(.select) > .body .notification.unread .open-delete-notification-modal:hover{ animation: shake-trash-unread normal 1s 1;}
.navbar + .notification-container > div .right-area:not(.select) > .body .notification.unread:hover .open-delete-notification-modal{ transform: translateY(-2px);}
.navbar + .notification-container > div .right-area:not(.select) > .body .notification:hover .open-delete-notification-modal{ left: 26px; opacity: 1; pointer-events: all;}
.navbar + .notification-container > div .right-area > .body .notification::after{ opacity: 0; transition: all .2s ease; content: ''; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; width: 15px; height: 15px; border: 1px solid #7b7b7b; border-radius: 2px; position: absolute; left: 19.5px; top: 50%; transform: translateY(-50%);}
.navbar + .notification-container > div .right-area.select > .body .notification.unread::before{ transform: translateY(calc(-50% - 13px));}
.navbar + .notification-container > div .right-area.select > .body .notification.unread::after{ transform: translateY(calc(-50% + 9px));}
.navbar + .notification-container > div .right-area.select > .body .notification::after{ opacity: 1;}
.navbar + .notification-container > div .right-area.select > .body .notification.selected{ box-shadow: inset 0 0 5px 0 #adadad81;}
.navbar + .notification-container > div .right-area > .body .notification.selected::after{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;  background-color: #f7992a; border-color: #f7992a;}
.navbar + .notification-container > div .right-area > .body .notification .img-area{ position: relative; display: flex; align-items: center; justify-content: center; margin-right: 20px;}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div{ border-radius: 50%; overflow: hidden;}
.navbar + .notification-container > div .right-area.select > .body .notification .img-area > div::before{ transition: all .2s ease; z-index: 2; border-radius: 12px 12px 0 0; padding: 3px 0 2px; width: calc(100%); text-align: center; font-size: 10px; font-weight: 600; content: 'seç'; position: absolute; left: 50%; bottom: 0; opacity: 0; transform: translateX(-50%) translateY(50px); background-color: rgba(0, 0, 0, 0.9); color: white; display: flex; align-items: center; justify-content: center;}
.navbar + .notification-container > div .right-area.select > .body .notification.selected .img-area > div::before{ content: 'kaldır';}
.navbar + .notification-container > div .right-area > .body .notification:hover .img-area > div::before{ bottom: 0; opacity: 1; transform: translateX(-50%) translateY(24px);}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div .logo{ width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div .logo.cargo{ background-color: #61ce51; font-size: 18px;}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div .logo.cargo i{ color: white;}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div .logo.get-payment{ background-color: #c4cf28; font-size: 22px;}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div .logo.get-payment i{ color: white; display: inline-block; transform: translate(1px, -1px);}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div .logo.doping-success{ background-color: #00a208; font-size: 22px;}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div .logo.doping-success i{ color: white; transform: translate(-1px, 1px);}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div .logo.doping-danger{ background-color: #a20000; font-size: 22px;}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div .logo.doping-danger i{ color: white; transform: rotate(180deg) translate(-1px, 1px);}
.navbar + .notification-container > div .right-area > .body .notification .img-area > div img{ width: 100%;}
.navbar + .notification-container > div .right-area > .body .notification .detail{ width: 100%;}
.navbar + .notification-container > div .right-area > .body .notification .detail .head{ margin-bottom: 1px; display: flex; align-items: baseline; justify-content: space-between;}
.navbar + .notification-container > div .right-area > .body .notification .detail .head b{ color: black; font-weight: 500; font-size: 15px;}
.navbar + .notification-container > div .right-area > .body .notification .detail .head span{ white-space: nowrap; color: rgb(115, 135, 159); font-size: 11px; font-weight: 600;}
.navbar + .notification-container > div .right-area > .body .notification .detail .body{ width: 100%;}
.navbar + .notification-container > div .right-area > .body .notification .detail .body p{ font-size: 14px; color: #555;}
.navbar + .notification-container > div .right-area > .body .notification .detail .body b{ font-size: 13px;}
.navbar + .notification-container > div .right-area > .body .notification .detail .body p strong{ white-space: nowrap; font-weight: 600; font-size: 13px; color: #105aa4;}
.navbar + .notification-container > div .right-area > .see-more{ background-color: transparent; border: none; display: block; width: fit-content; margin: 20px auto ; font-weight: 700; color: black; font-size: 13px;}
.navbar + .notification-container > div .right-area > .see-more:hover{ cursor: pointer;}

.g-empty{ background-color: white; border: 1px solid #eee; border-radius: 3px; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 45px 0 55px;}
.g-empty.shadow-1{ box-shadow: 0 7px 39px -10px #b7b7b7;}
.g-empty.active{ display: flex;}
.g-empty .icon{ 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 black;}
.g-empty .icon::before{ content: ''; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(145deg); width: 90px; height: 5px; background-color: black; outline: 3px solid white;}
.g-empty span{ font-size: 14px; font-weight: 600;}
.g-empty > a{ transition: all .2s ease; text-decoration: none; font-weight: 600; font-size: 13px; padding: 7px 20px; border-radius: 20px; background-color: black; color: white; border: 2px solid black; box-shadow: 0 0 10px 1px #999;}
.g-empty > a[href=""]:hover{ background-color: white; color: black; box-shadow: 0 15px 10px 3px #c0c0c0; transform: scaleX(1.05); }


.delete-notification-modal-container{ transition: all .3s ease; opacity: 0; pointer-events: none; z-index: 30; padding: 0 10px; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center;}
.delete-notification-modal-container.active{ opacity: 1; pointer-events: all;}
.delete-notification-modal{ transition: all .2s ease; transform: translateY(100px); opacity: 0; position: relative; width: 100%; max-width: 500px; padding: 60px 15px; background-color: white; border-radius: 5px; box-sizing: 0 0 7px 1px rgba(0, 0, 0, .8); display: flex; align-items: center; justify-content: center; flex-direction: column;}
.delete-notification-modal-container.active .delete-notification-modal{ transform: translateY(0); opacity: 1;}
.delete-notification-modal > span.close-delete-notification-modal{ transition: all .15s ease; position: absolute; right: 15px; top: 15px; font-size: 20px; line-height: 1; font-weight: 600; color: #999;}
.delete-notification-modal > span.close-delete-notification-modal:hover{ color: #770000; cursor: pointer;}
.delete-notification-modal .icon{ width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff; border: 4px solid #e13b3b; font-size: 45px; color: #e13b3b;}
.delete-notification-modal > b{ font-weight: 600; color: black; font-size: 20px; margin-top: 25px; line-height: 1;}
.delete-notification-modal > p{ font-weight: 500; color: black; font-size: 15px; margin: 20px auto 40px; line-height: 1.5; text-align: center;}
.delete-notification-modal .buttons{ display: flex; gap: 20px;}
.delete-notification-modal .buttons button{ transition: all .15s ease; cursor: pointer; width: 180px; height: 38px; font-size: 15px; font-weight: 600; border: 1px solid; border-radius: 3px;}
.delete-notification-modal .buttons button:hover{ transform: translate(2px, -2px); box-shadow: -2px 2px 6px 0px rgba(0, 0, 0, .3);}
.delete-notification-modal .buttons button:active{ transform: translate(0, 0); box-shadow: none;}
.delete-notification-modal .buttons .cancel{ background-color: #bbb; color: #fff; border-color: #bbb;}
.delete-notification-modal .buttons .cancel:hover{ background-color: #fff; color: #aaa;}
.delete-notification-modal .buttons .yes{ background-color: #f56666; color: white; border-color: #f56666;}
.delete-notification-modal .buttons .yes:hover{ background-color: #fff; color: #f56666;}
.delete-notification-modal .buttons button.hide{ display: none; pointer-events: none;}

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


@media screen and (max-width: 870px) {
    .delete-notification-modal .icon{ width: 80px; height: 80px; font-size: 35px;}
    .delete-notification-modal > p{ font-size: 13px;}
    .delete-notification-modal .buttons button{ width: 140px;}

    .navbar + .notification-container > div{ display: flex; flex-direction: column; background-color: #f1f3f5 ;}
    .navbar + .notification-container > div .left-area{ display: none;}
    .navbar + .notification-container > div .right-area{ padding: 30px 0;}
    .navbar + .notification-container > div .right-area > .body .notification .detail .head b{ font-size: 14px;}
    .navbar + .notification-container > div .right-area > .body .notification .detail .body p{ font-size: 13px;}
    .navbar + .notification-container > div .right-area > .head h1{ font-size: 30px;}
    .navbar + .notification-container > div .right-area > .body{ gap: 15px;}
    .navbar + .notification-container > div .right-area > .body .notification{ padding: 10px;}

    .navbar + .notification-container > div .right-area > .body .notification .img-area{ margin-right: 10px;}
    .navbar + .notification-container > div .right-area > .body .notification .img-area > div{ overflow: unset;}
    .navbar + .notification-container > div .right-area > .body .notification .img-area > div .logo{ transition: all .2s ease; border-radius: 50%; width: 40px; height: 40px; font-size: 15px !important;}
    .navbar + .notification-container > div .right-area > .body .notification.unread::before{ transform: translateY(calc(-50% + -37px)) !important;}
    .navbar + .notification-container > div .right-area > .body .notification.unread .img-area{ transform: translateY(-7px);}
    
    .navbar + .notification-container > div .right-area > .body .notification .open-delete-notification-modal{ display: none;}
    .navbar + .notification-container > div .right-area > .body .notification:hover{ transform: translateY(0); width: calc(100% + 6px); box-shadow: 0 17px 15px -18px rgba(0, 0, 0, .5); padding: 10px;}
    .navbar + .notification-container > div .right-area > .body .notification.unread::before{left: 24px !important; transform: translateY(calc(-50% + 25px));}

    .navbar + .notification-container > div .right-area.select > .body .notification:not(.unread) .img-area > div .logo{ transform: translateY(-10px);}
    .navbar + .notification-container > div .right-area.select > .body .notification:not(.unread)::after{ transform: translateY(calc(-50% + 26px));}

    .navbar + .notification-container > div .right-area.select > .body .notification.unread::after{ transform: translateY(calc(-50% + 29px));}
    .navbar + .notification-container > div .right-area > .body .notification::after{ transform: translateY(calc(-50% + 20px));}
    .navbar + .notification-container > div .right-area > .body .notification:hover{ width: 100% !important; box-shadow: none !important; padding: 10px !important; transform: translateY(0) !important;}
    .navbar + .notification-container > div .right-area > .body .notification:hover .img-area > div::before{ display: none;}
}


/* DOPING AREA */
.doping-control-container{ min-height: calc(100vh - (82px + 365px));;}
.doping-control-container > div{ width: 100%; max-width: 1200px; padding: 20px 10px 30px; margin: 0 auto;}
.doping-control-container > div h1{ font-size: 25px; font-weight: 600; text-align: center;}
.doping-control-container > div p{ text-align: center; font-size: 14px; font-weight: 500; color: #555;}
.doping-control-container > div .products{ display: flex; flex-direction: column; margin: 20px 0; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; box-shadow: -2px 2px 5px 0 #e0e0e0;}
.doping-control-container > div .products .header, .doping-control-container > div .products .body > div{ display: grid; grid-template-columns: 100px 1fr 140px 130px 160px 140px;}
.doping-control-container > div .products .header{ background-color: var(--dark-blue); border-bottom: 1px solid #ddd;}
.doping-control-container > div .products .header > div{ color: white; text-align: center; font-size: 13px; font-weight: 600; padding: 10px 10px;}
.doping-control-container > div .products .header > div:first-child{ border-right: 1px solid rgb(103, 98, 138);}
.doping-control-container > div .products.tripple .header, .doping-control-container > div .products.tripple .body > div{ display: grid; grid-template-columns: 100px 1fr 200px;}


.doping-control-container > div .products.no-doping > .header,
.doping-control-container > div .products.no-doping > .body > div{ grid-template-columns: 100px 1fr 140px 130px 140px;}

/* .doping-control-container > div .products .header > div:nth-child(2){ text-align: start;} */
/* .doping-control-container > div .products .header > div:last-child{ border-right: none;} */
.doping-control-container > div .products .body{ display: flex; flex-direction: column;}
.doping-control-container > div .products .body .product{ border-bottom: 1px solid #ddd;}
.doping-control-container > div .products .body .product:last-child{ border-bottom: none;}
.doping-control-container > div .products .body .product > div{ min-height: 66px;}
.doping-control-container > div .products .body .product > div:not(:nth-child(2)){ display: flex; align-items: center; justify-content: center;}
/* .doping-control-container > div .products .body .product > div:last-child{ border-right: none;} */
.doping-control-container > div .products .body .product > div .link{ cursor: pointer; transition: all .2s ease; background-color: #559ff3; border: 1px solid #559ff3; color: white; width: 150px; text-align: center; text-decoration: none; font-size: 11px; font-weight: 600; padding: 4px 12px 4px; border-radius: 3px;}
.doping-control-container > div .products .body .product > div .link:hover{ color: #559ff3; background-color: white;}
.doping-control-container > div .products .body .product > div:nth-child(1){ }
.doping-control-container > div .products .body .product > div:nth-child(1) > div{ width: calc(100% - 13px);  height: 50px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 3px; border: 1px solid #f1f1f1;}
.doping-control-container > div .products .body .product > div:nth-child(1) > div img{ width: 100%;}
.doping-control-container > div .products .body .product > div:nth-child(2){ line-height: 1.3; padding: 0 8px; display: flex; align-items: center;}
.doping-control-container > div .products .body .product > div:nth-child(2) a:not(.link){ font-size: 12px; color: black; text-decoration: none; max-height: 50px; -webkit-line-clamp: 3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.doping-control-container > div .products .body .product > div:nth-child(2) a:not(.link):hover{ text-decoration: underline;}
.doping-control-container > div .products .body .product > div:nth-child(3){ flex-direction: column; gap: 5px;}
.doping-control-container > div .products .body .product > div:nth-child(3) b{ font-size: 15px; color: var(--main-orange); display: flex; align-items: flex-end; line-height: 1; gap: 2px; font-weight: 600;}
.doping-control-container > div .products .body .product > div:nth-child(3) b small{ transform: translateY(-1.4px); font-size: 12px;}
.doping-control-container > div .products .body .product > div:nth-child(3) a:not(.link){ font-size: 12px; display: flex; align-items: center; line-height: 1; gap: 2px; padding: 3px 7px; background-color: #e8e8e8; border-radius: 3px;}
.doping-control-container > div .products .body .product > div:nth-child(3) a:not(.link) small{ transform: translateY(1.5px);}
.doping-control-container > div .products .body .product > div:nth-child(3) a:not(.link)::before{ content: '\f0ec'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; font-size: 9px; margin-right: 5px;}
.doping-control-container > div .products .body .product > div:nth-child(4) span{ text-align: center; font-size: 13px;}
.doping-control-container > div .products .body .product > div:nth-child(5){ flex-direction: column; padding: 0 5px;}
.doping-control-container > div .products .body .product > div:nth-child(5) > div{ width: 100%; font-size: 11px; display: flex; align-items: center; justify-content: space-between;}
.doping-control-container > div .products .body .product > div:nth-child(5) > div span{ }
.doping-control-container > div .products .body .product > div:nth-child(5) > div b{ }
.doping-control-container > div .products .body .product > div:last-child span{ font-size: 11px; font-weight: 500; padding: 4px 12px 4px; border-radius: 3px;}
.doping-control-container > div .products .body .product > div:last-child span.green{ background-color: var(--success-green); color: white;}
.doping-control-container > div .products .body .product > div:last-child span.red{ background-color: #c21b1b; color: white;}
.doping-control-container > div .products .body .product > div:last-child span.blue{ color: white; background-color: #1d81ec;}
.doping-control-container > div .products .body .product > div:last-child span.orange{ color: white; background-color: #ec901d;}

.doping-control-container > div .dopings{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 20px 0;}
.doping-control-container > div .dopings .doping{ border-radius: 7px; overflow: hidden; border: 1px solid #ddd; box-shadow: 0px 0px 5px 0 #ddd;}
/* .doping-control-container > div .dopings{ display: flex; gap: 20px; flex-wrap: wrap; margin: 20px 0; justify-content: center;}
.doping-control-container > div .dopings .doping{ width: calc(((100% / 4) - (20px)) + (20px / 4)); border-radius: 7px; overflow: hidden; border: 1px solid #ddd; box-shadow: 0px 0px 5px 0 #ddd; min-width: 250px;} */
.doping-control-container > div .dopings .doping .header{ background-color: var(--dark-blue); color: white; font-size: 13px; font-weight: 600; text-align: center; padding: 10px 0;}
.doping-control-container > div .dopings .doping .body{ display: flex; flex-direction: column; padding: 0 7px;}
.doping-control-container > div .dopings .doping .body > div{ border-bottom: 1px solid #ddd; padding: 7px 5px; font-size: 13px; line-height: 1.3; display: flex; align-items: center; justify-content: space-between;}
/* .doping-control-container > div .dopings .doping .body > div:first-child{ height: 67px; align-items: baseline;} */
.doping-control-container > div .dopings .doping .body > div:last-child{ border-bottom: none; padding: 0;}
.doping-control-container > div .dopings .doping .body > div span{ }
.doping-control-container > div .dopings .doping .body > div b{ font-weight: 600;}
.doping-control-container > div .dopings .doping .body > div b small{ margin-left: 2px;}
.doping-control-container > div .dopings .doping .body > div:last-child button{ position: relative; transition: all .15s ease; width: 180px; outline: 1px solid var(--dark-blue); border: none; border-radius: 5px; height: 36px; font-size: 12px; font-weight: 600; overflow: hidden; margin: 15px auto;}
.doping-control-container > div .dopings .doping .body > div:last-child button::before{ transition: all .15s ease, transform .5s; content: 'Dopingi Seç'; display: flex; align-items: center; justify-content: center; background-color: var(--dark-blue); color: white; height: 100%; width: 100%; position: absolute; left: 0; top: -.3px;}
.doping-control-container > div .dopings .doping .body > div:last-child button:hover::before{ background-color: white; color: var(--dark-blue);}
.doping-control-container > div .dopings .doping .body > div:last-child button:hover{ cursor: pointer; transform: translate(2px, -2px); box-shadow: -2px 2px 5px 0px #bbb;}
.doping-control-container > div .dopings .doping .body > div:last-child button:active{ transform: translate(0, 0); box-shadow: none;}
.doping-control-container > div .dopings .doping .body > div:last-child button::after{ transition: all .15s ease, transform .5s; content: 'Doping Seçildi'; display: flex; align-items: center; justify-content: center; transform: translateX(100%); background-color: var(--success-green); color: white; height: 100%; width: 100%; position: absolute; left: 0; top: -.3px;}
.doping-control-container > div .dopings .doping .body > div:last-child > span{ background-color: #559ff3; color: white; position: relative; transition: all .15s ease; width: 180px; outline: 1px solid #559ff3; border: none; border-radius: 5px; height: 36px; font-size: 12px; font-weight: 600; overflow: hidden; margin: 15px auto; display: flex; align-items: center; justify-content: center;}
.doping-control-container > div .dopings .doping .body > div:last-child > span i{ font-size: 15px; margin-left: 5px}

/* .doping-control-container > div .dopings .doping.selected .header{ background-color: var(--success-green);} */
.doping-control-container > div .dopings .doping.selected .body > div:last-child button{ outline-color: var(--success-green);}
.doping-control-container > div .dopings .doping .body > div:last-child button:hover::after{ background-color: white; color: var(--success-green);}
.doping-control-container > div .dopings .doping.selected .body > div:last-child button::before{ transform: translateX(-100%);}
.doping-control-container > div .dopings .doping.selected .body > div:last-child button::after{ transform: translateX(0);}
.doping-control-container > div .dopings .doping .body > div:last-child button:hover::after{ background-color: white; color: var(--dark-blue);}

.doping-control-container > div .footer-buttons{ margin-top: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.doping-control-container > div .footer-buttons .contract{}
.doping-control-container > div .footer-buttons .contract input[type="checkbox"]{ transform: translate(7px, 14px); position: absolute; cursor: pointer; height: 1px; width: 1px;}
.doping-control-container > div .footer-buttons .contract input[type="checkbox"]::before{  transform: translate(-7px, -14px); content: ''; position: absolute; left: 0; top: 5.5px; display: inline-block; border: 1px solid var(--dark-blue); width: 12px; height: 12px; border-radius: 3px;}
.doping-control-container > div .footer-buttons .contract input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-size: 9.5px; font-weight: 900; color: white; background-color: var(--dark-blue); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 5.5px; border: 1px solid var(--dark-blue); width: 12px; height: 12px;}
.doping-control-container > div .footer-buttons .contract label{ font-size: 12px; font-weight: 500; color: #666; padding-left: 20px;}
.doping-control-container > div .footer-buttons .contract label a{ text-decoration: none; color: black; font-weight: 500;}
.doping-control-container > div .footer-buttons .contract label a:hover{ text-decoration: underline;}
.doping-control-container > div .footer-buttons > .approve-container > div{ display: none;}
.doping-control-container > div .footer-buttons > .approve-container .approve{ text-decoration: none; transition: all .15s ease; cursor: pointer; margin-top: 10px; background-color: var(--success-green); color: white; font-weight: 600; font-size: 13px; padding: 10px 20px; border: 1px solid var(--success-green); border-radius: 3px;}
.doping-control-container > div .footer-buttons > .approve-container .approve.disabled{ pointer-events: none; background-color: #eee; color: #aaa; border: 1px solid #ddd;}
.doping-control-container > div .footer-buttons > .approve-container .approve i{ margin-right: 10px;}
.doping-control-container > div .footer-buttons > .approve-container .approve span{ margin-left: 2px;}
.doping-control-container > div .footer-buttons > .approve-container .approve small{ margin-left: 2px; font-size: 11px;}
.doping-control-container > div .footer-buttons > .approve-container .approve:hover{ background-color: white; color: var(--success-green); transform: translate(2px, -2px); box-shadow: -2px 2px 5px 0px #bbb;}
.doping-control-container > div .footer-buttons > .approve-container .approve:hover i{ animation: right-left .7s linear infinite;}
.doping-control-container > div .footer-buttons > .approve-container .approve:active{ transform: translate(0, 0); box-shadow: none;}
.doping-control-container > div .footer-buttons > a.go-ahead{ text-decoration: none; transition: all .15s ease; cursor: pointer; margin-top: 15px; background-color: #eee; color: #4d4d4d; font-weight: 500; font-size: 11px; padding: 7px 15px; border: 1px solid #eee; border-radius: 3px;}
.doping-control-container > div .footer-buttons > a.go-ahead:hover{ background-color: #e0e0e0;}
.doping-control-container > div .footer-buttons > a.go-ahead:active{ transform: scale(.98);}

@keyframes right-left{
    0%{ transform: translateX(0);}
    50%{ transform: translateX(2px);}
    100%{ transform: translateX(0);}
}


@media screen and (max-width: 870px) {
    .doping-control-container{ background-color: #f1f1f1;}
    .doping-control-container > div{ padding: 20px 0 30px;}
    .doping-control-container > div h1{ font-size: 20px; margin-top: 0; background-color: white !important; padding: 8px 0 !important; border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important;}
    .doping-control-container > div h1.small{ font-size: 16px; }
    .doping-control-container > div p{ padding: 10px 15px; max-width: calc(100% - 20px); margin: 10px auto; color: black; font-size: 13px; font-weight: 500; color: #5d5f00; background-color: #f9f9ce;}
    .doping-control-container > div hr{ display: none;}
    .doping-control-container > div .products{ border-radius: 0; box-shadow: none; border: none;}
    .doping-control-container > div .products .header,
    .doping-control-container > div .products.tripple .header{ display: none;}
    .doping-control-container > div .products.tripple .body > div{ display: flex; }
    .doping-control-container > div .products .body{ gap: 10px;}
    .doping-control-container > div .products .body .product{ border-radius: 5px; gap: 12px; padding: 15px 10px; background-color: white; width: 100%; max-width: calc(100% - 20px); margin: 0 auto; border: 1px solid #ddd !important; display: flex; flex-direction: column;}
    .doping-control-container > div .products .body .product > div{ height: auto; min-height: unset;}
    .doping-control-container > div .products .body .product > div:nth-child(1) > div{ border-radius: 5px; border: 1px solid #ddd; margin-bottom: 10px; max-width: 200px; height: 110px;}
    .doping-control-container > div .products .body .product > div:nth-child(2) a{ display: inline-block; width: 100%; text-align: center; max-height: unset;}
    .doping-control-container > div .products .body .product > div:nth-child(3){ flex-direction: row; gap: 15px;}
    .doping-control-container > div .products .body .product > div:nth-child(4) span br{ display: inline; content: ''; margin-left: 5px; margin-right: 5px;}
    .doping-control-container > div .products .body .product > div:nth-child(4) span br::before{ content: '-';}
    /* .doping-control-container > div .products .body .product > div:nth-child(5) > div{ display: grid; grid-template-columns: 1fr 1fr;}
    .doping-control-container > div .products .body .product > div:nth-child(5) > div span{ text-align: end;}
    .doping-control-container > div .products .body .product > div:nth-child(5) > div span::after{ content: '-'; margin-left: 7px;}
    .doping-control-container > div .products .body .product > div:nth-child(5) > div b{ padding-left: 7px;} */
    .doping-control-container > div .products .body .product > div:nth-child(5){ flex-direction: row;}
    .doping-control-container > div .products .body .product > div:nth-child(5) > div{ flex-direction: column; padding: 0 7px;}
    .doping-control-container > div .products .body .product > div:nth-child(5) > div span{ white-space: nowrap;}

    .doping-control-container > div .dopings{ padding: 0 10px;}
    .doping-control-container > div .dopings .doping .body{ background-color: white;}
    .doping-control-container > div .dopings .doping .body > div:last-child button::before, .doping-control-container > div .dopings .doping .body > div:last-child button::after{ background-color: white !important; font-size: 13px;}
    .doping-control-container > div .dopings .doping .body > div:last-child button::before{ color: var(--dark-blue);}
    .doping-control-container > div .dopings .doping .body > div:last-child button::after{ color: var(--success-green);}
    .doping-control-container > div .dopings .doping .body > div:last-child button:hover{ transform: unset; box-shadow: none;}
    .doping-control-container > div .dopings .doping .body > div:last-child button:hover::after{ color: var(--success-green);}

    .doping-control-container > div .footer-buttons .contract label{ font-size: 13px;}
    .doping-control-container > div .footer-buttons .contract input[type="checkbox"]{ transform: translate(2px, 14px);}
    .doping-control-container > div .footer-buttons .contract input[type="checkbox"]::before{ background-color: white; width: 15px; height: 15px; transform: translate(-8px, -16px);}
    .doping-control-container > div .footer-buttons .contract input[type="checkbox"]:checked::before{ width: 15px; height: 15px;}
    .doping-control-container > div .footer-buttons > a.go-ahead{ background-color: white; border-color: #ddd;}
    .doping-control-container > div .footer-buttons > a.go-ahead:hover{ background-color: white;}
    .doping-control-container > div .footer-buttons > .approve-container{ display: flex; justify-content: space-between; align-items: center; padding: 13px 10px; position: fixed; z-index: 10; bottom: 0; left: 0; width: 100%; background: white; box-shadow: 0 0 5px 1px rgb(0, 0, 0, .5);}
    .doping-control-container > div .footer-buttons > .approve-container > div{ display: inline-block;}
    .doping-control-container > div .footer-buttons > .approve-container > div b{ font-size: 14px; font-weight: 600;}
    .doping-control-container > div .footer-buttons > .approve-container > div span{ font-size: 18px; font-weight: 500; color: var(--success-green);}
    .doping-control-container > div .footer-buttons > .approve-container > div small{ color: var(--success-green); display: inline-block; transform: translate(-1px, -.5px);}
    .doping-control-container > div .footer-buttons > .approve-container .approve{ margin: 0;}
    .doping-control-container > div .footer-buttons > .approve-container .approve:hover{ transform: unset; box-shadow: none; background-color: var(--success-green); color: white;}
    .doping-control-container > div .footer-buttons > .approve-container .approve:active{ transform: scale(.95);}
    .doping-control-container > div .footer-buttons > .approve-container .approve i{ display: none;}
    .doping-control-container > div .footer-buttons > .approve-container .approve span{ display: none;}
    .doping-control-container > div .footer-buttons > .approve-container .approve b{ display: none;}
    .doping-control-container > div .footer-buttons > .approve-container .approve small{ display: none;}
}



/* DOPING ORDER */
.order-summary-container > div .payment-type{ margin-top: 20px; margin-bottom: 30px;}
.order-summary-container > div .payment-type > .header{ width: 100%; border-bottom: 4px solid var(--dark-blue); margin-bottom: 5px;}
.order-summary-container > div .payment-type > .header button{ transition: all .2s; padding: 0 20px; height: 30px; background-color: #f5f5f5; color: #868686; margin-left: 5px; font-weight: 600; border: 2px solid #a5a5a5; border-bottom: none;}
.order-summary-container > div .payment-type > .header button:hover{ border-color: var(--dark-blue); color: var(--dark-blue); cursor: pointer;}
.order-summary-container > div .payment-type > .header button.active{ pointer-events: none; box-shadow: inset 0 -2px 3px 0px #595858; background-color: rgba(var(--dark-blue-for-opacity), .85); color: #fff; border-color: var(--dark-blue);}
.order-summary-container > div .payment-type > .body{ padding-bottom: 20px; overflow: hidden; position: relative; width: 100%;}
.order-summary-container > div .payment-type > .body > div{ transition: all .2s ease; width: 100%; height: 100%; padding: 5px 5px 0; display: none; opacity: 0;}
.order-summary-container > div .payment-type > .body > div.active{ display: block; pointer-events: all;}
.order-summary-container > div .payment-type > .body > div.show{ opacity: 1; pointer-events: all;}
.order-summary-container > div .payment-type.transfer > .body .online{ transform: translateX(-100%);}
.order-summary-container > div .payment-type > .body .transfer{ transform: translateX(0);}
.order-summary-container > div .payment-type.transfer > .body .transfer{ transform: translateX(0);}
.order-summary-container > div .payment-type > .body > div .msg{ font-size: 12px; font-weight: 600; color: #5d5f00; background-color: #f9f9ce; padding: 10px 12px; border-radius: 5px; margin-bottom: 20px;}
.order-summary-container > div .payment-type > .body > div .user-informations{ display: flex; flex-direction: column; gap: 15px;}
.order-summary-container > div .payment-type > .body > div .user-informations > div{ display: flex; flex-direction: column;}
.order-summary-container > div .payment-type > .body > div .user-informations > div label{ line-height: 1; margin-bottom: 7px; font-weight: 600; font-size: 13px;}
.order-summary-container > div .payment-type > .body > div .user-informations > div label small{ font-size: 13px; color: #b40606; vertical-align: top; margin-left: 2px;}
.order-summary-container > div .payment-type > .body > div .user-informations > div span{ line-height: 1; margin-bottom: 7px; font-size: 11px; color: #666;}
.order-summary-container > div .payment-type > .body > div .user-informations > div input, .order-summary-container > div .payment-type > .body > div .user-informations > div textarea{ transition: all .2s; width: 100%; border: 1px solid #ccc; outline: none; background-color: #fbfbfb; border-radius: 3px; padding: 7px 10px; font-family: 'Poppins', sans-serif;}
.order-summary-container > div .payment-type > .body > div .user-informations > div input:focus, .order-summary-container > div .payment-type > .body > div .user-informations > div textarea:focus{ box-shadow: 0 0 0 3px rgba(var(--dark-blue-for-opacity), .3); background-color: white; border-color: rgba(var(--dark-blue-for-opacity), .6);}
.order-summary-container > div .payment-type > .body > div .user-informations > div textarea{ height: 76px; resize: none;}
.order-summary-container > div .payment-type > .body > div .user-informations button{ margin-top: 5px; transition: all .15s ease; margin-left: auto; font-size: 11px; font-weight: 600; color: white; background-color: var(--dark-blue); border: 1px solid var(--dark-blue); padding: 10px 17px; border-radius: 3px;}
.order-summary-container > div .payment-type > .body > div .user-informations button:hover{ cursor: pointer; transform: translate(2px, -2px); box-shadow: -2px 2px 5px 0px #bbb; background-color: white; color: var(--dark-blue);}
.order-summary-container > div .payment-type > .body > div .user-informations button:active{ transform: translate(0, 0); box-shadow: none;}
.order-summary-container > div .payment-type > .body > div .account-table{}
.order-summary-container > div .payment-type > .body > div .account-table .header, 
.order-summary-container > div .payment-type > .body > div .account-table .body > div{ display: grid; grid-template-columns: 200px 200px 300px 1fr;}
.order-summary-container > div .payment-type > .body > div .account-table .header{ border-bottom: 1px solid #ddd;}
.order-summary-container > div .payment-type > .body > div .account-table .header > div{ padding: 3px 5px; font-weight: 600; font-size: 14px;}
.order-summary-container > div .payment-type > .body > div .account-table .body{}
.order-summary-container > div .payment-type > .body > div .account-table .body > div:nth-child(even){ background-color: #f5f5f5;}
.order-summary-container > div .payment-type > .body > div .account-table .body > div:nth-child(even) > div:last-child button{ background-color: white;}
.order-summary-container > div .payment-type > .body > div .account-table .body > div > div{ font-size: 13px; padding: 5px 5px; display: flex; align-items: center;}
.order-summary-container > div .payment-type > .body > div .account-table .body > div > div:last-child{ justify-content: end;}
.order-summary-container > div .payment-type > .body > div .account-table .body > div > div:last-child button{ text-rendering: optimizeSpeed; transition: all .15s ease; font-size: 11px; font-weight: 600; color: #666; background-color: #eee; border-radius: 3px; padding: 8px 15px; border: none;}
.order-summary-container > div .payment-type > .body > div .account-table .body > div > div:last-child button i{ margin-right: 5px;}
.order-summary-container > div .payment-type > .body > div .account-table .body > div > div:last-child button:hover{ cursor: pointer; background-color: #e0e0e0;}
.order-summary-container > div .payment-type > .body > div .account-table .body > div > div:last-child button:active{ transform: scale(0.99);}


.store-profile-container .store-route{ width: 100%; margin: 10px 0 0;}
/* .store-profile-container .store-route .store-description{ background-color: white; padding: 6px 10px; width: calc(100% - 20px); max-width: 1180px; margin: 15px auto 6px; box-shadow: 0 0 5px 1px #dfdfdf;}
.store-profile-container .store-route .store-description h5{ color: #333;}
.store-profile-container .store-route .store-description p{ font-size: 13px; color: #666;} */
.store-profile-container .store-route .route-area{ background-color: white; padding: 6px 10px; width: calc(100% - 20px); max-width: 1180px; margin: 15px auto 6px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 0 5px 1px #dfdfdf;}
.store-profile-container .store-route .route-area ul{ list-style: none; display: flex; margin: 0 auto; justify-content: center; gap: 0px; height: 100%; align-items: center;}
.store-profile-container .store-route .route-area ul li{ }
.store-profile-container .store-route .route-area ul li a{ cursor: pointer; position: relative; transition: all .2s ease; padding: 5px 12px; display: flex; font-size: 13px; gap: 5px; text-decoration: none; align-items: center; color: black;}
.store-profile-container .store-route .route-area ul li a .mobile{ display: none;}
.store-profile-container .store-route .route-area ul li a.active{ pointer-events: none; background-color: #dc8d33; color: white !important;}
.store-profile-container .store-route .route-area ul li a::before{ content: ''; transition: all .2s ease; width: 0px; height: 2px; background-color: #f7992a; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.store-profile-container .store-route .route-area ul li a:hover::before{ width: 95%;}
.store-profile-container .store-route .route-area ul li a:hover{ color: #743e00;}
.store-profile-container .store-route .route-area ul li a i{ }
/* .store-profile-container .store-route .route-area .social{ display: flex; gap: 10px;}
.store-profile-container .store-route .route-area .social a{ font-size: 20px; width: 30px; height: 30px; color: white; display: flex; align-items: center; justify-content: center; border-radius: 5px; text-decoration: none;}
.store-profile-container .store-route .route-area .social a.wp{ background-color: rgb(32, 225, 32);}
.store-profile-container .store-route .route-area .social a.mail{ background-color: rgb(214, 146, 20);}
.store-profile-container .store-route .route-area .social a.twet{ background-color: rgb(11, 140, 209);}
.store-profile-container .store-route .route-area .social a.pint{ background-color: rgb(186, 0, 62);}
.store-profile-container .store-route .route-area .social a.insta{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}
.store-profile-container .store-route .route-area .social a.face{ background-color: rgb(71, 99, 234);}
.store-profile-container .store-route .route-area .social a.share{ background-color: transparent; color: black} */

.store-profile-container .sticky-check-div{ width: 100%; height: 0px;position: absolute; transform: translateY(-4px); background-color: rebeccapurple;}

.store-profile-container .content{ width: 100%; background-color: #f7f7f7; padding: 10px 0;}
.store-profile-container .content > div{}
.store-profile-container .content > div .all-advert{ display: none; position: relative; width: calc(100% - 20px); max-width: 1180px; margin: 0 auto; gap: 15px;}
.store-profile-container .content > div .all-advert .empty-area{ padding: 20px; background-color: white; width: 100%;}
.store-profile-container .content > div .all-advert.active{ display: flex;}
.store-profile-container .content > div .all-advert .left-area{ width: 320px; height: fit-content;}
.store-profile-container .content > div .all-advert .left-area .filters > .search-area{ padding: 10px; margin-bottom: 20px; background-color: white; box-shadow: 0 0 5px 1px #dfdfdf;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area{ background-color: white; box-shadow: 0 0 5px 1px #dfdfdf;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .head{ display: none; position: sticky; top: 0; background-color: white; z-index: 3; width: 100%; padding: 10px 0; background-color: white; border-bottom: 1px solid #c1c1c1; font-size: 17px; font-weight: 600; text-align: center; width: calc(100% + 20px); transform: translateX(-10px);}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .head span{ position: absolute; left: 20px; top: 5px; font-size: 25px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .selected-filters-bg{ display: none; background-color: #f0f0f0; width: calc(100% + 20px); transform: translateX(-10px);}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .selected-filters-bg .selected-filters{padding: 10px 10px 15px; display: flex; flex-direction: column; margin-bottom: 10px; margin-top: 5px; background-color: white; align-items: flex-start; border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .selected-filters-bg .selected-filters > div{ display: flex; flex-wrap: wrap; gap: 10px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .selected-filters-bg .selected-filters > div > div {display: flex; flex-wrap: wrap; gap: 7px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .selected-filters-bg .selected-filters > div > div > div{ font-size: 12px; box-shadow: 0 0 2px 1px #ddd; border: 1px solid #ddd; padding: 2px 7px; border-radius: 5px; display: flex; align-items: center;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .selected-filters-bg .selected-filters > div > div > div b{ display: flex; align-items: center; margin-right: 4px; color: #333; }
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .selected-filters-bg .selected-filters > div > div > div a{ border: none; display: flex; justify-content: center; align-items: center; text-decoration: none; color: white; background-color: #f7992a; width: 15px; height: 15px; border-radius: 50%; padding: 0 0 1px 0; margin-left: 4px; cursor: pointer; font-size: 10px; transition: all .2s;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .selected-filters-bg .selected-filters > div a{ text-decoration: none; transition: all .2s ease; font-size: 11px; padding: 3px 10px; border: 1px solid #f7992a; background-color: #f7992a; color: white; border-radius: 5px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area .selected-filters-bg .selected-filters > div a:hover{ cursor: pointer; background-color: white; color: #f7992a;}
.store-profile-container .content > div .all-advert .left-area .filters > .search-area > div{ padding-bottom: 10px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div:nth-child(3){ padding-top: 0px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div{padding-bottom: 10px; border-bottom: 1px solid #bbbbbb;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .search-area{ background-color: #f3f9ff; outline: 1px solid #c7c7c7; display: flex; border-radius: 3px; overflow: hidden;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .search-area input{ transition: all .15s; width: 100%; border-radius: 0 !important; border: none !important; padding: 7px 10px; background-color: transparent;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .search-area input:focus-visible{ outline: none; background-color: white;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .search-area span{ transition: all .1s; background-color: #f3f9ff; color: #666; display: inline-block; width: 40px; display: flex; align-items: center; justify-content: center;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .search-area span:hover{ cursor: pointer; background-color: #e3f1ff;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div{ border-bottom: 1px solid #ddd; padding: 15px 10px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div:last-child:not(:first-child){ padding: 0;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div:last-child{ border-bottom: none;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div:first-child{ padding: 10px 0;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div label{ font-size: 12px; font-weight: 600; margin-bottom: 7px; display: inline-block;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div input:not([type='checkbox'], [type='radio']), .store-profile-container .content > div .all-advert .left-area .filters > .filter-area select{ width: 100%; height: 28px; padding: 0 5px; border: none; box-shadow: 0 0 10px 1px #e4e4e4; border: 1px solid #ddd; border-radius: 4px; transition: all .2s;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div input::placeholder{ font-size: 13px; opacity: .4; color: black;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div input:not([type='checkbox'], [type='radio']):focus{ outline: none; box-shadow: 0 0 5px 2px #53bcd48f;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div select:focus-within{ box-shadow: 0 0 0 2px #44c9e8; outline: none;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .compare{ display: flex; gap: 20px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .checkbox-column > div{ display: flex; align-items: center; gap: 3px; height: 30px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div input[type="checkbox"]{ position: absolute; cursor: pointer; height: 0; width: 0;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div input[type="checkbox"]::before{ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-block; border: 1px solid #44c9e8; width: 15px; height: 15px; border-radius: 3px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: #44c9e8; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; border: 1px solid #44c9e8; width: 15px; height: 15px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .checkbox-column > div > span{ font-size: 13px; margin-left: 22px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .checkbox-column > div > span > small{ font-size: 11px; color: #5b5b5b;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div input[type="radio"]{ position: absolute; cursor: pointer; height: 0; width: 0;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div input[type="radio"]::before{ content: ''; position: absolute; left: 0; top: 0; margin-top: 3px; border-radius: 50%; display: inline-block; border: 1px solid #44c9e8; width: 15px; height: 15px; }
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div input[type="radio"]:checked::before{ content: ''; color: white; background-color: #44c9e8; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; border: 1px solid #44c9e8; width: 14px; height: 14px; box-shadow: inset 0 0 0 2px white, 0 0 0 1px #44c9e8;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .checkbox-row { display: grid; grid-template-columns: 1fr 1fr;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .checkbox-row > div > span{ font-size: 13px; margin-left: 22px;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .checkbox-row > div > span > small{ font-size: 11px; color: #5b5b5b;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > .button button{ transition: all .2s ease; border: none; border-radius: 7px; width: calc(100% - 20px); height: 40px; margin: 20px 10px; background-color: #f7992a; color: white; font-weight: 600; box-shadow: 0 0 10px 1px #b9b9b9;}
.store-profile-container .content > div .all-advert .left-area .filters > .filter-area > .button button:hover{ transform: translateY(-3px) translateX(3px); box-shadow: -3px 6px 8px 1px #878787; cursor: pointer;}
.store-profile-container .content > div .all-advert .right-area{ background-color: white; width: 100%; height: fit-content; padding: 10px 10px 30px; box-shadow: 0 0 5px 1px #dfdfdf;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter{ border-bottom: 1px solid #979797;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter > div{}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .top{ }
.store-profile-container .content > div .all-advert .right-area .advencing-filter .top span{ font-size: 14px;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .top .total-filter-area{ display: flex; margin-top: 5px;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .top .total-filter-area > div{ display: flex; gap: 7px;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .top .total-filter-area > div > div{ font-size: 12px; border: 1px solid #ddd; padding: 2px 7px; border-radius: 5px; display: flex; align-items: center;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .top .total-filter-area > div > div b{  margin-right: 4px; color: #333; }
.store-profile-container .content > div .all-advert .right-area .advencing-filter .top .total-filter-area > div > div a{ border: none; display: flex; justify-content: center; align-items: center; text-decoration: none; color: white; background-color: #f7992a; width: 15px; height: 15px; border-radius: 50%; padding: 0 0 2px 0; margin-left: 4px; cursor: pointer; font-size: 10px; transition: all .2s;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .top .total-filter-area > div > div a:hover{ background-color: #d1663b; }

.store-profile-container .content > div .all-advert .right-area .advencing-filter .top .total-filter-area > a{ text-decoration: none; transition: all .2s ease; font-size: 11px; padding: 3px 10px; border: 1px solid #f7992a; background-color: #f7992a; color: white; margin-left: 10px; border-radius: 5px; display: flex; align-items: center;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .top .total-filter-area > a:hover{ cursor: pointer; background-color: white; color: #f7992a;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom{ margin-top: 10px; display: flex; align-items: center; justify-content: space-between;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right{ transform: translateY(-1px); display: flex; gap: 8px; position: relative;}
/* .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right{ position: sticky; position: -webkit-sticky; top: 60px; z-index: 5; background-color: white; display: flex; gap: 8px; position: relative;} */
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right.is-pinned{ position: fixed; top: 61px; background-color: white; z-index: 5; width: calc(100% + 20px); transform: translateX(-10px);}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right.is-pinned > .filter-btn-area{ padding-right: 20px;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .check-filter-buttons{ position: sticky; position: -webkit-sticky; top: 0px; z-index: 20; background-color: white; transform: translateY(-60px);}

.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .left .buttons{ display: flex; align-items: center; gap: 5px;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .left .buttons a{ text-decoration: none; font-size: 12px; background-color: white; color: #222; border: 1px solid #b9b8b8; border-radius: 7px 7px 0 0; height: 30px; padding: 0 13px; transform: translateY(1px); cursor: pointer; transition: all .15s ease; border-bottom: none; display: flex; align-items: center; justify-content: center;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .left .buttons a.active{ background-color: #f7992a; color: white; border-color: #f7992a;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .left .buttons a:not(.active):hover{ box-shadow: inset 0 0 13px 1px #ddd; cursor: pointer;}


/*.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area select{ height: 30px; transform: translateY(1px);}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area select:focus-visible{ outline: none;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area select option{ font-size: 13px;}*/
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area > i{ display: none;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area select{ height: 32px; transform: translateY(1px); border-color: #b9b8b8; color: #000; border-bottom: none; border-radius: 3px 3px 0 0; font-family: 'Poppins', sans-serif; padding-left: 4px; font-size: 12px;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area select:focus-visible{ outline: none;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area select option{ font-size: 12px; color: #000; font-family: 'Poppins', sans-serif; padding-left: 4px;}

.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .filter-btn-area{ display: none; align-items: center; justify-content: center; border-left: 1px solid #bf5f07; font-size: 12px;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .buttons{ display: flex; gap: 5px;}
/*.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .buttons button{ background-color: white; box-shadow: 0 0 5px 1px #cacaca; border: none; border-radius: 3px; cursor: pointer; transition: all .2s ease;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .buttons button.active{ pointer-events: none; background-color: #f7992a; color: white; box-shadow: 0 0 5px 1px #cacaca; border: none; border-radius: 3px; cursor: pointer; transition: all .2s ease;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .buttons button:not(.active):hover{ color: #ee8b00; box-shadow: 0 0 5px 1px #f7992a;}*/
/*.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .line{ display: flex; font-size: 17px; width: 32px; height: 32px; align-items: center; justify-content: center;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .box{ display: flex; font-size: 9px; width: 32px; gap: 3px; height: 32px; align-items: center; justify-content: center;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .box span{ display: flex; flex-direction: column; gap: 2px;}*/

/*.advert-area > .filter-header .filter-area{ display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: space-between; margin-top: 15px;}
.advert-area > .filter-header .filter-area .select{ margin-left: auto; display: flex; align-items: center; gap: 5px; transform: translateY(-1px);}
.advert-area > .filter-header .filter-area .select button{ background-color: white; border-radius: 3px; cursor: pointer; transition: all .2s ease; border: 1px solid #b9b8b8; border-bottom: none; transform: translateY(1px);}
.advert-area > .filter-header .filter-area .select button.active{ pointer-events: none; background-color: #f7992a; color: white; border: none; border-radius: 3px; cursor: pointer; transition: all .2s ease;}
.advert-area > .filter-header .filter-area .select button:not(.active):hover{ color: #ee8b00; border-color: #ee8b00;}*/
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right button{ background-color: white; border-radius: 3px; cursor: pointer; transition: all .2s ease; border: 1px solid #b9b8b8; border-bottom: none; transform: translateY(1px);}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right button.active{ pointer-events: none; background-color: #f7992a; color: white; border: none; border-radius: 3px; cursor: pointer; transition: all .2s ease;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right button:not(.active):hover{ color: #ee8b00; border-color: #ee8b00;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .line{ display: flex; font-size: 17px; width: 32px; height: 32px; align-items: center; justify-content: center; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .box{ display: flex; font-size: 9px; width: 32px; margin-right: 5px; gap: 3px; height: 32px; align-items: center; justify-content: center; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;}
.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .box span{ display: flex; flex-direction: column; gap: 2px;}

.store-profile-container .content > div .all-advert .right-area .store-advert{ display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert{ transition: all .2s ease;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .img-area{ transition: all .2s ease;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail{ transition: all .2s ease;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert{ position: relative; border-radius: 7px; overflow: hidden; box-shadow: 1px 1px 13px rgb(0 0 0 / 20%); text-decoration: none; width: calc(33.3% - 14px);}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .img-area{ width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .img-area img{ width: 100%;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail{ padding: 7px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail a{ color: black; text-decoration: none; font-size: 14px; font-weight: 600; height: 35px; overflow: hidden; line-height: 1.2; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .icons{ display: flex; gap: 5px; margin-bottom: 5px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .icons span{ color: #666; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .icons span i{ font-size: 10px; transform: translateY(1px);}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .prices{ display: flex; align-items: center; gap: 5px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .prices .current-price{ font-size: 15px; font-weight: 600; display: flex; gap: 1px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .prices .another-unit{ display: flex; gap: 1px; font-size: 11px; font-weight: 400; padding: 2px 5px; background-color: #666; color: white;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .footer{ border-top: 1px solid #ddd; margin-top: 7px; padding: 7px 0 3px; display: flex; justify-content: space-between; align-items: center;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .footer span{ font-size: 12px; color: #777;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .footer .location{}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .footer .time{}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .buttons{ display: none;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert{ border-radius: 7px; overflow: hidden; box-shadow: 1px 1px 13px rgb(0 0 0 / 20%); text-decoration: none; width: 100%; display: flex;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert:hover .advert-detail .buttons{ display: flex;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert:hover{ box-shadow: 0 0 7px 1px rgba(0, 0, 0, .5);}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .img-area{ width: 260px; min-width: 260px; height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .img-area img{ width: 100%;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail{ position: relative; padding: 7px 12px; width: 100%; position: relative;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail a{ color: black; text-decoration: none; width: calc(70% - 10px); font-size: 16px; font-weight: 600; height: 41px; margin-bottom: 5px; overflow: hidden; line-height: 1.2; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .icons{ display: flex; gap: 8px; margin-bottom: 10px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .icons span{ color: #666; font-size: 14px; display: flex; align-items: center; gap: 5px; }
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .icons span i{ font-size: 10px; transform: translateY(1px);}
/* .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert:nth-child(1) .advert-detail .prices{ margin-top: 30px;} */
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .prices{ display: flex; align-items: center; gap: 5px; margin-top: 10px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .prices .current-price{ font-size: 17px; font-weight: 600; display: flex; gap: 1px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .prices .current-price span{ color: black; margin-left: 2px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .prices .another-unit{ display: flex; gap: 1px; font-size: 13px; font-weight: 400; padding: 2px 5px; background-color: #666; color: white;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .footer{ position: absolute; bottom: 5px; width: calc(100% - 24px); margin-top: 7px; padding: 7px 0 3px; display: flex; justify-content: space-between; align-items: center;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons{ display: none; position: absolute; right: 10px; top: 10px; flex-direction: column; gap: 8px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons button{ font-size: 13px; font-family: 'Poppins', sans-serif; transition: all .2s; position: relative; height: 33px; width: 160px; background-color: #514e60; border: none; color: white; border-radius: 3px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons button:hover{ cursor: pointer; box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .4);}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons button i{ position: absolute; left: 10px; top: 50%; transform: translateY(calc(-50% - 1px));}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons button.active i{ color: #ffff0a;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons button:last-child{ background-color: rgb(0, 186, 0);}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons button:last-child:hover{ box-shadow: 0 2px 6px 2px rgba(14, 94, 0, 0.4);}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons a{ font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 400; text-decoration: none; transition: all .2s; position: relative; height: 33px; width: 160px; background-color: #514e60; border: none; color: white; border-radius: 3px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons a:hover{ cursor: pointer; box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .4);}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons a i{ position: absolute; left: 10px; top: 50%; transform: translateY(calc(-50% - 1px));}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons a:last-child{ background-color: rgb(0, 186, 0);}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons a:last-child:hover{ box-shadow: 0 2px 6px 2px rgba(14, 94, 0, 0.4);}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .footer span{ font-size: 12px; color: #777;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .footer .location{}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .footer .time{}

.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .user-buttons{ display: none; position: absolute; right: 10px; top: 10px; flex-direction: column; gap: 2px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .user-buttons{ width: 100%; opacity: 0; background-color: white; position: absolute; z-index: 2; bottom: 61px; left: 0; padding: 0 10px; transition: all .15s; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert:hover .advert-detail .user-buttons{ opacity: 1;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a{ font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 400; text-decoration: none; transition: all .2s; position: relative; height: 25px; width: 140px; border: 1px solid; background-color: #514e60; color: white; border-radius: 3px;}
.store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .user-buttons a{ width: unset;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a.update{ background-color: #4398f4; border-color: #4398f4;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a.doping{ background-color: #f7992a; border-color: #f7992a;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a.remove{ background-color: #e10c29; border-color: #e10c29;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a.publish{ background-color: #14c014; border-color: #14c014;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a.delete{ background-color: #ef4e4e; border-color: #ef4e4e;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a:hover{ background-color: white;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a.update:hover{ color: #4398f4;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a.doping:hover{ color: #f7992a;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a.remove:hover{ color: #e10c29;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a.delete:hover{ color: #ef4e4e;}
.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a:hover{ cursor: pointer; background-color: white; color: #514e60;}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .user-buttons a i{ position: absolute; left: 10px; top: 50%; transform: translateY(calc(-50% - 1px));}
.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert:hover .advert-detail .user-buttons{ display: flex;}

.store-profile-container .content > div .about{ display: none; width: 100%; max-width: 1180px; margin: 10px auto;}
.store-profile-container .content > div .about.active{ display: block;}
.store-profile-container .content > div .about > div{ padding: 20px; background-color: white;}
.store-profile-container .content > div .about > div .header{ border-bottom: 2px solid #b59b88; padding-bottom: 5px;}
.store-profile-container .content > div .about > div .header h2{ text-align: center; font-size: 17px;}
.store-profile-container .content > div .about > div .body{  padding: 10px 0 30px;}
.store-profile-container .content > div .about > div .body p{ font-size: 14px; color: #666;}



.store-profile-container .content > div .location{ display: none; width: 100%; max-width: 1180px; margin: 10px auto;}
.store-profile-container .content > div .location.active{ display: block;}
.store-profile-container .content > div .location > div{ padding: 20px; background-color: white;}
.store-profile-container .content > div .location > div .header{ border-bottom: 2px solid #b59b88; padding-bottom: 5px;}
.store-profile-container .content > div .location > div .header h3{ font-size: 17px; text-align: center;}
.store-profile-container .content > div .location > div .body{}
.store-profile-container .content > div .location > div .body .address{ margin-top: 5px; text-align: center;}
.store-profile-container .content > div .location > div .body .address b{ font-size: 15px; color: #111;}
.store-profile-container .content > div .location > div .body .address > span{ font-size: 14px; color: #333;}
.store-profile-container .content > div .location > div .body .address > span > span{ color: #333; font-weight: 600; margin-left: 5px;}
.store-profile-container .content > div .location > div .body .iframe > div{ width: 100%; height: 80vh;  border: 2px solid #999; padding: 5px;}
.store-profile-container .content > div .location > div .body .iframe > h5{ font-size: 16px;}
.store-profile-container .content > div .location > div .body .iframe > div iframe{ width: 100%; height: 100%;}
.store-profile-container .content > div .location > div .body .map{ margin-top: 30px;}
.store-profile-container .content > div .location > div .body .street{ margin-top: 30px;}

.store-profile-container .content > div .contact{ display: none; width: 100%; max-width: 1180px; margin: 10px auto;}
.store-profile-container .content > div .contact.active{ display: block;}
.store-profile-container .content > div .contact > div{ padding: 20px; background-color: white;}
.store-profile-container .content > div .contact > div .header{ border-bottom: 2px solid #b59b88; padding-bottom: 5px;}
.store-profile-container .content > div .contact > div .header h2{ text-align: center; font-size: 17px;}
.store-profile-container .content > div .contact > div .body{ padding: 10px 0 30px;}
.store-profile-container .content > div .contact > div .body .main > div{ display: flex; gap: 20px; margin-top: 10px;}
.store-profile-container .content > div .contact > div .body .main > div > div{ width: calc(33.3% - ((20px / 2) + 2px)); box-shadow: 0 0 5px 1px rgba(0, 0, 0, .2); border-radius: 5px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; padding: 20px;} 
.store-profile-container .content > div .contact > div .body .main > div > div > div{ box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1); width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.store-profile-container .content > div .contact > div .body .main > div > div > div img{ width: 100%;}
.store-profile-container .content > div .contact > div .body .main > div > div > div i{ font-size: 30px;}
.store-profile-container .content > div .contact > div .body .main > div > div span{ font-size: 13px; color: #888; font-weight: 600; margin-top: 5px;}
.store-profile-container .content > div .contact > div .body .main > div > div a{ text-align: center; text-decoration: none; font-weight: 600; margin-top: 5px; font-size: 14px;}
.store-profile-container .content > div .contact > div .body .main > div > div a:link{ color: #d27000; text-decoration: underline;}
.store-profile-container .content > div .contact > div .body > .social{ margin-top: 50px;}
.store-profile-container .content > div .contact > div .body > .social h5{ border-bottom: 2px solid #b59b88; text-align: center; font-size: 16px; width: 80%; margin: 0 auto;}
.store-profile-container .content > div .contact > div .body > .social > div{ display: flex; gap: 20px; margin-top: 20px;}
.store-profile-container .content > div .contact > div .body > .social > div > div{ width: 20%; border-radius: 5px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; padding: 20px;} 
.store-profile-container .content > div .contact > div .body > .social > div > div > .logo{ width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.store-profile-container .content > div .contact > div .body > .social > div > div > .logo img{ width: 100%;}
.store-profile-container .content > div .contact > div .body > .social > div > div > .logo i{ font-size: 30px;}
.store-profile-container .content > div .contact > div .body > .social > div > div > .txt{ display: flex; align-items: center; justify-content: center; flex-direction: column;}
.store-profile-container .content > div .contact > div .body > .social > div > div span{ font-size: 13px; color: #888; font-weight: 600; margin-top: 5px;}
.store-profile-container .content > div .contact > div .body > .social > div > div a{ color: black; text-align: center; text-decoration: none; font-weight: 600; margin-top: 5px; font-size: 14px;}
.store-profile-container .content > div .contact > div .body > .social > div > div.wp{ box-shadow: 0 0 5px 1px rgba(0, 160, 0, 0.2);}
.store-profile-container .content > div .contact > div .body > .social > div > div.wp > .logo{ color: green; box-shadow: 0 0 7px 1px rgba(0, 160, 0, 0.1);}
.store-profile-container .content > div .contact > div .body > .social > div > div.face{ box-shadow: 0 0 5px 1px rgba(0, 19, 160, 0.2);}
.store-profile-container .content > div .contact > div .body > .social > div > div.face > .logo{ color: rgb(0, 60, 128); box-shadow: 0 0 7px 1px rgba(8, 0, 160, 0.1);}
.store-profile-container .content > div .contact > div .body > .social > div > div.insta{ box-shadow: 0 0 5px 1px rgba(117, 0, 160, 0.2);}
.store-profile-container .content > div .contact > div .body > .social > div > div.insta > .logo{ color: rgb(109, 0, 128); box-shadow: 0 0 7px 1px rgba(144, 0, 160, 0.1);}
.store-profile-container .content > div .contact > div .body > .social > div > div.tweet{ box-shadow: 0 0 5px 1px rgba(0, 93, 160, 0.2);}
.store-profile-container .content > div .contact > div .body > .social > div > div.tweet > .logo{ color: rgb(26, 145, 225); box-shadow: 0 0 7px 1px rgba(0, 104, 160, 0.1);}
.store-profile-container .content > div .contact > div .body > .social > div > div.mail{ box-shadow: 0 0 5px 1px rgba(160, 125, 0, 0.2);}
.store-profile-container .content > div .contact > div .body > .social > div > div.mail > .logo{ color: rgb(128, 85, 0); box-shadow: 0 0 7px 1px rgba(160, 123, 0, 0.1);}

.store-profile-container .content > div .contact > div .body .advisor{ margin-top: 40px;}
.store-profile-container .content > div .contact > div .body .advisor h5{ border-bottom: 2px solid #b59b88; text-align: center; font-size: 16px; width: 60%; margin: 0 auto 20px;}
.store-profile-container .content > div .contact > div .body .advisor > div{ display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px;}
.store-profile-container .content > div .contact > div .body .advisor > div > div{ width: calc(25% - 15px); box-shadow: 0 0 5px 1px rgba(0, 0, 0, .2); border-radius: 5px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; padding: 20px;} 
.store-profile-container .content > div .contact > div .body .advisor > div > div > .img{ box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1); width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.store-profile-container .content > div .contact > div .body .advisor > div > div > .img img{ width: 100%;}
.store-profile-container .content > div .contact > div .body .advisor > div > div > .img i{ font-size: 30px;}
.store-profile-container .content > div .contact > div .body .advisor > div > div > span{ font-size: 13px; color: #888; font-weight: 600; margin-top: 5px;}
.store-profile-container .content > div .contact > div .body .advisor > div > div > a{ text-align: center; text-decoration: none; font-weight: 600; margin-top: 5px; font-size: 14px;}
.store-profile-container .content > div .contact > div .body .advisor > div > div > a.tel{ color: rgb(159, 103, 0); margin-top: 0;}
.store-profile-container .content > div .contact > div .body .advisor > div > div > a.tel:hover{ text-decoration: underline;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social{ display: flex; gap: 5px; margin-top: 3px;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a{ transition: all .1s; background-color: #e9e9e9; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 18px; color: black;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a:hover{ color: white !important;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a.wp{ color: green;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a.wp:hover{ background-color: green;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a.face{ color: darkblue;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a.face:hover{ background-color: darkblue;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a.insta{ color: #711bad;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a.insta:hover{ background-color: #711bad;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a.tweet{ color: #1d6dc2;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a.tweet:hover{ background-color: #1d6dc2;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a.mail{ color: #743e00;}
.store-profile-container .content > div .contact > div .body .advisor > div > div .social a.mail:hover{ background-color: #743e00;}

.store-profile-container .content > div .store-single-section > div .empty{ display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 5px 0 15px; background-color: rgba(255, 0, 0, 0);}
.store-profile-container .content > div .store-single-section > div .empty .icon{ 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 black;}
.store-profile-container .content > div .store-single-section > div .empty .icon::before{ content: ''; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(145deg); width: 90px; height: 5px; background-color: black; outline: 3px solid white;}
.store-profile-container .content > div .store-single-section > div .empty span{ font-size: 14px; font-weight: 600;}
.store-profile-container .content > div .store-single-section > div .empty a{ transition: all .2s ease; text-decoration: none; font-weight: 600; font-size: 13px; padding: 7px 20px; border-radius: 20px; background-color: black; color: white; border: 2px solid black; box-shadow: 0 0 10px 1px #999;}
.store-profile-container .content > div .store-single-section > div .empty a:hover{ background-color: white; color: black; box-shadow: 0 15px 10px 3px #c0c0c0; transform: scaleX(1.05);}

.store-profile-container .content > div .favorite-advert{ display: none; width: 100%; max-width: 1180px; margin: 0px auto;}
.store-profile-container .content > div .favorite-advert.active{ display: block;}
.store-profile-container .content > div .favorite-advert > div{ padding: 20px; background-color: white;}
.store-profile-container .content > div .favorite-advert > div > div h3{ text-align: center; font-size: 17px; padding-bottom: 5px; border-bottom: 2px solid #b59b88;; margin-bottom: 15px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts{ width: 100%; display: flex; flex-wrap: wrap; gap: 20px;  position: relative; }
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert{ position: relative; width: calc((25% - 20px) + (20px / 4)); border-radius: 7px; box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.1); text-decoration: none; transition: all .3s; transform: translateX(0);}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert::before, .store-profile-container .content > div .favorite-advert .adverts .advert::after{ z-index: -1; border-radius: 5px; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert:hover{ box-shadow: 0 0 7px 1px #bcbcbc;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert::before { box-shadow: 0 -3px 0 0 white;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.boost::before { box-shadow: 0 -3px 0 0 #59ca42;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.boost .img-area > small::before{ content: '\eb9b'; font-family: 'Material Icons'; position: absolute; display: inline-block; right: 0; top: 0; font-size: 11px; color: white; background-color: #35c319; padding: 5px 5px 7px 7px; font-size: 15px; border-radius: 0 0 0 5px; opacity: .95; z-index: 3;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.showcase > .img-area::before{ content: 'Vitrin İlanı'; position: absolute; display: inline-block; left: 0; top: 0; font-size: 11px; color: white; background-color: #59ca42; padding: 2px 6px; opacity: .95; z-index: 2; border-radius: 0 0 3px 0;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert::after{ box-shadow: 0 3px 0 0 white;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.urgent::after{ box-shadow: 0 3px 0 0 #ed2b2b;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.urgent > .img-area::after{ content: 'Acil  Acil'; position: absolute; display: inline-block; left: 0; bottom: 0; font-size: 11px; color: white; background-color: #ed2b2b; padding: 2px 6px; opacity: .95; z-index: 2; border-radius: 0 3px 0 0;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.bold .header > .store-detail h5{ font-weight: 600;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.bold .advert-detail h5{ font-weight: 600;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header{ height: 65px; background-color: white; border-radius: 7px 7px 0 0; position: relative;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .seller-logo{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background-color: white; width: 50px; height: 50px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .seller-logo img{ width: 100%;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.corporate .header > .seller-logo{ border-radius: 10px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.corporate .header > .seller-logo img{ border-radius: 8px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.individual .header > .seller-logo{ border-radius: 50%;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert.individual .header > .seller-logo img{ border-radius: 50%;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail{ padding: 10px 5px 7px 67px; overflow: hidden; position: relative;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail h5{ text-transform: uppercase; font-weight: 500; font-size: 14px; color: black; width: 90%; height: 15px; line-height: 1.1; -webkit-line-clamp: 1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail > div{ display: flex; position: relative; overflow: hidden;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail > div .trust{ font-size: 10px; color: rgb(7, 127, 7);}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .img-area{ height: 140px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .img-area img{ height: 160px; height: 100%; transition: all .5s ease;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .img-area .hearth-btn{ display: inline-block; position: absolute; right: 5px; bottom: 5px; height: 30px; width: 30px; border-radius: 50%; display: flex; justify-content: center; padding-top: 6px; background-color: #f5f5f5; color: #b9b9b9; border: 1px solid #b9b9b9; font-size: 16px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .img-area .hearth-btn.active{ color: #f9c50b; animation: hearth-effect-shadow 1.5s linear 1;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .img-area .hearth-btn.active i{ animation: hearth-effect 1.5s linear 1; display: inline-block;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert:hover > .img-area img{ transform: scale(1.05);}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail{ background-color: white; border-radius: 0 0 7px 7px; padding: 11px 10px 10px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail h5{ font-weight: 400; font-size: 14px; font-weight: 600; color: #262626; height: 32px; line-height: 1.1; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail p{ font-weight: 400; font-size: 11px; color: #4e4e4e; height: 25px; line-height: 1.1; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .icons{ display: flex; gap: 5px; margin-bottom: 5px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .icons span{ color: #666; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .icons span i{ font-size: 10px; transform: translateY(1px);}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices{ font-weight: 600; display: flex; gap: 3px; align-items: flex-end; margin-top: 5px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices .current-price{ font-size: 14px; color: #000; display: inline-block;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices .current-price span{ color: black; margin-right: 2px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices .last-price{ text-decoration: line-through; margin-bottom: 1px; font-size: 11px; color: #2e5124;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices .last-price span{ color: #505050;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices .another-unit{ background-color: #a3a3a3; color: white; font-size: 11px; padding: 2px 5px; font-weight: 500;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices .another-unit::before{ content: '\f0ec'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; margin-right: 2px; font-size: 8px; display: inline-block; transform: translateY(-2px);}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .info{ display: flex; justify-content: space-between; align-items: center; margin-top: 5px; padding-top: 10px; border-top: 1px solid #ddd;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .info span{ font-size: 10px; color: #7a7a7a;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert{ transition: all .3s;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert:hover{ box-shadow: 0 0 7px 1px #a4a4a4;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header{ height: 62px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .seller-logo{ width: 50px; height: 50px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header .store-detail{ padding-left: 67px; padding-top: 12px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header .store-detail h5{ text-transform: uppercase; font-size: 15px; height: 18px; font-weight: 400;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail > div .trust{ font-size: 10px; font-weight: 300; }
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail > div .trust.box{ font-size: 10px; font-weight: 300; color: white; padding: 2px 7px; border-radius: 3px; margin-top: 5px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail > div .trust:not(.box).g{ color: rgb(7, 127, 7);}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail > div .trust:not(.box).b{ color: rgb(35 150 214);}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail > div .trust:not(.box).o{ color: rgb(247 153 42)} 
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail > div .trust.box.g{ background-color: rgb(7, 127, 7);}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail > div .trust.box.b{ background-color: rgb(35 150 214);}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .header > .store-detail > div .trust.box.o{ background-color: rgb(247 153 42)}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .img-area{ height: 175px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .info span{ font-size: 12px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices{ margin-top: 12px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices .current-price{ font-size: 16px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices .last-price{ font-size: 13px;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices .another-unit{ background-color: #a3a3a3; color: white; font-size: 11px; padding: 2px 5px; font-weight: 500;}
.store-profile-container .content > div .favorite-advert > div > div .adverts .advert .advert-detail .prices .another-unit span{ margin-left: 2px; margin-right: 2px;}



.store-profile-container .content > div .stores{ display: none; width: 100%; max-width: 1180px; margin: 0px auto;}
.store-profile-container .content > div .stores.active{ display: block;}
.store-profile-container .content > div .stores > div{ padding: 20px; background-color: white;}
.store-profile-container .content > div .stores > div > div{}
.store-profile-container .content > div .stores > div > div h3{ position: relative; text-align: center; font-size: 17px; padding-bottom: 5px; border-bottom: 2px solid #b59b88;; margin-bottom: 15px;}
.store-profile-container .content > div .stores > div > div h3 a{ cursor: pointer; transition: all .2s ease; font-size: 13px; font-weight: 600; border: 1px solid #f7992a; text-decoration: none; position: absolute; right: 0; bottom: 3px; background: #f7992a; color: white; border-radius: 3px 3px 3px 3px; padding: 4px 10px;}
.store-profile-container .content > div .stores > div > div h3 a i{ margin-right: 3px;}
.store-profile-container .content > div .stores > div > div h3 a:hover{ background: white; color: #f7992a;}
.store-profile-container .content > div .stores > div > div.store-div > div{ display: flex; gap: 16px; flex-wrap: wrap;}
.store-profile-container .content > div .stores > div > div.store-div > div .store{ position: relative; width: calc((25% - (16px)) + (16px / 4)); box-shadow: 0 0 3px 1px rgb(0, 0, 0, 0.15); padding: 10px; border-radius: 0 0 5px 5px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .img-area{ width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 5px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .img-area img{ height: 100%;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .top-info{ font-weight: 600; top: 5px; position: absolute; display: inline-block; padding: 3px 15px; border-radius: 15px; font-size: 10px;}
/* .store-profile-container .content > div .stores > div > div.store-div > div .store .top-info.red{ background-color: #d74949; color: white;} */
.store-profile-container .content > div .stores > div > div.store-div > div .store .top-info.blue{ background-color: #4398f4; color: white;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .top-info.green{ background-color: #42c342; color: white;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .status{ right: 5px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .package{ background-color: #44c9e8; color: white; left: 5px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store > b{ color: #555; font-size: 14px; font-weight: 600;}
.store-profile-container .content > div .stores > div > div.store-div > div .store h4{ text-align: center; }
.store-profile-container .content > div .stores > div > div.store-div > div .store .info{ width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 5px 0;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .info span{ font-size: 13px; text-align: center;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .info span b{ }
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons{ width: 100%; margin-top: 5px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > a{ transition: all .2s ease; background-color: #e7881c; color: white; border: 1px solid #e7881c; font-weight: 500; text-decoration: none; font-size: 13px; text-align: center; padding: 3px 5px 4px; border-radius: 3px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > a:hover{ background-color: white; color: #e7881c;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons-payment{ width: 100%; margin-top: 5px; display: grid; grid-template-columns: 1fr; gap: 10px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons-payment > a{ transition: all .2s ease; background-color: #44c9e8; color: white; border: 1px solid #44c9e8; font-weight: 500; text-decoration: none; font-size: 13px; text-align: center; padding: 3px 5px 4px; border-radius: 3px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons-payment > a:hover{ background-color: white; color: #44c9e8;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons-advisor{ width: 100%; margin-top: 5px; display: grid; grid-template-columns: 1fr; gap: 10px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons-advisor > a{ transition: all .2s ease; background-color: #e7881c; color: white; border: 1px solid #e7881c; font-weight: 500; text-decoration: none; font-size: 13px; text-align: center; padding: 3px 5px 4px; border-radius: 3px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons-advisor > a:hover{ background-color: white; color: #e7881c;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > .other{ position: relative; display: flex; flex-direction: column;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > .other > span{ cursor: pointer; height: 100%; font-size: 13px; font-size: 13px; background-color: #353a58; color: white; display: flex; justify-content: space-between; align-items: center; padding: 3px 8px 4px; border-radius: 3px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > .other > span i{ transition: all .1s ease;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > .other > div{ transition: all .1s ease; position: absolute; top: 100%; height: 0; overflow: hidden;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > .other > div a{ transition: all .1s ease; display: inline-block; width: 100%; text-decoration: none; font-size: 12px; background-color: white; color: black; border: 1px solid #909090; border-top: none; text-align: center; padding: 3px 0 4px;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > .other > div a:nth-child(1){ transform: translateY(-1px);}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > .other > div a:nth-child(2){ transform: translateY(-2.5px);}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > .other > div a:nth-child(3){ transform: translateY(-3px);}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons > .other > div a:hover{ background-color: #e7881c; color: white;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons.active > .other > span{ border-radius: 3px 3px 0 0;}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons.active > .other > span i{ transform: rotate(180deg);}
.store-profile-container .content > div .stores > div > div.store-div > div .store .buttons.active > .other > div{ height: 85px;}

/* .store-profile-container .content > div .stores > div > div h3{ text-align: center; font-size: 17px; padding-bottom: 5px; border-bottom: 2px solid #b59b88;; margin-bottom: 15px;}
.store-profile-container .content > div .stores > div > div > div{ display: flex; gap: 16px; flex-wrap: wrap;}
.store-profile-container .content > div .stores > div > div > div .store{ width: calc((25% - (16px)) + (16px / 4)); box-shadow: 0 3px 3px 1px rgb(0, 0, 0, 0.1); padding-bottom: 10px; border-radius: 0 0 5px 5px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.store-profile-container .content > div .stores > div > div > div .store h5{ background-color: #0d314f; border-top: 5px solid #03bbf4; color: white; width: 100%; padding: 5px 0; text-align: center; font-weight: 700; font-size: 16px;}
.store-profile-container .content > div .stores > div > div > div .store .img-area{ width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 5px; margin: 5px 0;}
.store-profile-container .content > div .stores > div > div > div .store .img-area img{ height: 100%;}
.store-profile-container .content > div .stores > div > div > div .store .info{ display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 0 10px; gap: 10px;}
.store-profile-container .content > div .stores > div > div > div .store .info > div{ box-shadow: 0 0 2px 1px rgb(0 0 0 / 10%); margin: 5px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #e5e5e5; border-radius: 5px;}
.store-profile-container .content > div .stores > div > div > div .store .info > div .number{ font-weight: 700; font-size: 22px; padding: 5px 0;}
.store-profile-container .content > div .stores > div > div > div .store .info > div .txt{ font-weight: 600; font-size: 14px; display: inline-block; width: 100%; text-align: center; background-color: #f5f5f5; border-radius: 0 0 5px 5px; border-top: 1px solid #e5e5e5; padding: 3px 0;}
.store-profile-container .content > div .stores > div > div > div .store .btn{ transition: background-color .2s ease, color .2s ease; font-size: 12px; text-decoration: none; padding: 3px 12px; margin: 8px 0 5px; font-weight: 600; background-color: #0d314f; border: 2px solid #0d314f; border-radius: 15px; color: white;}
.store-profile-container .content > div .stores > div > div > div .store .btn:hover{ color: #0d314f; background-color: white;}
.store-profile-container .content > div .stores > div > div > div .store .txt-btn{ font-size: 12px; text-decoration: none; font-weight: 700; color: #0d314f;}
.store-profile-container .content > div .stores > div > div > div .store .txt-btn:hover{ text-decoration: underline;} */



.store-profile-container .content > div .orders{ display: none; width: 100%; max-width: 1180px; margin: 0px auto;}
.store-profile-container .content > div .orders.active{ display: block;}
.store-profile-container .content > div .orders > div{ padding: 20px; background-color: white;}
.store-profile-container .content > div .orders > div > div{ }
.store-profile-container .content > div .orders > div > div h3{ text-align: center; font-size: 17px; padding-bottom: 5px; border-bottom: 2px solid #b59b88;; margin-bottom: 15px;}
.store-profile-container .content > div .orders > div > div > div{ border-radius: 10px; overflow: hidden; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);}
.store-profile-container .content > div .orders > div > div > div > .header{ display: grid; grid-template-columns: 1fr 100px 150px 100px 150px 110px; background-color: var(--dark-blue); color: white;}
.store-profile-container .content > div .orders > div > div > div > .header > div{ font-size: 14px; font-weight: 500; text-align: center; padding: 10px 0;}
.store-profile-container .content > div .orders > div > div > div > .order{ border-bottom: 1px solid #ddd; display: grid; grid-template-columns: 1fr 100px 150px 100px 150px 110px;}
.store-profile-container .content > div .orders > div > div > div > .order:nth-child(odd){ background-color: #fffcf9;}
.store-profile-container .content > div .orders > div > div > div > .order:last-child{ border-bottom: moccasin;}
.store-profile-container .content > div .orders > div > div > div > .order > div{ text-align: center; padding: 8px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 13px;}
.store-profile-container .content > div .orders > div > div > div > .order > div b{ font-size: 11px;}
.store-profile-container .content > div .orders > div > div > div > .order > div.advert{ padding-left: 5px; text-align: start; align-items: baseline;}
.store-profile-container .content > div .orders > div > div > div > .order > div.advert a{ color: black; text-decoration: none; height: 18px; line-height: 1.3; -webkit-line-clamp: 1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.store-profile-container .content > div .orders > div > div > div > .order > div.advert a:hover{ text-decoration: underline;}
.store-profile-container .content > div .orders > div > div > div > .order > div.price{ color: #8b5200; font-weight: 500;}
.store-profile-container .content > div .orders > div > div > div > .order > div.detail a{ padding: 4px 10px; border-radius: 3px; font-size: 11px; text-decoration: none;}
.store-profile-container .content > div .orders > div > div > div > .order > div.detail a.blue{ background-color: #0059b5; color: white;}
.store-profile-container .content > div .orders > div > div > div > .order > div.detail a i{ font-size: 10px; margin-left: 3px; transform: translateY(.7px);}
.store-profile-container .content > div .orders > div > div > div > .order > div.status span{ font-size: 11px; padding: 4px 10px; border-radius: 3px;}
.store-profile-container .content > div .orders > div > div > div > .order > div.status span.green{ color: white; background-color: #14c014;}
.store-profile-container .content > div .orders > div > div > div > .order > div.status span.orange{ color: white; background-color: #ec901d;}
.store-profile-container .content > div .orders > div > div > div > .order > div.status span.blue{ color: white; background-color: #1d81ec;}
.store-profile-container .content > div .orders > div > div > div > .order > div.status span.red{ color: white; background-color: #c01414;}
.store-profile-container .content > div .orders > div > div > div > .order > div.status span{ font-size: 11px; padding: 4px 10px; border-radius: 3px;}
.store-profile-container .content > div .orders > div > div > div > .order > div.status span.green{ color: white; background-color: #14c014;}
.store-profile-container .content > div .orders > div > div > div > .order > div.status span.orange{ color: white; background-color: #ec901d;}
.store-profile-container .content > div .orders > div > div > div > .order > div.status span.blue{ color: white; background-color: #1d81ec;}
.store-profile-container .content > div .orders > div > div > div > .order > div.status span.red{ color: white; background-color: #c01414;}


.store-profile-container .content > div .get-sales{ display: none; width: 100%; max-width: 1180px; margin: 0px auto;}
.store-profile-container .content > div .get-sales.active{ display: block;}
.store-profile-container .content > div .get-sales > div{ padding: 20px; background-color: white;}
.store-profile-container .content > div .get-sales > div > div h3{ text-align: center; font-size: 17px; padding-bottom: 5px; border-bottom: 2px solid #b59b88;; margin-bottom: 15px;}
.store-profile-container .content > div .get-sales > div > div > div{ border-radius: 10px; overflow: hidden; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);}
.store-profile-container .content > div .get-sales > div > div > div > .header{ display: grid; grid-template-columns: 1fr 100px 100px 150px 100px 150px 150px 120px; background-color: var(--dark-blue); color: white;}
.store-profile-container .content > div .get-sales > div > div > div > .header > div{ font-size: 14px; font-weight: 500; text-align: center; padding: 10px 0;}
.store-profile-container .content > div .get-sales > div > div > div > .order{ border-bottom: 1px solid #ddd; display: grid; grid-template-columns: 1fr 100px 100px 150px 100px 150px 150px 120px;}
.store-profile-container .content > div .get-sales > div > div > div > .order:nth-child(odd){ background-color: #fffcf9;}
.store-profile-container .content > div .get-sales > div > div > div > .order:last-child{ border-bottom: moccasin;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div{ text-align: center; padding: 8px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 13px;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div a{ text-decoration: none; color:black; }
.store-profile-container .content > div .get-sales > div > div > div > .order > div a:hover{ text-decoration: underline;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div b{ font-size: 11px;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.advert{ padding-left: 5px; text-align: start; align-items: baseline;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.advert a{ width: 100%; color: black; text-decoration: none; height: 30px; line-height: 1.1; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.advert a:hover{ text-decoration: underline;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.price{ color: #8b5200; font-weight: 500;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.net-price{ color: #1e7503; font-weight: 500;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.date{ line-height: 1.3;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.detail a{ padding: 4px 10px; border-radius: 3px; font-size: 11px; text-decoration: none;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.detail a.blue{ background-color: #0059b5; color: white;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.detail a i{ font-size: 11px; margin-left: 3px; transform: translateY(.7px);}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.status span{ font-size: 11px; padding: 4px 10px; border-radius: 3px;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.status span.green{ color: white; background-color: #14c014;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.status span.orange{ color: white; background-color: #ec901d;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.status span.blue{ color: white; background-color: #1d81ec;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.status span.red{ color: white; background-color: #c01414;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.pay-status span{ font-size: 11px; padding: 4px 10px; border-radius: 3px;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.pay-status span.green{ color: white; background-color: #14c014;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.pay-status span.orange{ color: white; background-color: #ec901d;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.pay-status span.blue{ color: white; background-color: #1d81ec;}
.store-profile-container .content > div .get-sales > div > div > div > .order > div.pay-status span.red{ color: white; background-color: #c01414;}

.store-profile-container .content > div .buy-package{ display: none; width: 100%; max-width: 1180px; margin: 0px auto;}
.store-profile-container .content > div .buy-package.active{ display: block;}
/* .store-profile-container .content > div .buy-package > div{ padding: 20px; background-color: white;} */
.store-profile-container .content > div .buy-package > div > div h3{ text-align: center; font-size: 17px; padding-bottom: 5px; border-bottom: 2px solid #b59b88;; margin-bottom: 15px;}
.store-profile-container .content > div .buy-package > div > div > div{}

.store-profile-container .content > div > div > div > div > div .package-section{ padding-bottom: 20px;}
.store-profile-container .content > div > div > div > div > div .package-section > div{ width: 100%; max-width: 1050px; margin: 0 auto;}
.store-profile-container .content > div > div > div > div > div .package-section .header{}
.store-profile-container .content > div > div > div > div > div .package-section .header .type{ width: fit-content; margin: 0 auto; display: flex; gap: 10px; padding: 10px 0 30px;}
.store-profile-container .content > div > div > div > div > div .package-section .header .type a{ cursor: pointer; transition: all .2s ease; text-decoration: none; background-color: white; border: 1px solid #dadbdd; color: #999; border-radius: 20px; padding: 6px 55px 7px; font-size: 15px; font-weight: 500;}
.store-profile-container .content > div > div > div > div > div .package-section .header .type a:not(.active):hover{ color: black; border-color: #999;}
.store-profile-container .content > div > div > div > div > div .package-section .header .type a.active{ pointer-events: none; background-color: #f7992a; border-color: #f7992a; color: white;}
.store-profile-container .content > div > div > div > div > div .package-section .packages{ display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card{ position: relative; overflow: hidden; width: calc(((100% / 3) - (20px)) + (20px / 3)); background-color: #fff; border-radius: 7px; box-shadow: -1px 6px 7px 0 #c5c5c5;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head{ position: relative;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div{ position: relative; width: 100%; max-width: 200px; margin: 0 auto; background-color: #f7f7f7; padding: 0 10px 10px; border-radius: 0 0 20px 20px; border: 1px solid #eaeaea; border-top: none; /*box-shadow: 0 0 10px 0 #bebebe;*/}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div::before, .store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div::after{ content: ''; background-color: #f7f7f7; width: 20px; height: 20px; position: absolute; top: -10px; z-index: 1;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div::before{ left: -12px; rotate: 45deg;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div::after{ right: -12px; rotate: -45deg;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card.active .head > div > div{ background-color: #24d824}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > div{ background-color: #f7992a; color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; color: white; font-size: 14px; height: 33px; border-radius: 0 0 15px 15px; position: relative;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > div::before, .store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > div::after{ content: ''; background-color: #f7992a; width: 27px; height: 38px; position: absolute; z-index: 2; top: -25px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card.active .head > div > div::before, .store-profile-container .content > div > div > div > div > div .package-section .packages .card.active .head > div > div::after{ background-color: #24d824;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > div::before{ left: -3px; rotate: 62deg;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > div::after{ right: -3px; rotate: -62deg;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > small::before, .store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > small::after{ content: ''; width: 13px; height: 21px; background-color: #f7f7f7; position: absolute; top: 0px; z-index: 3; border-radius: 50%;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > small::before{ left: -4.35px; rotate: 331deg;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > small::after{ right: -4.35px; rotate: -331deg;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > b::before, .store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > b::after{ content: ''; width: 12px; height: 24px; background-color: #fff; position: absolute; top: -4px; z-index: 4; border-radius: 50%;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > b::before{ border-right: 1px solid #eaeaea; left: -17.5px; rotate: 313deg;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .head > div > b::after{ border-left: 1px solid #eaeaea; right: -17.5px; rotate: -313deg;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body{ display: flex; align-items: center; flex-direction: column; padding-top: 15px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .price{ display: flex; align-items: center; justify-content: space-between; flex-direction: column; color: #150b00; height: 51px; margin-bottom: 15px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .price > b{ font-size: 30px; line-height: 1.1; position: relative;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .price > b.free{ font-size: 25px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .price > b small{ font-size: 13px; position: absolute; bottom: 2px; right: -13px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .price > span{ font-weight: 700; color: #150b00; opacity: .4; letter-spacing: .3px; margin-top: auto; font-size: 11px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body ul{ list-style: none; display: flex; /*align-items: center;*/ flex-direction: column; gap: 6px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body ul li{ font-size: 14px; font-weight: 500;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body ul li span{ color: #333;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body ul li::before{ font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; margin-right: 8px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body ul li:not(.active){ color: #ccc;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body ul li:not(.active)::before{ content: '\f00d'; color: #e20000;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body ul li.active{ color: #666;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body ul li.active::before{ content: '\f00c'; color: #00e903;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .button-area{ display: flex; align-items: center; gap: 5px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .button-area .select{ transition: all .15s ease; font-family: 'Poppins', sans-serif; background-color: #f7992a; color: white; font-size: 14px; font-weight: 600; border: 1px solid #f7992a; border-radius: 3px; width: 200px; height: 40px; margin: 25px 0; box-shadow: -1px 1px 10px 0 #bbb;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card.active .body .button-area .select{ background-color: #24d824; border-color: #24d824;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card.active .body .button-area .select:hover{ color: #24d824;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card.active .body .button-area .select::before{ content: 'Sipariş Oluştur';}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .button-area .select::before{ content: 'Paketi Seç';}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .button-area .select:hover{ background-color: #fff; color: #f7992a; box-shadow: -2px 2px 7px 1px #ccc; transform: translate(2px, -2px); cursor: pointer;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .button-area .select:active{ box-shadow: 0 0 2px 0 #ccc; transform: translate(0);}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .button-area .open-avantage{ transition: all .2s ease; width: 100px; height: 40px; background-color: #f7992a; border: 1px solid #f7992a; box-shadow: -1px 1px 10px 0 #bbb; border-radius: 3px; color: white;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .button-area .open-avantage:hover{ background-color: #fff; color: #f7992a; box-shadow: -2px 2px 7px 1px #ccc; transform: translate(2px, -2px); cursor: pointer;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card.open .body .button-area .open-avantage{ background-color: #24d824; border: 1px solid #24d824;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card.open .body .button-area .open-avantage:hover{ background-color: #fff; color: #24d824;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .body .button-area .open-avantage:active{ box-shadow: 0 0 2px 0 #ccc; transform: translate(0);}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .avantages{ opacity: 0; pointer-events: none; transition: all .15s; position: absolute; background-color: white; padding: 0 10px 10px; top: 58px; left: 30px; width: calc(100% - 60px); font-size: 13px; height: 244px; overflow-y: auto;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card.open .avantages{ opacity: 1; pointer-events: all;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .avantages > b{ display: inline-block; width: 100%; text-align: center; margin-bottom: 5px; font-size: 14px; font-weight: 600;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .avantages::-webkit-scrollbar{ border-radius: 7px; width: 6px; background-color: #f0f0f0;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .avantages::-webkit-scrollbar-thumb{ border-radius: 7px; background-color: #ccc; }
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .avantages ul{ display: flex; flex-direction: column; gap: 13px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .avantages ul li{ position: relative; font-size: 13px; line-height: 1.25; padding-left: 20px;}
.store-profile-container .content > div > div > div > div > div .package-section .packages .card .avantages ul li::before{ content: '\f00c'; color: #00e903; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; display: inline-block; position: absolute; left: 0; top: 0px;}



/* USER PROFILE EDIT */
.store-profile-container .content > div .profile-info{ display: none; width: 100%; max-width: 1180px; margin: 0px auto;}
.store-profile-container .content > div .profile-info.active{ display: block;}
.store-profile-container .content > div .profile-info > div{ padding: 20px; background-color: white;}
.store-profile-container .content > div .profile-info > div h4{ text-align: center; font-size: 20px; padding-bottom: 5px;; margin-bottom: 15px; border-bottom: 1px solid #999;}
/* .store-profile-container .content > div .profile-info > div form{}
.store-profile-container .content > div .profile-info > div form > .container{ border-top: 1px solid #333; border-bottom: 1px solid #333;}
.store-profile-container .content > div .profile-info > div form > .container > div{ position: relative; display: grid; padding: 5px 0; grid-template-columns: 200px auto; border-bottom: 1px solid #ddd;}
.store-profile-container .content > div .profile-info > div form > .container > div.address{ height: 59px;}
.store-profile-container .content > div .profile-info > div form > .container > div.address textarea{ height: 100%; padding-top: 3px; resize: none;}
.store-profile-container .content > div .profile-info > div form > .container > div:last-child{ border-bottom: none;}
.store-profile-container .content > div .profile-info > div form > .container > div > div:first-child{ display: flex; align-items: center;}
.store-profile-container .content > div .profile-info > div form > .container > div > div:first-child label{ font-weight: 600; font-size: 13px;}
.store-profile-container .content > div .profile-info > div form > .container > div > div input, .store-profile-container .content > div .profile-info > div form > .container > div > div select, .store-profile-container .content > div .profile-info > div form > .container > div > div textarea{ width: 100%; height: 100%; border: none; height: 30px; padding-left: 5px; border-radius: 3px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .profile-info > div form > .container > div > div input:focus-visible, .store-profile-container .content > div .profile-info > div form > .container > div > div select:focus-visible, .store-profile-container .content > div .profile-info > div form > .container > div > div textarea:focus-visible{ outline: none; background-color: #fff; outline: 1px solid #db7e13;} */
/* .store-profile-container .content > div .profile-info > div form > .container > div > div.tel{ position: relative;}
.store-profile-container .content > div .profile-info > div form > .container > div > div.tel input{ padding-left: 25px;}
.store-profile-container .content > div .profile-info > div form > .container > div > div.tel::before{ content: '(0)'; font-size: 12px; display: inline-block; position: absolute; top: 5px; left: 5px;} */
/* .store-profile-container .content > div .profile-info > div form > .container > div > div select{ padding-left: 0px;}
.store-profile-container .content > div .profile-info > div form > .container > div > div textarea{ }
.store-profile-container .content > div .profile-info > div form > .buttons{ margin-top: 10px; display: flex; justify-content: end; gap: 10px;}
.store-profile-container .content > div .profile-info > div form > .buttons button{ transition: all .2s ease; cursor: pointer; padding: 8px 15px; border: 2px solid; border-radius: 3px; font-weight: 600; font-size: 13px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .profile-info > div form > .buttons button:active{ transform: translate(0,0) !important; box-shadow: 0 0 5px 1px #969696 !important;}
.store-profile-container .content > div .profile-info > div form > .buttons button:hover{ box-shadow: -3px 5px 10px 1px #b5b5b5; transform: translate(1px, -1px);}
.store-profile-container .content > div .profile-info > div form > .buttons .cancel{ background-color: #e3e3e3; border-color: #e3e3e3; color: #535353;}
.store-profile-container .content > div .profile-info > div form > .buttons .cancel:hover{ background-color: white; border-color: #535353;}
.store-profile-container .content > div .profile-info > div form > .buttons .update{ background-color: #397ed9; color: rgba(255, 255, 255, 0.9); border-color: #397ed9;}
.store-profile-container .content > div .profile-info > div form > .buttons .update:hover{ background-color: white; color: #397ed9;} */
.store-profile-container .content > div .profile-info > div form{}
.store-profile-container .content > div .profile-info > div form .container{ display: grid; grid-template-columns: 1fr 1fr;}
.store-profile-container .content > div .profile-info > div form .container > div:first-child{ padding-right: 20px; border-right: 1px solid #cdcdcd;}
.store-profile-container .content > div .profile-info > div form .container > div:last-child{ padding-left: 20px; }
.store-profile-container .content > div .profile-info > div form .container > div h5{ font-size: 16px; font-weight: 600; color: #f7992a; margin-bottom: 10px;}
.store-profile-container .content > div .profile-info > div form .container > div label{ font-size: 13px; font-weight: 600;}
.store-profile-container .content > div .profile-info > div form .container > div small{ display: inline-block; width: 100%; font-size: 12px; color: #555; transform: translateY(-7px);}
.store-profile-container .content > div .profile-info > div form .container > div small + div input, .store-profile-container .content > div .profile-info > div form .container > div small + div textarea, .store-profile-container .content > div .profile-info > div form .container > div small + div select{ transform: translateY(-7px); margin-bottom: 6px;}
.store-profile-container .content > div .profile-info > div form .container > div > div{ }
.store-profile-container .content > div .profile-info > div form .container > div > div input, .store-profile-container .content > div .profile-info > div form .container > div > div textarea, .store-profile-container .content > div .profile-info > div form .container > div > div select{ transition: all .2s ease; width: 100%;  height: 40px; margin-bottom: 13px; margin-top: 3px; border-radius: 3px; border: 1px solid #d1d1d1; background-color: #fbfbfb; padding: 0 10px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .profile-info > div form .container > div > div input:focus, .store-profile-container .content > div .profile-info > div form .container > div > div textarea:focus, .store-profile-container .content > div .profile-info > div form .container > div > div select:focus{ background-color: white; border-color: #f1bf52; box-shadow: 0 0 0 3px #ffe5ac; outline: none;}
.store-profile-container .content > div .profile-info > div form .container > div > div textarea{ padding-top: 10px; height: 72px; resize: none;}
.store-profile-container .content > div .profile-info > div form > .buttons{ margin-top: 10px; display: flex; justify-content: end; gap: 10px;}
.store-profile-container .content > div .profile-info > div form > .buttons button{ transition: all .2s ease; cursor: pointer; padding: 8px 15px; border: 2px solid; border-radius: 3px; font-weight: 600; font-size: 13px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .profile-info > div form > .buttons button:active{ transform: translate(0,0) !important; box-shadow: 0 0 5px 1px #969696 !important;}
.store-profile-container .content > div .profile-info > div form > .buttons button:hover{ box-shadow: -3px 5px 10px 1px #b5b5b5; transform: translate(1px, -1px);}
.store-profile-container .content > div .profile-info > div form > .buttons .cancel{ background-color: #e3e3e3; border-color: #e3e3e3; color: #535353;}
.store-profile-container .content > div .profile-info > div form > .buttons .cancel:hover{ background-color: white; border-color: #535353;}
.store-profile-container .content > div .profile-info > div form > .buttons .update{ background-color: #397ed9; color: rgba(255, 255, 255, 0.9); border-color: #397ed9;}
.store-profile-container .content > div .profile-info > div form > .buttons .update:hover{ background-color: white; color: #397ed9;}



.store-profile-container .content > div .store-info{ display: none; width: 100%; max-width: 1180px; margin: 0px auto;}
.store-profile-container .content > div .store-info.active{ display: block;}
.store-profile-container .content > div .store-info > div{ padding: 20px; background-color: white;}
.store-profile-container .content > div .store-info > div h4{ text-align: center; font-size: 20px; padding-bottom: 5px;; margin-bottom: 15px; border-bottom: 1px solid #999;}
/* .store-profile-container .content > div .store-info > div form{}
.store-profile-container .content > div .store-info > div form > .container{ border-top: 1px solid #333; border-bottom: 1px solid #333;}
.store-profile-container .content > div .store-info > div form > .container > div:first-child{ border-bottom: 1px solid #ddd;}
.store-profile-container .content > div .store-info > div form > .container > div > div{ position: relative; display: grid; padding: 5px 0; grid-template-columns: 200px auto; border-bottom: 1px solid #ddd;}
.store-profile-container .content > div .store-info > div form > .container > div > div.address{ height: 59px;}
.store-profile-container .content > div .store-info > div form > .container > div > div.address textarea{ height: 100%; padding-top: 3px; resize: none;}
.store-profile-container .content > div .store-info > div form > .container > div > div:last-child{ border-bottom: none;}
.store-profile-container .content > div .store-info > div form > .container > div > div > div:first-child{ display: flex; align-items: center;}
.store-profile-container .content > div .store-info > div form > .container > div > div > div:first-child label{ font-weight: 600; font-size: 13px;}
.store-profile-container .content > div .store-info > div form > .container > div > div > div input, .store-profile-container .content > div .store-info > div form > .container > div > div > div select, .store-profile-container .content > div .store-info > div form > .container > div > div > div textarea{ width: 100%; height: 100%; border: none; height: 30px; padding-left: 5px; border-radius: 3px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .store-info > div form > .container > div > div > div input:focus-visible, .store-profile-container .content > div .store-info > div form > .container > div > div > div select:focus-visible, .store-profile-container .content > div .store-info > div form > .container > div > div > div textarea:focus-visible{ outline: none; background-color: #fff; outline: 1px solid #db7e13;} */
/* .store-profile-container .content > div .store-info > div form > .container > div > div > div.tel{ position: relative;}
.store-profile-container .content > div .store-info > div form > .container > div > div > div.tel input{ padding-left: 25px;}
.store-profile-container .content > div .store-info > div form > .container > div > div > div.tel::before{ content: '(0)'; font-size: 12px; display: inline-block; position: absolute; top: 5px; left: 5px;} */
/* .store-profile-container .content > div .store-info > div form > .container > div > div > div select{ padding-left: 0px;}
.store-profile-container .content > div .store-info > div form > .container > div > div > div textarea{ }
.store-profile-container .content > div .store-info > div form > .buttons{ margin-top: 10px; display: flex; justify-content: end; gap: 10px;}
.store-profile-container .content > div .store-info > div form > .buttons button{ transition: all .2s ease; cursor: pointer; padding: 8px 15px; border: 2px solid; border-radius: 3px; font-weight: 600; font-size: 13px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .store-info > div form > .buttons button:active{ transform: translate(0,0) !important; box-shadow: 0 0 5px 1px #969696 !important;}
.store-profile-container .content > div .store-info > div form > .buttons button:hover{ box-shadow: -3px 5px 10px 1px #b5b5b5; transform: translate(1px, -1px);}
.store-profile-container .content > div .store-info > div form > .buttons .cancel{ background-color: #e3e3e3; border-color: #e3e3e3; color: #686868;}
.store-profile-container .content > div .store-info > div form > .buttons .cancel:hover{ background-color: white; border-color: #535353;}
.store-profile-container .content > div .store-info > div form > .buttons .update{ background-color: #397ed9; color: rgba(255, 255, 255, 0.9); border-color: #397ed9;}
.store-profile-container .content > div .store-info > div form > .buttons .update:hover{ background-color: white; color: #397ed9;} */
.store-profile-container .content > div .store-info > div form{}
.store-profile-container .content > div .store-info > div form .container > div > div{}
.store-profile-container .content > div .store-info > div form .container > div > div.grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.store-profile-container .content > div .store-info > div form .container > div > div label{ font-size: 13px; font-weight: 600;}
.store-profile-container .content > div .store-info > div form .container > div > div small{ display: inline-block; width: 100%; font-size: 12px; color: #555; transform: translateY(-7px);}
.store-profile-container .content > div .store-info > div form .container > div > div small + div input, .store-profile-container .content > div .store-info > div form .container > div > div small + div textarea, .store-profile-container .content > div .store-info > div form .container > div > div small + div select{ transform: translateY(-7px); margin-bottom: 6px;}
.store-profile-container .content > div .store-info > div form .container > div > div > div{ }
.store-profile-container .content > div .store-info > div form .container > div > div > div input, .store-profile-container .content > div .store-info > div form .container > div > div > div textarea, .store-profile-container .content > div .store-info > div form .container > div > div > div select{ transition: all .2s ease; width: 100%;  height: 40px; margin-bottom: 13px; margin-top: 3px; border-radius: 3px; border: 1px solid #d1d1d1; background-color: #fbfbfb; padding: 0 10px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .store-info > div form .container > div > div > div input:focus, .store-profile-container .content > div .store-info > div form .container > div > div > div textarea:focus, .store-profile-container .content > div .store-info > div form .container > div > div > div select:focus{ background-color: white; border-color: #f1bf52; box-shadow: 0 0 0 3px #ffe5ac; outline: none;}
.store-profile-container .content > div .store-info > div form .container > div > div > div textarea{ padding-top: 10px; height: 72px; resize: none;}
.store-profile-container .content > div .store-info > div form > .buttons{ margin-top: 10px; display: flex; justify-content: end; gap: 10px;}
.store-profile-container .content > div .store-info > div form > .buttons button{ transition: all .2s ease; cursor: pointer; padding: 8px 15px; border: 2px solid; border-radius: 3px; font-weight: 600; font-size: 13px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .store-info > div form > .buttons button:active{ transform: translate(0,0) !important; box-shadow: 0 0 5px 1px #969696 !important;}
.store-profile-container .content > div .store-info > div form > .buttons button:hover{ box-shadow: -3px 5px 10px 1px #b5b5b5; transform: translate(1px, -1px);}
.store-profile-container .content > div .store-info > div form > .buttons .cancel{ background-color: #e3e3e3; border-color: #e3e3e3; color: #535353;}
.store-profile-container .content > div .store-info > div form > .buttons .cancel:hover{ background-color: white; border-color: #535353;}
.store-profile-container .content > div .store-info > div form > .buttons .update{ background-color: #397ed9; color: rgba(255, 255, 255, 0.9); border-color: #397ed9;}
.store-profile-container .content > div .store-info > div form > .buttons .update:hover{ background-color: white; color: #397ed9;}





.store-profile-container .content > div .get-seller-info{ display: none; width: 100%; max-width: 1180px; margin: 0px auto;}
.store-profile-container .content > div .get-seller-info.active{ display: block;}
.store-profile-container .content > div .get-seller-info > div{ padding: 20px; background-color: white;}
.store-profile-container .content > div .get-seller-info > div h4{ text-align: center; font-size: 20px; padding-bottom: 5px;; margin-bottom: 15px; border-bottom: 1px solid #999;}
/* .store-profile-container .content > div .get-seller-info > div form{}
.store-profile-container .content > div .get-seller-info > div form > .container{ border-top: 1px solid #333; border-bottom: 1px solid #333;}
.store-profile-container .content > div .get-seller-info > div form > .container > div{ position: relative; display: grid; padding: 5px 0; grid-template-columns: 300px auto; border-bottom: 1px solid #ddd;}
.store-profile-container .content > div .get-seller-info > div form > .container > div.payment{ height: 62px;}
.store-profile-container .content > div .get-seller-info > div form > .container > div.payment textarea{ height: 100%; padding-top: 3px; resize: none;}
.store-profile-container .content > div .get-seller-info > div form > .container > div:last-child{ border-bottom: none;}
.store-profile-container .content > div .get-seller-info > div form > .container > div > div:first-child{ display: flex; align-items: baseline; justify-content: center; flex-direction: column;}
.store-profile-container .content > div .get-seller-info > div form > .container > div > div:first-child small{ font-size: 11px; color: #888; resize: none;}
.store-profile-container .content > div .get-seller-info > div form > .container > div > div:first-child label{ font-weight: 600; font-size: 13px;}
.store-profile-container .content > div .get-seller-info > div form > .container > div > div input, .store-profile-container .content > div .get-seller-info > div form > .container > div > div select, .store-profile-container .content > div .get-seller-info > div form > .container > div > div textarea{ width: 100%; height: 100%; border: none; height: 30px; padding-left: 5px; border-radius: 3px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .get-seller-info > div form > .container > div > div input:focus-visible, .store-profile-container .content > div .get-seller-info > div form > .container > div > div select:focus-visible, .store-profile-container .content > div .get-seller-info > div form > .container > div > div textarea:focus-visible{ outline: none; background-color: #fff; outline: 1px solid #db7e13;} */
/* .store-profile-container .content > div .get-seller-info > div form > .container > div > div.tel{ position: relative;}
.store-profile-container .content > div .get-seller-info > div form > .container > div > div.tel input{ padding-left: 25px;}
.store-profile-container .content > div .get-seller-info > div form > .container > div > div.tel::before{ content: '(0)'; font-size: 12px; display: inline-block; position: absolute; top: 5px; left: 5px;} */
/* .store-profile-container .content > div .get-seller-info > div form > .container > div > div select{ padding-left: 0px;}
.store-profile-container .content > div .get-seller-info > div form > .container > div > div textarea{ }
.store-profile-container .content > div .get-seller-info > div form > .buttons{ margin-top: 10px; display: flex; justify-content: end; gap: 10px;}
.store-profile-container .content > div .get-seller-info > div form > .buttons button{ transition: all .2s ease; cursor: pointer; padding: 8px 15px; border: 2px solid; border-radius: 3px; font-weight: 600; font-size: 13px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .get-seller-info > div form > .buttons button:active{ transform: translate(0,0) !important; box-shadow: 0 0 5px 1px #969696 !important;}
.store-profile-container .content > div .get-seller-info > div form > .buttons button:hover{ box-shadow: -3px 5px 10px 1px #b5b5b5; transform: translate(1px, -1px);}
.store-profile-container .content > div .get-seller-info > div form > .buttons .cancel{ background-color: #e3e3e3; border-color: #e3e3e3; color: #535353;}
.store-profile-container .content > div .get-seller-info > div form > .buttons .cancel:hover{ background-color: white; border-color: #535353;}
.store-profile-container .content > div .get-seller-info > div form > .buttons .update{ background-color: #397ed9; color: rgba(255, 255, 255, 0.9); border-color: #397ed9;}
.store-profile-container .content > div .get-seller-info > div form > .buttons .update:hover{ background-color: white; color: #397ed9;} */
.store-profile-container .content > div .get-seller-info > div form{}
.store-profile-container .content > div .get-seller-info > div form .container > div{}
.store-profile-container .content > div .get-seller-info > div form .container > div.grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.store-profile-container .content > div .get-seller-info > div form .container > div label{ font-size: 14px; font-weight: 600;}
.store-profile-container .content > div .get-seller-info > div form .container > div small{ display: inline-block; width: 100%; font-size: 12px; color: #555; transform: translateY(-7px);line-height: 1.1; margin-top: 7px;}
.store-profile-container .content > div .get-seller-info > div form .container > div small + div input, .store-profile-container .content > div .get-seller-info > div form .container > div small + div textarea, .store-profile-container .content > div .get-seller-info > div form .container > div small + div select{ transform: translateY(-7px); margin-bottom: 6px;}
.store-profile-container .content > div .get-seller-info > div form .container > div > div{ }
.store-profile-container .content > div .get-seller-info > div form .container > div > div input, .store-profile-container .content > div .get-seller-info > div form .container > div > div textarea, .store-profile-container .content > div .get-seller-info > div form .container > div > div select{ transition: all .2s ease; width: 100%;  height: 40px; margin-bottom: 13px; margin-top: 3px; border-radius: 3px; border: 1px solid #d1d1d1; background-color: #fbfbfb; padding: 0 10px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .get-seller-info > div form .container > div > div input:focus, .store-profile-container .content > div .get-seller-info > div form .container > div > div textarea:focus, .store-profile-container .content > div .get-seller-info > div form .container > div > div select:focus{ background-color: white; border-color: #f1bf52; box-shadow: 0 0 0 3px #ffe5ac; outline: none;}
.store-profile-container .content > div .get-seller-info > div form .container > div > div textarea{ padding-top: 10px; height: 72px; resize: none;}
.store-profile-container .content > div .get-seller-info > div form > .buttons{ margin-top: 10px; display: flex; justify-content: end; gap: 10px;}
.store-profile-container .content > div .get-seller-info > div form > .buttons button{ transition: all .2s ease; cursor: pointer; padding: 8px 15px; border: 2px solid; border-radius: 3px; font-weight: 600; font-size: 13px; font-family: Arial, Helvetica, sans-serif;}
.store-profile-container .content > div .get-seller-info > div form > .buttons button:active{ transform: translate(0,0) !important; box-shadow: 0 0 5px 1px #969696 !important;}
.store-profile-container .content > div .get-seller-info > div form > .buttons button:hover{ box-shadow: -3px 5px 10px 1px #b5b5b5; transform: translate(1px, -1px);}
.store-profile-container .content > div .get-seller-info > div form > .buttons .cancel{ background-color: #e3e3e3; border-color: #e3e3e3; color: #535353;}
.store-profile-container .content > div .get-seller-info > div form > .buttons .cancel:hover{ background-color: white; border-color: #535353;}
.store-profile-container .content > div .get-seller-info > div form > .buttons .update{ background-color: #397ed9; color: rgba(255, 255, 255, 0.9); border-color: #397ed9;}
.store-profile-container .content > div .get-seller-info > div form > .buttons .update:hover{ background-color: white; color: #397ed9;}






@media screen and (max-width: 1230px){
    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert{ width: calc(50% - 10px);}
    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .img-area{ height: 200px;}
}
@media screen and (max-width: 1200px){
    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .img-area img{ height: 100%; width: unset;}
}
@media screen and (max-width: 1150px){
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .img-area{ min-width: 250px; width: 250px; height: 140px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons button{ font-size: 11px; width: 150px; height: 25px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons a{ font-size: 11ox; width: 150px; height: 25px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail a{ font-size: 14px; height: 34px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .icons span{ font-size: 11px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .prices .current-price{ font-size: 15px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .prices .another-unit{ font-size: 11px;}
    
    .store-profile-container .content > div .contact > div .body > .social > div{ flex-wrap: wrap;}
    .store-profile-container .content > div .contact > div .body > .social > div > div{ width: calc(33% - 13px);}
    
    .store-profile-container .content > div .favorite-advert > div > div .adverts{}
    .store-profile-container .content > div .favorite-advert > div > div .adverts .advert{ width: calc((33.3% - 20px) + (20px / 3));}
    
    .store-profile-container .user-informations > div > div{ height: 80px;}
    .store-profile-container .user-informations > div > div > div{ height: 75px;}
    .store-profile-container .user-informations > div > div > div > span{ font-size: 12px;}
    .store-profile-container .user-informations > div > div > div > b{ font-size: 15px;}
    .store-profile-container .user-informations > div > div > span{ font-size: 50px;}
    .store-profile-container .user-informations > div > div::before{ opacity: .5; font-size: 70px;}
}

@media screen and (max-width: 960px){
    /* .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert{ flex-direction: column;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .img-area{ width: 100%; height: 40vw;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail{ padding-bottom: 30px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail a{ width: 100%;} */
    .store-profile-container .content > div .stores > div > div > div .store{ width: calc((33.33% - (16px)) + (16px / 3))}
    .store-profile-container .content > div .buy-package > div > div > div .package-section .packages{ width: 100%; max-width: 700px; margin: 0 auto;}
    .store-profile-container .content > div .buy-package > div > div > div .package-section .packages .card{ width: calc(((100% / 2) - (20px)) + (20px / 2));}
}

.store-profile-container .content > div .all-advert > h3{ display: none;}

@media screen and (max-width: 870px){
    .store-profile-container{ padding-top: 0;}
    .store-profile-container .profile-img-area{ padding: 0;}
    .store-profile-container .profile-img-area .profile-area{ height: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 30px;}
    .store-profile-container .profile-img-area .profile-area .profile-bg img{ height: 100%; min-width: 100%;}
    .store-profile-container .profile-img-area .profile-area .profile-dtl{ position: relative; padding: 0; width: 100%; left: unset; top: unset; display: flex; align-items: center; justify-content: center;}
    .store-profile-container .profile-img-area .profile-area .profile-dtl h3{ font-size: 20px; margin-top: 5px;}
    .store-profile-container .profile-img-area .profile-area .profile-dtl h3.trust::before{ bottom: -20px; top: unset;}
    .store-profile-container .profile-img-area .profile-area .profile-dtl .location{ width: 122px;}
    .store-profile-container .profile-img-area .profile-area .profile-dtl .individual, .store-profile-container .profile-img-area .profile-area .profile-dtl .corporate{ font-size: 13px;}
    .store-profile-container .profile-img-area .profile-area .profile-img{ position: relative; left: unset; top: unset; transform: unset;}
    .store-profile-container .profile-img-area .profile-area .profile-detail{ position: relative; bottom: unset; left: unset; padding: 0; justify-content: center; background-color: transparent;}
    .store-profile-container .profile-img-area .profile-area .profile-detail .social{ padding: 0;}
    
    .store-profile-container .store-route{ margin: 0;}
    .store-profile-container .store-route .route-area{ padding: 0; margin: 0; width: 100%;}
    .store-profile-container .store-route .route-area ul{ width: 100%;}
    .store-profile-container .store-route .route-area ul li:nth-child(1){ width: 20%;}
    .store-profile-container .store-route .route-area ul li:nth-child(2){ width: 15%;}
    .store-profile-container .store-route .route-area ul li:nth-child(3){ width: 20%;}
    .store-profile-container .store-route .route-area ul li:nth-child(4){ width: 20%;}
    .store-profile-container .store-route .route-area ul li:nth-child(5){ width: 25%;}
    .store-profile-container .store-route .route-area ul li a{ text-align: center; height: 50px; width: 100%; justify-content: center;}
    .store-profile-container .store-route .route-area ul li a i{ display: none;}
    .store-profile-container .store-route .route-area ul li a .mobile{ display: inline-block;}
    .store-profile-container .store-route .route-area ul li a .web{ display: none;}
    
    .store-profile-container .content > div .all-advert{ gap: 0; margin-top: 10px;}
    .store-profile-container .content > div .all-advert.active{}
    .store-profile-container .content > div .all-advert > h3{ display: block; text-align: center; font-size: 17px; background-color: white; width: calc(100% + 20px); transform: translateX(-10px); margin-bottom: 5px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 8px 0;}
    .store-profile-container .content > div .all-advert .left-area{ width: 100%; position: absolute; left: 0; top: 48px;}
    .store-profile-container .content > div .all-advert .left-area .filters .filter-area{ outline: 1px solid #ddd; border-radius: 3px; overflow-x: hidden; padding: 0; position: fixed; background: #f0f0f0 !important;  left: 0; top: 100%; width: 100%; z-index: 10; overflow-y: scroll; transition: all .3s ease;}
    .store-profile-container .content > div .all-advert .left-area .filters .filter-area.active{ height:100vh; }
    .store-profile-container .content > div .all-advert .left-area .filters .filter-area.active{ top: 0;}
    .store-profile-container .content > div .all-advert .left-area .filters .filter-area > div:first-child{ padding-top: 0; padding-bottom: 0; /*margin-bottom: 10px*/ border-radius: 3px;}
    .store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div .search-area{ outline:none; }
    .store-profile-container .content > div .all-advert .left-area .filters .filter-area .selected-filters-bg{ display: block; padding: 0px 10px 0 10px !important;}
    .store-profile-container .content > div .all-advert .left-area .filters .filter-area .head{ display: block; padding-top: 10px !important; margin-bottom: 10px !important;}
    .store-profile-container .content > div .all-advert .left-area .filters > .filter-area .selected-filters-bg .selected-filters{ margin-top: 0; margin-bottom: 0;}
    .store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div{ background-color:white; margin-bottom: 10px; }
    .store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div:last-child:not(:first-child){ position: fixed; bottom: -100vh; transition: all .3s ease; width: 100%}
    .store-profile-container .content > div .all-advert .left-area .filters > .filter-area > div:first-child{ margin-bottom: 0; }
    .store-profile-container .content > div .all-advert .left-area .filters > .filter-area.active > div:last-child:not(:first-child){ bottom: 0vh;}
    .store-profile-container .content > div .all-advert .left-area .filters > div > div:last-child,
    .store-profile-container .content > div .all-advert .left-area .filters > form > div:last-child{ position: sticky; bottom: 0; background-color: white; padding: 0px; border-top: 1px solid #888; /*width: calc(100% + 40px); transform: translateX(-20px);*/}
    .store-profile-container .content > div .all-advert .left-area .filters > div.search-area{ transform: translateY(10px); background-color: transparent; box-shadow: none; /*width: calc(100% - 20px); transform: translateX(10px);*/ position: absolute; top: -57px; z-index: 1;}
    .store-profile-container .content > div .all-advert .right-area{ padding: 0; background-color: transparent; box-shadow: none; margin-top: 50px;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter{ border-bottom: none;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .top{ display: none;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom{ margin-top: 0;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right{ margin-bottom: 5px; width: 100%; position: relative; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; height: 34px; gap: 64px;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area{ position: relative; border-right: 1px solid #ddd;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area select{ color: #cc813d; background-color: transparent; width: 100%; text-align: center; padding-right: 25px; padding-bottom: 4px; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; border: none;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area select::-ms-expand{ display: none;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .select-area i{ display: inline-block; position: absolute; top: 50%; transform: translateY(-50%) translateX(50px); left: 50%; z-index: 2; color: #cc813d;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .filter-btn-area{ display: flex; color: #cc813d; border-color: #ddd;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right > .filter-btn-area i{ margin-left: 3px;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .buttons{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; gap: 0;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .buttons button{ transform: translate(2px, -.5px); border: none; box-shadow: none !important; border-radius: 0 !important;}
    .store-proxfile-container .content > div .all-advert .right-area .advencing-filter .bottom .right .buttons button:last-child{ border-left: 1px solid #ddd;}
    /* .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons{ display: none !important; grid-template-columns: 1fr 1fr 1fr; align-items: center; position: static; flex-direction: row;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .buttons > div{ height: 29px;} */
    .store-profile-container .content > div .all-advert .right-area .store-advert.pinned{ margin-top: 40px; }
    
	.store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .left .buttons{ display:none; }
	.store-profile-container .content > div{ background-color: white; padding: 1px 0}

	.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .footer{ bottom: 73px; }
	.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert { position: relative;}
	.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail{ position: static; }
	.store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .user-buttons{ position: absolute; top: unset; right: unset; left: 0; bottom: 0; gap: 5px; display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 5px;}
	.store-profile-container .content > div .all-advert .right-area .store-advert .advert .advert-detail .user-buttons a{ width: unset; height: 30px; margin-bottom: 0;}





    .store-route-ul{ display: grid !important; grid-template-columns: 1fr 1fr 1fr 1fr;}
    .store-route-ul > li{ width: auto !important;}
    
    
    .store-profile-container .content > div .location > div{ padding: 10px;}
    .store-profile-container .content > div .contact > div .body .main > div{ flex-direction: column;}
    .store-profile-container .content > div .contact > div .body .main > div > div{ width: 100%;}
    .store-profile-container .content > div .contact > div .body .advisor > div{ flex-wrap: wrap;}
    .store-profile-container .content > div .contact > div .body .advisor > div > div{ width: calc(50% - 10px);}
    
    .store-profile-container .content > div .favorite-advert > div > div .adverts .advert{ width: calc((50% - 20px) + (20px / 2));}
    
    .store-profile-container .user-informations > div > div::after, .store-profile-container .user-informations > div > div::before, .store-profile-container .user-informations > div > div > span{ display: none;}
    .store-profile-container .user-informations > div{ overflow: hidden; position: relative; grid-template-columns: 100%; gap: 0; background-color: white; padding: 10px; margin: 0 auto 20px; border-radius: 0 0 5px 5px; box-shadow: 0 0 10px 1px #ccc;}
    .store-profile-container .user-informations > div::before{ content: ''; display: inline-block; position: absolute; left: 0; top: 0; width: 100%; height: 0px; box-shadow: 0 0 10px 3px black;}
    .store-profile-container .user-informations > div > div{ height: auto; background: transparent !important; color: black; box-shadow: none;}
    .store-profile-container .user-informations > div > div > div{ width: 100%; height: 100%; flex-direction: row; align-items: center; border-bottom: 1px solid #ddd; padding: 3px 5px;}
    .store-profile-container .user-informations > div > div:last-child > div{ border-bottom: none;}
    .store-profile-container .user-informations > div > div > div > span{ color: black !important;}
    .store-profile-container .user-informations > div > div > div > b{ color: black !important; font-weight: 600; font-size: 13px;}
    

    /* .store-profile-container .content > div .orders > div > div > div > .order > div:nth-child(1)::before{ content: 'İlan';} */
    .store-profile-container .content > div .orders > div > div > div > .order > div:nth-child(2)::before{ content: 'Tutar';}
    .store-profile-container .content > div .orders > div > div > div > .order > div:nth-child(3)::before{ content: 'Tarih';}
    .store-profile-container .content > div .orders > div > div > div > .order > div:nth-child(4)::before{ content: 'Tip';}
    .store-profile-container .content > div .orders > div > div > div > .order > div:nth-child(5)::before{ content: 'Durum';}
    .store-profile-container .content > div .orders > div > div > div > .order > div:nth-child(6)::before{ content: 'İşlemler';}
    
    .store-profile-container{ background-color: #f1f1f1;}
    .store-profile-container .content{ background-color: #f1f1f1;}
    .store-profile-container .content > div > div > div{ padding: 0 !important;}
    .store-profile-container .content > div > div:not(.buy-package) > div > div{ background-color: #fff !important;}
    .store-profile-container .content > div > div > div > div h3{ background-color: white !important; padding: 8px 0 !important; border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important; text-align: center; font-size: 17px;}
    .store-profile-container .content > div > div > div > div > div{ border-radius: 0 !important; box-shadow: none !important;}
    .store-profile-container .content > div > div:not(.buy-package) > div > div > div{ background-color: #fff !important;}
    .store-profile-container .content > div .all-advert .left-area .filters > div > div{ background-color:white; }
    
    .store-profile-container .content > div .orders > div > div > div > .header{ display: none;}
    .store-profile-container .content > div .orders > div > div > div{ display: flex; flex-direction: column; gap: 20px;}
    .store-profile-container .content > div .orders > div > div > div > .order{ grid-template-columns: 100%;     background-color: white !important; border: 1px solid #ddd; border-radius: 3px; overflow: hidden;}
    .store-profile-container .content > div .orders > div > div > div > .order > div{ flex-direction: row; justify-content: space-between; padding: 5px 10px;}
    .store-profile-container .content > div .orders > div > div > div > .order > div.advert{ padding-left: 0; border-bottom: 1px solid #ddd; padding: 10px; background-color: #f9f9f9;}
    .store-profile-container .content > div .orders > div > div > div > .order > div.advert a{ height: auto; overflow: unset; display: inline-block; font-weight: 500;}
    .store-profile-container .content > div .orders > div > div > div > .order > div.status span{ font-size: 10px;}
    .store-profile-container .content > div .orders > div > div > div > .order > div.detail a.blue{ color: #0059b5; background-color: transparent; font-weight: 600; font-size: 11px;}
    .store-profile-container .content > div .orders > div > div > div > .order > div.detail a.blue i{ transform: translateY(1.2px);}
    
    /* .store-profile-container .content > div .get-sales > div{ padding: 0;}
    .store-profile-container .content > div .get-sales > div > div{ background-color: #f1f1f1;}
    .store-profile-container .content > div .get-sales > div > div h3{ background-color: white; padding: 8px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
    .store-profile-container .content > div .get-sales > div > div > div{ border-radius: 0; background-color: #f1f1f1; box-shadow: none; padding: 0 10px;} */
    
    .store-profile-container .content > div .get-sales > div > div > div > .header{ display: none;}
    .store-profile-container .content > div .get-sales > div > div > div{ display: flex; flex-direction: column; gap: 20px;}
    .store-profile-container .content > div .get-sales > div > div > div > .order{ grid-template-columns: 100%;     background-color: white !important; border: 1px solid #ddd; border-radius: 3px; overflow: hidden;}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div{ flex-direction: row; justify-content: space-between; padding: 5px 10px;}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div:nth-child(2)::before{ content: 'Tutar';}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div:nth-child(3)::before{ content: 'Net Kazanç';}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div:nth-child(4)::before{ content: 'Alıcı';}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div:nth-child(5)::before{ content: 'Tarih';}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div:nth-child(6)::before{ content: 'Durum';}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div:nth-child(7)::before{ content: 'Satıcı Ödemesi';}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div:nth-child(8)::before{ content: 'İşlemler';}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div.date br{ display: none;}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div.detail a{ padding: 4px 0;}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div.advert{ padding-left: 0; border-bottom: 1px solid #ddd; padding: 10px; background-color: #f9f9f9;}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div.advert a{ height: auto; overflow: unset; display: inline-block; font-weight: 500; padding-bottom: 66px !important;}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div.status span{ font-size: 10px;}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div.detail a.blue{ color: #0059b5; background-color: transparent; font-weight: 600; font-size: 11px;}
    .store-profile-container .content > div .get-sales > div > div > div > .order > div.detail a.blue i{ transform: translateY(1.2px);}

    .store-profile-container .content > div .stores > div > div > div .store{ border: 1px solid #ddd; box-shadow: none; background-color: white;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert{ background-color: white !important; padding: 5px 5px 76px 5px !important; border-radius: 5px !important; border: 1px solid #ddd;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter{ padding-bottom: 5px; margin-bottom: 5px;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom{ padding: 0 !important;}
/*    .store-profile-container .content > div .all-advert .left-area .filters > div.search-area{ margin-top: 5px;}*/
    .store-profile-container .content > div .all-advert .left-area .filters > div > div input:not([type='checkbox'], [type='radio']), .store-profile-container .content > div .all-advert .left-area .filters > div select{ height: 32px;}
    .store-profile-container .content > div .all-advert .right-area .advencing-filter .bottom .right{ background-color: white;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert{ box-shadow: 0 0 5px 0 #bdbdbd !important; background-color: white !important; padding: 0 0 72px 0 !important; border-radius: 5px !important;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .advert-detail .user-buttons{ bottom: -2px; padding: 0 5px; opacity: 1;}
    .store-profile-container .content > div .all-advert .left-area .filters > div > div:last-child{ border-top: none;}
    .store-profile-container .content > div .all-advert .left-area .filters > div > div.button{  border-top: none; padding: 0 25px 11px; background: white; box-shadow: 0 0 10px 0 #919191;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .img-area{ border-top-left-radius: 3px;}

    .store-profile-container .profile-img-area .profile-area .user-buttons{ margin-top: 15px; }
    .store-profile-container .profile-img-area .profile-area .user-buttons > span{ display: flex;}
    .store-profile-container .profile-img-area .profile-area .user-buttons > div{ overflow: hidden; transition: all .15s ease-in-out ; transform-origin: right top; transform: scale(0) ; display: flex; flex-direction: column; align-items: flex-end; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; gap: 5px; padding: 10px; position: relative; z-index: 2;}
    .store-profile-container .profile-img-area .profile-area .user-buttons.active > div{ transform: scale(1) ;}
    .store-profile-container .profile-img-area .profile-area .user-buttons > div a.edit-profile-btn{ background-color: #1b61b6c7; border: 1px solid #003084;}
    
    /* Edit Profile */
    .edit-route{ } 
    .edit-route > li{ width: 33.33333333333% !important;} 
    .store-profile-container .content > div .store-single-section > div{ background-color: #f1f1f1;}
    .store-profile-container .content > div .store-single-section > div > h4{ font-size: 17px; background-color: white !important; padding: 8px 0 !important; border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important;}
    .store-profile-container .content > div .store-single-section > div form .container{ grid-template-columns: 100%;}
    .store-profile-container .content > div .store-single-section > div form .container > div{ background-color: white; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 10px !important;}
    .store-profile-container .content > div .store-single-section > div form .container > div:first-child{ margin-bottom: 25px;}
    .store-profile-container .content > div .store-single-section > div form > .buttons{ background-color: white; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px; display: grid; grid-template-columns: 1fr 1fr;}
    
    .store-profile-container .content > div .store-single-section > div form .container > div#store-corporate-area{ display: none;}
    .store-profile-container .content > div .store-single-section > div form .container.corporate-open > div#store-corporate-area{ display: block;}
    .store-profile-container .content > div .store-single-section > div form .container > div:first-child{ margin-bottom: 15px;}
    
    .store-profile-container .content > div > div > div .header{ border-bottom: none !important;}
    /* .store-profile-container .content > div .contact > div .body > div{ padding: 0 !important;}
    .store-profile-container .content > div .contact > div .body .main{ background-color: white !important; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
    .store-profile-container .content > div .contact > div .body .social > div{ background-color: white !important; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
    .store-profile-container .content > div .contact > div .body .advisor > div{ background-color: white !important; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;} */
    .store-profile-container .content > div .contact > div .body .main > div > div{ background-color: white; box-shadow: none; border: 1px solid #ddd;}
    .store-profile-container .content > div .contact > div .body > div h5{ font-size: 17px; padding: 8px 0; background-color: white; border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important; width: calc(100% + 20px) !important; transform: translateX(-10px);}
    .store-profile-container .content > div .contact > div .body > div > div > div{ background-color: white; box-shadow: none !important; border: 1px solid #ddd;}
    .store-profile-container .content > div .contact > div .body .advisor{ margin-top: 50px;}
    .store-profile-container .content > div .about > div .body{ background-color: white !important; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px; }
    .store-profile-container .content > div .location > div .body{}
    .store-profile-container .content > div .location > div .body .address{ background-color: white !important; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 6px 10px !important;}
    .store-profile-container .content > div .location > div .body .iframe{ background-color: white !important; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 10px !important; margin-top: 10px !important;}
    .store-profile-container .content > div .location > div .body .iframe > h5{ margin-bottom: 10px; color: #111; font-weight: 600; font-size: 15px;}
    
    .store-profile-container .content > div .all-advert{ flex-direction: column;}

    /* PACKAGES */
    .store-profile-container .content > div .buy-package > div > div > div .package-section{ width: 100%; transform: translateX(0);}
}

@media screen and (max-width: 840px){
    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert{ width: calc(50% - 10px);}
    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .img-area{ height: 25vw;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .img-area img{ width: 100%; height: unset;}
}

@media screen and (max-width: 800px){
    .store-profile-container .profile-img-area .profile-area .profile-bg img{ height: 100%; min-width: unset; width: unset;}
    
}
@media screen and (max-width: 750px){
    .store-profile-container .content > div .contact > div .body > .social > div > div{ width: calc(50% - 10px);}
    .store-profile-container .content > div .stores > div > div > div .store{ width: calc((50% - (16px)) + (16px / 2))}
}
@media screen and (max-width: 715px){
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail a{ width: 100%;}
    .store-profile-container .content > div .buy-package > div > div > div .package-section .packages{ width: 100%; max-width: 400px; gap: 30px; padding-bottom: 20px; margin: 0 auto;}
    .store-profile-container .content > div .buy-package > div > div > div .package-section .packages .card{ width: 100%;}
}

@media screen and (max-width: 600px){
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .img-area{ min-width: 160px; width: 160px; height: 120px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .img-area img{ width: unset; height: 100%;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail a{ font-size: 13px; height: 31px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .icons{ gap: 3px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .icons span{ gap: 2px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .icons span i{ display: none;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .icons span:first-child:before{ display: none;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .icons span::before{ content: '/';}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .icons{ margin-bottom: 5px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .prices{ margin-top: 0px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .footer{ margin-top: 0; padding-top: 0%;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .footer span{ font-size: 10px;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .advert-detail .footer span i{ display: none;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert:hover .advert-detail .buttons{ display: none;}

    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert{ width: 100%;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .img-area{ height: 47vw;}
    .store-profile-container .content > div .all-advert .right-area .store-advert.grid .advert .img-area img{ width: 100%; height: unset;}

    .store-profile-container .content > div .location > div .body .iframe > div{ height: 500px;}

    .store-profile-container .content > div .favorite-advert > div > div .adverts .advert{ width: 100%;}
    .store-profile-container .content > div .favorite-advert > div > div .adverts .advert .img-area{ height: 52vw;}

}

@media screen and (max-width: 520px){
    .store-profile-container .content > div .contact > div .body > .social > div > div{ width: 100%; flex-direction: row;}
    .store-profile-container .content > div .contact > div .body > .social > div > div > .txt{ width: 100%;}
    .store-profile-container .content > div .contact > div .body > .social > div > div > .logo{ min-width: 70px;}
    .store-profile-container .content > div .contact > div .body .advisor > div > div{ width: calc(50% - 10px);}
    .store-profile-container .content > div .contact > div .body .advisor > div > div{ width: 100%;}
    .store-profile-container .content > div .stores > div > div > div .store{ width: 100%; padding: 20px;}
    .store-profile-container .store-route .route-area ul li:nth-child(1){ width: 17%;}
    .store-profile-container .store-route .route-area ul li:nth-child(2){ width: 16%;}
    .store-profile-container .store-route .route-area ul li:nth-child(3){ width: 23%;}
    .store-profile-container .store-route .route-area ul li:nth-child(4){ width: 22%;}
    .store-profile-container .store-route .route-area ul li:nth-child(5){ width: 22%;}
    .store-profile-container .store-route .route-area ul li a{ padding: 0; font-size: 11px; padding: 0 2px;}
}

@media screen and (max-width: 480px){
    .store-profile-container .content > div .all-advert .right-area .store-advert.line .advert .img-area{ width: 145px;}
}



/* ORDER SUMMARY */
.order-summary-container{ min-height: calc(100vh - (82px + 365px)); padding-bottom: 20px;}
.order-summary-container > div{ width: 100%; max-width: 1200px; padding: 0 10px; margin: 0 auto;}
.order-summary-container > div h1{ font-size: 26px; font-weight: 600; text-align: center; margin-top: 20px;}

.order-summary-container > div .list{ margin-top: 20px; margin-bottom: 30px;}
.order-summary-container > div .list h3{ font-size: 18px; font-weight: 600; margin-bottom: 5px; padding-left: 5px;}
.order-summary-container > div .list > div{ border-radius: 10px; overflow: hidden; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);}
.order-summary-container > div .list > div > .header{ display: grid; grid-template-columns: 1fr 150px 100px 150px 100px 120px 100px 110px; background-color: var(--dark-blue); color: white;}
.order-summary-container > div .list > div > .header > div{ font-size: 13px; font-weight: 500; text-align: center; padding: 10px 0;}
.order-summary-container > div .list > div > .order{ border-bottom: 1px solid #ddd; display: grid; grid-template-columns: 1fr 150px 100px 150px 100px 120px 100px 110px;}
.order-summary-container > div .list > div > .order:nth-child(odd){ background-color: #fffcf9;}
.order-summary-container > div .list > div > .order:last-child{ border-bottom: moccasin;}
.order-summary-container > div .list > div > .order > div{ text-align: center; padding: 8px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 13px;}
.order-summary-container > div .list > div > .order > div b{ font-size: 11px;}
.order-summary-container > div .list > div > .order > div.advert{ padding-left: 5px; text-align: start; align-items: baseline;}
.order-summary-container > div .list > div > .order > div.advert a{ width: 100%; color: black; text-decoration: none; height: 30px; line-height: 1.1; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.order-summary-container > div .list > div > .order > div.advert a:hover{ text-decoration: underline;}
.order-summary-container > div .list > div > .order > div.doping{ color: #c87705; font-weight: 500;}
.order-summary-container > div .list > div > .order > div.total-day{ color: #1e7503; font-weight: 500;}
.order-summary-container > div .list > div > .order > div.stay-day{ color: #750303; font-weight: 500;}
.order-summary-container > div .list > div > .order > div.date{ line-height: 1.3;}
.order-summary-container > div .list > div > .order > div.status span{ font-size: 11px; padding: 4px 10px; border-radius: 3px;}
.order-summary-container > div .list > div > .order > div.status span.green{ color: white; background-color: #14c014;}
.order-summary-container > div .list > div > .order > div.status span.orange{ color: white; background-color: #ec901d;}
.order-summary-container > div .list > div > .order > div.status span.blue{ color: white; background-color: #1d81ec;}
.order-summary-container > div .list > div > .order > div.status span.red{ color: white; background-color: #c01414;}

.order-summary-container > div .pro-list{ margin-top: 20px; margin-bottom: 30px;}
.order-summary-container > div .pro-list h3{ font-size: 18px; font-weight: 600; margin-bottom: 5px; padding-left: 5px;}
.order-summary-container > div .pro-list > div{ border-radius: 10px; overflow: hidden; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);}
.order-summary-container > div .pro-list > div > .header{ display: grid; grid-template-columns: 1fr 150px 100px 140px 130px 100px 90px 110px; background-color: var(--dark-blue); color: white;}
.order-summary-container > div .pro-list > div > .header > div{ font-size: 13px; font-weight: 500; text-align: center; padding: 10px 0;}
.order-summary-container > div .pro-list > div > .order{ border-bottom: 1px solid #ddd; display: grid; grid-template-columns: 1fr 150px 100px 140px 130px 100px 90px 110px;}
.order-summary-container > div .pro-list > div > .order:nth-child(odd){ background-color: #fffcf9;}
.order-summary-container > div .pro-list > div > .order:last-child{ border-bottom: moccasin;}
.order-summary-container > div .pro-list > div > .order > div{ text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 13px;}
.order-summary-container > div .pro-list > div > .order > div + div > div{ height: 51px; padding: 5px 0; width: 100%; display: flex; align-items: center; justify-content: center;}
.order-summary-container > div .pro-list > div > .order > div:not(:last-child){ border-right: 1px solid #ddd;}
.order-summary-container > div .pro-list > div > .order > div + div > div:not(:last-child){ border-bottom: 1px solid #ddd;}
.order-summary-container > div .pro-list > div > .order > div b{ font-size: 11px;}
.order-summary-container > div .pro-list > div > .order > div.advert{ padding-left: 5px; text-align: start; align-items: baseline;}
.order-summary-container > div .pro-list > div > .order > div.advert a{ width: 100%; color: black; text-decoration: none; line-height: 1.1; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.order-summary-container > div .pro-list > div > .order > div.advert a:hover{ text-decoration: underline;}
.order-summary-container > div .pro-list > div > .order > div.doping{ color: #c87705; font-weight: 500;}
.order-summary-container > div .pro-list > div > .order > div.total-day{ color: #1e7503; font-weight: 500;}
.order-summary-container > div .pro-list > div > .order > div.stay-day{ color: #750303; font-weight: 500;}
.order-summary-container > div .pro-list > div > .order > div.date{ line-height: 1.3;}
.order-summary-container > div .pro-list > div > .order > div.status span{ font-size: 11px; padding: 4px 10px; border-radius: 3px;}
.order-summary-container > div .pro-list > div > .order > div.status span.green{ color: white; background-color: #14c014;}
.order-summary-container > div .pro-list > div > .order > div.status span.orange{ color: white; background-color: #ec901d;}
.order-summary-container > div .pro-list > div > .order > div.status span.blue{ color: white; background-color: #1d81ec;}
.order-summary-container > div .pro-list > div > .order > div.status span.red{ color: white; background-color: #c01414;}
.order-summary-container > div .pro-list > div > .order > div.status span.button{ cursor: pointer;}
.order-summary-container > div .pro-list > div > .order > div.status span.button:active{ transform: scale(.98);}

.order-summary-container > div .pro-list.single > div > .header,
.order-summary-container > div .pro-list.single > div > .order{ grid-template-columns: 1fr 100px 220px 150px 200px;}
.order-summary-container > div .pro-list.single.has-confirm > div > .header,
.order-summary-container > div .pro-list.single.has-confirm > div > .order{ grid-template-columns: 1fr 100px 220px 150px 200px 200px;}
.order-summary-container > div .pro-list.single.waiting-payment > div > .header,
.order-summary-container > div .pro-list.single.waiting-payment > div > .order{ grid-template-columns: 1fr 100px 220px 150px;}

.chckbx{ position: absolute; position: relative;}
.chckbx input[type="checkbox"]:focus{ box-shadow: none;}
.chckbx input[type="checkbox"]{ transform: translate(7px, 14px); position: absolute; cursor: pointer; height: 1px; width: 1px !important;}
.chckbx input[type="checkbox"]::before{  transform: translate(-7px, -18px); content: ''; position: absolute; left: 0; top: 5.5px; display: inline-block; border: 1px solid var(--dark-blue); width: 12px; height: 12px; border-radius: 3px;}
.chckbx input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-size: 9.5px; font-weight: 900; color: white; background-color: var(--dark-blue); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 5.5px; border: 1px solid var(--dark-blue); width: 12px; height: 12px;}
.chckbx label{ font-size: 12px; font-weight: 500; color: #666; padding-left: 20px;}







.order-summary-container > div .get-list{ margin-top: 20px; margin-bottom: 30px;}
.order-summary-container > div .get-list h3{ font-size: 18px; font-weight: 600; margin-bottom: 5px; padding-left: 5px;}
.order-summary-container > div .get-list > div{ border-radius: 10px; overflow: hidden; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);}
.order-summary-container > div .get-list > div > .header{ display: grid; grid-template-columns: 1fr 80px 180px 160px; background-color: var(--dark-blue); color: white;}
.order-summary-container > div .get-list > div > .header > div{ font-size: 13px; font-weight: 500; text-align: center; padding: 10px 0;}
.order-summary-container > div .get-list > div > .order{ border-bottom: 1px solid #ddd; display: grid; grid-template-columns: 1fr 80px 180px 160px;}
.order-summary-container > div .get-list > div > .order:nth-child(odd){ background-color: #fffcf9;}
.order-summary-container > div .get-list > div > .order:last-child{ border-bottom: moccasin;}
.order-summary-container > div .get-list > div > .order > div{ text-align: center; padding: 8px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 13px;}
.order-summary-container > div .get-list > div > .order > div b{ font-size: 11px;}
.order-summary-container > div .get-list > div > .order > div.advert{ padding-left: 5px; text-align: start; align-items: baseline;}
.order-summary-container > div .get-list > div > .order > div.advert a{ width: 100%; color: black; text-decoration: none; height: 30px; line-height: 1.1; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.order-summary-container > div .get-list > div > .order > div.advert a:hover{ text-decoration: underline;}
.order-summary-container > div .get-list > div > .order > div.status span{ font-size: 11px; padding: 4px 10px; border-radius: 3px;}
.order-summary-container > div .get-list > div > .order > div.status span.green{ color: white; background-color: #14c014;}
.order-summary-container > div .get-list > div > .order > div.status span.orange{ color: white; background-color: #ec901d;}
.order-summary-container > div .get-list > div > .order > div.status span.blue{ color: white; background-color: #1d81ec;}
.order-summary-container > div .get-list > div > .order > div.status span.red{ color: white; background-color: #c01414;}

.order-summary-container > div .order-detail{ position: relative; margin-top: 20px; border-radius: 10px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2); overflow: hidden; border: 1px solid #ddd;}
.order-summary-container > div .order-detail h3{ font-size: 18px; font-weight: 600; margin-bottom: 5px;}
.order-summary-container > div .order-detail .header{ background-color: var(--dark-blue); color: white; padding: 8px 10px; font-weight: 600;}
.order-summary-container > div .order-detail .body{ padding: 10px 10px;}
.order-summary-container > div .order-detail .body > div{}
.order-summary-container > div .order-detail .body > div .txt{ font-size: 13px;}
.order-summary-container > div .order-detail .body > div b{ font-size: 13px;}
.order-summary-container > div .order-detail .body > div .status{ font-size: 10px; font-weight: 500; padding: 3px 7px 4px; border-radius: 3px;}
.order-summary-container > div .order-detail .body > div .green{ background-color: #09b309; color: white;}
.order-summary-container > div .order-detail .body > div .blue{ background-color: #1d81ec; color: white;}
.order-summary-container > div .order-detail .body > div .orange{ background-color: #db8617; color: white;}
.order-summary-container > div .order-detail .body > div .red{ background-color: #a21b1b; color: white;}
/* .order-summary-container > div .order-detail .body > div ul{ margin-left: 15px; margin-bottom: 7px;}
.order-summary-container > div .order-detail .body > div ul li{ font-size: 12px;} */

.order-summary-container > div .order-detail .body > .my-col-2{ display: grid; grid-template-columns: 110px 1fr; gap: 3px 0;}
.order-summary-container > div .order-detail .body > .my-col-2 > div{ font-size: 13px; color: black;}
.order-summary-container > div .order-detail .body > .my-col-2 > div:nth-child(odd){ font-weight: 600; }

.order-summary-container > div .seller-operations{ position: relative; margin-top: 20px; border-radius: 10px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2); overflow: hidden; border: 1px solid #ddd;}
.order-summary-container > div .seller-operations h3{ font-size: 18px; font-weight: 600; margin-bottom: 5px;}
.order-summary-container > div .seller-operations .header{ background-color: var(--dark-blue); color: white; padding: 8px 10px; font-weight: 600;}
.order-summary-container > div .seller-operations .body{ padding: 5px 10px; font-size: 13px;}
.order-summary-container > div .seller-operations .body > ul{ list-style: none;}
.order-summary-container > div .seller-operations .footer{ background-color:#f9f9f9; border-top: 1px solid #ddd; padding: 10px; display: flex; align-items: center; justify-content: space-between;}
.order-summary-container > div .seller-operations .footer .btn{ transition: all .2s ease; cursor: pointer; border: 1px solid; border-radius: 3px; display: flex; align-items: center; justify-content: center; width: 200px; height: 36px; font-size: 13px; font-weight: 600; text-decoration: none; }
.order-summary-container > div .seller-operations .footer .btn:hover{ background-color: white; }
.order-summary-container > div .seller-operations .footer button.btn{ background-color: #4398f4; color: white; border-color: #4398f4;}
.order-summary-container > div .seller-operations .footer button.btn:hover{ color: #4398f4;}
.order-summary-container > div .seller-operations .footer a.btn{ background-color: #56b5cf; border-color: #56b5cf; color: white;}
.order-summary-container > div .seller-operations .footer a.btn:hover{ color: #56b5cf;}




@media screen and (max-width: 870px){
    .order-summary-container{ background-color: #f1f1f1; padding-top: 20px;}
    .order-summary-container > div{ padding: 0;}
    .order-summary-container > div h1{ font-size: 20px; margin-top: 0; background-color: white !important; padding: 8px 0 !important; border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important;}
    .order-summary-container > div .order-detail,
    .order-summary-container > div .seller-operations{ width: 100%; max-width: calc(100% - 20px); margin: 20px auto; border-radius: 0; box-shadow: none; border: 1px solid #ddd;}
    .order-summary-container > div .order-detail .header,
    .order-summary-container > div .seller-operations .header{ font-size: 15px; font-weight: 500;}
    .order-summary-container > div .order-detail .body,
    .order-summary-container > div .seller-operations .body{ padding: 10px; background-color: white; display: flex; flex-direction: column; gap: 7px;}
    .order-summary-container > div .order-detail .body > div,
    .order-summary-container > div .seller-operations .body .seller-operations{ line-height: 1.09;}
    .order-summary-container > div .seller-operations .footer{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
    .order-summary-container > div .seller-operations .footer .btn{ font-size: 11px; width: auto;}

    .order-summary-container > div .pro-list > div{ border-radius: 0; box-shadow: none; max-width: calc(100% - 20px); margin: 0 auto; display: flex; flex-direction: column; gap: 20px;}
    .order-summary-container > div .pro-list > div > .header{ display: none;}
    .order-summary-container > div .pro-list > div > .order{ display: flex; flex-direction: column; background-color: white !important; border: 1px solid #ddd; border-top: none;}
    .order-summary-container > div .pro-list > div > .order > div:first-child{border-bottom: 1px solid #ddd; padding: 10px; background-color: #f9f9f9;}
    .order-summary-container > div .pro-list > div > .order > div{ border-right: none !important;}
    .order-summary-container > div .pro-list > div > .order > div + div > div{ border-bottom: none !important;}

    .order-summary-container > div .pro-list > div > .order > div > div{  padding: 5px 10px !important;}
    .order-summary-container > div .pro-list > div > .order > div > div br{ display: inline !important; content: ''; padding: 0 3px;}
    
    .order-summary-container > div .pro-list > div > .order > div.advert{ padding: 13px 10px; border-top: 1px solid #ddd;}
    .order-summary-container > div .pro-list > div > .order > div.advert a{ height: fit-content;}
    .order-summary-container > div .pro-list > div > .order > div > div::before{ display: inline-block; margin-right: auto;}
    .order-summary-container > div .pro-list > div > .order > div.doping > div::before{ content: 'Doping';}
    .order-summary-container > div .pro-list > div > .order > div.doping{ padding-top: 5px;}
    .order-summary-container > div .pro-list > div > .order > div:nth-child(2){ padding-top: 0 !important;}
    .order-summary-container > div .pro-list > div > .order > div.total-day > div::before{ content: 'Gün Sayısı';}
    .order-summary-container > div .pro-list > div > .order > div.total-day + div > div::before{ content: 'Doping Başlangıcı';}
    .order-summary-container > div .pro-list > div > .order > div.date > div::before{ content: 'Doping Bitişi';}
    .order-summary-container > div .pro-list > div > .order > div.stay-day > div::before{ content: 'Kalan Gün';}
    .order-summary-container > div .pro-list > div > .order > div.stay-day + div > div::before{ content: 'Sipariş No';}
    .order-summary-container > div .pro-list > div > .order > div.status > div::before{ content: 'İşlemler';}
    .order-summary-container > div .pro-list > div > .order > div.count > div::before{ content: 'Adet';}
    .order-summary-container > div .pro-list > div > .order > div.seller > div::before{ content: 'Satıcı';}
/*    .order-summary-container > div .pro-list > div > .order > div.status:not(:last-child){ padding-bottom: 5px; border-bottom: 1px solid #ddd;}*/
    .order-summary-container > div .pro-list > div > .order > div:last-child{ padding-bottom: 5px; border-bottom: none;}

    .order-summary-container > div .payment-type{ max-width: calc(100% - 20px); margin: 0 auto;}
    .order-summary-container > div .payment-type > .header{ display: grid; grid-template-columns: 1fr 1fr;}
    .order-summary-container > div .payment-type > .header button{ margin-left: 0; height: fit-content; padding: 7px 15px; height: 100%;}

    .order-summary-container > div .payment-type > .header button{ background-color: white;}
    .order-summary-container > div .payment-type > .body > div .account-table .header{ display: none;}
    .order-summary-container > div .payment-type > .body > div .account-table .body{ display: flex; flex-direction: column; gap: 20px;}
    .order-summary-container > div .payment-type > .body > div .account-table .body > div{ position: relative; display: flex; flex-direction: column; border: 1px solid #ddd; background-color: white !important;}
    .order-summary-container > div .payment-type > .body > div .account-table .body > div > div{ padding: 5px 10px;}
    .order-summary-container > div .payment-type > .body > div .account-table .body > div > div:first-child{ font-weight: 500; border-bottom: 1px solid #ddd; padding: 10px; background-color: #f9f9f9;}
    .order-summary-container > div .payment-type > .body > div .account-table .body > div > div:nth-child(2){ padding-top: 10px;}
    .order-summary-container > div .payment-type > .body > div .account-table .body > div > div:last-child{ padding: 0 0 5px 0;}
    .order-summary-container > div .payment-type > .body > div .account-table .body > div > div:last-child button{ position: absolute; background-color: white; top: 5px; right: 5px; border: 1px solid #d0d0d0;}
}