:root {
    --grayBorder: 1px solid #ccc;
    --maincolor: #bb2a2a;
    --optcolor: #302727;
    --dangerColor: #f9264c;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

*::-webkit-scrollbar,
*::-moz-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-thumb,
*::-moz-scrollbar-thumb {
    background: #ffc000;
}

*::-moz-scrollbar,
*::-moz-scrollbar {
    width: 5px;
}

a {
    text-decoration: none;
    color: var(--optcolor);
}

a:hover {
    color: var(--maincolor);
    text-decoration: none;
    transition: .3s;
}

body {
    overflow-x: hidden;
}

body.active:before {
    content: '';
    position: fixed;
    background: #000;
    opacity: .8;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

body.overlay:before {
    width: 100%;
    height: 100%;
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    background: #000;
    opacity: .9;
    z-index: 99;
}

.translated-ltr {
    margin-top: -40px;
}

.translated-ltr {
    margin-top: -40px;
}

.goog-te-banner-frame {
    display: none;
}

.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

.skiptranslate.goog-te-gadget select {
    border: none;
    padding: 10px;
}

.skiptranslate.goog-te-gadget span {
    display: none;
}

table,
td,
th {
    border: var(--grayBorder);
    border-collapse: collapse;
}

td,
th {
    padding: 5px;
}

th {
    background: #ddc;
}

label {
    position: relative;
}

.totop {
    position: fixed;
    z-index: 99;
    bottom: 20px;
    left: 5%;
    background: var(--optcolor);
    color: #fff;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    cursor: pointer;
    font-size: 30px;
    display: none;
}

.totop.show {
    display: flex;
}

.totop:hover {
    background: var(--maincolor);
    transition: .3s;
}

.alertHolder {
    right: 10px;
    top: 10px;
    width: 300px;
    position: fixed;
    z-index: 200;
}

#alertMsg {
    float: left;
    margin-top: 5px;
    width: 300px;
    background-color: var(--optcolor);
    min-height: 100px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 10px rgb(0, 0, 0, .5);
    animation: aniAlert .3s linear alternate;
    transition: .3s;
}

.alert {
    float: left;
    width: 100%;
    background-color: var(--maincolor);
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    margin: 10px 0px;
    overflow: hidden;
    box-shadow: 0 0 10px rgb(0, 0, 0, .5);
    transition: .3s;
}

.alert.success {
    background: #25D366;
    text-align: center;
}

#alertMsg .foot {
    width: 100%;
    padding: 10px;
    float: right;
}

#alertMsg .foot button {
    padding: 5px 10px;
    border: var(--grayBorder);
    border-radius: 5px;
    background-color: var(--maincolor);
    color: #fff;
    margin-right: 5px;
    cursor: pointer;
}

@keyframes aniAlert {
    from {
        margin-right: -300px;
        opacity: 0;
    }
    to {
        margin: 0px;
        opacity: 1;
    }
}

#alertMsg h1 {
    width: 100%;
    padding: 5px 10px;
    background-color: var(--maincolor);
    color: #fff;
    font-weight: unset;
    font-size: 20px;
}

#alertMsg p {
    width: 100%;
    float: left;
    padding: 10px;
    color: #fff;
}

.topMenu {
    width: 100%;
    float: left;
    border-bottom: var(--grayBorder);
    padding: 0 5%;
    font-size: 12px;
    overflow: hidden;
    z-index: 102;
}

.ulswitcher,
.menuswitcher {
    display: none;
}

.topMenu label {
    float: left;
    padding: 10px;
    padding-left: 0;
}

.topMenu ul {
    float: right;
    display: flex;
}

.topMenu ul.active {
    display: block;
}

.topMenu ul li {
    list-style: none;
    padding: 10px;
    border-right: var(--grayBorder);
}

.topMenu ul li span {
    padding: 2px 3px;
    background: var(--maincolor);
    color: #fff;
    font-size: 12px;
    margin-left: 5px;
    height: 20px;
    min-width: 20px;
    text-align: center;
    line-height: 14px;
    border-radius: 5px;
    float: right;
    border: var(--grayBorder);
}

.topMenu ul {
    border-left: var(--grayBorder);
}

.searchBar {
    width: 100%;
    float: left;
    padding: 0 5%;
    position: relative;
    align-items: center;
    display: flex;
}

.searchBar .logo {
    height: 50px;
    margin: 5px 0;
    float: left;
}

.searchBar .logo img {
    height: 100%;
    float: left;
}

.searchBar .hotline {
    position: absolute;
    right: 5%;
}

.highlight {
    background: var(--maincolor);
    color: #fff;
}

#quickview {
    width: 800px;
    height: 400px;
    background: #fff;
    position: fixed;
    top: -400px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    filter: blur(10px);
    transition: .3s;
    display: none;
}

#quickview.active {
    top: 50%;
    transform: translate(-50%, -50%);
    filter: unset;
    display: block;
}

#quickview .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 5px;
    background: var(--dangerColor);
    z-index: 2;
    color: #fff;
    border-bottom-left-radius: 5px;
    cursor: pointer;
}

#quickview .explore {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 3px 5px;
    background: var(--maincolor);
    z-index: 2;
    color: #fff;
    border-top-left-radius: 5px;
    cursor: pointer;
}

#quickview .sell_img.thumb {
    width: 400px;
    height: 400px;
}

#quickview #zoom {
    left: unset;
    right: 0;
}

.allcarts ul li {
    list-style: none;
    padding: 5px 20px;
}

.searchBar .search {
    float: left;
    border: var(--grayBorder);
}

.searchBar .search form {
    width: 600px;
    display: flex;
    height: 40px;
}

.searchBar .search form input {
    border: none;
    padding: 10px 20px;
    width: 90%;
    background: transparent;
}

.searchBar .search.active {
    border: 1px solid var(--optcolor);
    background: #4b4b4b;
}

.searchBar .search.active form button {
    border: none;
    background: transparent;
    color: var(--optcolor);
}

.searchBar .search.active form input {
    color: #fff;
}

.searchBar .search.active form button:hover {
    background: transparent;
    color: #fff;
}

.searchBar .search form input:focus {
    outline: none;
}

.searchBar .search form button {
    border: none;
    padding: 5px;
    width: 10%;
    border-left: var(--grayBorder);
    cursor: pointer;
    outline: none !important;
}

.searchBar .search form button:hover {
    background-color: var(--optcolor);
    color: #fff;
    transition: ease-in-out .3s;
}

#searchout,
#voice {
    all: unset;
    position: absolute;
    left: -1px;
    top: 40px;
    max-height: 500px;
    width: calc(100% - 50px);
    background: #4b4b4b;
    border: 1px solid var(--optcolor);
    border-top: none;
    overflow: hidden;
    overflow-y: scroll;
    display: none;
}

#voice {
    display: block;
    height: 300px;
    width: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #fff;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: none;
}

#voice p {
    width: 100%;
    padding: 20px;
}

#voice div {
    font-size: 100px;
    width: 150px;
    height: 150px;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50%;
    justify-content: center;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: .3s;
    position: relative;
}

#voice div:hover {
    background: var(--maincolor);
    border: 1px solid var(--maincolor);
}

.closeSeach {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    transition: .3s;
}

.closeSeach:hover {
    color: var(--maincolor);
}

#searchout h1 {
    font-weight: normal;
    color: #969696;
    padding: 3px 5px;
    font-size: 16px;
    width: 100%;
    float: left;
}

#searchout .line {
    list-style: none;
    width: 100%;
    padding: 5px;
    float: left;
    color: #fff;
}

#searchout .line:last-child {
    border-bottom: none;
}

#searchout .line:hover {
    transition: .3s;
    background: #f1f1f1;
    color: var(--optcolor);
}

.searchthumb {
    width: 50px;
    height: 50px;
    overflow: hidden;
    display: flex;
    float: left;
}

#searchout p {
    width: calc(100% - 50px);
    float: left;
    padding: 3px;
}

.searchthumb img {
    width: 100%;
    height: 100%;
    display: flex;
    object-position: center;
    object-fit: cover;
    justify-content: center;
}

.searchAll {
    display: flex;
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
    align-items: center;
}

.microphone {
    width: 40px;
    height: 40px;
    background: var(--optcolor);
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    transition: .3s;
}

.microphone:hover {
    background: var(--maincolor);
}


/* 
.microphone {
    position: absolute;
    right: 20px;
} */

.bodyOverlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    background: rgb(0, 0, 0, .8);
    display: none;
}

.bodyOverlay.active {
    display: block;
}

.mobimenu {
    display: none;
}

.menu {
    width: 100%;
    float: left;
    background-color: var(--maincolor);
    color: #fff;
    height: 40px;
    padding: 0 5%;
    position: relative;
    text-transform: uppercase;
    /* z-index: 10002; */
}

.menu.sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
}

.menu ul {
    display: flex;
    height: 40px;
}

.menu ul a,
.mobimenu ul a {
    color: #fff;
}

.menu ul a:hover,
.mobimenu ul a:hover,
.menu ul li:hover {
    transition: ease-in-out .3s;
    color: #fff;
    text-decoration: none;
    background-color: var(--optcolor);
}

.menu ul li,
.mobimenu ul li {
    list-style: none;
    padding: 10px;
    position: relative;
    cursor: pointer;
    color: #fff;
}

.menu ul li:hover ul {
    display: block;
}

.mobimenu ul li ul {
    display: none;
    padding-top: 0;
}

.mobimenu ul {
    width: 100%;
    float: left;
}

.mobimenu ul a {
    width: 100%;
    float: left;
}

