:root {
    --primary-blue: #3ba6d9;
}

.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 12px;
}

html .ui-autocomplete {
    height: 300px;
    font-size: 12px;
}

html {
    overflow: auto;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    text-align: center;
    margin: 0px;
    font-size: 1em;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: #fff !important;
}

#ui-id-1 {
    z-index: 1001
}

nav.topbar {
    position: fixed;
    background: #fff;
    z-index: 100;

    .nav-wrapper {
        padding: 0 20px;
    }
}

nav.topbar a {
    color: #000;
}

.material-icons {
    max-width: 60px !important;
}

ul#mainnav {
    li a {
        font-size: 0.75em !important;
        font-weight: normal !important;
        padding: 0 10px !important;
        height: 72px;
        color: #000;
    }

    li a:hover,
    li a.active {
        color: #fff;
        background: url('/images/diagonal_tile_bg.png');
    }

    li a i {
        margin-top: -8px;
        margin-bottom: -40px !important;
    }

    li a .cart-amount {
        display: inline-flex;
        text-align: left;
        max-width: 50px !important;
        max-height: 50px !important;
        overflow: hidden !important;
    }
}

/* #009760 #ff3535*/
nav.catnav {
    height: 40px;
    line-height: 40px;
    background: #ff3535;
    font-size: 11px;

    @media (max-width: 1670px) {
        height: 80px;
    }
}

nav.catnav ul {
    width: fit-content;
    margin: 0 auto;
}

nav.catnav li {
    a {
        font-size: 11px;
        text-transform: uppercase;
        padding: 0 5px;
        display: flex;
        align-items: center;
        color: white !important;

        i.material-icons {
            font-size: 12px;
            height: auto !important;
            line-height: normal !important;
        }
    }

    ul.dropdown-content {
        li a {
            color: #26a69a !important;
        }
    }
}

body.with-top-ribbon {
    .top_ribbon {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 40px;
        z-index: 1000;
    }

    nav.topbar {
        top: 40px;
    }

    header#header-container {
        margin-top: 105px;

        @media (min-width:992px) {
            margin-top: 185px;
        }

        @media (min-width: 1670px) {
            margin-top: 145px;
        }
    }
}

.promotion-products {
    .promotion_carousel_ribbon {
        padding: 5px 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        font-size: 110%;
    }
}

@media only screen and (max-width: 601px) {
    nav {
        padding: 0px 8px !important;
    }

    nav .logoimage {
        width: 80px !important;
        margin: 12px 10px 0px 0px !important
    }

    nav input[name="search0"] {
        width: 100px !important;
    }
}

main {
    background: #f5f5f5;
    flex: 1 0 auto;
}

#header-container {
    margin: 0 auto;
    margin-top: 60px;
    width: 100%;

    @media (min-width:992px) {
        margin-top: 145px;
    }

    @media (min-width:1670px) {
        margin-top: 105px;
    }
}

#header-container a {
    color: #474747;
    font-size: 0.9em;
    font-weight: 400;
    text-decoration: none;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

#header-container a:hover {
    color: #999;
}

#header-container a.btn {
    color: #ffffff;
}

#header-container .row {
    height: 35px;
    margin: 15px 0px;
}

#header-container .row a.active:after,
#header-container .row a:hover:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 0px;
    top: 100%;
    left: 0;
    margin-top: 2px;
    transition: all 100ms linear;
    background: #ff3535;
    height: 2px;
}

#header-container .row .order-menu {
    float: left;
    width: 25%;
    display: none;
    margin-top: 5px;
    text-align: left;
}

#header-container .row .order-logo {
    float: left;
    display: inline-block;
    width: 25%;
    text-align: left;
}

#header-container .row .order-logo img {
    width: 120px;
    margin-top: -5px;
}

#header-container .row .order-nav {
    float: left;
    display: inline-block;
    width: 50%;
    margin-top: 10px;
}

#header-container .row .order-misc {
    float: right;
    display: inline-block;
    width: 25%;
    margin-top: 10px;
    text-align: right;
}

#header-container .row .order-nav ul,
#header-container .row .order-misc ul {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}

#header-container .row .order-nav ul li {
    margin-right: 1.1em;
    display: inline-block;
    position: relative;
}

#header-container .row .order-misc ul li {
    margin-right: 13px;
    display: inline-block;
    position: relative;
}

#header-container .row .order-misc ul li .cart-counter {
    text-align: center;
    display: block;
    color: #fff;
    position: absolute;
    top: -2px;
    right: -23px;
    font-size: 80%;
    width: 19px;
    height: 19px;
    line-height: 21px;
    background: #000000;
    border-radius: 50%;
}

#main-container {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
    font-size: 14px;
    margin: 0px auto 50px auto;
    padding: 0px;
}

#main-container h4 {
    margin: 0px;
    padding: 5px 30px 10px 30px;
    color: #000000;
    font-size: 1.5em;
    font-weight: 400;
}

#main-container a {
    color: #474747;
    font-size: 0.9em;
    font-weight: 400;
    text-decoration: none;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

#main-container a:hover {
    color: #999;
}

#main-container a.btn {
    color: #ffffff;
}

#main-container .col_left {
    float: left;
    display: inline-block;
    width: 60%;
}

#main-container .col_left .block1 {
    background: #eaeaea;
    margin-right: 5%;
    height: 260px;
}

#main-container .col_left .block2 {
    float: left;
    display: inline-block;
    margin: 30px 5% 0px 0px;
    width: 45%;
    background: #eaeaea;
    height: 230px;
}

#main-container .col_left .block3 {
    float: right;
    display: inline-block;
    margin: 30px 5% 0px 0px;
    width: 45%;
    background: #eaeaea;
    height: 230px;
}

#main-container .col_right {
    float: right;
    display: inline-block;
    width: 40%;
    height: 520px;
    background: linear-gradient(to right, #4a4a48, #494948);
}

#main-container .col_right h4 {
    padding-top: 370px;
}

#main-container .col_right h4,
#main-container .col_right a {
    color: #fff;
    border-color: #fff;
}

/*#header-slider .mySlides{width:100vw; position: relative; margin-left: -50vw; height: 200px; left: 50%; background-attachment: scroll; background-position: bottom right; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}*/
#header-slider .mySlides {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    height: 180px !important;
    left: 50%;
    background-attachment: scroll;
    background-position: center !important;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    background-size: contain !important;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-repeat: no-repeat !important;
    background-color: #f7f7f9 !important;
}

