/* ══════════════════════════════════════════════════════════════
   LEGACY BASE  —  consolidated from internal_2.css
══════════════════════════════════════════════════════════════ */
html {
    overflow-y: scroll;
    margin: 0;
    padding: 0;
}
body {
    background-color: #ffffff;
    color: #000000;
    margin: 0px;
    padding: 0px;
}
body, td, th, input, textarea, select, a {
    font-size: 12px;
}

#logo img{width:100%;height:100%;}
h1, .welcome {
    color: #636E75;
    font: Verdana;
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 32px;
    font-weight: normal;
    text-shadow: 0 0 1px rgba(0, 0, 0, .01);
}
h2 {
    color: #000000;
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 5px;
}
p {
    margin-top: 0px;

}
a, a:visited, a b {
    color: #38B0E3;
    text-decoration: underline;
    cursor: pointer;
}
a:hover {
    text-decoration: none;
}
a img {
    border: none;
}
form {
    padding: 0;
    margin: 0;
    display: inline;
}
input[type='text'], input[type='password'], textarea {
    background: #F8F8F8;
    border: 1px solid #CCCCCC;
    padding: 3px;
    margin-left: 0px;
    margin-right: 0px;
}
select {
    background: #F8F8F8;
    border: 1px solid #CCCCCC;
    padding: 2px;
}
label {
    cursor: pointer;
}
/* layout */
#container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#column-left {
    float: left;
    width: 180px;
}
#column-right {
    float: right;
    width: 180px;
}
#content {
    min-height: 400px;
    margin-bottom: 25px;
}
#column-left + #column-right + #content, #column-left + #content {
    margin-left: 195px;
}
#column-right + #content {
    margin-right: 195px;
}
/* header */
#header {
    height: 90px;
    margin-bottom: 7px;
    padding-bottom: 4px;
    position: relative;
    z-index: 99;
}
#language {
    position: absolute;
    top: 15px;
    left: 320px;
    width: 80px;
    color: #999;
    line-height: 17px;
}
#language img {
    cursor: pointer;
    margin-right: 5px;
}
#currency {
    width: 75px;
    position: absolute;
    top: 15px;
    left: 425px;
    color: #999;
    line-height: 17px;
}
#currency a {
    display: inline-block;
    padding: 2px 4px;
    border: 1px solid #CCC;
    color: #999;
    text-decoration: none;
    margin-right: 2px;
    margin-bottom: 2px;
}
#currency a b {
    color: #000;
    text-decoration: none;
}
#header #cart {
    position: absolute;
    top: 0px;
    right: 145px;
    z-index: 9;
    min-width: 300px;
}
#header #cart .heading {
    float: right;
    margin-right: 172px;
    margin-top: 15px;
    padding-left: 14px;
    padding-right: 14px;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #EEEEEE;
    background: #FFF;
    position: relative;
    z-index: 1;
}
#header #cart .heading h4 {
    color: #333333;
    font-size: 15px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 3px;
}
#header #cart .heading a {
    color: #38B0E3;
    text-decoration: none;
}
#header #cart .heading a span {
    background: #FFFFFF ;
    padding-right: 15px;
}
#header #cart .content {
    clear: both;
    display: none;
    position: relative;
    top: -1px;
    padding: 8px;
    min-height: 150px;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    -webkit-border-radius: 0px 7px 7px 7px;
    -moz-border-radius: 0px 7px 7px 7px;
    -khtml-border-radius: 0px 7px 7px 7px;
    border-radius: 0px 7px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    background: #FFF;
}
#header #cart.active .heading {
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 6px;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    -webkit-border-radius: 7px 7px 0px 0px;
    -moz-border-radius: 7px 7px 0px 0px;
    -khtml-border-radius: 7px 7px 0px 0px;
    border-radius: 7px 7px 0px 0px;
}
#header #cart.active .content {
    display: block;
}
.mini-cart-info table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 5px;
}
.mini-cart-info td {
    color: #000;
    vertical-align: top;
    padding: 10px 5px;
    border-bottom: 1px solid #EEEEEE;
}
.mini-cart-info .image {
    width: 1px;
}
.mini-cart-info .image img {
    border: 1px solid #EEEEEE;
    text-align: left;
}
.mini-cart-info .name small {
    color: #666;
}
.mini-cart-info .quantity {
    text-align: right;
}
.mini-cart-info td.total {
    text-align: right;
}
.mini-cart-info .remove {
    text-align: right;
}
.mini-cart-info .remove img {
    cursor: pointer;
}
.mini-cart-total {
    text-align: right;
}
.mini-cart-total table {
    border-collapse: collapse;
    display: inline-block;
    margin-bottom: 5px;
}
.mini-cart-total td {
    color: #000;
    padding: 4px;
}
#header #cart .checkout {
    text-align: right;
    clear: both;
}
#header #cart .empty {
    padding-top: 50px;
    text-align: center;
}
#header #search {
    /* position: absolute; */
    /* top: 0px; */
    /* right: 0px; */
    width: 100%;
    /* z-index: 15; */
}
#header .button-search {
    position: absolute;
    left: 0px;
    background: none;
    width: 28px;
    height: 34px;
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -khtml-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    -webkit-box-shadow: 1px 2px 3px #CAC8C8;
    -moz-box-shadow: 1px 2px 3px #CAC8C8;
    box-shadow: 1px 2px 3px #CAC8C8;
    cursor: pointer;
}

#header #search .option-dropdown{
    text-align: center;
    background: rgb(245, 245, 245);
    width: 120px;
    height: 34px;
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -khtml-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    -webkit-box-shadow: 1px 2px 3px #CAC8C8;
    -moz-box-shadow: 1px 2px 3px #CAC8C8;
    box-shadow: 1px 2px 3px #CAC8C8;
    cursor: pointer;
}

#header  #search .option-text{
    display: inline-block;
    left: 0px;
    background: none;
    width: fit-content;
    height: 24px;
}