.mobimenu ul a:hover {
    background: #000;
}

.mobimenu ul li:hover ul {
    display: block;
}

.menu ul li ul {
    display: none;
    background-color: var(--optcolor);
    z-index: 100;
    color: #fff;
    width: 200px;
    position: absolute;
    top: 40px;
    left: 0;
    height: unset;
}

.menu ul ul li:hover {
    transition: ease-in-out .3s;
    color: #fff;
    text-decoration: none;
    background-color: var(--maincolor);
}

.menu .cart {
    position: absolute;
    right: 5%;
    top: 0;
    height: 40px;
    padding: 10px;
    background-color: var(--optcolor);
    z-index: 11;
    cursor: pointer;
}

.menu .cart:hover {
    color: var(--maincolor);
    background-color: #fff;
    transition: .3s;
    border: var(--grayBorder);
}

.menu .cart:hover span {
    background-color: var(--optcolor);
    color: #fff;
}

.menu .cart label {
    cursor: pointer;
}

.menu .cart a {
    color: #fff;
}

.menu .cart a:hover {
    text-decoration: none;
}

.menu .cart span {
    padding: 3px;
    background-color: var(--maincolor);
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    display: none;
}

#overlay.sub {
    background-color: rgb(0, 0, 0, .8);
    z-index: 10005;
    display: block;
}

#overlay.show {
    display: block;
}

#cartHolder {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: var(--optcolor);
    border-radius: 5px;
    box-shadow: 0 0px 5px rgb(0, 0, 0, .7);
    text-transform: capitalize;
    display: none;
    z-index: 120;
}

.menu .cart:hover #cartHolder {
    display: block;
}

#cartHolder:before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-bottom: 10px solid var(--optcolor);
    height: 0px;
    width: 0px;
}

#cartHolder h1 {
    width: 100%;
    float: left;
    font-weight: unset;
    font-size: 18px;
    text-align: center;
    padding: 10px;
    border-bottom: solid #fff 1px;
}

#cartHolder ul {
    position: unset;
    display: block;
    color: #fff;
    width: 100%;
    float: left;
    padding: 5px;
}

#cartHolder a {
    width: 100%;
    float: left;
    font-weight: normal;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    background: var(--maincolor);
    border-radius: 0 0 5px 5px;
}

#cartHolder a:hover {
    transition: .3s;
    background: #f2f2f2;
    color: #000;
}


/*slider*/

.topSlider {
    width: 90%;
    height: 400px;
    display: flex;
    margin-left: 5%;
    background: var(--grayBorder);
    margin-top: 5px;
    float: left;
    border-radius: 10px;
    overflow: hidden;
    justify-content: space-between;
}

.swiper-container {
    width: calc(60% - 10px);
    float: left;
    height: 100%;
    overflow: hidden;
    display: flex;
    margin: 0 10px;
    border-radius: 10px;
}

.swiper-container.sub {
    z-index: 100007 !important;
}

.swiper-slide {
    font-size: 18px;
    background: #fff;
    -webkit-user-drag: auto;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    width: 100%;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50px;
}

.subHolder {
    width: 100%;
    position: absolute;
    bottom: 40px;
    /* left: 20px; */
    float: left;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    z-index: 100;
}

.subSlider {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50px;
    background-color: #000;
    margin: 0px 2px;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    background-color: #fff;
    transition: .3s;
}

.subSlider:hover {
    width: 75px;
    height: 75px;
}

.subSlider span {
    background-color: rgb(255, 255, 255, .9);
    font-size: 12px;
    padding: 5px;
    text-align: center;
    display: none;
}

.infos {
    position: absolute;
    height: 100%;
    width: 100%;
}

.infos .subBtmHolder {
    bottom: 40px;
    left: 170px;
    width: 100%;
    height: 70px;
    display: flex;
    position: absolute;
}

.infos .subBtmHolder a {
    color: rgba(0, 0, 0, 0.9);
    text-decoration: none;
    padding: unset;
    background: var(--maincolor);
    border-radius: 50%;
    overflow: hidden;
    position: unset;
    height: 70px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
}

.infos h1 {
    position: absolute;
    text-decoration: none;
    margin: 0;
    padding: 10px;
    color: var(--optcolor);
    font-size: 2.5em;
    top: 30%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    background-color: rgb(255, 255, 255, .6);
    float: left;
}

.infos a {
    color: rgba(0, 0, 0, 0.9);
    text-decoration: none;
    padding: 5px 10px;
    background: var(--maincolor);
    border-radius: 3px;
    position: absolute;
    bottom: 50px;
    right: 50px;
}

.infos a:hover {
    color: rgba(0, 0, 0, 0.9);
    background: #fff;
    border: #000 solid 1px;
}

.category {
    position: relative;
    height: 100%;
    width: 20%;
    text-transform: capitalize;
    font-size: 14px;
    border-radius: 10px;
}

.category.sub {
    z-index: 10006;
}

.category h1 {
    width: 100%;
    padding: 10px 20px;
    color: #fff;
    /* background-color: rgb(255, 255, 255, .5); */
    background-color: #ccc;
    font-weight: unset;
    border-radius: 10px;
    color: #000;
    font-size: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    height: 50px;
}

.category div {
    background-color: rgb(0, 0, 0, .8);
    border-radius: 10px;
    overflow: hidden;
    height: calc(100% - 55px);
    float: left;
    width: 100%;
}

.category div ul {
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    float: left;
}

.category ul li {
    list-style: none;
    width: 100%;
    padding: 5px 10px;
    border-bottom: 1px solid rgb(255, 255, 255, .1);
    color: #fff;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category ul li.sub {
    background-color: #fff;
    color: #000;
}

.category ul li:hover {
    background: rgb(255, 255, 255, .1);
    color: rgb(255, 255, 255, .6);
}

.subCats {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #f1f1f1;
    z-index: 1001;
    padding: 5px;
    overflow: hidden;
    overflow-y: scroll;
    display: none;
    grid-template-columns: 50% 50%;
    grid-gap: 5px;
    justify-content: center;
}

.subCats.sub {
    display: grid;
    grid-template-columns: 50% 50%;
}

.subCloser {
    position: absolute;
    height: 70px;
    width: 70px;
    background-color: var(--optcolor);
    opacity: .7;
    z-index: 1001;
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
    top: -20px;
    right: -20px;
    border-radius: 50%;
    font-size: 30px;
    padding-top: 10px;
    padding-right: 10px;
    cursor: pointer;
    transition: .3s;
}

.subCloser.sub {
    display: flex;
}

.subCloser:hover {
    background-color: var(--dangerColor);
    color: #fff;
}

.subCatBlock {
    margin: 2px;
    border-radius: 5px;
    display: flex;
}

.subCatBlock .subThumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    overflow: hidden;
    background-color: #ccc;
}

.subCatBlock .subThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subLinkList {
    padding: 10px;
    padding-top: 0;
    float: left;
    background-color: rgb(221, 219, 219);
    width: calc(100% - 60px);
    border-radius: 5px;
    margin-left: 5px;
}

.subLinkList h1 {
    font-size: 20px;
    width: 100%;
    float: left;
}

.subLinkList ul {
    width: 100%;
}

.subLinkList ul li {
    list-style: none;
}

.blockHolder.top {
    width: 20%;
    border-radius: 10px;
}

.blockHolder.top .blockBody {
    border-radius: 10px;
    background-color: rgb(0, 0, 0, .8);
    overflow: hidden;
    height: calc(100% - 55px);
    color: #fff;
}

.blockHolder.top .blockBody .inner {
    overflow-y: scroll;
    height: 100%;
}

.blockHolder.top h1 {
    width: 100%;
    background: #ccc;
    color: #000;
    /* text-transform: uppercase; */
    font-size: 20px;
    display: flex;
    align-items: center;
    font-weight: unset;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 5px;
    height: 50px;
}


/*main container*/

.mainContainer {
    width: 100%;
    float: left;
    padding: 20px 5%;
}

.mainContainer.extend {
    padding: 20px 0;
}

#cart.quick {
    all: unset;
    padding: 3px 5px;
    box-sizing: border-box;
    background: var(--optcolor);
    color: #fff;
    cursor: pointer;
    margin: 10px;
    margin-bottom: 5px;
    line-height: 20px;
    float: left;
    width: calc(100% - 20px);
}

#cart.quick:hover {
    background: var(--maincolor);
    transition: .3s;
}


/*left pane*/

.leftPane {
    width: 20%;
    float: left;
    position: sticky;
    top: 30px;
    margin-left: 5%;
}

.leftPane.extend {
    margin-left: 0;
}