#header-banner {
    background-color: #eaeaea;
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    background-attachment: scroll;
    background-image: url('<?php echo $img_host; ?>/images/banner/ambient-banner.jpg');
    background-position: bottom right;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#header-slider .mySlides a {
    width: 100%;
    height: 100%;
    display: block;
}

.searchbox {
    width: 28%;
}

.ui-autocomplete {
    z-index: 10000 !important;
}

main #main-container #promo_side_filter {
    width: 300px;
    background: white;
    border-radius: 5px;
    padding: 20px 5px;
    margin-right: 10px;
}

main #main-container #promo_side_filter ul {
    display: inline-block;
    list-style: none;
    margin: 0px 0px 20px 0px;
    padding: 0;
}

main #main-container #promo_side_filter ul li {
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    position: relative;
}

main #main-container #promo_side_filter ul li a.active:after,
main #main-container #promo_side_filter ul li a:hover:after {
    content: "";
    background: #ff3535;
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 0px;
    top: 100%;
    left: 0;
    margin-top: 2px;
    transition: all 100ms linear;
    height: 2px;
}

main #main-container #promo_side_filter .promo-menu ul li a {
    cursor: pointer;
    height: 30px;
}

main #main-container #promo_side_filter .filter-by-priceEnd {
    margin-top: 10px;
}

main #main-container #promo_side_filter .filter-by-category div.category {
    min-height: 25px !important;
}

main #main-container #promo_side_filter .filter-by-category ul li .collapsible-body .category {
    cursor: pointer;
    line-height: 15px;
}

main #main-container #promo_side_filter .filter-by-category ul li .collapsible-body .category.active {
    font-weight: 600;
    color: red;
}

main #main-container #promo_side_filter .filter-by-category ul li .collapsible-body .category:hover {
    text-decoration: underline;
    color: #0561ef;
}

main #main-container .featured-products .fblock .product a {
    display: inline;
    background: #ff3535;
    height: 2px;
}


main #main-container .featured-products {
    padding-top: 10px;
    padding-bottom: 10px;
    background: white;
    border-radius: 5px;
    width: fit-content;
}

@mixin max-width($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

main #main-container .featured-products ul {
    display: inline-block;
    list-style: none;
    margin: 0px 0px 20px 0px;
    padding: 0;
}

main #main-container .featured-products ul li {
    margin-right: 1.5em;
    display: inline-block;
    position: relative;
}

main #main-container .featured-products ul li a.active:after,
main #main-container .featured-products ul li a:hover:after {
    content: "";
    background: #ff3535;
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 0px;
    top: 100%;
    left: 0;
    margin-top: 2px;
    transition: all 100ms linear;
    height: 2px;
}

main #main-container .featured-products .fblock .product a {
    display: inline;
    background: #ff3535;
    height: 2px;
}

main #main-container .featured-products .f_container {
    font-size: 12px;
    margin-top: 5px;
}

main #main-container .featured-products .f_container .f_item {
    flex-grow: 1;
    width: 25%;
    padding: 10px;
}

main #main-container .featured-products .f_container .f_item img {
    width: 100px;
    height: 100px;
    margin-bottom: 5px;
}

main #main-container .featured-products .f_container .f_item span {
    display: block;
    color: #ff3535;
}

main #main-container .featured-products .f_container .f_item i {
    color: #00b279;
    font-size: 24px;
    margin: 5px 0px;
    opacity: 0.7;
}

main #main-container .featured-products .f_container .f_item i.remove {
    color: #ff1919;
}

main #main-container .featured-products .f_container .f_item div {
    border-bottom: #eee 1px solid;
    margin: 0px 10px 5px 10px;
}

main #main-container .featured-products .f_container .disable {
    opacity: 0.3;
    pointer-events: none;
}

main #main-container .featured-products .f_container .f_update_btn {
    background: #000;
    padding: 7px;
    height: 35px;
    border: #000 2px solid;
    color: #fff !important;
    text-transform: uppercase;
    margin: 20px auto;
}

main #main-container .featured-products .f_container .f_update_btn:hover {
    background: #fff;
    color: #000 !important;
    cursor: pointer;
}

main #main-container .fullwidth-container {
    background: #f7f7f9;
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
}

main #main-container .fullwidth-container .inner-wrapper {
    width: 80%;
    margin: 0px auto 0px auto;
    padding: 50px 0px;
    text-align: left;
    height: inherit;
}

main #main-container .featured-products .f_line {
    border-top: #eee 1px solid;
    margin: 20px 0px;
    width: 100%;
}

main #main-container .featured-products h4.f_title {
    background: #ff3535;
    color: #fff !important;
    padding-top: 10px !important;
    margin-bottom: 20px;
    width: fit-content;
}


main #main-container .fullwidth-container .inner-wrapper .featured {
    height: 100%;
    margin: 0 -1.15%;
}

main #main-container .fullwidth-container .inner-wrapper h4 {
    padding: 0px 0px 20px 0px;
    margin: 0px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

main #main-container .fullwidth-container .inner-wrapper .block {
    float: left;
    width: 31%;
    margin: 0px 1.15%;
    height: 250px;
    border: #eaeaea 1px solid;
    background-size: cover;
    background-position: top right;
}

main #main-container .fullwidth-container .inner-wrapper .block a {
    margin-left: 30px;
    border-bottom: 2px solid #000;
    padding-bottom: 6px;
    color: #000;
    font-size: 1em;
    text-decoration: none;
    font-weight: 600;
    text-shadow: #fff 0px 0px 10px;
}

main #main-container .fullwidth-container .inner-wrapper .b {
    background-size: cover;
    background-position: center center;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.5;
}

main #main-container .fullwidth-container .inner-wrapper .b_1 {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 255px;
    background-size: cover;
}

main #main-container .fullwidth-container .inner-wrapper .b:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
}

main #main-container .fullwidth-container .inner-wrapper .block .select-wrapper,
main #main-container .fullwidth-container .inner-wrapper .period .select-wrapper {
    background: none;
}

main #main-container .fullwidth-container .inner-wrapper .period .select-wrapper .dropdown-content li {
    display: inline-block;
    width: 25%;
    text-align: center;
    border: #f9f9f9 1px solid;
}

main #main-container .fullwidth-container .inner-wrapper .block .select-dropdown {
    text-align: center;
}

main #main-container .fullwidth-container .inner-wrapper .sh {
    padding-bottom: 22%;
    height: inherit;
}

main #main-container .fullwidth-container .inner-wrapper .sh a {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0px;
    border: 0px;
    position: absolute;
}