#header #search input {
    background: #FFF;
    padding: 1px 1px 1px 1px;
    width: 100px;
    height: 34px;
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -khtml-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    -webkit-box-shadow: 1px 2px 3px #CAC8C8;
    -moz-box-shadow: 1px 2px 3px #CAC8C8;
    box-shadow: 1px 2px 3px #CAC8C8;
}
#header #welcome {
    position: absolute;
    top: 47px;
    right: 0px;
    z-index: 5;
    width: 298px;
    text-align: right;
    color: #999999;
}
#header .links {
    position: absolute;
    right: 0px;
    bottom: 3px;
    font-size: 10px;
    padding-right: 10px;
}
#header .links a {
    float: left;
    display: block;
    padding: 0px 0px 0px 7px;
    color: #38B0E3;
    text-decoration: none;
    font-size: 12px;
}
#header .links a + a {
    margin-left: 8px;
    border-left: 1px solid #CCC;
}
/* menu */
#menu {
    background: #585858;
    height: 37px;
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu > ul > li {
    position: relative;
    float: left;
    z-index: 20;
    padding: 6px 5px 5px 0px;
}
#menu > ul > li > a {
    font-size: 13px;
    color: #FFF;
    line-height: 14px;
    text-decoration: none;
    display: block;
    padding: 6px 10px 6px 10px;
    margin-bottom: 5px;
    z-index: 6;
    position: relative;
}
#menu > ul > li:hover > a {
    background: #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu > ul > li > div {
    display: none;
    background: #FFFFFF;
    position: absolute;
    z-index: 5;
    padding: 5px;
    border: 1px solid #000000;
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    background: rgba(0, 0, 0, 0.81);
}
#menu > ul > li:hover > div {
    display: table;
}
#menu > ul > li > div > ul {
    display: table-cell;
}
#menu > ul > li ul + ul {
    padding-left: 20px;
}
#menu > ul > li ul > li > a {
    text-decoration: none;
    padding: 4px;
    color: #FFFFFF;
    display: block;
    white-space: nowrap;
    min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
    background: #000000;
}
#menu > ul > li > div > ul > li > a {
    color: #FFFFFF;
}
.breadcrumb {
    color: #CCCCCC;
    margin-bottom: 10px;
}
.success, .warning, .attention, .information {
    font-size: 19px;
    padding: 10px 10px 10px 33px;
    margin-bottom: 15px;
    color: #555555;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
.success {
    background: #b8ebcf;
    border: 1px solid #b8ebcf;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    width:54%;
}
.warning {
    background: #ffeab8;
    border: 1px solid #ffeab8;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
.attention {
    background: #ebb8b8;
    border: 1px solid #ebb8b8;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
.success .close, .warning .close, .attention .close, .information .close {
    padding: 6px 2px 6px 30px;
    float: right;
    cursor: pointer;
}
.required {
    color: #FF0000;
    font-weight: bold;
}
.error {
    display: block;
    color: #FF0000;
}
.help {
    color: #999;
    font-size: 10px;
    font-weight: normal;
    display: block;
}
table.form {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
table.form tr td:first-child {
    width: 150px;
}
table.form > * > * > td {
    color: #000000;
}
table.form td {
    padding: 4px;
}
input.large-field, select.large-field {
    width: 300px;
}
table.list {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    margin-bottom: 20px;
}
table.list td {
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}
table.list thead td {
    background-color: #EFEFEF;
    padding: 0px 5px;
}
table.list thead td a, .list thead td {
    text-decoration: none;
    color: #222222;
    font-weight: bold;
}
table.list tbody td {
    padding: 0px 5px;
}
table.list .left {
    text-align: left;
    padding: 7px;
}
table.list .right {
    text-align: right;
    padding: 7px;
}
table.list .center {
    text-align: center;
    padding: 7px;
}
table.radio {
    width: 100%;
    border-collapse: collapse;
}
table.radio td {
    padding: 5px;
}
table.radio td label {
    display: block;
}
table.radio tr td:first-child {
    width: 1px;
}
table.radio tr td:first-child input {
    margin-top: 1px;
}
table.radio tr.highlight:hover td {
    background: #F1FFDD;
    cursor: pointer;
}
/* ── Pagination ─────────────────────────────── */
.pagination {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.pg-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 0;
}
.pg-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1.5px solid var(--c-primary-scroll);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: none;
    background: #fff;
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}
a.pg-item:hover {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    text-decoration: none;
}

a.pg-item:visited {
    color: var(--c-primary);
}

b.pg-item.pg-active {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    cursor: default;
    font-weight: 700;
}
.pg-item.pg-arrow {
    font-size: 20px;
    font-weight: 900;
    min-width: 40px;
    line-height: 1;
}
.pg-item.pg-disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}
.pg-item.pg-ellipsis {
    border: none;
    color: #666;
    font-weight: 400;
    cursor: default;
    min-width: 20px;
    padding: 0 4px;
}
.pg-item.pg-ellipsis:hover {
    background: transparent;
    color: #666;
}
/* button */
a.button, input.button {
    cursor: pointer;
    color: #FFFFFF;
    line-height: 12px;
    font-size: 12px;
    font-weight: bold;
    background: linear-gradient(to bottom, #f8f7fd, #e9e9ea);
    -webkit-border-radius: 7px 7px 7px 7px;
    -moz-border-radius: 7px 7px 7px 7px;
    -khtml-border-radius: 7px 7px 7px 7px;
    border-radius: 7px 7px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
}
a.button {
    display: inline-block;
    text-decoration: none;
    padding: 6px 12px 6px 12px;
}
input.button {
    margin: 0;
    border: 0;
    height: 24px;
    padding: 0px 12px 0px 12px;
}
a.button:hover, input.button:hover {
    background-position: 0px -24px;
}
.buttons {

    overflow: auto;
    padding: 6px;
    margin-bottom: 20px;
}
.buttons .left {
    float: left;
    text-align: left;
}
.buttons .right {
    float: right;
    text-align: right;
}
.buttons .center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.htabs a {
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    background: lightgrey;
    padding: 7px 15px 6px 15px;
    float: left;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #000000;
    margin-right: 2px;
    display: none;
}
.htabs a.selected {
    padding-bottom: 5px;
    background: #FFFFFF;
}

/* box */
.box {
    margin-bottom: 20px;
}
.box .box-heading {
    -webkit-border-radius: 7px 7px 0px 0px;
    -moz-border-radius: 7px 7px 0px 0px;
    -khtml-border-radius: 7px 7px 0px 0px;
    border-radius: 7px 7px 0px 0px;
    border: 1px solid #DBDEE1;
    background: linear-gradient(to bottom, #f8f7fd, #e9e9ea);
    padding: 8px 10px 7px 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    color: #333;
}
.box .box-content {
    background: #FFFFFF;
    -webkit-border-radius: 0px 0px 7px 7px;
    -moz-border-radius: 0px 0px 7px 7px;
    -khtml-border-radius: 0px 0px 7px 7px;
    border-radius: 0px 0px 7px 7px;
    border-left: 1px solid #DBDEE1;
    border-right: 1px solid #DBDEE1;
    border-bottom: 1px solid #DBDEE1;
    padding: 10px;
}
/* box products */
.box-product {
    width: 100%;
    overflow: auto;
}
.box-product > div {
    width: 130px;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
    width: 119px;
}
.box-product .image {
    display: block;
    margin-bottom: 0px;
}
.box-product .image img {
    padding: 3px;
    border: 1px solid #E7E7E7;
}
.box-product .name a {
    color: #38B0E3;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}
.box-product .price {
    display: block;
    font-weight: bold;
    color: #333333;
    margin-bottom: 4px;
}
.box-product .price-old {
    color: #F00;
    text-decoration: line-through;
}
.box-product .price-new {
    font-weight: bold;
}
.box-product .rating {
    display: block;
    margin-bottom: 4px;
}
/* box category */
ul.box-category, ul.box-category ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.box-category > li:first-child {
    padding: 0px 8px 8px 0px;
}
ul.box-category > li {
    padding: 8px 8px 8px 0px;
}
ul.box-category > li + li {
    border-top: 1px solid #EEEEEE;
}
ul.box-category > li > a {
    text-decoration: none;
    color: #333;
}
ul.box-category > li ul {
    display: none;
}
ul.box-category > li a.active {
    font-weight: bold;
}
ul.box-category > li a.active + ul {
    display: block;
}
ul.box-category > li ul > li {
    padding: 5px 5px 0px 10px;
}
ul.box-category > li ul > li > a {
    text-decoration: none;
    display: block;
}
ul.box-category > li ul > li > a.active {
    font-weight: bold;
}
/* box filter */
ul.box-filter, ul.box-filter ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.box-filter span {
    font-weight: bold;
    border-bottom: 1px solid #EEEEEE;	
    display: block;
    padding-bottom: 5px;
    margin-bottom: 8px;
}
ul.box-filter > li ul {
    padding-bottom: 10px;
}
/* content */
#content .content {
    padding: 10px;
    overflow: auto;
    margin-bottom: 20px;
    border: 1px solid #EEEEEE;
}
#content .content .left {
    float: left;
    width: 49%;
}
#content .content .right {
    float: right;
    width: 49%;
}
/* category */
.category-info {
    overflow: auto;
    margin-bottom: 20px;
}
.category-info .image {
    float: left;
    padding: 5px;
    margin-right: 15px;
    border: 1px solid #E7E7E7;
}
.category-list {
    overflow: auto;
    margin-bottom: 20px;
}
.category-list ul {
    float: left;
    width: 18%;
}
/* manufacturer */
.manufacturer-list {
    border: 1px solid #DBDEE1;
    padding: 5px;
    overflow: auto;
    margin-bottom: 20px;
}
.manufacturer-heading {
    background: #F8F8F8;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 8px;
    margin-bottom: 6px;
}
.manufacturer-content {
    padding: 8px;
}
.manufacturer-list ul {
    float: left;
    width: 25%;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 10px;
}
/* product */
.product-filter {
    border-bottom: 1px solid #EEEEEE;
    padding-bottom: 5px;
    overflow: auto;
}
.product-filter .display {
    margin-right: 15px;
    float: left;
    padding-top: 4px;
    color: #333;
}
.product-filter .display a {
    font-weight: bold;
}
.product-filter .sort {
    float: right;
    color: #333;
}
.product-filter .limit {
    margin-left: 15px;
    float: right;
    color: #333;
}
.product-compare {
    padding-top: 6px;
    margin-bottom: 25px;
    font-weight: bold;
}
.product-compare a {
    text-decoration: none;
    font-weight: bold;
}
.product-list > div {
    overflow: auto;
    margin-bottom: 15px;
}
.product-list .right {
    float: right;
    margin-left: 15px;
}
.product-list > div + div {
    border-top: 1px solid #EEEEEE;
    padding-top: 16px;
}
.product-list .image {
    float: left;
    margin-right: 10px;
}
.product-list .image img {
    padding: 3px;
    border: 1px solid #E7E7E7;
}
.product-list .name {
    margin-bottom: 3px;
}
.product-list .name a {
    color: #38B0E3;
    font-weight: bold;
    text-decoration: none;
}
.product-list .description {
    line-height: 15px;
    margin-bottom: 5px;
    color: #4D4D4D;
}
.product-list .rating {
    color: #7B7B7B;
}
.product-list .price {
    float: right;
    height: 50px;
    margin-left: 8px;
    text-align: right;
    color: #333333;
    font-size: 12px;
}
.product-list .price-old {
    color: #F00;
    text-decoration: line-through;
}
.product-list .price-new {
    font-weight: bold;
}
.product-list .price-tax {
    font-size: 12px;
    font-weight: normal;
    color: #BBBBBB;
}
.product-list .cart {
    margin-bottom: 3px;
}
.product-list .wishlist, .product-list .compare {
    margin-bottom: 3px;
}
.product-list .wishlist a {
    color: #333333;
    text-decoration: none;
    padding-left: 18px;
    display: block;
    /*background: url('../image/add.png') left center no-repeat;*/
}
.product-list .compare a {
    color: #333333;
    text-decoration: none;
    padding-left: 18px;
    display: block;
    /*background: url('../image/add.png') left 60% no-repeat;*/
}
.product-grid {
    width: 100%;
    overflow: auto;
}
.product-grid > div {
    width: 130px;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    margin-bottom: 15px;
}
#column-left + #column-right + #content .product-grid > div {
    width: 125px;
}
.product-grid .image {
    display: block;
    margin-bottom: 0px;
}
.product-grid .image img {
    padding: 3px;
    border: 1px solid #E7E7E7;
}
.product-grid .name a {
    color: #38B0E3;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}
.product-grid .description {
    display: none;
}
.product-grid .rating {
    display: block;
    margin-bottom: 4px;
}
.product-grid .price {
    display: block;
    font-weight: bold;
    color: #333333;
    margin-bottom: 4px;
}
.product-grid .price-old {
    color: #F00;
    text-decoration: line-through;
}
.product-grid .price-new {
    font-weight: bold;
}
.product-grid .price .price-tax {
    display: none;
}
.product-grid .cart {
    margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
    margin-bottom: 3px;
}
.product-grid .wishlist a {
    color: #333333;
    text-decoration: none;
    padding-left: 18px;
    display: block;
    /*background: url('../image/add.png') left center no-repeat;*/
}
.product-grid .compare a {
    color: #333333;
    text-decoration: none;
    padding-left: 18px;
    display: block;
    /*background: url('../image/add.png') left center no-repeat;*/
}
/* Product */
.product-info {
    overflow: auto;
    margin-bottom: 20px;
}
.product-info > .left {
    float: left;
    margin-right: 15px;
}
.product-info > .left + .right {
    margin-left: 265px;
}
.product-info .image {
    border: 1px solid #E7E7E7;
    float: left;
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
}
.product-info .image-additional {
    width: 260px;
    margin-left: -10px;
    clear: both;
    overflow: hidden;
}
.product-info .image-additional img {
    border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
    float: left;
    display: block;
    margin-left: 10px;
    margin-bottom: 10px;
}
.product-info .description {
    border-top: 1px solid #E7E7E7;
    border-bottom: 1px solid #E7E7E7;
    padding: 5px 5px 10px 5px;
    margin-bottom: 10px;
    line-height: 20px;
    color: #4D4D4D;
}
.product-info .description span {
    color: #38B0E3;
}
.product-info .description a {
    color: #4D4D4D;
    text-decoration: none;
}
.product-info .price {
    overflow: auto;
    border-bottom: 1px solid #E7E7E7;
    padding: 0px 5px 10px 5px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
    color: #333333;
}
.product-info .price-old {
    color: #F00;
    text-decoration: line-through;
}
.product-info .price-tax {
    font-size: 12px;
    font-weight: normal;
    color: #999;
}
.product-info .price .reward {
    font-size: 12px;
    font-weight: normal;
    color: #999;
}
.product-info .price .discount {
    font-weight: normal;
    font-size: 12px;
    color: #4D4D4D;
}
.product-info .options {
    border-bottom: 1px solid #E7E7E7;
    padding: 0px 5px 10px 5px;
    margin-bottom: 10px;
    color: #000000;
}
.product-info .option-image {
    margin-top: 3px;
    margin-bottom: 10px;
}
.product-info .option-image label {
    display: block;
    width: 100%;
    height: 100%;
}
.product-info .option-image img {
    margin-right: 5px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
}
.product-info .cart {
    border-bottom: 1px solid #E7E7E7;
    padding: 0px 5px 10px 5px;
    margin-bottom: 20px;
    color: #4D4D4D;
}
.product-info .cart div > span {
    color: #999;
}
.product-info .cart .links {
    display: inline-block;
    vertical-align: middle;
}
.product-info .cart .minimum {
    padding-top: 5px;
    font-size: 11px;
    color: #999;
}
.product-info .review {
    color: #4D4D4D;
    border-top: 1px solid #E7E7E7;
    border-left: 1px solid #E7E7E7;
    border-right: 1px solid #E7E7E7;
    margin-bottom: 10px;
}
.product-info .review > div {
    padding: 8px;
    border-bottom: 1px solid #E7E7E7;
    line-height: 20px;
}
.product-info .review > div > span {
    color: #38B0E3;
}
.product-info .review .share {
    overflow: auto;
    line-height: normal;
}
.product-info .review .share a {
    text-decoration: none;
}
.review-list {
    padding: 10px;
    overflow: auto;
    margin-bottom: 20px;
    border: 1px solid #EEEEEE;
}
.review-list .author {
    float: left;
    margin-bottom: 20px;
}
.review-list .rating {
    float: right;
    margin-bottom: 20px;
}
.review-list .text {
    clear: both;
}
.attribute {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    margin-bottom: 20px;
}
.attribute thead td, .attribute thead tr td:first-child {
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    background: #F7F7F7;
    text-align: left;
}
.attribute tr td:first-child {
    color: #000000;
    font-weight: bold;
    text-align: right;
    width: 20%;
}
.attribute td {
    padding: 7px;
    color: #4D4D4D;
    text-align: center;
    vertical-align: top;
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}
.compare-info {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    margin-bottom: 20px;
}
.compare-info thead td, .compare-info thead tr td:first-child {
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    background: #F7F7F7;
    text-align: left;
}
.compare-info tr td:first-child {
    color: #000000;
    font-weight: bold;
    text-align: right;
}
.compare-info td {
    padding: 7px;
    width: 20%;
    color: #4D4D4D;
    text-align: center;
    vertical-align: top;
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}
.compare-info .name a {
    font-weight: bold;
}
.compare-info .price-old {
    font-weight: bold;
    color: #F00;
    text-decoration: line-through;
}
.compare-info .price-new {
    font-weight: bold;
}
/* wishlist */
.wishlist-info table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    margin-bottom: 20px;
}
.wishlist-info td {
    padding: 7px;
}
.wishlist-info thead td {
    color: #4D4D4D;
    font-weight: bold;
    background-color: #F7F7F7;
    border-bottom: 1px solid #DDDDDD;
}
.wishlist-info thead .image {
    text-align: center;
}
.wishlist-info thead .name, .wishlist-info thead .model, .wishlist-info thead .stock {
    text-align: left;
}
.wishlist-info thead .quantity, .wishlist-info thead .price, .wishlist-info thead .total, .wishlist-info thead .action {
    text-align: right;
}
.wishlist-info tbody td {
    vertical-align: top;
    border-bottom: 1px solid #DDDDDD;
}
.wishlist-info tbody .image img {
    border: 1px solid #DDDDDD;
}
.wishlist-info tbody .image {
    text-align: center;
}
.wishlist-info tbody .name, .wishlist-info tbody .model, .wishlist-info tbody .stock {
    text-align: left;
}
.wishlist-info tbody .quantity, .wishlist-info tbody .price, .wishlist-info tbody .total, .wishlist-info tbody .action {
    text-align: right;
}
.wishlist-info tbody .price s {
    color: #F00;
}
.wishlist-info tbody .action img {
    cursor: pointer;
}
.login-content {
    margin-bottom: 20px;
    overflow: auto;
}
.login-content .left {
    float: left;
    width: 48%;
}
.login-content .right {
    float: right;
    width: 48%
}
.login-content .left .content, .login-content .right .content {
    min-height: 190px;
}
/* orders */
.order-list {
    margin-bottom: 10px;
}
.order-list .order-id {
    width: 49%;
    float: left;
    margin-bottom: 2px;
}
.order-list .order-status {
    width: 49%;
    float: right;
    text-align: right;
    margin-bottom: 2px;
}
.order-list .order-content {
    padding: 10px 0px;
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}
.order-list .order-content div {
    float: left;
    width: 33.3%;
}
.order-list .order-info {
    text-align: right;
}
.order-detail {
    background: #EFEFEF;
    font-weight: bold;
}
/* returns */
.return-list {
    margin-bottom: 10px;
}
.return-list .return-id {
    width: 49%;
    float: left;
    margin-bottom: 2px;
}
.return-list .return-status {
    width: 49%;
    float: right;
    text-align: right;
    margin-bottom: 2px;
}
.return-list .return-content {
    padding: 10px 0px;
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}
.return-list .return-content div {
    float: left;
    width: 33.3%;
}
.return-list .return-info {
    text-align: right;
}
.return-product {
    overflow: auto;
    margin-bottom: 20px;
}
.return-name {
    float: left;
    width: 31%;
    margin-right: 15px;
}
.return-model {
    float: left;
    width: 31%;
    margin-right: 15px;
}
.return-quantity {
    float: left;
    width: 31%;
}
.return-detail {
    overflow: auto;
    margin-bottom: 20px;
}
.return-reason {
    float: left;
    width: 31%;
    margin-right: 15px;
}
.return-opened {
    float: left;
    width: 31%;
    margin-right: 15px;
}
.return-opened textarea {
    width: 98%;
    vertical-align: top;
}
.return-captcha {
    float: left;
}
.download-list {
    margin-bottom: 10px;
}
.download-list .download-id {
    width: 49%;
    float: left;
    margin-bottom: 2px;
}
.download-list .download-status {
    width: 49%;
    float: right;
    text-align: right;
    margin-bottom: 2px;
}
.download-list .download-content {
    padding: 10px 0px;
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}
.download-list .download-content div {
    float: left;
    width: 33.3%;
}
.download-list .download-info {
    text-align: right;
}

.cart-info td {
    padding: 7px;
}
.cart-info thead td {
    color: #4D4D4D;
    font-weight: bold;
    background-color: #F7F7F7;
    border-bottom: 1px solid #DDDDDD;
}
.cart-info thead .image {
    text-align: center;
}
.cart-info thead .name, .cart-info thead .model, .cart-info thead .quantity {
    text-align: left;
}
.cart-info thead .price, .cart-info thead .total {
    text-align: right;
}
.cart-info tbody td {
    vertical-align: top;
    border-bottom: 1px solid #DDDDDD;
}
.cart-info tbody .image img {
    border: 1px solid #DDDDDD;
}
.cart-info tbody .image {
    text-align: center;
}
.cart-info tbody .name, .cart-info tbody .model, .cart-info tbody .quantity {
    text-align: left;
}
.cart-info tbody .quantity input[type='image'], .cart-info tbody .quantity img {
    position: relative;
    top: 4px;
    cursor: pointer;
}
.cart-info tbody .price, .cart-info tbody .total {
    text-align: right;
}
.cart-info tbody span.stock {
    color: #F00;
    font-weight: bold;
}
.cart-module > div {
    display: none;
}
.cart-total {
    border-top: 1px solid #DDDDDD;
    overflow: auto;
    padding-top: 8px;
    margin-bottom: 15px;
}
.cart-total table {
    float: right;
}
.cart-total td {
    padding: 3px;
    text-align: right;
    padding-right: 19px;
}
/* checkout */
.checkout-heading {
    background: #F8F8F8;
    border: 1px solid #DBDEE1;
    padding: 8px;
    font-weight: bold;
    font-size: 13px;
    color: #555555;
    margin-bottom: 15px;
}
.checkout-heading a {
    float: right;
    margin-top: 1px;
    font-weight: normal;
    text-decoration: none;
}
.checkout-content {
    padding: 0px 0px 15px 0px;
    display: none;
    overflow: auto;
}
.checkout-content .left {
    float: left;
    width: 48%;
}
.checkout-content .right {
    float: right;
    width: 48%;
}
.checkout-content .buttons {
    clear: both;
}
.checkout-product table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    margin-bottom: 20px;
}
.checkout-product td {
    padding: 7px;
}
.checkout-product thead td {
    color: #4D4D4D;
    font-weight: bold;
    background-color: #F7F7F7;
    border-bottom: 1px solid #DDDDDD;
}
.checkout-product thead .name, .checkout-product thead .model {
    text-align: left;
}
.checkout-product thead .quantity, .checkout-product thead .price, .checkout-product thead .total {
    text-align: right;
}
.checkout-product tbody td {
    vertical-align: top;
    border-bottom: 1px solid #DDDDDD;
}
.checkout-product tbody .name, .checkout-product tbody .model {
    text-align: left;
}
.checkout-product tbody .quantity, .checkout-product tbody .price, .checkout-product tbody .total {
    text-align: right;
}
.checkout-product tfoot td {
    text-align: right;
    border-bottom: 1px solid #DDDDDD;
}
.contact-info {
    overflow: auto;
}
.contact-info .left {
    float: left;
    width: 48%;
}
.contact-info .right {
    float: left;
    width: 48%;
}
.sitemap-info {
    overflow: auto;
    margin-bottom: 40px;
}
.sitemap-info .left {
    float: left;
    width: 48%;
}
.sitemap-info .right {
    float: left;
    width: 48%;
}
/* banner */
.banner div {
    text-align: center;
    width: 100%;
    display: none;
}
.banner div img {
    margin-bottom: 20px;
}
/*INDICATORS*/
.ind{padding: 5px;border-radius: 26px;color: #fff;font-weight: bold;font-size: 10px;}
.web{background: #ca2020;}
.alt{background: var(--c-green);}
.pro{background: #207CCA;}
.ows{background: #00f700;color:#000;}
.ovr{background: #993333;}
.pflag{background: #acdef0;color:#000;}
.exp{background: #CA8820;}

/*Account Status*/
.status-Y{color:rgb(10, 10, 10);}
.status-T{color:black;}
#status_ind{margin-left: 100px;padding: 5px 10px;}
.status_ind_sq {display: inline-flex;width: 10px;height: 10px;margin: 5px;}
.legend{float: right;font-size: 12px;color: #000;}  

.welcome_text{
    color: var(--c-primary-dark);
}

@media screen{
#to_from_quote{display:none;}
}
@media print{
    #to_from_quote{display:show;}
}


.status-deb-Y{background:red;color:rgb(10, 10, 10);}
.status-deb-T{background:orange;color:#000;}

/* ══════════════════════════════════════════════════════════════
   CORE SITE  —  consolidated from internal.css
══════════════════════════════════════════════════════════════ */
* {
    box-sizing: border-box;
}

@media only screen and (min-width: 1115px) {
    .col-1 {width: 8.33%!important;}
    .col-2 {width: 16.66%!important;}
    .col-3 {width: 24%!important;}
    .col-4 {width: 33.33%!important;}
    .col-5 {width: 41.66%!important;}
    .col-6 {width: 50%!important;}
    .col-7 {width: 58.33%!important;}
    .col-8 {width: 66.66%!important;}
    .col-9 {width: 75%!important;}
    .col-10 {width: 83.33%!important;}
    .col-11 {width: 91.66%!important;}
    .col-12 {width: 100%!important;}
  
    .mobile-menuheader {
      display: none!important;
    }
  }
[class*="col-"] {
    float: left;
    padding-left: 15px;

}


@media only screen and (max-width: 1115px) {
    /* For mobile phones: */
    #menu > ul > li:hover > div {width:100%;    position: inherit;}
    .nomobile{display:none!important;}
    .nodesktop{display:block!important;}
    table.list,table.oritable{    width: 92%!important;margin-top:0px!important;}
    table#list2{    width: 100%!important;margin-top:0px!important;    overflow-x: scroll;display: block;    padding-top: 20px;}
    table#list2:before{content:'Scroll from left to right';margin-top:10px;}
    #header #search {    padding-bottom: 25px!important;}
    #menu ul {  height: auto; }
    #menu ul > li {  float: none; width: 100%; }
    #menu ul a { line-height: 40px; }
    #menu ul ul { position: relative; }
    [class*="col-"] {
        width: 100%!important;
    }
    #container {
        width: 100%!important;padding:0px!important;margin:0px!important;
    }
    #footerinner {
        width: 100%!important;
        margin: 0px;
    }#page-bg {
        margin:0px!important;
        padding:0px!important;
    }

    .ad-chip--rep {
      margin-bottom: 5px;
    }
}
@media only screen and (min-width: 1116px) {
    .nodesktop{display:none!important;}
    .nomobile{display:block!important;}
}
@media only screen and (min-width: 1116px) and (max-width: 1327px)  {

    .addbutton a {
        font-size: 74%!important;
    }
    #container {
        width: 95%!important;
    }
}
/*Sales History*/
#product_filter{width: 182px!important;}
.nopadding{padding:0!important;}
.total_top{
    float: right;
    margin-top: -9px;
    font-weight: bold;
    color: #369BF2;
    font-size: 19px;
}
.date_field{
    width: 90px!important;
}
/*Nappi*/
.visNappi{display:initial!important;}
.nappi{
    color: #FFFFFF;
    padding: 4px 7px;
    margin-right: 8px;
    margin-top: -3px;
}
#nappion{
    background: var(--c-primary-dark)
}
#nappioff{
    background: var(--c-green)
}

.terms p {
    margin-top: 0px;
    margin-left: 30px;
}
body {
    color: #333;
    font-size: 12px;
    line-height: 1.7em;

    background-color: var(--c-bg-page);

}
div{margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    background: transparent;}
#container {
    width: 80%;
    /*max-width: 1100px;*/
}

#page-bg {
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}

.branch {
    display: inline;
    font-size: 28px;
    position: absolute;
    top: 54px;
    left: 421px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--c-menu-dark);
}
.newstylebutton {
    padding: 5px 16px;
    border-radius: 10px;
    font-size: 15px;
    color: #fff!important;
    background-color: var(--c-accent);
    border-bottom: 4px solid var(--c-accent-dark);
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
}
.newstylebutton:disabled {
    color: #bbb6b6!important;
    background-color: #777777!important;
    border-bottom: 4px solid #4c4c4c;
}
#content{color: #000;background-color:var(--c-bg-page);width: 100%;border-radius: 0px 0px 8px 8px;padding: 10px;min-height: 393px;float: right;}
#content2{color: #777;background-color:var(--c-bg-page);;width: 80%;border-radius: 8px;padding: 10px;min-height: 400px;}