.leftPane .blockHolder {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.leftPane .blockHeader {
    position: relative;
    width: 100%;
    float: left;
    margin-bottom: -1px;
    text-transform: uppercase;
    height: 40px;
}

.leftPane .blockHeader h1 {
    position: absolute;
    background-color: var(--optcolor);
    color: #fff;
    font-weight: unset;
    font-size: 16px;
    padding: 10px;
    border-radius: 0 20px 0px 0;
}

.leftPane .blockHeader nav {
    position: absolute;
    font-weight: unset;
    font-size: 16px;
    padding: 10px;
    right: 0;
}

.leftPane .blockHeader nav i:hover {
    cursor: pointer;
    color: var(--optcolor);
    transition: .3s;
}

.leftPane .blockBody {
    width: 100%;
    float: left;
    border: var(--grayBorder);
}

.leftPane .blockBody h2 {
    width: 100%;
    float: left;
    padding: 10px;
    font-size: 14px;
}

.leftPane .blockBody label {
    width: 100%;
    float: left;
    margin-bottom: 2px;
    cursor: pointer;
    font-size: 14px;
    padding-left: 10px;
}

.leftPane .blockBody label:hover {
    cursor: pointer;
    color: var(--optcolor);
}

.leftPane .blockBody label i {
    width: 18px;
    height: 18px;
    border: var(--grayBorder);
    padding: 2px;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    color: #4b4b4b;
    font-size: 16px;
}

.labelParent span {
    width: calc(100% - 20px);
    float: left;
    padding: 2px;
    margin-left: 20px;
    position: relative;
}

.labelParent span:before {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 1px;
    background: #ccc;
    content: '';
}

.labelParent {
    width: calc(100% - 19px);
    margin-left: 19px;
    float: left;
    margin-top: -2px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-left: var(--grayBorder);
    position: relative;
    display: none;
}

.labelParent.last:before {
    position: absolute;
    left: -1px;
    bottom: 0;
    width: 1px;
    height: 20px;
    background: #fff;
    content: '';
}

.cart-size.near {
    width: calc(100% - 20px);
    margin: 0 10px;
    margin-bottom: 10px;
}

.cart-size.near input {
    width: calc(100% - 40px);
}

.cart-size.near span {
    width: 20px;
}

.leftPane .blockBody hr {
    margin-top: 15px;
    width: 96%;
    float: left;
    margin-left: 2%;
    border: var(--grayBorder);
    height: 1px;
}

.price {
    width: 100%;
    padding: 0 5%;
    float: left;
    margin-bottom: 20px;
}

.pr1 {
    width: calc(50% - 10px);
    float: left;
    margin: 5px;
    margin-top: 30px;
    display: flex;
}

.pr1 span {
    width: calc(50% - 10px);
    float: left;
}

.pr1 input {
    width: calc(50% - 10px);
    float: left;
    padding: 2px;
    width: 60px;
    border: var(--grayBorder);
}

.sell_line {
    width: calc(100% - 4px);
    float: left;
    margin: 2px;
    padding: 4px;
    font-size: 13px;
    line-height: 20px;
    border-bottom: var(--grayBorder);
}

.blockHolder.top .sell_line {
    border-bottom: 1px solid #4b4b4b;
}

.blockHolder.top .sell_line a {
    color: #fff;
}

.blockHolder.top .sell_line:hover {
    background-color: rgb(0, 0, 0, .7);
}

.sell_line:last-child {
    border-bottom: none;
}

.sell_img {
    width: 90px;
    float: left;
    overflow: hidden;
    display: flex;
    height: 70px;
    padding-right: 5px;
    position: relative;
    /* border-bottom: var(--grayBorder); */
}

.categoryListPane {
    display: grid;
    grid-template-columns: calc(33.33% - 10px) calc(33.33% - 10px) calc(33.33% - 10px);
    grid-gap: 10px;
    float: left;
    justify-content: space-between;
    width: 100%;
}

.categoryList {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.categoryList .catThumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-bottom: 1px solid #ccc;
}

.categoryList .catTitle {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    transition: .3s;
}

.categoryList .catTitle:hover {
    background: var(--maincolor);
    color: #ffff;
}

.categoryList .catTitle:hover h3 {
    color: #ffff;
}

.categoryListPane .catThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catProPane {
    display: grid;
    grid-template-columns: calc(33.33%) calc(33.33%) calc(33.33%);
    float: left;
    justify-content: space-between;
    width: 100%;
}

.catPro {
    display: flex;
    width: 100%;
    height: 100px;
    position: relative;
    border: 1px solid #ccc;
}

.catPro .proNum {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(0, 0, 0, .3);
    padding: 5px;
    color: #fff;
    text-align: center;
}

.catPro img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.productHolder.categoryPane .sell_img {
    border-bottom: var(--grayBorder);
}

.productHolder.categoryPane .rate.sval i {
    font-size: 10px;
}

.sell_img img {
    width: 100%;
    object-fit: cover;
    justify-content: center;
    height: 100%;
}

.sell_img:hover .imgController {
    display: block;
}

.sell_img:hover .trans {
    display: block;
}

.sell_img:hover .zoomsize,
.sell_img:hover .light {
    display: block;
}

.imgController {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    transition: .3s;
}

.imgController i {
    color: var(--optcolor);
    font-size: 40px;
    padding: 10px;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-50%);
}

.imgController i:last-child {
    left: unset;
    right: 0;
}

.imgController i:hover {
    transition: .3s;
    color: var(--maincolor);
}

#zoom {
    width: 400px;
    height: 400px;
    background: #fff;
    background-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 5px;
    z-index: 20;
    border: var(--grayBorder);
}

.trans {
    width: 100%;
    float: left;
    height: 100%;
    background: rgb(0, 0, 0, .5);
    position: absolute;
    display: none;
}

.trans .over {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: #fff;
    mix-blend-mode: overlay;
    cursor: zoom-in;
}

.zoomchoice {
    position: absolute;
    background: #fff;
    cursor: pointer;
    z-index: 20;
    display: none;
    user-select: none;
}

.zoomsize,
.light {
    position: absolute;
    background: #fff;
    z-index: 20;
    right: 10px;
    top: 10px;
    user-select: none;
    display: none;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid #000;
}

.light {
    right: unset;
    left: 10px;
    cursor: pointer;
}

.zoomchoice ul {
    display: block;
}

.zoomchoice ul li {
    padding: 5px 10px;
    width: 150px;
    transition: .3s;
    list-style: none;
}

.zoomchoice ul li:hover {
    background: var(--optcolor);
    color: #fff;
}

.zoomchoice ul li i {
    float: right;
}

.rate {
    padding: 4px;
}

.rate i {
    font-size: 15px;
    padding: 2px;
}

.rate i.active {
    color: var(--maincolor);
}

.rating i {
    font-size: 16px;
}

.rating i.active {
    transition: .3s;
    color: var(--maincolor);
}

.rate b {
    color: var(--optcolor);
    font-size: 14px;
    border: 1px solid var(--optcolor);
    padding: 3px;
    border-radius: 3px;
    font-weight: normal;
    user-select: none;
}

.rate span {
    background: var(--optcolor);
    color: #fff;
    padding: 3px 5px;
    margin-left: 5px;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.rate span:hover {
    transition: .3s;
    background: var(--maincolor);
}

.rate span .rating {
    background: var(--optcolor);
    color: #fff;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 5px;
    border-radius: 3px;
    position: absolute;
    display: flex;
    justify-content: center;
    padding: 20px;
    box-shadow: 0 0 7px rgb(0, 0, 0, .7);
    visibility: hidden;
    z-index: 10;
}

.rate span .rating.show {
    visibility: visible;
    animation: aniRate .6s linear;
}

@keyframes aniRate {
    0% {
        top: 50px;
        opacity: 0;
        transform: translateX(-50%) rotate(5deg);
    }
    25% {
        visibility: visible;
        opacity: .5;
        top: 30px;
        transform: translateX(-50%) rotate(15deg);
    }
    50% {
        visibility: visible;
        opacity: 1;
        top: 30px;
        transform: translateX(-50%) rotate(-15deg);
    }
    75% {
        visibility: visible;
        top: 30px;
        transform: translateX(-50%) rotate(15deg);
    }
    100% {
        visibility: visible;
        top: 30px;
        transform: translateX(-50%) rotate(0deg);
    }
}

.rating:before {
    content: '';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom: 8px solid var(--optcolor);
    height: 0px;
    width: 0px;
}

.container {
    width: 70%;
    float: left;
    padding-left: 10px;
}

.container.checkout {
    width: calc(70% - 10px);
    padding-left: 0;
    padding: 10px;
    border: var(--grayBorder);
    margin-right: 10px;
}

.title {
    width: 100%;
    float: left;
    margin-bottom: 10px;
    position: relative;
    border-top: var(--grayBorder);
    border-bottom: var(--grayBorder);
    position: sticky;
    top: 38px;
    background: #fff;
    z-index: 10;
}

.title h1 {
    background-color: var(--optcolor);
    color: #fff;
    float: left;
    font-weight: unset;
    text-transform: uppercase;
    padding: 10px 15px;
    padding-right: 20px;
    font-size: 18px;
    position: relative;
    clip-path: polygon(0% 100%, 0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}

.title ul,
.iconBtn {
    position: absolute;
    right: 0;
    top: 50%;
    display: flex;
    transform: translateY(-50%);
}

.title.catUl ul {
    position: unset;
    margin-left: 30px;
    float: left;
    transform: unset;
    padding-top: 10px;
}

.title ul li {
    list-style: none;
    padding: 5px;
    font-size: 10px;
    border-right: var(--grayBorder);
}

.title ul li:last-child {
    border-right: none;
}

.title ul li:hover {
    color: var(--optcolor);
    cursor: pointer;
    transition: .3s;
}

.iconBtn i {
    margin: 0 4px;
    cursor: pointer;
    font-size: 20px;
}

.iconBtn i:hover {
    color: var(--optcolor);
    transition: .3s;
}

.iconBtn select {
    border: var(--grayBorder);
}

.title ul button,
.button-default {
    border: none;
    background: var(--optcolor);
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}

.title ul button:hover,
.button-default:hover {
    background: var(--maincolor);
    transition: .3s;
}

.button-default {
    padding: 10px 20px;
    font-weight: normal;
    margin-top: 10px;
    font-size: 16px;
}

.productsSlider {
    width: 100%;
    float: left;
    border-right: var(--grayBorder);
    border-left: var(--grayBorder);
    position: relative;
    margin-bottom: 10px;
}

.productsSlider.categoryHolder,
.productsSlider.categoryHolder.fetch {
    border: none;
    display: unset;
}

.productsSlider.categoryHolderList {
    border: none;
    display: flex;
    grid-template-rows: auto;
    grid-template-columns: calc(12.5% - 2px) calc(12.5% - 2px) calc(12.5% - 2px) calc(12.5% - 2px) calc(12.5% - 2px);
    grid-gap: 2px;
    margin-bottom: 2px;
}

.productsSlider.categoryHolderList.subcat {
    display: flex;
    height: 150px;
    position: relative;
}

.productsSlider.categoryHolderList.subcat button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 5px 10px;
    background-color: var(--maincolor);
    border: var(--grayBorder);
    color: #fff;
    cursor: pointer;
}

.productsSlider.categoryHolderList.subcat button::nth-child(1) {
    right: 10px;
}

.productsSlider.categoryHolderList.subcat .productHolder.categoryPane {
    background-color: rgb(110, 69, 69);
    width: 20%;
    margin: 5px;
    height: 100%;
    margin-left: 5px;
    background-color: #fff;
}

.productsSlider.categoryHolderList.grid {
    grid-template-columns: 100%;
    grid-gap: 0px;
}

.productsSlider.categoryHolder button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 2;
    width: 40px;
    height: 40px;
    background-color: var(--optcolor);
    color: #fff;
    cursor: pointer;
    line-height: 20px;
    font-size: 20px;
    text-align: center;
    border: var(--grayBorder);
    border-left: unset;
    border-radius: 0 10px 10px 0;
}