main #main-container .newsfeed {
    padding: 40px 0px;
    ;
    margin: 0 -1.15%;
    font-size: 12px;
    text-align: center;
}

main #main-container .newsfeed h4 {
    padding: 0px 0px 20px 0px;
    margin: 0px;
    font-size: 20px;
    font-weight: 600;
}

main #main-container .newsfeed .news {
    display: inline-block;
    width: 17.7%;
    margin: 1%;
    padding: 10px;
    background: #fff;
    border: #eee 1px solid;
}

main #main-container .newsfeed .news a {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

main #main-container .newsfeed .news img {
    margin: 10px 0px;
    border: #eee 1px solid;
    width: 170px;
    height: 220px;
}

.collapsible-header:focus {
    outline: none;
}

.collapsible-header {
    display: block;
}

.collapsible-header i {
    margin-right: 0px;
}

.collapsible li.active i {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

main #main-container .brands {
    padding: 40px 0px 0px 0px;
}

main #main-container .brands h4 {
    padding: 0px 0px 20px 0px;
    margin: 0px;
    font-size: 20px;
    font-weight: 600;
}

main #main-container .brands .p_container {
    display: flex;
    flex-flow: wrap;
    border-left: #eee 1px solid;
    border-top: #eee 1px solid;
}

main #main-container .brands .p_container .p_item {
    flex-grow: 1;
    width: 8.33%;
    padding: 10px;
    border-right: #eee 1px solid;
    border-bottom: #eee 1px solid;
}

main #main-container .brands .p_container .p_item img {
    width: 50px;
    height: 50px;
}

#main-container .grid-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style: none;
}

#main-container .grid-wrapper .grid-item {
    border: #efefef 1px solid;
    color: #999;
    font-size: 0.9em;
    padding: 5px;
    width: 250px;
    min-height: 300px;
    margin: 5px;
    text-align: center;
    border-radius: 5px;
    position: relative;

    &:hover {
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
        transition: all 0.3s;
    }
}

#main-container .grid-wrapper .grid-item .profit {
    position: absolute;
    left: -15px;
    top: -10px;
    border-radius: 50%;
    z-index: 10;
}

#main-container .grid-wrapper .grid-item .stock-avail {
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 10;
}

#main-container .grid-wrapper .grid-item .stock-avail img {
    border-radius: 50%;
}

#main-container .grid-wrapper .grid-item .favorite {
    position: absolute;
    right: 50px;
    top: 5px;
    cursor: pointer;
}

#main-container .grid-wrapper .grid-item .favorite i {
    color: mistyrose;
}

#main-container .grid-wrapper .grid-item .login-link {
    color: red;
    font-size: 16px;
}

#main-container .grid-wrapper .grid-item .favorite i:hover,
#main-container .grid-wrapper .grid-item .favorite i.active {
    color: #ed0e35;
}

#main-container .grid-wrapper .grid-item .code {
    background: #fff;
    padding: 0px 5px;
    border-radius: 3px;
    color: #555;
    font-weight: 600;
    font-size: 120% !important;
}

#main-container .grid-wrapper .grid-item img {
    border: #fff 5px solid;
    margin: 4px;
}

#main-container .grid-wrapper .grid-item .description {
    color: #555;
    font-size: 120% !important;
    font-weight: 600;
    display: -webkit-box;
    min-height: 50px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 27px;
}

#main-container .grid-wrapper .grid-item .brand {
    color: #555;
    font-size: 150%;
    margin-bottom: 10px;
    font-weight: 600;
}

#main-container .grid-wrapper .grid-item .price {
    font-size: 150%;
    font-weight: 600;
    line-height: 2em;
    color: #555;
    &.call-for-price {
        color: red;
        font-weight: 400;
    }
}

#main-container .grid-wrapper .grid-item .por {
    font-size: 1em;
    color: #555
}

#main-container .grid-wrapper .grid-item .icon {
    display: inline-block;
    vertical-align: sub;
}

#main-container .grid-wrapper .grid-item .quantity {
    display: inline-block;
    width: 35px;
    margin: 10px;
    padding: 5px;
    vertical-align: super;
    text-align: center;
    cursor: pointer;
    border: #eee 1px solid;
    font-size: 1.5em;
}

#main-container .grid-wrapper .grid-item .quantity .quantity_cell {
    display: none;
    text-align: center;
    height: 1rem;
    margin: 0px;
}

#main-container .grid-wrapper .grid-item img.prod-image {
    width: 200px;
    height: 200px;
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 5px;
}

#main-container .grid-wrapper .grid-item img.prod-image:hover {
    transform: scale(1.05);
}

#main-container .list-wrapper .list-item {
    border: #efefef 1px solid;
    color: #999;
    font-size: 0.9em;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    position: relative;
}

#main-container .list-wrapper .list-item .favorite {
    position: absolute;
    right: 5px;
    top: -5px
}

#main-container .list-wrapper .list-item .rm-from-cart {
    position: absolute;
    right: 5px;
    top: -5px;
}

#main-container .list-wrapper .list-item .favorite i {
    color: mistyrose;
}

#main-container .list-wrapper .list-item .favorite i:hover,
#main-container .list-wrapper .list-item .favorite i.active {
    color: #ed0e35;
}

#main-container .list-wrapper .list-item .login-link {
    color: red;
    font-size: 16px;
}

#main-container .list-wrapper .list-item .ribbon {
    position: absolute !important;
}

#main-container .list-wrapper .list-item .label {
    width: 80px;
    text-align: left;
}

#main-container .list-wrapper .list-item img.prod-image {
    width: 200px;
    height: 200px;
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 5px;
}

#main-container .list-wrapper .list-item img.prod-image:hover {
    transform: scale(1.05);
}

#main-container .list-wrapper .list-item .prod-prop {
    color: black !important;
}

#main-container .list-wrapper .list-item .code {
    background: #fff;
    padding: 0px 5px;
    border-radius: 3px;
    color: #555;
    font-weight: 600;
    font-size: 150% !important;
}

#main-container .list-wrapper .list-item .description {
    color: #555;
    font-size: 120%;
    font-weight: 600;
    display: block;
    min-height: 30px;
    text-align: left;
}

#main-container .list-wrapper .list-item .price {
    font-size: 150%;
    font-weight: 600;
    line-height: 2em;
    color: #555
}

#main-container .list-wrapper .list-item .por {
    font-size: 1em;
    color: #555
}

#main-container .list-wrapper .list-item .icon {
    display: inline-block;
    vertical-align: sub;
}