#column-left + #column-right + #content, #column-left + #content {
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
}
#column-left + #column-right + #content2, #column-left + #content2 {
    margin-left: 240px;}
#column-left {
    width: 23%;
    border-radius: 8px;
    -webkit-box-shadow: -1px 0 5px rgba(0,0,0,0.3);
    box-shadow: -1px 0 5px rgba(0,0,0,0.3);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    min-height: 350px;
} 
.topheadlinetext{
    text-align: right;
    padding-top:40px;
    padding-right: 15px;
    letter-spacing: -1px;
    line-height: 1em;
    text-rendering: optimizeLegibility;
    font-size: 160%;}
.tabright {
    text-align: right;
    padding-right: 10px;
}
.menup{    
    padding: 0px 7px 6px 8px;
    font-size: 13px;
    cursor: pointer;
    line-height: 34px;
    color: #777;
    margin-bottom: 0px;
}
.box .box-content {
    background: transparent;
    border: none;
}
.box .box-heading {
    background: transparent;
    border: none;

}
.leftsideul{    list-style-type: circle;
                background-image: none;
                padding: 2px;    margin-left: 25px;color:#fff;}
.leftsideul a{color:#fff!important;}
/*Style for switch button*/
.switch{float:right;margin-top:29px;}

input.switch:empty
{
    display: none;
}
input.switch:empty ~ label

{
    position: relative;
    float: right;
    line-height: 1.6em;
    text-indent: 4em;
    margin: 9px 0px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}input.switch:empty ~ label:before, 
input.switch:empty ~ label:after
{
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    width: 3.6em;
    background-color: var(--c-green);
    border-radius: 0.3em;
    box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
    -webkit-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

input.switch:empty ~ label:after
{
    width: 1.4em;
    top: 0.1em;
    bottom: 0.1em;
    margin-left: 0.1em;
    background-color: #fff;
    border-radius: 0.15em;
    box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}
input.switch:checked ~ label:before
{
    background-color: var(--c-red);
}

input.switch:checked ~ label:after
{
    margin-left: 2em;
}
/*---------END OF SWITCH--------------*/
.leftsideul a:hover{ text-decoration: underline;}
#menunav{
    float:right;
    color: #000;
    background-color: var(--c-bg-page);
    width: 100%;
    border-radius: 9px 8px 0px 0px;
    padding: 10px;
    min-height: 80vh;
    min-height: 80dvh; /* iOS Safari: accounts for collapsing toolbar */
}
#menusplit{width:100%	;}
#menu{
    padding: 0px;
    width:100%;
    display: block;
    height: auto;
    background: none;
    border: none;
}
fieldset {
    border: none;
}
dl {
    margin-bottom: 18px;
}
.dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebarbutton{
    display: block;
    width: 100%;
    height: 35px;
    padding: 8px;
    font-size: 15px;
    text-align: center;
    margin-top: 7px;
    font-weight: bold;
    color: #fff!important;
    border: 1px solid #fff;
}
.sidebarbutton:hover{
    background:#fff;
    color: var(--c-primary-dark)!important;
    text-align: center;
}

.dl-horizontal dd {
    margin-left: 180px;
}dt {
    font-weight: bold;
}


#menu > ul > li {
    float: left;
    margin-right: 7px;
    padding: 0;
    height: auto;
    position: relative;
    list-style: none;
    border: 0;
    outline: 0;
    border-radius:15% 15%;
    -moz-border-radius:15% 15%;
    display: list-item;
    text-align: -webkit-match-parent;
    line-height: 1em;
    color: #777;
}
#menu .dropdown-menu .active {
    padding: 4px;
    border-bottom: none;
    border-radius: 0;
}
#menu .active {
    color: #fff;
    padding: 0px 7px 0px 7px;
    border-radius: 5px;
    background-color: var(--c-menu);
    border-bottom: 4px solid var(--c-menu-dark);
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    margin-bottom: 5px;
}
#menu > ul > li:hover > a {
    color: #fff;
    padding: 0px 7px 0px 7px;
    background-color: var(--c-menu);
    border-bottom: 4px solid var(--c-menu-dark);
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
}
#menu > ul > li >a{
    padding: 0px 10px 6px 10px;
    white-space: nowrap;
    font-size: 15px;
    cursor: pointer;
    font-weight: normal;
    line-height: 34px;
    color: #777;
}
#header h2 span{color:var(--c-primary-dark)!important;}
#footer{
    background: none;
    color: #666;
    width: 100%;
    text-align: center;
    padding: 20px;
    clear: both;
}
#footerinner{
    margin: 10px;
}
a, a:visited, a b {
    color: var(--c-primary-dark);
}

