@font-face {
font-family: 'Roboto';
src: url('/src/fonts/Roboto/Roboto-Regular.woff2') format('woff2'),
url('/src/fonts/Roboto/Roboto-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('/src/fonts/Roboto/Roboto-Medium.woff2') format('woff2'),
url('/src/fonts/Roboto/Roboto-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
input[type=number] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
::marker {
height:0px;
}
:root {
--main-color:#111;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
.no-scroll::-webkit-scrollbar {
width: 0px;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #646477cc;
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body {
font-family: "Roboto";
padding: 0;
margin: 0;
color: #1E3125;
font-size:14px;
}
button:after {
display:none;
}
a {
color:#000;
text-decoration:none;
}
body:before,body:after,.row:before,.row:after,.btn-frame:after{
display:none;
}
header {
min-height:90px;
border-bottom:1px solid #f3f3fa;
background: rgb(255, 255, 255);
display:flex;
align-items:center;
width:100%;
position:relative;
z-index: 10;
}
h1 {
font-size: 24px;
font-weight: 500;
line-height: 29px;
color: #5a5a66;
margin:10px 0 10px 15px;
}
h2,.h2 {
display: flex;
gap: 5px;
font-size: 23px;
}
.h3 {
font-size: 22px;
font-weight:600;
}
.checkout-form .h3 {
font-size: 20px;
font-weight: 500;
display: block;
color: #6c6c6c;
padding: 10px 20px;
}
.hr {
border-bottom: 1px dashed #9ccc93;
margin: 15px 0;
display: flex;
justify-content: center;
position: relative;
}
.hr span {
position: absolute;
margin-bottom: -15px;
top: -9px;
font-size: 12px;
background: #9ccc93;
padding: 2px 6px;
border-radius: 3px;
color: #fff;
}
.send-message {
position: sticky;
bottom: 5px;
padding: 15px 20px 15px 15px;
background: #f0f0f0f2;
box-shadow: 0 0 10px #afafafb5;
margin: 7px 7px 5px 7px;
border-radius: 10px;
line-height: 0px;
}
.send-message .message-box .input-after {
padding-left:10px;
}
.send-message .input-after .btn {
position: absolute;
right: -15px;
border-radius: 5px;
z-index: 1;
width: 34px;
height: 34px;
justify-content: center;
display: flex;
}
.send-message .send-button {
background: #7bb766;
padding: 2px 0px 2px 3px;
}
.send-message .pic-button {
position: absolute;
bottom: -10px;
background: #66bbbb;
}
.send-message .input-after .smile-button {
top: -10px;
bottom:auto;
background: #ccbb11;
border-radius: 100%;
}
.send-message .smile-button svg {
fill:#555;
}
.send-message>.btn {
padding: 20px;
margin: auto;
}
.emojis {
padding:10px;
padding: 10px;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.emojis i {
font-style: normal;
display: inline-block;
font-size: 30px;
width: 10%;
text-align:center;
cursor:pointer;
}
.msg-files {
display: flex;
gap: 5px;
}
.msg-files span {
cursor:zoom-in;
width: 100px;
height: 100px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
border-radius: 3px;
opacity: 0.74;
margin: 3px 0px 5px 0px;
transition: opacity .5s linear;
}
.msg-files span:hover {
opacity: 1;
}
.msg-files span.msg-full {
width: 200px;
height: 200px;
}
.send-files ul {
margin: 0 6px;
background: #aaa;
border-radius: 10px;
display: flex;
}
.send-files li {
width: 100px;
height: 100px;
display: block;
margin: 5px 0px 5px 5px;
border-radius: 8px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #000000cc;
position:relative;
}
.send-files li span {
background: #ffbe63;
color: #444;
display: flex;
width: 20px;
height: 20px;
border-radius: 100%;
justify-content: center;
align-items: center;
position: absolute;
top: -2px;
right: -2px;
cursor:pointer;
}
.new-messages {
padding: 10px;
position: absolute;
top: -12px;
width: calc(100% - 35px);
text-align: center;
display:none;
}
.new-messages span {
background: #559944cc;
padding: 2px 20px;
font-size: 12px;
border-radius: 2px;
color: #ffffff;
cursor: pointer;
}
.dialog-phone {
height:24px;
display:flex;
align-items:center;
color: #679266;
}
.dialog-button {
margin: 3px 0px;
font-size: 12px;
border-bottom: 1px solid #679266;
color: #679266;
}
.head-message {
color:#555;
background: #ffffff4f;
box-shadow: -7px 1px 8px #00000033;
z-index: 1;
padding: 4px 5px;
font-size: 14px;
font-weight: 500;
}
.head-message .offer-preview,.messages .dialog-preview{
height: 62px;
max-width: 62px;
min-width: 62px;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
}
.message.unread .count-new {
font-weight:500;
display:block;
background: #dd3322de;
color:#ffffffcc;
}
.dialog-count {
min-height:38px;
display: flex;
justify-content: flex-end;
}
.dialog-count span {
animation:none;
position:relative;
border-radius: 10px;
padding: 2px 6px 1px 6px;
font-size: 12px;
}
.dialog-date{
margin-left: auto;
color:#444444;
font-size:12.5px;
}
.dialog-to span {
color: #7e7e7e;
padding: 0 5px;
}
.dialog-title{
margin-top: 10px;
padding: 0px 5px 0px 5px;
font-weight: 500;
display: flex;
align-items: center;
}
.dialog-intro{
height: calc(100% - 35px);
padding: 0px 5px 10px 5px;
border-radius: 5px;
box-sizing: border-box;
width: auto;
min-width: auto;
flex-direction: column;
}
.dialog-header{
display:flex;
color: #465f5b;
font-weight:500;
padding-bottom:3px;
}
.send-message textarea {
min-height: 80px;
}
#main {
max-width:var(--main-width);
margin:5px auto 60px auto;
padding:0 5px;
}
.main-content {
display:flex;
flex-direction: column;
max-width:100%;
}
.header-nav {
width:100%;
position:absolute;
bottom:0px;
top: 90px;
height:100vh;
}
.main-menu {
max-width:var(--main-width);
width:100%;
margin:auto;
padding:0px 20px;
height:100%;
}
.main-menu > ul {
flex-wrap:wrap;
padding-top:10px;
width:auto;
height:100%;
background:#fff;
position:relative;
box-shadow: inset -2px 1px 3px 0px rgba(0, 0, 0, 0.05);
}
.main-menu>ul>li>ul {
width:100%;
display:none;
height:100%;
flex-wrap: wrap;
}
.main-menu > ul > li:first-child {
}
.main-menu > ul li {
width:300px;
}
.main-menu > ul li > a{
padding:10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-items:center;
font-weight:500;
position:relative;
display:block;
}
.main-menu > ul li > a .total-count{
position: absolute;
right: 32px;
color: #ccc;
font-weight: normal;
font-size: 12px;
padding: 1px;
}
.desktop-nav .main-menu > ul ul li > a .total-count{
right: 10px;
margin-top:1px;
}
.main-menu > ul > li a:hover .total-count{
color:#444;
}
.main-menu > ul > li.active > a{
color:var(--main-color);
background: #fbfbfb;
}
.main-menu > ul > li > ul {
position: absolute;
left: 300px;
top: 0px;
border-left: 2px solid #fafafa;
margin-left:-4px;
align-content: flex-start;
max-height: 100%;
}
.main-menu > ul > li > ul ul {
box-shadow:none;
height:auto;
padding-top:0px;
overflow: hidden;
}
.main-menu > ul > li > ul > li > ul > li{
margin-bottom:10px;
}
.main-menu > ul > li > ul ul ul{
max-height: 135px;
}
.main-menu > ul > li > ul ul.visible {
overflow: visible;
background: #fff;
display: table;
box-shadow: 2px 2px 1px #fafafa;
padding-bottom:10px;
}
.main-menu > ul ul li > a {
padding-left:20px;
}
.main-menu > ul ul ul ul li > a {
font-weight:normal;
padding:5px 25px 5px 20px;
color:#818191;
display:block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.desktop-nav .main-menu > ul ul ul ul li > a {
padding-right:30px;
}
.main-menu > ul > li > ul > li {
width:100%;
display:flex;
}
.main-menu > ul ul > li button {
height: auto;
text-decoration: underline;
font-weight: normal;
font-size: 14px;
padding:0 20px;
color:var(--main-color);
}
.main-menu > ul > li > ul a:hover {
color: #333;
}
.main-menu .li-opened {
overflow-y: scroll;
}
.main-menu h2 {
flex-grow: 1;
width: 100%;
padding: 10px 0 5px 20px;
height:36px;
line-height:36px;
color: #818191;
font-size:20px;
}
h4 {
font-size:16px;
font-weight:500;
margin-bottom: 4px;
padding-bottom: 6px;
padding-top: 4px;
}
.go-back {
padding-left:10px;
}
.sl-item {
padding-left:10px;
}
#files {
display: flex;
gap: 11px;
flex-wrap: wrap;
}
#files li {
position:relative;
cursor:pointer;
width: 92px;
height: 92px;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-position: center center;
border-image: initial;
box-sizing:border-box;
border-radius: 5px;
background-color:#ececec;
background-size: contain;
}
#files li.btn-add-file {
border-width: 1px;
border-style: dashed;
border-color: rgb(182, 182, 182);
background: #fff;
}
.file-inf {
position: absolute;
bottom: 6px;
font-size: 8px;
text-transform: uppercase;
text-align: center;
justify-content: center;
display: flex;
color: #adadad;
width: 100%;
}
.file-icn {
width:25px;
height:25px;
display: block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cline y1='12' x2='25' y2='12' stroke-width='1.25' stroke='%23b6b6b6'/%3E%3Cline x1='12' y1='25' x2='12' y2='2.18557e-08' stroke-width='1.25' stroke='%23b6b6b6'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center center;
border-image: initial;
}
.main-menu > ul > li > a::before,
.mobile-nav .main-menu ul li.drop-down > a::before,
.mobile-nav .close-search:after,
.go-back:after{
content: '';
position:absolute;
right:10px;
top: 5px;
font-size:20px;
width: 200px;
height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: 120%;
width: 26px;
height: 26px;
display: block;
border-radius: 100%;
}
.main-menu > ul > li.active > a::before,
.main-menu > ul > li.opened > a::before{
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cg %3E%3Cpath d='m17 1a16 16 0 1 0 16 16 16.019 16.019 0 0 0 -16-16zm5.707 16.707-8 8a1 1 0 0 1 -1.414-1.414l7.293-7.293-7.293-7.293a1 1 0 0 1 1.414-1.414l8 8a1 1 0 0 1 0 1.414z' fill='%23fbfbfb'/%3E%3C/g%3E%3C/svg%3E");
background-color: var(--main-color);
}
.main-menu > ul:before {
position: absolute;
top:0px;
right: 100%;
content: '';
width: 100vw;
background: #fff;
height: 100%;
box-shadow: inset 4px 1px 3px 0px rgba(0, 0, 0, 0.05);
}
.header-nav.nav-hide {
display:none;
}
.header-nav.nav-show {
display:flex;
}
header {
position:sticky;
top:-30px;
}
.header-box {
display:flex;
align-items:center;
max-width:var(--main-width);
margin:0 auto;
width:100%;
gap:20px;
padding: 0 20px;
}
.header-box > .row {
flex-wrap:nowrap;
}
.loader {
width: 100%;
height: 100%;
display: block;
margin: auto;
position: relative;
background: #FFF;
box-sizing: border-box;
}
.loader p {
border-radius: 5px;
background:#f1f1f1;
display: block;
height:45px;
margin: 0 10px 10px 10px;
}
.loader hr {
display:block;
height:10px;
background: none;
}
.loader p:nth-child(even) {
content: '';
height:95px;
}
.loader div {
display:flex;
width:100%;
box-sizing: border-box;
padding:10px 10px 0px 10px;
gap:10px;
}
.loader button,.loader textarea {
border-radius: 3px;
background: #f1f1f1;
min-height: 45px;
margin: 10px 10px 0px 10px;
border: none;
width: calc(100% - 20px);
}
.loader div span {
min-height:48px;
border-bottom:1px solid #fff;
display:block;
flex-grow: 1;
background:#f1f1f1;
height:95px;
border-radius: 3px;
}
.loader div span:first-child {
min-width: 95px;
max-width: 95px;
}
.loader li {
min-height:48px;
border-bottom:1px solid #fff;
}
.loader:empty {
height:100%;
width:100%;
background:#f1f1f1;
position:absolute;
}
.loader p,.loader li,.loader div span,.loader button,.loader textarea,.loader:empty {
background-image:
linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 75%, transparent 100%),
linear-gradient(#ebebeb 100%, transparent 0);
background-repeat: no-repeat;
background-size: 75px 100%, 100% 100%;
background-position: -320px 0, center 0;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
to {
background-position: 320px 0, center 0, center 115px, center 142px;
}
}
.loading {
background: rgb(0, 0, 0);
opacity: 0.6;
width: 100%;
height: 100vh;
display: flex;
z-index: 2;
position: absolute;
}
.btn {
background:transparent;
position: relative;
height: 45px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
border:none;
border-radius: 5px;
font-family: "Roboto";
font-size: 16px;
font-weight: 500;
line-height: 130%;
letter-spacing: 0%;
text-align: left;
box-sizing: border-box;
}
.popup-header .input-wrap .btn{
height: 40px;
}
.popup-header .btn-frame{
height: 40px;
min-width:110px;
}
.btn-frame {
min-width: 125px;
border: 2px solid #646477;
color: #646477;
padding: 0 7px;
}
.btn-round {
border-radius: 25px;
}
.btn-review {
padding: 0 20px;
}
.btn-buy,.btn-add,.btn-save,.btn-apply {
background: var(--main-color);
margin: auto;
width: 100%;
color: rgb(255, 255, 255);
font-size: 16px;
}
.btn-apply {
height: 39px;
width:auto;
padding:0 20px;
}
.btn-add svg{
stroke:#fff;
}
.btn-wait {
display: flex;
justify-content: flex-start;
padding-left: 7px;
font-size: 14px;
line-height: 12px;
gap: 5px;
background: transparent;
color: var(--main-color);
border: 2px solid var(--main-color);
}
.btn-green {
background: #4bbe44cc;
color: #fff;
font-weight: normal;
}
.btn-yellow {
background: #ffdc41;
color: #3d3d3d;
}
.btn-wait svg{
fill:var(--main-color);
stroke: transparent;
min-width: 25px;
width: 25px;
height: 25px;
padding-left:0.5px;
}
.btn-wait.in-wait {
border-color:#80bb80;
color:#80bb80;
}
.btn-wait.in-wait svg {
stroke:#fff;
fill:#80bb80;
stroke-width:0.5;
min-width: 26px;
width: 26px;
height: 26px;
padding-left:0px;
}
.btn-black {
background: #3c3b3b;
color:#fff;
padding:0 15px;
}
.btn-border {
border: 1px solid #3c3b3b;
}
.btn-wide {
width:100%;
}
.btn-link {
border-bottom: 1px solid #111;
font-weight: 400;
height: auto;
width: max-content;
border-radius: 0;
padding: 0px;
}
.btn-tag,.btn-tag-add,.btn-analog-add {
background: #ebebeb;
color: #656565;
padding: 4px 10px;
margin: 5px;
border-radius: 3px;
white-space: nowrap;
max-width: 100%;
flex-wrap: wrap;
display: flex;
font-size: 12px;
box-sizing: border-box;
text-wrap: wrap;
text-align: left;
line-height: 100%;
min-height: 28px;
height: auto;
align-items: center;
margin: 0px;
gap:0px;
}
.btn-tag-add,.btn-analog-add {
margin-left: auto;
font-size: 20px;
min-width: 28px;
padding: 0px;
justify-content: center;
margin-right: 6px;
background: #ececec;
font-weight: normal;
color: #bababa;
}
.select-wrap .btn-tag-add {
background:none;
}
.popup .input-box select,.select-wrap .btn-tag-add {
background-image:url('data:image/svg+xml,');
background-position: calc(100% - 10px);
padding-right: 34px;
background-repeat:no-repeat;
}
.select-wrap .btn-tag-add {
background-position:center;
padding:0px;
}
.select-wrap .btn-tag {
background: none;
color: var(--color-tag-text-select);
font-size: 14px;
padding: 0px 10px;
}
.open-edit svg,.open-menu svg {
fill:#777;
transition: fill .4s ease;
}
.open-edit:hover svg,.open-menu:hover svg {
fill: var(--main-color);
}
button[disabled] {
opacity:0.75;
}
@keyframes loading-1{
0% {clip-path: polygon(50% 50%,0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0% )}
12.5% {clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0% )}
25% {clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100% )}
50% {clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100% )}
62.5% {clip-path: polygon(50% 50%,100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100% )}
75% {clip-path: polygon(50% 50%,100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100% )}
100% {clip-path: polygon(50% 50%,50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100% )}
}
@keyframes loading-2{
0% {transform:scaleY(1) rotate(0deg)}
49.99%{transform:scaleY(1) rotate(135deg)}
50% {transform:scaleY(-1) rotate(0deg)}
100% {transform:scaleY(-1) rotate(-135deg)}
}
.btn-loading::after{
content: '';
display: block;
height: 20px;
position: absolute;
width: 20px;
right: 10px;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #fff;
animation: loading-1 0.8s infinite linear alternate, loading-2 1.6s infinite linear;
}
.btn-link.btn-wide {
margin:auto;
}
.btn-frame svg {
stroke: #646477;
}
.btn-menu {
padding-left:13px;
justify-content:flex-start;
}
.btn-menu svg path {
opacity: 1;
transition: transform .3s;
transform-origin: center;
}
.btn-menu.active svg .p1 {
transform: rotate(45deg) translate3d(0, 7px, 0);
}
.btn-menu.active svg .p2 {
opacity: 0;
}
.btn-menu.active svg .p3 {
transform: rotate(-45deg) translate3d(0, -5px, 0);
}
.btn-show-more {
color: #ffffffe0;
font-weight: 500;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
cursor: pointer;
justify-content: center;
padding: 10px 20px;
background: #448844dd;
box-shadow: 0px -1px 2px #00000014;
border-radius: 5px;
margin-top:10px;
}
.table-header,.table-footer,.form-header{
display: flex;
min-height: 47px;
align-items: center;
font-size: 14px;
font-weight: 500;
color: #414141;
padding: 0 10px 0 17px;
box-sizing:border-box;
background:#f6f6f6;
}
.table-footer {
background:none;
}
.popup-footer {
margin-top: auto;
position: sticky;
bottom: 0px;
padding: 10px 15px;
background: #ffffffe3;
box-shadow: 1px -2px 4px #0000001a;
z-index: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.popup-footer:empty {
display:none;
}
.input-box.input-disabled{
opacity:0.5;
}
.offer-per-row {
display:block;
}
.input-box input {
color: #818191;
font-size: 16px;
font-weight: 400;
line-height: 130%;
letter-spacing: 0%;
text-align: left;
background: rgb(255, 255, 255);
}
.input-wrap {
min-height: 45px;
margin-top: auto;
border-radius:5px;
}
.popup-header .input-wrap{
min-height: 40px;
}
.search-holder {
flex-grow:1;
position:relative;
}
.result-box {
margin-bottom:15px;
}
.search-holder .search-results{
position: absolute;
background: #fff;
width: 100%;
padding: 5px 0px 10px 0px;
border-radius: 5px;
border: 2px solid #ededed;
visibility: visible;
transition: .3s;
}
.wget-holder {
padding-left: 20px;
font-size: 16px;
color:#676767;
}
.search-holder .search-results li {
display: flex;
}
.search-holder .search-results li button {
margin-left: auto;
height: 30px;
padding: 0px 15px;
}
.search-holder .search-results li button svg {
fill:#d1d1d1;
}
.search-holder .search-results a {
display:block;
padding:5px 15px;
}
.search-holder .search-results:empty {
visibility: hidden;
}
.input-focus fieldset {
border-color:#818191;
}
.search-box fieldset,
.search-box.input-focus fieldset {
box-sizing: border-box;
border: 2px solid var(--main-color);
border-radius: 5px;
height: 49px;
}
.popup-header .search-box fieldset,
.popup-header .search-box.input-focus fieldset {
height: 46px;
}
.search-box .btn {
padding: 13px 20px 12px 20px;
height: 42px;
gap: 5px;
background:var(--main-color);
color: #fff;
border-radius: 0 5px 5px 0;
}
.popup-header .search-box .btn {
background:none;
color:#444;
padding: 13px 10px 12px 10px;
}
.input-box label {
line-height: 26px;
color: #818191;
font-size: 14px;
font-weight: 400;
}
.popup-header .input-box label {
line-height: 24px;
font-size:14px;
}
.search-box label {
font-size: 16px;
}
.search-box.input-focus label {
transform: translate(13px, -9px) scale(0.75);
}
.popup-header .search-box.input-focus label {
transform: translate(15px, -8px) scale(0.75);
}
.logo {
display: flex;
flex-grow: 1;
width: 100%;
height: max-content;
align-items: flex-end;
height:90px;
}
.logo img,.logo svg{
max-height: 90px;
max-width: 200px;
}
.user-offers .result-box {
margin: 10px;
}
.user-offers .user-offer-details{
display: flex;
height: 100%;
width: 100%;
margin: 5px 0px 5px 0px;
padding: 3px 0;
}
.user-offers .user-offer-image{
min-width: 95px;
height: 95px;
background-repeat: no-repeat;
opacity: 0.7;
border:1px solid #aab1c599;
color: #aab1c5;
box-sizing: border-box;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
font-size: 9px;
text-transform: uppercase;
background-position: center center;
border-radius: 5px;
margin: 0px 5px 10px 0px;
}
.user-buttons {
display: flex;
width: 100%;
justify-content: space-between;
}
.auth-title {
max-width:65px;
overflow:hidden;
text-overflow: ellipsis;
}
.user-buttons button {
flex-direction:column;
height:auto;
color: #646477;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: 0%;
text-align: center;
white-space:nowrap;
justify-content: flex-end;
gap:2px;
font-size: 11;
width:33.3%;
}
.offer {
flex-direction:column;
}
.offer.user-offer {
flex-direction: row;
padding:0px;
}
.btn-buy.to-cart {
background: var(--main-color);
color:#fff;
font-size: 16px;
font-weight:500;
}
.btn-buy.to-cart svg{
display:none;
}
.btn-buy.in-cart svg {
fill:#fff;
display:block;
}
.to-cart button {
width:100%;
}
.user-buttons button:after {
display:none;
}
.slide-step {
color: #444;
font-size: 14px;
position: absolute;
bottom: -20px;
right: 2px
}
.filter-price .input-box{
margin-left:5px;
}
.filter-price .input-box:first-child{
margin-right:5px;
margin-left:0px;
}
.filter-basic {
display:flex;
gap:10px;
}
.filter-basic button {
font-size: 14px;
color:#818191;
position:relative;
}
.filter-basic button ul{
display:none;
}
.filter-basic button ul li {
text-align: left;
justify-content: flex-start;
display: flex;
padding: 5px 5px 5px 15px;
}
.filter-basic button ul li span:after {
display:none;
}
.filter-basic button ul li span {
margin-left:0px;
}
.filter-basic button ul li.active {
color:#000;
}
.filter-basic button.active {
border-radius: 5px 5px 0 0;
}
.filter-basic button.active ul{
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: -2px;
z-index: 3;
background: #fff;
min-width: 100%;
border: 2px solid #d9dde8;
border-top: 0px;
margin: 0px;
padding: 0px;
border-radius: 0 0 5px 5px;
box-shadow: 0 0 2px #fff;
gap: 5px;
padding-bottom: 5px;
}
.filter-basic button.active svg {
transform: rotate(180deg);
}
.filter-basic svg {
fill:#818191;
opacity:0.75;
}
.filter-outer {
padding:5px 5px 0px 5px;
}
.filter-box {
border-top: 1px solid rgb(217, 221, 232);
padding:20px 0;
}
.pagination {
display:flex;
}
.pagination li a, .pagination li span {
position: relative;
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5px 12px 5px 12px;
box-sizing:border-box;
border-radius: 5px;
font-size: 14px;
font-weight: 500;
}
.pagination li .current {
background:var(--main-color);
color:#fff;
}
.offer {
padding: 0px 5px 5px 5px;
}
.offer-image {
position: relative;
display: flex;
width: 100%;
align-items:center;
aspect-ratio: auto 4/4;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: background .5s ease-in-out;
border-radius:3px;
}
.offer-files {
aspect-ratio: auto 4/4;
}
.offer-files img,.offer-files video {
width: 100%;
height: auto;
display: block;
visibility: visible;
border-radius: 2px;
}
.offer-image svg {
margin:auto;
}
.cat-apparel .offer-image,.cat-apparel .offer-files {
aspect-ratio: auto 4/6;
}
.cat-transport .offer-image,.cat-transport .offer-files {
aspect-ratio: auto 5/4;
}
.offer-image .t-hover {
min-width: 0;
position: absolute;
background-size: 0;
height:100%;
}
.offer-image:hover .t-hover:before {
content: '';
width: 90%;
margin: auto;
display: block;
height: 3px;
border-radius:1px;
background-color: #eee;
transition: background-color .3s ease-in-out;
position:absolute;
bottom:3px;
left:2px;
}
.offer-image:hover .t-hover:hover:before {
background-color: #bebebe
}
.offer.mc-1-1 .t-hover{
min-width:100%;
position:initial;
background-size:cover
}
.offer.mc-1-1 .product-image{
background-size:0
}
.offer-price {
display: flex;
gap: 5px;
width: 100%;
font-weight: 500;
margin: 8px 0 2px 0px;
font-size: 18px;
}
.offer-name {
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
line-height: 14px;
}
.offer-options {
width: 100%;
background: #fff;
height: 25px;
color: #888;
line-height: 14px;
letter-spacing: .5px;
text-align: left;
transition: .3s;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.offer-options s {
text-decoration: none;
opacity: .3;
}
.offer-buttons {
display: flex;
gap: 10px;
flex-direction:column;
align-items: center;
margin: 5px 0 19px;
}
.offer-buttons button {
font-weight:normal;
font-size:15px;
}
.nu-price {
color: rgb(235, 87, 87);
}
.filter-basic button {
box-sizing: border-box;
border: 2px solid rgb(217, 221, 232);
border-radius: 5px;
padding: 10px 11px 10px 11px;
font-weight:400;
}
ul.slide-pick {
text-align: center;
position: absolute;
bottom: -25px;
width: 100%;
padding: 0
}
ul.slide-pick li {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color .6s
}
.slide-pick li.active,.slide-pick li:hover {
background-color: #717171
}
.slide-back, .slide-next {
width: 50px;
position: absolute;
z-index: 1;
border: none;
outline: none;
cursor: pointer;
top: 0;
right: 4px;
font-size: 0;
background-size: 14px 23px;
background-repeat: no-repeat;
background-position: 55% 50%;
background-image: url("data:image/svg+xml,%3Csvg width='14.000000' height='23.000000' viewBox='0 0 14 23' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdesc%3E Created with Pixso. %3C/desc%3E%3Cdefs/%3E%3Cpath id='Arrow 2 (Stroke)' d='M2.85 0.45L13.5 10.39C14.16 11 14.16 11.99 13.5 12.6L2.85 22.54C2.2 23.15 1.14 23.15 0.49 22.54C-0.17 21.93 -0.17 20.94 0.49 20.33L9.95 11.5L0.49 2.66C-0.17 2.05 -0.17 1.06 0.49 0.45C1.14 -0.16 2.2 -0.16 2.85 0.45Z' fill='%23ABB1C6' fill-opacity='1.000000' fill-rule='evenodd'/%3E%3C/svg%3E%0A"); transition: .15s opacity;
height: 50px;
background-color: #ffffffcc;
top: calc(50% - 22px);
border-radius: 100%;
box-shadow: 0px 0px 4px 0px rgba(47, 59, 103, 0.25);
}
.slideshow {
padding:0px;
position:relative;
aspect-ratio: auto 5/2;
}
.slide-item {
border-radius:5px;
overflow:hidden;
}
.slide-back {
transform: rotate(180deg);
left: 6px;
}
.localities {
position: absolute;
z-index: 2;
background: #fffffff2;
width: 100%;
box-shadow: 0px 2px 4px #bcbcbccc;
}
.locality-list {
padding: 8px 0;
z-index: 2;
position: absolute;
background: #fff;
width: 100%;
box-sizing: border-box;
top: 50px;
border: 1px solid #ccc;
border-radius: 12px;
}
.locality-list li {
padding: 6px 15px;
cursor:pointer;
color:#808080;
}
.locality-list li:hover {
color:#000;
}
.location {
height: 37px;
}
.navigation {
height: 37px;
margin-left:auto;
}
.navigation ul,.location ul {
height:37px;
display:flex;
flex-direction:row;
}
.location a {
display: flex;
justify-content: center;
align-items: center;
padding: 0px 6px 1px 13px;
height: 37px;
gap: 6px;
color: #818191;
font-weight: 500;
font-size:12px;
}
.location a svg{
fill:#818191;
stroke:#818191;
}
.location a:hover {
color:var(--main-color);
}
.location a:hover svg{
fill:var(--main-color);
stroke:var(--main-color);
}
.state-box {
opacity:0.5;
font-size:8px;
text-transform:uppercase;
padding: 7px;
border-radius: 3px;
letter-spacing: 0.25px;
font-weight:500;
}
.white-state {
background: rgb(225 225 225);
color: rgb(72 72 72);
}
.lilac-state {
background: rgb(200 200 255);
color: rgb(50 0 72);
}
.pink-state {
background: rgb(255 172 255);
color: rgb(100 0 55);
}
.grey-state {
opacity:1;
background: #7b7b7b;
color: #d0d0d0;
}
.green-state {
background: rgb(172 235 172);
color: rgb(0 72 55);
}
.greenish-state{
background: rgb(209 255 194);
color: rgb(62 97 47);
}
.swampish-state{
background: rgb(218 255 170);
color: rgb(79 101 28);
}
.yellow-state {
background: rgb(255 255 172);
color: rgb(72 55 0);
}
.red-state {
background: rgb(255 200 172);
color: rgb(72 0 0);
}
.orange-state {
background: rgb(255 215 152);
color: rgb(72 45 0);
}
.blueish-state{
background: rgb(206 232 255);
color: rgb(35 50 112);
}
.blue-state {
background: rgb(172 235 235);
color: rgb(0 55 72);
}
.gray-state {
background: rgb(212 212 212);
color: rgb(40 40 40);
}
.telephone {
display:flex;
align-items: center;
font-weight: 500;
font-size: 17px;
justify-content: flex-end;
color: #3f3f44;
padding-right: 15px;
}
.navigation ul a {
padding: 10px 20px 8px 20px;
display: block;
}
.navigation ul li:hover a {
color:var(--main-color);
}
.toolbar {
display: flex;
justify-content: space-between;
padding: 0px 15px;
box-shadow: 0 0 2px #0000004f;
z-index: 10;
position: fixed;
bottom: 0px;
background: #fff;
width:100%;
align-items: center;
}
.close-search {
display:none;
}
.toolbar button:after{
display:none;
}
.mobile-nav .search-content {
padding: 11px 10px 11px 0;
width:100%;
}
.header-nav.mobile-nav {
top:0px;
}
.mobile-nav .main-menu {
padding:0px;
}
.mobile-nav .close-search {
width: 28px;
display: block;
}
.offer-gallery {
display:flex;
flex-direction:column;
}
.offer-gallery ul li {
}
.offer-slides {
width: 100%;
overflow-x: hidden
}
.offer-slideshow {
display: flex;
align-content: center;
position: relative;
gap: 5px;
position: sticky;
top: 70px;
height: min-content;
width: 100%;
}
.cat-transport .offer-slideshow {
flex-direction: column-reverse;
}
.offer-thumbs {
width:100%;
}
.to-wish {
cursor:pointer;
position: absolute;
right: 26px;
top: 12px;
z-index:2;
display: flex;
align-items: center;
gap:4px;
}
.to-wish svg{
fill:rgb(129, 129, 145);
stroke: #ffffff;
stroke-width: 1.5;
opacity:0.85;
}
.in-wish svg{
fill:rgb(235, 87, 87);
}
.b-content {
padding-top:0px;
}
.btn-hide {
display: inline-block;
font-weight: 700;
background: #f7f7f7;
width: auto;
padding: 5px 10px;
margin-bottom: 10px;
transition: transform .8s ease-in-out
}
.btn-hide i,.btn-hide span {
display: inline-block;
vertical-align: middle
}
.btn-hide svg {
height: 10px;
width: 20px;
fill: #777;
padding: 0 5px
}
.ul-list li,.ul-lists li {
height: 60px;
list-style: none;
}
.hide-box,.product-full-tab-content {
height: 0;
transition: height .5s ease-out;
overflow: hidden;
display: block;
padding: 0 20px
}
.ul-list,.ul-list li,.ul-lists {
padding: 0;
display: flex;
height: max-content;
}
.hide-box.active,.product-full-tab-content.active {
transition: height .5s ease-in;
height: auto
}
.ul-lists {
margin: 0
}
.ul-list {
margin: 0;
flex-direction: column;
position: relative;
}
.ul-lists>li>a {
color: #000;
padding-top: 36px;
margin: 0 0 16px;
font-size: 14px;
line-height: 16px;
display: flex
}
.ul-list li {
flex-direction: row;
align-items: center;
border-bottom: 1px solid #f7f7f7
}
.ul-list>li>a {
display: flex;
width: 100%;
flex-direction: column
}
.mobile-nav .main-menu ul li.drop-down > a::before,
.mobile-nav .close-search:after,
.go-back:after
{
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cg %3E%3Cpath d='m17 1a16 16 0 1 0 16 16 16.019 16.019 0 0 0 -16-16zm5.707 16.707-8 8a1 1 0 0 1 -1.414-1.414l7.293-7.293-7.293-7.293a1 1 0 0 1 1.414-1.414l8 8a1 1 0 0 1 0 1.414z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
background-color: var(--main-color);
border:2px solid #fff;
box-sizing:border-box;
top: 10px;
}
.go-back:after,.mobile-nav .close-search:after{
transform: rotate(180deg);
left: 5px;
top: 9px;
}
.go-back:after {
left:-5px;
top:1px;
}
.mobile-nav .main-menu ul li.drop-down.opened > a {
padding: 23px 0 23px 38px;
height: 67px;
z-index:2;
background: #fff;
position: fixed;
top: 0px;
width: 100%;
box-shadow: 0px 1px 2px #ededed;
box-sizing:border-box;
}
.mobile-nav .main-menu ul li.drop-down.opened > a::before {
left:5px;
top: 20px;
right:auto;
transform: rotate(180deg);
}
.mobile-nav .main-menu ul:last-child {
padding-bottom:60px;
}
.mobile-nav .main-menu > ul li {
width:100%;
}
.mobile-nav .main-menu > ul li {
flex-direction:column;
}
.mobile-nav .main-menu > ul > li > ul {
position:relative;
left:0px;
}
.mobile-nav .main-menu ul:has(>li.opened),
.mobile-nav .main-menu li.opened,
.mobile-nav .main-menu li.opened > ul{
position:absolute;
z-index: 1;
top:0px;
left: 0px;
width:100%;
height: 100%;
}
.mobile-nav .main-menu ul {
padding:0px;
border:0px;
margin:0px;
overflow:hidden;
}
.mobile-nav .main-menu > ul {
height: calc(100vh - 110px);
overflow: scroll;
}
.mobile-nav .main-menu > ul > li > ul button {
display:none;
}
.mobile-nav .main-menu > ul > li > ul ul ul{
display:none;
}
.mobile-nav .main-menu li.opened > ul {
display:block;
padding-top: 67px;
background: #fff;
}
.mobile-nav .main-menu li.opened > ul li {
margin-bottom:0px;
}
.mobile-nav .main-menu ul li a {
font-size:16px;
font-weight:500;
padding: 14px 25px 14px 20px;
color:#555;
user-select:none;
}
.mobile-nav .main-menu > ul > li.opened > ul:has(.opened) {
z-index:2;
}
.mobile-nav .main-menu > ul li > a .total-count {
padding:3px;
font-size:12px;
}
.search-menu {
background: #fff;
}
.search-menu ul {
padding:0px;
margin:0px;
position:relative;
top:0;
left:0;
height:auto;
}
.mobile-nav .search-results {
display:none;
height:100%;
}
.mobile-nav .show-results {
display:block;
}
.categories-inner li{
position:relative;
}
.categories-inner li a{
font-size: 14px;
display:block;
line-height: 130%;
padding:5px 10px;
}
.categories-inner li.active > a{
background: rgb(240, 240, 247);
color:var(--main-color);
border-radius: 3px;
width: max-content;
}
.btn-more {
border-radius: 5px;
background:var(--main-color);
color:#fff;
max-width: max-content;
padding: 0 51px;
margin:auto;
}
.table-footer .btn-more {
margin:10px 0;
}
.sidebar-outer {
width:100%;
}
.checkbox {
display:flex;
}
.checkbox input {
position: absolute;
z-index: -1;
opacity: 0;
}
.checkbox label {
display: flex;
align-items: center;
margin: 6px 0;
gap:5px;
cursor:pointer;
}
.checkbox label.disabled {
opacity: 0.5;
color: #abb1c6;
cursor: not-allowed;
}
.checkbox label::before {
content: "";
display: inline-block;
width: 1.125rem;
height: 1.125rem;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
border: 2px solid rgb(171, 177, 198);
border-radius: 3px;
margin-right: .3125rem;
background-repeat: no-repeat;
background-position: center center;
background-size: 70%;
}
.filter-size .options,.filter-spectrum .options{
display: flex;
flex-wrap: wrap;
gap:5px;
}
.filter-size .checkbox label {
min-width: 44px;
border: 1px solid rgb(171, 177, 198);
border-radius: 3px;
justify-content: center;
padding: 0 5px;
height: 33px;
margin:0px;
align-items: center;
}
.filter-size .checkbox label.active {
color:#fff;
background:var(--main-color);
border-color:var(--main-color);
}
.filter-size .checkbox label::before,
.filter-spectrum .checkbox label::before {
display:none;
}
.filter-spectrum .checkbox {
border-radius: 4px;
border:1px solid #fff;
}
.filter-spectrum .checkbox:has(> .active) {
box-shadow: 0 0 1px 2px #8c8c8c;
}
.filter-spectrum .checkbox label.disabled {
opacity:1;
position:relative;
}
.filter-spectrum .checkbox label.disabled::before,
.filter-spectrum .checkbox label.disabled::after {
display: block;
content: "";
position: absolute;
width: calc(100% + 10px);
height: 2px;
background: #ffffff;
top: calc(50% - 1px);
left: -5;
border: none;
border-radius: 2px;
}
.filter-spectrum .checkbox label.disabled::before {
transform: rotate(45deg);
}
.filter-spectrum .checkbox label.disabled::after {
transform: rotate(135deg);
}
.filter-spectrum .checkbox label {
font-size: 0px;
width: 33px;
height: 33px;
border:2px solid #fff;
margin:0px;
box-sizing:border-box;
border-radius: 3px;
}
.form-fields {
display: flex;
flex-direction: column;
margin: 15px;
gap: 15px;
}
.checkbox-3412 label, .checkbox-310 label { background: #964B00; }
.checkbox-3413 label, .checkbox-311 label { background: #FF0000; }
.checkbox-3414 label, .checkbox-312 label { background: #FFC0CB; }
.checkbox-3415 label, .checkbox-313 label { background: #FFA500; }
.checkbox-3416 label, .checkbox-314 label { background: #FFFF00; }
.checkbox-3417 label, .checkbox-315 label { background: #008000; }
.checkbox-3418 label, .checkbox-316 label { background: #00BFFF; }
.checkbox-3419 label, .checkbox-317 label { background: #0000FF; }
.checkbox-3420 label, .checkbox-318 label { background: #800080; }
.checkbox-3421 label, .checkbox-319 label { background: #000000; }
.checkbox-3423 label, .checkbox-321 label { background: #808080; }
.checkbox-4597 label {background: #F5F5DC;}
.checkbox-322 label {
background: conic-gradient(
red 0deg 90deg,
yellow 90deg 180deg,
green 180deg 270deg,
blue 270deg 360deg
);
}
.filter-spectrum .checkbox label {
border:1px;
}
.filter-spectrum .checkbox-3422 label,
.filter-spectrum .checkbox-320 label {
background: #FFFFFF;
border:1px solid rgb(171, 177, 198);
}
.filter-spectrum .checkbox-320 label.disabled::before,
.filter-spectrum .checkbox-320 label.disabled::after,
.filter-spectrum .checkbox-3422 label.disabled::before,
.filter-spectrum .checkbox-3422 label.disabled::after {
background:rgb(171, 177, 198);
}
.checkbox label.active::before {
background-color:var(--main-color);
border-color:var(--main-color);
background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M4.53 9.91L0.08 5.36C0.05 5.34 0.03 5.31 0.02 5.27C0 5.24 0 5.2 0 5.16C0 5.13 0 5.09 0.02 5.05C0.03 5.02 0.05 4.99 0.08 4.96L1.2 3.81C1.31 3.7 1.48 3.7 1.59 3.81L4.52 6.8C4.63 6.91 4.81 6.91 4.91 6.8L11.4 0.08C11.5 -0.03 11.68 -0.03 11.79 0.08L12.91 1.23C13.02 1.34 13.02 1.52 12.91 1.63L5.85 8.95L5.85 8.95L4.92 9.91C4.82 10.02 4.64 10.02 4.53 9.91Z' fill='%23FFFFFF' fill-opacity='1' fill-rule='nonzero'/%3E%3C/svg%3E");
}
.options {
transition: max-height 0.3s ease-in-out;
}
.options .option.unavailable {
opacity:0.75;
color:#999;
}
.options.filter-scroll {
max-height: 270px;
}
.all-options {
color:var(--main-color);
font-weight:normal;
}
.filter {
margin: 20px 0 20px 0;
}
.count-cart, .count-wish, .count-auth, .count-fops {
color: #fff;
background: #e34669;
border: 2px solid #fff;
border-radius: 100%;
text-align: center;
position: absolute;
height: 19px;
min-height: 15px;
min-width: 19px;
font-style: normal;
line-height: 15px;
font-size: 10px;
top: -3px;
left: 53%;
font-weight: 400;
padding: 0 3px;
box-sizing: border-box;
}
.count-fops {
left: calc(100% - 21px);
top: 1px;
}
.offer-labels {
position: absolute;
top: 4;
left: 11px;
}
.offer-collection {
font-weight: 500;
color: #414141;
border-left: 4px solid var(--main-color);
background: #ffffffa3;
border-radius: 3px;
padding: 2px 5px 2px 5px;
text-transform: uppercase;
line-height: 14px;
font-size: 10px;
text-shadow: 0px 0px 2px #fff;
display: block;
}
.widget {
width: 100%;
}
.widget-list {
width: 100%;
display: flex;
flex-direction: column;
}
.widget-list ul{
width:100%;
margin-top:8px;
}
.widget-list ul li{
border-bottom:1px solid #f1f1f1;
}
.widget-list ul ul {
margin-top:0px;
}
.widget-list ul li li{
border-bottom:none;
}
.widget-list ul li.active li{
list-style:disc;
}
.widget-list ul li li a{
padding-left:0px;
}
.widget-list ul li a {
padding: 8px 15px;
display: block;
}
.widget-list ul li a:empty {
padding: 0;
}
.widget-list ul li.active > a {
font-weight:bold;
background:#f1f1f1;
border-radius: 3px;
}
.widget-list ul li ul {
padding-left:28px;
}
.widget-list ul li ul li.active > a {
font-weight:bold;
background:none;
}
.widget-list ul li a:hover {
color:var(--main-color);
}
.ch-filters {
margin-left:5px;
display: none;
flex-wrap: wrap;
}
.ch-filters li {
height: 33px;
color: rgb(113, 115, 136);
background: rgb(240, 240, 247);
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
border-radius: 5px;
padding-right:6px;
margin-right:10px;
}
.ch-filters li:last-child {
background:none;
}
.ch-filters li .ch-title{
padding-left:8px;
text-wrap: nowrap;
}
.ch-close {
width:23px;
height:23px;
display:flex;
justify-content: center;
align-items: center;
cursor:pointer;
background: rgb(217, 221, 232);
border-radius:100%;
margin-left:6px;
}
.offer-card {
margin-top:15px;
padding:0px;
}
.offer-files {
border:1px solid #cc0000;
flex: 1;
visibility: hidden;
cursor:pointer;
}
.widgets {
display:flex;
flex-direction:column;
gap:50px;
width: 100%;
position:sticky;
top:70px;
height:max-content;
}
.widgets .widget {
display:flex;
flex-direction:column;
border-radius: 7px;
min-height: 140px;
padding:30px 20px;
}
.widgets .widget-filled {
background: rgb(240, 240, 247);
}
.widgets .widget-framed {
box-shadow: 0px 0px 4px 0px rgba(47, 59, 103, 0.25);
}
.offers-box .to-wish:before,.offer-rating .to-wish:before {
content: attr(data-count);
text-align: center;
display: inline-block;
font-size: 14px;
vertical-align: middle;
}
.offer-right {
padding-left:0px;
}
.offer-card h1 {
margin:0px 0px 5px 5px;
}
.offer-rating {
display: flex;
gap: 9px;
align-items: center;
}
.offer-rating .to-wish {
top: 3px;
position: relative;
margin-left: auto;
height: auto;
gap: 5px;
font-weight: normal;
font-size: 14px;
}
.offer-rating-stars {
}
.offer-rating-title {
padding-top:2px;
color: rgb(113, 115, 136);
font-size: 14px;
font-weight: 400;
line-height: 16px;
}
.offer-prices {
display: flex;
gap: 10px;
flex-direction: row;
font-size: 20px;
align-items: center;
}
.widgets .offer-prices {
font-size:24px;
}
.ds-price {
display: flex;
background: rgb(235, 87, 87);
font-size: 11px;
font-weight: 500;
min-width: 35px;
height: 17px;
border-radius: 2px;
color: #fff;
align-items: center;
justify-content: center;
}
.ex-price {
text-decoration: line-through;
color: rgb(171, 177, 198);
}
.offer-card .offer-prices .ex-price {
font-size: 14px;
padding-top: 1px;
}
.offer-card .offer-prices .nu-price {
margin-left: 3px;
}
.offer-seller {
padding-left: 3px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
color: #717388;
gap: 5px;
}
.offer-seller .offer-rating {
width:100%;
}
.offer-variants ul,
.offer-attributes ul {
display:flex;
gap:15px;
align-items: center;
flex-wrap: wrap;
}
.offer-details {
margin-left: 2px;
display:flex;
gap:30px;
flex-direction:column;
width: 100%;
padding-right:0px;
}
.offer-variant,
.offer-attribute {
font-weight: 600;
font-size: 16px;
display: flex;
gap: 5px;
margin-bottom: 8px;
}
.offer-variant span:first-child,.offer-attribute span:first-child {
color: #717388;
}
.offer-features p {
font-size: 14px;
border-bottom: 1px solid #f0f0f7;
padding-bottom: 14px;
}
.offer-tabs > ul {
display: flex;
gap: 40px;
}
.offer-tabs > ul li {
font-size: 20px;
display:flex;
align-items:center;
padding: 10px 0px;
}
.offer-tabs > ul li span {
display: block;
color: rgb(113, 115, 136);
border-bottom: 3px solid transparent;
padding-bottom: 5px;
cursor:pointer;
}
.offer-tabs > ul li.active span {
border-bottom: 3px solid var(--main-color);
}
.offer-tab-content strong {
font-weight:bold;
}
.offer-tab-content p {
line-height: 130%;
}
.offer-tab-content {
padding-top:15px;
}
.offer-features p span:first-child{
color:#717388;
}
.offer-variants ul li,
.offer-gallery ul li {
width: 80px;
height: min-content;
box-sizing: border-box;
border-radius: 3px;
padding: 2px;
border: 2px solid transparent;
}
.offer-attributes ul li button {
background: rgb(240, 240, 247);
display: flex;
align-items: center;
border-radius: 6px;
height: 32px;
padding: 0 11.67px;
font-size: 13px;
font-weight: 400;
box-sizing: border-box;
padding-top: 1px;
border: 2px solid transparent;
}
.offer-attributes ul li button.active {
border: 2px solid var(--main-color);
}
.offer-variants ul li.active {
border: 2px solid var(--main-color);
}
.offer-variants ul li a {
display:block;
}
.offer-variants ul li img {
width:100%;
border-radius:2px;
}
.available {
color:#80bb80;
font-weight:normal;
}
.seller-name {
display: flex;
align-items: center;
gap: 5px;
width: 100%;
}
.seller-name span:nth-child(2) {
color: #2F80ED;
}
.slideshow {
position: relative;
margin-bottom: 30px
}
.slideshow:empty {
margin-bottom: 0px
}
.slide-case {
width: 100%;
position: relative;
margin: 0px auto;
}
.slide-case .slide-show {
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
-ms-overflow-style: none;
-scrollbar-width: none;
margin-bottom: 40px;
margin-top:10px;
}
.offer-thumbs.slide-x .slide-show {
margin-top:0px;
margin-bottom: 0px;
padding-top:0px;
}
.slide-case .slide-show ul {
white-space: nowrap;
width: min-content
}
.recommended-holder {
margin-top: 80px
}
.slide-case .slide-show {
position: relative;
padding-top: 14px
}
.slide-case .slide-show ul li {
width: 275px;
vertical-align: top;
position: relative;
display: inline-block;
list-style: none;
padding: 3px;
box-sizing: border-box
}
.offer-thumbs.slide-x .slide-show ul li {
width: 150px;
height: 100px;
}
.slide-case .slide-show li img {
width: 100%;
height: auto
}
.offer-thumbs {
position: relative;
width:100%;
}
.offer-thumbs.slide-y {
width:80px;
flex-shrink:0;
margin: 0px;
}
.offer-thumbs.slide-0 {
display:none;
}
.slide-y .slide-back {
left: calc(50% - 25px);
top: 0px;
transform: rotate(-90deg);
}
.offer-thumbs.slide-y .slide-next,
.offer-thumbs.slide-y .slide-back {
background-color:transparent;
box-shadow:none;
}
.slide-y .slide-next {
left: calc(50% - 25px);
top: calc(100% - 40px);
transform: rotate(90deg);
}
.slide-y .slide-show {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: hidden;
padding: 0px;
margin-top: 45px;
user-select: none;
}
.slide-y .slide-show ul li {
cursor:pointer;
display: block;
padding-bottom:5px;
width: 80px;
padding: 2px;
border:2px solid transparent;
border-radius: 3px;
}
.offer-thumbs .slide-show ul li.active {
border: 2px solid var(--main-color);
}
.offer-thumbs .slide-show ul li span {
display:block;
border-radius: 2px;
overflow:hidden;
}
.offer-card .offer-files img, .offer-thumbs img,.offer-thumbs video {
height: fit-content;
width: 100%;
height: auto;
display:block;
}
.overlay {
background-color: rgba(3, 8, 13, .24);
-webkit-overflow-scrolling: touch;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
z-index: 1005;
backdrop-filter: blur(1px);
}
.popup {
display: flex;
flex-direction: column;
height: 100vh;
height: -webkit-fill-available;
width:100%;
max-width:440px;
position: fixed;
left: auto!important;
right: 0px;
top: 0px;
z-index: 1011;
background: #ffffff;
box-shadow: 0px 1px 6px 2px #00000011;
}
.popup-600 {
max-width:600px;
}
.popup-center {
z-index: 2002;
right: calc(50% - 200px);
left: calc(50% - 200px) !important;
min-width: 400px;
top: 95px;
border-radius: 5px;
bottom: 50px;
}
.popup-center .popup-header{
border-radius: 5px 5px 0 0;
}
.popup-close,.popup-back{
cursor:pointer;
padding:0px;
font-size: 10px;
line-height: 13px;
text-transform: uppercase;
color: #999;
background: none;
border: none;
transition: color .3s ease;
display: inline-block;
height: 27px;
-webkit-user-select:none;
user-select:none;
}
.popup-close {
margin-left:auto;
padding-right:10px;
}
.popup-header {
z-index: 1010;
text-align:left;
border-bottom: 1px solid #f7f7f7;
position: sticky;
top: 0;
right: 0;
left: 0;
justify-content: space-between;
align-items: center;
min-height: 60px;
padding: 16px;
z-index: 13;
display:flex;
padding: 0 0 0 10px;
background: #ffffffee;
box-sizing: border-box;
}
.popup-title {
margin-right: auto;
padding-right:10px;
font-size: 18px;
flex-grow: 1;
}
.popup-tools {
padding-right:10px;
}
.popup-close{
background:url('data:image/svg+xml,');
height: 27px;
width: 27px;
background-repeat:no-repeat;
}
.popup-back {
position: relative;
height: 27px;
width: 19px;
margin-right: 5px;
display: none;
}
.tabs-list {
overflow-x: scroll;
white-space: nowrap
}
.tabs-list li {
display: inline-block;
vertical-align: top;
margin: 0;
font-style: normal;
font-weight: 700;
color: #7d7d7d
}
.tab p {
margin-bottom: 10px;
font-size: 16px
}
.cab-head {
display: flex;
align-items: center;
margin: 10px
}
.cab-head p {
margin: 0;
font-size: 16px;
display: flex
}
.cab-icon {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding-right: 10px
}
.user-tabs::-webkit-scrollbar,.login-tabs::-webkit-scrollbar {
display: none
}
.user-tabs li a {
padding: 10px 20px 15px;
display: block;
letter-spacing: 1px;
box-sizing: border-box;
border-bottom: 2px solid #f1f1f1
}
.user-tabs li {
flex-grow: 1
}
.login-tabs {
margin: 0px 0px 0px 0
}
.login-tabs li {
width: 49.5%
}
.user-tabs li a.active {
border-bottom: 2px solid #777;
color: #555
}
.simple-table-header>div,.simple-table-row>div,.tab-order {
padding: 15px
}
.login-tabs .am-btn,.product-full-tab-content .btn,.tab-order-head {
}
.form-legend {
margin: 0px 0px 15px 0;
font-size: 14px;
color: #8d8d8d;
margin-top: 5px;
}
.popup-form {
padding: 20px;
}
.alternative {
color: rgba(0, 26, 52, .4);
margin: 16px auto;
padding: 0 16px;
position: relative;
text-align: center;
width: -moz-max-content;
width: max-content;
text-transform: uppercase;
}
.alternative:after, .alternative:before {
background-color: rgba(0, 26, 52, .2);
content: "";
height: 1px;
position: absolute;
top: 7px;
width: 70px;
}
.alternative:before {
left: -70px;
}
.alternative:after {
right: -70px;
}
.method-list, .social-list {
padding: 10px 0;
margin:auto;
}
.social-list li {
display: inline-block;
margin: 10px;
background: #f1f1f1;
opacity: .9;
border-radius: 3px;
}
.social-list li a {
display:block;
padding:5px;
}
.use-otp {
margin:auto;
}
.toggle-visibility {
background:none;
}
.toggle-visibility svg {
fill:none;
}
.toggle-visibility.is-visible svg {
fill:#000;
}
.toggle-visibility.is-visible {
transform: scale(1, -1)
}
.cart-offer {
display: flex;
flex-wrap:nowrap;
flex-direction:row;
min-height: 42px;
font-size: 13px;
color: rgb(119, 119, 119);
box-sizing: border-box;
padding: 10px 15px;
border-bottom: 1px solid rgba(192, 192, 192, 0.24);
}
.cart-offer .dc:first-child {
flex-grow:1;
}
.cart-offer .dc:last-child {
width:100%;
}
.cart-offer-details {
gap: 3px;
justify-content:space-between;
}
.current-promo {
min-height: 58px;
line-height: 58px;
border-bottom:1px solid #f3f3fa;
background: #f0f0f8cc;
color: #7c7c7c;
text-shadow: 0 0 1px #fff;
padding: 0 20px;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.promo-holder a {
display: flex;
width: 100%;
align-items: center;
justify-content: space-around
}
.promo-countdown {
font-size: 15px;
font-weight: 400;
vertical-align: middle;
white-space: nowrap;
display: flex;
gap: 7px;
max-width: 150px;
font-family: monospace;
}
.pr-until span,.promo-countdown span {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
width: 15px;
position: relative
}
.pr-until span:after,.promo-countdown span:after {
content: ':';
display: inline-block;
position: absolute;
color: #3c3b3b;
right: -11px
}
.pr-until span:after {
right: -5px
}
.product-full .pr-until:before {
content: '/';
display: inline-block;
width: 11px;
padding-left: 6px;
text-align: center
}
.pr-until span:last-child:after,.promo-countdown span:last-child:after {
content: '';
display: none
}
.product-full .pr-promo {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
font-size: 19px;
line-height: 22px;
font-family: Monospace;
letter-spacing: normal;
text-transform: none;
color: #777;
font-style: normal;
font-weight: 400
}
.product-full .pr-until {
display: flex;
gap: 7px;
font-weight: 400
}
.pr-until span {
background: 0 0;
color: #7f7f7f;
font-size: 19px;
line-height: 22px
}
.promo-countdown span {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
font-size: 17px;
letter-spacing: 2px;
border-radius: 3px;
padding: 0px 2px 0px 4px;
background: #3c3b3b;
color: #fff
}
.promo-title {
font-size: 18px;
font-weight: 500;
text-shadow: 0 0 1px #fff;
vertical-align: middle;
font-style: normal;
color: #f69;
line-height: 1.15;
white-space: break-spaces;
cursor:pointer;
}
.submit-promocode {
width:100%;
border-radius:0px 5px 5px 0px;
height:46px;
}
.promocode-box fieldset{
border-radius:5px 0px 0px 5px;
height:51px;
border-width: 2px;
}
.input-box legend {
height:12px;
}
.promocode-box.input-focus fieldset{
border-color:#3c3b3b;
}
.promocode-box.input-focus label {
color:#3c3b3b;
}
.cart-offer-stock,.cart-offer-quantity {
width:100%;
}
.cart-offer-quantity input::-webkit-inner-spin-button{
-webkit-appearance: none;
margin:0;
}
.cart-offer-quantity input {
text-align:center;
-moz-appearance: textfield;
border:none;
background:transparent;
}
.field-group {
font-weight: bold;
}
.cart-offer-quantity {
justify-content: flex-end;
display: flex;
}
.cart-offer-quantity button {
background: #818191;
border: none;
border-radius: 100%;
color: #fff;
font-size: 15px;
line-height: 100%;
}
.cart-offer-quantity input {
width:40px;
}
.cart-offer-quantity button {
height:20px;
width:20px;
color:#f1f1f1;
}
.cart-offer-stock {
padding: 0px 0px;
height: 18px;
width: auto;
font-size: 14px;
margin-left: 0px;
margin-right:auto;
gap:5px;
}
.cart-offer-price {
margin:0px;
font-size:16px;
}
.popup-buttons,.minicart-promocode {
padding: 15px;
}
.popup-buttons button {
margin: auto;
}
.minicart-bottom {
padding: 15px;
box-sizing: border-box;
}
.minicart-widgets {
min-height:45px;
}
.minicart-header {
padding:15px;
box-sizing: border-box;
}
.minicart-bottom-row {
padding:5px 0;
}
.row-total {
border-top: 1px solid #a2a2a2;
margin-top: 10px;
padding-top: 15px;
font-size: 20px;
}
.cart-offer-image {
display: block;
min-height: 90px;
width: 90px;
background-size: cover;
background-position: center;
border-radius: 3px;
margin-right: 10px;
}
.cart-offer-actions button {
font-size:12px;
background:none;
padding:0px;
color:#ccc;
gap:4px;
position: relative;
top: 0px;
left: 0px;
height:auto;
margin-right:5px;
line-height:12px;
font-weight:normal;
}
.cart-offer-actions .to-wait{
color:#eeaa22;
text-decoration:underline;
}
.cart-offer-notice {
color:#cc88cc;
font-size:12px;
}
.cart-offer-error {
color:#e97e97;
font-size:12px;
}
.cart-offer-success {
color:#41aa34;
font-size:12px;
}
.popup-content section ul > li.available .li-label {
color:#41aa34;
}
.available.unavailable,
.popup-content section ul > li.unavailable .li-label {
color:#db5a77d9
}
.cart-offer-actions .in-wait {
color:#80bb80;
text-decoration:none;
}
.cart-offer-title {
line-height: 16px;
padding: 0;
position: relative;
display: inline-block;
font-size: 16px;
color: #777;
}
.mokka-banner {
display: flex;
flex-direction: column-reverse;
align-items: center;
background: #f1f1f1
}
.mokka-banner>div {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
width: 100%;
height: 400px;
justify-content: center
}
.mokka-banner>div:first-child {
background: url('/src/images/webp/mokka-banner-pic.webp') top center/80% no-repeat
}
.mokka-banner .mokka-logo {
text-align: center;
flex-direction: column;
position: relative
}
.mokka-banner .mokka-logo span {
color: #ff5a1e;
font-weight: 700;
letter-spacing: 1px;
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
font-size: 9px;
text-transform: uppercase;
font-family: Arial;
white-space: nowrap
}
.mokka-banner h2 {
line-height: 100%;
text-align: center;
color: #333;
max-width: 300px;
font-weight: 700;
font-family: Arial;
margin: 50px 0 20px;
font-size: 27px
}
.mokka-banner p {
font-size: 15px;
color: #616161;
text-align: center;
margin-bottom: 40px;
max-width: 260px;
letter-spacing: .4px;
font-weight: 700;
padding: 0
}
.open-mokka {
display: flex;
gap: 6px;
margin: 20px auto 0;
justify-content: center;
color: #ff5a1e
}
.open-mokka .btn-mokka svg {
background: #fff;
border-radius: 3px;
border: 1px solid #0000006b;
padding: 3px;
box-sizing: border-box;
stroke: none;
}
.open-mokka .btn-mokka.active svg {
stroke: #000000;
stroke-width: 3px;
}
.minicart-box .to-cart {
color:#556aaa;
text-decoration:underline;
}
.minicart-box .to-cart svg{
fill:#556aaa;
stroke:#556aaa;
}
.minicart-box .in-cart {
color:#80bb80;
text-decoration: none;
}
.minicart-box .in-cart svg{
fill:#80bb80;
stroke:none;
}
#fullcart .open-mokka,.minicart-box .open-mokka {
justify-content: flex-start
}
#fullcart form,.minicart-box form {
width:100%;
box-sizing: border-box;
}
#fullcart form {
padding-right:20px;
}
.fullcart-info {
padding-left: 20px;
padding-top: 1px;
width: 100%;
position: sticky;
top: 70px;
height: max-content;
min-height: auto;
}
.fullcart-summary {
padding: 15px;
border: 2px solid #ebebeb;
border-radius: 38px;
}
#fullcart .table-header {
border-radius: 3px;
border-radius: 25px;
padding: 0 20px 0 20px;
}
.review-icon {
margin-bottom:auto;
padding-right:10px;
max-width: max-content;
}
.review-icon svg {
text-transform: uppercase;
}
.review-text {
font-size: 14px;
color: #606060;
font-style: normal;
line-height: 16px;
letter-spacing: 0.1px;
padding-top: 16px;
}
.offer-reviews {
margin:0;
padding:0;
}
.offer-reviews li {
list-style: none;
padding: 16px 0;
flex-wrap:nowrap;
}
.review-head {
display:flex;
flex-direction: row;
}
.review-main {
padding-top: 14px;
display:flex;
justify-content: space-between;
flex-direction: column;
}
.review-right {
display: flex;
flex-direction: row;
align-items: center;
gap:10px;
margin-left:auto;
}
.review-left {
margin-right: auto;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
}
.review-date {
font-style: normal;
line-height: 125%;
font-size: 14px;
color: #959595;
}
.ul-rate {
display: flex;
justify-content: left;
direction: rtl;
margin: 20px 0 40px;
gap:5px;
}
.on-rate {
cursor:pointer;
}
.on-rate svg {
fill:#ccc;
transition: fill 0.3s;
}
.on-rate.active svg,.on-rate:hover svg,.on-rate:hover ~.on-rate svg {
fill:#ffc200;
}
.rating-box {
margin-top: 25px;
display:flex;
flex-direction:row;
justify-content:space-between;
}
.rating-stars {
margin-right: auto;
}
.rating-stars svg {
width:22px;
height:22px;
}
.rating-grade {
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 28px;
width:40px;
}
.ul-rate li svg,.rating-stars svg,.review-stars svg {
fill:#fff;
stroke:#B8B5B4;
}
.ul-rate li.active svg,.rating-stars svg.active,.review-stars svg.active {
fill:#F7AF44;
stroke:#F7AF44;
}
.open-mokka-form,.open-mokka-form:hover {
cursor: pointer;
font-weight: 700;
align-items: center;
display: flex;
gap: 6px
}
.open-mokka-header {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
font-size:16px;
}
.open-mokka-full {
flex-direction: column;
padding: 15px;
border: 2px solid #ff5a1fba;
border-radius: 38px;
}
#mokka_frame,#mokka_iframe {
position: fixed;
width: 100%;
max-width:440px;
border-left: 1px solid #ccc;
background: #fff;
right: 0;
top: 0;
height: 100vh;
display: none;
overflow: scroll;
z-index: 30003
}
.popup-600 #mokka_frame {
max-width:600px;
}
.mokka-popup svg {
margin: 20px auto 5px;
width: 90%
}
.mokka-popup p {
margin: 0 0 5px;
text-align: center
}
.mokka-popup li,.mokka-popup ul {
margin: 0;
padding: 0
}
.mokka-popup li {
width: 200px;
margin: auto auto 10px
}
.mokka-popup li span {
display: block
}
.mokka-popup li img {
width: 110px
}
.popup-content {
height:100%;
display: flex;
flex-direction: column;
overflow-y:auto;
}
.popup-content .options-box ul > li:first-child > span {
border-top: 1px solid transparent;
}
.popup-content section ul > li a,
.popup-content section ul > li span {
box-sizing: border-box;
display: flex;
align-items: center;
text-decoration: none;
}
.popup-content section ul > li > span {
min-height: 48px;
color: rgb(85, 85, 85);
font-size: 14px;
font-weight: 500;
margin-top: -1px;
background-size: 12px;
gap: 8px;
border-top: 1px solid #f0f0f0;
border-bottom: 1px dashed #f0f0f0;
padding: 2px 10px 2px 10px;
background-position: calc(100% - 20px) 50%;
}
.popup-content section ul > li .li-label {
color: #728bbb;
font-weight: normal;
}
.btn-pick {
margin-left:auto;
}
.pick-radio::after, .pick-select::after, .pick-checkbox::after {
border-width: 1px;
border-style: solid;
border-color: rgb(170, 170, 170);
border-image: initial;
}
.btn-pick::after {
content: "";
height: 25px;
min-width: 25px;
margin-left: auto;
background-repeat: no-repeat;
cursor: pointer;
float: left;
border-radius: 3px;
transition: 0.15s ease-out;
background-position: center center;
}
.cart-offer-actions .pick-checkbox::after{
border-width: 1.5px;
min-width: 16px;
height: 16px;
}
.popup-content section ul > li .disabled,
.popup-content section ul > li .disabled::after {
cursor:crosshair;
}
.popup-content section ul > li:has(.btn-pick.disabled){
opacity:0.5;
}
.popup-back:after,.pick-link:after {
content:url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='26' height='26' fill='%23ABB1C6' stroke='%23ABB1C6'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
height: 27px;
width: 19px;
transform: rotate(180deg);
}
.pick-select::after, .pick-radio::after {
border-radius: 100%;
}
.cart-offer-notify {
display:flex;
align-items:center;
color:#80bb80
}
.pick-checkbox.active:after,
li.active .pick-checkbox:first-of-type:after {
background-image: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ stroke=\'%23aaa\'\ fill=\'none\'\ stroke-width=\'2\'\ width=\'22\'\ height=\'22\'\ viewBox=\'0\ 0\ 24\ 24\'%3E%3Cpath\ stroke-linecap=\'round\'\ d=\'M22.9\ 3.7l-15.2\ 16.6-6.6-7.1\'%3E%3C/path%3E%3C/svg%3E);
}
.cart-offer-actions .pick-checkbox.active::after{
background-color: #4bbe44cc;
border-color: transparent;
background-image: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ stroke=\'%23fff\'\ fill=\'none\'\ stroke-width=\'3\'\ width=\'22\'\ height=\'22\'\ viewBox=\'0\ 0\ 24\ 24\'%3E%3Cpath\ stroke-linecap=\'round\'\ d=\'M22.9\ 3.7l-15.2\ 16.6-6.6-7.1\'%3E%3C/path%3E%3C/svg%3E);
background-size:75%;
}
.pick-select.active:after,.pick-radio.active:after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' fill=\'%23aaa\'\ cy='50' r='50' /%3E%3C/svg%3E");
background-size: 60%;
}
.pick-link:after {
transform:rotate(0deg);
height: 27px;
min-width: 19px;
}
.fields .btn-link {
margin:auto;
}
.input-box.input-error label {
color: rgb(235, 87, 87);
}
.input-box.input-error fieldset {
border-color:rgb(235, 87, 87);
}
.order-info-holder {
flex-direction: column;
padding: 20px;
}
.order-check {
margin: 35px auto;
width:100%;
}
.order-check span {
width:50px;
height:50px;
margin:auto;
background: #48b774;
animation: bgTransition 1s ease-out forwards;
display:block;
border-radius: 100%;
}
@keyframes bgTransition {
0% {
background-color: #48b774;
}
100% {
background-color: #fff;
}
}
.order-number {
width: 150px;
padding: 2px 2px 2px 2px;
letter-spacing: 4px;
border-radius: 4px;
font-weight: bold;
font-size: 16px;
display: flex;
gap: 2px;
}
.order-info p {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
}
.digit-box {
width: 120px;
height: 30px;
background: #48b774;
border-radius: 3px;
overflow: hidden;
box-sizing: border-box;
position: relative;
text-align: center;
justify-content: center;
display: flex;
}
.digit-roller {
position: absolute;
width: 100%;
transition: transform 0.2s linear;
}
.digit {
height: 30px;
width: 23px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-align: center;
font-size: 15px;
color: #ffffff;
padding: 0px;
padding-left: 15%;
}
.order-accepted h2 {
justify-content: center;
margin: 10px auto 10px auto;
}
.order-accepted .order-info {
text-align: center;
}
.auth-pin-code{
width: 190px;
max-width: 190px;
overflow: hidden;
margin: 30px auto;
display: flex;
justify-content: space-between;
}
.auth-pin-code input {
padding: 0px;
position: relative;
transform: translateZ(0);
font-size: 40px;
line-height: 40px;
width: 36px;
background: none;
border: none;
color: #fff;
border-radius: 3px;
border-bottom: 2px solid #000;
text-align: center;
appearance: none;
background: #3c3b3b;
}
.auth-pin-code input::-webkit-inner-spin-button{
-webkit-appearance: none;
margin:0;
}
.auth-countdown,.sendagain {
color: #777;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 16px;
letter-spacing: 0.1px;
}
.sendagain:disabled {
display:none;
}
.countdown {
width: 70px;
display: inline-block;
white-space: nowrap;
}
.msg {
background: #eaeaeaaa;
color: #3d4d4d;
width: max-content;
margin: 2px 10px 2px 20px;
padding: 20px 20px;
border-radius: 12px;
position: relative;
min-height: 38px;
font-size:13px;
max-width:300px;
}
.msg-self {
margin-left:auto;
background: #ddeeffaa;
color: #334455cc;
}
.msg-date,.msg-user {
position: absolute;
font-size: 9px;
font-weight: 500;
opacity: 0.65;
}
.msg-user {
position: relative;
font-size: 12px;
width: 100%;
display: flex;
padding-bottom: 1px;
}
.msg-date {
bottom: 2px;
right: 10px;
}
.msg p {
padding:0px;
margin:0px;
}
.msg img {
border-radius: 10px;
max-width:200px;
}
.msg:before {
content: '';
position: absolute;
left: -17px;
top: 13px;
border: 7px solid transparent;
border-right: 10px solid #eaeaeaaa;
}
.msg-self:before {
left: 100%;
top: 13px;
border: 7px solid transparent;
border-left: 10px solid #ddeeffaa;
}
.messages .msg {
margin-bottom: 10px;
padding: 5px 15px 15px 12px;
border-radius: 6px;
min-width: 140px;
}
.messages .msg:before {
bottom: 8px;
top: auto;
}
#dialogs_pop .message {
height: 70px;
padding: 10px 10px 0px 10px;
}
#dialogs_pop .message.unread .count-new {
color:#fff;
}
.help-chat {
margin-top:20px;
box-sizing:border-box;
width:100%;
}
.help-chat .msg {
opacity: 0;
transition: 1s;
animation: show 3s 1;
animation-fill-mode: forwards;
animation-delay: 0s;
max-width:80%;
margin-left: 12%;
box-sizing:border-box;
}
.help-chat .msg-2 {
animation-delay: 1s;
}
.help-chat .msg-3 {
animation-delay: 2s;
}
.help-chat .msg:after {
content: '!';
position: absolute;
left: -27px;
top: 12px;
width: 15px;
height: 15px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
font-size: 10px;
font-family: monospace;
font-weight: bold;
box-sizing: border-box;
background: #60a269de;
}
.help-chat .msg.msg-alert:after {
background: #FF5050d4;
}
.help-chat .msg.msg-notice:after {
background: #f79955cc;
}
.help-chat .msg.msg-error:after {
background: #eb5757cc;
}
.help-chat .msg.msg-wide {
width:100%;
}
.messages {
height:100%;
}
.success-box,.success-content {
margin: auto;
height: 100%;
display: flex;
flex-direction: column;
font-size: 20px;
padding-bottom: 30px;
justify-content: center;
max-width:300px;
}
.success-box h3,.success-box p {
text-align:center;
justify-content:center;
}
.success-content svg {
margin: 0 auto;
}
#map {
height:100%;
}
#localities .popup-content {
padding:5px 0 10px 0;
height:auto;
}
#localities .popup-content ul {
margin: 0px 24px;
}
#localities .popup-content li {
list-style: disc;
color: #556aaa;
}
#localities .popup-content li {
list-style: disc;
color: #556aaa;
}
#localities .popup-content li a {
padding: 5px 0px;
display: block;
font-size: 14px;
color: #566aaa;
text-decoration: underline;
}
#localities .popup-header {
padding-left:10px;
}
#localities .btn-more {
margin-left: 14px;
font-size: 14px;
background: #566aaa;
color: #fff;
padding: 5px 10px;
border-radius: 2px;
border: none;
}
.article ol li,.content-holder ol li {
padding: 4px;
font-size: 15px;
line-height: 16px;
list-style: decimal;
margin-left: 20px
}
.article h1,.content-holder h1 {
margin:0px;
}
footer {
padding: 0;
flex: 0 0 auto;
background: #eee;
color: #7c7c7c;
text-align: center;
margin-top: 46px;
display:none;
}
.foot-links {
padding: 20px 10px;
}
.foot-links>ul {
display: flex;
flex-direction: column;
justify-content: center;
gap: 50px;
}
.foot-links>ul>li {
text-align: center
}
.foot-links>ul>li>span {
font-weight: 700;
display: block;
padding-bottom: 15px;
font-size: 15px;
text-align: left;
}
.foot-links a,
.foot-links>ul>li li {
padding: 0;
margin: 0
}
.foot-links a {
font-size: 13px;
display: block;
color: #909090;
text-align: left;
padding: 3px 0;
}
.foot-links .li-1200 ul,
.foot-links .li-1197 ul {
flex-wrap: wrap;
display:flex;
justify-content: space-between;
gap:10px;
}
.foot-links .li-1200 ul li span,
.foot-links .li-1197 ul li span {
display:none;
}
.foot-links .li-1197 svg {
max-width: 36px;
height: 32px;
}
.foot-links li li svg {
filter: saturate(0.75);
transition: filter 0.3s ease-in-out;
}
.foot-links li li:hover svg {
filter: saturate(1);
}
.foot-links .li-1200 svg {
width: 90px;
max-height: 50px;
}
.foot-links .li-1434 svg {
fill:#ff5a1e;
}
.social-links ul {
display: inline-block;
vertical-align: middle;
height: 28px
}
.social-links svg {
width: 28px;
height: 28px;
fill: #bebebe
}
.checkout-form {
padding: 15px;
border-radius: 38px;
border: 2px solid #f1f1f1;
}
.contacts,.delivery,.delivery-message {
padding: 20px;
border-radius: 25px;
border: 2px solid #f1f1f1;
min-height: 45px;
}
#delivery-map {
display: flex;
flex-direction: column;
min-height: 400px;
width: 100%;
border-radius: 12px;
background: #f1f1f1;
justify-content: center;
align-items: center;
}
#delivery-map svg {
fill:#d92929;
stroke:#d92929;
}
#delivery-map button {
padding: 0 20px 0 30px;
line-height: 100%;
min-height: 45px;
}
.find-me {
margin-top: 10px;
padding: 0 17px 0 7px;
}
#delivery-map button.find-me {
display:none;
}
.delivery-options {
width:100%;
}
.delivery-options ul {
display: flex;
background: #f1f1f1;
overflow: hidden;
margin-bottom: 15px;
border-radius: 25px;
padding: 2px;
width:100%;
}
.delivery-options ul li {
padding: 14px 18px;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
border-radius: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
height: 41px;
flex-grow: 1;
justify-content: center;
cursor:pointer;
max-width: max-content;
}
.delivery-options ul li.active {
color: #fff;
background:#45bc22;
}
.contacts .input-wrap,.delivery .input-wrap {
border-radius:11px;
}
.contact-fields,.delivery-fields {
display:flex;
flex-direction: column;
gap:10px;
width:100%;
}
.payments {
padding: 20px;
border-radius: 25px;
background: #f1f1f1;
}
.payments ul {
display: flex;
gap: 10px;
}
.payments ul li {
max-width: max-content;
display: flex;
flex-direction: column;
padding: 5px;
border: 2px solid #e0e0e0;
border-radius: 10px;
align-items: center;
cursor:pointer;
background: #fff;
}
.payments ul li.active {
max-width: max-content;
display: flex;
flex-direction: column;
padding: 5px;
border: 2px solid #45bc22;
border-radius: 10px;
box-shadow: 0 0 3px #999;
}
.payments ul li span:first-child {
height: 60px;
display: flex;
align-items: center;
padding: 5px 10px;
border-radius: 6px;
box-sizing:border-box;
width:110px;
justify-content: center;
}
.payments ul li span:last-child {
text-transform: uppercase;
font-size: 9px;
text-align: center;
display: block;
padding-top: 5px;
font-weight: bold;
color: #949494;
margin-top: auto;
}
.payments ul li.active span:last-child {
color: #45bc22;
}
.pay-with-mokka span:first-child {
background: #FF5A1E;
}
.pay-with-dolyame span:first-child {
background:#000;
}
.pay-with-bank span:first-child{
background: #f8edbe;
}
.pay-with-cache span:first-child{
background: #f8edbe;
}
.pay-with-mokka svg,.pay-with-dolyame svg {
fill:#fff;
}
.payment-message {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 60px;
background: #fff;
margin-top: 15px;
border-radius: 12px;
padding: 20px;
flex-direction: column;
color:#888;
}
.payment-message p {
margin: 0 0 10px 0;
}
.payment-links ul {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.payment-links li,
.social-links li {
text-align: center;
display: inline-block;
min-width: 40px;
vertical-align: middle
}
.payment-links li a,
.social-links li a {
font-size: 0px;
display: block
}
.payment-links svg {
height: 35px;
width: 80px
}
.payment-links li:first-child svg,.payment-links li:nth-child(2) svg {
height: 25px
}
.pay-tabs {
display:flex;
}
.pay-tab {
display: none
}
.pay-tabs li {
justify-content: center;
display: flex;
flex-grow: 1
}
.pay-tabs li a {
padding: 15px 10px;
display: block;
width: 100%;
font-weight: 700;
text-align: center;
background: #f6f6f6
}
.pay-tabs li a.active {
background: #fff;
}
.pay-tab.active {
display: block;
}
.foot-menu {
padding: 3px;
background: #3c3c3b;
justify-content: center
}
.foot-menu ul {
display: flex;
flex-direction: column;
text-align: center;
padding: 8px 0;
justify-content: center
}
.foot-menu li {
display: inline-block;
vertical-align: middle;
margin: 0;
color: #898989
}
.foot-menu a {
font-style: normal;
font-size: 15px;
line-height: 16px;
color: #fff;
padding: 10px 20px;
display: block
}
.article ul li {
list-style: disc;
margin-left: 20px;
padding: 4px
}
@keyframes slide-down {
0% {
transform:translateY(-100%);
}
100% {
transform:translateY(0%);
}
}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media (max-width:992px) {
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
header {
min-height:0px;
}
}
@media (min-width:500px) {
.no-scroll {
padding-right:7px;
}
.foot-links>ul,.foot-menu ul,ul.feat-list {
display:flex;
flex-direction: row
}
.toolbar {
display: none;
}
.offer-per-row {
display:none;
}
#main {
padding:0 20px;
margin:20px auto;
}
.offer {
padding: 0px 15px 15px 15px;
}
.minicart-box .offer {
padding: 10px;
}
#fullcart .offer {
padding: 10px 20px;
}
.offer-right {
padding-left:15px;
}
.offer-details {
padding-right:10px;
}
.ch-filters {
margin-left:15px;
}
.filter-outer {
padding:5px 15px 0px 15px;
}
.breadcrumbs {
margin-left: 15px;
display:flex;
gap: 5px;
}
.breadcrumbs a:after {
content:'>';
}
.breadcrumbs li:last-child a:after {
display:none;
}
.breadcrumbs a,.breadcrumbs span {
color: rgb(113, 115, 136);
font-size: 14px;
}
.app-classifieds .user-auth {
margin-left: auto;
margin-right: auto;
}
footer {
display:flex;
flex-direction: column;
}
.offer.mc-1-1 .t-hover {
min-width: 0;
position: absolute;
background-size: 0
}
.offer.mc-1-1 .product-image {
background-size: cover
}
}