#main-container .list-wrapper .list-item .quantity {
    display: inline-block;
    width: 45px;
    margin: 5px;
    padding: 5px;
    vertical-align: super;
    text-align: center;
    cursor: pointer;
    border: #eee 1px solid;
    font-size: 1.5em;
}

#main-container .list-wrapper .list-item .quantity .quantity_cell {
    display: none;
    text-align: center;
    height: 1rem;
    margin: 0px;
}

#main-container .list-wrapper .list-item .profit img {
    width: 30px;
    height: 30px;
    z-index: 10;
}

#main-container .list-wrapper .list-item .stock-avail img {
    width: 30px;
    height: 30px
}

.side-filter:not(.sidenav) {
    width: 250px;
    height: fit-content;
}

.sidenav {
    z-index: 9999;
    height: calc(100%);
}

.side-filter .brand-label {
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
}

#rside-sort .sort-option label {
    font-size: 14px;
}

#rside-sort .sort-option.active label {
    color: red !important;
    font-weight: 600 !important;
}

#order_total_div {
    border: 0;
    margin-bottom: 20px;
    text-align: left;
    font-size: 1.5em;
    line-height: 1.7em;
    color: #333;
}

#order_total_div h2 {
    font-size: 2rem;
    color: #000;
}

#order_total_div .desc {
    display: inline;
    padding-bottom: 0.5em;
    border-bottom: lightseagreen solid 2px
}

.table_holder i {
    color: #00b279;
    font-size: 24px;
    margin: 0px;
    opacity: 0.7;
}

.table_holder i.remove {
    color: #ff1919;
}

.table_holder i.po {
    padding-left: 15%;
}

.table_holder i.remove.po {
    color: #ddd;
}

.table_holder i.adjust,
#table_wrapper i.adjust {
    color: #069ad8;
}

.table_holder i.delete {
    color: #aaaaaa;
}

.table_holder a,
#table_wrapper a {
    outline: none;
}

.table_holder table.tablesorter .small-screen,
.table_holder table.tablesorter .small {
    display: none;
}

#table_wrapper table.tablesorter tbody td,
.table_holder table.tablesorter tbody td {
    border: 0px;
    border-radius: 0px;
}

#table_wrapper table.tablesorter thead tr th,
#table_wrapper table.tablesorter tfoot tr th {
    text-transform: uppercase;
    background: none;
    font-size: 12px;
    font-weight: 500;
    border-bottom: #eee solid 2px;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

.table_holder table.tablesorter thead tr th,
.table_holder table.tablesorter tfoot tr th {
    text-transform: uppercase;
    background: none;
    font-size: 16px;
    font-weight: 500;
    border-bottom: #eee solid 2px;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

.table_holder table.tablesorter img,
#table_wrapper table.tablesorter img,
.autosearch div img,
.table_holder img {
    background-image: url('/images/default-image.jpg');
    background-size: cover;
    background-position: center center;
    text-indent: -9999px;
    color: transparent !important;
    -webkit-appearance: none !important;
}

#table_wrapper table.tablesorter th,
#table_wrapper table.tablesorter td,
.table_holder table.tablesorter th,
.table_holder table.tablesorter td {
    padding: 5px !important;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

.table_holder table.tablesorter th:first-child,
.table_holder table.tablesorter td:first-child {
    padding-left: 10px !important;
}

#table_wrapper table.tablesorter tbody:before,
.table_holder table.tablesorter tbody:before {
    content: "-";
    display: block;
    line-height: 1em;
    color: transparent;
}

#table_wrapper table.tablesorter,
.table_holder table.tablesorter {
    border: 0px;
}

.table_holder table.tablesorter tbody td .po_btn {
    display: block;
    background: #000;
    color: #fff;
    padding: 5px 10px;
    width: 80px;
    border: #000 2px solid;
    text-transform: uppercase;
    vertical-align: middle;
}

.table_holder table.tablesorter tbody td .po_btn span {
    font-size: 12px;
}

.table_holder table.tablesorter tbody td .po_btn:hover {
    cursor: pointer;
    background: #fff;
    color: #000;
}

.table_holder table.tablesorter thead tr .header {
    background-image: url('/images/tables/sort.png');
    background-repeat: no-repeat;
    background-position: bottom 2px right 5px;
    cursor: pointer;
    background-color: #fcfcfc;
}

.table_holder table.tablesorter thead tr .headerSortUp {
    background-image: url('/images/tables/sortup.png');
    background-repeat: no-repeat;
    background-position: bottom 2px right 5px;
    cursor: pointer;
    background-color: #f7f7f7;
}

.table_holder table.tablesorter thead tr .headerSortDown {
    background-image: url('/images/tables/sortdown.png');
    background-repeat: no-repeat;
    background-position: bottom 2px right 5px;
    cursor: pointer;
    background-color: #f7f7f7;
}

#ui-id-1 {
    font-size: 13px;
    line-height: 16px;
}

.ui-button-text-only .ui-button-text {
    font-size: 12px;
}

.ui-dialog .ui-widget-header {
    background: #ff1919 !important;
    border: none;
}

.ui-dialog .ui-dialog-title {
    width: 97% !important;
}

.ui-dialog .sent {
    background: #00b279 !important;
    border: none;
}

.ui-dialog .ui-icon {
    filter: grayscale(100%);
}

.ui-dialog-buttonset button {
    background: #000 !Important;
    color: #fff !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
    border-radius: 0px !important;
}

#how_many_qty_info {
    height: inherit !important;
    padding: 20px 20px 15px 20px !important;
    border-radius: 12px;
    border: #eee 3px solid;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
    -webkit-box-shadow: 5px 5px 20px 0px #666666;
    -moz-box-shadow: 5px 5px 20px 0px #666666;
    box-shadow: 5px 5px 20px 0px #666666;
}

#how_many_qty_info input {
    width: 80px !important;
    text-align: center;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

#how_many_qty_info div {
    background: #000;
    padding: 5px 10px;
    width: 55px;
}

#how_many_qty_info div span {
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

#order_action_div {
    border: 0;
    text-align: center;
    height: inherit;
    margin: 20px 0px 50px 0px;
    background: #f7f7f9;
    padding: 10px;
}

#order_action_div .cart_total {
    padding: 15px 35px 15px 50px;
    width: 300px;
    text-align: left;
    display: block;
    float: right;
}

#order_action_div .cart_total h3 {
    font-size: 2rem;
    margin: 0px;
}

#order_action_div .cart_total h5 {
    font-size: 1rem;
}

#order_action_div .cart_total span {
    font-weight: 600;
    text-align: right;
    display: block;
    float: right;
}