input[type='text'], input[type='password'], textarea {
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px 10px;
    outline: none;
    width: 178px;
}

input[type='email'], input[type='password'], textarea {
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px 10px;
    outline: none;
    width: 178px;
}

.dec.button{
    width: 12px;
    height: 12px;
    padding: 2px;
    float: right;
    border-radius: 2px;
    margin-right: -20px;
    position: absolute;
    text-align: center;
    color: #555;
    background:linear-gradient(to bottom, #f8f7fd, #e9e9ea);
    border: 0px solid #bbb;
}
.inc.button{
    position: absolute;
    width: 12px;
    height: 12px;
    padding: 2px;
    float: right;
    clear:right;
    text-align: center;
    margin-right: -20px;
    margin-top: -16px;
    color: #555;
    background: linear-gradient(to bottom, #f8f7fd, #e9e9ea);
    border: 0px solid #bbb;
}
.addbutton, .addbutton_add, .addbutton_remove {
    padding: 5px 8px;
    cursor: pointer;
    overflow: visible;
    font-weight: bold;
    white-space: nowrap;
    color: #fff;
    background: var(--c-primary-dark);
    border: 1px solid #1d1250;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.13s, border-color 0.13s;
}
.addbutton:hover, .addbutton_add:hover {
    background: var(--c-primary);
    border-color: var(--c-primary-dark);
    color: #fff;
    text-decoration: none;
}
.viewbutton{
    padding: 5px 8px;
    cursor: pointer;
    overflow: visible;
    font-weight: bold;
    white-space: nowrap;
    color: var(--c-primary-dark);
    background: linear-gradient(to bottom, #f8f7fd, #e9e9ea);
    border: 1px solid #bbb;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.13s;
}
.viewbutton:hover { background: #e9e9f5; color: var(--c-primary-dark); }
.viewbutton > a { color: inherit; }
.addbutton_remove{
    background: #a5a5a5;
    color: #fff;
    border-color: #8e8e8e;
    cursor: not-allowed;
}

.sbutton{
    display: inline-block;
    margin: 0;
    padding: 6px 10px;

    font-size: 12px;
    line-height: 100%;
    cursor: pointer;
    overflow: visible;
    font-weight: bold;
    position: relative;
    white-space: nowrap;

    color: var(--c-primary-dark);
    background: linear-gradient(to bottom, #f8f7fd, #e9e9ea);
    border: 1px solid #bbb;
}
.sbutton:hover{color: var(--c-primary-dark);}
.login-content .left {
    float: left;
    width: 100%;}
.login >ul >li> a{
    text-decoration: none;
    padding: 6px 0 4px 9px;
    border: 1px solid #D7D7D7;
    display: block;
    line-height: 160%;
    font-size: 120%;
    font-weight: normal;
    color: var(--c-primary-dark);
}
.login >ul >li> a:hover{
    color: #333;
    background: var(--c-bg-page);}
.login >ul >li{list-style: none;padding-top:5px;margin-left:-40px;}
#header #logo {
    top: 0px;}


h1, h2, h3, h4, h5 {
    font-weight: normal;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 10px;
    margin: 0;
    letter-spacing: normal;
    color: #666;
    width: auto;
    line-height: 1.1em;
}
h1{font-size: 160%;    color: var(--c-accent);}

#header #search {
    padding-bottom: 5px;
    border-bottom: 1px solid #d3d3d3;
}

#header .option-text{
    width: auto;
    height: auto;
    font-weight: bold;
    padding: 6px 15px;
}

#header #search input {
    position: relative;
    width: 60% !important;
    padding: 8px 15px;
    background: rgb(245, 245, 245);
    border: 0px solid #E3E3E3;
    letter-spacing:2px;
    font-size: 14px;
    font-weight: 600;
}
#header .button-search{
    width: auto;
    display: inline-block;
    height: auto;
    font-weight: bold;
    position: relative;
    padding: 6px 15px;
    border: 2px solid var(--c-menu);
    background: var(--c-menu);
    color: var(--c-bg-page);
}
@media screen and (max-width: 1120px) and (min-width: 929px){
    .menup {    
        padding: 0px 3px 6px 2px!important;
        font-size: 13px!important;}
    #menu > ul > li >a {
        padding: 0px 3px 0px 2px!important;
        font-size: 13px!important;
        border: none!important;
    }
    #menu .active {border:none;padding: 0px 3px 6px 2px;}
    #menu > ul > li:hover > a {
        border: none;
        padding: 0px 3px 6px 2px;
    }
}@media screen and (max-width: 929px) and (min-width: 1116px){
    .menup {    
        padding: 0!important;
        font-size: 11px!important;}
    #menu > ul > li >a {
        padding: 0!important;
        font-size: 11px!important;
    }
    #menu > ul > li:hover > a {
        border:none;
        color: #fff;
        padding: 0px 3px 0px 2px!important;
    }
    #menu .active {border:none;padding:0px 3px 0px 2px!important}
}
#menu > ul > li >a {
    padding: 0px 7px 6px 8px;
    font-size: 13px;}
#header .button-search:hover{color: #FFFFFF;}
#c_title{text-transform: capitalize;}
a, a:visited, a b {text-decoration: none;}
.ortable{width: 100%;text-align: left;} /* see unified table styles below */
.button{
    display: inline-block;
    margin: 0;
    padding: 6px 10px;

    font-size: 12px;
    line-height: 100%;
    cursor: pointer;
    overflow: visible;
    font-weight: bold;
    position: relative;
    white-space: nowrap;
    border-radius: 0;
    color: #555;
    background: linear-gradient(to bottom, #f8f7fd, #e9e9ea);
    border: 1px solid #bbb;
}
.button:hover{color: var(--c-primary-dark);}
.success, .warning, .attention, .information {
    min-width: 360px;
    position: absolute;
    left: 40%;
    top: 220px;
    z-index: 200;
}
.success {
    position: absolute;
    left: 31%;
    top: 180px;
    z-index: 200;
}
hr { display: block; height: 0px;
     border: 1; border-top: 1px solid #999;
     margin: 1em 0; padding: 0;
     background-color: #999;
}
/*Request Statement CSS*/
.invoice.col-6 {width: 50%;}
.invoice.col-12 {width: 100%;}
.invoice {
    background: white;
    color: #222;

    width: 100%;
    position: relative;
}

.invoice-id {
    color: #999;
    text-align: right;
    margin: 0 20px 2rem 0;
}

.invoice-logo {
    position: absolute;
    top:35px;
    left: 2%;
    width: 200px;
}

.invoice-module {
    border: 1px solid #ccc;
    padding: 1rem;
    min-height: 160px;
}

.amount-due-amount, .due-date-date {
    font-size: 20px;
    font-weight: 800;
}

.paid-line {
    padding: 2rem 0 1rem 0;
    text-align: center;
}

.grid[class^="grid-"] {
    float: left; 
}
.grid.grid-1-2 {
    width: 50%;
}


.group:after {
    content: "";
    display: block;
    clear: both;
}
/*--------End Request Statement-------------*/
.box .box-heading{
    text-shadow: 0 0 0 transparent, -1px -1px 1px rgba(0,0,0,0.4);
    padding: 15px 20px 15px 20px;
    border-radius: 0;
    background: #046867 50% 0 repeat-x;
    border-top: 1px solid var(--c-primary-dark);
    border-bottom: 1px solid #318CA6;
    color: #fff;
    font-size: 170%;
    font-weight: normal;
    letter-spacing: normal;
    margin-top: 10px;
}
ul.box-category > li > a{
    text-shadow: 0 0 0 transparent, -1px -1px 1px rgba(0,0,0,0.4);
    color: #C2D7EA;
    font-size: 1.2em;
    line-height: 1.8em;
    -webkit-transition: color 0.2s ease-out;
    transition: color 0.2s ease-out;
    font-weight: bold;
    text-decoration: none;
    outline: none;
    padding-left: 5px;
}
ul.box-category > li > a:hover{
    color: #fff;
}
ul.box-category > li + li {border: none !important;}
ul.box-category > li {padding: 2px; padding-left: 5px;}
ul.box-category > li:first-child {padding: 0;padding-left: 5px;}
#powered,.centerText {
    text-align: center;}
#header {
    height: 0px;}
.quickcheckout-cart  thead td {
    background-color: #EFEFEF !important;}
.quickcheckout-cart  td {
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}
#content .content {
    padding: 0;

    margin-bottom: 0;
    border: none;}
#content2 .content {
    padding: 0;

    margin-bottom: 0;
    border: none;}
.cart-total {
    border-top: none;
    width: 100%;
    padding-top: 0;}
table.form > * > * > td{
    color: #777;
}
.button{
    color: var(--c-primary-dark) !important;}
#content2 input[type='text'], textarea {
    width: 179px;
}
.hidden {
    visibility: hidden;
    display: none;
}
/* The Modal (background) */
.modal {
    display: block;
    position: fixed;
    z-index: 1000;
    padding-top: 200px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7)
}
.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white!important;
}
.modal-body {padding: 16px 16px;}
.modal-content {
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: 40%;
}

/* The Close Button */
.close {
    color: #fff;
    float: right;
    font-size: 28px;
    line-height: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.quantity input[type='text']{width: 60px !important;}
/*homepage form*/
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    display:block;
}
form {
    margin: 0 0 0px!important;
}
form {
    margin: 0 0 18px;
}
fieldset {
    border: none;
}
fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}
.pagination .links b {
    border: 1px solid var(--c-accent-dark);
    color: var(--c-accent);
}
.login-content .control-label{text-align:left!important;}
#password-lbl, #username-lbl{        color: #777;
                                     font-size: 13px;
                                     font-weight: normal;}

.form-horizontal .control-group {
    margin-bottom: 18px;
}
input:disabled, textarea:disabled {
    background-color: #f5f5f5!important;
    cursor: not-allowed;
}
textarea{
    max-width: 100%;
}
.control-group {
    margin-bottom: 9px;
}
.login .form-horizontal .control-label {
    text-align: left;
}
.form-horizontal .control-label {
    float: left;
    width: 160px;
    padding-top: 5px;
    text-align: right;
}

.form-horizontal .controls {
    margin-left: 180px;
    margin-bottom: 23px;
}
.form-search input, .form-search textarea, .form-search select, .form-search .help-inline, .form-search .uneditable-input, .form-search .input-prepend, .form-search .input-append, .form-inline input, .form-inline textarea, .form-inline select, .form-inline .help-inline, .form-inline .uneditable-input, .form-inline .input-prepend, .form-inline .input-append, .form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}



/*added in for responsive design*/
.pull-right {
    float: right;
}
.pull-left {
    float: left;
}
#menu-button{
   display:none; 
}
@media only screen and (max-device-width: 480px) {


    #content {
        width: 100%!important;float:right!important;    margin: 0px;padding:0;    padding-top: 10px;}
    #column-left {
        width: 100%!important;margin: 0;    min-height: 125px;}
    #container {
        float: left;  margin: 0px;padding:0;
    }
    .tblcategory, .tblwishlist, .tblspecial{
       line-height: 2em;
    }
    #searchfield{
        margin-top:10px;
        margin-left:20px;
        width: 270px!important;
    }
    #header .option-text{
           padding: 6px 20px;
    }
    #menu-button{
        display:block;
         padding: 0px 10px 6px 10px;
        white-space: nowrap;
        font-size: 15px;
        cursor: pointer;
        font-weight: normal;
        line-height: 34px;
        color: white;
        background:#3C88CB;
        margin-top:10px;
        text-align:center;
        margin-bottom:10px;
    }
    #menul{
        display: none; 
    }
    #menunav, #menusplit, #menu, #footerinner, #powered,#page-bg,#footer{padding:0;margin:0;}	
    #menu > ul > li {width:100%;    text-align: center;}
    #container {
        width: 100%;
    }
    td {
        border-bottom: 1px solid #E4E4E4;    text-align: center;
    }
    .pagination .links a {

        padding: 4px 5px;
    }
    #menunav{background:#fff;}
}