.productsSlider.categoryHolder button.next {
    left: unset;
    right: 0;
    border-left: var(--grayBorder);
    border-right: unset;
    border-radius: unset;
    border-radius: 10px 0 0 10px;
}

.productsSlider.categoryHolder button:hover {
    transition: .3s;
    background-color: var(--maincolor);
}

.productHolder {
    width: 20%;
    border: var(--grayBorder);
    border-right: unset;
    float: left;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.productHolder.categoryPane {
    width: calc(12.5% - 2px);
    border: var(--grayBorder);
    margin: 1px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.productHolder ul {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: -30px;
    background: var(--optcolor);
    color: #fff;
    transition: .3s;
}

.productHolder:hover ul {
    left: 0;
}

.productHolder:hover img {
    transition: .5s ease-in-out;
    transform: scale(1.5) rotate(7deg);
}

.productHolder ul li {
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 10px;
    text-align: center;
    list-style: none;
    cursor: pointer;
}

.productHolder ul li:hover i {
    transform: scale(1.5);
    color: var(--maincolor);
    transition: .3s;
}

.tags,
.suggesttag {
    width: 100%;
    float: left;
}

.tags i,
.suggesttag i {
    padding: 3px 5px;
    float: left;
    font-style: normal;
    margin-bottom: 4px;
    border-radius: 3px;
    margin-right: 4px;
}

.tags i span,
.suggesttag i span {
    color: red;
    background: #fff;
    font-size: 10px;
    padding: 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
    border-radius: 10px;
}

.tags i span:hover,
.suggesttag i span:hover {
    transition: .3s;
    color: #fff;
    background: red;
}

.tags i:nth-child(9n + 1),
.suggesttag i:nth-child(9n + 1) {
    background: #cce;
}

.tags i:nth-child(9n + 2),
.suggesttag i:nth-child(9n + 2) {
    background: #fdd;
}

.tags i:nth-child(9n + 3),
.suggesttag i:nth-child(9n + 3) {
    background: #ddf;
}

.tags i:nth-child(9n + 4),
.suggesttag i:nth-child(9n + 4) {
    background: #fcc;
}

.tags i:nth-child(9n + 5),
.suggesttag i:nth-child(9n + 5) {
    background: #fdf;
}

.tags i:nth-child(9n + 6),
.suggesttag i:nth-child(9n + 6) {
    background: #ffc;
}

.tags i:nth-child(9n + 7),
.suggesttag i:nth-child(9n + 7) {
    background: #ffcced;
}

.tags i:nth-child(9n + 8),
.suggesttag i:nth-child(9n + 8) {
    background: #ddfddc;
}

.layautList.active,
.layautGrid.active {
    color: var(--optcolor);
}

.productHolder p {
    padding: 10px;
}

.tagsHolder {
    width: 100%;
    margin-bottom: 10px;
    float: left;
}

.colorHolder,
.addcolor,
.itemColor,
.sizeHolder {
    height: 40px;
    width: 40px;
    background-color: #fff;
    float: left;
    margin: 0 2px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    font-size: 20px;
    cursor: pointer;
    border: var(--grayBorder);
    position: relative;
}

.itemColor {
    width: 60px;
    height: 60px;
    background-size: cover;
    display: flex;
}

.itemColor img {
    width: 100%;
    height: 100%;
    justify-content: center;
    object-fit: cover;
    align-items: center;
}

.itemColor.active {
    border: 3px solid var(--maincolor);
    /* padding: 5px; */
}

.colorImages {
    position: absolute;
    /* width: 400px; */
    /* height: 60px; */
    background-color: var(--maincolor);
    z-index: 100;
    border-radius: 5px;
    bottom: 0px;
    padding: 1px;
    display: flex;
    opacity: 0;
    transition: .3s;
    justify-content: center;
    align-items: center;
}

.colorImages.active {
    bottom: 40px;
    opacity: 1;
    display: flex;
}

.colorImages:before {
    position: absolute;
    content: '';
    bottom: -28px;
    left: 23px;
    border: 15px solid transparent;
    border-top: 15px solid var(--maincolor);
    /* border-right: 7px solid #793a27;
    border-left: 7px solid #793a27; */
}

.colorImage {
    float: left;
    width: 60px;
    height: 60px;
    overflow: hidden;
    padding: 3px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.colorImage img {
    width: 100%;
    height: 100%;
    transition: .3s;
    border-radius: 5px;
    object-fit: cover;
    background-color: #fff;
}

.colorImage.active img {
    border: 3px solid var(--optcolor);
}

.sizeHolder {
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: unset;
    color: #000;
    width: unset;
    padding: 5px 10px;
    float: left;
    /* height: 20px; */
}

.sizeHolder.active {
    background-color: var(--maincolor);
    color: #fff;
}

.colors {
    width: 100%;
    float: left;
    margin-top: 10px;
    position: relative;
}

.colors b {
    width: 100%;
}

.colorModal {
    display: none;
}

.addcolor {
    background-color: var(--optcolor);
}

.addcolor:hover {
    transition: .3s;
    background-color: var(--maincolor);
}

.colorPicker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 300px;
    background-color: #fff;
    box-shadow: 5px 5px 5px rgb(0, 0, 0, .5);
}

.colorPicker div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.colorPicker input {
    border: var(--optcolor);
    width: 200px;
    height: 40px;
}

.colorPicker button {
    border: var(--optcolor);
    width: 50px;
    height: 40px;
    cursor: pointer;
}

.colorPicker button:hover {
    transition: .3s;
    background-color: var(--maincolor);
    color: #fff;
}

.colorPicker h3 {
    width: 100%;
    padding: 5px 10px;
    background-color: var(--optcolor);
    color: #fff;
    margin-bottom: 10px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    font-style: normal;
    cursor: pointer;
}

.colorModal {
    position: fixed;
    content: '';
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, .9);
    z-index: 101;
}

.sell_img.product,
.sell_img.products {
    width: 100%;
    float: left;
    overflow: hidden;
    display: flex;
    height: 100px;
    padding-right: unset;
    margin-left: 1px;
}

.productHolder.categoryPane.list {
    width: calc(100% - 4px);
    border: var(--grayBorder);
    margin: 2px;
    text-align: left;
}

.proInfo {
    font-size: 12px !important;
}

.productHolder.categoryPane.list .proInfo {
    width: calc(80% - 10px);
    float: left;
}

.productHolder .proInfo .p {
    display: none;
}

.productHolder.list .proInfo .p {
    display: block;
}

.productHolder.list .proInfo b {
    font-size: 20px;
    color: var(--maincolor);
}

.productHolder.list .proInfo .sval {
    color: var(--optcolor);
    font-size: 12px;
}

.productHolder.list .proInfo strong {
    font-size: 20px;
    color: #ccc;
}

.productHolder .proInfo strong {
    text-decoration: line-through;
    color: #ccc;
    display: inline-block;
    padding-bottom: 2px;
    padding-top: 2px;
    /* width: 100%; */
    float: none;
}

.productHolder.categoryPane.list a {
    width: unset;
    margin: unset;
    margin-left: unset;
    transform: unset;
}

.productHolder.categoryPane.list .sell_img {
    width: 20%;
    float: left;
    padding-right: 10px;
}

.proBtn {
    width: 100%;
    float: left;
    margin-top: 10px;
    line-height: 25px;
}

.proBtn.pay {
    margin-bottom: 10px;
    display: flex;
    justify-self: center;
    align-items: center;
}

.proBtn.paynow {
    margin-bottom: 10px;
    display: flex;
    justify-self: center;
    align-items: center;
    border-radius: 5px;
    width: 100%;
    /* background: var(--optcolor); */
    overflow: hidden;
    float: left;
}

.proBtn.paynow .input,
.proBtn.paynow a {
    width: 50%;
    display: unset;
    transform: unset;
    float: left;
    margin: unset;
    height: 100%;
}

.proBtn a,
.readmore {
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 3px 5px;
    margin-bottom: 5px;
    background: var(--maincolor);
    color: #fff;
    float: left;
    text-align: center;
    border-radius: 20px;
    padding: 10px 20px !importantv;
}

.readmore {
    border-radius: 5px;
    width: unset;
    margin-left: unset;
    transform: unset;
}


/*product*/

.question {
    background: #FF2A2A;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    border-radius: 3px;
    position: relative;
    font-size: 12px;
    float: left;
    height: 30px;
    width: 30px;
}

.question:hover .ToolTip {
    display: block;
}

.ToolTip {
    transition: 1s;
    position: absolute;
    top: 40px;
    left: 50%;
    width: 200px;
    float: left;
    background: red;
    transform: translateX(-50%);
    padding: 5px;
    border-radius: 5px;
    display: none;
    animation: aniRate .8s ease-in-out;
}

.ToolTip:before {
    position: absolute;
    top: -20px;
    left: 50%;
    content: '';
    border: 10px solid transparent;
    border-bottom: 10px solid #FF2A2A;
    transform: translateX(-50%);
}

.new {
    position: absolute;
    top: 0;
    right: 0;
    background: #FF2A2A;
    color: #fff;
    padding: 3px;
}

.new.flag {
    position: absolute;
    top: 0;
    right: unset;
    left: 0;
    color: #fff;
    height: 20px;
    width: 30px;
    padding: 0;
}

.new.flag img {
    width: 100%;
    height: 100%;
}

#currency {
    padding: 0;
}