#order_action_div .action_btns {
    display: table;
    border-collapse: separate;
    border-spacing: 25px;
    text-align: center;
    float: right;
    padding-top: 35px;
}

#order_action_div ._btn {
    display: table-cell;
    background: #000;
    padding: 15px;
    width: 165px;
    height: 50px;
    border: #000 2px solid;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: 5px;
}

#order_action_div ._btn:hover {
    cursor: pointer;
    background: #fff;
}

#order_action_div ._btn span {
    color: #fff;
    font-weight: 500;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
}

#order_action_div ._btn:hover span {
    color: #000;
}

#order_action_div ._red {
    background: #fc6567;
    border-color: #fc6567;
}

#order_action_div ._green {
    background: #69c8a2;
    border-color: #69c8a2;
}

#new_button {
    bottom: 100px;
}

#new_button div {
    background: #000;
    padding: 7px;
    width: 130px;
    border: #000 2px solid;
    text-transform: uppercase;
    line-height: 12px;
}

#new_button div:hover {
    cursor: pointer;
    background: #fff;
}

#new_button div span {
    color: #fff;
    font-weight: 500;
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
}

#new_button div:hover span {
    color: #000;
}

#permission_list {
    text-align: left;
    padding-left: 20px;
}

#presell_item_data {
    width: 48%;
}

#content_area_wrapper {
    border: none !important;
    padding: 0 20px;
}

#content_area {
    width: inherit !important;
}

#categories .c_container {
    display: flex;
    flex-flow: wrap;
    font-size: 12px;
    margin-top: 5px;
    min-height: 330px;
}

#categories .c_container .c_item {
    flex-grow: 1;
    width: 14.28%;
    padding: 10px;
    text-transform: uppercase;
    cursor: pointer;

    .category-image {
        position: relative;
        width: 100%;
        padding-top: 100%;
        background-size: cover;
        background-image: url(/images/default-image.jpg);
        border: #ddd 1px solid;
        margin-bottom: 5px;

        div {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;

            img {
                width: 100%;
                max-height: 100%;
            }
        }
    }
}

#categories .c_container .c_item i {
    color: #00b279;
    font-size: 24px;
    margin: 5px 7px;
    opacity: 0.7;
}

#categories .c_container .c_item i.remove {
    color: #ff1919;
}

#categories .c_container .c_item span {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    width: 100%;
    color: #ffffff;
    display: block;
    border-left: #ddd 1px solid;
    border-right: #ddd 1px solid;
    font-size: 1.2em;
    font-weight: 600;
    text-shadow: #000000 0px 0px 10px;
    text-align: center;
    margin-top: -133px;
    margin-bottom: 90px;
}

#categories i {
    vertical-align: bottom;
}

#categories .nav_category {
    vertical-align: center;
    color: #999;
}

#categories .nav_category span {
    cursor: pointer;
}

#categories .nav_category .active {
    cursor: default;
    color: #ff3535;
}

#product_search_div {
    border: 0px !important;
    background: none !important;
    height: 100px !important;
    width: inherit;
    text-align: center;
    margin: 0px auto -65px auto;
    z-index: 1;
}

#product_search_div .small_view {
    display: none;
}

#product_search_div .large_view {
    display: inline-block;
}

#search_form {
    background: #f7f7f9;
    padding: 15px 15px 7px 15px;
    margin: 0 auto;
}

#search_form input {
    padding-left: 10px !important;
    color: #666 !important;
}

#search_form input::selection {
    background: #69c8a2;
    color: #fff;
}

#search_form input::-moz-selection {
    background: #69c8a2;
    color: #fff;
}

#actions {
    margin: 50px 0px 40px 0px;
}

#actions .input-field {
    float: left;
    width: 160px;
    margin-top: -10px;
}

#actions .pagination {
    float: right;
}

#actions .pagination .go_page {
    width: 100px;
    float: right;
}

#actions .pagination .go_page input {
    width: 60px !important;
}

#actions .pagination li.active a {
    color: #fff !important;
}

#actions .pagination li.disabled a {
    color: #999 !important;
}

#actions .pagination li .go {
    float: right;
    color: #9e9e9e !important;
    cursor: pointer;
}

#actions input {
    text-align: center;
}

#actions label {
    left: 0;
}

.contact-form {
    width: 80%;
    border: 2px solid #eeeeee;
    padding: 4.5em 6em 3em 6em;
    margin: 50px auto;
    text-align: left;
}

.contact-form .col1 {
    float: left;
    width: 47%;
    padding-bottom: 20px;
}

.contact-form .col1a {
    float: left;
    width: 6%;
    padding-bottom: 20px;
}

.contact-form .col2 {
    padding-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    border: #ddd 1px solid !important;
    background: #f7f7f9 !important;
    color: #666 !important;
    font-size: 15px !important;
}

.contact-form input {
    width: 95% !important;
}

.contact-form textarea {
    height: 150px !important;
    padding-top: 10px !important;
}

.contact-form label {
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

.contact-form .button {
    background: #000;
    color: #fff;
    display: block;
    padding: 10px;
    text-align: center;
}

.map {
    margin: 50px auto 30px auto;
    width: 80%;
}

#presell_item_data {
    padding: 15px 10px 0px 10px;
    margin-bottom: 0px;
}

#customer_login_info input,
#customer_api_key input,
#customer_delivery input,
#presell_item_data input {
    height: 2.1rem;
    font-size: 12px;
    margin: 0px;
    color: #333333;
}

#customer_login_info .field_row label,
#customer_api_key .field_row label,
#customer_delivery .field_row label,
#presell_item_data .field_row label {
    line-height: inherit;
    font-size: 11px;
    margin-top: -15px;
}

#customer_login_info .field_row .form_field,
#customer_delivery .field_row .form_field,
#customer_api_key .field_row .form_field {
    float: none;
    margin: 10px 0px;
}

#presell_item_data .field_row .form_field {
    float: none;
    margin: 8px 0px;
}

#presell_item_data .qty label {
    display: inline-block;
    width: 45px;
    text-align: center;
}

#presell_item_data .qty input {
    display: inline-block;
    width: 43px;
    background: #fff;
}

#presell_item_data .qty .form_field {
    padding: 1px 2px !important;
    margin: 8px 0px 10px 0px !important;
}

#customer_login_info .field_row label.required,
#presell_item_data .field_row label.required {
    color: #ff1919;
}

#customer_login_info,
#customer_permission_info,
#presell_item_data {
    min-height: 280px;
}

#customer_permission_info p {
    font-size: 11px;
    margin-bottom: 5px;
}