/*PRINT CSS*/
@media print {
    #logo img {
        visibility: visible;
    }
    body * {
        visibility: hidden;
    }
    #toPrint, #toPrint * {
        visibility: visible;
    }
    .oritable{float:right;}
    table#list2 {
        float:right;
        overflow-x: hidden;
        display: table;
        margin-bottom:0px;
        width: 100%!important;
    }
    table.list, table.oritable {
        width: 100%!important;
        margin-right: 0px!important;
    }
    table#list2:before {
        content: '';
    }
    #toPrint {
        position: absolute;
        width:100%;
        left: 0;
        top: 0;
    }
    #toPrint .branch {display:inline!important;}
    #toPrint img {
        display:block!important;
        width: 50%;
        position: initial;
        float: left;
        margin-top:30px;
        margin-left:10px;}
    #toPrint .oritable {
        width: 40%!important;
        float: right;
        border: 1px solid #DDDDDD;}
    #toPrint h1{text-align:center;}
    #toPrint .oritable  td {
        border-bottom: 1px solid #DDDDDD;
    }
    #header{display:none!important;}
}


/*TOOLTIPS*/
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    pointer-events: none;
}

[data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 120%;
    margin-bottom: 5px;
    margin-left: -100px;
    padding: 6px;
    width: 147px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.78);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
}

[data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}
/*PASSWORD PAGE CSS*/
.valid {
    color: green;
}

.valid:before {
    position: relative;
    left: -27px;
    content: "\2714";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: red;
}

.invalid:before {
    position: relative;
    left: -27px;
    content: "\2716";
}
/*popup style*/
.image_pop{width:606px;}
.image_pop .swal-icon{
    margin:0;
    padding-top: 3px;
}
.image_pop .swal-footer{
    margin: 0;
    padding: 5px 13px;
}

/*Discount promotions*/
.oldprice{padding-right: 10px;color:red;text-decoration: line-through;}
.specialprice{padding-right: 10px;color:green;}
.discperc{padding-right: 10px;color:blue;}

.consigninput{
    padding: 3px 6px;
    width: 70px;
    text-align: right;
}

#affiliatemenu .dropdown-content ul > li{  float: none; width: 100%;text-align: left }
#affiliatemenu .dropdown-content ul > li a:hover{background-color: #848181;}

.tblqty{
    width: 23%;
    padding-left: 30px;
}
.qtyinput{
    width: 37%;
    text-align: right;
    padding: 5px 0px;
}
input::-webkit-inner-spin-button{margin-left: 8px;} 
.tblpadright{
    padding-right: 10px;
    text-align: right;
    max-width: 50px;
}
.tblhead{
    background: #F5F5F5;
    text-align: left;
}

/* ═══════════════════════════════════════════════════════════════
   Unified Data-Table Style  –  matches transactions.css design
   ═══════════════════════════════════════════════════════════════ */

/* ── Table wrapper card ─────────────────────────────────────── */
.cart-info,
.table-wrap-saas {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* ── Table base ─────────────────────────────────────────────── */
table.ortable,
table.orders,
table.list,
table.reps,
table.debtors,
table.callstats,
table.custstats,
table.mynotes,
table.debtornote,
table.user-list,
.cart-info table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    border: none;
}

.ortable{
    border-radius: 15px!important;
    margin-top: 10px!important;
}

/* ── Header row background ──────────────────────────────────── */
table.ortable thead tr,
table.orders thead tr,
table.orders tr:first-child,
table.list thead tr,
table.reps tr:first-child,
table.debtors tr:first-child,
table.callstats thead tr,
table.callstats tr:first-child,
table.custstats tr:first-child,
table.mynotes thead tr,
table.debtornote thead tr,
table.user-list thead tr,
.cart-info thead tr {
    background: var(--c-bg-light);
    border-bottom: 1px solid #f1f5f9;
}

/* ── Header cells ───────────────────────────────────────────── */
table.ortable th,
table.orders th,
table.list th,
table.reps th,
table.debtors th,
table.callstats th,
table.custstats th,
table.mynotes th,
table.debtornote th,
table.user-list th,
.cart-info thead td,
table.orders tr:first-child td,
table.debtors tr:first-child td {
    padding: 1.25rem 1.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #f1f1f1 !important;
    white-space: nowrap;
    background: var(--c-table-head-bg) !important;
    border-bottom: none;
    border-right: none;
    border-left: none;
    border-top: none;
}

/* ── Body cells ─────────────────────────────────────────────── */
table.ortable td,
table.orders td,
table.list td,
table.reps td,
table.debtors td,
table.callstats td,
table.custstats td,
table.mynotes td,
table.debtornote td,
table.user-list td,
.cart-info td {
    padding: 1.25rem 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    border-right: none;
    border-left: none;
    border-top: none;
    color: #475569;
    font-size: 0.875rem;
}


/* ── Last body row – drop bottom border ─────────────────────── */
table.ortable tr:last-child td,
table.orders tr:last-child td,
table.list tr:last-child td,
table.reps tr:last-child td,
table.debtors tr:last-child td,
.cart-info tbody tr:last-child td {
    border-bottom: none;
}


tr:nth-child(even) {
    background-color: #dedede5f;
}

/* Or odd rows */
tr:nth-child(odd) {
    background-color: #f2f2f232;
}

/* ══════════════════════════════════════════════════════════════
   MODERN OVERRIDES  —  custom.css (original content follows)
══════════════════════════════════════════════════════════════ */
/* MJ CSS Changes 06-10-2020 */

/* ════════════════════════════════════════════════════════════
   Iframe footer — multi-column layout
   ════════════════════════════════════════════════════════════ */
#ih-footer {
  background: #f4f5f8;
  width: 100%;
  border-top: 1px solid var(--c-border);
  box-sizing: border-box;
}

/* ── Footer body (columns) ─────────────────────────────── */
.ih-footer-body {
  padding: 2.5rem 2rem 2rem;
}

.ih-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
}

/* ── Brand column ──────────────────────────────────────── */
.ih-footer-brand-col {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ih-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.ih-footer-company {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-text-dark);
  letter-spacing: -0.01em;
}

.ih-footer-branch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-text-mid);
  background: #ffffff;
  border: 1px solid #d1d5db;
  padding: 3px 10px;
  border-radius: 99px;
  width: max-content;
}

.ih-footer-tagline {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  line-height: 1.55;
  margin: 0.25rem 0 0;
  max-width: 210px;
}

/* ── Nav columns ───────────────────────────────────────── */
.ih-footer-col {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  align-self: flex-start;
}

.ih-footer-col--wide {
  flex: 0 0 280px;
}

.ih-footer-col-hd {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 0.85rem;
  padding-left: 0;
}

.ih-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Uniform row height: every li / a / b / i sits on the same line box */
.ih-footer-links li {
  font-size: 1rem;
  line-height: 1.5rem;
  min-height: 1.5rem;
  color: var(--c-text);
  display: flex;
  align-items: center;
}

.ih-footer-links li a,
.ih-footer-links li b,
.ih-footer-links li i {
  font-size: inherit!important;
  line-height: inherit;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  color: var(--c-text);
  text-decoration: none;
  transition: color 0.12s;
}

.ih-footer-links li a:hover {
  color: var(--c-primary);
  text-decoration: none;
}


/* ── Bottom bar ────────────────────────────────────────── */
.ih-footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2rem;
  border-top: 1px solid var(--c-border);
  background: #ffffff;
  flex-wrap: wrap;
}

.ih-footer-copy {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.ih-footer-copy--muted {
  color: var(--c-text-subtle);
}

.ih-footer-copy a,
.ih-footer-copy--muted a {
  color: inherit;
  text-decoration: none;
}

.ih-footer-copy a:hover,
.ih-footer-copy--muted a:hover {
  color: var(--c-indigo);
}

/* ── Contact email block ───────────────────────────────── */
.ih-footer-contact-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.6rem;
}

.ih-footer-contact-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-text-muted);
}

.ih-footer-contact-hint {
  font-size: 0.75rem;
  color: var(--c-text-subtle);
  font-style: italic;
}

.ih-footer-email {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
  background: var(--c-indigo-lt);
  border: 1px solid var(--c-primary-border);
  padding: 5px 13px;
  border-radius: 6px;
  margin-top: 0.6rem;
  width: max-content;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  word-break: break-all;
}
.ih-footer-email:hover {
  color: var(--c-primary);
  text-decoration: none;
  background: var(--c-indigo-lt);
  border-color: var(--c-primary-border);
}
.ih-footer-email .fa {
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────────── */

/* Tablet */
@media (min-width: 1116px) and (max-width: 1024px) {
  .ih-footer-body { padding: 2rem 1.5rem 1.5rem; }
  .ih-footer-cols { gap: 1.5rem; }
  .ih-footer-brand-col { flex: 0 0 180px; }
  .ih-footer-col { flex: 0 0 120px; }
  .ih-footer-bar { padding: 0.85rem 1.5rem; }
}

/* Mobile */
@media (max-width: 1115px) {
  #ih-footer:not(.public), #ih-footer:not(.public) .ih-footer-bar { display: none !important; height: 0 !important; }
  #ih-footer.public {
    clear: both;
    margin-bottom: 70px; /* clear the fixed mobile nav bar */
  }
  .ih-footer-col, .ih-footer-brand-col {
    flex: 0 0 280px!important;
  }

  #ih-footer.public{
    margin-bottom: 0!important;
  }
}

/* ── Desktop baseline (1025px – 1279px) ───────────────── */
@media (min-width: 1025px) {
  .ih-footer-body        { padding: 3rem 3rem 2.5rem; }
  .ih-footer-cols        { gap: 2.5rem; }
  .ih-footer-brand-col   { flex: 0 0 260px; }
  .ih-footer-col         { flex: 0 0 160px; }
  .ih-footer-tagline     { font-size: 0.875rem; max-width: 240px; }
  .ih-footer-links li a  { font-size: 0.9375rem; }
  .ih-footer-bar         { padding: 0.9rem 3rem; }
  .ih-footer-email       { font-size: 0.875rem; }
}

/* ── Standard desktop (1280px – 1439px) ──────────────── */
@media (min-width: 1280px) {
  .ih-footer-body        { padding: 3.5rem 4.5rem 3rem; }
  .ih-footer-cols        { gap: 3.5rem; }
  .ih-footer-brand-col   { flex: 0 0 300px; }
  .ih-footer-col         { flex: 0 0 180px; }
  .ih-footer-logo        { height: 44px; }
  .ih-footer-col-hd      { font-size: 0.75rem; margin-bottom: 1.1rem; }
  .ih-footer-links li a  { font-size: 1rem; }
  .ih-footer-links       { gap: 0.75rem; }
  .ih-footer-tagline     { font-size: 0.9375rem; max-width: 270px; }
  .ih-footer-bar         { padding: 1rem 4.5rem; }
  .ih-footer-copy        { font-size: 0.875rem; }
  .ih-footer-email       { font-size: 0.9rem; padding: 6px 14px; }
}

/* ── Large desktop (1440px – 1919px) ─────────────────── */
@media (min-width: 1440px) {
  .ih-footer-body        { padding: 4.5rem 7rem 3.5rem; }
  .ih-footer-cols        { gap: 5rem; }
  .ih-footer-brand-col   { flex: 0 0 340px; }
  .ih-footer-col         { flex: 0 0 200px; }
  .ih-footer-logo        { height: 50px; }
  .ih-footer-col-hd      { font-size: 0.8125rem; letter-spacing: 0.12em; margin-bottom: 1.3rem; }
  .ih-footer-links li a  { font-size: 1.0625rem; }
  .ih-footer-links       { gap: 0.9rem; }
  .ih-footer-tagline     { font-size: 1rem; max-width: 310px; line-height: 1.65; }
  .ih-footer-branch      { font-size: 0.75rem; padding: 4px 14px; }
  .ih-footer-bar         { padding: 1.1rem 7rem; }
  .ih-footer-copy        { font-size: 0.9375rem; }
  .ih-footer-email       { font-size: 0.9375rem; padding: 7px 16px; margin-top: 0.75rem; }
}

/* ── Wide / 4 K (1920px+) ────────────────────────────── */
@media (min-width: 1920px) {
  .ih-footer-body        { padding: 6rem 12rem 5rem; }
  .ih-footer-cols        { gap: 8rem; }
  .ih-footer-brand-col   { flex: 0 0 420px; }
  .ih-footer-col         { flex: 0 0 230px; }
  .ih-footer-logo        { height: 60px; }
  .ih-footer-col-hd      { font-size: 0.9375rem; margin-bottom: 1.6rem; }
  .ih-footer-links li a  { font-size: 1.125rem; }
  .ih-footer-links       { gap: 1.1rem; }
  .ih-footer-tagline     { font-size: 1.0625rem; max-width: 380px; }
  .ih-footer-branch      { font-size: 0.8125rem; padding: 5px 16px; }
  .ih-footer-bar         { padding: 1.4rem 12rem; }
  .ih-footer-copy        { font-size: 1.0625rem; }
  .ih-footer-email       { font-size: 1rem; padding: 8px 18px; margin-top: 1rem; }
}

