/* Font-Face */
@font-face {
font-family: YekanBakh;
font-style: normal;
font-weight: 100;
font-stretch: normal;
src: url("../font/YekanBakh/FaNum/YekanBakhFaNum-Thin.woff2") format("woff2");
font-display: swap;
size-adjust: 92%;
}
@font-face {
font-family: YekanBakh;
font-style: normal;
font-weight: 300;
font-stretch: normal;
src: url("../font/YekanBakh/FaNum/YekanBakhFaNum-Light.woff2") format("woff2");
font-display: swap;
size-adjust: 92%;
}
@font-face {
font-family: YekanBakh;
font-style: normal;
font-weight: normal;
font-stretch: normal;
src: url("../font/YekanBakh/FaNum/YekanBakhFaNum-Regular.woff2")
format("woff2");
font-display: swap;
size-adjust: 92%;
}
@font-face {
font-family: YekanBakh;
font-style: normal;
font-weight: bold;
font-stretch: normal;
src: url("../font/YekanBakh/FaNum/YekanBakhFaNum-Bold.woff2") format("woff2");
font-display: swap;
size-adjust: 92%;
}
/* Font-Face End */
/* Overrides */
*{
font-family: "YekanBakh";
/* scroll-behavior: smooth; */
-webkit-overflow-scrolling: touch;
outline: none !important;
}
*:target{
scroll-margin-top: 100px;
}
html{
height: 100%;
}
body{
/* height: 100%; */
position: relative;
/* opacity: 0; */
font-size: 14px;
}
img{
max-width: 100%;
}
hr{
margin-top: 10px !important;
margin-bottom: 10px !important;
border: 0 !important;
border-top: 1px solid #b5b5b5 !important;
}
b, strong{
font-weight: 600;
}
a{
text-decoration: none !important;
color: inherit;
font-size: inherit;
font-weight: inherit;
}
p, li{
line-height: 30px;
}
input{
outline: none;
font-size: 16px;
}
.pointer{
cursor: pointer;
}
.mejs__container{
max-width: 100%;
max-height: 400px;
}
.mejs__container *{
font-family: Helvetica,Arial,serif !important;
}
.form-control:focus{
outline: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.input-group input {
border-radius: 0 !important;
}
.input-group-btn:first-child > .btn-number{
border-bottom-left-radius: 4px !important;
border-top-left-radius: 4px !important;
border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.input-group-btn:last-child > .btn-number{
border-bottom-right-radius: 4px !important;
border-top-right-radius: 4px !important;
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
}
.equal .col-md-3{
margin: 0 auto;
}
/* @media (min-width: 768px){
.row.equal{
display: flex;
flex-wrap: wrap;
}
} */
.select2-container{
z-index: 100001;
}
.well{
background-color: #FFF;
}
.buy-well{
background: #FAFAFA;
font-size: 18px;
border-radius: 20px;
border: 1px #a3a3a3 solid;
padding: 10px;
}
.pretty.bigger{
font-size: 20px;
}
.pretty.bigger input{
z-index: 1000;
}
.pretty.whitebg i::after{
background: #FFF;
}
.pretty i {
min-height: 1em;
vertical-align: middle;
}
.pretty input:checked+label i.fa-check::after {
content: " ";
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.table-responsive p, .table-responsive h1, .table-responsive h2, .table-responsive h3, .table-responsive h4, .table-responsive h5, .table-responsive h6{
margin: 0;
}
.table-responsive .table{
max-width: none;
}
strong *{
font-weight: bold !important;
}
@media (max-width: 768px){
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
padding: 4px;
}
}
.jssocials-share:hover .jssocials-share-logo{
color: #FFF !important;
}
/* Overrides End */
/* Helper */
.tahoma{
font-family: 'Tahoma' !important;
}
.full-width{
width: 100%;
}
.ltr{
direction: ltr;
}
.inline-block{
display: inline-block !important;
}
.block{
display: block !important;
}
.relative{
position: relative;
}
.static{
position: static;
}
.no-padding{
padding: 0px !important;
}
.no-margin{
margin: 0px !important;
}
.margin-bottom-0{
margin-bottom: 0px !important;
}
.margin-bottom-30{
margin-bottom: 30px !important;
}
.margin-top-20{
margin-top: 20px;
}
.margin-top-10{
margin-top: 10px;
}
.padding-right-left-0{
padding-right: 0px !important;
padding-left: 0px !important;
}
.padding-right-left-30{
padding: 0px 30px !important;
}
.padding-right-left-20{
padding: 0 20px !important;
}
.padding-bottom-40{
padding-bottom: 40px !important;
}
.padding-top-bottom-20{
padding: 20px 0px;
}
.padding-top-bottom-20{
padding: 10px 0;
}
.margin-top-0{
margin-top: 0px !important;
}
.margin-top-5{
margin-top: 5px !important;
}
.margin-top-bottom-35{
margin: 35px 0px;
}
.padding-top-bottom-40{
padding: 40px 0px;
}
.center{
text-align: center;
}
.left{
text-align: left !important;
}
.right{
text-align: right !important;
}
.margin-left-15{
margin-left: 15px !important
}
.margin-right-15{
margin-right: 15px !important;
}
.margin-left-0{
margin-left: 0px !important;
}
.margin-top-15{
margin-top: 15px !important;
}
.margin-top-20{
margin-top: 20px !important;
}
.padding-right-0{
padding-right: 0px !important;
}
.padding-left-0{
padding-left: 0px !important;
}
.border-bottom-0{
border-bottom: none !important;
}
.margin3, .margin-3{
margin: 3px !important;
}
.margin-top-3{
margin-top: 3px !important;
}
.margin-top-30{
margin-top: 30px !important;
}
.margin-right-3{
margin-right: 3px !important;
}
.margin-left-3{
margin-left: 3px !important;
}
.margin-bottom-3{
margin-bottom: 3px !important;
}
.padding3, .padding-3{
padding: 3px !important;
}
.padding-top-3{
padding-top: 3px !important;
}
.padding-right-3{
padding-right: 3px !important;
}
.padding-left-3{
padding-left: 3px !important;
}
.padding-bottom-3{
padding-bottom: 3px !important;
}
.mt8{
margin-top: 8px !important;
}
.border-none{
border : none !important;
}
.border-radius{
border-radius: 3px !important;
}
.border-radius-15{
border-radius: 15px !important;
}
.border-radius-30{
border-radius: 30px !important;
}
.bordered-box{
border: 1px #dfdfdf solid;
}
.font-size-30{
font-size: 30px !important;
}
.font-size-22{
font-size: 22px !important;
}
.float-left{
float: left !important;
}
.no-border-radius{
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
.space-between{
display: flex;
justify-content: space-between;
align-items: center;
}
.space-around{
display: flex;
justify-content: space-around;
align-items: center;
}
.overflow-hidden{
position: relative;
margin-bottom: 10px;
width: 100%;
padding-top: 100%;
overflow: hidden;
}
.scale-hidden{
overflow: hidden;
display: inline-block;
width: 100%;
}
.scale-hover:hover img{
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
.sepia-hover:hover img{
-webkit-filter: sepia(100%);
filter: sepia(100%);
transition: all 0.5s;
}
.checkbox-inline{
font-size: 13px;
line-height: 25px;
}
.checkbox-inline input{
vertical-align: middle;
margin: 0 0 0 10px;
}
.checkbox-inline span{
color: #0275ff;
}
/*
.font-size-16 *{
font-size: 16px;
line-height: 35px !important;
}
*/
.w120{
width: 120px;
border-right: 1px #dfdfdf solid;
}
/* Helper End */
/* BootStrap */
.input-group.left-to-right .input-group-addon{
border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 4px !important;
border-top-left-radius: 4px !important;
border-right: 0px !important;
}
.input-group.left-to-right input{
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
border-bottom-right-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.table.darker-border>tbody>tr>td, .table.darker-border>tbody>tr>th, .table.darker-border>tfoot>tr>td, .table.darker-border>tfoot>tr>th, .table.darker-border>thead>tr>td, .table.darker-border>thead>tr>th{
border-top: 1px solid #999;
}
.table-striped.darker-border{
border: 1px solid #999;
}
#loginModal{
z-index: 10040;
}
#shareIcons svg{
width: 34px;
height: 34px;
}
.modal-open{
position: relative;
overflow: hidden;
}
.modal-body .modal-title{
font-size: 20px;
margin-bottom: 10px !important;
display: block;
}
.tooltip-inner{
max-width:200px;
padding:3px 8px;
color:#fff;
text-align:center;
background-color:#7a7a7a;
border-radius:4px
}
.tooltip.bottom .tooltip-arrow{
top:0;
left:50%;
margin-left:-5px;
border-width:0 5px 5px;
border-bottom-color:#7a7a7a
}
.tooltip-inner::before{
border-color: red;
}
.tooltip{
width: auto !important;
max-width: 250px !important;
}
.tooltip-inner{
background: #58595b;
font-size: 11px;
line-height: 16px;
}
.form-control{
box-shadow: none;
-webkit-box-shadow: none;
}
.form-control[disabled]{
color: #999 !important;
background: #FFF !important;
}
@media (max-width:768px)
{
.modal-dialog{
padding-bottom: 60px;
}
}
/* BootStrap End */
/* Images */
#MainImage{
border: 1px solid #e6e6e6;
cursor: zoom-in;
padding: 2px;
object-fit: cover;
}
.wide-banner{
padding: 0 0 30px;
}
.main-image2{
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.top-of-slider-banner{
margin: 5px 0;
}
.top-of-slider-banner img{
border-radius: 15px;
}
.top-of-slider-banner img:hover{
box-shadow: 0 0 15px 3px #dadada;
}
.square-image-container{
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}
.square-image-container img{
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.auth-profile-img{
height: 30px !important;
border: 1px #b5b5b5 solid;
border-radius: 10px;
margin-left: 5px;
}
.app-banner{
width: 150px;
height: auto;
margin: 5px;
}
.category-banner{
position: relative;
text-align: center;
margin-bottom: 10px;
border-radius: 15px;
overflow: hidden;
will-change: transform;
transform: translateZ(0);
}
.category-banner img{
width: 100%;
height: auto !important;
transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
}
.category-banner:hover img{
transform: scale(1.15);
}
.category-banner a, .category-banner span, .category-banner h2{
color: #000 !important;
font-weight: 300;
}
.category-banner h2{
position: absolute;
top: 30px;
right: 10%;
width: 80%;
background: rgb(255 255 255 / 90%);
padding: 15px 5px;
margin: 0;
border-radius: 5px;
font-size: 14px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 2;
}
.category-banner hr{
width: 100%;
}
.category-banner .border-line{
position: absolute;
z-index: 0;
border: 1px #FFF solid;
border-top: none;
border-radius: 15px;
top: 52px;
right: 6%;
width: 88%;
height: 83%;
}
@media (max-width: 768px){
.category-banner h2{
flex-direction: column;
}
.category-banner .border-line{
position: absolute;
z-index: 0;
border: 1px #FFF solid;
border-top: none;
border-radius: 15px;
top: 14%;
right: 6%;
width: 88%;
height: 80%;
}
.category-banner h2{
position: absolute;
top: 5%;
right: 10%;
width: 80%;
background: rgb(255 255 255 / 90%);
padding: 5px 15px;
margin: 0;
border-radius: 5px;
font-size: 13px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
z-index: 2;
line-height: 10px;
}
}
.top-banner img{
border-radius: 10px;
}
.hover-img{
position: absolute;
top: 10px;
right: 0px;
width: 40px !important;
z-index: 1;
}
.hover-img:hover{
width: 200px !important;
max-width: 200px !important;
z-index: 2;
}
/* Images End */
/* Buttons */
button{
background: transparent;
border: none;
padding: 0;
margin: 0;
display: inline;
cursor: pointer;
}
.btn-danger, .btn-success, .btn-info{
fill: #FFF;
}
.btn-white{
font-size: 13px;
background: #FFF;
color: #000;
padding: 5px;
margin: 2px;
cursor: pointer;
border: 1px #dfdfdf solid;
}
.btn-white:hover, .btn-white:active, .btn-white:focus{
background: #F0F0F0;
color: #000 !important;
}
.btn-white svg, .btn-white:hover svg, .btn-white:active svg, .btn-white:focus svg{
fill: #000;
}
.btn-green{
font-size: 13px;
background: #0FBBA0;
color: #FFF;
padding: 5px;
margin: 2px;
cursor: pointer;
}
.btn-green:hover, .btn-green:active, .btn-green:focus{
background: #0c937e;
color: #FFF !important;
}
.btn-green svg, .btn-green:hover svg, .btn-green:active svg, .btn-green:focus svg{
fill: #FFF;
}
.btn-orange{
font-size: 13px;
background: orange;
color: #FFF;
padding: 5px;
margin: 2px;
cursor: pointer;
}
.btn-orange:hover, .btn-orange:active, .btn-orange:focus{
background: rgb(220, 143, 0);
color: #FFF !important;
}
.btn-orange svg, .btn-orange:hover svg, .btn-orange:active svg, .btn-orange:focus svg{
fill: #FFF;
}
.btn-navy{
font-size: 13px;
background: #383f46;
color: #d7bc40;
padding: 5px;
margin: 2px;
cursor: pointer;
}
.btn-navy:hover, .btn-navy:active, .btn-navy:focus{
background: #558985;
color: #d7bc40 !important;
}
.btn-navy svg{
fill: #d7bc40;
}
.btn-navy:hover svg, .btn-navy:active svg, .btn-navy:focus svg{
fill: #FFF;
}
.btn-red{
font-size: 13px;
background: #dc3939;
color: #FFF;
padding: 5px;
margin: 2px;
cursor: pointer;
}
.btn-red:hover, .btn-red:active, .btn-red:focus{
background: #b82d2d;
color: #FFF !important;
}
.btn-red svg, .btn-red:hover svg, .btn-red:active svg, .btn-red:focus svg{
fill: #FFF;
}
.text-orange{
font-size: 13px;
color: #e89600;
}
.text-red{
font-size: 13px;
color: #dc3939;
}
.text-green{
font-size: 13px;
color: #0c937e;
}
.aparat-icon{
width: 25px;
height: 25px;
color: #fff;
vertical-align: sub;
}
.btn-success{
color: #fff;
background-color: #10bba0;
border-color: #10bba0;
}
.btn-success:focus,.btn-success:active,.btn-success:visited{
color: #fff;
background-color: #10bba0;
border-color: #10bba0;
}
.btn-success:hover{
color: #10bba0;
fill: #10bba0;
background-color: #fff;
border-color: #10bba0;
}
.btn-info{
color: #fff;
background: #212529;
border: none;
font-size: 15px;
}
.btn-info:hover, .btn-info:active, .btn-info:focus{
background: #558985;
color: #FFF;
fill: #FFF;
}
.btn-info svg, .btn-info:hover svg{
fill: #FFF;
}
.btn-info2{
color: #fff;
background: #58a4b0;
border: none;
font-size: 15px;
}
.btn-info2:hover, .btn-info2:active, .btn-info2:focus{
background: #558985;
color: #FFF;
}
.btn-info2 svg, .btn-info2:hover svg{
fill: #FFF;
}
.btn-custom1{
font-size: 22px;
}
.btn-custom2{
color: #fff;
background-color: #09b7ab;
border-color: #128279;
font-size: 22px;
}
.btn-custom2:hover{
color: #128279;
background-color: #fff;
border-color: #128279;
}
.btn-custom2 svg, .btn-custom2:hover svg{
fill: #FFF;
}
.big-blue-btn{
background: #212529;
border-radius: 15px;
margin: 10px;
padding: 10px 50px;
border: 1px #212529 solid;
}
.big-blue-btn:hover{
background: #558985;
color: #FFF;
}
.big-blue-btn svg, .big-blue-btn:hover svg{
fill: #FFF;
}
.special-simple-button{
width: 100%;
background: #FFF;
color: #333;
padding: 5px;
margin-bottom: 0px;
text-align: right;
font-size: 18px;
line-height: 24px;
/* border: 1px #b5b5b5 solid; */
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
display: block;
}
.special-simple-button > .throb{
width: 30px;
height: 30px;
float: left;
margin: -3px;
font-size: 13px;
}
.special-simple-button > svg{
float: left;
padding: 0px 10px;
font-size: 25px;
}
.special-simple-button:hover{
background: #F0F0F0;
color: #000;
}
.special-simple-button.smaller{
font-size: 15px;
}
.special-simple-button .inline-flex{
display: inline-flex;
align-items: center;
float: left;
}
.special-simple-button .inline-flex span{
font-size: 12px;
margin-top: -6px;
}
.special-simple-button2{
background: #FFF;
color: #333;
padding: 5px;
margin-bottom: 0px;
text-align: right;
font-size: 17px;
line-height: 24px;
border: 1px #b5b5b5 solid;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
display: block;
}
.special-simple-button2 > .throb{
width: 30px;
height: 30px;
float: left;
margin: -3px;
font-size: 13px;
}
.special-simple-button2 > svg{
float: left;
padding: 0px 10px;
font-size: 25px;
}
.special-simple-button2:hover{
background: #F0F0F0;
color: #000;
}
.special-simple-button2.smaller{
font-size: 15px;
}
.special-simple-button2 .inline-flex{
display: inline-flex;
align-items: center;
float: left;
}
.special-simple-button2 .inline-flex span{
font-size: 12px;
margin-top: -6px;
}
@media(max-width: 768px){
.special-simple-button{
font-size: 11px;
font-weight: 300;
line-height: 18px;
}
.special-simple-button svg{
padding: 0px 5px;
font-size: 20px;
}
.special-simple-button > .throb{
width: 25px;
height: 25px;
}
.special-simple-button2{
font-size: 10px;
font-weight: 300;
line-height: 24px;
}
.special-simple-button2 svg{
padding: 0px 5px;
font-size: 20px;
}
}
.btn-gold{
color: #FFF;
background: #e7ba27;
border: 1px #b59d0e solid;
border-radius: 30px;
}
.btn-gold:hover{
background: #cca845;
color: #FFF;
}
.btn-gold svg, .btn-gold:hover svg{
fill: #FFF;
}
.overlay-btn{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80%;
color: #FFF;
background: rgba(219, 188, 0, 0.45);
border: 1px #b59d0e solid;
border-bottom: 4px #b59d0e solid;
border-radius: 30px;
z-index: 3;
padding: 8px 15px;
text-align: center;
font-size: 15px;
}
.overlay-btn:hover{
background: #cca845;
color: #FFF;
border-bottom: 2px #b59d0e solid;
}
.overlay-btn svg, .overlay-btn:hover svg{
fill: #FFF;
}
@media (max-width: 768px){
.overlay-btn{
width: 90%;
padding: 5px 5px;
font-size: 12px;
}
}
.other-products-btn{
font-size: 14px;
border-radius: 0px !important;
}
.seller-follow-btn{
color: #FFF !important;
padding: 10px 0;
text-align: center;
font-size: 16px;
display: inline-block;
width: 180px;
background: #58a4b0;
margin-bottom: 5px;
border: none;
cursor: pointer;
}
.seller-follow-btn:hover{
color: #FFF !important;
background: #48a19a;
}
.seller-follow-btn svg, .seller-follow-btn:hover svg{
fill: #FFF;
}
.seller-chat-btn{
color: #FFF !important;
padding: 10px 0;
text-align: center;
font-size: 16px;
display: inline-block;
width: 180px;
border: none;
background: #373f51;
margin-bottom: 5px;
cursor: pointer;
}
.seller-chat-btn:hover{
color: #FFF !important;
background: #558985;
}
.seller-chat-btn:hover span, .seller-chat-btn:hover svg{
color: #FFF;
fill: #FFF;
}
.seller-chat-btn svg{
fill: #FFF;
width: 30px;
height: 30px;
margin-right: 10px;
vertical-align: middle;
}
.footer-price .seller-chat-btn svg{
margin-right: 0px;
}
.seller-phone-btn{
color: #FFF !important;
padding: 10px 0;
text-align: center;
font-size: 16px;
display: inline-block;
width: 180px;
background: #1b1b1e;
margin-bottom: 5px;
cursor: pointer;
}
.seller-phone-btn:hover{
color: #FFF !important;
background: #476b95;
}
.seller-phone-btn:hover span, .seller-phone-btn svg, .seller-phone-btn:hover svg{
fill: #FFF;
}
.seller-phone-btn:hover a{
color: #FFF !important;
}
.seller-phone-btn svg{
fill: #FFF;
width: 26px;
height: 26px;
margin-right: 10px;
}
.seller-follow-btn a, .seller-chat-btn a, .seller-phone-btn a{
display: block;
margin-bottom: 10px;
}
.seller-follow-btn a:last-child, .seller-chat-btn a:last-child, .seller-phone-btn a:last-child{
margin-bottom: 0px;
}
@media (max-width: 768px){
.seller-follow-btn{
font-size: 13px;
width: 140px;
}
/* .seller-follow-btn svg{
width: 20px;
height: 20px;
} */
.seller-chat-btn{
font-size: 13px;
width: 140px;
}
.seller-chat-btn svg{
width: 20px;
height: 20px;
}
.seller-phone-btn{
font-size: 13px;
width: 140px;
}
.seller-phone-btn svg{
width: 20px;
height: 20px;
}
}
.radio-button{
position: relative;
color: #000;
font-size: 12px;
background: #f1f1f1;
padding: 5px 0;
margin: 3px 3px;
display: inline-block;
border-radius: 15px;
box-shadow: 0 5px 5px -3px #ccc;
border: 2px #f1f1f1 solid;
}
.radio-button:hover{
color: #000;
background: #FFF;
}
.radio-button.checked{
border: 2px #555 solid;
color: #ffffff;
background: #999;
}
.radio-button input{
display: none;
}
#registerForm .radio-button{
width: 46%;
margin: 1.5%;
}
.buttons-wrapper{
margin: 0 -1.5%;
font-size: 0px;
text-align: center;
}
.profile-btn{
color: #fff!important;
font-size: 12px!important;
background: #0FBBA0;
padding: 2px 5px!important;
border-radius: 3px!important;
vertical-align: middle!important;
height: 24px;
line-height: 24px;
}
.profile-btn:hover{
background: #0c937e !important;
color: #FFF !important;
}
.profile-btn svg, .profile-btn:hover svg{
fill: #FFF;
}
.logout-btn{
color: #fff!important;
font-size: 12px!important;
background: #b3b3b3;
padding: 0px 5px!important;
border-radius: 3px!important;
margin-right: 10px;
height: 24px;
line-height: 24px;
}
.logout-btn:hover{
background: #929292 !important;
color: #FFF !important;
}
.logout-btn svg, .logout-btn:hover svg{
fill: #FFF;
}
.showMoreComments{
background: #10bba0;
color: #FFF;
padding: 3px 10px;
border-radius: 3px;
font-size: 16px;
font-weight: 300;
margin: 0 auto;
display: block;
width: 200px;
text-align: center;
}
.showMoreComments:hover{
background: #0c937e !important;
color: #FFF !important;
}
.grey-btn{
background: #10bba0;
color: #FFF !important;
padding: 3px 10px;
border-radius: 3px;
font-size: 16px !important;
font-weight: 300;
}
.grey-btn:hover{
background: #0c937e !important;
color: #FFF !important;
}
.grey-btn svg, .grey-btn:hover svg{
fill: #FFF;
}
.gray-btn{
background: #394047;
color: #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 8px;
font-size: 16px;
transition: none !important;
}
.gray-btn:hover{
background: #ffffff;
color: #394047;
border: 1px #394047 solid;
transition: none !important;
}
.btn-default:hover *{
color: #e5bc27 !important
}
.btn-default:focus, .btn-default:active{
background: #383f50 !important;
color: #e6bb28 !important;
border: none !important;
}
.btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:active{
background-color: #383f50;
border-color: #ccc;
}
.btn-default.w160{
width: 160px;
}
.eslimi-btn{
background: url('/templates/BazareTala/images/eslimi-btn-bg.jpg') repeat-x center center;
background-size: contain;
color: #FFF;
width: 100%;
height: 50px;
line-height: 50px;
border: none;
border-radius: 10px;
font-size: 20px;
margin-top: 15px;
text-align: center;
display: block;
}
.eslimi-btn:hover{
color: #d8ba3f !important;
filter: brightness(0.9);
}
@media (max-width: 768px){
.eslimi-btn{
font-size: 15px;
}
}
.video-type-div{
width: 120px;
text-align: center;
display: inline-block;
}
.video-type-icon{
width: 90px;
height: 90px;
border: 2px #000 solid;
display: inline-flex;
border-radius: 50px;
justify-content: center;
align-items: center;
}
.video-type-icon:hover{
font-size: 45px;
color: #333 !important;
border-color: #333;
}
.video-type-icon svg{
width: 40px;
height: 40px;
}
.video-type-icon:hover a, .video-type-icon:hover svg{
color: #333 !important;
fill: #333;
}
.profile-icon-btn{
background: #FFF;
border: 1px #dfdfdf solid;
margin: 3px 2px;
padding: 5px;
border-radius: 10px;
display: inline-block;
}
@media (max-width: 768px){
.profile-icon-btn{
margin: 3px 2px;
padding: 3px;
width: 32px;
}
}
.btn-container{
background: #394049;
color: #d7bc40;
border-radius: 15px;
padding: 15px 10px;
text-align: center;
}
.btn-container a{
background: #24ad6a;
color: #FFF;
border-radius: 15px;
padding: 8px 30px;
text-align: center;
margin-top: 15px;
font-size: 16px;
}
.btn-container a:hover{
background: #1a8d55;
color: #FFF;
}
.green-banner-button{
background: #24ad6a;
color: #FFF;
text-align: center;
line-height: 40px;
display: block;
border-radius: 10px;
font-weight: 300;
padding-bottom: 3px;
margin-bottom: 15px;
}
.green-banner-button:hover{
background: #1a8c54;
color: #FFF;
}
.btn-popup{
color: #FFF;
background: #e7ba27;
margin: 15px auto;
padding: 10px;
border-radius: 15px;
font-size: 17px;
width: 90%;
max-width: 300px;
display: block;
}
.btn-popup:hover{
color: #FFF !important;
background: #b69e0c;
}
/* Buttons End */
/* Animations */
@keyframes dotFlashing{
0%{
background-color: #10bba0;
}
50%,
100%{
background-color: #F0F0F0;
}
}
@-webkit-keyframes rotating /* Safari and Chrome */{
from{
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating{
from{
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes clockwiseSpin{
0% {
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes clockwiseSpin{
0% {
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@keyframes pulsate{
0%{
width: 0%;
height: 0%;
opacity: 0;
}
30%{
width: 0%;
height: 0%;
opacity: 0;
}
40%{
opacity: 1;
}
100%{
width: 120%;
height: 120%;
opacity: 0;
}
}
@keyframes pulsate2{
0%{
width: 0%;
height: 0%;
opacity: 0;
}
30%{
width: 0%;
height: 0%;
opacity: 0;
}
40%{
opacity: 1;
}
100%{
width: 50%;
height: 50%;
opacity: 0;
}
}
@-webkit-keyframes flash{
from{background-color: #e6e6e6; }
to{background-color: inherit; }
}
@keyframes flash{
from{background-color: #e6e6e6; }
to{background-color: inherit; }
}
.pulse{
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #d7bc40;
margin-left: 5px;
vertical-align: middle;
box-shadow: 0 0 0 rgb(215, 188, 64, 0.4);
animation: pulse 2s infinite;
}
@-webkit-keyframes pulse{
0%{
-webkit-box-shadow: 0 0 0 0 rgba(215, 188, 64, 0.4);
}
70%{
-webkit-box-shadow: 0 0 0 5px rgba(215, 188, 64, 0);
}
100%{
-webkit-box-shadow: 0 0 0 0 rgba(215, 188, 64, 0);
}
}
@keyframes pulse{
0%{
-moz-box-shadow: 0 0 0 0 rgba(215, 188, 64, 0.4);
box-shadow: 0 0 0 0 rgba(215, 188, 64, 0.4);
}
70%{
-moz-box-shadow: 0 0 0 5px rgba(215, 188, 64, 0);
box-shadow: 0 0 0 5px rgba(215, 188, 64, 0);
}
100%{
-moz-box-shadow: 0 0 0 0 rgba(215, 188, 64, 0);
box-shadow: 0 0 0 0 rgba(215, 188, 64, 0);
}
}
.loading-div{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #FFF;
padding: 20px;
border-radius: 10px;
text-align: center;
display: inline-block;
opacity: 0.9;
z-index: 10000;
}
.loading-div img{
max-width: 200px;
}
.dot-flashing{
position: relative;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #10bba0;
color: #10bba0;
margin: 0 auto;
top: 10px;
animation: dotFlashing 1s infinite linear alternate;
animation-delay: .5s;
}
.dot-flashing::before, .dot-flashing::after{
content: '';
display: inline-block;
position: absolute;
top: 0;
}
.dot-flashing::before{
left: -15px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #10bba0;
color: #10bba0;
animation: dotFlashing 1s infinite alternate;
animation-delay: 0s;
}
.dot-flashing::after{
left: 15px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #10bba0;
color: #10bba0;
animation: dotFlashing 1s infinite alternate;
animation-delay: 1s;
}
.throb{
/* Inline Edit */
height: 30px;
width: 30px;
font-size: 10px;
/* End Of Inline Edit */
position: relative;
display: inline-block;
margin: 0 auto;
border-radius: 100%;
}
.throb::before{
content: ' ';
height: 0px;
width: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 0.4em solid #e7ba27;
border-radius: 100%;
display: block;
opacity: 0;
-webkit-animation: pulsate2 3s ease-out;
-webkit-animation-iteration-count: infinite;
-ms-animation: pulsate2 3s ease-out;
-ms-animation-iteration-count: infinite;
-moz-animation: pulsate2 3s ease-out;
-moz-animation-iteration-count: infinite;
-o-animation: pulsate2 3s ease-out;
-o-animation-iteration-count: infinite;
animation: pulsate2 3s ease-out;
animation-iteration-count: infinite;
animation-delay: 2s;
}
.throb::after{
content: ' ';
height: 0px;
width: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 0.3em solid #e7ba27;
border-radius: 100%;
display: block;
opacity: 0;
-webkit-animation: pulsate 3s ease-out;
-webkit-animation-iteration-count: infinite;
-ms-animation: pulsate 3s ease-out;
-ms-animation-iteration-count: infinite;
-moz-animation: pulsate 3s ease-out;
-moz-animation-iteration-count: infinite;
-o-animation: pulsate 3s ease-out;
-o-animation-iteration-count: infinite;
animation: pulsate 3s ease-out;
animation-iteration-count: infinite;
animation-delay: 2s;
}
.throb svg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.flash{
-webkit-animation: flash 1s normal;
-moz-animation: flash 1s normal;
-o-animation: flash 1s normal;
animation: flash 1s normal;
}
/* Animations End */
/* Popups */
#stickyAlert{
position: fixed;
top: 50%;
right: 50%;
width: 500px;
max-width: 90%;
z-index: 2100;
transform: translate(50%, -50%);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 13px -3px #000;
display: none;
}
#stickyAlert .insideDiv{
position: relative;
padding: 25px 15px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #E5E5E5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#E5E5E5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#E5E5E5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: none;
text-align: center;
}
#stickyAlert.error .insideDiv{
background: rgba(255, 255, 255, 0.95) !important;
}
#stickyAlert.error svg{
width: 60px;
height: 60px;
fill: #ca3434;
}
#stickyAlert.success svg{
width: 60px;
height: 60px;
fill: #34ca34;
}
#stickyAlert.info svg{
width: 60px;
height: 60px;
fill: #34ca34;
}
#stickyAlert p{
color: #000000;
line-height: 40px;
margin: 0;
font-size: 16px;
}
#stickyAlert p .btn{
font-size: 13px;
line-height: 13px;
margin-top: 2px;
}
#stickyAlert p svg{
width: 19px;
height: 19px;
margin-left: 6px;
}
#stickyAlert .closeStickyAlert{
color: #ca3434;
background: #FFF;
font-size: 30px;
width: 35px;
height: 35px;
position: absolute;
top: 0;
right: 0;
border: 1px #c3c3c3 solid;
border-radius: 30px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
#stickyAlert .closeStickyAlert:hover{
color: #FFF;
background: #ca3434;
}
#stickyAlert .closeStickyAlert svg{
fill: #ca3434;
width: 30px;
height: 30px;
}
#stickyAlert .closeStickyAlert:hover svg{
fill: #FFF;
}
#notification{
width: 270px;
max-width: 90%;
position: fixed;
top: 100px;
left: -2px;
border: 2px #e7ba27 solid;
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
box-shadow: 0 0 7px -1px #333;
padding: 10px 30px 10px 15px;
z-index: 1000;
background: #e7ba27;
color: #ffffff;
font-size: 14px;
/* text-shadow: 0 0 1px #256963, 0 0 1px #256963, 0 0 1px #256963, 0 0 1px #256963, 0 0 1px #256963, 0 0 1px #256963, 0 0 1px #256963; */
letter-spacing: 0.5px;
display: none;
}
#notification a:hover{
color: #574b0a;
}
#notification .closeNotification{
position: absolute;
top: 0;
right: 0;
height: 100%;
display: inline-block;
line-height: 24px;
font-size: 20px;
padding: 10px 5px;
color: white;
background: rgb(0, 0, 0, 0.6);
border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
}
#notification .closeNotification:hover{
color: #FFF;
}
#notification2{
width: 270px;
max-width: 90%;
position: fixed;
top: 160px;
left: -2px;
border: 2px #10bba0 solid;
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
box-shadow: 0 0 7px -1px #333;
padding: 10px 30px 10px 15px;
z-index: 1000;
background: #10bba0;
color: #ffffff;
font-size: 14px;
/* text-shadow: 0 0 1px #256963, 0 0 1px #256963, 0 0 1px #256963, 0 0 1px #256963, 0 0 1px #256963, 0 0 1px #256963, 0 0 1px #256963; */
letter-spacing: 0.5px;
display: none;
}
#notification2 a:hover{
color: #574b0a;
}
#notification2 .closeNotification{
position: absolute;
top: 0;
right: 0;
height: 100%;
display: inline-block;
line-height: 24px;
font-size: 20px;
padding: 10px 5px;
color: white;
background: rgb(0, 0, 0, 0.6);
border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
}
#notification2 .closeNotification:hover{
color: #FFF;
}
#detailPopup{
border: 1px #dfdfdf solid;
border-radius: 10px;
overflow: auto !important;
}
#popup{
background: transparent;
width: 800px;
max-height: 94%;
padding: 15px;
border-radius: 15px;
overflow: auto;
}
#popup .popup-bg{
background: url('../images/popup/popup-bg.png?');
background-size: cover;
overflow: auto;
border-radius: 5px;
width: 100%;
height: 100%;
padding: 0;
}
#popup .close{
position: absolute;
top: 0;
right: -15px;
left: unset;
background: #10bba0;
fill: #FFF;
width: 30px;
height: 30px;
font-size: 25px;
text-align: center;
border-radius: 30px;
padding: 2px 0;
z-index: 1;
}
#popup .close:hover{
background: #5fa59f;
}
#popup img{
border-radius: 20px;
border: 1px #c5c3c2 solid;
}
.custom-popup .black-bg{
background: #000;
}
.custom-popup .popup-logo{
width: 180px !important;
max-width: 100% !important;
margin: 0;
}
.custom-popup .popup-register{
width: 400px !important;
max-width: 90% !important;
margin: 10px 0;
}
.custom-popup .btns{
background: rgba(255,255,255, 0.7);
padding: 1px 0;
border-top: 1px #777 solid;
border-bottom: 1px #777 solid;
margin: 0 0 50px 0;
}
.custom-popup .btns img{
padding: 10px;
border: 1px #777 solid;
transition: all 0.3s linear;
}
.custom-popup .btns img:hover{
background: #fff6c9;
}
.custom-popup p{
color: #000;
font-size: 28px;
padding: 30px 20px;
text-align: center;
font-weight: 300;
}
@media (max-width: 768px){
.custom-popup .popup-logo{
width: 160px !important;
}
.custom-popup p{
font-size: 23px;
padding: 0 15px;
}
.custom-popup .btns{
margin-bottom: 10px;
}
}
.notification-prompt {
position: fixed;
top: 10px;
left: 50%;
width: 330px;
max-width: 100%;
background-color: #fff;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
display: none;
z-index: 10000;
transform: translateX(-50%);
}
.notification-prompt img {
width: 66px;
height: 66px;
border-radius: 10px;
margin-top: 20px;
}
.notification-prompt p {
font-size: 15px;
color: #000;
}
.notification-prompt .allow-btn, .notification-prompt .deny-btn {
padding: 5px 10px;
border: none;
width: 46%;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
display: inline-block;
margin: 0 1%;
}
.notification-prompt .allow-btn {
background-color: #10bba0;
color: #fff;
}
.notification-prompt .deny-btn {
background-color: #F0F0F0;
color: #333;
}
.notification-prompt .allow-btn:hover, .notification-prompt .deny-btn:hover {
opacity: 0.8;
}
/* Popups End */
/* Header & Footer */
.flex-bar{
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
align-items: stretch;
}
.flex-bar h1{
margin: 0;
padding: 3px 0;
font-size: 14px;
background: #e7ba27;
color: #FFF;
flex-grow: 1;
line-height: 35px;
text-align: center;
}
.flex-bar .search-button{
background: #10bba0;
line-height: 15px;
padding: 3px 0;
color: #FFF;
border-right: 1px #FFF solid;
flex-grow: 1;
}
.flex-bar .search-location-button{
background: #10bba0;
line-height: 15px;
padding: 3px 0;
color: #FFF;
border-right: 1px #FFF solid;
flex-grow: 1;
}
.flex-bar .search-button span, .flex-bar .search-location-button span{
display: block;
font-size: 10px;
line-height: 15px;
}
@media (min-width: 768px){
.location-btn-div{
margin: 33px 0 0 0;
}
}
.menu svg{
width: 15px;
height: 15px;
fill: #333;
}
.header-flex{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
}
.header-flex .user-box{
flex: 1;
display: flex;
justify-content: start;
align-items: center;
}
.header-flex .icons-box{
flex: 1;
display: flex;
justify-content: end;
align-items: center;
}
.header-flex .icons-box a{
position: relative;
width: 32px;
height: 32px;
padding-left: 0;
border-radius: 10px;
text-align: center;
justify-content: center;
align-items: center;
}
@media (max-width: 768px){
.header-flex .icons-box a{
display: flex;
}
.header-flex .icons-box a:hover, .header-flex .icons-box a:focus, .header-flex .icons-box a:active{
background: #CCC;
}
.header-flex{
padding-bottom: 0px;
}
}
.round-container, img.round{
vertical-align: middle !important;
}
.responsive-footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
padding: 0;
background-color: #F0F0F0;
/* border-top: 4px #CCC solid; */
display: block;
z-index: 10002;
/* overflow: hidden; */
direction: rtl;
display: none;
}
.responsive-footer.noheight{
height: auto !important;
}
.responsive-footer.noheight svg{
width: 20px;
height: 20px;
}
.responsive-footer .filter-btn{
background: #87d0cb;
color: #FFF;
text-align: center;
line-height: 50px;
display: block;
transition: none;
}
.responsive-footer .filter-btn.success{
background: #10bba0;
color: #FFF;
font-size: 18px;
}
.responsive-footer .filter-btn.success:hover{
background: #74c5be;
color: #FFF;
}
.responsive-footer .category-btn{
background: #87d0cb;
color: #FFF;
text-align: center;
line-height: 50px;
border-left: 1px #76988f solid;
display: block;
}
.responsive-footer .filter-btn svg, .responsive-footer .category-btn svg{
width: 18px;
height: 18px;
margin-left: 5px;
fill: #234b40;
}
.responsive-filters{
background: #FFF;
width: 75%;
height: 100%;
position: fixed;
top: 0;
right: 0;
z-index: 10001;
overflow-y: scroll;
direction: rtl;
display: none;
}
.responsive-filters .scrollable{
padding: 50px 10px 80px 10px;
}
.responsive-filters .scrollable > a{
border: 1px #f0f0f0 solid;
padding: 10px;
}
/* .responsive-filters */.filter-checkbox-mobile, /* .responsive-filters */.filter-checkbox-desktop{
display: block;
}
.responsive-filters .responsive-stock{
position: absolute;
bottom: 50px;
right: 0;
width: 75%;
background: white;
padding: 5px 10px;
display: block;
z-index: 1;
}
/* .responsive-filters */.filter-checkbox-mobile svg, /* .responsive-filters */.filter-checkbox-desktop svg{
fill: #b2b2b2;
width: 20px;
height: 20px;
margin-left: 5px;
line-height: 25px;
margin-right: 10px;
}
.responsive-filters .header{
position: fixed;
top: 0;
right: 0;
width: 75%;
height: 50px;
background: #CCC;
border-bottom: 2px #999 solid;
font-size: 20px;
padding: 5px 10px;
z-index: 300;
line-height: 35px;
}
.responsive-filters .header .close-filter{
font-size: 28px;
float: left;
}
.responsive-categories{
background: #FFF;
width: 75%;
height: 100%;
position: fixed;
top: 0;
right: 0;
z-index: 10001;
overflow-y: scroll;
direction: rtl;
display: none;
}
.responsive-categories .scrollable{
padding: 50px 0 10px 0;
}
.responsive-categories .header{
position: fixed;
top: 0;
right: 0;
width: 75%;
height: 50px;
background: #CCC;
border-bottom: 2px #999 solid;
font-size: 20px;
padding: 5px 10px;
z-index: 300;
line-height: 35px;
}
.responsive-categories .header .close-category{
font-size: 28px;
float: left;
}
.responsive-categories li{
font-size: 15px;
line-height: 28px;
}
.responsive-categories li a, .responsive-categories li button{
position: relative;
background: #F0F0F0;
border-bottom: 1px #dfdfdf solid;
padding: 8px;
margin: 0;
display: block;
}
.responsive-categories li a svg, .responsive-categories li button svg{
display: none;
}
.responsive-categories li a svg, .responsive-categories li button svg{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
line-height: 1;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
width: 24px;
height: 24px;
}
.responsive-categories a:hover, .responsive-categories li.active > a, .responsive-categories button:hover, .responsive-categories li.active > button{
color: #000000;
font-weight: 300;
background: #ccc;
}
.responsive-categories > ul > li{
font-size: 16px !important;
}
.responsive-categories ul{
list-style: none;
}
.responsive-categories ul a, .responsive-categories ul button{
padding-right: 10px;
font-size: 17px;
}
.responsive-categories ul ul a, .responsive-categories ul ul button{
width: 100%;
text-align: right;
padding-right: 30px;
background: #FFF;
font-size: 15px;
}
.responsive-categories ul ul ul a, .responsive-categories ul ul ul button{
padding-right: 50px;
background: #FFF;
font-size: 13px;
}
.responsive-categories ul ul ul ul a, .responsive-categories ul ul ul ul button{
padding-right: 70px;
font-size: 12px;
}
.responsive-footer .responsive-add-to-basket{
position: relative;
text-align: center;
line-height: 50px;
height: 50px;
display: block;
background: #10bba0;
color: #FFF;
border: none;
border-left: 1px #FFF solid;
font-size: 17px;
}
.responsive-footer .responsive-add-to-basket.blue{
background: #383f48 !important;
color: #FFF;
border: none;
border-left: none !important;
font-size: 17px;
}
.responsive-footer .responsive-add-to-basket .oldprc{
line-height: 20px;
position: absolute;
top: 5px;
right: 50%;
text-decoration: line-through;
font-size: 17px;
white-space: nowrap;
transform: translateX(50%);
-o-transform: translateX(50%);
-ms-transform: translateX(50%);
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
display: block;
opacity: 0.7;
}
.responsive-footer .responsive-add-to-basket .realprc{
line-height: 20px;
display: block;
position: absolute;
top: 27px;
right: 50%;
white-space: nowrap;
transform: translateX(50%);
-o-transform: translateX(50%);
-ms-transform: translateX(50%);
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
}
.responsive-footer .responsive-add-to-basket:last-child{
border-left: none;
}
.responsive-footer .return{
text-align: center;
line-height: 50px;
display: block;
background: #5bc0de;
color: #FFF;
border: none;
border-left: 1px #429DB8 solid;
}
.responsive-footer .return:hover{
background: #429DB8;
}
.responsive-footer .return:last-child{
border-left: none;
}
.modal{
top: 70px !important;
}
.weight{
height: 20px;
text-align: center;
display: block;
}
#home{
font-size: 23px;
vertical-align: middle;
color: #ef3b8a;
background-color: #fff;
border-radius: 100%;
width: 31px;
height: 31px;
display: inline-block;
padding: 4px 0;
}
body > .header{
background: #fff;
padding: 0;
}
.header svg{
color: black;
width: 20px;
height: 20px;
cursor: pointer;
}
.bottom-navigation{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background: #FFF;
padding: 0;
z-index: 100002;
box-shadow: 0 0 1px 0px #000;
}
.bottom-navigation ul{
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.bottom-navigation ul li{
width: 20%;
color: #999;
text-align: center;
padding: 3px;
display: block;
transition: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
}
.bottom-navigation ul li p{
color: #999;
font-size: 11px;
line-height: 12px;
font-weight: 300;
margin: 0;
display: block;
transition: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
}
.bottom-navigation ul li svg{
position: relative;
color: #999;
fill: #999;
width: 22px;
height: 22px;
transition: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
}
.bottom-navigation ul li.active, .bottom-navigation ul li.active p, .bottom-navigation ul li.active svg{
color: #000;
fill: #000;
background: #f2f2f2;
}
.bottom-navigation ul li:hover, .bottom-navigation ul li:hover p, .bottom-navigation ul li:hover svg{
color: #000;
fill: #000;
background: #f2f2f2;
}
.bottom-navigation ul li:focus, .bottom-navigation ul li:focus p, .bottom-navigation ul li:focus svg{
color: #000;
fill: #000;
}
body.hide-bottom-navigation .bottom-navigation{
display: none;
}
.back-arrow{
width: 32px;
height: 32px;
padding-left: 0px;
border-radius: 10px;
text-align: center;
display: inline-block;
transition: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
}
.back-arrow:hover, .back-arrow:focus, .back-arrow:active{
background: #CCC;
}
.back-arrow:hover svg, .back-arrow:focus svg, .back-arrow:active svg{
fill: #000;
}
.back-arrow svg{
width: 20px;
height: 20px;
}
.hover-grey{
width: 34px;
height: 34px;
border-radius: 10px;
text-align: center;
display: inline-block;
transition: none !important;
}
.hover-grey:hover, .hover-grey:focus, .hover-grey:active{
background: #CCC;
}
.hover-grey:hover svg, .hover-grey:focus svg, .hover-grey:active svg{
fill: #000;
}
#search{
cursor: pointer;
position: relative;
}
.search-layer{
padding-left: 0px !important;
}
.search-layer .search-div{
position: fixed;
right: 50%;
top: 70px;
bottom: unset;
width: 700px;
max-width: 96%;
text-align: right;
padding: 10px;
background-color: #fff;
border: 1px solid #dfdfdf;
z-index: 100000;
display: none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
transform: translateX(50%);
}
.search-layer form{
display: flex;
}
.search-layer form input{
color: #000;
flex-grow: 1;
line-height: 35px;
border: 1px solid #dfdfdf;
padding: 0 10px;
}
.search-layer form input::placeholder{
opacity: 1;
color: #999;
font-weight: 300;
}
.search-layer form select{
color: #000;
margin: 0 10px;
border: 1px solid #dfdfdf;
line-height: 35px;
padding: 7px 5px !important;
}
.search-layer .select2-container{
padding: 0 5px !important;
}
.search-layer .select2-selection__rendered{
color: #000 !important;
line-height: 38px !important;
}
.search-layer .select2-container .select2-selection--single{
height: 41px !important;
border: 1px solid #dfdfdf !important;
border-radius: 3px !important;
}
.search-layer .select2-selection__arrow{
height: 36px !important;
}
.search-layer form button{
width: 60px;
line-height: 40px;
border: 0;
background-color: #444444;
color: #fff;
text-align: center;
font-size: 12px;
padding: 0px;
}
.search-layer form button:hover{
background-color: #b41940;
}
.search-layer form button svg{
vertical-align: sub;
}
@media (max-width: 768px){
.search-layer form{
flex-direction: column;
}
.search-layer .select2-container{
width: 100% !important;
padding: 0 !important;
margin: 5px 0 !important;
}
.search-layer .select2-selection__arrow{
height: 40px !important;
}
.search-layer form button{
width: 100%;
}
}
.header-border-box{
border-bottom: 1px solid #dfdfdf;
margin-top: 5px;
}
.login{
direction: rtl;
text-align: left;
font-size: 0px;
display: block;
}
.login li{
position: relative;
display: inline-block;
text-align: center;
transition: all 0.5s;
margin-right: 20px;
line-height: 35px;
}
.login span{
color: #000;
font-size: 16px;
transition: all 0.5s;
}
.login button{
vertical-align: middle !important;
}
.login svg{
fill: #000;
transition: all 0.5s;
text-align: center;
width: 27px;
height: 27px;
}
.login svg:hover{
fill: #558985;
}
.login li a{
color: #000;
font-size: 17px;
}
.login li{
font-size: 17px;
}
.login li a:hover, .login li a:hover svg{
color: #558985;
fill: #558985;
}
.fab-whatsapp, .fat-user-headset{
position: relative;
}
.header .total-unseen-count{
background: #10bba0;
width: 20px;
height: 20px;
border-radius: 20px;
text-align: center;
font-size: 14px;
line-height: 15px;
position: absolute;
top: 0px;
right: -9px;
opacity: 0.94;
display: none;
}
@media (max-width: 768px){
.header .total-unseen-count{
background: #10bba0;
width: 17px;
height: 17px;
border-radius: 20px;
text-align: center;
font-size: 14px;
line-height: 20px;
position: absolute;
top: -4px;
right: -4px;
opacity: .94;
display: none;
}
}
.bottom-navigation .total-unseen-count{
background: #00c333;
min-width: 16px;
height: 16px;
border-radius: 20px;
text-align: center;
padding: 0 3px;
font-size: 10px;
color: #FFF;
display: none;
position: absolute;
top: -4px;
left: 15px;
line-height: 18px;
}
.login .total-unseen-count{
background: #00c333;
min-width: 16px;
height: 16px;
border-radius: 20px;
text-align: center;
padding: 0 3px;
font-size: 10px;
color: #FFF;
display: none;
position: absolute;
top: -4px;
left: 8px;
line-height: 18px;
}
.login:hover .total-unseen-count{
color: #FFF !important;
}
.icon{
color: #484646;
display: inline-block;
text-align: center;
margin-left: 10px;
font-size: 11px;
transition: all 0.5s;
}
.icon span{
width: 26px;
height: 26px;
vertical-align: middle;
margin-right: 5px;
font-size: 13px;
transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
padding: 5px;
border: 1px #484646 solid;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}
.icon:hover span{
border-color: #10bba0;
}
.search-div{
background: white;
padding: 10px 0;
}
#search-icon{
color: #fff;
background-color: #dcbc00;
border: none;
display: inline-block;
position: absolute;
left: 0;
top: 0;
font-size: 19px;
padding: 8px 10px;
margin-top: 0;
width: 40px;
height: 100%;
border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
}
#search-icon svg{
margin-top: 3px;
}
#logo{
height: 45px;
width: auto;
float: left;
background: #FFF;
}
#footer-logo img{
height: auto;
}
.header-top-banner img{
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
/* Header & Footer End */
/* Guarantee */
.guarantee-icons{
text-align: center;
}
.guarantee-icons img{
width: 60px;
max-width: 100%;
}
.guarantee-icons span{
font-size: 13px;
display: block;
}
@media (max-width: 768px){
.guarantee-icons img{
width: 60px;
max-width: 100%;
}
.guarantee-icons span{
font-size: 9px;
}
}
/* Guarantee End */
/* Products */
.product{
position: relative;
direction: rtl;
transition: all 0.5s;
overflow: hidden;
}
.na-badge{
position: absolute;
bottom: 5px;
right: 0;
background: #e73f3f;
height: 20px;
line-height: 20px;
color: #FFF;
padding: 0 5px;
margin: 0;
font-size: 11px;
border-radius: 5px 0 0 5px;
font-weight: 300;
}
.product.na *:not(.overflow-hidden, .show-loading, .na-badge){
filter: grayscale(1) blur(0.7px);
}
.product.bordered{
border: 1px solid #eeeff1;
}
.flex.space-between{
justify-content: space-between;
}
.flex h3{
flex-grow: 1;
}
.flex .colorsDiv{
flex-grow: 0;
flex-shrink: 0;
height: 20px;
}
.flex .colorsDiv span{
font-size: 12px;
line-height: 30px;
margin-left: 5px;
display: inline-block;
}
.flex .colorsDiv .color-circle{
width: 16px;
height: 16px;
margin-right: 3px;
margin-left: 0px;
border-radius: 3px;
display: inline-block;
}
.color-circle.white{
background: rgb(237,237,237);
background: -moz-radial-gradient(circle, rgba(237,237,237,1) 0%, rgba(208,208,208,1) 100%);
background: -webkit-radial-gradient(circle, rgba(237,237,237,1) 0%, rgba(208,208,208,1) 100%);
background: radial-gradient(circle, rgba(237,237,237,1) 0%, rgba(208,208,208,1) 100%);
}
.color-circle.yellow{
background: rgb(255,228,100);
background: -moz-radial-gradient(circle, rgba(255,228,100,1) 0%, rgba(226,190,52,1) 100%);
background: -webkit-radial-gradient(circle, rgba(255,228,100,1) 0%, rgba(226,190,52,1) 100%);
background: radial-gradient(circle, rgba(255,228,100,1) 0%, rgba(226,190,52,1) 100%);
}
.color-circle.rosegold{
background: rgb(255,232,218);
background: -moz-radial-gradient(circle, rgba(255,232,218,1) 0%, rgba(221,175,147,1) 100%);
background: -webkit-radial-gradient(circle, rgba(255,232,218,1) 0%, rgba(221,175,147,1) 100%);
background: radial-gradient(circle, rgba(255,232,218,1) 0%, rgba(221,175,147,1) 100%);
}
.color-circle.black{
background: rgb(81,81,81);
background: -moz-radial-gradient(circle, rgba(81,81,81,1) 0%, rgba(51,51,51,1) 100%);
background: -webkit-radial-gradient(circle, rgba(81,81,81,1) 0%, rgba(51,51,51,1) 100%);
background: radial-gradient(circle, rgba(81,81,81,1) 0%, rgba(51,51,51,1) 100%);
}
@media (max-width: 768px)
{
.flex .colorsDiv .color-circle{
width: 12px;
height: 12px;
}
}
.product img{
width: 100%;
height: 100%;
transition: none;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}
.product:hover .free-delivery{
transform: translateX(50%) !important;
-o-transform: translateX(50%) !important;
-ms-transform: translateX(50%) !important;
-moz-transform: translateX(50%) !important;
-webkit-transform: translateX(50%) !important;
}
.auction-badge{
position: absolute;
bottom: 30px;
right: 0;
height: 20px;
line-height: 20px;
color: #FFF;
padding: 0 5px;
margin: 0;
font-size: 11px;
border-radius: 5px 0 0 5px;
font-weight: 300;
}
.buy-online{
position: absolute;
bottom: 5px;
right: 0;
background: #24ad6a;
height: 20px;
line-height: 20px;
color: #FFF;
padding: 0 5px;
margin: 0;
font-size: 11px;
border-radius: 5px 0 0 5px;
font-weight: 300;
}
.buy-online2{
background: #24ad6a;
height: 20px;
line-height: 20px;
color: #FFF;
padding: 3px 10px;
margin: 0;
font-size: 13px;
border-radius: 5px;
font-weight: 300;
}
.online-off{
position: absolute;
bottom: 5px;
left: 0;
background: #ad2424;
height: 20px;
line-height: 20px;
color: #FFF;
padding: 0 5px;
margin: 0;
font-size: 11px;
border-radius: 0 5px 5px 0;
font-weight: 300;
}
.online-off2{
background: #ad2424;
height: 20px;
line-height: 20px;
color: #FFF;
padding: 3px 10px;
margin: 0;
font-size: 13px;
border-radius: 5px;
font-weight: 300;
}
/* .product:hover img{
filter:brightness(120%);
}
.product:hover{
} */
.bordered-col{
border-right: 1px #F0F0F0 solid;
border-bottom: 1px #F0F0F0 solid;
}
.bordered-col:hover{
box-shadow: 0 0 3px 1px #ccc;
z-index: 1;
}
.bordered-col.col-xs-12{
border-right: none;
border-bottom: 2px #b4b4b4 solid;
padding: 20px 20px 30px 20px;
}
.product h2, .product h3, .product .h2, .product .h3{
width: 100%;
padding: 0;
margin: 0;
color: #000;
line-height: 30px;
height: 30px;
overflow: hidden;
font-size: 14px;
font-weight: 600;
display: block;
position: relative;
}
.bottom-box{
height: 55px;
align-items: start;
justify-content: right;
flex-direction: row;
border-top: 1px #b5b5b5 solid;
}
.bottom-box .price-title{
font-size: 15px;
font-weight: 600;
text-align: right;
margin-bottom: 5px;
display: block;
}
.bottom-box .weight-container{
border-left: 1px #b5b5b5 solid;
padding-left: 10px;
margin-left: 10px;
}
.bottom-box .weight-container.no-border{
border: none !important;
}
.bottom-box span{
line-height: 20px;
font-size: 16px;
}
.bottom-box span span{
color: #a18b00;
font-weight: 400;
}
@media (max-width: 768px){
.bottom-box .price-title{
font-size: 13px;
}
.bottom-box span{
line-height: 15px;
font-size: 12px;
}
}
@media (max-width: 450px){
.bottom-box .price-title{
font-size: 12px;
}
.bottom-box span{
line-height: 15px;
font-size: 13px;
}
.bottom-box .weight-container{
padding-left: 5px;
}
}
.product h2 span, .product h3 span, .product .h2 span, .product .h3 span{
padding: 0;
text-align: center;
line-height: 24px;
overflow: hidden;
max-height: 100%;
width: 100%;
}
.product h2 a, .product h3 a, .product .h2 a, .product .h3 a{
font-size: 14px;
color: #6c6c6c;
margin: 0;
line-height: 25px;
height: 50px;
overflow: hidden;
text-align: center;
display: block;
}
.product h2:hover span, .product h3:hover span, .product .h2:hover span, .product .h3:hover span{
color: #dcbc00;
}
.product .price-box{
background-color: #8a8d95;
height: 20px;
padding: 0;
font-size: 12px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
direction: rtl;
overflow: hidden;
display: inline-block;
}
.product .price-box .old-price{
position: relative;
color: #FFF;
height: 20px;
line-height: 20px;
margin: 0 !important;
padding: 0 5px;
text-decoration: none;
}
.product .price-box .old-price::after{
content: "";
position: absolute;
top: 46%;
right: 10%;
background: rgba(0, 0, 0, 0.5);
width: 80%;
height: 1px;
}
.product .price-box .price{
position: relative;
background-color: #10bba0;
color: #FFF;
height: 20px;
line-height: 20px;
margin: 0 !important;
padding: 0 5px;
}
.product .buy{
background-color: #FFF;
color: #10bba0;
border: 1px #10bba0 solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding: 3px 15px;
margin-bottom: 10px;
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
display: inline-block;
}
.product .buy:hover{
background-color: #10bba0;
color: #FFF;
}
.price-container{
text-align: left;
}
.price-container li{
display: inline-block;
text-align: right;
font-size: 12px;
font-weight: 300;
line-height: 20px;
}
.price{
color: #000;
display: inline-block;
}
.old-price{
color: #e80000;
display: inline-block;
text-decoration: line-through;
}
.not-available{
color: #8a8d95;
font-size: 15px;
padding: 30px 10px;
display: block;
}
.not-available svg{
width: 25px;
height: 25px;
color: #FFF;
background: #A6442E;
font-size: 20px;
padding: 2px;
margin-left: 10px;
text-align: center;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
vertical-align: middle;
display: inline-block;
}
.not-available2{
color: red;
line-height: 20px;
display: inline-block;
margin: 0;
}
.availableColors{
color: #000;
display: block;
height: 20px;
font-size: 13px;
text-align: center;
overflow: hidden;
}
.availableColors svg{
width: 14px;
height: 14px;
}
.availableColors .color{
/* background-position: center !important;
background-size: cover !important;
width: 16px;
height: 16px; */
margin: 0 4px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
vertical-align: middle;
display: inline-block;
transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.availableColors:hover .color{
margin: 0 3px;
}
/* .availableColors .color:hover{
border: 1px #000 solid;
} */
.add-to-basket{
position: absolute;
left: 0;
bottom: 10px;
padding: 3px 8px;
background-color: #009651;
color: #fff;
font-size: 16px;
border: 1px solid transparent;
border-left: none;
}
.product-ul{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
list-style: none;
margin-top: 10px;
}
@media (max-width: 768px){
.product-ul{
margin-top: 0px;
}
}
.product-ul li{
color: #000;
display: inline-block;
text-align: center !important;
}
.product-ul li svg{
fill: #000;
width: 22px;
height: 22px;
margin: 0px 10px;
display: block;
}
.product-ul li:hover, .product-ul li:active, .product-ul li:focus,
.product-ul li:hover svg, .product-ul li:active svg, .product-ul li:focus svg,
.product-ul li:hover a, .product-ul li:active a, .product-ul li:focus a{
fill: #dcbc00;
color: #dcbc00 !important;
cursor: pointer;
}
.square{
width: 32px;
height: 32px;
background: #dfdfdf;
color: #000;
border-radius: 5px;
margin: 2px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.square.dark{
background: #333;
color: #FFF;
}
.square.active{
background: #d9bc00;
color: #FFF;
}
.square:not(.active):hover{
background: #CCC;
color: #000;
}
.size-weight-price{
font-size: 18px;
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.space-between .size-weight-price{
display: inline-block !important;
}
.size-weight-price .price-span, .size-weight-price .price-span2{
font-weight: 400;
font-size: 20px;
color: #b09900;
}
.size-weight-price .price-span.old, .size-weight-price .price-span2.old{
position: relative;
color: #bbb;
margin: 0 10px 0 20px;
display: inline-block;
font-size: 20px;
}
.size-weight-price .price-span.old::after, .size-weight-price .price-span2.old::after{
content: " ";
position: absolute;
top: 50%;
right: -10%;
width: 120%;
height: 2px;
background: rgb(255 0 0 / 60%);
transform: rotate(-10deg);
}
.p-price{
font-size: 20px;
margin: 20px 0;
}
.p-price .price-span{
font-weight: 400;
font-size: 24px;
color: #b09900;
}
.p-price .price-span.old{
position: relative;
color: #bbb;
margin: 0 30px;
display: inline-block;
}
.p-price .price-span.old::after{
content: " ";
position: absolute;
top: 50%;
right: -10%;
width: 120%;
height: 2px;
background: rgb(255 0 0 / 60%);
transform: rotate(-10deg);
}
.p-price.small{
font-size: 16px;
margin: 0 0 10px 0;
}
.p-price.small .price-span{
font-size: inherit;
}
.footer-price{
margin: 3px 0;
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.footer-price .txt{
display: block;
font-size: 13px;
line-height: 15px;
margin-bottom: 5px;
}
.footer-price .seller-chat-btn{
margin: 0;
height: 70px;
line-height: 27px;
color: #FFF;
background: #24ad6a;
width: 100%;
border-radius: 10px;
}
.responsive-footer .footer-price .seller-chat-btn{
height: 50px;
}
.responsive-footer .footer-p-price{
margin: 10px 0;
}
.footer-price .seller-chat-btn:hover{
color: #FFF !important;
background: #1b9057;
}
.footer-price .seller-chat-btn:hover span, .footer-price .seller-chat-btn:hover svg{
color: #FFF !important;
fill: #FFF;
}
@media (max-width: 768px){
.footer-price{
background: #FFF;
position: fixed;
bottom: 47px;
right: 0;
width: 100%;
padding: 5px;
margin: 3px 0;
z-index: 10;
}
}
.footer-p-price{
font-size: 18px;
margin: 5px 0;
text-align: center !important;
color: #fff;
}
.footer-p-price .price-span{
font-weight: 400;
font-size: 22px;
color: #d8bc40;
}
.report-links-div{
margin: 30px 10px;
}
.report-links-div a, .report-links-div button{
font-size: 16px;
line-height: 30px;
}
.report-links-div a svg, .report-links-div button svg{
width: 24px;
height: 24px;
margin-left: 10px;
}
#variationPlaceholder label{
font-size: 13px;
display: block;
text-align: right;
padding: 0 5px;
}
.factor{
background: #FFF;
padding: 5px;
border: 1px #CCC solid;
border-radius: 10px;
position: relative;
margin-top: 10px;
padding-top: 45px;
}
.factor h3{
background: #F0F0F0;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
margin: 0;
padding: 5px 20px;
border-radius: 0 0 10px 10px;
font-size: 17px;
}
.factor .factor-items p{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px #FAFAFA solid;
margin: 0;
}
.factor .factor-items p .desc{
flex-grow: 1;
font-size: 12px;
text-align: right;
}
.factor .factor-items p .tw{
flex-basis: 120px;
font-size: 12px;
text-align: right;
}
.factor .factor-items p .tp{
flex-basis: 120px;
text-align: left;
font-weight: 600;
}
.factor .factor-items th{
font-size: 13px;
text-align: right;
padding: 6px 3px;
vertical-align: middle;
}
.factor .factor-items td{
font-size: 13px;
text-align: right;
padding: 6px 3px;
vertical-align: middle;
}
.factor .total-text{
font-size: 15px;
padding: 5px 3px;
}
.factor .total-text .totalPrices{
font-weight: 400;
font-size: 15px;
color: #212529;
}
.products{
padding: 0;
}
/* .products .itm{
padding: 0 2px;
} */
.products .itm h3{
width: 100%;
padding: 0;
margin: 0;
color: #666666;
line-height: 24px;
height: 48px;
overflow: hidden;
font-size: 14px;
display: flex;
position: relative;
flex-wrap: nowrap;
align-items: center;
}
@media (max-width: 768px){
.products .itm h3{
font-size: 12px;
}
}
.products .itm h3 span{
padding: 0;
text-align: center;
line-height: 24px;
overflow: hidden;
max-height: 100%;
width: 100%;
}
.products .itm img{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#similar_products .price{
font-size: 12px !important;
text-align: center !important;
margin: 0px !important;
}
#similar_products .old-price{
font-size: 12px !important;
text-align: center !important;
/* margin: 0px !important; */
}
#similar_products .item-btn{
display: block;
border: 1px solid transparent;
margin: 10px 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}
.seo-box{
margin: 15px 10px;
background: #FFF;
line-height: 30px;
border: 1px #f0f0f0 solid;
border-radius: 20px;
text-align: justify;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.seo-box h1, .seo-box h2, .seo-box h3, .seo-box h4, .seo-box h5, .seo-box h6, .seo-box .h1, .seo-box .h2, .seo-box .h3, .seo-box .h4, .seo-box .h5, .seo-box .h6{
font-size: 17px;
}
.seo-box b, .seo-box strong{
font-weight: 600 !important;
}
.seo-box a{
border-bottom: 1px dashed #299d95;
color: #299d95;
font-weight: 300;
}
.seo-box img{
margin: 0 auto;
display: block
}
.sorting-box{
padding: 10px 0;
}
.sorting-box span{
font-size: 17px;
margin-left: 15px;
color: #000;
}
@media (max-width: 768px){
.sorting-box{
text-align: right;
}
.sorting-box span{
display: none;
}
}
.sorting-box select{
min-width: 160px;
}
.item-btn{
background-color: #27ae60;
color: #fff;
padding: 5px 15px;
display: inline-block;
border: 1px solid transparent;
margin: 20px 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}
.item-btn:hover{
background-color: #fff;
color: #27ae60;
border: 1px solid #27ae60;
border-radius: 0 15px 0 15px;
-moz-border-radius: 0 15px 0 15px;
-webkit-border-radius: 0 15px 0 15px;
}
.navigation{
z-index: 20;
padding: 0;
display: inline-block;
position: absolute;
width: 100%;
height: 0;
top: 50%;
left: 0;
transform: translateY(-40px);
}
.owl-button{
color: #FFF;
fill: #FFF;
background: rgba(0, 0, 0, 0.7);
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
width: 30px;
height: 40px;
line-height: 40px;
font-size: 24px;
}
a.next-button{
right: 0;
position: absolute;
top: 0px;
}
a.prev-button{
left: 0;
position: absolute;
top: 0px;
}
.alphabets-bar{
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
.alphabet{
width: 200px;
margin: 0 5px 5px 5px;
padding: 0;
font-size: 20px;
border-bottom: 1px #a2a2a2 solid;
display: block;
}
.alphabeticButton{
color: #000;
width: 35px;
margin: 0 5px 10px 5px;
padding: 5px 0px;
font-size: 18px;
text-align: center;
display: inline-block;
border-bottom: 1px #b5b5b5 solid;
}
.alphabeticButton:hover, .alphabeticButton:focus, .alphabeticButton:active{
color: #dcbc00;
}
@media (max-width: 992px){
.alphabets-bar{
white-space: nowrap;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
will-change: auto;
background: #f0f0f0;
width: 100%;
padding: 0;
border-top: 1px #c7c7c7 solid;
border-bottom: 1px #c7c7c7 solid;
height: 30px;
z-index: 100;
}
.alphabeticButton{
color: #000;
margin: 0;
padding: 0;
line-height: 22px;
font-size: 17px;
text-align: center;
border-left: 1px #c7c7c7 solid;
display: inline-block;
border-bottom: none;
white-space: normal;
flex-basis: 30px;
flex-shrink: 0;
}
}
.advantages {
background: #F0F0F0;
margin-top: 10px;
}
.advantages .title{
text-align: center;
font-size: 14px;
font-weight: bold;
padding: 20px 0 10px 0 !important;
margin: 0 !important;
color: #000;
}
.advantages .item{
background: #FFF;
padding: 10px;
border-radius: 15px;
margin: 10px 0;
}
.advantages img{
width: 50px !important;
height: 50px !important;
margin: 0 auto !important;
}
.advantages .h3{
font-size: 12px;
font-weight: bold;
line-height: 20px;
height: 20px;
text-align: center;
display: block;
margin: 5px 0;
}
.advantages p{
height: 45px;
line-height: 15px;
font-size: 10px;
text-align: center;
margin: 0;
}
@media (max-width: 768px) {
.advantages .item{
padding: 4px;
}
.advantages p{
height: 60px;
}
}
.brands{
padding: 5px 0;
}
.brands .navigation{
width: 100%;
top: 30%;
}
.brands a.next-button{
position: absolute;
right: -20px;
top: 10px;
}
.brands a.prev-button{
position: absolute;
left: -20px;
top: 10px;
}
.brands .owl-button{
color: #b1b1b1;
padding: 5px 10px;
text-align: center;
display: inline-block;
margin-top: 0px;
font-size: 15px;
cursor: pointer;
border: none;
background: transparent;
}
.quantity-wrapper{
direction: ltr;
text-align: right;
margin: 3px 6px;
}
.quantity-number{
font-size: 20px !important;
border: 1px #383f50 solid !important;
color: #383f50;
}
.btn-number{
padding: 3px 13px 3px 13px !important;
line-height: 32px;
height: 40px;
background: #212529;
border: none;
color: #FFF;
fill: #FFF;
font-size: 18px;
}
.btn-number:hover{
color: #e5bc27;
background: #558985;
}
.btn-number:hover svg{
fill: #e5bc27;
}
.product.mobile{
width: 150px;
display: inline-block;
}
.img-zoom-wrapper{
position: relative;
}
.img-zoom-lens{
background: rgba(255, 255, 255, 0.2);
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 150px;
height: 150px;
}
.img-zoom-result{
background: #FFF;
position: absolute;
top: 0;
right: 102%;
border: 1px solid #d4d4d4;
width: 100%;
height: 537px;
z-index: -1;
visibility: hidden;
}
.img-zoom-wrapper:hover .img-zoom-result{
z-index: 10;
visibility: visible;
}
@media (max-width: 768px){
.img-zoom-wrapper{
display: none;
}
}
#sorting2{
border: none;
margin-top: 8px;
background: transparent;
-webkit-appearance: button;
appearance: button;
outline: none;
}
.custom-select{
position: relative;
display: inline-block;
width: 160px;
height: 40px;
vertical-align: middle;
line-height: 30px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.custom-select .custom-select-wrapper{
position: absolute;
top: 0;
background: #FFF;
border: 1px #b2b2b2 solid;
padding: 5px 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 100;
}
.custom-select.grey .custom-select-wrapper{
background: #f0f0f0;
}
.custom-select.upward .custom-select-wrapper{
top: unset;
bottom: 0;
}
.custom-select.transparent .custom-select-wrapper{
background: transparent !important;
}
.custom-select.noborder .custom-select-wrapper{
border: none !important;
}
.custom-select.small{
height: 40px;
line-height: 30px;
}
.custom-select.small .custom-select-wrapper{
padding: 0 15px;
}
.custom-select .custom-select-wrapper span, .custom-select .custom-select-wrapper a, .custom-select .custom-select-wrapper button{
color: #000;
display: block;
white-space: nowrap;
}
.custom-select .custom-select-wrapper span{
position: relative;
padding-left: 40px;
font-size: 16px;
margin: 0;
}
.custom-select .custom-select-wrapper span::after{
content: " ";
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 0;
width: 13px;
height: 13px;
fill: #000;
transform: translateY(-50%);
}
.custom-select.small .custom-select-wrapper span{
padding-left: 15px;
font-size: 16px;
}
.custom-select.open .custom-select-wrapper span::after{
content: " ";
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 0;
width: 13px;
height: 13px;
fill: #000;
transform: translateY(-50%);
}
.custom-select .custom-select-wrapper div{
display: none;
}
.custom-select.open .custom-select-wrapper div{
display: block;
}
.custom-select .custom-select-wrapper a, .custom-select .custom-select-wrapper button{
width: 100%;
font-size: 16px;
margin: 0 0px;
padding: 0 0px;
border-bottom: 1px solid #f0f0f0;
}
.custom-select.upward .custom-select-wrapper a{
padding: 10px 15px;
}
@media (min-width: 992px){
.custom-select .custom-select-wrapper a:hover, .custom-select .custom-select-wrapper button:hover{
background: #F0F0F0 !important;
}
}
@media (max-width: 768px){
.custom-select .custom-select-wrapper{
padding: 3px;
}
.custom-select .custom-select-wrapper span{
padding-left: 20px;
font-size: 14px;
}
}
.quantity-div{
min-width: 90px;
display: inline-flex;
flex-flow: row;
align-items: center;
justify-content: flex-end;
}
.quantity-div input{
margin-right: 5px;
display: inline-block;
}
.shop-well{
background: #FFF;
border: 1px #dfdfdf solid;
padding: 15px;
}
.shop-well h2{
font-size: 18px !important;
padding-bottom: 0;
margin-bottom: 20px !important;
margin-top: 0;
}
.shop-well p{
font-size: 15px;
}
.shop-well p span{
color: #ab804b;
display: block;
}
.shopImage{
width: 90px;
margin-bottom: 10px;
border-radius: 20px;
border: 1px #CCC solid;
}
@media (max-width: 768px){
.shop-well{
padding: 5px;
}
.shop-well h2{
font-size: 18px;
}
.shopImage{
width: 80px;
}
.shop-well p{
font-size: 14px;
line-height: 20px;
}
}
#map{
z-index: 1;
}
.balad{
display: inline-block;
padding: 5px 10px;
width: 70px;
position: absolute;
bottom: 5px;
right: 5px;
z-index: 2;
background: #FFF;
border-radius: 5px;
}
.advanced-search{
background: #888;
color: #FFF;
font-size: 18px;
border-color: #333;
}
.numberInput{
width: 40px !important;
height: 40px !important;
padding: 0 !important;
border: 1px #CCC solid;
font-weight: 400;
font-size: 18px !important;
margin-bottom: 3px;
direction: ltr;
display: inline-block;
}
select.numberInput{
width: 45px;
font-weight: 300;
font-size: 16px;
}
.numberInput::-webkit-input-placeholder{
position:relative;
bottom:4px;
font-weight: 400;
font-size: 8px !important;
}
.numberInput::-moz-placeholder{
position:relative;
bottom:4px;
font-weight: 400;
font-size: 8px !important;
}
.numberInput:-ms-input-placeholder{
position:relative;
bottom:4px;
font-weight: 400;
font-size: 8px !important;
}
.numberInput:-moz-placeholder{
position:relative;
bottom:4px;
font-weight: 400;
font-size: 8px !important;
}
.weightDescription{
color: #b09900;
text-align: center !important;
font-size: 15px;
font-weight: 400 !important;
margin-bottom: 20px;
}
.quantity-icon{
padding: 8px 3px;
cursor: pointer;
}
@media (max-width: 400px){
.quantity-icon{
padding: 8px 0px;
font-weight: 300;
}
}
.market-carousel{
padding: 0 30px;
}
.market-navigation .owl-button{
background: transparent !important;
color: #333 !important;
text-align: center !important;
display: inline-block !important;
font-size: 36px !important;
cursor: pointer !important;
width: 30px !important;
height: 40px !important;
line-height: 40px !important;
}
.market-product{
position: relative;
direction: rtl;
margin: 0 5px 5px 5px;
border: 1px #DFDFDF solid;
background: #FFF;
border-radius: 10px;
overflow: hidden;
}
.market-product.na *:not(.overflow-hidden, .show-loading, .na-badge){
filter: grayscale(1) blur(0.7px);
}
.hscroll .market-product{
display: inline-block;
width: 170px;
vertical-align: middle;
}
.market-product h3, .market-product .h3{
color: #000;
margin: 5px 0;
padding: 0 5px;
font-size: 12px !important;
line-height: 20px !important;
height: 35px;
display: block;
overflow: hidden;
}
.market-product img{
min-height: 130px;
}
.market-product .bottom-bar{
background: #d4c280;
color: #FFF;
font-size: 14px;
text-align: center;
padding: 5px 10px;
height: 30px;
line-height: 20px;
}
.market-product .price-container{
text-align: center;
}
.market-product .price-container li{
font-size: 14px;
}
.market-product .space-between{
height: 20px;
}
.market-product .weight-container{
color: #999;
font-size: 12px;
margin-right: 8px;
}
.market-product .weight-container .weight-range span{
color: inherit;
font-size: 13px;
font-weight: 400;
}
.market-product .price-range span{
color: inherit;
font-size: 13px;
font-weight: 400;
}
.market-product .colorsDiv{
display: inline-block;
text-align: left;
margin-left: 8px;
}
.market-product .colorsDiv .color-circle{
width: 16px;
height: 16px;
margin-right: 3px;
margin-left: 0px;
border-radius: 3px;
display: inline-block;
}
.market-product .colorsDiv .color-circle.white{
background: rgb(237,237,237);
background: -moz-radial-gradient(circle, rgba(237,237,237,1) 0%, rgba(208,208,208,1) 100%);
background: -webkit-radial-gradient(circle, rgba(237,237,237,1) 0%, rgba(208,208,208,1) 100%);
background: radial-gradient(circle, rgba(237,237,237,1) 0%, rgba(208,208,208,1) 100%);
}
.market-product .colorsDiv .color-circle.yellow{
background: rgb(255,228,100);
background: -moz-radial-gradient(circle, rgba(255,228,100,1) 0%, rgba(226,190,52,1) 100%);
background: -webkit-radial-gradient(circle, rgba(255,228,100,1) 0%, rgba(226,190,52,1) 100%);
background: radial-gradient(circle, rgba(255,228,100,1) 0%, rgba(226,190,52,1) 100%);
}
.market-product .colorsDiv .color-circle.rosegold{
background: rgb(255,232,218);
background: -moz-radial-gradient(circle, rgba(255,232,218,1) 0%, rgba(221,175,147,1) 100%);
background: -webkit-radial-gradient(circle, rgba(255,232,218,1) 0%, rgba(221,175,147,1) 100%);
background: radial-gradient(circle, rgba(255,232,218,1) 0%, rgba(221,175,147,1) 100%);
}
.market-product .colorsDiv .color-circle.black{
background: rgb(81,81,81);
background: -moz-radial-gradient(circle, rgba(81,81,81,1) 0%, rgba(51,51,51,1) 100%);
background: -webkit-radial-gradient(circle, rgba(81,81,81,1) 0%, rgba(51,51,51,1) 100%);
background: radial-gradient(circle, rgba(81,81,81,1) 0%, rgba(51,51,51,1) 100%);
}
@media (max-width: 768px)
{
.market-product .colorsDiv .color-circle{
width: 12px;
height: 12px;
}
}
.percent-bars{
display: flex;
flex-direction: column;
font-size: 12px;
font-weight: 400;
}
.percent-bars .not-entered{
position: absolute;
z-index: 1;
height: 60px;
width: 98%;
text-align: center;
line-height: 60px;
background: rgb(255 255 255 / 70%);
font-size: 14px;
}
.percent-bars .not-entered span{
transform: rotate(-9deg);
display: block;
color: #b54b4b;
font-weight: 400;
font-size: 16px;
margin-right: 20px;
}
@media (max-width: 768px)
{
.percent-bars .not-entered span{
transform: rotate(-9deg);
display: block;
color: #b54b4b;
font-weight: 400;
font-size: 12px;
margin-right: 0px;
}
}
.bar-row{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.bar-row .title{
width: 70px;
font-size: 11px;
text-align: left;
font-weight: 600;
padding-left: 5px;
}
.bar-row .percent{
width: 38px;
font-size: 11px;
text-align: left;
font-weight: 600;
}
.bar-row.more-detail .title{
width: 110px;
font-size: 12px;
text-align: left;
font-weight: 600;
padding-left: 5px;
}
.bar-row.more-detail .percent{
width: 105px;
font-size: 12px;
text-align: left;
font-weight: 600;
}
.bar-row .percent-bar{
position: relative;
flex-grow: 1;
background: #F0F0F0;
height: 5px;
border-radius: 5px;
margin: 8px 1px;
}
.bar-row .percent-bar .bar{
position: absolute;
top: 0;
right: 0;
background: #d7bc40;
height: 5px;
border-radius: 5px;
}
.bordered-col:hover .bar-row .percent-bar{
background: #DDD;
}
@media (max-width: 768px){
.bar-row .title{
width: 60px;
font-size: 9px;
padding-left: 5px;
}
.bar-row .percent{
width: 35px;
font-size: 9px;
}
}
.layout-change-div{
padding: 10px 0;
text-align: right;
}
.layout-change{
font-size: 24px;
padding: 8px;
color: #999;
vertical-align: middle;
}
.layout-change.active, .layout-change:hover{
color: #10bba0;
fill: #10bba0;
}
.desktop-filter-btn{
margin: 10px 0;
font-size: 15px;
}
.desktop-filter-btn svg{
margin-left: 5px;
width: 20px;
height: 20px;
}
.desktop-filters{
position: fixed;
top: 0;
right: 0;
width: 340px;
background: #fff;
z-index: 10000;
box-shadow: 0 0 100px 5px #333;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
transform: translateX(100%);
opacity: 0;
display: block;
transition: all 0.3s ease-in-out;
}
.desktop-filters.open{
transform: translateX(0);
opacity: 1;
}
.desktop-filters > a, .desktop-filters > button{
padding: 10px;
border-bottom: 1px #F0F0F0 solid;
width: 100%;
text-align: right;
}
.filters-open{
height: 100%;
position: relative;
overflow: hidden;
}
.apply-filters-div{
background: #FFF;
position: sticky;
bottom: 0;
width: 100%;
padding: 0px 15px 15px 15px;
z-index: 1;
}
.apply-filters-div svg{
margin-left: 10px;
}
.product-detail{
font-size: 16px;
margin-bottom: 10px;
}
.p-item{
position: relative;
padding-right: 10px;
font-size: 13px;
margin-bottom: 5px;
}
.p-item::before{
content: " ";
position: absolute;
top: 7px;
right: 0;
background-color: #000;
width: 5px;
height: 5px;
border-radius: 5px;
}
#registerOrderLoading{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(255 255 255 / 30%);
z-index: 100;
font-size: 36px;
color: #bebebe;
border-radius: 15px;
display: none;
}
#registerOrderLoading svg{
position: absolute;
top: 47%;
right: 47%;
}
.selectableBox{
position: relative;
}
.selectableBox .options{
border-radius: 5px;
overflow: hidden;
border: 1px #e1e1e1 solid;
position: absolute;
top: 55px;
width: 100%;
max-height: 200px;
overflow-y: auto;
display: none;
z-index: 100;
}
.selectableBox .default-option{
position: relative;
background: #FFF !important;
color: #000;
border: 1px #e1e1e1 solid;
line-height: 30px;
padding: 2px 5px !important;
margin: 0;
display: block;
cursor: pointer;
text-align: right;
border-radius: 10px !important;
}
.selectableBox .default-option::after{
content: " ";
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
position: absolute;
width: 20px;
height: 20px;
left: 10px;
top: 50%;
transform: translateY(-50%);
fill: #e1e1e1;
}
.selectableBox .option{
width: 100%;
position: relative;
background: #FAFAFA;
color: #000;
border-bottom: 1px #e1e1e1 solid;
line-height: 40px;
font-size: 17px;
padding: 5px;
margin: 0;
display: flex;
cursor: pointer;
text-align: right;
justify-content: flex-start;
align-items: center;
}
.selectableBox .option:last-child{
border-bottom: none;
}
.selectableBox .option.disabled{
opacity: 0.2;
}
.selectableBox .option span{
background-repeat: no-repeat!important;
background-position: center center!important;
background-size: cover!important;
position: relative;
width: 37px;
height: 37px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-left: 10px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
border: 1px #e1e1e1 solid;
}
.selectableBox .option:hover{
color: #D60644
}
@media (max-width: 768px){
.selectableBox .option span{
width: 24px;
height: 24px;
margin-left: 3px;
}
.selectableBox .default-option::after{
font-size: 15px;
left: 5px;
}
.quantity-wrapper{
width: unset;
direction: ltr;
text-align: right;
margin: 3px 0px;
}
.btn-number{
padding: 3px 8px 3px 8px !important;
}
.variation-note{
padding: 5px;
font-size: 13px;
}
}
/* Products End */
/* Shops */
.shop-details{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
margin-bottom: 15px;
}
.details-div{
width: 50%;
border: 1px #b5b5b5 solid;
border-radius: 30px;
padding: 15px;
margin-left: 5px;
font-size: 18px;
}
.details-div h1{
font-size: 18px;
margin: 0 0 10px;
font-weight: 400;
}
form .details-div{
width: 100%;
border: none;
padding: 15px;
font-size: 18px;
}
.profile-cover{
position: relative;
text-align: center;
min-height: 100px;
width: 50%;
margin-right: 5px;
}
.profile-cover .cover-photo-div{
position: relative;
width: 600px;
height: 300px;
max-width: 100%;
border: 1px #b5b5b5 solid;
border-radius: 30px;
margin: 0;
overflow: hidden;
display: block;
}
.profile-cover .profile-photo-div{
width: 120px;
height: 120px;
position: absolute;
bottom: 50%;
right: 0;
transform: translate(50%, 50%);
border: 1px #b5b5b5 solid;
border-radius: 30px;
box-shadow: 0 0 0px 5px #fff;
overflow: hidden;
z-index: 10;
}
.profile-cover .cover-photo-div img, .profile-cover .profile-photo-div img{
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-cover .profile-photo-div input, .profile-cover .cover-photo-div input{
display: none;
}
.profile-cover .profile-photo-div span{
position: absolute;
top: 0;
right: 0;
color: #FFF;
font-size: 14px;
background: rgb(0 0 0 / 50%);
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 2;
display: none;
flex-direction: column;
}
.profile-cover .profile-photo-div span svg{
width: 40px;
height: 40px;
}
.profile-cover .profile-photo-div:hover span{
display: flex;
}
.profile-cover .cover-photo-div span{
position: absolute;
top: 0;
right: 0;
color: #FFF;
font-size: 14px;
background: rgb(0 0 0 / 50%);
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 2;
display: none;
flex-direction: column;
}
.profile-cover .cover-photo-div span svg{
width: 40px;
height: 40px;
}
.profile-cover .cover-photo-div:hover span{
display: flex;
}
.detail-btns-div{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.details-div .address{
height: 50px;
overflow: hidden;
line-height: 17px;
color: #000;
font-size: 13px;
}
.details-div .center{
padding-left: 40px;
}
.details-div .detail-btn{
border: 1px #c5c5c5 solid;
width: 80px;
height: 80px;
border-radius: 15px;
text-align: center;
font-size: 13px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.details-div .detail-btn svg{
color: #c2a313;
fill: #c2a313;
width: 40px;
height: 40px;
display: block;
}
.details-div .detail-btn:hover{
background: #EEE;
color: #000;
}
.details-div .follow-btn{
position: relative;
background: #10bba0;
font-size: 22px;
color: #FFF;
fill: #FFF;
margin: 5px 0 25px 0;
padding: 10px 30px;
height: 55px;
border-radius: 15px;
}
.details-div .follow-btn svg{
fill: #FFF;
width: 22px;
height: 22px;
}
.details-div .follow-btn .slash{
padding: 0 15px;
}
.details-div .followers{
background: #FFF;
color: #6cb8b3;
width: 80px;
height: 55px;
border-radius: 15px;
text-align: center;
padding: 3px;
font-size: 13px;
display: inline-block;
border: 1px #85d0ca solid;
vertical-align: middle;
margin: 5px 0 25px 0;
}
.details-div .followers-count{
font-size: 20px;
display: block;
}
.details-div .follow-btn:hover{
background: #6cb8b3;
}
.details-div .follow-btn:hover .followers{
background: #10bba0;
}
.phone-div{
text-align: center;
}
.phone-div a{
display: block;
font-size: 25px;
letter-spacing: 2px;
color: #000000;
border: 1px #e5e5e5 solid;
width: 260px;
padding: 10px;
margin: 20px auto;
border-radius: 10px;
}
.phone-div a svg{
width: 30px;
height: 30px;
fill: #e5e5e5;
margin-right: 15px;
float: left;
}
@media (max-width: 768px){
.shop-details{
flex-direction: column-reverse;
}
.details-div{
width: 100%;
border: none;
border-radius: 0px;
padding: 10px 10px 0px 10px;
margin-left: 0px;
font-size: 18px;
position: relative;
background: #FFF;
}
.details-div-texts{
position: absolute;
top: -100px;
background: rgba(255, 255, 255, 0.75);
width: 100%;
height: 100px;
right: 0;
border-radius: 0 0 30px 30px;
padding: 5px 10px;
z-index: 1;
}
.details-div .center{
padding-left: 0px;
}
.details-div .follow-btn{
font-size: 19px;
margin: 0 0 10px 0;
padding: 10px 15px;
}
.details-div .followers{
font-size: 13px;
margin: 0 0 10px 0;
}
.details-div .detail-btn{
border: 1px #c5c5c5 solid;
width: 70px;
height: 70px;
}
.details-div .detail-btn svg{
width: 30px;
height: 30px;
}
.profile-cover{
width: 100%;
margin-right: 0px;
}
.profile-cover .cover-photo-div{
height: 260px;
}
.profile-cover .profile-photo-div{
width: 80px;
height: 80px;
top: 8px;
left: 8px;
bottom: unset;
right: unset;
border-radius: 25px;
transform: translate(0px, 0px);
}
}
.shop-type{
color: #d1a720 !important;
margin-top: -10px;
}
/* Shops End */
/* Payment */
.mobile-page{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
z-index: 1;
overflow-x: hidden;
overflow-y: auto;
transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.mobile-login-modal{
position: fixed !important;
display: none;
z-index: 10000000;
}
.mobile-page .head{
position: relative;
width: 100%;
height: 50%;
background: #10bba0;
overflow-x: hidden;
overflow-y: auto;
}
.mobile-page .body{
position: relative;
width: 100%;
height: 50%;
background: #FFF;
overflow-x: hidden;
overflow-y: auto;
}
.mobile-title-box{
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
display: block;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.mobile-title-box img{
width: 100px;
}
.mobile-title-box h1{
color: #FFF;
font-size: 20px;
text-align: center;
display: block;
}
.mobile-back-btn{
position: absolute;
top: 20px;
right: 20px;
color: #FFF;
text-align: center;
font-size: 30px;
display: inline-block;
}
.mobile-back-btn:hover{
color: #FFF;
}
.mobile-page label{
color: #8a8d95;
}
.mobile-page .forgot-password{
color: #8a8d95;
text-align: center;
font-size: 12px;
margin: 7px 0;
display: block;
}
.mobile-page .error{
color: red;
font-size: 12px;
}
.mobile-page .resend{
font-size: 12px;
float: left;
}
.desktop-page{
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: auto;
background: #FFF;
z-index: 1;
overflow-x: hidden;
overflow-y: auto;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.desktop-page.relative{
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
background: #FFF;
z-index: 1;
transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.desktop-login-modal-fade{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1000;
display: none;
}
.desktop-login-modal{
position: fixed !important;
display: none;
z-index: 10000000;
}
.desktop-page .head{
position: relative;
width: 100%;
height: auto;
background: #10bba0;
overflow-x: hidden;
overflow-y: auto;
}
.desktop-page .body{
position: relative;
width: 100%;
height: auto;
background: #FAFAFA;
overflow-x: hidden;
overflow-y: auto;
}
.desktop-title-box{
width: 100%;
text-align: center;
display: block;
}
.desktop-title-box img{
width: 100px;
margin-top: 15px;
}
.desktop-title-box h3{
color: #FFF;
font-size: 20px;
text-align: center;
display: block;
}
.desktop-back-btn{
position: absolute;
top: 20px;
left: 20px;
color: #FFF;
text-align: center;
font-size: 30px;
display: inline-block;
}
.desktop-back-btn:hover{
color: #FFF;
}
.desktop-page label{
color: #8a8d95;
}
.desktop-page .forgot-password{
color: #8a8d95;
text-align: center;
font-size: 12px;
margin: 7px 0;
display: block;
}
.desktop-page .error{
color: red;
font-size: 12px;
}
.desktop-page .resend{
font-size: 12px;
float: left;
}
@media (max-width: 768px)
{
.mdl-textfield__input{
border: none !important;
border-bottom: 1px solid rgba(0,0,0,.12) !important;
border-radius: 0px !important;
-moz-border-radius: 0px !important;
-webkit-border-radius: 0px !important;
}
.mdl-textfield label a{
font-size: 13px;
}
.mdl-button.special{
background: #10bba0;
color: #FFF;
}
.mdl-button.google{
background: #FFF;
color: #b3b3b3;
border: 1px #b3b3b3 solid;
}
.mdl-textfield--floating-label.is-invalid .mdl-textfield__label{
color: #58595b;
overflow: visible;
}
.mdl-textfield.nopadding .mdl-textfield__label::after, .mdl-textfield.padding-bottom-0 .mdl-textfield__label::after{
bottom: -5px !important;
background: #58595b;
}
}
.align-bottom{
width: 100%;
}
.total-table{
width: 100%;
background: #FFF;
border: 1px #10bba0 solid;
font-size: 12px;
margin: 10px 0;
}
.desktop .total-table{
font-size: 13px;
font-weight: 300;
}
.total-table th, .total-table td{
/* width:50%; */
padding: 5px 10px;
}
.simple-border-title{
color: #484646;
border-bottom: 1px #C3C3C3 solid;
font-size: 13px;
padding: 10px;
}
.desktop .simple-border-title{
font-size: 16px;
}
.basket-item{
position: relative;
color: #484646;
border-bottom: 1px #C3C3C3 solid;
padding: 20px 10px;
margin: 10px 0;
font-size: 12px;
line-height: 22px;
}
.desktop .basket-item{
font-size: 14px;
line-height: 30px;
}
.basket-item select{
font-size: 12px;
padding: 0 5px !important;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.desktop .basket-item select{
font-size: 14px;
}
.delete-from-basket{
font-size: 24px;
color: #cd2c2c;
}
.text-black{
color: #000;
}
.text-darkgray{
color: #000;
}
.text-gray{
color: #8a8d95;
}
.text-special{
color: #000;
font-weight: 400;
}
.toggle-password{
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
display: none;
}
.toggle-password.left{
left: 10px !important;
}
#password-conditions{
font-size: 12px;
line-height: 25px;
border-radius: 10px;
padding: 10px;
}
#password-conditions svg{
margin-left: 10px;
width: 15px;
height: 15px;
}
#password-conditions b{
margin-left: 10px;
font-size: 15px;
width: 10px;
}
.condition.text-success svg{
display: inline-block;
}
.condition.text-success b{
display: none;
}
.condition.text-danger svg{
display: none;
}
.condition.text-danger b{
display: inline-block;
}
.bg-white{
background: #FFF;
border: 1px #dfdfdf solid;
}
.bg-danger{
background: #fee0e0;
border: 1px #df9696 solid;
}
.bg-success{
background: #e0fee0;
border: 1px #9edf96 solid;
}
.addressbook{
background: #f1f7ff;
color: #212529;
border: 1px #212529 dashed;
border-radius: 10px;
padding: 10px;
margin: 10px 0;
font-size: 12px;
cursor: pointer;
}
.desktop .addressbook{
font-size: 14px;
}
.addressbook.noborder{
border: none;
}
.addressbook-name{
font-size: 14px;
display: block;
color: #000;
font-weight: 400;
}
.addressbook-address{
font-size: 12px;
text-align: justify;
display: block;
}
.addressbook-tel{
font-size: 12px;
text-align: justify;
color: #000;
display: block;
}
.edit-addressbook{
margin-right: 10px;
display: inline-block;
color: #0275ff;
fill: #0275ff;
font-size: 12px;
}
.delete-addressbook{
margin-right: 10px;
display: inline-block;
color: #ff4b4b;
fill: #ff4b4b;
font-size: 12px;
}
.edit-addressbook-text{
margin-top: 0px;
font-size: 15px;
}
.mobile-addressbook-modal{
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 100%;
z-index: 100000;
display: none;
}
.mobile-addressbook-modal form{
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 80%;
background: #FFF;
padding: 10px;
margin-bottom: 50px;
z-index: 1000;
overflow-y: auto;
}
.mobile-addressbook-modal .modal-fade{
position: absolute;
background: rgba(0, 0, 0, 0.7);
bottom: 0px;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.mobile-back-btn.mobile-addressbook-modal-toggle{
color: #58595b;
font-size: 25px;
position: absolute;
top: 10px;
right: 10px;
}
.desktop-addressbook-modal{
position: absolute;
bottom: 0px;
left: 0;
width: 500px;
max-width: 100%;
height: 100%;
z-index: 100000;
display: none;
}
.desktop-addressbook-modal form{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: auto;
background: #FFF;
padding: 10px;
margin-bottom: 50px;
z-index: 1000;
overflow-y: auto;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.desktop-addressbook-modal .modal-fade{
position: fixed;
background: rgba(0, 0, 0, 0.7);
bottom: 0px;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.desktop-back-btn.desktop-addressbook-modal-toggle{
color: #58595b;
font-size: 25px;
position: absolute;
top: 10px;
right: 10px;
left: unset;
}
.simple-inputs input[type="text"], .simple-inputs input[type="password"], .simple-inputs select, .simple-inputs textarea{
width: 100%;
color: #58595b;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
font-size: 16px;
border-color: #bababa;
margin: 5px 0;
display: block;
}
.desktop.simple-inputs input[type="text"], .desktop.simple-inputs input[type="password"], .desktop.simple-inputs select, .desktop.simple-inputs textarea{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size: 16px;
}
.sendMethodsPlaceholder{
padding: 10px;
background: #f1f7ff;
border-radius: 10px;
margin-bottom: 10px;
border: 1px #212529 dashed;
}
.bankAccount{
background: #e0edff;
color: #212529;
border: 1px #212529 dashed;
border-radius: 10px;
padding: 10px;
margin: 10px 0;
font-size: 14px;
cursor: pointer;
display: block;
}
.bankAccount.active{
background: #c9ffd4;
}
.bankAccount-name{
font-size: 14px;
display: block;
color: #000;
font-weight: 400;
}
.bankAccount-number{
text-align: justify;
display: block;
direction: ltr;
font-size: 14px;
font-family: system-ui;
font-weight: 600;
}
.delete-bankAccount{
margin-right: 10px;
display: inline-block;
font-size: 12px;
}
.help-bar{
background: #8a8d95;
color: #FFF;
text-align: center;
margin-bottom: 45px;
font-size: 11px;
}
.help-bar p{
color: #FFF;
text-align: center;
font-size: 11px;
margin: 10px 0;
}
.help-bar span{
direction: ltr;
display: inline-block;
}
.help-bar span svg{
transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.flex{
display: flex;
}
.score-box-news{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 50px;
font-size: 11px;
}
.score-box-news img{
width: 25px !important;
vertical-align: baseline;
}
#discountForm .discountCode, #registerOrderForm .discountCode{
flex: 1;
width: 100%;
font-family: tahoma;
margin: 0;
padding: 5px 10px !important;
display: block;
font-size: 18px;
}
#discountForm .submitDiscount, #discountForm .removeDiscount, #registerOrderForm .submitDiscount, #registerOrderForm .removeDiscount{
flex: 0;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
margin: 0;
padding: 5px 25px;
}
.info-alert{
background: #24ad6a;
padding: 10px;
margin: 0 -10px;
color: #FFF;
font-size: 12px;
}
.info-alert p{
color: #FFF;
font-size: 12px;
padding-right: 40px;
}
.info-alert svg{
fill: #FFF;
width: 30px;
height: 30px;
float: right;
margin: 5px 0 5px 5px;
}
.desktop .info-alert{
background: #24ad6a;
padding: 15px;
margin: 0;
color: #FFF;
font-size: 14px;
border-radius: 10px;
}
.desktop .info-alert p{
color: #FFF;
font-size: 14px;
padding-right: 50px;
margin: 0;
}
.desktop .info-alert svg{
fill: #FFF;
width: 36px;
height: 36px;
float: right;
margin: 0;
}
.card-to-card-details{
background: #9e009e;
color: white;
direction: rtl;
font-size: 14px;
padding: 15px;
margin: 15px 0;
border-radius: 5px;
display: none;
}
.payment-box-success{
background: #0FBBA0;
color: #FFF;
padding: 20px;
border-radius: 10px;
font-size: 18px;
text-align: center;
}
.payment-box-info{
background: #383f46;
color: #d7bc40;
padding: 20px;
border-radius: 10px;
font-size: 18px;
text-align: center;
}
.big-price{
color: #000;
margin-top: 20px;
font-size: 20px;
}
.big-price span{
color: #0FBBA0;
font-size: 26px;
}
.sticky-payment{
position: fixed;
bottom: 50px;
right: 0;
width: 100%;
background: #FFF;
z-index: 1;
border-top: 1px #bebebe solid;
}
.print-factor{
width: 100%;
max-width: 100%;
color: #212529;
margin: 70px auto 10px auto;
border-radius: 20px;
}
.print-factor .bg{
background: #e8e1e1;
border-radius: 20px;
padding: 20px;
margin-bottom: 10px;
}
.print-factor .factor-logo{
width: 100%;
position: absolute;
top: -80px;
right: 50%;
transform: translateX(50%);
}
.print-factor .factor-logo img{
height: 100px;
border-radius: 10px;
object-fit: contain;
background: #FFF;
padding: 10px;
}
.print-factor p, .print-factor span{
color: #212529;
font-size: 15px;
}
.print-factor .large-font{
font-size: 20px;
}
.print-factor .white-bg{
background: #FFF;
border-radius: 20px;
padding: 10px;
margin-top: 20px;
}
.print-factor .bordered-box{
border: 2px #d5cdcd solid;
border-radius: 20px;
padding: 10px;
margin-bottom: 20px;
}
.print-factor table{
width: 100%;
text-align: right;
border: none;
font-size: 15px;
}
.print-factor table th{
font-size: 15px;
padding: 5px;
}
.print-factor table td{
font-size: 13px;
padding: 5px;
}
.hadith{
color: #212529;
font-size: 13px;
text-align: center;
margin-bottom: 5px;
}
@media (max-width: 768px){
.print-factor p, .print-factor span{
font-size: 11px;
}
.print-factor .bg{
padding: 10px;
}
.print-factor .bordered-box{
margin-bottom: 10px;
}
.print-factor .large-font{
font-size: 15px;
}
.print-factor table th{
font-size: 11px;
padding: 2px;
}
.print-factor table td{
font-size: 10px;
padding: 2px;
}
}
@media print{
.print-factor .bg{
background: #e8e1e1 !important;
print-color-adjust: exact;
}
.print-factor .white-bg{
background: #FFF !important;
print-color-adjust: exact;
}
}
/* Payment End */
/* Categories */
.categories .big-img{
height: 360px;
object-fit: cover;
}
.categories .small-img{
height: 165px;
object-fit: cover;
}
.categories img:hover{
filter: grayscale(100%);
}
/* Categories End */
/* Articles */
.article-item{
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px #b5b5b5 solid;
transition: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
}
.article-item:hover, .article-item:active, .article-item:focus{
background: #dedede;
}
.article-item::after{
content: " ";
display: block;
clear: both;
}
.article-item:last-child{
padding-top: 0;
}
.article-item:last-child{
border-bottom: none;
padding-bottom: 0;
}
.article-item .image-div{
width: 120px;
float: right;
padding: 3px;
border: 1px #dfdfdf solid;
border-radius: 3px;
margin: 0 3px;
}
.article-item .image-div.fixedwh{
width: 145px;
height: 100px;
}
.article-item .image-div.fixedwh2{
width: 130px;
height: 70px;
}
.article-item .image-div.fixedwh img, .article-item .image-div.fixedwh2 img{
width: 100%;
height: 100%;
object-fit: cover;
}
.article-item .content-div{
height: 100px;
overflow: hidden;
}
.article-item h2, .article-item h3{
width: 100%;
padding: 0 5px;
margin: 0;
text-align: right;
color: #000;
line-height: 20px;
font-size: 14px;
position: relative;
}
.article-item h2 a, .article-item h3 a{
font-size: 15px;
color: #6c6c6c;
margin: 0;
line-height: 25px;
height: 50px;
overflow: hidden;
text-align: center;
display: block;
}
.article-item h2:hover a, .article-item h3:hover a{
color: #dcbc00;
}
.article-item p{
font-size: 12px;
color: #6b6b6b;
margin: 0;
height: 80px;
line-height: 20px;
overflow: hidden;
text-align: justify;
padding: 0 15px;
direction: rtl;
}
.article-item .read-more{
background: #dcbc00;
color: #fff;
border: 1px solid transparent;
padding: 4px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.article-item .read-more:hover{
background: #fff;
color: #dcbc00;
border: 1px solid #dcbc00;
}
.article-item .visits{
color: #ccc;
}
.article-item .visits svg{
margin-left: 5px;
}
.article-item .overlay-visits{
position: absolute;
bottom: 10px;
right: 15px;
background: rgba(255, 94, 94, 0.7);
border: 1px #000 solid;
border-radius: 3px;
padding: 3px;
color: #FFF;
font-size: 13px;
font-weight: 400;
}
.article-item .overlay-visits svg{
vertical-align: top;
margin-left: 5px;
width: 16px;
height: 16px;
}
.article-item .article-title{
font-size: 13px;
color: #58595b;
margin: 0;
line-height: 23px;
height: 46px !important;
overflow: hidden;
text-align: center;
padding: 0 5px;
direction: rtl;
display: block;
}
.article-item .date{
font-size: 12px;
color: #8a8d95;
margin: 0;
text-align: right;
padding: 5px;
display: block;
}
.article-item .read{
background-color: #FFF;
color: #10bba0;
border: 1px #10bba0 solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding: 3px 15px;
margin-bottom: 10px;
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
display: inline-block;
}
.article-item .read:hover{
background-color: #10bba0;
color: #FFF;
}
.news-wrapper{
background: #fff;
border-radius: 5px;
padding: 5px 0;
border: 1px solid #dfdfdf;
margin: 10px 0;
}
.news-tab-container{
padding: 10px 10px 5px 10px;
}
.news-tab-container .tabs{
list-style: none;
background: #fff;
margin: 0;
overflow: hidden;
display: inline-block;
}
.news-tab-container .tabs li{
display: inline-block;
background: #f0f0f0;
padding: 0;
color: #000;
border-radius: 3px;
margin-left: 5px;
}
.news-tab-container .tabs li.active{
color: #FFF;
background: #000;
}
.news-tab-container .tabs li a{
color: inherit !important;
width: 100%;
padding: 5px 20px;
font-size: 15px;
text-align: center;
display: block;
font-weight: 300;
}
@media (max-width: 768px){
.news-tab-container .tabs{
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.news-tab-container .tabs li{
flex-grow: 1;
}
.news-tab-container .tabs li a{
padding: 10px 2px;
font-size: 11px;
}
}
.panel-container > .rtl:not(:first-child){
display: none !important;
}
.flex-articles{
display: flex !important;
flex-direction: row;
justify-content: space-between;
max-height: 270px;
}
.news-more-btn{
margin: 20px auto 15px auto;
display: block;
width: 280px;
}
.article-item2{
flex-basis: 20%;
padding: 3px 10px;
transition: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
}
.article-item2 .image-div.fixedwh{
width: 100%;
height: 160px;
}
.article-item2 .image-div.fixedwh img{
width: 100%;
height: 100%;
border-radius: 12px;
object-fit: cover;
}
.article-item2 .image-div{
padding: 3px;
border: 1px #dfdfdf solid;
border-radius: 15px;
margin: 0;
}
.article-item2 .content-div{
height: 120px;
overflow: hidden;
}
.article-item2 h2, .article-item2 h3,.article-item2 .h2, .article-item2 .h3{
position: relative;
width: 100%;
padding: 0px 5px;
margin: 0;
text-align: right;
color: #000;
line-height: 20px;
font-size: 15px;
font-weight: 400;
}
.article-item2 p{
font-size: 12px;
color: #6b6b6b;
margin: 0;
height: 80px;
line-height: 20px;
overflow: hidden;
text-align: justify;
padding: 0 5px;
direction: rtl;
}
@media (max-width: 768px){
.flex-articles{
max-height: 290px;
flex-wrap: wrap;
}
.article-item2{
flex-basis: 33.33%;
padding: 3px 3px;
}
.article-item2 .image-div.fixedwh{
height: 90px;
}
.article-item2 .content-div{
height: 45px;
}
.article-item2 h2, .article-item2 h3, .article-item2 .h2, .article-item2 .h3 {
font-size: 12px;
line-height: 15px;
}
}
/* Articles End */
/* Prices */
.price-table{
border: none;
border-radius: 3px;
box-shadow: 0 0 2px 0px #ccc;
}
.price-table thead{
background: #efefef;
}
.tr-price:hover{
background: #ffffd7 !important;
}
.tr-price:hover th::before{
display: block;
}
.price-table td, .price-table th{
white-space: nowrap;
text-align: right;
}
.price-table thead th{
border-bottom: 1px solid #dadada;
/* padding: 11px 10px 12px 15px; */
color: #222;
font-size: 13px;
text-align: right;
position: relative;
border-top: 0 !important;
border-bottom: 1px solid #ececec !important;
background-color: #fff !important;
color: #262626 !important;
font-family: YekanBakhFa;
}
.price-table tbody th{
position: relative;
/* padding: 5px 10px 5px 4px !important; */
font-size: 13px;
background-color: transparent !important;
text-shadow: 0 1px 1px #fff;
border-left: 1px solid #ececec !important;
text-align: right !important;
color: #222 !important;
font-family: YekanBakhFa;
}
.price-table tbody th::before{
position: absolute;
top: 0;
right: 0;
background: #10bba0;
width: 4px;
height: 100%;
content: " ";
display: none;
}
.price-table tbody td{
/* padding: 13px 5px 5px 5px !important; */
color: #222 !important;
text-align: center;
font-size: 12px;
font-family: YekanBakhFa;
border-top: 1px solid #ececec;
}
.price-table tbody td span{
font-family: YekanBakhFa;
}
.price-table .high{
color: #1da502 !important;
fill: #1da502 !important;
}
.price-table .low{
color: #f7817e !important;
fill: #f7817e !important;
}
.price-table svg{
width: 14px;
height: 14px;
}
.price-table h2{
font-size: 13px !important;
margin: 0;
display: inline-block;
}
.price-table.big-table h2, .price-table.big-table tbody td{
font-size: 15px;
}
.price-bar{
background: #FFF;
border-top: 1px #b5b5b5 solid;
border-bottom: 1px #b5b5b5 solid;
margin-top: 0px;
padding: 2px 0;
text-align: center;
font-family: YekanBakhFa;
}
.price-bar ul{
display: flex;
justify-content: center;
align-items: stretch;
}
.price-bar li{
position: relative;
font-size: 17px;
text-align: right;
line-height: 25px;
padding: 0 10px;
border-left: 1px #b5b5b5 solid;
display: inline-block;
}
@media (max-width: 1200px)
{
.price-bar li{
font-size: 15px;
padding: 0 5px;
}
}
@media (max-width: 992px)
{
.price-bar li.p{
flex-basis: 140px;
}
.price-bar li.d{
flex-basis: 150px;
}
}
@media (max-width: 768px)
{
.price-bar .p-title{
flex-grow: 1;
}
.price-bar li.p{
flex-basis: 120px;
}
.price-bar li.t{
flex-basis: 80px;
}
.price-bar li{
font-size: 13px;
padding: 0 5px;
}
.price-bar li.p b, .price-bar li.d b, .price-bar li.c b, .price-bar li.h b, .price-bar li.l b{
padding: 0 10px;
}
.price-bar .p b::before{
font-size: 16px;
}
}
.price-bar li span{
color: #777;
font-size: 12px;
display: block;
}
.price-bar li b{
position: relative;
font-family: YekanBakhFa;
font-weight: 400;
display: block;
}
.price-bar li.p b, .price-bar li.d b, .price-bar li.c b, .price-bar li.h b, .price-bar li.l b{
padding-left: 25px;
}
.price-bar.high .p b{
color: #1aa500;
}
.price-bar.low .p b{
color: #bd0a0a;
}
.price-bar.high .p b::before{
content: " ";
position: absolute;
left: 0;
top: 0;
background: url('data:image/svg+xml;utf8,');
width: 20px;
height: 20px;
}
.price-bar.low .p b::before{
content: " ";
position: absolute;
left: 0;
top: 0;
background: url('data:image/svg+xml;utf8,');
width: 20px;
height: 20px;
}
.price-bar.high .d b{
color: #1aa500;
}
.price-bar.low .d b{
color: #bd0a0a;
}
.price-bar.high .d b::before{
content: " ";
position: absolute;
left: 0;
top: 0;
background: url('data:image/svg+xml;utf8,');
width: 20px;
height: 20px;
}
.price-bar.low .d b::before{
content: " ";
position: absolute;
left: 0;
top: 0;
background: url('data:image/svg+xml;utf8,');
width: 20px;
height: 20px;
}
.price-bar li:last-child{
border-left: none;
}
.price-bar .p-title{
padding-top: 8px;
border-right: 5px #edbf14 solid;
}
.price-bar .p-title svg{
fill: #edbf14;
width: 24px;
height: 24px;
margin-left: 5px;
}
@media(max-width: 992px){
.price-bar .h, .price-bar .l{
display: none;
}
.price-bar .t{
border-left: none;
}
}
@media(max-width: 768px){
.price-bar .d, .price-bar .h, .price-bar .l{
display: none;
}
.price-bar .t{
border-left: none;
}
}
@media(max-width: 480px){
.price-bar .d, .price-bar .h, .price-bar .l{
display: none;
}
.price-bar .p-title svg{
width: 20px;
height: 20px;
}
}
.price-container-wrapper-mobile{
background-color: #F0F0F0;
padding: 10px;
}
.price-container-wrapper-mobile .smaller-title{
color: #CCC;
font-size: 20px;
margin: 0;
}
.price-container-wrapper-mobile .bigger-title{
color: #000;
font-size: 20px;
margin: 20px 0;
}
.price-container-mobile{
background-color: #FFF;
border-radius: 15px;
padding: 15px;
margin-bottom: 10px;
border-radius: 20px;
}
.price-bar-mobile{
background-color: #FFF;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
direction: rtl;
}
.price-bar-mobile:last-child{
margin-bottom: 0;
}
.price-bar-mobile:last-child .data-div{
border-bottom: none;
}
.price-bar-mobile img{
width: 60px;
height: 60px;
border-radius: 15px;
margin-left: 10px;
object-fit: cover;
}
.price-bar-mobile .data-div{
flex-grow: 1;
border-bottom: 1px #F0F0F0 solid;
}
.price-bar-mobile .data-div .flex-row{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.price-bar-mobile .data-div .flex-col{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.price-bar-mobile .data-div .p-title{
font-size: 17px;
color: #000;
}
.price-bar-mobile .data-div .view-chart{
background: #F0F0F0;
padding: 2px 20px;
border-radius: 30px;
color: #212529;
font-size: 15px;
}
.price-bar-mobile .data-div .label{
color: #CCC;
font-size: 11px;
font-weight: 300;
display: block;
margin: 3px 0 10px 0;
padding: 0;
}
.price-bar-mobile .data-div b{
color: #ef8331;
font-size: 15px;
}
.price-bar-mobile.high .data-div b{
color: #1aa500 !important;
}
.price-bar-mobile.low .data-div b{
color: #bd0a0a !important;
}
.prices-slider{
max-height: 360px;
direction: ltr;
margin-bottom: 0 !important;
padding-bottom: 30px;
}
.price-boxes{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
margin-top: 10px;
text-align: center;
}
.price-box{
width: 15%;
background: #FFF;
margin: 0 0.8%;
border: 1px #dfdfdf solid;
border-radius: 15px;
overflow: hidden;
}
.price-box ul{
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.price-box ul li{
position: relative;
color: #000;
font-family: YekanBakhFa;
font-size: 16px;
line-height: 25px;
text-align: center !important;
padding: 2px 5px;
display: block;
}
.price-box ul li.p-title{
background: #ededed;
border-bottom: 1px #dfdfdf solid;
display: flex !important;
justify-content: center;
align-items: center;
}
.price-box ul li.p{
color: #ef8331;
font-size: 20px;
}
.price-box.high ul li.p{
color: #1aa500 !important;
}
.price-box.low ul li.p{
color: #bd0a0a !important;
}
.price-box ul li.d{
font-size: 14px;
}
.price-box ul li.c{
font-size: 14px;
}
.price-box ul li.p-title::before{
content: " ";
background-image: url('data:image/svg+xml,');
width: 11px;
height: 11px;
margin-left: 3px;
position: relative;
top: 0;
}
.price-box.high ul li.p-title::before{
content: " ";
background: url('data:image/svg+xml;utf8,');
width: 11px;
height: 11px;
margin-left: 3px;
position: relative;
top: -1px;
}
.price-box.low ul li.p-title::before{
content: " ";
background: url('data:image/svg+xml;utf8,');
width: 11px;
height: 11px;
margin-left: 3px;
position: relative;
top: -2px;
}
.price-box ul li.d::before{
content: " ";
position: absolute;
top: -2px;
left: 5%;
width: 90%;
height: 1px;
background: #dfdfdf;
}
.price-box ul li.c::before{
content: " ";
position: absolute;
top: -2px;
left: 5%;
width: 90%;
height: 1px;
background: #dfdfdf;
}
.price-box.smaller{
width: 10%;
background: #FFF;
border-radius: 5px;
margin: 0 0.5% 15px 0;
border: 1px #dfdfdf solid;
border-radius: 15px;
overflow: hidden;
}
.price-box.smaller ul{
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.price-box.smaller ul li{
position: relative;
color: #000;
font-family: YekanBakhFa;
font-size: 13px;
font-weight: 400;
padding: 2px 3px;
display: block;
}
.price-box.smaller ul li.p-title{
background: #ededed;
border-bottom: 1px #dfdfdf solid;
}
.price-box.smaller ul li.p{
color: #ef8331;
font-size: 16px;
}
.price-box.smaller.high ul li.p{
color: #1aa500 !important;
}
.price-box.smaller.low ul li.p{
color: #bd0a0a !important;
}
.price-box.smaller ul li.d{
font-size: 10px;
line-height: 22px;
}
.price-box.smaller ul li.c{
font-size: 14px;
}
.price-box.smaller ul li.p-title::before{
content: " ";
background-image: url('data:image/svg+xml,');
width: 11px;
height: 11px;
margin-left: 3px;
position: relative;
top: 0;
}
.price-box.smaller.high ul li.p-title::before{
content: " ";
background: url('data:image/svg+xml;utf8,');
width: 11px;
height: 11px;
margin-left: 3px;
position: relative;
top: -1px;
}
.price-box.smaller.low ul li.p-title::before{
content: " ";
background: url('data:image/svg+xml;utf8,');
width: 11px;
height: 11px;
margin-left: 3px;
position: relative;
top: -2px;
}
.price-box.smaller ul li.d::before{
content: " ";
position: absolute;
top: -2px;
left: 5%;
width: 90%;
height: 1px;
background: #dfdfdf;
}
.price-box.smaller ul li.c::before{
content: " ";
position: absolute;
top: -2px;
left: 5%;
width: 90%;
height: 1px;
background: #dfdfdf;
}
.view-chart svg{
fill: #edbf14;
width: 24px;
height: 24px;
}
.view-chart:hover, .view-chart:hover svg{
color: #e7ba27;
fill: #e7ba27;
}
@media(max-width: 992px){
.price-box{
width: 30%;
margin: 0 1.5% 10px 1.5%;
}
.price-box.smaller{
width: 30%;
margin: 0 1.5% 10px 1.5%;
}
}
@media(max-width: 480px){
.price-box{
width: 46%;
margin: 0 2% 10px 2%;
}
.price-box.smaller{
width: 30%;
margin: 0 1.5% 10px 1.5%;
}
.price-box.smaller ul li{
font-size: 12px;
}
}
@media (max-width: 768px){
/*
.price-table thead th:nth-child(4), .price-table thead th:nth-child(5), .price-table thead th:nth-child(6){
display: none;
}
.price-table tbody td:nth-child(4), .price-table tbody td:nth-child(5), .price-table tbody td:nth-child(6){
display: none;
}
*/
.price-table.big-table h2{
font-size: 13px;
}
.price-table.big-table tbody td{
font-size: 12px;
}
}
.live-image{
width: 16px !important;
height: 16px !important;
margin-right: 5px;
border-radius: 20px;
vertical-align: middle;
}
.prices{
padding: 30px 0;
}
.prices th{
background: #10bba0;
color: #057f77;
line-height: 45px;
text-align: center;
margin: 0;
font-size: 22px;
font-weight: 400;
}
.prices td{
width: 50%;
color: #000;
font-size: 17px;
padding: 5px 10px;
}
.prices span{
background: #F0F0F0;
color: #057f77;
text-align: center;
margin: 0;
font-size: 16px;
font-weight: 400;
display: block;
}
.prices-deactive-div{
background: #FFF;
padding: 20px;
text-align: center;
border-radius: 10px;
font-size: 14px;
margin: 20px 0;
}
.prices-deactive-div p{
text-align: center !important;
}
.prices-deactive-div svg{
width: 30px;
height: 30px;
color: #e7ba27;
fill: #e7ba27;
text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}
.converter-wrapper{
width: 500px;
max-width: 100%;
margin: 30px auto;
padding: 20px;
background: #FFF;
border: 1px #DFDFDF solid;
box-shadow: 0 0 5px 0px #ccc;
border-radius: 20px;
text-align: center;
font-size: 16px;
}
.converter-wrapper .amount-row{
display: flex;
justify-content: space-between;
align-items: center;
background: #F0F0F0;
padding: 10px 5px;
}
.converter-wrapper .amount-row:nth-child(2n){
background: #FAFAFA;
}
.converter-wrapper .amount-row .grow{
flex-grow: 1;
}
.converter-wrapper .amount-row input{
width: 180px;
font-size: 18px;
letter-spacing: 2px;
direction: ltr;
}
.converter-wrapper .amount-row input::placeholder{
letter-spacing: 0px !important;
}
.select2-custom-span{
display: block;
direction: rtl;
line-height: 35px;
font-size: 16px;
}
.select2-custom-span img{
width: 24px;
margin-left: 8px;
vertical-align: middle;
}
.resultTable{
margin-top: 20px;
}
.add-property{
background: #394449;
font-size: 16px;
border: 1px #000 solid;
color: #FFF;
}
.add-property:hover, .add-property:focus{
background: #444 !important;
color: #FFF;
}
@media (max-width: 768px){
.converter-wrapper .amount-row{
flex-direction: column;
align-items: stretch;
}
.converter-wrapper .amount-row input{
width: 100%;
margin-top: 5px;
}
}
.price-info-bar{
margin: 15px 0;
background: #FFF;
border-radius: 100px;
box-shadow: 0 0 10px -5px #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
.price-info-bar .price-image-div{
width: 100px;
height: 100px;
margin-left: 2px;
}
.price-info-bar .price-image-div img{
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 100px;
border: 3px #CCC solid;
}
.price-info-bar .price-info{
font-size: 20px;
line-height: 30px;
flex-grow: 1;
}
.price-info-bar .price-info span{
color: #d7bc40;
}
@media (max-width: 768px)
{
.price-info-bar .price-image-div{
width: 60px;
height: 60px;
}
.price-info-bar .price-image-div img{
width: 60px;
height: 60px;
}
.price-info-bar .price-info{
font-size: 13px;
line-height: 24px;
}
}
.editable-price-table{
width: 100%;
margin: 5px 0;
text-align: center;
}
.editable-price-table td{
color: #eec011;
background: #394049;
padding: 20px;
font-size: 70px;
border: 1px #FFF solid;
width: 50%;
word-break: break-all;
}
.editable-price-table tr:first-child td{
color: #FFF !important;
background: #0FBBA0 !important;
padding: 10px !important;
font-size: 40px !important;
}
/* Prices End */
/* Collapsable Accordion */
.collapsable-container{
margin: 15px;
}
.collapsable-container .collapsable{
position: relative;
background: #FFF;
margin: 10px 0;
border-radius: 10px;
overflow: hidden;
}
.collapsable-container .collapsable:hover .head, .collapsable-container .collapsable.active .head{
background: #dbdbdb;
}
.collapsable-container .collapsable > .head {
position: relative;
}
.collapsable-container .collapsable > .head > p{
padding: 0;
margin: 0;
}
.collapsable-container .collapsable > .head > h3, .collapsable-container .collapsable > .head > h4, .collapsable-container .collapsable > .head > p{
color: #000;
font-size: 15px !important;
line-height: 20px;
text-align: right;
padding: 15px 20px 15px 50px;
margin: 0;
cursor: pointer;
}
.collapsable-container .collapsable > .head > h3 svg, .collapsable-container .collapsable > .head > h4 svg, .collapsable-container .collapsable > .head > p svg{
width: 24px;
height: 24px;
margin-left: 5px;
}
@media (max-width: 768px){
.collapsable-container .collapsable > .head > h3, .collapsable-container .collapsable > .head > h4, .collapsable-container .collapsable > .head > p{
font-size: 13px !important;
}
}
.collapsable-container .collapsable > .head::before {
content: " ";
background: url('data:image/svg+xml;utf8,');
fill: #000;
position: absolute;
top: 50%;
left: 10px;
width: 20px;
height: 20px;
opacity: 0.8;
cursor: pointer;
transform: translateY(-50%) rotate(0deg);
transition: all 0.5s ease-in-out;
z-index: 0;
}
.collapsable-container .collapsable > .head:hover::before{
opacity: 1;
}
.collapsable-container .collapsable > .body{
background: #FFF;
padding: 10px 20px;
display: none;
}
.collapsable-container .collapsable.active > .body{
display: block;
}
.collapsable-container .collapsable.active > .head::before{
background: url('data:image/svg+xml;utf8,');
}
/* Collapsable Accordion End */
/* GoldMag */
.grey-bordered-bg{
background: #fafafa;
border: 1px #DFDFDF solid;
}
.grey-bordered-bg #pagination p{
margin: 10px;
display: block;
}
.cream-bordered-bg{
background: #fff8ef;
border: 1px #eadbc7 solid;
}
.goldmag-logo{
width: auto;
height: 50px;
margin-bottom: -2px;
margin-top: -14px;
}
.goldmag-menu{
position: relative;
margin: 10px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
border: 1px #b5b5b5 solid;
border-radius: 40px;
padding-right: 14px;
border-left: none;
}
.goldmag-menu ul{
padding: 0;
list-style: none;
font-size: 0px;
text-align: right;
flex-grow: 1;
display: block;
}
.goldmag-menu li{
position: relative;
color: #333;
padding: 2px 10px;
border-left: 1px #b5b5b5 solid;
text-align: center;
font-size: 14px;
line-height: 30px;
display: inline-block;
}
.goldmag-menu li a{
color: inherit;
display: block;
}
.goldmag-menu li:first-child{
padding-right: 0px;
}
.goldmag-menu > ul > li:last-child{
border-left: none;
}
.goldmag-menu li:hover{
background: #DFDFDF;
color: #000;
}
.goldmag-menu li > ul{
position: absolute;
width: 200px;
top: 100%;
right: 0;
z-index: 21;
background: transparent;
display: none;
padding: 0;
}
.goldmag-menu ul > li > ul > li{
background: rgba(255, 255, 255, 0.85);
color: #000;
width: 100%;
border-right: 1px #b5b5b5 solid;
border-left: 1px #b5b5b5 solid;
border-bottom: 1px #b5b5b5 solid;
text-align: center;
padding: 5px 0;
display: block;
}
.goldmag-menu ul > li > ul > li:hover{
background: #10bba0;
color: #fff;
}
.goldmag-menu ul > li > ul > li:hover a{
color: #fff;
}
.goldmag-menu-toggle{
color: #333;
display: none;
}
.goldmag-menu-toggle svg{
width: 27px !important;
height: 27px !important;
}
.goldmag-menu-toggle:hover{
color: #424242;
}
.goldmag-menu .show-submenus{
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
background: #e2c951;
text-align: center;
padding: 10px 0;
font-size: 20px;
display: none;
}
.goldmag-menu-fade{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
display: none;
}
.goldmag-tab-container{
background: #FFF;
border: 1px #DFDFDF solid;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow: hidden;
}
.goldmag-tab-container ul{
display: flex;
flex-direction: row;
justify-content: stretch;
background: #F0F0F0;
border-bottom: 1px #dfdfdf solid;
list-style: none;
}
.goldmag-tab-container ul li{
flex-grow: 1;
flex-basis: 50%;
}
.goldmag-tab-container ul li a{
color: inherit;
display: block;
padding: 10px;
}
.goldmag-tab-container ul li:hover, .goldmag-tab-container ul li.active{
color: #000;
background: #CCC;
}
.fancybox-enabled{
overflow-y: auto !important;
}
.news-item{
padding: 5px 0;
}
.grey-bordered-bg .news-item{
border-bottom: 1px #dfdfdf solid;
}
.cream-bordered-bg .news-item{
border-bottom: 1px #e9dbc7 solid;
}
.news-item::after{
content: " ";
display: block;
clear: both;
}
.news-item:last-child{
border-bottom: none;
margin-bottom: 0;
}
.grey-bordered-bg .news-item:hover, .grey-bordered-bg .news-item:active, .grey-bordered-bg .news-item:focus{
background: #dedede;
}
.cream-bordered-bg .news-item:hover, .cream-bordered-bg .news-item:active, .cream-bordered-bg .news-item:focus{
background: #f5eadc;
}
.news-item .image-div.fixedwh{
width: 140px;
height: 110px;
float: right;
padding: 3px;
border: 1px #dfdfdf solid;
border-radius: 3px;
margin: 0 3px;
}
.news-item .image-div.fixedwh2{
width: 60px;
height: 45px;
float: right;
padding: 3px;
border: 1px #dfdfdf solid;
border-radius: 3px;
margin: 0 8px;
}
.news-item .image-div.fixedwh img, .news-item .image-div.fixedwh2 img{
width: 100%;
height: 100%;
object-fit: cover;
}
.news-item h3, .news-item span{
position: relative;
width: 100%;
text-align: right;
color: #000;
height: 20px;
line-height: 20px;
overflow: hidden;
font-size: 15px;
font-weight: 400;
margin: 0;
padding: 3px 5px;
}
.cream-bordered-bg .news-item h3, .cream-bordered-bg .news-item span{
font-size: 14px !important;
font-weight: 500 !important;
}
.news-item p{
font-size: 13px;
color: #333;
margin: 0;
height: 60px;
line-height: 20px;
overflow: hidden;
text-align: justify;
padding: 3px 5px;
direction: rtl;
font-weight: 300;
}
.news-item h3.auto, .news-item span.auto{
height: auto !important;
overflow: visible;
}
.news-item p.auto{
height: auto !important;
overflow: visible;
}
@media(max-width: 768px){
.ideas-h1{
margin: 0 0 10px 0;
font-size: 16px;
line-height: 22px;
}
.goldmag-logo{
height: 38px;
margin-bottom: -1px;
}
.goldmag-menu ul{
display: none;
position: absolute;
top: 110%;
right: 0;
width: 100%;
z-index: 10;
}
.goldmag-menu li{
width: 100%;
background: rgba(0, 0, 0, 0.85);
color: #FFF;
border-bottom: 3px rgba(255, 255, 255, 0.85) solid;
border-left: none;
text-align: center;
font-size: 15px;
padding: 0;
line-height: 40px;
display: block;
}
.goldmag-menu > ul > li:last-child{
border-bottom: none;
}
.goldmag-menu ul li ul{
position: relative;
width: 100%;
background: #e4cc5f;
display: none;
}
.goldmag-menu ul > li > ul > li{
background: #555;
color: #FFF;
padding: 0;
}
.goldmag-menu-toggle{
display: block;
}
.goldmag-menu .show-submenus{
display: inline-block;
}
}
.filters-sticky{
transition: background 0.2s ease-in-out;
}
.filters-sticky.sticky{
position: fixed;
z-index: 110;
background: rgb(233 233 233 / 60%);
right: 50%;
transform: translateX(50%);
border-bottom: 1px #b5b5b5 solid;
border-radius: 5px 5px 10px 10px;
}
.ideas-sticky-placeholder{
margin: 0;
text-align: center;
}
.idea-galleries{
width: 100%;
max-width: 100%;
background: #FFF;
padding: 0px;
position: relative;
border-radius: 10px;
overflow: hidden;
border: 1px #dfdfdf solid;
will-change: transform;
display: inline-block;
}
.idea-galleries.sticky{
position: fixed;
z-index: 110;
width: calc(100% - 10px);
right: 0;
margin: 0 5px;
border-radius: 0 0 20px 20px;
}
.idea-galleries ul{
list-style: none;
text-align: center;
display: block;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.idea-galleries.no-border-top ul{
border-top: none !important;
}
.idea-galleries ul::-webkit-scrollbar{
display: none; /* Safari and Chrome */
}
.idea-galleries li{
width: 100px;
border-left: 1px #eaeaea solid;
text-align: center;
color: #000;
display: inline-block;
opacity: 1;
white-space: normal;
}
.idea-galleries li:last-child{
border-left: none;
}
.idea-galleries li h2, .idea-galleries li span{
/* background: #FFF; */
color: #000;
display: inline-block;
padding: 5px 0;
width: 100%;
text-align: center;
font-size: 15px;
font-weight: 300;
margin: 0;
}
@media (max-width: 768px){
.idea-galleries li h2, .idea-galleries li span{
font-size: 13px;
}
}
/* .idea-galleries li.active span{
background: #8cab5f;
} */
.idea-galleries li.active, .idea-galleries li:hover{
background: #F0F0F0;
opacity: 1;
box-shadow: 0 0 10px 0 #8d8d8d;
z-index: 1;
position: relative;
}
.idea-galleries li a{
color: inherit !important;
}
.idea-galleries .scroll-btn{
position: absolute;
top: 0;
width: 30px;
height: 100%;
background: transparent;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
z-index: 1;
cursor: pointer;
}
.idea-galleries .scroll-right{
right: 0;
}
.idea-galleries .scroll-left{
left: 0;
}
.grid-sizer{
width: 16.66666666%;
}
.grid-item{
width: 16.66666666%;
height: 16.66666666vw;
background-color: #dfdfdf;
background-position: center;
background-size: cover;
padding: 0;
border: 3px solid #fff;
}
.grid-item.w2{
width: 33.33333333%;
}
.grid-item.w3{
width: 50%;
}
.grid-item.w4{
width: 66.66666666%;
}
.grid-item.w5{
width: 83.33333333%;
}
.grid-item.w6{
width: 100%;
}
.grid-item.h1, .grid-item.h2, .grid-item.h3, .grid-item.h4, .grid-item.h5, .grid-item.h6{
margin: 0 !important;
font-size: 14px !important;
font-weight: 300 !important;
line-height: 24px !important;
}
.grid-item.h2{
height: 33.33333333vw;
}
.grid-item.h3{
height: 50vw;
}
.grid-item.h4{
height: 66.66666666vw;
}
.grid-item.h5{
height: 83.33333333vw;
}
.grid-item.h6{
height: 100vw;
}
.packery-grid::after{
content: ' ';
display: block;
clear: both;
}
.grid-item .overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.grid-item .overlay img{
width: 100%;
height: 100%;
object-fit: cover;
}
.grid-item .like-btn{
background: rgba(0,0,0,0.3);
padding: 0 5px;
height: 26px;
line-height: 27px;
font-size: 11px;
color: #FFF;
direction: ltr;
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
}
.grid-item .like-btn svg{
fill: #FFF;
width: 16px;
height: 16px;
margin-right: 5px;
}
.grid-item a.caption{
font-size: 16px;
display: table-cell;
vertical-align: middle;
color: #fff;
padding:30px;
text-align: center;
background-color: rgba(0,0,0,0.0);
transition: all 0.5s;
}
.grid-item a.caption:hover,.grid-item a.caption:focus{
text-decoration:none;
/*background-color:rgba(0,0,0,0.5)*/
}
.grid-item a.caption span.caption-text{
display: none;
/*border-bottom:1px solid #fff;*/
padding: 15px;
margin: 20%;
width: 60%;
font-family: Tahoma;
text-shadow: 2px 2px 2px #000;
}
.grid-item a.caption:hover span.caption-text{
display: block;
}
.grid-item a.caption span.caption-link{
display:inline-block;
/*
width:fit-content;
width:-moz-fit-content;
width: -o-fit-content;
width: -webkit-fit-content;
*/
color:#ddd;
padding:10px 15px;
font-size:12px !important;
border:none;
box-shadow: rgba(255,255,255,0.2) 0px 0px 10px 4px inset;
transition:all .3s;
-o-transition:all .3s;
-moz-transition:all .3s;
}
.grid-item:hover a.caption span.caption-link{
box-shadow: rgba(255,255,255,0.5) 0px 0px 10px 4px inset;
color:#fff;
}
.grid-item a.caption span.caption-index-text{
padding:15px;
}
.grid-item a.caption.top{
vertical-align:top
}
.grid-item a.caption.bottom{
vertical-align:bottom
}
.grid-item a.caption.right{
text-align:right;
}
.grid-item a.caption.left{
text-align:left;
}
.grid-item a.caption.medium{
padding:34px;
font-size:20px;
}
.grid-item a.caption.large{
padding:40px;
font-size:24px;
}
.grid-item a.caption.xlarge{
padding:50px;
font-size:26px;
}
.grid-item a.caption.xxlarge{
padding:90px;
font-size:34px;
}
.grid-item a.caption.xxxlarge{
padding: 150px;
font-size: 44px;
}
.grid-item a.caption.black {
color: #111;
}
.grid-item a.caption.black span.caption-link{
color: #333;
border:none;
box-shadow: rgba(0,0,0,0.15) 0px 0px 10px 4px inset;
}
.grid-item:hover a.caption.black span.caption-link{
box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 4px inset;
color:#000;
}
.grid-item a.caption[href='#'],
.grid-item a.caption[href='#']:hover{
cursor: default;
background-color: transparent;
}
.grid-item a.caption.third span{
width:30%;
}
.grid-item a.caption.half span{
width:50%;
}
.grid-item a.caption.third.right span{
margin-left: 70%;
}
.grid-item a.caption.half.right span{
margin-left: 50%;
}
@media (max-width: 1199px){
.grid-sizer{
width: 25%;
}
.grid-item{
width: 25%;
height: 25vw;
}
.grid-item.w2{
width: 50%;
}
.grid-item.w3{
width: 75%;
}
.grid-item.w4,
.grid-item.w5,
.grid-item.w6{
width: 100%;
}
.grid-item.h2{
height: 50vw;
}
.grid-item.h3{
height: 75vw;
}
.grid-item.h4,
.grid-item.h5,
.grid-item.h6{
height: 100vw;
}
}
@media (max-width: 991px){
.grid-sizer{
width: 33.3333333%;
}
.grid-item{
width: 33.3333333%;
height: 33.3333333vw;
}
.grid-item.w2{
width: 66.666666%;
}
.grid-item.w3,
.grid-item.w4,
.grid-item.w5,
.grid-item.w6{
width: 100%;
}
.grid-item.h2{
height: 66.666666vw;
}
.grid-item.h3,
.grid-item.h4,
.grid-item.h5,
.grid-item.h6{
height: 100vw;
}
.grid-item a.caption.third span,
.grid-item a.caption.half span{
width: 100%;
}
.grid-item a.caption.third.right span,
.grid-item a.caption.half.right span{
margin-left: 0%;
}
}
@media (max-width: 767px){
.idea-galleries li{
width: 80px;
font-size: 13px;
}
.grid-sizer{
width: 50%;
}
.grid-item{
width: 50%;
height: 50vw;
}
.grid-item.w2,
.grid-item.w3,
.grid-item.w4,
.grid-item.w5,
.grid-item.w6{
width: 100%;
}
.grid-item.h2,
.grid-item.h3,
.grid-item.h4,
.grid-item.h5,
.grid-item.h6{
height: 100vw;
}
.grid-item a.caption.third span,
.grid-item a.caption.half span{
width: 100%;
}
.grid-item a.caption.third.right span,
.grid-item a.caption.half.right span{
margin-left: 0%;
}
}
.register-button-sticky.sticky{
position: fixed;
z-index: 110;
width: calc(100% - 10px);
right: 0;
margin: 0 5px;
border-radius: 0 0 20px 20px;
}
.onslider-title{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
background: rgba(0, 0, 0, 0.8);
color: #FFF;
font-size: 13px;
line-height: 20px;
text-align: center;
direction: rtl;
padding: 3px 3px 24px 3px;
display: block;
}
.rss-link{
float: left;
font-size: 22px;
padding: 0;
color: #F19238;
}
.share-box{
background: #ececec;
border-radius: 5px;
border: 1px #dfdfdf solid;
}
.share-box.melted {
background: #FFF;
border-radius: 5px;
text-align: center;
margin-bottom: 10px;
border: none;
}
.share-box .like-span{
color: #000;
padding: 0 10px;
line-height: 42px;
font-size: 12px;
display: inline-block;
}
.share-box .like-btn{
color: #000;
font-size: 15px;
line-height: 30px;
border-radius: 3px;
padding: 0 3px;
margin-left: 3px;
display: inline-block;
vertical-align: baseline;
}
.share-box .like-btn svg{
fill: #000;
width: 22px;
height: 22px;
padding: 0 5px;
}
.share-box .like-btn i.fas{
color: #FF0000;
}
.share-box .like-btn span{
position: relative;
top: 2px;
}
/* End of GoldMag */
/* Mini Flag */
.mini-flag{
display: inline-block;
width: 16px;
height: 11px;
vertical-align: middle;
position: relative;
margin: 0 2px 0 8px;
background: url('../images/flags-sprite.webp') no-repeat;
}
.mini-flag.flag-sa{background-position:-605px -237px}.mini-flag.flag-no{background-position:-733px -215px}.mini-flag.flag-sg{background-position:-701px -237px}.mini-flag.flag-td{background-position:-717px -248px}.mini-flag.flag-kw{background-position:-589px -193px}.mini-flag.flag-ne{background-position:-653px -215px}.mini-flag.flag-sm{background-position:-525px -248px}.mini-flag.flag-england{background-position:-669px -149px}.mini-flag.flag-cl{background-position:-621px -138px}
.mini-flag.flag-gu{background-position:-573px -174px}.mini-flag.flag-va{background-position:-495px -270px}.mini-flag.flag-id{background-position:-733px -171px}.mini-flag.flag-bv{background-position:-701px -127px}.mini-flag.flag-la{background-position:-637px -193px}.mini-flag.flag-tibet{background-position:-509px -259px}.mini-flag.flag-gr{background-position:-525px -174px}.mini-flag.flag-tv{background-position:-653px -259px}.mini-flag.flag-ps{background-position:-726px -226px}
.mini-flag.flag-kh{background-position:-477px -193px}.mini-flag.flag-st{background-position:-621px -248px}.mini-flag.flag-ic{background-position:-717px -171px}.mini-flag.flag-gi{background-position:-701px -44px}.mini-flag.flag-sb{background-position:-621px -237px}.mini-flag.flag-sz{background-position:-685px -248px}.mini-flag.flag-il{background-position:-493px -182px}.mini-flag.flag-re{background-position:-525px -237px}.mini-flag.flag-md{background-position:-573px -204px}
.mini-flag.flag-bi{background-position:-573px -127px}.mini-flag.flag-si{background-position:-733px -237px}.mini-flag.flag-ng{background-position:-685px -215px}.mini-flag.flag-eu{background-position:-733px -149px}.mini-flag.flag-ni{background-position:-701px -215px}.mini-flag.flag-er{background-position:-685px -149px}.mini-flag.flag-bd{background-position:-493px -127px}.mini-flag.flag-ci{background-position:-589px -138px}.mini-flag.flag-tl{background-position:-557px -259px}
.mini-flag.flag-ug{background-position:-717px -259px}.mini-flag.flag-om{background-position:-541px -226px}.mini-flag.flag-mt{background-position:-509px -215px}.mini-flag.flag-tf{background-position:-733px -248px}.mini-flag.flag-gm{background-position:-733px -160px}.mini-flag.flag-in{background-position:-541px -182px}.mini-flag.flag-vi{background-position:-589px -270px}.mini-flag.flag-mr{background-position:-477px -215px}.mini-flag.flag-uz{background-position:-509px -270px}
.mini-flag.flag-zanzibar{background-position:-477px -281px}.mini-flag.flag-cm{background-position:-637px -138px}.mini-flag.flag-bf{background-position:-525px -127px}.mini-flag.flag-je{background-position:-653px -182px}.mini-flag.flag-gq{background-position:-509px -171px}.mini-flag.flag-so{background-position:-557px -248px}.mini-flag.flag-me{background-position:-589px -204px}.mini-flag.flag-pk{background-position:-637px -226px}.mini-flag.flag-tw{background-position:-669px -259px}
.mini-flag.flag-rs{background-position:-557px -237px}.mini-flag.flag-ht{background-position:-685px -171px}.mini-flag.flag-kr{background-position:-557px -193px}.mini-flag.flag-eg{background-position:-637px -149px}.mini-flag.flag-ax{background-position:-701px -116px}.mini-flag.flag-cv{background-position:-717px -138px}.mini-flag.flag-nr{background-position:-493px -226px}.mini-flag.flag-cz{background-position:-493px -149px}.mini-flag.flag-pl{background-position:-653px -226px}
.mini-flag.flag-pr{background-position:-701px -226px}.mini-flag.flag-ms{background-position:-493px -215px}.mini-flag.flag-eh{background-position:-653px -149px}.mini-flag.flag-at{background-position:-653px -116px}.mini-flag.flag-gd{background-position:-605px -160px}.mini-flag.flag-bo{background-position:-637px -127px}.mini-flag.flag-ly{background-position:-525px -204px}.mini-flag.flag-ge{background-position:-621px -160px}.mini-flag.flag-pm{background-position:-669px -226px}
.mini-flag.flag-bb{background-position:-477px -127px}.mini-flag.flag-ir{background-position:-589px -182px}.mini-flag.flag-kn{background-position:-525px -193px}.mini-flag.flag-ec{background-position:-605px -149px}.mini-flag.flag-gf{background-position:-637px -160px}.mini-flag.flag-ar{background-position:-621px -116px}.mini-flag.flag-vg{background-position:-573px -270px}.mini-flag.flag-hu{background-position:-701px -171px}.mini-flag.flag-sd{background-position:-669px -237px}
.mini-flag.flag-sv{background-position:-637px -248px}.mini-flag.flag-wf{background-position:-653px -270px}.mini-flag.flag-tn{background-position:-589px -259px}.mini-flag.flag-kp{background-position:-541px -193px}.mini-flag.flag-it{background-position:-621px -182px}.mini-flag.flag-li{background-position:-685px -193px}.mini-flag.flag-lb{background-position:-653px -193px}.mini-flag.flag-ao{background-position:-605px -116px}.mini-flag.flag-lu{background-position:-493px -204px}
.mini-flag.flag-ke{background-position:-717px -182px}.mini-flag.flag-tt{background-position:-637px -259px}.mini-flag.flag-kz{background-position:-621px -193px}.mini-flag.flag-gg{background-position:-669px -160px}.mini-flag.flag-tk{background-position:-541px -259px}.mini-flag.flag-jm{background-position:-669px -182px}.mini-flag.flag-mo{background-position:-701px -204px}.mini-flag.flag-nz{background-position:-525px -226px}.mini-flag.flag-lk{background-position:-701px -193px}
.mini-flag.flag-ae{background-position:-493px -116px}.mini-flag.flag-wales{background-position:-637px -270px}.mini-flag.flag-sj{background-position:-477px -248px}.mini-flag.flag-bm{background-position:-605px -127px}.mini-flag.flag-by{background-position:-733px -127px}.mini-flag.flag-sr{background-position:-589px -248px}.mini-flag.flag-dm{background-position:-557px -149px}.mini-flag.flag-nu{background-position:-509px -226px}.mini-flag.flag-kg{background-position:-733px -182px}
.mini-flag.flag-uy{background-position:-493px -270px}.mini-flag.flag-cy{background-position:-477px -149px}.mini-flag.flag-pt{background-position:-733px -226px}.mini-flag.flag-mg{background-position:-605px -204px}.mini-flag.flag-io{background-position:-557px -182px}.mini-flag.flag-sc{background-position:-637px -237px}.mini-flag.flag-mu{background-position:-525px -215px}.mini-flag.flag-ss{background-position:-605px -248px}.mini-flag.flag-sn{background-position:-541px -248px}
.mini-flag.flag-hn{background-position:-653px -171px}.mini-flag.flag-tr{background-position:-621px -259px}.mini-flag.flag-ag{background-position:-525px -116px}.mini-flag.flag-iq{background-position:-573px -182px}.mini-flag.flag-ye{background-position:-701px -270px}.mini-flag.flag-bh{background-position:-557px -127px}.mini-flag.flag-az{background-position:-717px -116px}.mini-flag.flag-ro{background-position:-541px -237px}.mini-flag.flag-fm{background-position:-525px -160px}
.mini-flag.flag-aw{background-position:-685px -116px}.mini-flag.flag-my{background-position:-589px -215px}.mini-flag.flag-fr{background-position:-557px -160px}.mini-flag.flag-se{background-position:-685px -237px}.mini-flag.flag-mk{background-position:-637px -204px}.mini-flag.flag-cd{background-position:-525px -138px}.mini-flag.flag-mc{background-position:-557px -204px}.mini-flag.flag-lr{background-position:-717px -193px}.mini-flag.flag-fo{background-position:-541px -160px}
.mini-flag.flag-mq{background-position:-733px -204px}.mini-flag.flag-to{background-position:-605px -259px}.mini-flag.flag-gy{background-position:-605px -171px}.mini-flag.flag-mv{background-position:-541px -215px}.mini-flag.flag-na{background-position:-621px -215px}.mini-flag.flag-tm{background-position:-573px -259px}.mini-flag.flag-as{background-position:-637px -116px}.mini-flag.flag-us{background-position:-477px -270px}.mini-flag.flag-pn{background-position:-685px -226px}
.mini-flag.flag-fj{background-position:-493px -160px}.mini-flag.flag-ad{background-position:-477px -116px}.mini-flag.flag-vc{background-position:-541px -270px}.mini-flag.flag-pw{background-position:-477px -237px}.mini-flag.flag-np{background-position:-477px -226px}.mini-flag.flag-bz{background-position:-477px -138px}.mini-flag.flag-jp{background-position:-701px -182px}.mini-flag.flag-mm{background-position:-669px -204px}.mini-flag.flag-gp{background-position:-493px -171px}
.mini-flag.flag-au{background-position:-669px -116px}.mini-flag.flag-et{background-position:-717px -149px}.mini-flag.flag-th{background-position:-493px -259px}.mini-flag.flag-dz{background-position:-589px -149px}.mini-flag.flag-br{background-position:-653px -127px}.mini-flag.flag-catalonia{background-position:-509px -138px}.mini-flag.flag-ls{background-position:-733px -193px}.mini-flag.flag-zm{background-position:-493px -281px}.mini-flag.flag-xk{background-position:-685px -270px}
.mini-flag.flag-py{background-position:-493px -237px}.mini-flag.flag-am{background-position:-573px -116px}.mini-flag.flag-scotland{background-position:-653px -237px}.mini-flag.flag-ck{background-position:-605px -138px}.mini-flag.flag-sy{background-position:-669px -248px}.mini-flag.flag-hk{background-position:-621px -171px}.mini-flag.flag-bt{background-position:-685px -127px}.mini-flag.flag-sh{background-position:-717px -237px}.mini-flag.flag-cr{background-position:-685px -138px}
.mini-flag.flag-gl{background-position:-717px -160px}.mini-flag.flag-lv{background-position:-509px -204px}.mini-flag.flag-sl{background-position:-509px -248px}.mini-flag.flag-rw{background-position:-589px -237px}.mini-flag.flag-mh{background-position:-621px -204px}.mini-flag.flag-vu{background-position:-621px -270px}.mini-flag.flag-ai{background-position:-541px -116px}.mini-flag.flag-mz{background-position:-605px -215px}.mini-flag.flag-gh{background-position:-685px -160px}
.mini-flag.flag-ie{background-position:-477px -182px}.mini-flag.flag-vn{background-position:-605px -270px}.mini-flag.flag-co{background-position:-669px -138px}.mini-flag.flag-za{background-position:-733px -270px}.mini-flag.flag-lc{background-position:-669px -193px}.mini-flag.flag-mw{background-position:-557px -215px}.mini-flag.flag-yt{background-position:-717px -270px}.mini-flag.flag-tg{background-position:-477px -259px}.mini-flag.flag-ml{background-position:-653px -204px}
.mini-flag.flag-ua{background-position:-701px -259px}.mini-flag.flag-tc{background-position:-701px -248px}.mini-flag.flag-is{background-position:-605px -182px}.mini-flag.flag-dk{background-position:-541px -149px}.mini-flag.flag-bs{background-position:-669px -127px}.mini-flag.flag-qa{background-position:-509px -237px}.mini-flag.flag-gw{background-position:-589px -171px}.mini-flag.flag-nc{background-position:-637px -215px}.mini-flag.flag-gs{background-position:-541px -171px}
.mini-flag.flag-nf{background-position:-669px -215px}.mini-flag.flag-be{background-position:-509px -127px}.mini-flag.flag-kurdistan{background-position:-573px -193px}.mini-flag.flag-km{background-position:-509px -193px}.mini-flag.flag-gt{background-position:-557px -171px}.mini-flag.flag-cf{background-position:-541px -138px}.mini-flag.flag-tj{background-position:-525px -259px}.mini-flag.flag-cu{background-position:-701px -138px}.mini-flag.flag-ga{background-position:-573px -160px}
.mini-flag.flag-es{background-position:-701px -149px}.mini-flag.flag-cg{background-position:-557px -138px}.mini-flag.flag-ki{background-position:-493px -193px}.mini-flag.flag-fi{background-position:-477px -160px}.mini-flag.flag-ca{background-position:-493px -138px}.mini-flag.flag-ru{background-position:-573px -237px}.mini-flag.flag-gb{background-position:-589px -160px}.mini-flag.flag-al{background-position:-557px -116px}.mini-flag.flag-um{background-position:-733px -259px}
.mini-flag.flag-bn{background-position:-621px -127px}.mini-flag.flag-cw{background-position:-733px -138px}.mini-flag.flag-ee{background-position:-621px -149px}.mini-flag.flag-cn{background-position:-653px -138px}.mini-flag.flag-hr{background-position:-669px -171px}.mini-flag.flag-ba{background-position:-733px -116px}.mini-flag.flag-mx{background-position:-573px -215px}.mini-flag.flag-ky{background-position:-605px -193px}.mini-flag.flag-ve{background-position:-557px -270px}
.mini-flag.flag-nl{background-position:-717px -215px}.mini-flag.flag-do{background-position:-573px -149px}.mini-flag.flag-pg{background-position:-605px -226px}.mini-flag.flag-bj{background-position:-589px -127px}.mini-flag.flag-dj{background-position:-525px -149px}.mini-flag.flag-bw{background-position:-717px -127px}.mini-flag.flag-ph{background-position:-621px -226px}.mini-flag.flag-zw{background-position:-509px -281px}.mini-flag.flag-im{background-position:-525px -182px}
.mini-flag.flag-pa{background-position:-557px -226px}.mini-flag.flag-pe{background-position:-573px -226px}.mini-flag.flag-fk{background-position:-509px -160px}.mini-flag.flag-ch{background-position:-573px -138px}.mini-flag.flag-sx{background-position:-653px -248px}.mini-flag.flag-sk{background-position:-493px -248px}.mini-flag.flag-af{background-position:-509px -116px}.mini-flag.flag-gn{background-position:-477px -171px}.mini-flag.flag-hm{background-position:-637px -171px}
.mini-flag.flag-bg{background-position:-541px -127px}.mini-flag.flag-de{background-position:-509px -149px}.mini-flag.flag-tz{background-position:-685px -259px}.mini-flag.flag-an{background-position:-589px -116px}.mini-flag.flag-somaliland{background-position:-573px -248px}.mini-flag.flag-mp{background-position:-717px -204px}.mini-flag.flag-pf{background-position:-589px -226px}.mini-flag.flag-mn{background-position:-685px -204px}.mini-flag.flag-jo{background-position:-685px -182px}
.mini-flag.flag-lt{background-position:-477px -204px}.mini-flag.flag-ma{background-position:-541px -204px}.mini-flag.flag-ws{background-position:-669px -270px}
/* Mini Flag End */
/* Other Styles */
@media (max-width: 768px)
{
.bg-f0-mobile{
background-color: #F0F0F0;
}
}
.special-title{
color: #e7ba27;
margin: 15px 0 0 0;
padding: 0;
font-size: 30px;
text-align: center;
display: block;
}
.special-title2{
color: #e7ba27;
margin: 5px 0;
padding: 0;
font-size: 23px;
text-align: center;
display: block;
}
.special-title2.mobile{
color: #000000;
margin: 12px 0;
padding: 0;
font-size: 20px;
text-align: center;
display: block;
}
.special-title-right{
color: #e7ba27;
margin: 15px 0 0 0;
padding: 0;
font-size: 30px;
text-align: right;
display: block;
}
@media (max-width: 768px){
.special-title-right{
margin: 5px 0 !important;
font-size: 18px;
}
}
.title-div{
color: #b5b5b5;
padding: 10px 0;
font-size: 12px;
}
.title-div .more{
background: #f0f0f0;
padding: 2px 20px;
border-radius: 30px;
color: #212529;
font-size: 12px;
float: left;
}
.title-div .more:hover{
background: #CCC;
}
.title-div svg, .braedcrumb-box svg{
margin: 0 5px;
display: inline-block;
width: 12px;
height: 12px;
}
.brand-logo-container{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.brand-logo{
width: 110px;
flex-basis: 110px;
margin: 10px 17px;
padding: 0px;
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
display: inline-block;
}
@media (max-width: 768px)
{
.brand-logo{
width: 30%;
flex-basis: 30%;
margin: 1.5%;
}
}
.brand-logo:hover{
transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
.brand-logo img{
width: 110px;
height: 110px;
border-radius: 30px;
border: 1px #b5b5b5 solid;
object-fit: cover;
}
.brand-logo h3{
margin: 0;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.brand-logo span{
color: #000;
line-height: 20px;
max-height: 40px;
font-size: 13px;
text-align: center;
display: block;
overflow: hidden;
}
@media (max-width: 768px){
.brand-logo img{
object-fit: cover;
border-radius: 20px;
margin: 0 auto;
display: block;
}
.brand-logo span{
color: #000;
line-height: 15px;
max-height: 30px;
font-size: 11px;
text-align: center;
display: block;
overflow: hidden;
}
}
.part-header{
position: relative;
margin-bottom: 10px;
}
.part-header::after{
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: 0;
content: "";
background-color: #dfdfdf;
}
.more-btn{
color: #6b6b6b;
position: absolute;
left: 0;
top: 3px;
font-size: 17px;
font-weight: 300;
}
.more-btn svg{
vertical-align: baseline;
margin-right: 8px;
fill: #444;
width: 14px;
height: 14px;
}
.part-header h2{
color: #444;
font-size: 21px;
font-weight: 400;
margin: 0;
text-align: right;
display: inline-block;
position: relative;
padding: 0 0 10px;
}
.part-header a.more{
font-size: 14px;
margin: 0px;
color: #6c6c6c;
position: absolute;
left: 0;
bottom: 13px;
opacity: 1;
}
.part-header a.more svg{
margin-left: 10px;
vertical-align: sub;
fill: #6c6c6c;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.part-header a.more:hover{
color: #10bba0;
}
.part-header a.responsive-more:hover svg{
fill: #10bba0;
}
.part-header a.more:hover svg{
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
fill: #10bba0;
}
.part-header a.responsive-more{
vertical-align: sub;
font-size: 30px;
position: absolute;
left: 0;
top: 5px;
opacity: 0;
color: #6c6c6c;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.show-more-wrapper{
position: relative;
padding-bottom: 25px;
}
.show-more{
position: relative;
max-height: 200px;
overflow: hidden;
border-bottom: 1px #10bba0 solid;
border-radius: 5px;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.show-more::after{
content: "";
position: absolute;
bottom:0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(to bottom, rgba(245, 245, 245,0) 0%,rgba(245, 245, 245,1) 90%);
}
.show-more2 p a{
border-bottom: 1px #299d95 dashed;
color: #299d95;
padding: 0 4px;
}
.show-more2 p{
text-align: justify;
font-size: 17px;
}
.show-more2{
position: relative;
max-height: 1000px;
overflow: hidden;
border-bottom: 1px #10bba0 solid;
border-radius: 5px;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.show-more2::after{
content: "";
position: absolute;
bottom:0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(to bottom, rgba(245, 245, 245,0) 0%,rgba(245, 245, 245,1) 90%);
}
.show-more-btn{
position: absolute;
bottom: -10px;
left: 50%;
height: 36px;
transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
background: #10bba0;
color: #FFF;
border-radius: 0 0 5px 5px;
padding: 3px 10px;
font-size: 12px;
z-index: 1;
cursor: pointer;
}
.show-more-btn:hover{
background: #579b95;
}
.show-more-wrapper.disabled{
padding-bottom: 0;
}
.show-more-wrapper.more .show-more::after, .show-more-wrapper.disabled .show-more::after, .show-more-wrapper.more .show-more2::after, .show-more-wrapper.disabled .show-more2::after{
display: none;
}
.show-more-wrapper.disabled .show-more, .show-more-wrapper.disabled .show-more2{
border-bottom: none;
}
.show-more-wrapper.disabled .show-more-btn{
display: none;
}
.show-more-wrapper.v2 .show-more{
max-height: 125px;
border-bottom: none !important;
border-radius: 0 !important;
}
.show-more-wrapper.v2 .show-more::after{
background: linear-gradient(to bottom, rgba(255, 255, 255,0) 0%,rgba(255, 255, 255,1) 90%) !important;
}
.show-more-wrapper.v2 .show-more-btn{
position: absolute !important;
bottom: 3px !important;
right: 0 !important;
left: unset !important;
transform: translateX(0%) !important;
-o-transform: translateX(0%) !important;
-ms-transform: translateX(0%) !important;
-moz-transform: translateX(0%) !important;
-webkit-transform: translateX(0%) !important;
background: transparent !important;
color: #8a8d95 !important;
border-radius: 0 !important;
font-size: 12px !important;
}
.show-more-wrapper.v2 .show-more-btn:hover{
background: #f766a6;
}
.show-more-wrapper.v3 .show-more{
max-height: 125px;
border-bottom: none !important;
border-radius: 0 !important;
}
.show-more-wrapper.v3 .show-more::after{
background: linear-gradient(to bottom, rgba(255, 255, 255,0) 0%,rgba(255, 255, 255,1) 90%) !important;
}
.show-more-wrapper.v3 .show-more-btn{
position: absolute !important;
bottom: 3px !important;
left: 50% !important;
transform: translateX(-50%) !important;
-o-transform: translateX(-50%) !important;
-ms-transform: translateX(-50%) !important;
-moz-transform: translateX(-50%) !important;
-webkit-transform: translateX(-50%) !important;
background: #FFF !important;
border: 1px #eeeff1 solid;
color: #8a8d95 !important;
border-radius: 0 !important;
font-size: 17px !important;
padding: 5px 15px !important;
}
.show-more-wrapper.v3 .show-more-btn:hover{
background: #f766a6;
}
.show-more-wrapper.v4 .show-more{
max-height: 125px;
border-bottom: none !important;
border-radius: 0 !important;
}
.show-more-wrapper.v4 .show-more::after{
content: none !important;
}
.show-more-wrapper.v4 .show-more-btn{
position: absolute !important;
bottom: 3px !important;
right: 0 !important;
left: unset !important;
transform: translateX(0%) !important;
-o-transform: translateX(0%) !important;
-ms-transform: translateX(0%) !important;
-moz-transform: translateX(0%) !important;
-webkit-transform: translateX(0%) !important;
background: transparent !important;
color: #8a8d95 !important;
border-radius: 0 !important;
font-size: 12px !important;
}
.show-more-wrapper.v4 .show-more-btn:hover{
background: #f766a6;
}
.hscroll{
white-space: nowrap;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
will-change: auto;
}
.hscroll *{
white-space: normal;
}
.manage-icon{
width: 24px;
height: 24px;
color: #000;
fill: #000;
font-size: 21px;
text-align: center;
vertical-align: middle;
cursor: pointer;
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
.manage-icon:hover{
transform: scale(1.15);
-o-transform: scale(1.15);
-ms-transform: scale(1.15);
-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);
}
.manage-icon .icon-text{
font-size: 15px;
line-height: 24px;
font-weight: 300;
text-shadow: 0 0 1px #000;
}
.manage-icon.orange-icon{
color: #ff8e00 !important;
fill: #ff8e00 !important;
}
.manage-icon.grey-icon{
color: #898989 !important;
fill: #898989 !important;
}
.manage-icon.purple-icon{
color: #9a56a5 !important;
fill: #9a56a5 !important;
}
.manage-icon.gold-icon{
color: #daa520 !important;
fill: #daa520 !important;
}
.manage-icon.green-icon{
color: #02ac02 !important;
fill: #02ac02 !important;
}
.manage-icon.red-icon{
color: #E43434 !important;
fill: #E43434 !important;
}
.manage-icon.blue-icon{
color: #004c9e !important;
fill: #004c9e !important;
}
.manage-icon.move{
cursor: move;
}
.manage-icon.move:hover{
transition: transform 0.5s ease-in-out;
-moz-transition: transform 0.5s ease-in-out;
-webkit-transition: transform 0.5s ease-in-out;
transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.special-box{
background: #10bba0;
color: #FFF;
font-size: 16px;
}
.special-box2{
font-size: 18px;
color: #000;
border-bottom: 1px solid #dfdfdf;
font-weight: 400;
line-height: 24px;
padding: 10px 5px;
}
.gateway-image{
height: 25px;
margin-left: 10px;
vertical-align: middle;
}
.learn-banner{
margin: 10px 0;
}
.learn-banner img{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
@media (min-width: 992px){
.padding-right-0-md{
padding-right: 0px !important;
}
}
.fixedError{
display: none;
background: rgba(255, 0, 0, 0.85);
text-align: center;
font-size: 14px;
color: #FFF;
padding: 5px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 10000;
}
#fixedHeader{
position: relative;
}
#fixedHeader.sticky{
position: fixed;
right: 0;
left: 0;
top: 0;
width: 100%;
z-index: 9998;
}
.hscroll{
white-space: nowrap;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
will-change: auto;
margin: 0 -5px;
}
.hscroll *{
white-space: normal;
}
.itm.mobile{
width: 150px;
padding-left: 10px;
display: inline-block;
}
.jqsearch input{
width: 100%;
/* margin: -15px auto 25px auto; */
display: block;
font-size: 24px;
text-align: center;
border: 1px #CCC solid;
line-height: 37px;
}
@media (max-width: 768px){
.jqsearch input{
font-size: 16px;
line-height: 30px;
border: none;
border-bottom: 1px #CCC solid;
background: #FFF;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
}
.profile-search-form{
background: #f5f5f5;
border-radius: 5px;
border: 1px #CCC solid;
padding: 10px;
}
.profile-search-form h4{
margin-top: 0;
color: #10bba0;
font-size: 24px;
border-bottom: 1px #10bba0 solid;
padding-bottom: 10px;
}
.profile-search-form p{
margin-top: 5px;
margin-bottom: 5px;
}
.profile-big-icon{
width: 30px;
height: 60px;
float: right;
margin: 10px;
}
.grey-bg{
background: #F0F0F0;
padding: 20px;
border-radius: 10px;
border: 1px #dfdfdf solid;
}
.customOrderTable{
user-select: none; /* standard syntax */
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
.customOrderTable th, .customOrderTable td{
padding: 3px !important;
vertical-align: middle !important;
line-height: 25px !important;
}
.imagePickerDiv{
position: relative;
}
.imagePickerDiv .img-container{
position: relative;
width: 100%;
height: 0;
padding-bottom:100%;
background: #F0F0F0;
}
.imagePickerDiv .img-container img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-image: url('/templates/BazareTala/images/photo.png');
background-size: contain;
}
.imagePickerDiv .remove-image{
position: absolute;
top: 10px;
left: 10px;
width: 40px;
height: 40px;
background: rgba(200, 0, 0, 0.5);
color: #FFF;
text-align: center;
padding: 8px;
font-size: 24px;
line-height: 24px;
display: none;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: 0 0 6px -2px #000;
-moz-box-shadow: 0 0 6px -2px #000;
-webkit-box-shadow: 0 0 6px -2px #000;
z-index: 1;
}
.imagePickerDiv:hover .remove-image{
display: inline-block;
}
@media (max-width: 992px){
.imagePickerDiv .remove-image{
display: inline-block !important;
}
}
.custom-file-upload{
border: 1px solid #b5b5b5;
display: inline-block;
padding: 5px 12px;
margin: 5px 0 15px 0;
width: 100%;
text-align: center;
background: #FAFAFA;
color: #000;
font-size: 13px;
line-height: 20px;
height: 30px;
overflow: hidden;
cursor: pointer;
}
.custom-file-upload input{
display: none;
}
.custom-file-upload img{
width: 100%;
height: 100%;
object-fit: cover;
}
.custom-file-upload.custom2{
background: #FFF;
height: 34px;
vertical-align: middle;
margin: 0;
border-radius: 5px;
border: 1px #999999 solid;
line-height: 23px;
}
.custom-file-upload.custom2::before{
content: "";
display: none;
}
.box .head{
position: relative;
background: #FFF;
color: #6a6a6a;
padding: 0;
margin: 0;
/* border-bottom: 1px #dfdfdf solid; */
border-bottom: none;
}
.box .head2{
background: #10bba0;
color: #fff;
padding: 10px;
margin: 0;
border: 1px #dfdfdf solid;
}
.box .head2 h1.title{
color: inherit;
padding: 0;
margin: 0;
font-size: 18px;
line-height: 25px;
}
@media(max-width: 768px){
.box .head2 h1.title{
font-size: 16px !important;
line-height: 25px !important;
}
}
.box .head2 h1.title{
color: inherit;
padding: 0;
margin: 0;
font-size: 18px;
line-height: 25px;
}
.box .head2 h1.title a:hover{
color: #FFF !important;
}
.manage-order{
text-align: left;
}
.manage-order .btn{
margin: 5px;
font-size: 14px !important;
padding: 10px;
}
.manage-order .btn:hover svg{
fill: #fff;
}
.manage-order .btn-info{
color: #fff !important;
background-color: #383f46 !important;
border-color: #383f46 !important;
}
.manage-order .btn-info:hover{
color: #fff !important;
background-color: #558985 !important;
border-color: #558985 !important;
}
.manage-order .btn-info:hover svg{
fill: #fff;
}
.manage-order .btn-alert{
color: #fff !important;
background-color: orange !important;
border-color: orange !important;
}
.manage-order .btn-alert:hover{
color: #fff !important;
background-color: #df9000 !important;
border-color: #df9000 !important;
}
.manage-order .btn-alert:hover svg{
fill: #fff;
}
.bug-report-bar{
padding: 10px 0;
text-align: center;
}
.bug-report-bar p{
color: #000;
line-height: 30px;
margin: 0;
display: inline-block;
font-weight: 300;
font-size: 13px;
}
.bug-report-bar .bugReportBtn{
color: #FFF;
background: #212529;
padding: 5px 15px;
margin-right: 10px;
border-radius: 30px;
display: inline-block;
font-weight: 100;
}
.bug-report-bar .bugReportBtn svg{
fill: #FFF;
width: 18px;
height: 18px;
margin-left: 5px;
}
.bug-report-bar .bugReportBtn:hover, .bug-report-bar .bugReportBtn:active{
color: #FFF;
background: #558985;
}
.bug-report-bar .bugReportBtn:hover svg{
fill: #FFF;
}
@media(max-width: 768px){
.bug-report-bar p{
line-height: 24px;
font-size: 13px;
}
.bug-report-bar .bugReportBtn{
margin: 0;
}
}
#more p a:not([class]), #more li a:not([class]){
border-bottom: 1px #299d95 dashed;
color: #299d95;
padding: 0px 4px
}
#more h2, #more h2 strong, #more .h2, #more .h2 strong{
font-size: 20px;
font-weight: 700;
line-height: 30px;
color: #053930;
display: block;
}
#more h3, #more h3 strong, #more .h3, #more .h3 strong{
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: #053930;
display: block;
}
#more h4, #more .h4{
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: #053930;
display: block;
}
#more table{
border: 1px solid #E0E4E8;
margin-bottom: 20px;
width: 100%;
max-width: 100%;
}
#more ul{
padding-right: 20px;
}
/*
#more table > tbody > tr:nth-child(1){
color: #FFF;
background: #333 !important;
}
*/
#more table > tbody > tr:nth-of-type(2n){
background: #fff;
}
#more table > tbody > tr:nth-of-type(2n+1){
background: #f9f9f9;
}
#more table th, #more table td{
text-align: center;
vertical-align: middle;
padding: 8px 4px;
line-height: 1.42857143;
border-top: 1px solid #ddd;
}
#more table td{
border-left: 1px solid #ddd;
}
#more table td:last-child{
border-left: none;
}
#more .table th{
color: #FFF;
background: #333;
}
#more .table td{
border-left: 1px solid #ddd;
}
#more .table td:last-child{
border-left: none;
}
#more .table p{
margin-bottom: 0px;
}
.etabs{
display: flex;
justify-content: space-around;
list-style: none;
background: #F0F0F0;
margin: 15px 0;
}
.etabs li{
flex-grow: 1;
}
.etabs li a{
color: #000 !important;
width: 100%;
padding: 20px 0;
font-size: 16px;
border-bottom: 3px #CCC solid;
text-align: center;
display: block;
}
.etabs li:hover a{
background: #FFF;
border-bottom: 3px #333 solid;
}
.etabs li.active a{
background: #dfdfdf;
border-bottom: 3px #10bba0 solid;
}
.etabs3{
position: relative;
margin: 10px auto;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px #b5b5b5 solid;
border-radius: 40px;
text-align: center;
overflow: hidden;
}
.etabs3 li{
width: 100px;
background: #fafafa;
color: #333;
font-size: 15px;
border-left: 1px #b5b5b5 solid;
padding: 0 !important;
margin: 0;
display: inline-block;
list-style: none;
text-align: center !important;
}
.etabs3 li:last-child{
border-left: none;
}
.etabs3 li a{
font-size: inherit;
display: inline-block;
padding: 10px 10px !important;
}
.etabs3 li:hover{
background: #F0F0F0;
}
.etabs3 li.active{
color: #FFF;
background: #10bba0 !important;
}
.etabs3 li.active a{
color: #FFF;
}
.custom-h3{
text-align: center !important;
font-size: 18px !important;
font-weight: 400 !important;
margin: 0 0 10px 0 !important;
}
@media(max-width: 768px){
.etabs3 li{
width: 75px;
font-size: 13px;
}
.custom-h3{
font-size: 14px !important;
}
.width-xs-100{
width: 100px !important;
}
}
.install-app-bar{
width: 100%;
background: #10bba0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
z-index: 100;
}
.install-app-bar.fixed{
position: fixed;
bottom: 50px;
left: 0;
display: none;
}
.install-app-bar img{
width: 50px;
height: 50px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.install-app-bar p{
color: #FFF;
font-weight: 600;
font-size: 16px;
margin: 0;
letter-spacing: -1px;
}
.install-app-bar svg{
background: #FFF;
fill: #000;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 15px;
}
.install-app-bar .close{
opacity: 0.7 !important;
}
.install-app-bar2{
width: 100%;
background: #FAFAFA;
border-top: 1px #ededed solid;
display: block;
padding: 5px 10px;
text-align: center;
z-index: 100;
}
.install-app-bar2.fixed{
position: fixed;
bottom: 50px;
left: 0;
display: none;
}
.install-app-bar2 p{
color: #000;
font-size: 16px;
margin: 0;
line-height: 20px;
}
.install-app-bar2 .app-banner{
margin: 0px;
}
.install-app-bar2 .close{
opacity: 1 !important;
position: absolute;
top: 2px;
right: 5px;
}
#installAppModal .modal-dialog{
margin: 8px;
height: 98%;
}
#installAppModal .modal-dialog .modal-content{
height: 100%;
background: rgb(51 51 51 / 95%);
color: #FFF;
line-height: 30px;
font-size: 15px;
}
#installAppModal .modal-dialog .modal-content .modal-body{
padding: 0 20px;
}
#installAppModal .modal-dialog::after{
position: absolute;
content: " ";
width: 0px;
height: 0px;
border-left-width: 13px;
border-left-style: solid;
border-left-color: transparent;
border-right-width: 13px;
border-right-style: solid;
border-right-color: transparent;
border-top-width: 13px;
border-top-style: solid;
border-top-color: rgb(255, 255, 255);
bottom: -11px;
left: 50%;
transform: translateX(-50%);
display: none;
}
#installAppModal .close{
position: absolute;
top: 0;
right: 0;
opacity: 1 !important;
color: #ff5959 !important;
text-shadow: none !important;
}
#installAppModal{
z-index: 1000000 !important;
}
#installAppModal ul{
list-style: none;
margin-bottom: 10px;
}
#installAppModal .modal-subtitle{
text-align: center;
color: #0eb9ff;
margin-bottom: 10px;
}
#installAppModal .modal-logo{
padding: 10px;
margin: 0;
}
#installAppModal .modal-arrow{
padding: 0px;
margin: 0;
height: 90px;
}
#installAppModal .modal-heading{
color: #fff;
padding: 10px;
font-size: 18px;
text-align: center;
}
#installAppModal .cnt{
background: #666;
color: #fff;
padding: 10px;
border-radius: 20px;
}
#installAppModal img{
max-height: 150px;
border-radius: 10px;
}
.icon-ios{
position: relative;
display: inline-block;
width: 18px;
height: 22px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOC44NDIiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxOC44NDIgMjQiPjxkZWZzPjxzdHlsZT4uYXtmaWxsOiM0NTkxZmE7fTwvc3R5bGU+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05Ljc2NiA4MC44NTkpIj48cGF0aCBjbGFzcz0iYSIgZD0iTTE5LjE5My02NS4xNzlhLjc1NC43NTQsMCwwLDAsLjc1My0uNzI1Vi03Ny4xOTJsLS4wNjgtMS41NzQuODQ4Ljg3NiwxLjcyNCwxLjgwNmEuNzA3LjcwNywwLDAsMCwuNTIuMjMzLjY2Ni42NjYsMCwwLDAsLjY4NC0uNjcuNjYyLjY2MiwwLDAsMC0uMjE5LS40OTNsLTMuNjk0LTMuNmEuNzE0LjcxNCwwLDAsMC0uNTQ3LS4yNDYuNzE0LjcxNCwwLDAsMC0uNTQ3LjI0NmwtMy43MDgsMy42YS42NjIuNjYyLDAsMCwwLS4yMTkuNDkzLjY1OC42NTgsMCwwLDAsLjY4NC42Ny43My43MywwLDAsMCwuNTItLjIzM2wxLjcyNC0xLjgwNi44NDgtLjg4OS0uMDU1LDEuNTg3Vi02NS45QS43NDUuNzQ1LDAsMCwwLDE5LjE5My02NS4xNzlabS02LjE3MSw4LjMxOUgyNS4zMzdjMi4xNzYsMCwzLjI3LTEuMDgxLDMuMjctMy4yMTZWLTcwLjkxMmMwLTIuMTIxLTEuMDk1LTMuMjE1LTMuMjctMy4yMTVoLTMuMDF2MS41MTlIMjUuMzFhMS42LDEuNiwwLDAsMSwxLjc3OSwxLjc3OXYxMC42NzNhMS42LDEuNiwwLDAsMS0xLjc3OSwxLjc3OUgxMy4wNWExLjU4NywxLjU4NywwLDAsMS0xLjc2NS0xLjc3OVYtNzAuODNhMS41ODcsMS41ODcsMCwwLDEsMS43NjUtMS43NzloMy4wMXYtMS41MTlIMTMuMDIyYy0yLjE2MiwwLTMuMjU3LDEuMDgxLTMuMjU3LDMuMjE1djEwLjgzN0M5Ljc2Ni01Ny45NCwxMC44Ni01Ni44NTksMTMuMDIyLTU2Ljg1OVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+PC9nPjwvc3ZnPg==);
background-size: 16px;
top: 3px;
margin: 0 7px;
filter: brightness(5);
background-repeat: no-repeat;
}
/* advanced-login-div */
.advanced-login-div{
padding: 10px;
}
.advanced-login-div.absolute{
background: #FFF;
width: 380px;
max-width: 90%;
border: 1px solid #ededed;
border-radius: 8px;
padding: 10px 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.advanced-login-div .login-logo{
height: 40px;
margin: 10px auto 30px auto;
display: block;
}
.advanced-login-div h1{
font-size: 20px;
font-weight: 600;
}
.advanced-login-div label{
font-size: 12px;
line-height: 20px;
color: #62666d;
margin-bottom: 8px;
}
.advanced-login-div .form-control{
padding: 9px 12px;
border-radius: 8px;
background-color: #fff;
border: 1px solid #e0e0e2;
font-size: 14px;
line-height: 24px;
width: 100%;
color: #030a16;
}
.advanced-login-div .form-control::placeholder{
font-size: 13px;
color: #999;
text-align: right;
}
.advanced-login-div .close{
z-index: 1;
position: absolute;
top: 20px;
left: 25px;
font-size: 30px;
opacity: 1;
color: #555;
}
.advanced-login-div.absolute .close{
top: 10px;
left: 15px;
}
.advanced-login-div .btn-login{
background: #394047;
color: #FFF;
fill: #FFF;
font-size: 14px;
padding: 12px;
margin-bottom: 15px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-top: 10px;
}
.advanced-login-div .google-btn{
color: #FFF;
font-size: 14px;
padding: 0;
margin-bottom: 15px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
.advanced-login-div .code-input-form-group::after{
content: "______";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
height: 0px;
line-height: 0px;
color: #CCC;
font-size: 34px;
font-weight: 300;
letter-spacing: 10px;
padding-left: 15px;
z-index: 1;
}
.advanced-login-div .code-input{
position: relative;
/* width: 150px; */
display: block;
margin: 10px auto;
text-align: center;
font-size: 24px;
letter-spacing: 10px;
padding-left: 15px !important;
height: 60px;
background: transparent !important;
z-index: 2;
}
.advanced-login-div .goback{
position: absolute;
top: 25px;
right: 20px;
color: #444;
fill: #444;
font-size: 22px;
}
.advanced-login-div .goback svg{
color: inherit !important;
fill: inherit !important;
font-size: inherit !important;
}
.advanced-login-div a{
color: #0fabc6;
font-size: 12px;
}
.advanced-login-div a:hover{
color: #076f81;
}
.advanced-login-div a svg{
width: 10px;
height: 10px;
}
.advanced-login-div .new-btn{
padding: 10px;
border-top: 1px #dfdfdf solid;
border-bottom: 1px #dfdfdf solid;
color: #000;
}
.advanced-login-div .new-btn svg{
width: 25px;
height: 25px;
margin-left: 10px;
}
.advanced-login-div .sendOTPCode{
color: #000000;
font-size: 15px;
margin: 15px 0;
}
.advanced-login-div .sendOTPCode svg{
fill: #0062db;
width: 20px;
height: 20px;
}
.advanced-login-div .google-btn{
color: #FFF !important;
font-size: 13px;
padding-left: 45px;
}
.advanced-login-div .google-btn svg{
fill: #FFF;
width: 22px;
height: 22px;
}
.advanced-login-div .selectAccountBtn{
position: relative;
color: #000;
font-size: 12px;
background: #f1f1f1;
padding: 15px 0;
margin: 6px 3px;
display: inline-block;
width: 95px;
vertical-align: middle;
border-radius: 15px;
border: 2px #f1f1f1 solid;
box-shadow: 0 5px 5px -3px #CCC;
}
.advanced-login-div .selectAccountBtn:hover{
color: #076f81;
background: #FFF;
}
.advanced-login-div .selectAccountBtn span{
color: #888;
font-size: 10px;
height: 20px;
line-height: 20px;
overflow: hidden;
display: block;
}
.advanced-login-div .selectAccountBtn.disabled{
filter: grayscale(1) opacity(0.5);
}
.advanced-login-div .selectAccountBtn.disabled::after{
content: " ";
position: absolute;
top: 50%;
right: 0;
background: red;
width: 100%;
height: 1px;
transform: rotate(-25deg);
}
.advanced-login-div .goToRegisterBtn{
background: #394047;
color: #FFF;
padding: 10px;
font-size: 14px;
text-align: center;
border: 1px #394047 solid;
border-radius: 0px;
display: block;
}
.advanced-login-div .goToRegisterBtn:hover{
background: #558985 !important;
color: #FFF !important;
}
#registerForm .form-group{
margin: 0px !important;
}
#registerForm label{
margin-top: 3px;
margin-bottom: 0;
}
#registerForm .register-input.error{
background: #ffe2e2;
border-color: #ff8989;
}
#registerForm #croppedImage{
width: 100%;
height: 100%;
}
#registerForm .custom-file-upload.big{
height: 100px;
width: 100px;
padding: 0;
border-radius: 20px;
}
#registerForm .custom-file-upload.big svg{
width: 36px;
height: 36px;
margin-bottom: 10px;
}
@media (max-width: 768px){
.advanced-login-div{
position: relative !important;
top: unset !important;
left: unset !important;
transform: unset !important;
margin: 20px auto !important;
}
}
/* end of advanced-login-div */
#addProductForm .form-group label{
display: block;
}
body.dont-show-pwa-bar .install-app-bar, body.dont-show-pwa-bar .install-app-bar2{
display: none !important;
}
body.show-pwa-bar-upper .install-app-bar, body.show-pwa-bar-upper .install-app-bar2{
bottom: 110px !important;
}
@media(max-width: 768px){
body.show-pwa-bar-upper .footer{
padding: 20px 0 70px 0 !important;
}
}
.images-placeholder{
background: #FFF;
margin-bottom: 10px;
border-radius: 10px;
}
.image-thumb{
position: relative;
background: #FFF;
width: 75px;
height: 75px;
margin: 5px;
border-radius: 10px;
border: 1px #555 dashed;
display: inline-block;
transition: transform 0.5s ease-in-out;
overflow: hidden;
z-index: 20;
}
.image-thumb:hover{
transform: scale(3);
-ms-transform: scale(3);
-moz-transform: scale(3);
-webkit-transform: scale(3);
z-index: 21;
}
@-webkit-keyframes progress-bar-stripes{
from{
background-position: 40px 0;
}
to{
background-position: 0 0;
}
}
@keyframes progress-bar-stripes{
from{
background-position: 40px 0;
}
to{
background-position: 0 0;
}
}
.image-thumb.processing::after{
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
background-size: 40px 40px;
background-color: #FF0000;
content: " ";
width: 70%;
height: 5px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 5px;
z-index: 21;
transform: translate(-50%, -50%);
-webkit-animation: progress-bar-stripes 1s linear infinite;
-o-animation: progress-bar-stripes 1s linear infinite;
animation: progress-bar-stripes 1s linear infinite;
}
.image-thumb img{
width: 100%;
height: 100%;
object-fit: cover;
}
@media(max-width: 768px){
.images-placeholder{
text-align: center;
}
}
.search-loading{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 300px;
background: rgb(0 0 0 / 50%);
padding: 10px 10px 20px 10px;
border-radius: 15px;
z-index: 1000;
display: none;
}
.search-flex{
display: flex;
flex-direction: row;
padding: 10px;
}
.search-flex input{
flex-grow: 1;
margin-left: 5px;
margin-bottom: 0 !important;
}
.search-flex button{
padding: 0px !important;
height: 40px;
line-height: 36px;
width: 40px;
font-size: 18px;
margin-bottom: 0 !important;
}
.user-profile-sidebar.fixed{
position: fixed;
top: 0;
right: 0;
width: 340px;
background: #fff;
z-index: 10000;
border-radius: 0;
box-shadow: 0 0 10px 0px #333;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
transform: translateX(100%);
opacity: 0;
display: block;
transition: all 0.3s ease-in-out;
}
.user-profile-sidebar.sticky{
position: fixed;
z-index: 110;
width: calc(100% - 10px);
right: 0;
margin: 0 5px;
border-radius: 0;
margin-top: -1px;
}
.user-profile-sidebar .profile-photo-div{
position: relative;
width: 60px;
height: 60px;
border: 1px solid #b5b5b5;
border-radius: 15px;
margin-right: 10px;
overflow: hidden;
z-index: 10;
flex-shrink: 0;
}
@media (max-width: 768px){
.user-profile-sidebar .profile-photo-div{
float: right;
margin: 3px 0 3px 10px;
width: 50px;
height: 50px;
}
}
.user-profile-sidebar .profile-photo-div img{
width: 100%;
height: 100%;
object-fit: cover;
}
.user-profile-sidebar .profile-photo-div input{
display: none;
}
.user-profile-sidebar .profile-photo-div span{
position: absolute;
top: 0;
right: 0;
color: #FFF;
font-size: 14px;
background: rgb(0 0 0 / 50%);
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 2;
display: none;
flex-direction: column;
}
.user-profile-sidebar .profile-photo-div span svg{
width: 30px;
height: 30px;
}
.user-profile-sidebar .profile-photo-div:hover span{
display: flex;
}
.upload-photo-div {
position: relative;
width: 60px;
height: 60px;
border: 1px solid #b5b5b5;
border-radius: 15px;
margin-right: 10px;
overflow: hidden;
z-index: 10;
flex-shrink: 0
}
@media (max-width: 768px) {
.upload-photo-div {
float:right;
margin: 3px 0 3px 10px;
width: 50px;
height: 50px
}
}
.upload-photo-div img {
width: 100%;
height: 100%;
object-fit: cover
}
.upload-photo-div input {
display: none
}
.upload-photo-div span {
position: absolute;
top: 0;
right: 0;
color: #FFF;
font-size: 14px;
background: rgb(0 0 0 / 50%);
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 2;
display: none;
flex-direction: column
}
.upload-photo-div span svg {
width: 30px;
height: 30px
}
.upload-photo-div:hover span {
display: flex
}
.FAQSearchDiv{
position: absolute;
top: 38%;
width: 40%;
right: 30%;
text-align: center;
}
.FAQSearchDiv svg{
position: absolute;
bottom: 10px;
left: 10px;
width: 21px;
height: 21px;
}
.FAQSearchDiv h2{
margin: 0 0 15px 0;
font-size: 30px !important;
font-weight: 300 !important;
}
#FAQSearch{
width: 100%;
border-radius: 5px !important;
font-size: 17px;
text-align: right;
padding: 10px !important;
}
.ask-question-link{
font-size: 13px;
}
.ask-question-link svg{
margin-left: 5px;
width: 16px;
height: 16px;
}
@media (max-width: 768px){
.FAQSearchDiv{
position: absolute;
top: 42%;
width: 50%;
right: 25%;
text-align: center;
}
#FAQSearch{
font-size: 13px;
padding: 5px !important;
}
.ask-question-link{
font-size: 11px;
}
.ask-question-link svg{
width: 13px;
height: 13px;
}
}
.white-bg-with-padding{
background: #FFF;
padding: 20px;
border-radius: 10px;
}
.gateway-btn{
background: #FAFAFA;
padding: 5px 10px;
margin-bottom: 10px;
border: 1px #dfdfdf solid;
border-radius: 5px;
display: block;
}
.gateway-btn input{
margin-left: 10px;
}
.subscription-status{
text-align: left;
background: #383F47;
padding: 10px;
border: 1px #000 solid;
border-radius: 10px;
color: #FFF;
font-size: 13px;
margin-top: -10px;
}
.subscription-status .flex{
flex-direction: row;
justify-content: space-between;
}
.subscription-status .remaining{
border-radius: 5px;
font-size: 12px;
color: #FFF;
}
.subscription-status .status span{
background: #ad2424;
border-radius: 5px;
font-size: 12px;
color: #FFF;
padding: 0 5px;
}
.subscription-status a{
background: #24AD6B;
margin-top: 10px;
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
color: #FFF;
font-size: 15px;
display: block;
text-align: center;
}
.subscription-status.subscribed .status span{
background: #24ad6b !important;
}
@media (max-width: 768px){
.subscription-status{
margin-top: 0px;
}
}
.s-error{
background: #d00d0d;
padding: 15px;
border-radius: 50px;
border: 1px #650000 solid;
color: #ffffff;
text-align: center;
margin: 50px auto;
width: 500px;
max-width: 100%;
}
.users-count{
text-align: center;
padding: 10px 30px;
margin: 20px 0;
background: #383f46;
border: 1px #e0e0e0 solid;
border-radius: 20px;
font-size: 18px;
display: inline-block;
color: #FFF;
}
.users-list-wrapper .user-item{
background: #FFF;
padding: 5px;
border-radius: 20px;
border: 1px #e0e0e0 solid;
font-size: 12px;
margin-bottom: 10px;
}
.users-list-wrapper .user-item img{
width: 50px;
height: 50px;
float: right;
border: 1px #c0c0c0 solid;
border-radius: 100px;
margin-left: 10px;
}
.users-list-wrapper .user-item span{
height: 20px;
line-height: 20px;
margin: 3px 0;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.users-list-wrapper .user-item span.date{
height: 20px;
line-height: 20px;
margin: 3px 0;
display: block;
color: #6c6c6c;
font-size: 11px;
}
.floating-button{
position: fixed;
bottom: 10px;
left: 10px;
width: 60px;
height: 60px;
background: #212529;
color: #d7bc40;
display: flex;
text-align: center;
font-size: 30px;
border-radius: 20px;
justify-content: center;
align-items: center;
z-index: 99;
}
.floating-button svg{
display: block;
width: 30px;
height: 30px;
}
.floating-button:hover{
background: #558985;
color: #d7bc40 !important;
}
.floating-button svg{
fill: #d7bc40;
}
.floating-button span{
color: #FFF;
background: #2cc743;
width: 24px;
height: 24px;
display: block;
border-radius: 10px;
font-size: 15px;
position: absolute;
top: -4px;
right: -4px;
}
.floating-button:hover span{
color: #FFF !important;
}
@media (max-width: 768px){
.floating-button{
bottom: 140px;
}
.separate-row{
display: block !important;
}
.separate-row::before{
display: none !important;
}
.hide-before::before{
display: none !important;
}
.hide-after::after{
display: none !important;
}
}
.hide-basket .floating-button{
display: none !important;
}
.gold-calculator{
position: relative;
background: #FFF;
width: 700px;
max-width: 100%;
padding: 30px;
border-radius: 20px;
margin: 0 auto;
box-shadow: 0 0 15px -7px #212529;
}
.gold-calculator .calculator-title{
border-bottom: 0;
border-radius: 10px;
padding: 5px 15px;
font-size: 17px;
text-align: right;
display: block;
}
.gold-calculator input{
width: 150px;
background: #eeeeee;
padding: 5px;
margin: 0 5px 15px 5px;
border-radius: 10px;
text-align: center;
letter-spacing: 1px;
border: none;
}
.gold-calculator input::placeholder{
color: #CCC;
letter-spacing: 0px;
font-size: 12px;
}
.gold-calculator label{
display: block;
font-size: 13px;
line-height: 10px;
color: #558985;
padding: 0 12px;
font-weight: 600;
}
.gold-calculator p{
margin: 20px 10px;
color: #454545;
font-size: 12px;
}
.gold-calculator .result-price{
background: #FFF;
padding: 10px;
margin-top: 25px;
font-size: 20px;
border-radius: 20px;
text-align: center;
border: 1px #cacaca solid;
}
@media (max-width:768px){
.gold-calculator{
padding: 10px;
}
}
.reygiri-table{
font-size: 12px;
}
.reygiri-table tr:nth-child(1) td{
background: #ececec;
padding: 0;
}
.reygiri-table tr:nth-child(2) td:nth-child(2){
color: red;
font-size: 14px;
font-weight: 400;
}
.box-text{
background: #212529;
min-width: 30px;
height: 30px;
display: inline-block;
vertical-align: middle;
color: #d7bc40;
text-align: center;
line-height: 25px;
border-radius: 10px;
padding: 2px 10px;
font-family: tahoma;
}
.info-box{
box-shadow: 0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);
border-radius: .25rem;
padding: 0.5rem;
min-height: 70px;
background: #fff;
display: flex;
margin-bottom: 10px;
}
.info-box-icon{
border-radius: .25rem;
display: block;
width: 60px;
text-align: center;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.info-box-content{
padding: 5px 10px;
display: flex;
justify-content: center;
align-items: start;
flex-direction: column;
flex-grow: 1;
}
.info-box-number{
display: block;
font-weight: 600;
}
.info-box-text{
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.melted-sidebar{
overflow: hidden;
padding: 0px;
color: #FFF;
margin-bottom: 15px;
}
.melted-sidebar .header{
padding: 10px 0;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.melted-sidebar .share-box{
color: #000;
text-align: center;
padding: 10px;
border-radius: 0;
border: none;
background: #FFF;
}
.melted-sidebar .share-box .flex{
justify-content: center;
align-items: center;
}
.melted-sidebar .share-box .rating{
text-align: center;
height: 40px;
width: 190px;
}
.melted-sidebar .share-box #shareIcons{
padding: 15px 0 0 0;
}
.melted-sidebar .share-box .jssocials-share{
margin: 2px !important;
}
.melted-sidebar .share-box .jssocials-share-link {
width: 36px !important;
}
@media (max-width: 768px){
.melted-sidebar .header{
height: auto;
position: fixed;
bottom: 50px;
left: 0;
width: 100%;
z-index: 3;
background: #FFF;
padding: 10px;
}
.melted-sidebar .share-box{
padding: 10px;
}
}
.melted-sidebar .header h2{
margin: 0;
line-height: 35px;
font-size: 15px;
margin-bottom: 10px;
text-align: center;
}
.melted-sidebar .header .btn{
background: #10bba0;
color: #FFF;
padding: 10px 20px;
border-radius: 10px;
font-size: 20px;
font-weight: 300;
display: inline-block;
text-align: center;
}
.melted-sidebar .header .btn1{
background: #10bba0;
}
.melted-sidebar .header .btn1:hover{
background: #0c937e;
}
.melted-sidebar .header .btn2{
background: #EAB71F;
flex-grow: 1;
}
.melted-sidebar .header .btn2:hover{
background: #ffa500;
}
.melted-sidebar .header .btn1 svg, .melted-sidebar .header .btn2 svg{
fill: #FFF;
}
.melted-sidebar .body{
background: #212529;
border-radius: 20px;
text-align: center;
padding: 10px;
}
.melted-sidebar .body h2{
margin: 0 0 20px 0;
line-height: 35px;
font-size: 25px;
text-align: center;
}
.melted-sidebar .body li{
color: #FFF;
text-align: right;
list-style: disc;
margin-right: 20px;
line-height: 30px;
}
.melted-sidebar .body li a:hover{
color: #eab71f;
}
.index-box{
background: #FFF;
margin: 15px;
padding: 15px;
border-radius: 20px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
}
.index-box > img{
flex-shrink: 0;
border-radius: 10px;
width: 150px;
margin: 0 0 0 10px;
}
.index-box > div{
flex-grow: 1;
}
.index-box h2, .index-box h3{
color: #212529;
margin: 0 0 15px 0;
}
.index-box p{
text-align: justify;
}
.melted-desc{
position: relative;
background-color: #F0F0F0;
margin-top: -100px;
padding-top: 70px;
z-index: 0;
}
@media (max-width: 768px){
.index-box{
flex-direction: column;
justify-content: start;
align-items: stretch;
}
.index-box > img{
width: 180px;
margin: 0 auto;
margin: 0 auto 10px auto;
}
#buy-chart-container, #sell-chart-container{
margin-top: 10px;
}
.melted-desc{
margin-top: 0;
padding-top: 0;
}
}
.trade-container{
background-color: #F0F0F0;
border-radius: 20px;
overflow: hidden;
}
.trade-header{
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 20px 20px 50px 20px;
margin-bottom: 50px;
}
.trade-header h1{
color: #FFF;
margin: 0 0 15px 0;
font-size: 18px;
line-height: 30px;
}
.trade-header.custom{
position: relative;
background: transparent;
margin-bottom: 0px;
padding: 10px;
z-index: 2;
}
.melted-header h1{
font-size: 21px;
color: #000;
margin: 15px 15px 15px 0px;
line-height: 30px;
}
.melted-header h1 span {
color: #E9B81F;
font-size: inherit;
}
.melted-header p{
font-size: 14px;
color: #000;
margin: 10px !important;
line-height: 24px;
}
.trade-header h1 span{
color: #E9B81F;
font-size: inherit;
}
.trade-header h2.active{
color: #10bba0;
margin: 0 0 15px 0;
}
.trade-header h2.deactive{
color: #e14343;
margin: 0 0 15px 0;
}
.trade-header h3{
color: #b3b3b3;
margin: 0 0 15px 0;
}
.trade-header h4{
color: #b3b3b3;
font-size: 13px;
margin-top: 20px;
line-height: 24px;
}
.trade-header h4 span{
color: #10bba0;
font-size: 15px;
}
.wallet-div{
display: flex;
justify-content: space-between;
align-items: center;
color: #000;
font-size: 14px;
margin: 0 0 10px 0;
}
.wallet-div svg{
fill: orange;
width: 40px;
height: 40px;
margin-left: 15px;
}
.wallet-div .white{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
background-color: #FFF;
border-radius: 5px;
padding: 5px;
}
.gbtn{
color: #FFF;
fill: #FFF;
background-color: #10bba0;
padding: 5px;
border-radius: 5px;
}
.gbtn:hover, .gbtn:active, .gbtn:focus{
color: #FFF;
background-color: #0c937e;
}
.gbtn:hover svg, .gbtn:active svg, .gbtn:focus svg{
fill: #FFF;
}
.grey-box{
display: flex;
justify-content: space-between;
align-items: center;
color: #FFF;
background-color: #3c3c3c;
font-size: 16px;
padding: 8px;
border-radius: 5px;
margin: 0 0 10px 0;
}
.flex-center{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
min-height: 250px;
}
.white-bar{
display: flex;
justify-content: space-between;
align-items: center;
background: #FFF;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
width: 100%;
}
.info-box2{
border-radius: 10px;
padding: 10px;
background: #fff;
display: inline-block;
text-align: center;
font-size: 20px;
position: absolute;
top: 0;
right: 50%;
transform: translateX(50%);
}
.info-box2 .info-box2-text{
display: block;
white-space: nowrap;
border-bottom: 1px #000 solid;
padding-bottom: 5px;
margin-bottom: 5px;
text-align: center;
}
.info-box2 .info-box2-number{
display: block;
white-space: nowrap;
text-align: center;
}
.gold-price-boxes{
position: absolute;
left: 15px;
top: 20px;
z-index: 1;
}
.info-box3 {
border-radius: 10px;
padding: 10px;
display: inline-block;
text-align: center;
font-size: 18px;
width: 190px;
margin: 0 5px;
}
.info-box3.green{
background: #D7F1EA;
}
.info-box3.red{
background: #FEE8E8;
}
.info-box3 .info-box3-text{
display: block;
white-space: nowrap;
border-bottom: 1px rgb(0 0 0 / 15%) solid;
padding-bottom: 5px;
margin-bottom: 5px;
text-align: center;
font-weight: 600;
}
.info-box3 .info-box3-number{
display: block;
white-space: nowrap;
text-align: center;
font-weight: 600;
}
.info-box3 .info-box3-number span{
font-weight: inherit !important;
}
@media (max-width: 1200px){
.info-box3 {
font-size: 16px;
width: 160px;
}
}
@media (max-width: 768px){
.gold-price-boxes {
position: relative;
left: unset;
top: unset;
display: flex;
justify-content: center;
align-items: center;
transform: scale(1);
margin: 0 auto;
text-align: center;
}
.info-box3 {
margin: 0 5px;
font-size: 18px;
width: 190px;
}
.melted-header h1{
font-size: 19px;
margin: 0 10px;
}
.melted-header p{
margin: 0 10px;
}
}
.green-color{
color: #10bba0;
}
.red-color{
color: #e01212;
}
.buy-sell-container{
padding: 0;
}
.buy-sell-container .buy{
background: #FFF;
padding: 20px;
border-radius: 10px;
text-align: center;
margin-bottom: 15px;
font-size: 15px;
}
.buy-sell-container .buy h4{
margin: 0 0 20px 0;
color: #008000;
font-size: 20px;
font-weight: 600;
}
.buy-sell-container .buy .balance{
margin: 0 0 20px;
color: #000;
font-size: 14px;
font-weight: 600;
display: block;
text-align: right;
margin-top: 10px;
}
.buy-sell-container .buy label{
color: rgba(0,0,0,0.5);
}
.buy-sell-container .buy input{
background: #f0f1f5;
margin: 0 0 10px 0;
border-radius: 5px !important;
font-size: 26px;
color: #008000;
letter-spacing: 1px;
border: none !important;
}
.buy-sell-container .buy button{
background: #0fc24a;
color: #FFF;
}
.buy-sell-container .buy button:hover{
background: rgba(0, 128, 0, 1);
color: #FFF;
}
.buy-sell-container .sell{
background: #FFF;
padding: 20px;
border-radius: 10px;
text-align: center;
margin-bottom: 15px;
font-size: 15px;
}
.buy-sell-container .sell h4{
margin: 0 0 20px 0;
color: #800000;
font-size: 20px;
font-weight: 600;
}
.buy-sell-container .sell .balance{
margin: 0 0 20px;
color: #000;
font-size: 14px;
font-weight: 600;
display: block;
text-align: right;
margin-top: 10px;
}
.buy-sell-container .sell label{
color: rgba(0,0,0,0.5);
}
.buy-sell-container .sell input{
background: #f0f1f5;
margin: 0 0 10px 0;
border-radius: 5px !important;
font-size: 26px;
color: #800000;
letter-spacing: 1px;
border: none !important;
}
.buy-sell-container .sell button{
background: #e11111;
color: #FFF;
}
.buy-sell-container .sell button:hover{
background: rgba(128, 0, 0, 1);
color: #FFF;
}
.buy-sell-container input.disabled{
color: #444;
background: rgba(0,0,0,0.2) !important;
cursor: pointer;
}
.buy-sell-container .use-all{
color: #fff;
font-size: 13px;
background: #d2ad04;
padding: 5px 15px;
border-radius: 5px;
}
.buy-sell-container .buyMessage, .buy-sell-container .sellMessage{
color: #000;
font-size: 12px;
line-height: 30px;
height: 30px;
}
.buy-sell-container .buyMessage span, .buy-sell-container .sellMessage span{
color: #10bba0;
}
.trade-header .buy-sell-container p{
margin: 0;
}
.trade-header .buy-sell-container ul li{
display: inline-block;
color: #212529;
background: #FFF;
padding: 5px 15px;
border-radius: 10px 10px 0 0;
border: 1px #212529 solid;
border-bottom: none;
}
.trade-header .buy-sell-container ul li:hover, .trade-header .buy-sell-container ul li.active{
color: #FFF;
background: #212529;
}
.trade-header .buy-sell-container .buy, .trade-header .buy-sell-container .sell{
background: #212529;
padding: 20px;
border-radius: 10px 0 10px 10px;
}
.trade-header .buy-sell-container .buy label, .trade-header .buy-sell-container .sell label{
color: #FFF;
}
.trade-header .buy-sell-container .buy button, .trade-header .buy-sell-container .sell button {
line-height: 20px;
border-radius: 10px !important;
}
.trade-header .buy-sell-container input{
background: #FFF;
border-radius: 10px !important;
}
.trade-header .buy-sell-container input.disabled{
background: #FFF !important;
}
.trade-header .buy-sell-container .buyMessage, .trade-header .buy-sell-container .sellMessage {
color: #fff;
font-size: 12px;
line-height: 30px;
height: 30px;
margin: 0;
}
.green-row td{
background: #deffe5;
}
.red-row td{
background: #ffdddd;
}
.btn-black-round{
color: #FFF;
background-color: #000;
border-radius: 30px;
padding: 3px 5px;
font-size: 12px;
}
.btn-black-round:hover, .btn-black-round:active, .btn-black-round:focus{
color: #FFF !important;
background-color: #333 !important;
}
.btn-tutorial{
color: #FFF;
fill: #FFF;
background: orange;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 5px;
padding: 10px;
}
.btn-tutorial:hover{
color: #FFF !important;
background: #cb8300;
}
.btn-tutorial:hover span, .btn-tutorial:hover svg{
fill: #FFF;
}
.btn-tutorial svg{
width: 40px;
height: 40px;
}
.dataTables_wrapper{
min-height: 500px;
}
.dataTable *{
border-color: #ececec !important;
}
.dataTable th{
background-color: #FFF !important;
padding-right: 20px;
font-size: 13px;
text-align: center !important;
vertical-align: middle !important;
}
.dataTable td{
background-color: #FFF !important;
text-align: center !important;
vertical-align: middle !important;
}
.dataTables_wrapper .dataTables_filter input{
width: 150px;
}
@media (max-width: 768px){
.trade-header h1{
font-size: 20px;
}
.wallet-div svg{
width: 30px;
height: 30px;
margin-left: 10px;
}
.wallet-div .white{
font-size: 13px;
}
.info-box2{
padding: 15px 10px;
font-size: 14px;
top: 20px;
}
.info-box3{
padding: 15px 10px;
font-size: 16px;
}
.flex-center{
min-height: auto;
}
.dataTables_wrapper{
min-height: auto;
}
.dataTable td{
font-size: 12px !important;
}
table.dataTable thead>tr>th{
padding-right: 20px !important;
font-size: 12px !important;
}
}
.input-group-addon:first-child{
border: 1px #CCC solid !important;
border-right: none !important;
border-bottom-right-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 4px !important;
border-top-left-radius: 4px !important;
}
.white-bg{
background: #FFF;
border-radius: 10px;
margin-bottom: 15px;
}
.main-image-box{
position: relative;
}
.main-image-box a{
background: transparent;
color: #d6bc41;
border: 1px #d6bc41 solid;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px;
font-size: 16px;
}
.main-image-box a:hover{
background: #d6bc41;
color: #fff;
}
.main-image-box p{
color: #fff;
font-size: 25px;
}
.main-image-box span{
color: #797979;
margin-bottom: 15px;
font-size: 22px;
}
.main-image-box .title-box{
position: absolute;
left: 50px;
top: 50%;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
transform: translate(0,-50%);
}
.advantage-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 15px;
}
.advantage-item svg{
width: 40px;
height: 40px;
margin-bottom: 15px;
}
.advantage-item h2{
font-size: 15px !important;
font-weight: 600 !important;
}
.advantage-item p{
font-size: 13px !important;
font-weight: 300 !important;
text-align: center !important;
}
.flex-box{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 300px;
}
.flex-box ul li{
font-size: 15px;
line-height: 30px;
}
.white-bg{
background: #FFF;
}
.melted-gold-video-box{
background: #f7deb5;
height: 314px;
}
.melted-gold-description-box{
background: #d0e2e4;
}
@media (max-width: 992px){
.main-image-box p{
font-size: 21px;
}
.main-image-box span{
font-size: 19px;
}
.main-image-box a{
font-size: 13px;
}
.flex-box{
height: 190px;
padding: 0 15px;
}
.melted-gold-video-box{
height: 197px;
}
.advantage-item h2{
margin-top: 0;
text-align: center;
}
.advantage-item{
margin-bottom: 20px;
}
}
@media only screen and (max-width: 768px){
.main-image-box .title-box{
left: 12px;
}
.main-image-box p{
font-size: 11px;
margin-bottom: 5px;
}
.main-image-box span{
font-size: 11px;
margin-bottom: 10px;
}
.main-image-box a{
padding: 6px;
font-size: 9px;
}
.flex-box{
height: auto;
padding: 40px 30px 60px;
}
.melted-gold-video-box{
height: auto;
}
.advantage-item h2{
font-size: 11px !important;
}
.advantage-item p{
height: 140px !important;
font-size: 12px !important;
}
.melted-gold-title{
font-size: 17px !important;
}
.div-info h2,.div-info h3{
font-size: 16px !important;
}
.div-info p{
font-size: 12px !important;
}
.flex-box ul li{
font-size: 12px !important;
}
}
.fancy-factor{
font-size: 14px;
padding-bottom: 25px
}
.address-box{
margin-top: 40px;
}
.form-input-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 10px 20px;
}
.form-input-box span{
width: 100%;
}
.form-input-box span input{
width: 100%;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
border-radius: 5px !important;
}
.form-input-box span textarea{
width: 100%;
min-height: 200px;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
border-radius: 5px !important;
}
.address-item{
display: flex;
justify-content: flex-start;
font-size: 16px;
line-height: 30px;
margin-bottom: 15px;
}
.address-item svg{
width: 20px;
height: 20px;
margin-left: 10px;
}
.marketingCode{
background: #3c3c3c;
color: #FFF;
fill: #FFF;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: stretch;
border-radius: 10px;
font-size: 16px;
}
.marketingCode.desktop{
background: #FFF;
color: #000;
fill: #000;
border: 1px #dfdfdf solid;
}
.marketingCode > div{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.marketingCode > div > span{
color: #FFF;
}
.marketingCode.desktop > div > span{
color: #555;
}
.marketingCode button{
color: #FFF;
fill: #FFF;
border: 1px solid #FFF;
padding: 3px 10px;
border-radius: 5px;
font-size: 18px;
font-family: tahoma;
}
.marketingCode.desktop a, .marketingCode.desktop button{
color: #555;
fill: #555;
border: 1px solid #dfdfdf;
}
.marketingCode button:hover, .marketingCode a:hover, .marketingCode button:hover svg, .marketingCode a:hover svg{
background: #12967d;
color: #fff !important;
fill: #fff;
}
.marketingCode .lnk{
font-size: 11px;
text-align: left;
white-space: nowrap;
overflow: hidden;
direction: ltr;
}
.marketingCode .lnk svg{
margin: 0 5px 0 0;
width: 14px;
height: 14px;
}
.marketingCode #shareIcons{
padding: 10px 0 0 0 !important;
margin: 0 !important;
}
.marketingCode .jssocials-share-link{
width: 30px !important;
height: 30px !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.marketingCode .jssocials-share-logo{
width: 24px!important;
height: 24px!important;
line-height: 18px!important;
padding: 3px !important;
fill: #3c3c3c;
}
.report-item{
background: #e6fff2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #212529;
border-radius: 3px;
line-height: 30px;
font-size: 13px;
margin: 0 0px 20px;
color: #10977d;
overflow: hidden;
}
.report-item span{
display: block;
width: 100%;
text-align: center;
background: #10977d;
color: #FFF;
}
.report-item b{
display: block;
width: 100%;
text-align: center;
background: #212529;
color: #FFF;
height: 60px;
line-height: 60px;
font-size: 15px;
}
@media (max-width: 768px){
.report-item{
font-size: 13px;
margin: 0 0 10px;
}
}
.content-list-box{
background: #F0F0F0;
padding: 15px;
border: 1px solid #dfdfdf;
border-radius: 3px;
margin: 10px 5px 10px;
}
.content-list-box a{
border-bottom: 1px dashed #299d95;
color: #299d95;
font-weight: 300;
}
@media (max-width: 768px){
.content-list-box{
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 20px 0;
}
}
.service-box-container{
background: #F0F0F0;
padding: 15px 0;
margin: 20px 0;
}
.service-box-wrapper{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
gap: 30px;
overflow: hidden;
}
.service-box{
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
background: #FFF;
padding: 20px;
margin: 10px 0;
border-radius: 20px;
text-align: center;
}
.service-box img{
border-radius: 10px;
}
.service-box h2, .service-box .h2{
color: #000;
font-weight: 400;
font-size: 20px;
text-align: center;
margin: 10px;
}
.service-box h3, .service-box .h3{
color: #999;
font-weight: 300;
font-size: 14px;
text-align: center;
margin: 10px;
}
.service-box .btn{
padding: 5px 30px;
font-size: 16px;
font-weight: 300;
border-radius: 30px;
}
@media (max-width: 768px){
.service-box-container{
padding: 10px;
margin: 0;
}
.service-box-wrapper{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
border-radius: 20px;
gap: 0px;
}
.service-box{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
box-shadow: none;
padding: 10px;
margin: 0;
border-bottom: 1px #DFDFDF solid;
border-radius: 0px;
}
.service-box:last-child{
border-bottom: none;
}
.service-box .flex-grow{
flex: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
flex: 4;
}
.service-box .no-shrink{
flex: 2;
}
.service-box .no-shrink.no-flex{
flex: none;
}
.service-box .btn{
padding: 3px 20px 6px 20px;
font-size: 14px;
font-weight: 400;
border-radius: 20px;
}
.service-box img{
width: auto;
margin: 0;
}
.service-box h2{
font-size: 17px;
text-align: right;
margin: 10px 0;
}
.service-box h3{
font-size: 14px;
text-align: right;
margin: 10px 0;
}
}
.mobile-style-service-box-container{
background: #F0F0F0;
margin: 0;
}
.mobile-style-service-box-container .service-box-wrapper{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
gap: 30px;
overflow: hidden;
}
.mobile-style-service-box-container .service-box{
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
background: #FFF;
padding: 20px;
margin: 10px 0;
border-radius: 20px;
text-align: right;
}
.mobile-style-service-box-container .service-box img{
border-radius: 10px;
}
.mobile-style-service-box-container .service-box h2, .mobile-style-service-box-container .service-box .h2{
color: #000;
font-weight: 400;
font-size: 20px;
text-align: right;
margin: 10px;
}
.mobile-style-service-box-container .service-box h3, .mobile-style-service-box-container .service-box .h3{
color: #999;
font-weight: 300;
font-size: 14px;
text-align: right;
margin: 10px;
line-height: 30px;
}
.mobile-style-service-box-container .service-box .btn{
padding: 5px 30px;
font-size: 16px;
font-weight: 300;
border-radius: 30px;
}
.mobile-style-service-box-container .service-box .flex-grow{
flex: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
flex: 4;
}
.mobile-style-service-box-container .service-box .no-shrink{
flex: 2;
}
@media (max-width: 768px){
.mobile-style-service-box-container{
padding: 15px 10px;
margin: 0;
}
.mobile-style-service-box-container .service-box-wrapper{
flex-direction: column;
gap: 15px;
}
.mobile-style-service-box-container .service-box{
margin: 0;
}
}
.auction-container{
background: #1A1A1A;
padding: 30px 0;
margin: 5px 0 0;
color: #FFF;
}
.auction-container .more-auctions{
text-align: center;
}
.auction-container .more-auctions img{
max-height: 310px;
}
.auction-container .more-auctions a{
color: #FFF;
border-radius: 3px;
padding: 5px;
border: 1px transparent solid;
display: inline-block;
}
.auction-container .more-auctions a:hover{
filter: contrast(1.5);
}
.auction-container .more-auctions a:hover svg{
fill: inherit !important;
}
.show-more-box{
display: inline-flex;
width: 170px;
height: 250px;
vertical-align: middle;
position: relative;
direction: rtl;
margin: 0 5px 5px 5px;
border: 1px #DFDFDF solid;
background: #FFF;
border-radius: 5px;
overflow: hidden;
color: black;
justify-content: center;
align-items: center;
}
.show-more-box svg{
display: block;
fill: #000!important;
width: 30px;
height: 30px;
text-align: center;
margin: 2px auto;
}
@media (max-width: 768px){
.auction-container .more-auctions a{
font-size: 12px;
}
}
.auction-clock{
direction: ltr;
margin: 5px;
}
.auction-clock span{
background: #FFF;
min-width: 25px;
display: inline-block;
color: #000;
border-radius: 3px;
letter-spacing: 2px;
text-align: center;
padding-left: 2px;
font-size: 15px;
}
.product-offrooz-bar{
background: #10bba0;
color: #FFF;
padding: 10px 15px;
border-radius: 5px;
}
.product-offrooz-title{
font-size: 16px;
}
.product-auction-clock{
direction: ltr;
}
.product-auction-clock span{
background: #FFF;
min-width: 25px;
display: inline-block;
color: #000;
border-radius: 3px;
letter-spacing: 2px;
text-align: center;
padding-left: 2px;
font-size: 16px;
}
/* Other Styles End */
/* Media Queries */
@media only screen and (max-width: 1200px) and (min-width: 992px){
a.login-link{
font-size: 9px;
}
a.register-link{
font-size: 9px;
}
a.telegram-btn{
padding: 7px 5px;
font-size: 12px;
}
.products h3{
margin: 0 0 5px;
}
.product h4{
line-height: 38px;
height: 38px;
}
}
@media only screen and (max-width: 1200px){
.center-lg{
text-align: center !important;
}
ul.social-network{
text-align: right;
margin: 20px 0;
}
.menu{
border-top: none;
}
}
@media (max-width: 992px){
.menu-open{
position: relative;
height: 100%;
overflow: hidden;
}
.menu-fade{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
z-index: 999;
display: none;
}
body.menu-open .menu-fade{
display: block !important;
}
body.menu-open .menu{
background-color: transparent;
width: 70%;
height: 100%;
position: absolute;
z-index: 9999;
transition: all 0s !important;
-o-transition: all 0s !important;
-ms-transition: all 0s !important;
-moz-transition: all 0s !important;
-webkit-transition: all 0s !important;
}
body.menu-open .menu .col-md-2{
display: none;
}
body.menu-open .responsive-footer{
display: none;
}
.categories-open{
height: 100%;
position: relative;
overflow: hidden;
}
.responsive-footer{
display: block;
}
.center-md{
text-align: center !important;
}
.login{
text-align: left;
}
.login li{
margin-left: 15px;
margin-right: 0;
}
a.register::after{
width: 0;
}
a.basket::after{
width: 0;
}
.slider .col-md-8{
float: none;
}
#slider{
margin-bottom: 3px;
}
.slogan-div span{
font-size: 13px;
}
.slogan-div svg{
width: 20px;
height: 20px;
margin-right: 10px;
}
.login li a{
margin-top: 19px;
}
form.search-box{
margin-top: 10px;
}
.collapse-div{
position: fixed;
-webkit-position: fixed;
width: 100%;
-webkit-width: 100%;
height: 100%;
-webkit-height: 100%;
-webkit-top: 0;
top: 0;
right: 0;
-webkit-right: 0;
background-color: rgba(0,0,0,0.7);
-webkit-background-color: rgba(0,0,0,0.7);
opacity: 1;
-webkit-opacity: 1;
z-index: 9998;
-webkit-z-index: 9998;
}
.menu-open{
height: 100%;
position: relative;
overflow: hidden;
}
.collapse-button{
display: inline-block !important;
}
.search-layer form input{
padding: 0 10px !important;
font-size: 16px;
}
.login li a{
font-size: 19px;
}
.login li{
font-size: 19px;
}
#logo{
float: left;
width: auto;
height: 37px;
margin: 5px 0;
}
.wide-banner{
padding: 10px 0 0;
}
.wide-banner img{
margin-bottom: 10px;
}
.slider-section{
padding: 10px 0 0;
}
.part-header{
margin-bottom: 10px;
}
.links-div{
width: 25%;
display: inline-flex;
}
.namads img{
width: 70px;
}
.footer .header h3, .footer .header .h3{
margin: 10px 0 10px;
}
.prices h4{
margin-top: 5px;
}
.more-btn{
color: #6b6b6b;
position: absolute;
left: 5px;
top: 11px;
font-size: 13px;
font-weight: 400;
}
.more-btn svg{
margin-right: 5px;
fill: #444;
width: 12px;
height: 12px;
}
.part-header h2{
font-size: 16px;
padding: 10px 5px;
}
#footer-logo img{
width: 250px;
height: auto;
}
}
@media only screen and (min-width: 992px){
.responsive-filters{
display: none !important;
}
}
@media only screen and (max-width: 768px){
.support-chat-open{
position: relative;
height: 100%;
overflow: hidden;
}
.item-btn{
display: block;
border: 1px solid transparent;
margin: 10px 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}
.old-price{
margin: 0;
}
.product h2{
padding: 0;
}
.product h2 a{
font-size: 12px;
}
.view{
margin-top: 0;
}
a.next-button{
display: none;
}
a.prev-button{
display: none;
}
.center-sm{
text-align: center !important;
}
.navigation{
display: none; /* Should be none for main page */
}
.newsletter h4{
font-size: 17px;
line-height: 30px;
}
.links-div{
width: 50%;
display: inline-flex;
}
.product h2, .product h3{
font-size: 10px;
line-height: 20px;
height: 20px;
}
.flex .colorsDiv span{
font-size: 10px;
line-height: 18px;
}
.off-badge.one-badge{
top: 60px !important;
width: 60px !important;
height: 25px !important;
font-size: 11px !important;
line-height: 22px !important;
right: 0;
left: unset;
}
.product h2 span, .product h3 span{
line-height: 18px;
}
.login li{
margin-left: 0;
margin-right: 0;
}
.braedcrumb-box{
overflow-x: auto;
white-space: nowrap;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
overflow-y: hidden;
}
.braedcrumb-box::-webkit-scrollbar{
display: none; /* Safari and Chrome */
}
}
@media only screen and (max-width: 600px){
.price-container{
text-align: center;
}
.price-container li{
font-size: 11px;
}
.not-available2{
font-size: 13px;
}
}
@media only screen and (max-width: 450px){
.part-header a.more{
opacity: 0;
}
.part-header a.responsive-more{
opacity: 1;
}
ul.slimmenu.collapsed.open{
width: 265px !important;
}
ul.social-network{
text-align: center !important;
margin: 20px 0;
}
ul.social-network li a{
width: 30px;
height: 30px;
font-size: 16px;
}
ul.social-network li svg{
width: 20px;
height: 20px;
fill: #666;
}
ul.social-network li{
list-style: none;
width: 30px;
height: 30px;
display: inline-block;
}
.aparat-icon{
width: 20px;
height: 20px;
color: #fff;
margin-top: -3px;
}
.links li{
padding: 0 5px;
}
.peyvand-links{
height: auto !important;
}
}
@media only screen and (max-width: 379px){
.login svg{
margin-left: 8px;
width: 20px;
height: 20px;
}
.login li:last-child svg{
margin-left: 0;
}
.login li{
margin-left: 8px;
margin-right: 0;
}
.collapse-button svg{
width: 25px !important;
height: 25px !important;
cursor: pointer;
color: black;
}
}
@media (max-width: 350px){
#logo{
margin: 8px 0;
}
}
@media (max-width: 768px){
.center-xs{
text-align: center !important;
}
.na .big{
color: #6d6e70;
font-size: 50px;
text-align: center;
}
.na .small{
color: #6d6e70;
font-size: 20px;
text-align: center;
}
}
/* PWA part */
@media (max-width: 768px) {
body {
opacity: 1 !important;
}
.menu {
display: none;
}
body > *:not(.loading-div):not(.fancybox-container):not(.select2-container) {
/* visibility: hidden; */
}
.bottom-navigation-fixer {
height: 50px;
}
.responsive-footer {
bottom: 50px;
}
.responsive-filters {
height: calc(100% - 100px);
}
.responsive-categories {
height: calc(100% - 50px);
}
.chat-wrapper.support {
height: calc(100% - 50px) !important;
bottom: 50px !important;
}
.chat-wrapper.support .chat-container {
height: calc(100% - 45px) !important;
}
@supports (-webkit-touch-callout: none) {
* {
letter-spacing: -0.5px;
}
@media all and (display-mode: standalone) {
.footer-price {
bottom: 77px;
}
.floating-button {
bottom: 160px;
}
.sticky-payment {
bottom: 80px !important;
}
.bottom-navigation {
height: 80px !important;
}
.bottom-navigation-fixer {
height: 80px;
}
.responsive-footer {
bottom: 80px !important;
}
.responsive-filters {
height: calc(100% - 130px) !important;
}
.responsive-categories {
height: calc(100% - 80px);
}
.chat-wrapper.support{
bottom: 80px !important;
height: calc(100% - 130px) !important;
}
.chat-container {
height: 100% !important;
}
.chat-wrapper.support .chat-container {
height: 100% !important;
}
.melted-sidebar .header{
bottom: 80px !important;
}
}
}
@media all and (display-mode: standalone) {
.install-app-bar, .install-app-bar2{
display: none !important;
}
}
}
/* Media Queries End */
/* New Styles */
body {
font-family: "YekanBakh";
background-color: #fff;
direction: rtl;
}
.sidebar {
background-color: #3c3c3c;
width: 230px;
right: -230px;
z-index: 1000;
position: sticky;
height: 100vh;
top: 0;
transition: all 0.2s ease-in-out;
}
.sidebar.open {
right: 0 !important;
/* transition: all 4s ease-in-out; */
}
@media only screen and (max-width: 992px) {
.sidebar {
position: absolute;
}
}
@media only screen and (min-width: 992px) {
.sidebar {
/* position: relative ; */
right: 0;
}
}
.sidebar .right_menu > li {
color: #fff;
display: block;
width: 100%;
cursor: pointer;
height: 63px;
line-height: 70px;
padding-right: 20px;
font-size: 16px;
}
.sidebar .right_menu {
border-top: 3px solid #fff;
}
.sidebar::after {
position: absolute;
content: "";
top: 0px;
left: 0;
background-color: #0170e3;
height: 100%;
width: 4px;
}
@media only screen and (max-width: 992px) {
.sidebar .right_menu::after {
top: -50px !important;
}
}
.top_menu {
/* padding-top: 15px; */
/* padding: 15px 10px ; */
}
@media only screen and (max-width: 992px) {
.top_menu {
background-color: #000000;
}
}
.top_menu .menu_top_right > div:nth-child(2) a:first-child {
width: 140px;
height: 38px;
background-color: #06c;
text-align: center;
line-height: 38px;
color: #fff;
display: inline-block;
border-radius: 42px;
}
.top_menu .menu_top_right > div:nth-child(2) a:first-child:hover {
background-color: #0077ed;
color: #fff;
transition: all 0.2s;
}
@media only screen and (max-width: 992px) {
.top_menu .menu_top_right > div:nth-child(2) a:first-child {
width: 100px !important;
}
}
.top_menu .menu_top_right > div:nth-child(2) a:nth-child(2) {
width: 145px;
height: 38px;
border: 1px solid #06c;
text-align: center;
line-height: 38px;
color: #fff;
display: inline-block;
border-radius: 42px;
color: #06c;
margin-right: 15px;
}
.top_menu .menu_top_right > div:nth-child(2) a:nth-child(2):hover {
background-color: #06c;
border: 1px solid #06c;
color: #fff;
transition: all 0.2s;
}
@media only screen and (max-width: 992px) {
.shy-menu-hamburger > .layer {
background-color: #fff !important;
}
}
.top_menu .menu_top_right a {
margin-right: 15px;
}
.top_menu > div a img:not(.mobile_logo) {
width: 35px;
height: 35px;
}
.top_menu > div a .mobile_logo {
width: 110px;
}
.sidebar .top_logo {
padding: 21px 5px;
background: #000;
text-align: center;
}
@media only screen and (min-width: 992px) {
.sidebar .top_logo img {
width: 110px;
}
}
@media only screen and (max-width: 992px) {
.sidebar .top_logo {
display: none;
}
}
.sidebar .right_menu > li:hover {
background-color: #0170e3 !important;
color: #fff;
/* position: relative; */
}
@media only screen and (max-width: 992px) {
.sidebar .right_menu {
border: none !important;
margin-top: 66px;
}
}
.sidebar > .right_menu > li > span {
position: relative;
height: 100%;
width: 100%;
display: block;
}
.sidebar > .right_menu > li:hover > span:before {
content: "";
top: 0;
width: 7px;
height: 100%;
background-color: #d5bd41;
position: absolute;
bottom: 0;
margin: auto;
right: -20px;
}
.sidebar .right_menu > li:hover:after {
content: "";
left: 0;
top: 0px;
width: 4px;
height: 100%;
background-color: #0170e3;
position: absolute;
z-index: 1000;
}
@media only screen and (max-width: 992px) {
.sidebar .right_menu > li:hover:after {
top: -50px !important;
}
}
.sidebar .right_menu > li:hover {
outline: none;
}
.sidebar .right_menu li {
outline: none;
}
.shy-menu-hamburger {
position: relative;
left: 0;
top: 0;
width: 18px;
height: fit-content;
display: block;
overflow: hidden;
cursor: pointer;
margin-left: 10px;
}
.shy-menu {
position: relative;
z-index: 1000;
}
@media only screen and (min-width: 992px) {
.shy-menu {
display: none !important;
}
.shy-menu-hamburger {
width: 40px;
}
}
@media only screen and (max-width: 992px) {
.shy-menu-hamburger {
width: 30px;
height: 25px;
}
}
.shy-menu-hamburger * {
transition: all 0.1s cubic-bezier(0.1, 0.7, 0.3, 1);
}
.shy-menu-hamburger .layer {
margin-top: 5px;
display: block;
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 5px;
}
.is-open .top {
transform: rotate(-45deg);
top: 25%;
bottom: 25%;
left: 0;
right: 0;
position: absolute;
}
.is-open .mid {
display: none;
}
.is-open .butn {
transform: rotate(45deg);
top: 25%;
bottom: 25%;
left: 0;
right: 0;
position: absolute;
}
.closed {
position: relative;
}
.content {
width: 100%;
}
@media only screen and (min-width: 992px) {
.content {
width: calc(100% - 220px);
}
}
.content .main_content {
background-color: #F5F5F7;
}
.top_menu_left {
background-color: #fff;
}
.top_menu_left a {
margin: 0 30px;
display: inline-block;
}
@media only screen and (max-width: 992px) {
.top_menu_left {
padding: 0.5rem 1.5rem !important;
}
.top_menu_left a {
margin: 10px 0;
}
}
.top_menu svg {
max-width: 25px;
max-height: 25px;
}
.close_menu {
position: absolute;
color: #fff;
background: #0170e3;
width: 25px;
height: 25px;
border-radius: 2px;
top: 8px;
left: 10px;
}
@media only screen and (min-width: 992px) {
.close_menu {
display: none;
}
}
.close_menu span {
width: 50px;
height: 5px;
background-color: #fff;
}
/* .close_menu svg{
width: 24px;
height: 24px;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 0;
fill: #fff;
left: 0;
margin: auto;
font-weight: bold;
} */
.sub_menu {
position: absolute;
left: -100px;
background-color: #e2e2e4;
display: none;
top: 0;
width: 100px;
padding: 10px 0;
height: 100%;
}
.sub_menu li {
width: 100%;
display: block;
text-align: center;
padding: 10px 0;
font-size: 12px;
}
.sub_menu li img {
width: 30px;
display: block;
margin: auto;
}
.sub_menu li span {
display: block;
text-align: center;
margin-top: 5px;
color: #676566;
height: 25px;
height: 25px;
line-height: 25px;
}
.right_menu > li:hover .sub_menu {
display: block;
}
.headset_mobile svg {
fill: #fff;
}
@media only screen and (max-width: 992px) {
.headset_mobile svg {
max-width: 30px;
max-height: 30px;
}
}
.mobile_register {
width: 120px;
height: 38px;
background-color: #0170e3;
text-align: center;
line-height: 38px;
color: #fff;
display: inline-block;
border-radius: 42px;
}
.back-mobile_menu {
fill: #FFF;
}
.backdrop {
position: fixed;
z-index: 100;
height: 100%;
width: 100%;
right: 0;
top: 0;
display: none;
backdrop-filter: blur(5px);
}
.sub_menu > li > a {
height: 55px;
display: block;
}
.your-carousel-responsive {
background-color: red;
height: 200px;
width: 500px;
}
.main_content .main_heading {
color: #FFF;
}
.main_content .main_heading h1 {
font-size: 32px;
color: #3d3c3c;
}
.main_content .main_heading p {
font-weight: 200;
color: #8e8e8e;
font-size: 20px;
}
@media only screen and (max-width: 992px) {
.main_content .main_heading h1 {
font-size: 18px;
}
}
#myCarousel {
max-width: 900px;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.slider {
width: 100%;
margin: 40px auto;
direction: ltr;
margin: unset !important;
overflow: hidden;
padding: 14px;
background-color: #fff;
margin: 20px;
}
@media only screen and (max-width: 992px) {
.slider {
padding: 5px;
}
.slick-slide img {
height: 17rem !important;
}
}
.slick-slide {
margin: 0px 10px;
}
.slick-slide:not(.slick-active) {
filter: brightness(0.78);
}
.slider img {
width: 100%;
height: auto;
}
.thombnail_item h4 {
font-size: 15px;
font-weight: 992;
text-align: center;
}
.thombnail_items .thombnail_item {
width: 190px;
/* height: 100px; */
height: 220px;
background-color: #fff;
transition: all 0.2s;
}
.thombnail_items .thombnail_item:hover {
transform: scale(1.04);
}
@media only screen and (max-width: 992px) {
.thombnail_items > div:first-child .thombnail_item div {
width: 50%;
text-align: right;
}
.thombnail_items > div:first-child .thombnail_item h4 {
text-align: right;
}
.thombnail_items .thombnail_item {
width: unset;
margin-top: 15px;
}
.thombnail_items > div:first-child .thombnail_item {
height: 81px;
width: 100%;
}
.thombnail_items .thombnail_item > div {
height: 86%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.thombnail_items > div:nth-child(2) .thombnail_item {
height: 150px;
background-color: unset !important;
}
.thombnail_items > div:nth-child(2) div h4 {
font-size: 12px;
}
.thombnail_items > div:nth-child(2) div p {
display: none;
}
.thombnail_items > div:nth-child(2) a {
background-color: #000;
}
}
.thombnail_items .thombnail_item img {
width: 55px;
height: 55px;
}
.thombnail_items .thombnail_item h3 {
font-size: 13px;
font-weight: 700;
}
.thombnail_items .thombnail_item p {
font-size: 10px;
}
.thombnail_items .thombnail_item a {
width: 90px;
line-height: 25px;
text-align: center;
border-radius: 25px;
background-color: #0171e1;
font-size: 13px;
color: #fff;
transition: all 0.2s;
}
.thombnail_items .thombnail_item a:hover {
transform: scale(1.1);
}
.price_thumbnails > div:first-child {
padding: 45px;
text-align: center;
}
.price_thumbnails {
overflow-x: unset;
}
@media only screen and (max-width: 992px) {
.thombnail_items > div:nth-child(2) h3 {
font-size: 10px;
}
.price_thumbnails {
overflow-x: scroll;
}
.price_thumbnails > div:first-child {
padding: 1rem;
text-align: center;
}
}
.price_thumbnails > div:first-child h3 {
line-height: 25px;
font-size: 1.2rem;
font-weight: 700;
}
.price_thumbnails > div:first-child img {
width: 128px;
}
.price_thumbnails h2 {
font-size: 14px;
text-align: center;
line-height: 2rem;
font-weight: 700;
color: #494949;
}
.price_thumbnails p {
font-size: 12px;
text-align: center;
line-height: 18px;
font-weight: 200;
}
.price_thumbnails_item-title img {
width: 25px;
height: 25px;
}
@media only screen and (min-width: 992px) {
.price_thumbnails-items > .price_thumbnails-item:nth-child(12) {
display: none !important;
}
.price_thumbnails-items > .price_thumbnails-item:nth-child(11) {
display: none !important;
}
}
@media only screen and (max-width: 992px) {
.price_thumbnails-items {
width: 1500px;
}
}
.price_thumbnails-item h3 {
font-size: 13px;
font-weight: 700;
line-height: 30px;
}
.price_thumbnails-item {
height: 170px;
background-color: #fff;
border-radius: 10px;
border: 2px #f5f5f5 solid;
transition: all 0.2s;
cursor: pointer;
}
@media only screen and (max-width: 992px) {
.price_thumbnails-item {
margin-left: 15px;
width: 350px;
height: 100px;
border: none !important;
}
.price_thumbnails-item .responsive_border {
border-bottom: 2px solid #ccc !important;
}
}
.price_thumbnails-item span {
font-size: 12px;
}
.price_thumbnails-item > div:last-child span:last-child {
font-weight: 700;
font-size: 15px;
}
.triple_items {
background-color: #FFF;
height: 648px;
margin: 250px 0px;
}
.triple_item > div img {
height: 150px;
margin: auto;
}
@media only screen and (max-width: 992px) {
.triple_item > div img {
width: 90px;
}
}
.triple_item > div p {
font-size: 15px;
font-weight: 400;
line-height: 41px;
text-align: justify;
color: #494949;
word-spacing: 1px;
}
.why-bloadcamp {
margin: 5rem 5rem 0 5rem;
}
.why-bloadcamp-item {
background-color: #fff;
}
.why_bloadcamp-header {
border-radius: 1rem 1rem 0 0 !important;
}
@media only screen and (max-width: 992px) {
.why-bloadcamp {
margin: 4rem 0rem 0rem 0rem;
}
.why-bloadcamp-items {
display: flex;
width: 1400px;
}
.why-bloadcamp-item:first-child {
flex-direction: column-reverse;
}
.why-bloadcamp-item:nth-child(2) {
flex-direction: column;
}
.why-bloadcamp-item:nth-child(3) {
flex-direction: column-reverse;
}
.why-bloadcamp-item:nth-child(4) {
flex-direction: column;
}
.why-bloadcamp-items {
background-color: #000 !important;
}
.why-bloadcamp-item {
width: 340px;
margin: 1rem;
padding-top: 2rem;
height: fit-content;
border-radius: 1rem;
margin: 1rem !important;
}
.why_bloadcamp-header {
border-radius: unset !important;
}
.why_bloadcamp-header h3 {
font-size: 34px;
margin-top: 15px;
}
.why-bloadcamp-main {
overflow: scroll;
}
}
.why-bloadcamp-item img {
height: 90px;
width: 90px;
}
.why-bloadcamp-item h2 {
font-weight: 700;
}
.why-bloadcamp-item p {
line-height: 33px;
font-size: 14px;
text-align: justify;
}
footer .logo img {
width: 250px;
margin: auto;
}
footer .footer-right p {
line-height: 34px;
text-align: justify;
}
footer .footer_left p {
line-height: 34px;
font-size: 12px;
font-weight: 00;
text-align: justify;
}
footer .dargahha img {
width: 55px;
height: 55px;
}
.opt_icons {
width: 58%;
}
.dargahha {
width: 40%;
}
.opt_icons img {
width: 100%;
}
@media only screen and (max-width: 992px) {
.opt_icons {
margin-top: 15px;
width: 100%;
}
.dargahha {
width: 100%;
}
}
.opt_icons a:first-child {
margin-left: 10px;
}
.opt_icons a {
width: 50%;
}
@media only screen and (max-width: 992px) {
.opt_icons a {
width: 48%;
margin-left: unset !important;
}
.footer-right > div:not(:first-child) {
/* border-bottom: 1px solid #7f7f7f; */
padding: 20px 0;
}
.footer_left {
/* height: 259px; */
}
.footer_left > div:not(:last-child) {
/* border-bottom: 1px solid #7f7f7f; */
padding: 10px 0;
}
}
footer .footer_content {
margin: 0 5rem 0 5rem;
}
.footer_left,
.footer_right p {
font-size: 12px;
color: #676566;
}
.footer_left ul {
justify-content: space-between;
}
.footer_left ul li ul li::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-color: #676566;
width: 5px;
height: 5px;
content: "";
margin: auto;
border-radius: 100%;
}
.footer_left ul li ul li {
position: relative;
text-align: right;
padding-right: 20px;
font-weight: 200;
font-size: 14px;
}
.footer_left ul a {
color: #676566;
font-weight: 400;
font-size: 12px;
}
footer {
background-color: #FFF;
}
footer .footer-right p {
font-size: 13px;
font-weight: 300;
}
.social-icons {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
}
.social-icons svg {
width: 30px;
height: 30px;
}
.copyright {
background-color: #212529;
}
.copyright p {
font-size: 14px;
text-align: center;
margin: 0;
color: #FFF;
direction: ltr;
}
@media only screen and (max-width: 992px) {
footer .footer_content {
margin: 0;
}
.footer_left ul li ul li {
padding-top: 30px;
text-align: center;
}
footer div {
text-align: center;
}
footer .logo img {
width: 200px;
margin: auto;
}
footer .footer-right p {
line-height: 34px;
text-align: justify;
}
footer .dargahha img {
width: 55px;
height: 55px;
}
.opt_icons img {
height: auto;
width: 100%;
}
.footer_left ul li ul li {
padding-right: 0px !important;
}
.footer_left ul li ul li::after {
display: none;
}
}
.triple_items {
background-color: #0170e3;
}
.triple_item > div:first-child {
display: flex;
align-items: center;
}
.triple_item > div:nth-child(2) {
font-weight: 700;
font-size: 18px;
color: #5e5d5d;
}
.triple_items > div {
position: relative;
top: -150px;
height: 300px;
}
@media only screen and (max-width: 992px) {
.triple_items {
height: fit-content;
margin: 10px auto;
}
.triple_items > div {
position: unset;
height: unset;
}
}
.triple_items > div:not(:first-child) {
margin-top: 25px;
}
/* New Styles End */