#customer_login_info input,
#customer_api_key input {
    height: 1.33rem !important;
}

#presell_item_data input {
    height: 1rem !important;
}

#customer_login_info .select-wrapper,
#presell_item_data .select-wrapper {
    background: #f2f2f2 !important;
}

#customer_login_info .select-wrapper .caret,
#presell_item_data .select-wrapper .caret {
    fill: rgba(0, 0, 0, 0.87) !important;
}

#header-slider .mySlides a,
#sponsors .block a,
#news .news a {
    cursor: pointer;
}

footer .fblock {
    text-align: left;
}

footer h5 {
    margin-top: 20px;
    padding: 0px 0px 5px 0px;
    display: inline-block;
    border-bottom: #ddd 2px solid;
}

footer a {
    color: #616161;
}

footer a:hover {
    color: #ff3535 !important;
}

.page-footer .material-icons {
    vertical-align: bottom;
}

.page-footer h5 {
    font-size: 1.5em;
}

.caret {
    border-color: transparent !important;
}

/* Ribbon */
.ribbon {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    margin-bottom: -100px;
    z-index: 20;
}

.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #ccc;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 158px;
    padding: 5px 0;
    background-color: #3498db;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    color: #fff;
    font: 700 13px/1 'Lato', sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-transform: uppercase;
    text-align: center;
}

.ribbon-top-left {
    top: -11px;
    left: -11px;
}

.ribbon-top-left::before,
.ribbon-top-left::after {
    border-top-color: transparent;
    border-left-color: transparent;
}

.ribbon-top-left::before {
    top: 0;
    right: 0;
}

.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}

.ribbon-top-left span {
    right: -25px;
    top: 25px;
    transform: rotate(-45deg);
}

.dropdown-content li {
    min-height: 30px !important;
}

.dropdown-content li>a,
.dropdown-content li>span {
    font-size: 14px !important;
    padding: 10px 16px;
}

.select-dropdown li img {
    height: 25px;
    width: 25px;
    margin: 5px 10px;
}

.select-wrapper {
    background: #fff !important;
    color: #000 !important;
}

.select-wrapper .caret {
    fill: rgba(255, 255, 255, 0.87);
}

.select-wrapper input.dropdown-trigger {
    padding-left: 10px;
    text-align: start !important;
}

/* #actions input{color:#fff;} */
#go_page {
    color: #000 !important;
}

.select-wrapper input.select-dropdown {
    height: 2.2rem;
    line-height: 2.2rem;
    margin-top: 5px;
    width: 85% !important;
    padding-right: 10px;
}

#actions label {
    font-size: 14px !important;
}

.per-page {
    width: 80px;
}

.per-page ul {
    width: 80px !important;
}