/* ── Ultra-wide / QHD+ (2560px+) ─────────────────────── */
@media (min-width: 2560px) {
  .ih-footer-body        { padding: 8rem 18rem 6rem; }
  .ih-footer-cols        { gap: 11rem; }
  .ih-footer-brand-col   { flex: 0 0 520px; }
  .ih-footer-col         { flex: 0 0 280px; }
  .ih-footer-logo        { height: 72px; }
  .ih-footer-company     { font-size: 1.875rem; }
  .ih-footer-col-hd      { font-size: 1.125rem; letter-spacing: 0.13em; margin-bottom: 1.9rem; }
  .ih-footer-links li a  { font-size: 1.375rem; }
  .ih-footer-links       { gap: 1.4rem; }
  .ih-footer-tagline     { font-size: 1.25rem; max-width: 460px; line-height: 1.7; }
  .ih-footer-branch      { font-size: 0.9375rem; padding: 6px 20px; }
  .ih-footer-bar         { padding: 1.75rem 18rem; gap: 2.5rem; }
  .ih-footer-copy        { font-size: 1.25rem; }
  .ih-footer-email       { font-size: 1.1875rem; padding: 10px 22px; margin-top: 1.25rem; }
}

#container {
  width: 98%;
  /* calc height of <header> + 10px */
  margin-top: calc(40px);
}

h1 {
  padding-top: 10px;
  color: var(--c-primary);
}
.hrborder {
  height: 1px;
  background-color: #ddd;
  border: none;
}
a.sbutton,
input.sbutton,
button.sbutton {
  color: var(--c-primary);
}
a.sbutton:hover,
input.sbutton:hover,
button.sbutton:hover {
  background: var(--c-primary);
  color: rgb(247, 247, 247);
  border: 1px solid var(--c-primary);
}
.product-info3 .status-Y {
  color: #008000;
}
.dropdown-content {
  background-color: var(--c-primary);
}

.sidebarbutton:hover {
  filter: brightness(80%);
  background: var(--c-primary);
  color: #fff !important;
}
#column-left {
  padding: 12px 0 20px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border-right: 1px solid var(--c-border);
  box-shadow: 2px 0 8px rgba(0,0,0,.06);
}

.desktop-menuheader {
  all: unset;
}

/* ---  Sidebar sections  --- */
.sb-section {
  padding: 0 10px;
}

/* Category toggle header */
.sb-cat-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: var(--c-primary-lt);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
  transition: background .15s;
}
.sb-cat-toggle:hover {
  background: var(--c-primary-lt2);
}
.sb-cat-toggle span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-cat-toggle i { color: var(--c-primary); }

/* Sidebar quick-link buttons */
.sb-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid var(--c-border);
  margin-top: 4px;
}
.mbsidenav a.sidebarbutton,
.sidebarbutton {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: var(--c-primary);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 7px;
  border: none;
  transition: background .15s, transform .1s;
  box-sizing: border-box;
}
.mbsidenav a.sidebarbutton:hover,
.sidebarbutton:hover {
  background: var(--c-primary-hover);
  color: #fff !important;
  transform: translateX(2px);
  text-decoration: none;
}
.sidebarbutton-outline {
  background: transparent !important;
  border: 1.5px solid var(--c-primary) !important;
  color: var(--c-primary) !important;
}
.sidebarbutton-outline:hover {
  background: var(--c-primary) !important;
  color: #fff !important;
}
#mbmenu,
#mbrepusermenu {
  border-bottom: 1px solid var(--c-primary);
  padding: 20px 30px;
}

/* Categories drill-down */
.browse {
  max-height: 420px;
  overflow-y: auto;
  border-radius: 6px;
  border: 1px solid var(--c-border);
  background: #fff;
}
.browse a {
  display: flex;
  align-items: center;
  padding: 9px 12px 9px 14px;
  text-decoration: none;
  font-size: 13px !important;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border-light);
  transition: background .12s, color .12s;
  line-height: 1.3;
}
.browse a:last-child { border-bottom: none; }
.browse a:hover {
  color: var(--c-primary);
  background: var(--c-primary-lt);
  text-decoration: none;
}
.browse a:active {
  background: #e8e9f7;
}
i.fa-chevron-right {
  padding-top: 0;
  flex-shrink: 0;
  margin-left: auto;
  float: none !important;
}
i.fa-chevron-left {
  padding-top: 0;
  flex-shrink: 0;
  margin-right: 8px;
  float: none !important;
}
.browsesuball i.fa-chevron-down {
  margin-left: auto;
  flex-shrink: 0;
  float: none !important;
}

/* Mobile category panel — mirrors desktop .browse */
#mbcategory {
  margin: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--c-border);
  background: #fff;
  overflow: hidden;
}
.mb-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--c-primary-lt);
  font-size: 13px !important;
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--c-border);
}
.mb-cat-header i { color: var(--c-primary); }
#mbcategory a {
  display: flex !important;
  align-items: center;
  padding: 9px 12px 9px 14px !important;
  font-size: 13px !important;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border-light);
  transition: background .12s, color .12s;
  line-height: 1.3;
  text-decoration: none;
}
#mbcategory a:last-child { border-bottom: none; }
#mbcategory a:hover {
  color: var(--c-primary);
  background: var(--c-primary-lt);
  text-decoration: none;
}
#mbcategory a:active { background: #e8e9f7; }
#mbcategory a.browsecat {
  color: var(--c-text);
  font-weight: 600;
}
#mbcategory a.browsesub,
#mbcategory a.browsesubsub {
  color: var(--c-text-mid);
  padding-left: 26px !important;
}
#mbcategory a.browsesub:hover,
#mbcategory a.browsesubsub:hover {
  color: var(--c-primary);
  background: var(--c-primary-lt);
}
#mbcategory a.getcat {
  background: var(--c-primary-lt2);
  color: var(--c-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--c-primary-border);
}
#mbcategory a.browsesuball {
  font-style: italic;
  color: var(--c-primary);
  background: var(--c-bg-purple-faint);
}
/* Mobile sidebar quick-links section */
.mb-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  margin-top: 4px;
}
.browsecat {
  color: var(--c-text);
  font-weight: 600;
}
.browse a.browsesub,
.browse a.browsesubsub {
  color: var(--c-text-mid);
  padding-left: 26px;
}
.browse a.browsesub:hover,
.browse a.browsesubsub:hover {
  color: var(--c-primary);
  background: var(--c-primary-lt);
}
/* Back / breadcrumb link */
.browse a.getcat,
.browsesub a.getcat,
.browsesubsub a.getcat {
  font-size: 13px !important;
  background: var(--c-primary-lt2);
  color: var(--c-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--c-primary-border);
}
/* "All Category" link */
.browse a.browsesuball,
.browsesub a.browsesuball,
.browsesubsub a.browsesuball {
  font-size: 13px !important;
  font-style: italic;
  color: var(--c-primary);
  background: var(--c-bg-purple-faint);
}
.browse a.browsesubsub:active,
.browse a.browsesubsub:focus,
.browse a.browsesubsub:visited {
  color: var(--c-primary);
  background: var(--c-primary-lt);
}
/* Global scrollbar — webkit + Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-primary-scroll) var(--c-primary-scroll-track);
}
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--c-primary-scroll-track);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--c-primary-scroll);
  border-radius: 8px;
  border: 2px solid var(--c-primary-scroll-track);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-primary);
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}

.catbreadcrumbs > .browsecat {
  display: inline-block;
  font-size: 15px !important;
  color: white;
}

.catbreadcrumbs > .browsesub {
  display: inline-block;
  font-size: 15px !important;
  color: gray;
}

.catbreadcrumbs > .browsesubsub {
  display: inline-block;
  font-size: 15px !important;
  color: darkgray;
}
ul.breadcrumb {
  padding: 10px 14px;
  list-style: none;
  background-color: #fff
}
ul.breadcrumb li {
  display: inline;
  font-size: 16px;
}
ul.breadcrumb li + li:before {
  padding: 8px;
  color: #333;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: var(--c-primary);
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #7ac5e6;
  text-decoration: underline;
}

#menudt a {
  text-decoration: none;
  font-size: 14px;
}
#menudt nav {
  display: flex;
  align-items: center;
}
#menudt ul {
  color: #000;
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  flex: 0 0 auto;
}
#menudt li {
  color: #000;
  display: block;
  float: left;
  text-decoration: none;
  transition-duration: 0.5s;
  position: relative;
}

.dropdown{
  position: absolute;
  z-index: 1000;
}
#menudt li a {
  color: #000;
  display: block;
  padding: 9px;
}
#menudt li:hover,
#menudt li:focus-within,
#menudt li:active,
#menudt a:focus-within {
  background: var(--c-primary);
  cursor: pointer;
}
#menudt li:hover > a,
#menudt li.focus > a {
  color: #fff !important;
}
#menudt li:focus-within a {
  outline: none;
}
#menudt ul li ul {
  background: var(--c-primary);
  visibility: hidden;
  opacity: 0;
  min-width: 10rem;
  transition: all 0.5s ease;
  left: 0;
  display: none;
}
#menudt ul li:hover > ul,
#menudt ul li:focus-within > ul,
#menudt ul li ul:hover,
#menudt ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block;
  border-top: 0.5px solid rgb(209, 209, 209);
}
#menudt ul li ul li {
  clear: both;
  width: 100%;
}
#menudt ul li ul li:hover {
  background-color: #848181;
}
#menudt ul li ul li a {
  color: #fff;
  font-size: 13px;
}

.searchflex {
  margin-left: auto;
  display: flex;
  align-items: center;
  margin-right: 15px;
}

/* Product Page */
.tblpadright {
  min-width: 75px;
}
.carticon {
  cursor: not-allowed;
  overflow: visible;
  white-space: nowrap;
  color: #fff;
  background: #ddd;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: 25px;
}

#favourite {
  cursor: pointer;
  overflow: visible;
  white-space: nowrap;
  color: #f4697a;
  background: #f4f4f4;
  padding: 5px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.newstylebutton#addcart {
  display: inline-block;
  background-color: #ddd;
  border-bottom: 1px solid #fff;
  border-radius: 4px;
  min-width: 130px;
  cursor: not-allowed;
  overflow: visible;
  white-space: nowrap;
  color: #fff;
  padding: 8px 5px;
}

.newstylebutton#viewcart {
  display: inline-block;
  background-color: var(--c-menu);
  border-bottom: 1px solid #fff;
  border-radius: 5px;
  min-width: 130px;
  cursor: pointer;
  overflow: visible;
  white-space: nowrap;
  color: #fff;
  padding: 8px 5px;
}
.newstylebutton {
  display: inline-block;
  background-color: var(--c-primary);
  border-bottom: 1px solid #fff;
  border-radius: 5px;
  min-width: 130px;
  cursor: pointer;
  overflow: visible;
  white-space: nowrap;
  color: #fff;
  padding: 8px 5px;
}
.addbutton_add.carticon:hover,
.newstylebutton#viewcart:hover,
.newstylebutton#addcart:hover,
.addbutton_add#favourite:hover,
.addbutton_remove#favourite:hover,
.newstylebutton:hover {
  filter: brightness(80%);
}

i.fa-shopping-cart {
  margin-right: 5px;
}

#headercart i.fa-shopping-cart {
  margin-right: -7px;
}

#lblCartCount {
  font-size: 10px;
  color: #fff;
  background-color: var(--c-primary);
  padding: 3px 5px;
  margin-left: -5px;
  vertical-align: top;
  border-radius: 50%;
}

.pagination .links b {
  border: 1px solid var(--c-primary);
  color: var(--c-primary);
}

/* Search Section — joined input-group */
#header #search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  padding-top: 15px;
}

#header #search .option-text {
  align-self: center;
}

#header .option-text {
  margin: 0 10px 0 0;
  padding: 0;
}

/* The joined pill: [dropdown | input text | Search btn] */
.search-input-group {
  display: flex;
  align-items: stretch;
  flex: 1;
  height: 36px;
  border: 1.5px solid #c9cde0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(61, 61, 151, .07);
  transition: border-color .15s, box-shadow .15s;
}

.search-input-group:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(61, 61, 151, .12);
}

#menudt #search .option-dropdown {
  height: 100%;
  border: none;
  border-right: 1.5px solid #c9cde0;
  background: var(--c-primary-lt);
  color: var(--c-primary);
  font-weight: 600;
  font-size: 12px;
  padding: 0 8px 0 10px;
  min-width: 128px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: auto;
  appearance: auto;
}

#menudt #search .option-dropdown:focus {
  background: #eceeff;
}

#menudt #search input {
  height: 100%;
  flex: 1;
  border: none;
  padding: 0 12px;
  font-size: 13px;
  color: #212b36;
  background: #fff;
  outline: none;
  box-shadow: none;
  min-width: 0;
  position: unset;
}

#menudt .button-search {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 18px;
  border: none;
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: background .15s;
}

#menudt .button-search:hover {
  background: var(--c-primary-hover);
  color: #fff;
}

.box .box-content {
  margin-top: 10px;
  padding: 0;
}

.tblcentertext {
  text-align: center;
  padding: 0;
}

.tblqty {
  padding-left: 50px;
}

#powered,
.centerText {
  margin-top: 30px;
}
#select2-reparea-container,
.select2-selection__rendered {
  max-height: 160px;
  border-radius: 0%;
}
.select2-container .select2-selection--single {
  height: 24px;
  margin-bottom: 3px;
  border-radius: 0%;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 24px;
}
.sbutton {
  padding: 6px 10px 5px 10px;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  margin-top: -4px;
}