#currency select {
    padding: 10px;
    border: none;
    height: 100%;
}

.productDetails {
    width: calc(100% - 400px);
    float: left;
}

.productImage {
    width: calc(400px);
    float: left;
}

.productImage .thumb {
    width: 400px;
    height: 400px;
    margin-bottom: 10px;
    float: left;
    display: flex;
    border: var(--grayBorder);
    overflow: hidden;
    padding-right: unset;
    mix-blend-mode: var(--maincolor);
}

.productImage .subThumb {
    width: 400px;
    float: left;
    position: relative;
}

.productImage .sell_img.subT {
    width: 16.66%;
    height: 60px;
    cursor: pointer;
    float: left;
    overflow: hidden;
    margin-bottom: 5px;
}

.productImage .sell_img.subT:hover {
    /* transform: scale(1.1); */
    opacity: 0.7;
    transition: .3s;
}

.productDetails {
    position: relative;
    padding: 10px;
}

.prolocthumb {
    width: 30px;
    height: 15px;
    padding-left: 5px;
}

.productDetails h1 {
    font-size: 25px;
    font-weight: normal;
    float: left;
    padding: 10px 0;
    padding-top: 0;
    width: 100%;
}

.productDetails .rfw {
    font-size: 30px;
    color: var(--maincolor);
    font-weight: bold;
    padding: 10px 0;
    float: left;
    width: 100%;
}

.productDetails .rfw strong {
    font-weight: normal;
}

.productDetails .rfw span {
    color: #4b4b4b;
    text-decoration: line-through;
    font-size: 20px;
}

.proBtn a {
    float: left;
}

.proBtn button {
    background-color: var(--maincolor);
    border-radius: 20px;
    color: #fff;
    border: none;
    float: left;
    padding: 10px 20px;
}

.proBtn.lg button {
    padding: 10px 30px;
}

.proBtn button:hover {
    background-color: var(--optcolor);
    transition: .3s;
    cursor: pointer;
}

.proBtn.cart {
    margin-bottom: 0;
}

.proBtn.cart button {
    margin-bottom: 0;
    padding: 5px 20px !important;
}

.proBtn h1 {
    width: 100%;
    font-style: normal;
    font-size: 20px;
    margin-bottom: 10px;
}

.proBtn.pay img {
    height: 30px;
    margin-left: 15px;
}

.cart-size {
    float: left;
    border: 1px solid var(--maincolor);
    overflow: hidden;
    margin-right: 5px;
    transition: .3s;
    height: 26px;
    user-select: none;
    position: relative;
    z-index: 11;
    border-radius: 20px;
}

.cart-size.item {
    height: 40px;
}

.cart-size.item span {
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
}

.proBtn button .item {
    padding: 8px;
}

.cart-size:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.cart-size input {
    width: 50px;
    float: left;
    padding: 5px;
    border: none;
    height: 100%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-align: center;
}

.cart-size span {
    padding: 5px;
    float: left;
    height: 100%;
    background: var(--maincolor);
    cursor: pointer;
    line-height: 13px;
    color: #fff;
    transition: .3s;
}

.cart-size span:hover {
    background: var(--optcolor);
}

.detailsPane,
.detailBtn,
.detailHolder {
    width: 100%;
    float: left;
    overflow-x: scroll;
}

.detailsPane {
    margin-top: 10px;
}

.detailBtn span {
    padding: 10px 20px;
    border: var(--grayBorder);
    border-bottom: unset;
    float: left;
    margin-right: 5px;
    cursor: pointer;
    text-transform: uppercase;
}

.detailBtn span.active {
    background-color: #ccc;
    color: var(--optcolor);
}

.detailHolder.det ol,
.detailHolder.det ul {
    margin-left: 40px;
}

.detailHolder.det h1,
h2,
h3,
h4,
h5,
h6,
th {
    color: #4b4b4b;
}

.detailHolder {
    border: var(--grayBorder);
    padding: 10px;
    display: none;
}

.detailHolder.active {
    display: block;
}

.detailHolder.rev form {
    border-bottom: 1px solid #ccc;
    float: left;
    padding-bottom: 10px solid #ccc;
}

.detailHolder.rev input,
textarea {
    width: 100%;
    float: left;
    padding: 10px 20px;
    border: var(--grayBorder);
    margin-top: 10px;
    resize: vertical;
}

.detailHolder.rev textarea {
    min-height: 100px;
    max-height: 200px;
    font-size: 15px;
}

.revimg {
    width: 200px;
    height: 200px;
    margin-top: 10px;
    float: left;
    overflow: hidden;
    display: flex;
}

.revimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    justify-content: center;
}

.detailHolder.rev input:focus,
textarea:focus {
    border: 1px solid var(--optcolor);
}

.detailHolder .reviews {
    width: 100%;
    float: left;
    padding: 10px 0;
    border-bottom: var(--grayBorder);
}

.detailHolder .reviews:last-child {
    border-bottom: unset;
}

.detailHolder .reviews h1,
.detailHolder .reviews p {
    width: 100%;
    float: left;
    font-weight: normal;
    font-size: 24px;
    margin-bottom: 10px;
}

.detailHolder .reviews p {
    font-size: 16px;
}

.postedby {
    font-size: 10px;
    margin-top: 10px;
}


/*account*/

.accountPaneHolder {
    width: calc(50%);
    float: left;
    margin-left: 50%;
    transform: translateX(-50%);
}

.accountPane {
    width: calc(100%);
    float: left;
    border: var(--grayBorder);
    padding: 10px;
    position: relative;
    top: 0;
    /* margin-top: 50px; */
}

.btm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

.btm .proBtn {
    width: unset !important;
}

.accountPane.confirm {
    display: block !important;
}

.itemRelated {
    display: none;
}


/* 
.accountPane:first-child {
    margin-right: 5px;
}
 */

.accountPane:last-child {
    /* margin-left: 5px; */
    display: none;
}

.accountPane h1,
.container.checkout h1,
.cartSummary h1 {
    width: 100%;
    float: left;
    font-size: 20px;
    font-weight: normal;
    padding: 5px;
    border-bottom: var(--grayBorder);
    margin-bottom: 20px;
}

.container.checkout.paid {
    width: 50%;
    margin-left: 50%;
    transform: translateX(-50%);
}

.cartSummary table {
    width: 100%;
}

.container.checkout img {
    width: 50%;
    float: left;
    margin-left: 25%;
}

.container.checkout h3 {
    width: 100%;
    text-align: center;
    float: left;
}

.container.checkout a {
    width: unset;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
}

.container.checkout.pay {
    width: 50%;
}

.cartSummary.info.pay {
    width: calc(50% - 10px);
}


/*shop*/

.shopPane {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.map {
    width: 30%;
    float: left;
    border: var(--grayBorder);
}

.map span,
.gmnoprint gm-style-cc {
    display: none;
}

.map section {
    width: 100%;
    float: left;
    background: #000;
    padding: 3px;
    text-align: center;
    color: #fff;
}

#map {
    width: 100%;
    float: left;
    height: 500px;
}

.nearmap {
    width: calc(80% - 10px);
    margin-left: 10px;
    float: left;
}

#searchInput {
    width: 100%;
    float: left;
    padding: 10px 20px;
    border: var(--grayBorder);
    margin-bottom: 10px;
}

.gm-style .gm-style-iw-c {
    padding: unset;
    width: 600px;
    height: 200px;
    float: left;
}

.gm-style .gm-style-iw-d {
    overflow: hidden;
}

.gm-style .gm-style-iw-d .thumb {
    width: 40%;
    height: 200px;
    float: left;
    display: flex;
    overflow: hidden;
}

.gm-style .gm-style-iw-d .thumb img {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.gm-style .gm-style-iw-d .info {
    width: 60%;
    height: 200px;
    float: left;
    padding: 10px;
    line-height: 30px;
    position: relative;
}

.gm-style .gm-style-iw-d .info h1 {
    width: 100%;
    float: left;
    font-size: 16px;
    padding: 3px 0;
}

.gm-style .gm-style-iw-d .info label {
    width: 100%;
    float: left;
}

.gm-style .gm-style-iw-d .info .infoa {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #fff;
    background: var(--optcolor);
    border-radius: 3px;
    padding: 3px 5px;
    line-height: unset;
}

.gm-ui-hover-effect {
    top: 0;
    right: 0;
}

.gm-style .gm-style-iw-c button {
    background: var(--maincolor);
    color: #fff;
    padding: 5px;
    cursor: pointer;
}

.shopThumb {
    width: 30%;
    float: left;
    height: 300px;
    display: flex;
    position: relative;
    background: var(--optcolor);
}

.shopThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    justify-content: center;
}