@media only screen and (max-width: 767px) {
    #header-container .row {
        height: 30px;
    }

    #header-container .row .order-logo {
        width: 50%;
        text-align: center;
    }

    #header-container .row .order-logo img {
        width: 100px;
        margin-top: 0px;
    }

    #header-container .row .order-nav,
    #header-container .row .order-misc .device-behavior {
        display: none;
    }

    #header-container .row .order-menu {
        display: inline-block;
    }

    #header-slider .mySlides {
        height: 70px !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-color: #f7f7f9 !important;
    }

    .searchbox {
        width: 50%;
    }

    .ui-autocomplete {
    }

    nav.catnav {
        height: 0px !important;
        margin-top: 54px !important;
    }

    #search0 {
        max-width: 65% !important;
        margin: 0px;
    }

    #main-container .col_left,
    #main-container .col_right {
        width: 100%;
    }

    #main-container .col_left .block1 {
        margin: 0px 0px 5% 0px;
        ;
    }

    #main-container .col_left .block2,
    #main-container .col_left .block3 {
        margin: 0px 0px 5% 0px;
        width: 100%;
    }

    .products-section .products-table {
        padding: 10px 2px !important;
    }

    main #main-container .featured-products .f_container .f_item {
        width: 50%;
    }

    main #main-container .brands {
        display: none;
    }

    main #main-container .featured-products ul li {
        margin-right: 1em;
    }

    main #main-container .fullwidth-container .inner-wrapper {
        width: 90%;
    }

    main #main-container .fullwidth-container .inner-wrapper .block {
        width: 100%;
        margin: 10px 0px;
    }

    main #main-container .newsfeed .news {
        width: 100%;
        margin: 10px 0px;
    }

    #f_links {
        margin: 0px -30px 0px -10px;
    }

    #toast-container .toast {
        font-size: 0.9rem !important;
    }

    #header-container .row .order-misc ul li .cart-counter {
        font-size: 90%;
    }

    #product_search_div {
        margin-bottom: -45px;
    }

    #product_search_div .large_view {
        display: none;
    }

    #product_search_div .small_view {
        display: inline-block;
    }

    #main-container .list-wrapper .list-item {
        padding: 0px !important;
    }

    #main-container .list-wrapper .list-item .description {
        font-size: 120% !important;
        width: calc(100% - 30px)
    }

    #main-container .list-wrapper .list-item img.prod-image {
        height: 60px !important;
        width: 60px !important;
        transition: all 0.3s;
        cursor: pointer;
        border-radius: 5px;
    }

    #main-container .list-wrapper .list-item img.prod-image:hover {
        transform: scale(1.05);
    }

    #main-container .list-wrapper .list-item .quantity {
        font-size: 1rem !important;
        width: 30px;
        margin: 0px;
    }

    #main-container .list-wrapper .list-item .price {
        line-height: 1em;
        font-size: 120% !important;
    }

    #main-container .list-wrapper .list-item .favorite {
        right: 0px !important;
    }

    #main-container .list-wrapper .list-item .label {
        width: 60px;
    }

    #search0 {
        width: 180px !important;
    }

    #title_bar {
        margin: 0 auto;
        width: 120px;
    }

    #new_button {
        position: static;
        margin: 20px auto;
    }

    #table_wrapper table.tablesorter thead tr th,
    #table_wrapper table.tablesorter tbody tr td,
    .table_holder table.tablesorter thead tr th,
    .table_holder table.tablesorter tbody tr td {
        font-size: 11px;
        padding: 3px !important;
    }

    .table_holder table.tablesorter th,
    .table_holder table.tablesorter td {
        padding: 2px !important;
    }

    .table_holder table.tablesorter td img {
        width: 50px;
        height: 50px;
    }

    .table_holder table.tablesorter td:nth-child(4) {
        text-align: center !important;
    }

    .table_holder i {
        display: block;
        margin: 4px;
    }

    .table_holder table.tablesorter th:first-child,
    .table_holder table.tablesorter td:first-child {
        padding-left: 2px !important;
    }

    .table_holder table.tablesorter .large-screen,
    .table_holder table.tablesorter .large {
        display: none;
    }

    .table_holder table.tablesorter .small-screen {
        display: table-header-group;
    }

    .table_holder table.tablesorter .small {
        display: table-row;
    }

    #main-container .fullwidth-container .inner-wrapper .sh {
        width: 100% !important;
        padding-bottom: 68% !important;
        height: inherit !important;
    }

    #dialog_form {
        padding: 0px;
    }

    #how_many_qty_info {
        left: 10px !important;
        width: 340px !important;
        padding: 10px 10px 5px 10px !important;
    }

    #customer_login_info,
    #customer_permission_info,
    #presell_item_data {
        width: 96%;
    }

    #how_many_qty_info div {
        margin-right: 10px !important;
    }

    #categories .c_container .c_item {
        flex-grow: 1;
        width: 33%;
        padding: 10px;
        text-transform: uppercase;
    }

    #actions .input-field {
        float: right;
    }

    #order_action_div ._btn {
        display: table;
        margin-bottom: 10px;
    }

    #order_action_div .cart_total {
        float: none;
        margin: 0 auto;
    }

    #order_action_div .action_btns {
        float: none;
        border-spacing: 0px;
        margin: 0 auto;
        padding-top: 0px;
    }

    .contact-form {
        width: 100%;
        padding: 2em;
    }

    .contact-form .col1 {
        float: none;
        width: 95%;
    }

    .contact-form .col1a {
        display: none;
    }

    .map {
        width: 100%;
    }

    footer .fblock {
        text-align: center;
    }

    .sort_menu {
        margin-top: 55px !important;
        height: 10px !important;
    }

    .sort_menu1 {
        margin-top: 32px !important;
        height: 10px !important;
    }

    #f_1,
    #f_2,
    #f_3 {
        width: 100% !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #main-container {
        width: 80%;
    }

    #header-container .row {
        height: 30px;
    }

    #header-container .row .order-logo {
        width: 50%;
        text-align: center;
    }

    #header-container .row .order-logo img {
        width: 100px;
        margin-top: 0px;
    }

    #header-container .row .order-nav,
    #header-container .row .order-misc .device-behavior {
        display: none;
    }

    #header-container .row .order-menu {
        display: inline-block;
    }

    #header-slider .mySlides {
        height: 120px !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-color: #f7f7f9 !important;
    }

    .searchbox {
        width: 50%;
    }

    nav.catnav {
        height: 0px !important;
        margin-top: 54px !important;
    }

    main #main-container .featured-products .f_container .f_item {
        width: 50%;
    }

    main #main-container .brands .p_container .p_item {
        width: 16.66%;
    }

    main #main-container .fullwidth-container .inner-wrapper {
        width: 80%;
    }

    main #main-container .fullwidth-container .inner-wrapper .block {
        width: 100%;
        margin: 10px 0px;
    }

    main #main-container .newsfeed .news {
        width: 100%;
        margin: 10px 0px;
    }

    #table_wrapper table.tablesorter thead tr th,
    #table_wrapper table.tablesorter tbody tr td,
    .table_holder table.tablesorter thead tr th,
    .table_holder table.tablesorter tbody tr td {
        font-size: 11px;
        padding: 3px !important;
    }

    .table_holder table.tablesorter th,
    .table_holder table.tablesorter td {
        padding: 2px !important;
    }

    .table_holder table.tablesorter td img {
        width: 50px;
        height: 50px;
    }

    .table_holder table.tablesorter td:nth-child(4) {
        text-align: center !important;
    }

    .table_holder i {
        display: block;
        margin: 4px;
    }

    .table_holder table.tablesorter th:first-child,
    .table_holder table.tablesorter td:first-child {
        padding-left: 2px !important;
    }

    .table_holder table.tablesorter .large-screen,
    .table_holder table.tablesorter .large {
        display: none;
    }

    .table_holder table.tablesorter .small-screen {
        display: table-header-group;
    }

    .table_holder table.tablesorter .small {
        display: table-row;
    }

    #main-container .fullwidth-container .inner-wrapper .sh {
        padding-bottom: 68% !important;
        height: inherit;
    }

    #categories .c_container .c_item {
        flex-grow: 1;
        width: 20%;
        padding: 10px;
        text-transform: uppercase;
    }

    #order_action_div .cart_total {
        float: none;
        margin: 0 auto;
    }

    #order_action_div .action_btns {
        float: none;
        border-spacing: 5px;
        margin: 0 auto;
        padding-top: 0px;
    }

    footer .fblock {
        text-align: center;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #mainnav li a {
        padding: 0 9px !important;
    }

    main #main-container .fullwidth-container .inner-wrapper {
        width: 98%;
    }

    #order_action_div .action_btns {
        border-spacing: 10px;
        margin-right: -5px;
    }

    #header-slider .mySlides {
        height: 150px !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width:1550px) {
    main #main-container .fullwidth-container .inner-wrapper {
        width: 98%;
    }

    #header-slider .mySlides {
        min-height: 190px;
        height: 21vh !important;
        background-size: cover !important;
    }
}

@media only screen and (min-width: 1201px) and (max-width:1300px) {
    #header-slider .mySlides {
        height: 180px !important;
        background-size: contain !important;
    }
}

@media only screen and (min-width: 1551px) {
    main #main-container .fullwidth-container .inner-wrapper {
        width: 98%;
    }

    #header-slider .mySlides {
        min-height: 220px;
        height: 60vh !important;
        background-size: cover !important;
    }
}

.products-section .filter-section {
    border-radius: 5px;
    border: 1px solid #eee;
    background: #fff !important;
}

.products-section .products-table {
    border-radius: 5px;
    border: 1px solid #eee;
    background: #fff !important;
}

#search0 {
    margin: 0px !important;
    background: none !important;
    border: 1px solid #888;
    border-radius: 2px;
    width: 75% !important;
    height: 35px;
    color: #999 !important;
}

.category0-select {
    .select-wrapper {
        border: 1px solid #888 !important;
        border-left-width: 0px !important;

        input {
            height: 35px !important;
            margin: 0px !important;
            width: 170px !important;
            border: none !important;
        }

        ul {
            margin-top: 2px !important;
        }
    }
}