#affiliatemenu h1 {
  padding: 10px;
}
#affiliatemenu ul {
  background-color: var(--c-primary);
}

#footer,
#footer a.mifs {
  color: #000;
}

#footer a.mifs:hover {
  color: var(--c-primary);
}
.blankth {
  min-width: 65px;
}

th.thwidth {
  min-width: 70px;
}

/* Mobile Menu */
/* ── Mobile Sidenav Drawer ──────────────────────────────── */
.mbsidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999999999999999999999999;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
  box-shadow: 4px 0 24px rgba(39,25,104,0.15);
}

.mbunder {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 99999999999999999999999;
  top: 0;
  border: none !important;
  left: 0;
  background-color: #000;
  opacity: 0.5;
  padding-bottom: 50px;
}

/* Hide old floating close button — new one is inside nav header */
.mbclosebtn,
.mbsidenav a.mbclosebtn,
#mbmySidenav > ul > li > a.mbclosebtn {
  display: none !important;
}

.mbsidenav a {
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px !important;
  display: block;
}

/* ── Sidenav inner header banner ────────────────────────── */
.mb-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 54px;
  min-height: 54px;
  background: var(--c-primary-dark);
  color: #fff;
  flex-shrink: 0;
  white-space: nowrap;
}

.mb-nav-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
}

.mb-nav-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 24px;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
  padding: 0;
}

.mb-nav-close:hover {
  background: rgba(255,255,255,0.28);
}

#mbmenuicons {
  display: none;
}
#mbmain {
  font-size: 0.875rem;
  background: var(--c-primary-dark);
  color: #fff;
  padding: 7px 13px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
}
#headercart {
  background: transparent;
  padding: 0;
  margin: 0;
  line-height: 1;
}

#mbmenuicons div {
  display: inline;
}
#heheadercart {
  margin-left: 100px;
  padding: 0;
}
#headercart i.fa-shopping-cart {
  color: var(--c-primary-dark);
  font-size: 22px;
}
.mbsidenav a.sidebarbutton,
.sidebarbutton {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: var(--c-primary);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 7px;
  border: none;
  transition: background .15s;
  box-sizing: border-box;
}
.mbicon-container > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 8px 13px;
  text-decoration: none;
  color: var(--c-primary);
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  transition: background .15s;
}
.mbicon-container > a:hover {
  background: var(--c-primary-lt2);
  text-decoration: none;
}
.mbicon-container > a i {
  font-size: 28px !important;
  padding-bottom: 7px !important;
  color: var(--c-primary);
}
.mbicon-container > a > p {
  font-size: 12px !important;
  margin: 0;
  font-weight: 600;
  color: var(--c-text);
  text-align: center;
}

.mbenquiries {
  display: none;
}

.mbpromotions {
  display: none;
}
.mbsubitem {
  font-size: 13px !important;
  padding-left: 28px !important;
  color: var(--c-text-mid) !important;
  background: #fafbfc;
}

#mbrepmenu {
  display: none;
}
#mbusermenu {
  display: none;
}

/* ── Tab Navigation Bar ──────────────────────────────── */
#mbmySidenav > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  background: #fff;
  border-bottom: 2px solid var(--c-border);
  flex-shrink: 0;
  overflow: visible;
}

#mbmySidenav > ul > li {
  flex: 1;
  text-align: center;
  background: #fff;
  float: none;
}

#mbmySidenav > ul > li > a {
  display: block;
  padding: 11px 6px;
  font-size: 12px !important;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.sidenavMenuitems > ul > li > a {
  font-size: 12px !important;
}

#mbmySidenav > ul > li > a.mbclosebtn,
.mbclosebtn,
.mbsidenav a.mbclosebtn {
  text-decoration: none;
  font-size: 45px !important;
  margin-left: 280px;
  margin-top: 20px;
  z-index: 100;
  color: red !important;
}

.mbrepnotes {
  display: none;
}

.mbrepreport {
  display: none;
}

.mbcheckin {
  display: none;
  font-size: 13px !important;
  padding: 10px 14px 12px;
  background: #f5f4fc;
  border: 1px solid var(--c-border);
  margin: 4px 8px;
  border-radius: 6px;
}

.mbcustomerName {
  margin-bottom: 10px;
  font-size: 15px;
  float: right;
  top: 0px;
}

/* Active tab — purple underline style */
#mbmySidenav > ul > li > a.mbactive {
  color: var(--c-primary-dark);
  background: #eeedf8;
  border-bottom-color: var(--c-primary-dark);
}
/* Fallback for any element with .mbactive that isn't a tab */
.mbactive:not(#mbmySidenav > ul > li > a) {
  background-color: var(--c-primary-dark);
}
.mbicon-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-purple-faint);
}
#mbmenu,
#mbrepusermenu {
  border-bottom: 1px solid var(--c-border);
  padding: 0;
}
#mbmenu > a,
#mbrepusermenu > a {
  display: flex !important;
  align-items: center;
  padding: 11px 16px !important;
  font-size: 14px !important;
  font-weight: 500;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border-light);
  text-decoration: none;
  transition: background .12s, color .12s;
}
#mbmenu > a:hover,
#mbrepusermenu > a:hover {
  background: var(--c-primary-lt);
  color: var(--c-primary);
  text-decoration: none;
}
/* Keep down-chevron right-aligned when shown by toggle JS */
#mbmenu > a i.fa-chevron-down,
#mbrepusermenu > a i.fa-chevron-down {
  margin-left: auto;
  flex-shrink: 0;
  float: none !important;
}
.mb-acct-sep {
  border-top: 2px solid var(--c-border);
  margin: 4px 0;
}

.mbsidenav a:focus {
  color: var(--c-primary);
}
.mbsidenav a {
  color: #000;
}

.catdrilldown .visited {
  color: var(--c-primary) !important;
  background-color: rgb(240, 240, 240);
}
.mbsidenav i.fa-shopping-cart,
.mbsidenav i.fa-heart,
.mbsidenav i.fa-user,
.mbsidenav i.fa-history,
.mbsidenav i.fa-users,
.mbsidenav i.fa-calendar,
.mbsidenav i.fa-file {
  color: var(--c-primary);
  padding-bottom: 10px;
}

.mbpromo td {
  font-size: 14px !important;
  border: 0;
}
.mbpromo {
  margin: 10px 0;
  border: 2px dotted red;
  width: 98%;
}

.mbpromo tr:hover td {
  pointer-events: none;
}
.mbpromo tr {
  margin-bottom: 20px !important;
}

.viewbutton,
.viewbutton:hover {
  color: red;
}
.orders tr:hover {
  opacity: 1;
  color: inherit;
}
/* Responsive styles */
@media all and (min-width: 1116px) and (max-width: 1525px) {
  .cartmini {
    display: none;
  }
  .tblqty {
    min-width: 180px;
  }
}
@media all and (min-width: 1526px) {
  .tblqty {
    min-width: 250px;
  }
}
@media screen and (max-width: 1150px) {
  #header #search,
  body,
  td,
  th,
  input,
  textarea,
  select,
  a,
  #header #search input {
    font-size: 11px !important;
  }
  #header .option-text {
    padding-top: 4px;
  }
  h2 {
    font-size: 14px;
  }

  .sidebarbutton {
    font-size: 12px;
  }
}
@media all and (max-width: 1300px) {
  #header #search input {
    flex-grow: 3;
  }
}
@media all and (min-width: 1116px) and (max-width: 1150px) {
  .incqtyarrow,
  .decqtyarrow {
    font-size: 12px !important;
  }
}
@media all and (min-width: 1320px) {
  #favourite,
  .carticon {
    padding: 7px 5px 6px 5px;
  }
}


@media all and (max-width: 1090px) {
  td,
  th {
    font-size: 8px !important;
  }
}

@media all and (max-width: 1056px) {
  #affiliatemenu li a {
    padding: 13px 10px;
  }
  .ind {
    padding: 5px;
    border-radius: 50%;
    font-size: 6px;
  }
  .blankth {
    min-width: 55px;
  }
}
@media all and (max-width: 941px) {
  #affiliatemenu li a {
    padding: 13px 5px;
  }
  #affiliatemenu h1 {
    font-size: 14px !important;
    padding: 13px 6px;
    line-height: normal;
  }
}

@media all and (max-width: 1115px) {

  .menu1{
    display: block!important;
    text-align: center;
  }

  .nomobile {
    display: none;
  }
  body,
  html {
    background: #fff;
    font-family:"Open Sans", sans-serif;
  }
  #menunav {
    padding: 0;
    background-color: #fff;
    margin: 0;
  }
  #header #search {
    padding-bottom: 15px !important;
    padding-top: 0px !important;
  }
  #header {
    background: #fff;
    height: 0px;
    padding: 0 20px;
    position: initial;
    margin: 20px 0;
  }
  .top-bar {
    display: flex;
    justify-content: flex-end;
    height: 20px;
    align-items: center;
    margin-bottom: 20px;
  }
  .menuflex-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: -40px;
  }
  #header #logo {
    position: initial;
    top: 0px;
    left: 0px;
  }
  #logo img {
    width: 90px;
    padding: 5px 0 20px 0;
    height: auto;
  }

  h1 {
    padding: 0;
  }

  #content {
    padding: 10px 10px 0px 10px;
    border-top: 1px solid #ddd;
    width: 100%;
    border-radius: 0px;
    box-shadow: none;
    -webkit-box-shadow: none;
  }

  #accountcontent {
    padding: 0;
  }

  .searchflex .nomobile {
    display: none !important;
  }
  .searchflex {
    border-top: 1px solid #ddd;
    margin: 0px;
    padding-top: 15px;
  }
  #search {
    padding: 10px;
  }
  #header #search {
    border: none;
  }

  #header .button-search {
    width: unset;
    margin-left: 0;
    border-radius: 0;
    border: none;
    margin-right: 0;
    padding: 0 14px;
  }
  #header #search input {
    border-radius: 0;
    border: none;
    flex-grow: 5;
  }
  .search-input-group {
    flex: 1;
  }
  #menunav {
    width: 100%;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  #menunav,
  #menusplit,
  #menu,
  #footerinner,
  #powered,
  #page-bg,
  #footer {
    width: 100% !important;
  }

  .product-container {
    margin-top: 10px;
  }
  .ind {
    padding: 6px;
    font-size: 8px;
  }

  #container {
    max-width: 100%;
  }

  #footer {
    color: #fff;
    background: var(--c-primary);
    padding: 15px;
    font-size: 8px;
    margin-top: 10px;
  }
  #footer a.mifs {
    color: #fff;
    font-size: 8px !important;
  }

  .product-all {
    display: flex;
  }
  .product-name {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    border-top: 1px solid #ddd;
    padding: 10px 0;
  }
  .product-info {
    width: 100%;
    margin-bottom: 0;
  }
  .product-info1 {
    display: flex;
  }
  .product-indicators {
    display: inline-flex;
    margin-left: auto;
  }
  .product-info2 {
    display: flex;
    padding: 10px;
    flex-direction: column;
  }
  .product-info2 > div:nth-child(odd) {
    background: #f4f4f4;
  }
  .info2-item1,
  .info2-item3 {
    border: 1px solid #ddd;
    padding: 1px 15px;
  }
  .info2-item2 {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 1px 15px;
  }

  .product-info3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    padding-left: 10px;
    color: green;
  }

  .product-info4 {
    margin: 0px 0 0px 0;
    display: flex;
    padding-top: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .product-info4 .qty-section {
    margin-left: 10px;
  }
  #Qty {
    font-size: 1.1rem;
    margin-left: 5px;
    padding: 0;
  }
  .qtyinput {
    width: 50px !important;
  }
  .qtyarrows {
    display: inline-flex;
    flex-direction: column;
  }
  .incqtyarrow {
    background-color: var(--c-bg-page);
    border: 1px solid #ccc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    width: 20px;
    text-align: center;
    border-radius: 0 4px 0 0;
    height: 17px;
  }
  .decqtyarrow {
    background-color: var(--c-bg-page);
    border: 1px solid #ccc;
    width: 20px;
    text-align: center;
    border-radius: 0 0 4px 0px;
    height: 17px;
  }
  .qtyinputarrows {
    font-size: 1rem;
    min-height: 34px;
    border-radius: 4px 0 0 4px;
    border: 1px solid #ddd;
    padding: 0px 5px;
    margin-left: 10px;
    text-align: right;
    width: 55px !important;
  }
  .qtyarrows {
    margin: 0 10px 0 1px;
  }

  .carticon {
    margin: 0 5px 0 0;
    padding: 8px 20px;
  }
  #favourite {
    padding: 8px;
  }
  .product-section {
    margin: 20px 0;
  }
  .profile h1 {
    padding: 10px;
  }

  .mbcustomerName {
    margin-bottom: 10px;
    margin-top: -50px;
    display: inline;
  }
  #mbmenuicons {
    display: block;
  }
  #mbmain {
    display: block;
    margin-top: 0px;
  }

  #menu,
  #affiliatemenu {
    display: none;
  }

  #menu-button {
    display: none;
  }

  #welcometext,
  .welcometext {
    display: none;
    float: right;
  }

  #webordering {
    display: none;
  }
 
  .desktop-menuheader,
  #menudt,
  .desktopfooter {
    display: none;
  }
  #logo {
    display: block;
    text-align: center;
  }
  #header {
    all: unset;
    width: 100%!important;
  }
  /* Mobile Header redesign */
  #logo { display: none !important; } /* logo moved into mbh-top */

  .mobile-menuheader,
  .mobile-menuheader-iframe {
    background: #fff;
    box-shadow: 0 2px 10px rgba(39,25,104,0.09);
    border-bottom: 1px solid var(--c-border);
  }

  .mbh-top {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    min-height: 54px;
    gap: 8px;
  }

  .mbh-logo-wrap {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    flex: 1;
    min-width: 0;
  }

  .mbh-logo {
    height: 36px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
  }

  .mbh-brand {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-primary-dark);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mbh-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  #headercart {
    background: transparent;
    padding: 0;
    margin: 0;
    line-height: 1;
  }

  #headercart a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    text-decoration: none !important;
    background: #fff;
  }

  #headercart i.fa-shopping-cart {
    font-size: 18px !important;
    color: var(--c-primary-dark);
    margin: 0;
  }

  #headercart #lblCartCount {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    background: var(--c-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid #fff;
    line-height: 1;
    font-style: normal;
  }

  #mbmain {
    font-size: 0.85rem;
    background: var(--c-primary-dark);
    color: #fff;
    padding: 8px 13px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .mobileheaderitems {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: transparent;
    border-top: 1px solid var(--c-primary-lt);
    gap: 0;
    margin-top: 0 !important;
  }

  .accountdetails {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    color: var(--c-primary-mid)!important;
    gap: 0;
    flex: 1;
    min-width: 0;
  }

  .mobileheaderitems .ih-user-dd {
    margin-left: 5px;
    flex-shrink: 0;
  }

  .ad-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 12px 0 10px;
    background: transparent;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-primary-mid);
    letter-spacing: .01em;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ad-chip i.fa {
    font-size: 9px;
    color: var(--c-primary-scroll);
    flex-shrink: 0;
  }

  .ad-chip--rep {
    background: transparent;
    padding: 0 10px;
    height: 28px;
    border-radius: 20px;
    background: var(--c-gold-lt);
    border: 1px solid var(--c-gold-border);
    color: var(--c-gold);
    font-size: 12px!important;
    margin-top: 5px;
  }
  
  .ad-chip--rep i.fa {
    color: var(--c-gold);
    font-size: 10px;
    opacity: .8;
  }

  .ad-sep {
    width: 1px;
    height: 22px;
    background: var(--c-primary-border);
    flex-shrink: 0;
    margin: 0 4px;
  }

  /* Account / user code badge — mirrors ih-acct-badge */
  .ad-acct {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 12px 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-primary-mid)!important;
    letter-spacing: .01em;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ad-acct--stack {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1px;
  }
  .ad-acct-row {
    display: flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
  }
  .ad-acct-lbl {
    font-size: 9px;
    font-weight: 600;
    color: var(--c-primary-scroll)!important;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .ad-acct-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-primary-mid)!important;
  }

  .ad-name {
    font-size: 0.68rem;
    color: var(--c-primary-mid);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding-left: 10px;
    border-left: var(--c-primary-border) 2px solid;
  }

  .searchflex {
    border-top: none;
  }
  #footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    height: unset;
    padding: unset;
    padding: 10px 0;
    height: 60px;
    z-index: 2;
  }
  .mbfooteritems {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 1rem;
  }

  .mbfooteritems > div > a {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 0.8rem !important;
  }
  .mbfooteritems i.fa-user,
  .mbfooteritems i.fa-list-alt,
  .mbfooteritems i.fa-cart-plus,
  .mbfooteritems i.fa-bars,
  .mbfooteritems i.fa-gift {
    font-size: 1.2rem;
  }
  #content {
    margin-bottom: 70px;
  }
}