.shopInfo {
    width: calc(70% - 4px);
    margin: 0 2px;
    float: left;
    padding: 5px;
    position: relative;
}

.shopInfo h1 {
    width: 100%;
    float: left;
    font-style: 18px;
    font-weight: normal;
}

.shopInfo span {
    width: 100%;
    float: left;
    line-height: 20px;
}

.productsSlider.categoryHolder.shop {
    margin-left: 5px;
    width: calc(80% - 5px);
}

.proBtn.share span {
    width: 100%;
    float: left;
    margin-bottom: 5px;
}

.proBtn.share button,
.proBtn button {
    margin-bottom: 5px;
    margin-right: 5px;
}

.proBtn.share button:nth-child(2) {
    background-color: #3b5998;
}

.proBtn.share button:nth-child(3) {
    background-color: #00acee;
}

.proBtn.share button:nth-child(4) {
    background-color: #25D366;
}

.proBtn.share button:nth-child(5) {
    background-color: #0e76a8;
}

.proBtn.share button:nth-child(6) {
    background-color: #D44638;
}


/*shopping cart*/

.cartList {
    width: calc(70% - 4px);
    margin-right: 4px;
    float: left;
}

.cartList.order {
    width: calc(100% - 4px);
    margin-left: 4px;
    float: left;
}

.cartList h1 {
    font-weight: normal;
    font-size: 20px;
}

.cartSummary {
    width: 80%;
    float: left;
    border: var(--grayBorder);
    padding: 5px;
}

.cartSummary.info {
    width: 30%;
    float: left;
    border: var(--grayBorder);
    padding: 5px;
}

.cartSummary.info img {
    width: 70%;
    margin-left: 50%;
    transform: translateX(-50%);
}

.cartSummary.info h3 {
    width: 100%;
    text-align: center;
}

.cartSummary.info .partnershipa {
    width: unset;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    margin-bottom: 10px;
}


/*profile*/

.profileMenu {
    width: 20%;
    float: left;
    position: sticky;
    top: 50px;
}

.profileMenu h1 {
    width: 100%;
    float: left;
    background: var(--optcolor);
    color: #fff;
    font-size: 20px;
    padding: 5px 10px;
    font-weight: unset;
}

.profileMenu ul {
    margin-bottom: 10px;
    border: var(--grayBorder);
    border-bottom: none;
    float: left;
}

.profileMenu ul li {
    list-style: none;
    padding: 10px 20px;
    border-bottom: var(--grayBorder);
    width: 100%;
    float: left;
    position: relative;
    color: var(--optcolor);
}

.profileMenu ul li ul {
    border: none;
    background: #f1f1f1;
    border-bottom: none;
    margin-bottom: -10px;
    margin-top: 10px;
    margin-left: -20px;
    color: #fff;
    height: 0;
    overflow: hidden;
    width: calc(100% + 40px);
    transition: .5s ease-in-out;
}

.profileMenu ul li ul li span,
.profileMenu ul li span {
    background: var(--maincolor);
    padding: 2px 3px;
    border-radius: 3px;
    float: right;
    color: #fff;
    border: 1px solid #fff;
}

.profileMenu ul li ul.open {
    height: unset;
    overflow: hidden;
}

.profileMenu ul li i {
    padding-right: 5px;
    width: 20px;
    text-align: center;
}

.profileMenu ul li:hover {
    transition: .3s;
    background: var(--maincolor);
    color: #fff;
    cursor: pointer;
}

.profile {
    float: left;
    width: 80%;
}

.profile.user {
    width: 100%;
    /* display: flex; */
}

.profile.user a {
    width: calc(25% - 10px);
    min-height: 100px;
    border-radius: 5px;
    display: flex;
    background: #f1f1f1;
    float: left;
    margin: 5px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    font-size: 20px;
    padding: 20px;
}

.profile.user a:hover {
    color: #fff;
    background: var(--optcolor);
}

.profile.user a i {
    font-size: 50px;
    margin-right: 10px;
}

.profile .thumb {
    width: 200px;
    height: 200px;
    margin: 0 10px;
    float: left;
    position: relative;
    display: flex;
}

.ptrofile .thumb.pro {
    display: unset;
}

.ptrofile .thumb.pro img {
    width: unset;
    object-fit: unset;
    justify-content: unset;
}

.profile .thumb.small {
    width: calc(16.66% - 4px);
    height: 150px;
    margin: 2px;
    background: #f1f1f1;
    border: 3px dashed var(--optcolor);
}

.profile .thumb.small.new {
    border: var(--grayBorder);
}

.profile .thumb.small.new i {
    background: #f72d33;
}

.thumb.small {
    position: relative;
}

.thumb.small i.active {
    border-radius: 100px;
    height: 40px;
    width: 40px;
    line-height: 20px;
    z-index: 1;
}

.thumb.small i.active:before {
    border-radius: 100px;
    height: 40px;
    width: 40px;
    position: absolute;
    content: '';
    left: 50%;
    top: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    border: 5px dashed var(--maincolor);
    z-index: -1;
    animation: aniUp 2s linear infinite;
}

@keyframes aniUp {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.profile .thumb img {
    width: 100%;
    object-fit: cover;
    justify-content: center;
    height: 100%;
    float: left;
    background: #f2f2f2;
}

.thumb span,
.thumb.small i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--optcolor);
    color: #fff;
    padding: 10px;
    border-radius: 3px;
    cursor: pointer;
}

.profileInfo {
    float: left;
    width: calc(100% - 220px);
    position: relative;
}

.editable {
    padding: 3px;
    background: #fff;
    border: 1px solid #ccc;
}

.editable:focus {
    background: #dde;
}

.profileInfo.shops {
    float: left;
    margin: 0 5px;
    width: calc(100% - 10px);
    position: relative;
    display: flex;
}

.announce {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 40px;
}

.announce svg,
.no-records img {
    width: 400px;
    height: 300px;
    float: left;
    margin: 0;
}

.announce a {
    background: var(--optcolor);
    color: #fff;
    padding: 10px 20px;
}

#emptySVG {
    position: relative;
}

#cloud {
    animation: animCloud 1s linear infinite alternate;
    transform-origin: center;
    transition: 1s;
}

@keyframes animCloud {
    from {
        transform: scale(.8);
    }
    to {
        transform: scale(1);
    }
}

#box {
    animation: animBox 1s linear infinite alternate;
    transform-origin: left;
    transition: 1s;
}

@keyframes animBox {
    from {
        transform: rotate(5deg);
        margin-left: -5px;
    }
    to {
        transform: rotate(0deg);
        margin-left: 0px;
    }
}

#arm {
    animation: animArm 1s linear infinite alternate;
    transform-origin: left;
    transition: 1s;
}

@keyframes animArm {
    from {
        transform: rotate(5deg);
        margin-left: -5px;
    }
    to {
        transform: rotate(0deg);
        margin-left: -5px;
    }
}

.profileInfo.prici {
    float: left;
    margin: 0 5px;
    width: calc(100% - 10px);
    position: relative;
}

.pricing {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: auto;
    grid-gap: 2px;
}

.pricing a {
    border: var(--grayBorder);
    position: relative;
    color: #4b4b4b;
    text-decoration: none;
    background: #fff;
}

.pricing a:hover {
    transition: .3s;
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 0 5px rgb(0, 0, 0, .5);
}

.priceDiv h1 {
    background: var(--optcolor);
    color: #fff;
    font-weight: unset;
    font-size: 25px;
    text-align: center;
    width: 100%;
    padding: 10px 20px;
}

.priceDiv h2 {
    background: var(--maincolor);
    color: #fff;
    font-weight: unset;
    font-size: 20px;
    text-align: center;
    width: 100%;
    float: left;
    padding: 10px 20px;
    position: sticky;
    top: 0;
}

.priceDiv ul {
    float: left;
    width: 100%;
}

.priceDiv ul li {
    list-style: none;
    padding: 10px 20px;
    width: 100%;
}

.priceDiv ul li b {
    float: right;
    background: #ffb330;
    color: #fff;
    padding: 2px 3px;
    border-radius: 3px;
}


/*create shop*/

.inputHolder {
    width: calc(50% - 4px);
    float: left;
    position: relative;
    border: 1px solid #ccc;
    margin: 0 2px;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
}

.inputHolder.account {
    width: calc(100%);
}

.inputHolder span {
    top: 50%;
    left: 2%;
    transform: translateY(-50%);
    font-size: 16px;
    position: absolute;
    user-select: none;
    transition: .3s ease-in-out;
    z-index: 1;
    pointer-events: none;
}