.product-detail-info {
    ul.collapsible {
        li {
            .collapsible-header {
                background: #ff3535;
                color: #ddd;

                img {
                    transition: all 0.3s;
                }
            }

            &.active .collapsible-header {
                color: white;
                font-weight: bold;

                img {
                    transform: rotate(-180deg);
                }
            }

            .collapsible-body {
                padding: 10px;
                min-height: 60px !important;

                table {
                    border: 1px solid #ddd;
                    border-radius: 5px;
                }
            }
        }
    }
}

.product-show {
    margin: 30px 10px 20px 10px !important;

    .maininfo {
        @media only screen and (max-width: 772px) {
            flex-direction: column;
        }

        .product-props {
            margin-left: 50px;

            @media only screen and (max-width: 772px) {
                margin-left: 0 !important;
                margin-top: 20px !important;

                .one-prop {
                    &.desc {
                        font-size: 20px !important;
                    }

                    &.price,
                    label,
                    .value {
                        font-size: 16px !important;
                    }
                }
            }

            .one-prop {
                display: flex;
                align-items: center;

                label {
                    width: 100px;
                    font-size: 20px;
                    color: #999;
                }

                .value {
                    font-size: 20px;
                    color: #333;
                    font-weight: 400;
                }

                &.desc {
                    text-align: center;
                    font-size: 26px;
                    font-weight: bold;
                    color: #333;
                }

                &.price {
                    font-size: 24px;
                    color: #555;
                    font-weight: bold;
                }
            }

            button.btn-login-link {
                font-size: 20px !important;
                background: white;
                border: 1px solid rgb(255, 92, 92);

                a.login-link {
                    color: red !important;
                }
            }
        }
    }

    .img {
        position: relative;
/* 
        .prod_image {
            margin-top: 20px;
            width: 300px;
            height: 300px;

            @media only screen and (max-width: 772px) {
                width: 200px;
                height: 200px;
            }
        } */

        .stock-avail {
            position: absolute;
            width: 50px;
            height: 50px;
            right: -10px;
            top: 0px;
        }

        .profit {
            position: absolute;
            width: 50px;
            height: 50px;
            left: -10px;
            top: 0px;
            z-index: 10;
        }
    }

    .favorite {
        position: absolute;
        right: 50px;
        top: 0px;
        cursor: pointer;

        i {
            color: mistyrose;

            &:hover {
                color: #ed0e35;
            }

            &.active {
                color: #ed0e35;
            }
        }
    }

    .promo-end {
        font-size: 20px !important;
        color: gray;
    }
}

.cart-action {
    .quantity {
        display: inline-block;
        width: 35px;
        margin: 10px;
        padding: 5px;
        vertical-align: super;
        text-align: center;
        cursor: pointer;
        border: #eee 1px solid;
        font-size: 1.5em;

        .quantity_cell {
            display: none;
            text-align: center;
            height: 1rem;
            margin: 0px;
        }
    }

    i.remove {
        color: #ff1919;
        cursor: pointer;
    }

    i.add {
        color: #00b279;
        cursor: pointer;
    }
}

.guideline-daily-amount {
    .one-nutrition {
        min-width: 100px;
        font-size: 14px;

        @media only screen and (max-width: 772px) {
            font-size: 12px;
            min-width: 50px !important;
            margin-left: 3px !important;
            margin-right: 3px !important;

            .amount,
            .container-lvl {
                padding-left: 2px !important;
                padding-right: 2px !important;
            }

            .amount {
                border-top-left-radius: 50% 15% !important;
                border-top-right-radius: 50% 15% !important;
                height: 80px !important;
            }

            .container-lvl {
                border-bottom-left-radius: 50% 15% !important;
                border-bottom-right-radius: 50% 15% !important;
                height: 60px !important;
            }
        }

        .divider {
            width: 100%;
            height: 1px;
            background: #888;
        }

        .amount {
            border-top-left-radius: 50% 25%;
            border-top-right-radius: 50% 25%;
            border: 1px solid #888;
            width: 100%;
            border-bottom: none;
            height: 100px;
        }

        .container-lvl {
            border-bottom-left-radius: 50% 25%;
            border-bottom-right-radius: 50% 25%;
            border: 1px solid #888;
            width: 100%;
            height: 80px;
            padding-top: 15px !important;
            &.Low {
                background: #2fe92f;
            }

            &.Medium {
                background: rgb(255, 196, 0);
            }

            &.High {
                background: red;
                color: white;
            }
        }
    }
}

.my-account-main {
    h4 {
        font-size: 2rem !important;
    }

    label {
        color: #888;
        font-size: 1rem !important;
    }

    .value {
        font-weight: bold;
        color: #333;
    }

    .credit-account {
        max-width: 600px;
        width: 100%;
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.12);
        border-radius: 10px;

        .credit-progress {
            height: 20px;

            .spent {
                background-color: rgb(180, 7, 7);
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
            }

            .available {
                background-color: green;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
            }
        }
    }

    .send-payment {
        width: 100%;
        max-width: 600px;
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.12);
        border-radius: 10px;

        .pay-amount {
            min-width: 120px;
        }

        .last-payment {
            .payment-status {
                padding: 5px 20px;
                border-radius: 5px;
                text-align: center;
                max-width: 100px;

                &.success {
                    background: #00b279;
                    color: white;
                }

                &.pending {
                    background: pink;
                    color: #333;
                }

                @media (max-width: 576px) {
                    padding: 5px 0 !important;
                }
            }
        }
    }
}

.invoice-history,
.invoice-detail,
.order-history,
.order-detail,
.account-ledger {
    .title {
        padding: 10px;
        font-size: 20px;
        background: red;
        color: white !important;
        border-radius: 5px;
    }
}

#add-product-cart-modal {
    width: fit-content;
    min-width: 400px;
    padding: 30px 20px 20px 20px;
    border-radius: 5px;

    .grid-item {
        width: 100% !important;
    }
}

#my_branches_dialog {
    width: 400px !important;

    .modal-header {
        background: red;
        color: white;
        padding: 5px;
        font-size: 120%;
    }

    .branches {
        ul {
            li {
                text-align: left;
                margin-top: 10px;
            }
        }
    }
}

.cms-content {
    cursor: pointer !important;
}

.banners-carousel {
    .carousel {
        min-height: unset !important;
        height: unset !important;

        .carousel-item {
            min-height: unset !important;
            height: fit-content !important;
        }
    }
}

.sponsor-products {
    padding: 0px 10px 20px 10px;
    border-radius: 5px;
    margin-bottom: 20px;

    .sponsor-ribbon {
        padding: 10px;
    }
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}