@media all and (min-width: 600px) and (max-width: 1115px) {
  .product-container {
    margin: 0 30px;
  }
}
@media all and (max-width: 450px) {
  input[type="text"],
  input[type="password"] #debtorsearch,
  textarea #debtorsearch {
    width: 120px;
  }
  #header #search input {
    width: 30px !important;
  }
}
@media all and (max-width: 351px) {
  .sidenavMenuitems > ul > li > a {
    font-size: 14px !important;
  }
  .mbcustomerName {
    margin-bottom: 10px;
    top: 0px;
    font-size: 11px;
  }
  input[type="text"],
  input[type="password"] #debtorsearch,
  textarea #debtorsearch {
    width: 98px;
  }
  .sbutton {
    padding: 6px 5px 5px 5px;
  }
  ul.breadcrumb {
    padding: 10px 5px;
  }
  ul.breadcrumb li a {
    font-size: 9px !important;
  }
  ul.breadcrumb li + li:before {
    padding: 4px;
  }
}

@media all and (min-width: 1116px) {
  #logo img {
    padding-top: 10px;
    width: 180px !important;
  }
  #logo img {
    width: 10%!important;
    padding: 20px 0;
    margin: auto;
  }
  .nodesktop {
    display: none;
  }
  .qtyarrows {
    margin: 0px 0px 0 0px;
  }

  .qtyinput {
    width: 80px;
  }
  .qtyarrows {
    display: inline-flex;
    flex-direction: column;
    position: absolute;
  }
  .incqtyarrow {
    background-color: var(--c-bg-page);
    border: 1px solid #ccc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    width: 20px;
    text-align: center;
    border-radius: 0 4px 0 0;
    line-height: 1.1;
  }
  .decqtyarrow {
    background-color: var(--c-bg-page);
    border: 1px solid #ccc;
    width: 20px;
    text-align: center;
    border-radius: 0 0 4px 0px;
    line-height: 1.1;
  }
  .qtyinputarrows {
    font-size: 1rem;
    min-height: 30px;
    border-radius: 4px 0 0 4px;
    border: 1px solid #ddd;
    padding: 0px 5px;
    margin-left: 10px;
    text-align: right;
    width: 70px !important;
    align-items: center;
  }
  .qtyarrows {
    margin: 0 10px 0 0px;
  }
  #favourite,
  .carticon {
    padding: 7px 5px 6px 5px;
  }
  .mobile-menuheader,
  .mbfooter {
    display: none;
  }
}

/* ── 1116px–1115px: hide desktop header, show mobile header ── */
@media all and (min-width: 1116px) and (max-width: 1115px) {
  .mobile-menuheader,
  .mobile-menuheader-iframe {
    display: block;
  }
  .desktop-menuheader,
  #logo,
  #menudt {
    display: none !important;
  }
}

@media only screen and (min-width: 1116px) and (max-width: 1335px) {
  .col-9 {
    width: 100% !important;
  }
  #header #search .option-text {
    width: 70px;
  }
} /* End of Mobile Queries */

/* Rep Css */
.repnotes {
  float: left;
}

.repdebtornotes,
.mynotesform {
  float: right;
}

.mynotesform {
  margin-left: 50px;
}

.addcalendarform {
  display: flex;
}
a.viewnote.newstylebutton {
  background-color: var(--c-primary);
  text-align: center;
}
a.addnote.newstylebutton {
  background-color: #03bf00;
  text-align: center;
}
@media all and (min-width: 500px) {
  input[type="text"],
  input[type="password"],
  textarea {
    width: 210px;
  }
}

@media all and (max-width: 567px) {
  .repnotes {
    width: 100%;
    margin-top: 50px;
  }

  .repdebtornotes {
    width: 100%;
    margin-top: 50px;
  }
  .repnotes .newstylebutton,
  .repdebtornotes .newstylebutton {
    margin-top: 10px;
    display: block;
    text-align: center;
  }
  .form-horizontal select,
  textarea#added,
  .control-group textarea {
    width: 250px !important;
  }
  .form-horizontal .control-label {
    float: left;
    width: 100%;
    padding-top: 5px;
    text-align: left;
  }
  .form-horizontal .controls {
    margin-left: 0px;
    margin-bottom: 23px;
  }
}

@media all and (max-width: 857px) {
  #myModalMyNote #close {
    line-height: 20px;
  }
  .mynotesform {
    float: left;
    margin-top: 15px;
    width: 100%;
  }

  .mynoteadescr {
    margin-top: 10px;
  }
}

@media all and (max-width: 567px) {
  #myModalMyNote #close {
    line-height: 10px;
  }
}

@media all and (max-width: 900px) {
  .fc-left {
    width: 100% !important;
    margin-top: 5px;
  }

  .fc-right {
    width: 100% !important;
    float: left !important;
    margin-top: 5px;
  }

  .fc-center {
    float: left !important;
    margin-top: 5px;
  }

  .addcalendarform {
    display: block;
  }

  #cal_start,
  #cal_end,
  .selectcust {
    width: 200px;
    margin-top: 10px;
  }
}

.topheadlinetext-iframe {
  text-align: right;
  padding-top: 10px;
  padding-right: 15px;
  letter-spacing: -1px;
  text-rendering: optimizeLegibility;
  font-size: 120%;
}

/* ============================================================
   Iframe Header  — layout handled by header.css (#ih-topbar)
   ============================================================ */
#iframe-header {
  display: none; /* legacy element replaced by #ih-topbar */
}

#addcart, #viewcart {
  display: none !important;
}

/* ============================================================
   TYPOGRAPHY & FORM STANDARDIZATION
   Provides a consistent 13px / var(--c-text) baseline across all
   text, inputs, buttons, and tables throughout the app.
   Responsive !important overrides further up the file take
   precedence at narrow breakpoints as intended.
   ============================================================ */

/* --- Base text --- */
body {
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.6;
}
body, td, th, input, textarea, select, a {
  font-size: 13px;
}

/* --- Headings --- */
h1 { font-size: 20px; font-weight: 700; color: var(--c-primary); margin-top: 0; }
h2 { font-size: 15px; font-weight: 700; color: var(--c-text); margin-top: 0; }
h3 { font-size: 14px; font-weight: 700; color: var(--c-text); margin-top: 0; }
h4, h5, h6 { font-size: 13px; font-weight: 700; color: var(--c-text); margin-top: 0; }

/* --- Links --- */
a, a:visited {color:inherit; text-decoration: none; }
a:hover      {color:inherit; text-decoration: none; }

/* --- All text-entry inputs, selects, textareas --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"],
textarea,
select {
  font-size: 13px;
  color: var(--c-text);
  background: #ffffff;
  border: 1px solid var(--c-border-mid);
  padding: 6px 10px;
  line-height: 1.5;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px rgba(61,61,151,.12);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--c-primary);
  cursor: pointer;
}
textarea { resize: vertical; }
select   { cursor: pointer; }

/* --- Generic buttons --- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* --- .sbutton — branded outline action button --- */
a.sbutton,
input.sbutton,
button.sbutton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary);
  background: #ffffff;
  border: 1px solid var(--c-primary);
  border-radius: 6px;
  padding: 6px 14px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .15s, color .15s, border-color .15s;
}
a.sbutton:hover,
input.sbutton:hover,
button.sbutton:hover {
  background: var(--c-primary);
  color: #ffffff;
  border-color: var(--c-primary);
  text-decoration: none;
}

/* --- Tables --- */
table {
  font-size: 13px;
  font-style: normal;
  color: var(--c-text);
  border-collapse: collapse;
}
th {
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  color: var(--c-primary);
  background: var(--c-primary-lt);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid var(--c-primary-border);
}
td {
  font-size: 13px;
  font-style: normal;
  color: var(--c-text);
  padding: 7px 10px;
  vertical-align: middle;
}

/* --- Select2 — font/color to match standard inputs --- */
.select2-container--default .select2-selection--single {
  border: 1px solid var(--c-border-mid);
  border-radius: 6px;
  background-color: #ffffff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 13px;
  color: var(--c-text);
  padding-left: 10px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px rgba(61,61,151,.12);
}
.select2-results__option {
  font-size: 13px;
  color: var(--c-text);
}
.select2-results__option--highlighted {
  background-color: var(--c-primary) !important;
  color: #ffffff !important;
}


#menudt{
  background-color: #fff!important;
  border-bottom: 2px solid var(--c-primary)!important;
  padding-bottom: 5px!important;
}

  input#searchfield {
    margin: 0;
    width: 100%!important;
  }

  .ortable a {
    color: var(--c-primary);
    text-decoration: none;
  }

  table a{
    color: var(--c-primary);
    text-decoration: none;
  }

  table a:hover {
    color: var(--c-primary);
    text-decoration: underline;
  }

  table a:visited {
    color: var(--c-primary);
  }

  .addbutton:visited {
    color: #fff;
  }


  @media (max-width: 350px) {
  .mbh-top {
    flex-wrap: wrap;
    padding: 6px 8px;
  }
  .mbh-logo-wrap {
    width: 100%;
    justify-content: center;
  }
  .mbh-actions {
    width: 100%;
    justify-content: center;
    gap: 12px;
  }
}


.paybutton{
  opacity: 0;
  background-color: transparent;
  color: transparent;
  border: none;
}


@media (min-width: 1440px) {
    .ih-footer-col--wide {
        flex: 0 0 280px!important;
    }
}