.input {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.input .icon {
    font-size: 16px;
    width: 60px;
    text-align: center;
    background: #ccc;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon.viewpass {
    background: #ccc;
    border-radius: 0 5px 5px 0;
    font-style: normal;
}

.icon.viewpass:hover {
    color: var(--maincolor);
    cursor: pointer;
    transition: .3s;
}

.input .field {
    width: calc(100% - 40px);
    position: relative;
}

.input .field .put {
    width: 100%;
    border: none;
    font-size: 16px;
    padding: 20px 10px 5px 10px;
    height: 50px;
    border-radius: 0 5px 5px 0;
}

.input .field .put:focus~span,
.inputHolder span.clicked {
    top: 10%;
    transform: translateY(-10%);
    font-size: 12px;
    color: var(--optcolor);
}

.input.account {
    display: unset;
    border: none;
    float: right;
}

.inputHolder.account {
    display: flex;
}

.inputHolder.account .view {
    position: absolute;
    left: unset;
    cursor: pointer;
    right: 15px;
    top: 50%;
    font-size: 30px;
    transform: translateY(-50%);
    z-index: 100;
}


/*shops*/

.shops {
    width: 100%;
    display: grid;
    grid-template-columns: calc(20% - 2px) calc(20% - 2px) calc(20% - 2px) calc(20% - 2px) calc(20% - 2px);
    grid-template-rows: auto;
    grid-gap: 4px;
}

.shop {
    width: 100%;
    float: left;
    border: var(--grayBorder);
}

.shop .thumb {
    width: 100%;
    height: 200px;
    margin: unset;
    float: left;
    display: flex;
    border: none;
}

.shop .thumb img {
    width: 100%;
    height: 100%;
    justify-content: center;
    object-fit: cover;
}

.shop h4 {
    width: 100%;
    text-align: center;
    float: left;
    padding: 5px 10px;
    color: #4b4b4b;
}

.jscolor {
    border: var(--grayBorder);
    width: 50px;
    height: 50px;
}

.color {
    width: 100%;
    float: left;
    margin: 5px;
}


/*partnership*/

.partnershipa {
    width: 100%;
    float: left;
    background: var(--maincolor);
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    text-align: center;
}

.partnershipa:hover {
    text-decoration: none;
    background: var(--optcolor);
    transition: .3s;
}

#over {
    position: fixed;
    background: #000;
    opacity: .8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    display: none;
}

.checkoutbtn {
    width: 100%;
    float: left;
    background: var(--maincolor);
    color: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 20px;
    margin-top: 10px;
}

.checkoutbtn:hover {
    color: #fff;
    background: var(--optcolor);
}

.cartSummary.checkout {
    margin-left: 50%;
    transform: translateX(-50%);
}

.cartSummary.checkout h1 {
    text-align: center;
    font-size: 30px;
    color: unset;
}

.cartSummary.checkout input {
    margin: 5px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    background: var(--optcolor);
    border-radius: 100px;
    transition: .3s;
    position: relative;
    float: left;
}

.cartSummary.checkout input:checked::before {
    content: '';
    height: 18px;
    width: 18px;
    background: var(--maincolor);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100px;
    animation: aniRadio .5s ease-in-out;
}

.cartSummary.checkout input:checked {
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

.cartSummary.checkout label {
    float: left;
    cursor: pointer;
    line-height: 35px;
    width: 100%;
}

@keyframes aniRadio {
    from {
        height: 0px;
        width: 0px;
    }
    to {
        height: 18px;
        width: 18px;
    }
}

.newrate {
    margin-bottom: 5px;
}

.ratecols {
    width: 100%;
    float: left;
}

.ratecols label {
    float: left;
    margin-right: 5px;
    font-size: 14px;
}

.col {
    height: 15px;
    width: 150px;
    border: var(--grayBorder);
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
}

.col span {
    height: 100%;
    float: left;
    background: var(--maincolor);
}


/*player*/

.playerHolder {
    width: 100%;
    position: fixed;
    height: 100%;
    background: rgb(0, 0, 0, .9);
    top: 0;
    left: 0;
    z-index: 30;
    display: none;
}

.player {
    position: fixed;
    width: 800px;
    height: 450px;
    background: #000;
    z-index: 31;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.player.full {
    width: 100%;
    height: 100%;
}

.player img {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    z-index: 5;
    border-radius: 5px;
}

.slogan {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    padding: 3px 6px;
    z-index: 5;
}

.player video {
    width: 100%;
    float: left;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.playerMenu {
    position: absolute;
    z-index: 5;
    background: #fff;
    border: var(--grayBorder);
    display: none;
}

.playerMenu ul {
    display: block;
}

.playerMenu ul li {
    list-style: none;
    padding: 3px 6px;
    cursor: pointer;
    min-width: 200px;
}

.playerMenu ul li i {
    min-width: 20px;
    text-align: center;
}

.playerMenu ul li:hover {
    background: var(--optcolor);
    color: #fff;
    transition: .3s;
}

.player:hover .videocontroller {
    display: flex;
}

.videocontroller {
    position: absolute;
    bottom: 0;
    justify-content: center;
    align-items: center;
    display: none;
    left: 0;
    width: 100%;
    background: var(--optcolor);
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    transition: .3s ease-in-out;
    height: 60px;
    z-index: 3;
    opacity: .7;
}

.videocontroller:hover {
    opacity: 1;
}

.videocontroller i {
    float: left;
    cursor: pointer;
    transition: .3s ease-in-out;
    margin-right: 5px;
}

.loader {
    width: 60%;
    float: left;
    height: 6px;
    background: #fff;
    position: relative;
    border-radius: 3px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, .9);
}

.loader span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -25px;
    height: 15px;
    background: #fff;
    font-size: 12px;
    line-height: 10px;
    color: #000;
    padding: 3px;
    display: none;
}

.loader:hover span {
    display: block;
}

.loader span:before {
    position: absolute;
    left: 50%;
    bottom: -10px;
    content: '';
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top: 5px solid #fff;
}

.timer {
    float: left;
    font-size: 12px;
    padding: 10px;
}

#fillout {
    width: 0%;
    height: 6px;
    background: var(--maincolor);
    position: absolute;
    top: 0;
    left: 0px;
    border-radius: 3px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, .9);
}

#fillout i {
    width: 18px;
    content: '';
    height: 18px;
    background: var(--maincolor);
    position: absolute;
    top: -7.5px;
    right: -9px;
    line-height: 10px;
    font-style: normal;
    border-radius: 100px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, .9);
}

#expand {
    position: absolute;
    right: 10px;
}

.vthumb,
.vithumb {
    width: 100%;
    height: 100%;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0, 0, 0, .7);
    z-index: 2;
}

.vthumb i,
.vithumb i {
    width: 150px;
    height: 150px;
    border: 2px solid #fff;
    border-radius: 100px;
    text-align: center;
    line-height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    padding-left: 10px;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    font-size: 100px;
    opacity: .5;
}

.vithumb i {
    height: 50px;
    width: 50px;
    line-height: 50px;
    padding-left: 5px;
    font-size: 30px;
}

.vthumb.active:before {
    height: 150px;
    width: 150px;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    border: 5px dashed #fff;
    animation: aniUp 5s linear infinite;
}

.vthumb.active i {
    border: unset;
}

.vthumb i:hover {
    transition: .3s;
    opacity: 1;
    cursor: pointer;
}

#volp {
    font-size: 12px;
    float: left;
}

.player input[type="range"] {
    appearance: none !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--maincolor);
    height: 6px;
    border-radius: 3px;
    float: left;
    position: relative;
    margin-right: 5px;
    width: 10%;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, .9);
}

#volume {
    -webkit-appearance: none;
    outline: none;
}

#volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: var(--maincolor);
    cursor: pointer;
    border-radius: 100px;
}

#volume::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: var(--maincolor);
    cursor: pointer;
    border-radius: 100px;
}


/*notification*/

.profileInfo.notificaton {
    width: calc(100% - 10px);
    float: left;
    margin-left: 10px;
}

.notifLine,
.orderLine {
    width: 100%;
    float: left;
    border-bottom: var(--grayBorder);
    padding: 10px 5px;
}

.notifLine:last-child,
.orderLine:last-child {
    border-bottom: none;
}

.notifLine i {
    float: right;
    font-size: 10px;
}

.notifLine span {
    float: left;
    padding-right: 5px;
    color: #4b4b4b;
}


/*orders*/

.orderLine a {
    float: right;
    padding: 3px 10px;
    background: var(--optcolor);
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
}

.orderLine a {
    float: right;
    padding: 3px 10px;
    background: var(--optcolor);
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
}

.orderLine:hover {
    background: #f1f1f1;
    transition: .3s;
}

.productList {
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-bottom: 5px;
    float: left;
    max-height: 200px;
    overflow-y: scroll;
}

.productList span {
    width: 100%;
    float: left;
    padding: 2px 4px;
    border-bottom: var(--grayBorder);
}

.dinfo {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: all;
    grid-gap: 4px;
    width: 100%;
    padding: 10px;
}

.dinfo input {
    padding: 5px 10px;
    cursor: not-allowed;
}


/*track orders*/

.shippingLine {
    width: 100%;
    float: left;
    margin-top: 10px;
    padding: 5px;
    border: var(--grayBorder);
    border-bottom: none;
    display: flex;
    align-items: center;
    position: relative;
}

.shippingLine:first-child {
    margin-top: 0;
}

.shippingLine h1 {
    font-size: 16px;
}

.shippingLine a {
    position: absolute;
    right: 10px;
    background: var(--optcolor);
    color: #fff;
    padding: 10px;
    border-radius: 3px;
}

.shippingLine a:hover {
    background: var(--maincolor);
    transition: .3s;
}

.thumb.driver {
    width: 50px;
    height: 50px;
    margin-left: 0;
    border: none;
    overflow: hidden;
}

#sampleDriver {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 400px;
    background: #fff;
    z-index: 200;
    border-radius: 5px;
    transition: .3s;
}

#sampleDriver.open {
    transform: translate(-50%, -50%) scale(1);
}

.thumb#driverPro {
    width: 200px;
    height: 200px;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 100%;
    text-align: center;
}

#sampleDriver h2 {
    width: 100%;
    float: left;
    font-weight: normal;
    font-size: 18px;
    text-align: center;
}

#sampleDriver button {
    padding: 5px 10px;
    margin: 2px;
}

.driBtn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    float: left;
    margin-bottom: 20px;
}

.driBtn button:nth-child(2) {
    background: red;
}

.driBtn button:nth-child(3) {
    background: var(--maincolor);
}

#editpopup.hidden:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, .6);
    content: '';
    z-index: 1;
}

.colCom {
    width: calc(25% - 2px);
    float: left;
    border: var(--grayBorder);
    margin: 1px;
    text-align: center;
}

.colCom b {
    color: #4b4b4b;
}

.colCom .thumb {
    margin: unset;
    width: 100%;
    height: unset;
    border: none;
}

.colCom label {
    width: 100%;
    float: left;
    padding: 5px 10px;
    border-top: var(--grayBorder);
}

.colCom label:last-child {
    padding: unset;
}

.colCom label:last-child button {
    width: 50%;
    padding: 10px 20px;
    border: none;
    background: var(--optcolor);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.colCom label:last-child button:first-child {
    background: var(--dangerColor);
}


/*promote*/

.banner {
    width: 100%;
    height: 300px;
    background: #ccc;
    display: flex;
    float: left;
    margin-bottom: 10px;
    position: relative;
    border: var(--grayBorder);
}

.banner span {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 3px;
    background: var(--optcolor);
    opacity: .9;
    color: #fff;
    border-bottom-left-radius: 3px;
    font-size: 12px;
}

.banner i {
    background: var(--optcolor);
    padding: 20px;
    cursor: pointer;
    color: #fff;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .7;
}

.banner i:hover {
    opacity: 1;
    transition: .3s;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    justify-content: center;
}

.promotePro .pro {
    width: calc(25% - 4px);
    margin: 2px;
    float: left;
    background: #f1f1f1;
    padding: 4px;
    position: relative;
}

.promotePro .thumb {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin-left: 0;
}

.checkbox {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    height: 16px;
    width: 32px;
    background: #4b4b4b;
    cursor: pointer;
    transition: .5s;
    border-radius: 30px;
}

.checkbox:before {
    position: absolute;
    border-radius: 100%;
    height: 12px;
    width: 12px;
    content: '';
    top: 2px;
    left: 2px;
    background: #fff;
    transition: .5s;
}

.checkbox:checked:before {
    left: 18px;
    background: var(--maincolor);
}

.checkbox:checked {
    background: var(--optcolor);
}


/*FOOTER*/

.cookiepane {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--maincolor);
    color: #f1f1f1;
    padding: 20px;
    text-align: center;
    z-index: 1000;
}

.cookiepane button {
    padding: 10px 20px;
    border-radius: 3px;
    border: none;
    background: var(--optcolor);
    color: #fff;
    cursor: pointer;
    transition: .3s;
}

.cookiepane button:hover {
    opacity: .8;
}

.footer {
    width: 100%;
    padding: 0 5%;
    float: left;
    background: var(--optcolor);
    color: rgb(243, 227, 227);
}

.inputHolder {
    position: relative;
    overflow: unset;
}

.fblock {
    width: 25%;
    float: left;
    padding: 10px;
}

.fblock img {
    width: 25%;
    margin-left: 50%;
    transform: translateX(-50%);
    float: left;
    margin-bottom: 10px;
}

.fblock p {
    width: 100%;
    float: left;
}

.fblock h4 {
    color: #fff;
    font-weight: normal;
    margin-bottom: 20px;
    font-size: 20px;
}

.fblock ul {
    display: block;
    line-height: 30px;
}

.fblock ul a {
    color: rgb(243, 227, 227);
}

.fblock ul li {
    list-style: none;
    color: #fff;
}

.ficons {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.ficons a {
    color: #fff;
    padding: 10px;
    margin: 5px;
    height: 30px;
    width: 30px;
    border: 1px solid #fff;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.messageHolder {
    background: rgb(0, 0, 0, .8);
    width: 100%;
    position: fixed;
    top: 0%;
    left: 0%;
    height: 100%;
    z-index: 1000;
    display: none;
}

.message {
    background: #fff;
    width: 90vw;
    float: left;
    position: fixed;
    top: 50%;
    left: 50%;
    height: 90vh;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.closeMessage {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--maincolor);
    color: #fff;
    cursor: pointer;
    z-index: 11000;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.closeMessage:hover {
    transition: .3s;
    background: var(--dangerColor);
}

.message .alertPane {
    padding: 20px;
    width: 60%;
    display: flex;
    margin-left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
}

.message .alertPane img {
    width: 400px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50%;
    transform: translateX(-50%)
}

.chats {
    width: 30%;
    float: left;
    position: sticky;
    top: 80px;
    border: 1px solid #ccc;
}

.chats h2,
.messages h2 {
    width: 100%;
    background: #ccc;
    padding: 10px;
}

.messages h2 {
    height: 60px;
}

.chats ul {
    display: block;
}

.chats ul li {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    display: flex;
    align-items: center;
}

.chats ul li img {
    list-style: none;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    margin-right: 5px;
    border-bottom: 1px solid #ccc;
}

.proHeader {
    width: 100%;
    display: flex;
    padding: 10px;
    background: #f1f1f1;
    align-items: center;
}

.proHeader img {
    width: 50px;
    height: 50px;
    margin-right: 5px;
    float: left;
    border-radius: 100px;
}

.messages {
    width: calc(70% - 2px);
    margin-left: 2px;
    height: 100%;
    float: left;
    border: 1px solid #ccc;
    position: relative;
}

.messages .line {
    width: calc(100% - 10px);
    margin: 5px;
    float: left;
}

.messages .line .chat {
    background: #bb2a2a;
    color: #fff;
    padding: 10px;
    max-width: 60%;
    position: relative;
}

.messages .line .chat i {
    font-size: 10px;
    color: #000;
    text-decoration: overline;
    margin-top: 5px;
    width: 100%;
    float: left;
}

.messages .line.left .chat {
    float: left;
    background: #793a27;
    margin-left: 10px;
    border-radius: 0 10px 10px 10px;
}

.messages .line.left .chat::before {
    position: absolute;
    content: '';
    border: 7px solid transparent;
    border-top: 7px solid #793a27;
    border-right: 7px solid #793a27;
    left: -12px;
    top: 0;
}

.messages .line.right .chat {
    float: right;
    background: #ffb330;
    border-radius: 10px 0px 10px 10px;
    margin-right: 10px;
}

.messages .line.right .chat::before {
    position: absolute;
    content: '';
    border: 7px solid transparent;
    border-top: 7px solid #ffb330;
    border-left: 7px solid #ffb330;
    right: -12px;
    top: 0;
}

.chatDiv {
    width: 100%;
    height: calc(100% - 130px);
    overflow-y: scroll;
}

.chatPane {
    height: 60px;
    width: 100%;
    float: left;
    bottom: 0;
    background: #fff;
    padding: 10px;
    background-color: #f1f1f1;
}

#messageForm {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--maincolor);
    overflow: hidden;
}

.chatPane input {
    width: 80%;
    height: 50px;
    padding: 10px 20px;
    border: none;
    outline: none;
}

.chatPane button,
.chatPane label {
    width: 10%;
    border: none;
    height: 40px;
    background: var(--maincolor);
    cursor: pointer;
    color: #fff;
}

.chatPane label {
    background: var(--optcolor);
    display: flex;
    justify-content: center;
    align-items: center;
}

.chatPane button:hover,
.chatPane label:hover {
    transition: .3s;
    background: var(--dangerColor);
}

.wrapper {
    height: 100vh;
    position: fixed;
    z-index: 10002;
    width: 100vw;
    background-color: var(--dangerColor);
    top: 0%;
    transform: rotate(-180deg) scale(0);
    transition: .5s;
    /* display: none; */
    visibility: hidden;
    filter: blur(50px);
    border-radius: 50%;
}

.wrapper.active {
    transform: rotate(0) scale(1);
    display: block;
    visibility: visible;
    filter: unset;
    border-radius: unset;
}

.fas.fa-envelope {
    color: #fff;
    font-size: 2rem;
    background: #333;
    padding: 1rem;
    border-radius: 100%;
    margin: 0 0 1rem 0;
}

.card-content {
    max-width: 30rem;
    background-color: #fff;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1rem;
    padding: 4rem .5rem;
    box-shadow: 1px 1px 2rem rgba(0, 0, 0, .3);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.closeSub {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--maincolor);
    color: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: .3s;
}

.closeSub:hover {
    cursor: pointer;
    background-color: var(--optcolor);
}

.card-content h1 {
    text-transform: uppercase;
    margin: 0 0 1rem 0;
}

.card-content p {
    font-size: .8rem;
    margin: 0 0 2rem 0;
}

.form-input input {
    padding: .8rem 1rem;
    width: 40%;
    border-radius: 5rem;
    outline: none;
    border: .1rem solid #d1d1d1;
    font-size: .7rem;
}

 ::placeholder {
    color: #d1d1d1;
}

.subscribe-btn {
    padding: .8rem 2rem;
    border-radius: 5rem;
    background: linear-gradient(90deg, var(--dangerColor), var(--optcolor));
    color: #fff;
    font-size: .7rem;
    border: none;
    outline: none;
    cursor: pointer;
}

cursor: pointer;

}