:root {
    --button-border-radius: .2rem;
    --document-icon-color: #212529;
    --grid-header-background-color: #4d4f53;
    --button-background-color: white;
    --button-text-color: black;
    --button-border-color: black;
    --button-background-color-hover: #c5c4c4;
    --divider-color: #c5c4c4;
    --dxbl-grid-header-bg: var(--grid-header-background-color);
    --dxbl-grid-header-color: white;
    --dxbl-tabs-tab-hover-bg: transparent;
    --dxbl-grid-font-size: 16pt;
    --dxbl-tabs-font-size: 16pt;

}

.dxbl-grid {
    --dxbl-grid-border-width: 0px;
    --dxbl-grid-detail-cell-padding-y: .4rem;
    --dxbl-grid-detail-cell-padding-x: 1.5rem;
}

#tagDetailsGrid th {
    border-right-width: 0px !important;
    border-left-width: 0px !important;
    --dxbl-grid-border-width: 1px;
}

.dxbl-modal {
    --dxbl-popup-max-width: 95dvw;
}

.dxbl-modal-content {
    --dxbl-popup-border-width: 0px;
}


.dxbl-popup.modalAddressBook 
{
    --dxbl-popup-max-width: 550px;
}

.dxbl-popup.ShowDatePopup {
    --dxbl-popup-max-width: 400px;
}

.dxbl-popup.incomingDetailsPopup {
    --dxbl-popup-max-width: 500px
}

.dxbl-text {
    --dxbl-text-font-size: 12pt;
}

.fa-minus-circle, .fa-trash-o {
    color: red;
}

.fa-times {
    color: red;
    margin-right: 5px;
}

.fa-check-circle {
    color: green;
}

.document-icon-color {
    color: var(--document-icon-color);
}

.dxbl-pager .pagination {
    /* margin: 0; */
    margin-left: auto;
    margin-right: auto;
}

dxbl-modal > .dxbs-modal > .dxbs-popup {
    margin: 0;
}

.odd-row {
    border-bottom: solid 2px white;
}

.even-row {
    background-color: #EFEFEF;
    border-bottom: solid 2px white
}

.online-body {
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 1rem;
}

.online-body-width {
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 0px 10px;
    margin-top: 0px
}

#cookieConsent {
    position: absolute;
    bottom: 10px;
    right: 10px;
    max-width: min(800px, 100%)
}


.company-background {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.dxbs-tabs-ipad {
    position: fixed;
    top: 175px !important;
    background-color: whitesmoke !important;
    width: 100%;
    z-index: 100;
    height: 50px;
}

.width-button-go-products {
    width: 200px !important;
}

.add-item-button-customer-item {
    font-size: 10pt;
    font-size: 10pt;
    width: 120px !important;
    float: right;
    margin-right: 10px;
    margin-top: -110px;
}

.logo_height_width {
    width: 100%;
    max-width: 350px;
    max-height: 90px;
}

.navbar-grid {
    display: grid;
    grid-template-columns: 3fr 7fr 2fr;
    align-items: center;
    height: 90px;
}

.navbar-grid-cart {
    display: flex;
    flex-direction: row;
/*    justify-content: space-between;*/
    gap: 1px;
    padding-right: 15px;
    align-items: center;
}

.horizontal-center-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.signup-container {
    display: flex;
    flex-direction: column;
    width: min(800px, 90vw);
    gap: 100px;
}

#shopping-cart-icon-container {
    position: relative;
    /*margin-left:-35px;*/
}

#_ShoppingCartElements_ {
    cursor: pointer;
    right: -7px;
    top: 5px;
    font-size: 12pt;
    position: absolute;
}

.footer-area {
    display: flex;
}

    .footer-area.text-right {
        justify-content: right;
    }

.footer-rows {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-split {
    display: flex;
    justify-content: space-between;
    background-color: white;
}

.footer-text.footer-link {
    font-size: 12pt;
    color: black !important;
    text-decoration: none;
}

.footer-text {
    text-align: right;
    padding: 0px 10px;
}

.footer_logo_height_width {
    width: 100%;
    max-height: 90px;
    max-width: 200px;
}

.footer-right-area {
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-column-gap: 10px;
    width: max-content;
    justify-self: right;
}

.footer-right-area-label {
    grid-column: 1;
}

.footer-right-area-value {
    grid-column: 2;
    justify-self: left;
    font-weight: 650;
}

.footer-right-area-span {
    grid-column: span 2;
}

.add-item-label {
    width: 200px;
    text-wrap: nowrap;
    text-align: right;
}

.header-title {
    background-color: var(--grid-header-background-color) !important;
}

.MemoTextboxClass > .dxbs-input-group > div {
    width: 100%;
}

.CheckoutDate {
    width: 100%;
}

.btn-quote {
    min-width: 135px;
    width: max-content;
    color: white !important;
    background-color: var(--company-color) !important;
    border-color: var(--company-color) !important;
    margin: 10px auto;
}

.btn-no-fastquote{
    min-width: 135px;
    width: max-content;
    color: white !important;
    margin: 10px auto;

}


.btn-cant-find-prod {
    cursor: pointer;
    color: var(--company-color) !important;
}

.btn-delete-line-item {
    min-width: 96px;
    width: max-content;
    height: 35px;
}

.btn-edit-line-item {
    min-width: 96px;
    width: max-content;
    height: 35px;
}

.search-result-by-hight {
    display: block;
}

.search-result-by-low {
    display: none;
}

.search-filter-div {
    padding-right: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--divider-color);
    flex-wrap: wrap;
    align-items: baseline;
}

.searchFilter {
    width: 100%;
    min-width: 160px;
    padding: 2px 2px 2px 2px;
}

.searchFilterHeader {
    border-radius: 0px;
    padding: 3px;
    padding-left: 10px;
    /*    border: 1px solid;*/
    border-bottom: 0px;
}

.dimension-grid {
    display: flex;
    gap: 10px;
    /*    grid-template-columns: repeat(auto-fill, 10ch 70px);
    grid-gap: 5px;*/
    width: 100%;
    padding-left: 10px;
}

    .dimension-grid > label {
        justify-self: left;
        align-self: center;
        margin-bottom: unset;
    }

#exact-match {
    grid-column: span 2;
    justify-self: center;
    padding-top: 2px;
}

#apply-buttons {
    align-self: center;
    padding-top: 20px;
    flex: 1 0 auto;
    display: flex;
    gap: 10px;
}

.top-header-disclaimer {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 15px;
}

.title-text {
    font-size: 11pt;
    color: black;
    font-weight: bold;
}

.error-text {
    font-size: 11pt;
    color: red;
}

.font-size-nav-menu {
    font-size: 16px !important;
}

.btn {
    border-radius: var(--button-border-radius);
    text-wrap: nowrap;
}

.btn-std-color {
    background-color: var(--button-background-color) !important;
    color: var(--button-text-color) !important;
    border-color: var(--button-border-color) !important;
    font-weight: 500;
}

    .btn-std-color:hover {
        background-color: var(--button-background-color-hover) !important;
    }

.btn-place-order-mobile {
    width: 140px;
    color: white;
    background-color: #2B2B2B;
    border-color: #2B2B2B;
}

    .btn-place-order-mobile:hover {
        color: #2B2B2B;
        background-color: white;
        border-color: #2B2B2B;
    }

.add-item-button {
    font-size: 10pt;
    width: 120px;
    float: right;
    margin-right: 10px;
    margin-top: -80px;
}

html, body {
    font-size: 12pt !important;
    font-weight: normal !important;
    color: black !important;
    padding-right: 0px !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

.alert-font-color {
    color: var(--company-color) !important;
}

.td-top {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.td-middle {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.td-buttom {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.margin-top-address-book {
    margin-right: 0px !important;
    margin-left: 0px !important;
    height: 175px;
    width: 375px;
}

/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 2.1px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #eee;
    border-radius: 50%;
    border: 1px solid black;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    border: 1px solid var(--company-color);
    background-color: var(--company-color);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 1px;
    left: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--company-color);
}

.checkmark_addItem {
    position: absolute;
    top: 7.1px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid darkgray;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark_addItem {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark_addItem {
    border: 1px solid var(--company-color);
    background-color: var(--company-color);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark_addItem:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark_addItem:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark_addItem:after {
    top: 1px;
    left: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--company-color);
}

.checkoutbox {
    font-size: 10pt;
    /*padding: 10px;*/
    height: 110px;
    width: 100%;
    /*background-color: whitesmoke;*/
    /*border-radius: 2px;*/
    /*border: solid silver 1px;*/
}



.updateItemPopup > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1280px !important;
    /*height: 900px !important;*/
    background-color: white !important;
}

    .updateItemPopup > .modal-content > .modal-body {
        padding: 0px !important;
        height: calc(100% - 250px);
        /*overflow-y: auto;*/
    }

    .updateItemPopup > .modal-content > .modal-footer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: end;
        justify-content: center;
        padding: 0.5rem;
        border-top: 1px solid #dee2e6;
        padding-top: 5px;
    }

.dxmemo-width {
    width: 100%;
}

.magin-modal-email {
    margin-left: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-right: 20px;
}

.address-book-record-font-size {
    font-size: 10pt;
}



.alert-inventory-message-popup > .modal-content {
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: white;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
    /* top: 73%; */
    margin-top: -60% !important;
}

.alert-inventory-message-popup > .modal-body {
    font-weight: 500 !important
}

.alert-custom-popup > .modal-body {
    font-weight: 500 !important
}

.alert-custom-popup {
    --dxbl-popup-max-width: 500px;
}


.dxbl-modal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: center !important;
    padding: 0.5rem;
    border-top: 1px solid #dee2e6;
    /* border-bottom-right-radius: .3rem; */
    /* border-bottom-left-radius: .3rem; */
}

.MillTRPopupHeader {
    font-weight: bold;
    font-size: 13pt !important;
    background-color: whitesmoke;
}

.MillTRPopup > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    transform: translate(-50%,-50%);
    /* margin-top: 9px; */
    width: 1200px !important;
    height: 715px;
    background-color: whitesmoke;
}

.AlertInventoryYesButton {
    width: 128px !important;
    background-color: silver !important;
    border: none !important;
    color: black !important;
    font-weight: 600 !important;
    margin: 0 .25rem;
}

.AlertInventoryNoButton {
    width: 121px !important;
    background-color: silver !important;
    border: none !important;
    color: black !important;
    font-weight: 600 !important;
    margin: 0 .25rem;
}

.KeepInSaveForLaterButton {
    /*width: 100px !important;*/
    background-color: silver !important;
    border: none !important;
    color: black !important;
    font-weight: 600 !important;
}

.alert-nesting-custom-popup > .modal-body {
    font-weight: 500 !important
}

.alert-nesting-custom-popup {
    --dxbl-popup-max-width: 500px;
}

.CheckoutDateWidth {
    width: 170px !important;
}

.CheckoutDateHeight {
    height: 40px
}

.CheckoutDateHeightBorder {
    height: 41px
}

.ShowDatePopup > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px !important;
    background-color: white !important;
}

.alert-custom-popup-email-us {
    --dxbl-popup-max-width: 650px;
}

.alert-custom-popup-email-us > .modal-content {
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 650px !important;
    pointer-events: auto;
    background-color: white;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
    /* top: 73%; */
    margin-top: -43% !important;
}

    .alert-custom-popup-email-us > .modal-content > .modal-body {
        padding-left: 20px !important;
        padding-top: 5px !important;
        padding-right: 20px !important;
        padding-bottom: 5px !important;
        font-size: 11pt !important;
    }

.alert-custom-popup-email-us > .modal-footer {
    height: 60px !important;
}

.alert-nesting-custom-popup > .modal-content > .modal-body {
    padding-left: 20px !important;
    padding-top: 5px !important;
    padding-right: 20px !important;
    padding-bottom: 5px !important;
    font-size: 11pt !important;
}

.alert-custom-popup > .modal-content > .modal-body {
    padding-left: 20px !important;
    padding-top: 5px !important;
    padding-right: 20px !important;
    padding-bottom: 5px !important;
    font-size: 11pt !important;
}

.input-group > .dxbs-form-control {
    font-size: 11pt !important;
    height: 50px !important;
    background-color: white !important;
}



.dxbs-calendar.card .card-footer.btn-toolbar {
    padding: 0 .5rem;
    height: 5px;
}

.dx-blazor-calendar-selected {
    background-color: var(--company-color);
    color: white;
}

.dx-datagrid-content {
    overflow-y: auto;
}

.favorite-section:hover .badge-danger-oos {
    color: rgb(43,43,43) !important;
    background-color: rgb(255,255,255) !important;
    font-size: 11pt !important;
    font-weight: bold !important;
}

.favorite-section:hover .hdr_promo_icon {
    color: rgb(43,43,43) !important;
}

.forgot-textbox .dxbs-form-control {
    font-size: 11pt !important;
    height: 50px !important;
    background-color: white !important;
}

.separate {
    margin-left: 5px;
    margin-right: 5px;
}

.modal-legal-document {
    height: 100%;
    width: 100%;
    max-width: 100% !important;
}

    .modal-legal-document > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        margin-top: 10px;
        width: calc(100% - 800px);
        height: calc(100% - 50px);
        background-color: white !important;
    }

        .modal-legal-document > .modal-content > .modal-body {
            height: 100%;
            width: 100%;
        }

    .modal-legal-document > .modal-footer {
        height: 60px !important;
    }


.green-check {
    display: none;
    font-size: 25pt;
    color: green;
    margin-left: -20px;
}

.red-check {
    display: none;
    font-size: 25pt;
    color: darkred;
    margin-left: -20px;
}

.x-large-text-font-size {
    font-size: 20pt;
}

.large-text-font-size {
    font-size: 18pt;
}

.medium-text-font-size {
    font-size: 14pt;
}

.regular-text-font-size {
    font-size: 12pt;
}

.small-text-font-size {
    font-size: 11pt;
}

.dxbs-form-control {
    font-size: 11pt !important;
    height: 30px !important;
    background-color: white !important;
}

.validation-message {
    color: red;
    font-size: 16px;
}

.dxbs-memo .form-control:not(.dxbs-disable-mh) {
    min-height: 12em;
}

.MemoTextboxClass {
    min-width: 366px;
    max-width: 100%;
}


.my_checkbox {
    width: 1.5rem;
    height: 1.5rem;
    top: 0.5rem;
}

.clear-search-label-btn {
    background-color: transparent !important;
    color: red !important;
    border: 1px solid transparent !important;
}

.result-table-td {
    border-bottom: 1px solid silver !important;
    border-right: 1px solid silver !important;
}

.smart-search-table:nth-child(odd) {
    background-color: whitesmoke;
}

.smart-search-div {
    display: inline-flex;
    vertical-align: middle;
    position: absolute;
    width: 99%;
    text-align: left;
    margin-top: -1px;
    z-index: 989;
    cursor: default;
    background-color: white;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}

.search-grid-down {
    display: block;
    width: 99.9% !important;
}

.red-star {
    color: red;
    margin-left: 2px;
    margin-right: 2px;
    font-size: 12pt;
}


#main-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#main-content::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

#main-content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

.material-switch > input[type="checkbox"] {
    display: none;
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
}

    .material-switch > label::before {
        background: rgb(0, 0, 0);
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        content: '';
        height: 16px;
        margin-top: 0px;
        position: absolute;
        opacity: 0.3;
        transition: all 0.4s ease-in-out;
        width: 40px;
    }

    .material-switch > label::after {
        background: rgb(255, 255, 255);
        border-radius: 16px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        content: '';
        height: 24px;
        left: -4px;
        margin-top: -8px;
        position: absolute;
        top: -4px;
        transition: all 0.3s ease-in-out;
        width: 24px;
    }

.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}

.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}




.filter-title:hover {
    background-color: transparent !important
}

.dx-blazor-checkbox .custom-control.custom-checkbox .custom-control-label:before {
    position: relative;
    left: 0;
    height: 25px;
    width: 25px;
    top: 0px;
    margin-right: 10px;
}

.dx-blazor-checkbox .custom-control.custom-checkbox .custom-control-label:after {
    left: 0;
    height: 25px;
    width: 25px;
    top: 0px;
    color: darkgreen;
}

.btn-lg-dimension {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 2.3;
    border-radius: var(--button-border-radius);
}

.form-control-xl {
    height: calc(1.8em + 1.2rem + 2px);
    padding: .5rem 1rem;
    font-size: 1.5rem;
    line-height: 1.5;
    border-radius: .3rem;
}

.filter-by-width {
    width: 80% !important;
}

.filter-bar-left-side {
    display: flex;
    justify-content: start;
    align-items: baseline;
}

    .filter-bar-left-side > dxbl-input-editor {
        flex-grow: 1;
    }

.filter-bar-right-side {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}


.white-star {
    color: white !important;
    font-size: 8pt;
    position: absolute;
    margin-left: -27px;
    margin-top: 3px;
}

.border-star {
    color: #828282 !important;
    margin-left: 10px;
    font-size: 12pt;
}

.dx-pager .pagination {
    margin-left: auto;
    margin-right: auto;
}

.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: .2rem;
    height: 35px;
    width: 45px;
    border-radius: var(--button-border-radius);
    margin-left: 10px;
    margin-right: 10px;
}

.dx-pager .pagination .page-link[data-args="PBP"], .dx-pager .pagination .page-link[data-args="PBN"] {
    font-weight: 500;
    height: 35px;
    width: 45px;
    border-radius: var(--button-border-radius);
    margin-left: 10px;
    margin-right: 10px;
}


.dxbl-pager .pagination > li.active > a {
    cursor: default !important;
    height: 35px;
    width: 45px;
    border-radius: var(--button-border-radius);
    margin-left: 10px;
    margin-right: 10px;
}

.pagination-sm .page-link {
    font-size: .875rem;
    line-height: 1.5;
    height: 35px;
    width: 45px;
    border-radius: var(--button-border-radius);
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 6px;
    text-align: center;
}

.pagination-sm .page-item:last-child .page-link {
    height: 35px;
    width: 45px;
    border-radius: var(--button-border-radius);
    margin-left: 10px;
    margin-right: 10px;
}

.bold-text {
    font-weight: bold;
}

.grid-text-size {
    font-size: 11pt !important;
}


.grid-header-descripcion-size {
    width: 120px;
}

.grid-header-local-inventory-size {
    width: 130px;
    text-align: right;
}

.dxbs-gridview {
    display: table;
    width: 100%;
}

.grid-header-right {
    text-align: right;
}

.dimension-textbox {
    width: 100%;
}

.oi {
    font-weight: bold;
    color: white;
    position: relative;
    top: 1px;
    display: inline-block;
    speak: none;
    font-family: Icons;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.checkboxavailable {
    height: 50pt;
    width: 50pt;
}

.loading-container {
    z-index: 5000;
    width: 100vw;
    height: 100vh;
}

    .loading-container i {
        color: white;
    }

.loading-icon {
    position: fixed;
    top: 35%;
    left: 50%;
    margin-left: -55px; /* Negative half of width. */
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    opacity: 0.8;
    z-index: 4000;
    width: 100%;
    height: 100%;
}

.spin {
    -webkit-animation: infiniteRotate 2s linear infinite; /* Safari */
    animation: infiniteRotate 2s linear infinite;
}

.loading-container-popup {
    z-index: 5000;
    width: 80vw;
    height: 80vh;
}

    .loading-container-popup i {
        color: transparent;
    }

.loading-icon-popup {
    position: fixed;
    top: 35%;
    left: 50%;
    margin-left: -55px; /* Negative half of width. */
}

.loading-overlay-popup {
    position: fixed;
    top: 0;
    left: 0;
    background: transparent;
    opacity: 0.8;
    z-index: 4000;
    width: 80%;
    height: 80%;
}

.spin-popup {
    -webkit-animation: infiniteRotate 2s linear infinite; /* Safari */
    animation: infiniteRotate 2s linear infinite;
}

.link-gridview {
    font-size: 11pt;
    color: var(--company-color);
    font-weight: bold;
    display: block;
    text-decoration: underline;
    margin-top: 5pt;
}

.text_gridview {
    width: 100%;
    display: block;
}

.txt-line-through {
    text-decoration: line-through;
}

.total-discount {
    color: var(--company-color);
    font-size: 14pt !important;
}

.txt-discount {
    color: var(--company-color);
    font-weight: bold;
}

.txt-discount-none {
    display: none;
}

.superimpose-footer {
    z-index: 1000;
}

.normal-text-bold {
    font-weight: bold;
    font-size: 12pt;
}

.normal-text {
    font-size: 12pt;
}

.normal-text-14 {
    font-weight: normal;
    font-size: 14pt;
}

.logooutsystem {
    max-width: 493px;
    max-height: 135px;
}


.registration-title {
    font-size: 20pt;
    text-align: center;
    margin-top: 20pt;
    margin-bottom: 20pt;
}

.signup-form-label {
    font-weight: bold;
    font-size: 12pt;
}

.textbox-registration {
    font-size: 12pt;
    height: 35pt;
}

.text-label {
    font-size: 12pt;
}

.title-login-size {
    font-size: 24pt;
    text-align: center;
}

.login-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.btn-login {
    font-size: 14pt;
    width: 100%;
}

.textbox-login {
    font-size: 14pt;
    height: 40pt;
}

.margin-links-button {
    margin-bottom: 28pt;
}



.margin-new-account-label {
    margin-bottom: 30pt;
}

.extra-login-text {
    font-size: 16pt;
}

.box-regular-content {
    width: calc(4em + 550px);
    display: table;
    margin: 0 auto;
    padding: 1.5rem;
    border: 1px solid silver;
    border-radius: 1.5rem;
    background-color: white;
}

.content-flex-center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.box-create-reset-password {
    max-width: 890px;
    display: table;
    margin: 0 auto;
}

.box-registration-content {
    max-width: calc(4em + 1180px);
    width: calc(4em + 1180px);
    display: table;
    margin: 0 auto;
    padding: 1.5rem;
    border: 1px solid silver;
    border-radius: 1.5rem;
    background-color: whitesmoke;
}

.row-mobile {
    display: none;
}

.resolution-general {
    display: block;
}

.resolution-tablet {
    display: none;
}

.resolution-mobile {
    display: none;
}

.gridview-content {
    width: calc(100% - 202px);
}


.filter-content-fav {
    width: 5.5%;
}



.gridview-content-fav {
    width: 100%;
}

    .gridview-content-fav > .gridview-content {
        width: 100% !important;
    }


.Textbox80 {
    width: 80px !important;
    height: 30px !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 75px;
    height: 25px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.38);
    -webkit-transition: .6s;
    transition: .6s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 24px;
        width: 24px;
        left: 8px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .6s;
        transition: .6s;
        border: 1px solid white;
    }

input:checked + .slider {
    background-color: #1266f1;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(46px);
    -ms-transform: translateX(46px);
    transform: translateX(46px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 40px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.TrimEndsChk .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #e9ecef !important;
    border: 1px solid #2B2B2B !important;
}

.ErrorSpinEdit {
    border: 1px solid red;
    width: 110px !important;
}

.SpinEdit {
    width: 110px !important;
}

.ComboOrderingUOMCut {
    width: 80px;
    height: 30px !important;
    background-color: #dddee1 !important;
    color: #2B2B2B !important;
}

    .ComboOrderingUOMCut .dxbs-form-control {
        background-color: #e9ecef !important;
        border: 1px solid #2B2B2B !important;
        color: black !important;
    }

.TextBoxUnitWeight {
    height: 30px !important;
    background-color: #dddee1 !important;
    color: #2B2B2B !important;
    width: 195px;
}

    .TextBoxUnitWeight .dxbs-form-control {
        background-color: #e9ecef !important;
        border: 1px solid #2B2B2B !important;
        color: black !important;
    }

.cut-field {
    width: 90px;
}

.TextboxProcessing {
    width: 100% !important;
    height: 30px !important
}

.Textbox500 {
    width: 500px !important;
    height: 30px !important
}

.Textbox200 {
    width: 140px !important;
    height: 30px !important
}

.Textbox180 {
    width: 180px !important;
    height: 30px !important
}

.Textbox80 {
    width: 80px !important;
    height: 30px !important
}

.Textbox30 {
    width: 40px !important;
    height: 30px !important;
}

.TextboxFt {
    width: 85px !important;
    height: 30px !important;
    font-size: 11pt !important;
    background-color: white !important;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    padding-top: 4px;
    vertical-align: middle;
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: .2rem;
    font-weight: 400;
    color: #495057;
    margin-bottom: 2px;
}

    .TextboxFt:focus {
        color: #495057;
        background-color: white;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
    }

.TextboxIn {
    width: 57px !important;
    height: 29px !important;
    font-size: 11pt !important;
    background-color: white !important;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    padding-top: 4px;
    vertical-align: middle;
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: .2rem;
    font-weight: 400;
    color: #495057;
    margin-bottom: 2px;
}

    .TextboxIn:focus {
        color: #495057;
        background-color: white;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
    }


.TextboxFtMobile {
    width: 100% !important;
    height: 30px !important;
    font-size: 11pt !important;
    background-color: white !important;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    padding-top: 4px;
    vertical-align: middle;
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: .2rem;
    font-weight: 400;
    color: #495057;
    margin-bottom: 2px;
}

    .TextboxFtMobile:focus {
        color: #495057;
        background-color: white;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
    }

.TextboxInMobile {
    width: 100% !important;
    height: 29px !important;
    font-size: 11pt !important;
    background-color: white !important;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    padding-top: 4px;
    vertical-align: middle;
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: .2rem;
    font-weight: 400;
    color: #495057;
    margin-bottom: 2px;
}

    .TextboxInMobile:focus {
        color: #495057;
        background-color: white;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
    }


.ComboUOM {
    width: 80px;
    height: 30px !important;
}

.ComboPriceUOM {
    width: 110px;
    height: 30px !important;
}

.ComboAvailableSizes {
    width: 195px;
    height: 30px !important
}

.ComboAvSize {
    width: 85px;
    height: 30px !important
}

.Combo250 {
    width: 140px;
    height: 30px !important
}

.Textbox300 {
    width: 140px !important;
    height: 30px !important
}

.ComboTolerance {
    width: 140px;
    height: 30px !important
}

.ComboTolerance120 {
    width: 120px;
    height: 30px !important
}

.ComboProcess {
    width: 225px;
    height: 30px !important;
}

.ComboProcess180 {
    width: 195px;
    height: 30px !important;
}

.ComboProcess240 {
    width: 240px;
    height: 30px !important;
}

.PerPageDDL {
    width: 70px;
}

.FilterDDL {
    width: 200px;
}

.ComboProcess220 {
    width: 220px;
    height: 30px !important;
}

.ComboProcess100 {
    width: 100px;
    height: 30px !important;
}

.ComboShipping {
    width: 185px;
    height: 30px !important;
}

.ComboShipping100 {
    width: 155px;
    height: 30px !important;
}

.ComboShipping140 {
    width: 140px;
    height: 30px !important;
}

.customGrid {
    height: 320px !important;
    width: 99% !important;
}

.lineSummaryGrid {
    /*height: 210px !important;*/
    width: 99% !important;
    /*border:0.01em solid silver !important;*/
}

    .lineSummaryGrid div.card {
        border: none !important;
        border-radius: 0px !important;
        margin-bottom: 13px !important;
    }

    .lineSummaryGrid th {
        background-color: var(--grid-header-background-color) !important;
        color: #f9f9f9 !important;
    }

    .lineSummaryGrid > .card .dxbs-table > thead > tr:first-child > th, .dxbs-gridview > .card .dxbs-table > thead > tr:first-child > td {
        border-top: 0;
        background-color: #2B2B2B;
        color: white;
        border-radius: 0px;
        height: 25pt !important;
        font-size: 10pt !important;
    }

.MTRGridClass {
    max-height: 300px;
}

.MTRGridClass th {
    background-color: white !important;
    color: black !important;
    border-bottom: 0.01em solid silver !important;
}

.MTRGridClass tr {
}

.customGridAdditional {
    height: 100px !important;
    width: 99% !important;
}

.tabPanelClass {
    border: 1px solid silver;
}

.non-parameter-setting-message {
    padding-left: 10px;
    background-color: white;
    font-weight: 600;
    color: black;
    text-align: left;
}

.processing-instructions-header {
    text-align: right;
    padding-left: 10px;
    padding-right: 10px;
    background-color: silver;
    font-weight: 600;
    text-align: left;
    height: 30px;
}

.btn-processing {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.3rem 0.3rem;
    font-size: 1rem;
    line-height: 0.9;
    border-radius: var(--button-border-radius);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-add-processing:hover {
    width: 100px;
    border-color: #c5c4c4;
    border-radius: var(--button-border-radius);
}

.btn-add-processing {
    margin-left: 5px;
    width: 100px;
    height: 30px !important;
    border-color: #2b2b2b;
    border-radius: var(--button-border-radius);
}


.btn-delete-processing {
    width: 100px;
    height: 30px !important;
    color: #f9f9f9;
    background-color: #2b2b2b;
    border-color: #2b2b2b;
    border-radius: var(--button-border-radius);
}

    .btn-delete-processing:hover {
        color: #2b2b2b;
        background-color: #c5c4c4;
        border-color: #c5c4c4;
    }

.disabled-tablink {
    cursor: default;
    pointer-events: none;
}

    .disabled-tablink a {
        text-decoration: none;
        color: grey !important;
    }

.info {
    background-image: url("../image/tab/item-results.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 11px;
    width: 11px;
}

.star-info {
    background-image: url("../image/tab/favorites.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 1rem;
    width: 1.2rem;
}

.cust-info {
    background-image: url("../image/tab/customer-parts.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 18px;
    width: 18px;
}

.tabHeaderClass {
    /*font-weight: 600;*/
}

.tabHeaderClassAv {
    /*font-weight: 600;*/
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
}

.tabHeaderClassCut {
    font-weight: 600;
    margin-left: 3px;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
}

.tabHeaderClassItemResult {
    font-weight: 600;
    margin-left: 3px;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
}

.tabHeaderClassHeat {
    font-weight: 600;
    margin-left: 3px;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
}

.tabHeaderClassFav {
    font-weight: 600;
    margin-left: 3px;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
}

.tabHeaderClassOrder {
    font-weight: 600;
    margin-left: 3px;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
}

.tabHeaderClassContract {
    font-weight: 600;
    margin-left: 3px;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
}

.addItemPopupHeader,
.incomingDetailsPopupHeader {
    font-weight: bold;
    font-size: 13pt !important;
}

.addItemPopupHeader {
    background-color: #383838 !important;
}

.addItemPopup > .modal-content,
.orderDetailsPopup > .modal-content,
.incomingDetailsPopup > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white !important;
}

.addItemPopup {
    --dxbl-popup-max-width: 1280px;
    width: 1280px;
    min-height: min(900px, 100dvh);
    max-height: 100dvh;
}

.updateItemPopup {
    --dxbl-popup-max-width: 1280px;
}

.orderDetailsPopup > .modal-content > .modal-body {
    margin-top: 15px;
    overflow-y: auto;
}

.orderDetailsPopup {
    --dxbl-popup-width: 90dvw;
    width: 90dvw;
    height: 90dvh;
}

.incoming-details-title {
    background-color: white !important;
    color: #2B2B2B !important;
    margin: 10px 15px;
}

.incoming-details-product {
    margin: 10px 15px
}

.incoming-details-total {
    margin: 0;
    padding: 4px 15px;
    width: 100%;
    background-color: black !important;
    color: white !important;
    font-size: 12pt;
    font-weight: normal;
}

.incomingDetailsPopup > .modal-content {
    width: 640px !important;
}

.incomingDetailsPopup .btn-incoming-details-close {
    float: right;
    margin-right: 15px;
    margin-top: 15px;
}

.incoming-details-table {
    width: calc(100% - 30px);
    border-collapse: collapse;
    margin: 15px;
    margin-top: 0px;
}

    .incoming-details-table tr > * {
        padding: 10px;
    }

    .incoming-details-table tbody tr:nth-of-type(2n+1) {
        background-color: #DDDEE1;
        border-bottom: solid 2px white
    }

    .incoming-details-table tbody tr:nth-of-type(2n+2) {
        background-color: #EFEFEF;
        border-bottom: solid 2px white
    }

/*.dxbs-popup .modal-content {
            width: 1240px !important;
            height: 893px !important;
        }*/
.alert-custom-popup > .modal-content {
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: white;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
    /* top: 73%; */
    margin-top: -43% !important;
}

.alert-custom-popup > .modal-body {
    font-weight: 500 !important
}

.modal-body {
    padding: 0px !important;
}

.alert-nesting-custom-popup > .modal-content {
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 650px;
    pointer-events: auto;
    background-color: white;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
    /* top: 73%; */
    margin-top: -27% !important;
}

.alert-nesting-custom-popup > .modal-body {
    font-weight: 500 !important
}

.modal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: center;
    padding: 0.5rem;
    border-top: 1px solid #dee2e6;
    /* border-bottom-right-radius: .3rem; */
    /* border-bottom-left-radius: .3rem; */
}

.MillTRPopupHeader {
    font-weight: bold;
    font-size: 13pt !important;
    background-color: whitesmoke;
}

.MillTRPopup > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    transform: translate(-50%);
    /* margin-top: 9px; */
    width: 1200px !important;
    height: 715px;
    background-color: whitesmoke;
}

.btn-link:hover {
    background-color: transparent !important;
}

.KeepInSaveForLaterButton {
    /*width: 100px !important;*/
    background-color: silver !important;
    border: none !important;
    color: black !important;
    font-weight: 600 !important;
}

.alert-custom-popup > .modal-footer {
    height: 60px !important;
}

.dxbs-memo .form-control {
    font-size: 11pt !important;
}

.ShipViaCombo {
    width: 180px !important;
    height: 30px !important
}

.dx-listbox-scrollable > .dxbs-listbox > .dxbs-dm > .dropdown-menu {
    left: 561px !important;
}

.ErroRequired {
    border: 1px solid red;
}

.AlertYesButtonAddressBook {
    width: 100px !important;
    background-color: silver !important;
    border: none !important;
    color: black !important;
    font-weight: 600 !important;
    vertical-align: central;
    align-items: center
}

.dx-blazor-checkbox .dx-blazor-checkbox-label-right {
    padding-left: 0.0001rem !important;
}

.modalAddressBook > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 550px !important;
    background-color: white !important;
}

.dxbs-calendar.card .dx-calendar-header-btn {
    margin: 0;
    padding: 0.5em 0.8em;
    display: block;
    color: inherit !important;
    height: 70px;
    padding-top: 35px;
}

.dxbs-calendar.card .dxbs-month-title.btn-sm {
    font-size: 0.85em;
    padding-top: .445em;
    padding-bottom: .445em;
    padding-top: 35px;
    height: 70px;
}

.dx-calendar-style {
    width: 100px;
}

.checkoutdate:disabled {
    background-color: white;
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: hidden !important;
}

.mysuccesstoast {
    background-color: darkgreen !important;
    font-size: 10pt !important;
    font-weight: normal !important;
    width: 600px !important;
}

    .mysuccesstoast > .blazored-toast-body .blazored-toast-header h5 {
        text-transform: none !important;
    }

.myinfotoast {
    background-color: darkred !important;
    font-size: 10pt !important;
    font-weight: normal !important;
    width: 600px !important;
}

    .myinfotoast > .blazored-toast-body .blazored-toast-header h5 {
        text-transform: none !important;
    }

.session-alert-custom-popup > .modal-content {
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: white;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
    /* top: 73%; */
    margin-top: 60% !important;
}

.ShowOrderDetailsPopup > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% - 20px) !important;
    height: calc(100% - 60px) !important;
    background-color: white !important;
    top: 20px;
}

    .ShowOrderDetailsPopup > .modal-content > .modal-body {
        padding: 0px !important;
        height: calc(100% - 110px);
        overflow-y: auto;
    }

    .ShowOrderDetailsPopup > .modal-content > .modal-footer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: end;
        justify-content: center;
        padding: 0.5rem;
        border-top: 1px solid #dee2e6;
        padding-top: 5px;
    }






/************** Modals *************/
.PDFPopupMobile > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    margin-top: 0px;
    transform: translate(-50%);
    width: !important;
    height: calc(100% - 20%) !important;
    background-color: white !important;
}

    .PDFPopupMobile > .modal-content > .modal-body {
        padding: 0px !important;
        height: 100% !important;
        overflow-y: auto;
    }

.updateItemPopupMobile > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    margin-top: 0px;
    transform: translate(-50%);
    width: 750px !important;
    height: fit-content !important;
    background-color: white !important;
}

    .updateItemPopupMobile > .modal-content > .modal-body {
        padding: 0px !important;
        height: fit-content !important;
        overflow-y: auto;
    }

    .updateItemPopupMobile > .modal-content > .modal-footer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: end;
        justify-content: center;
        padding: 0.5rem;
        border-top: 1px solid #dee2e6;
        padding-top: 5px;
    }

.addItemPopupMobile > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    transform: translate(-50%);
    width: 750px !important;
    height: fit-content !important;
    background-color: white !important;
    top: 20px;
}

    .addItemPopupMobile > .modal-content > .modal-body {
        padding: 0px !important;
        height: fit-content !important;
        overflow-y: auto;
    }

    .addItemPopupMobile > .modal-content > .modal-footer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: end;
        justify-content: center;
        padding: 0.5rem;
        border-top: 1px solid #dee2e6;
        padding-top: 5px;
    }

.SearchCriteriaPopupMobile > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% - 20px) !important;
    height: calc(100% - 60px) !important;
    background-color: white !important;
    top: 20px;
}

    .SearchCriteriaPopupMobile > .modal-content > .modal-body {
        padding: 0px !important;
        height: calc(100% - 110px);
        overflow-y: auto;
    }

    .SearchCriteriaPopupMobile > .modal-content > .modal-footer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: end;
        justify-content: center;
        padding: 0.5rem;
        border-top: 1px solid #dee2e6;
        padding-top: 5px;
    }

.SearchCriteriaOrderPopupMobile > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 20px) !important;
    height: 320px !important;
    background-color: white !important;
    top: 50%;
}

    .SearchCriteriaOrderPopupMobile > .modal-content > .modal-body {
        padding: 0px !important;
        height: calc(100% - 110px);
        overflow-y: auto;
    }

    .SearchCriteriaOrderPopupMobile > .modal-content > .modal-footer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: end;
        justify-content: center;
        padding: 0.5rem;
        border-top: 1px solid #dee2e6;
        padding-top: 5px;
    }

.ShowOrderDetailsPopupMobile > .modal-content {
    position: absolute;
    float: left;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% - 20px) !important;
    height: calc(100% - 60px) !important;
    background-color: white !important;
    top: 20px;
}

    .ShowOrderDetailsPopupMobile > .modal-content > .modal-body {
        padding: 0px !important;
        height: calc(100% - 110px);
        overflow-y: auto;
    }

    .ShowOrderDetailsPopupMobile > .modal-content > .modal-footer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: end;
        justify-content: center;
        padding: 0.5rem;
        border-top: 1px solid #dee2e6;
        padding-top: 5px;
    }

.priceSummaryTitleMobile {
    font-size: 15pt;
    font-weight: 600;
    text-align: center;
}

.priceSummaryHeaderMobile {
    border-radius: 0px !important;
    padding: 5px !important;
    margin-top: 0px !important;
    height: 40px !important;
    background-color: whitesmoke !important;
    border: 1px solid rgba(0,0,0,.12);
    border-bottom: 0px;
}

.hdr__promo_ipad {
    font-weight: normal;
    background-color: var(--company-color) !important;
    color: rgb(255,255,255) !important;
    align-items: center;
    font-size: 12pt !important;
    height: 40pt !important;
}

.alert-mtr-popup-mobile > .modal-content {
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 40% !important;
    pointer-events: auto;
    background-color: white;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
    /* top: 73%; */
    margin-top: 50% !important;
    transform: translate(-50%);
    left: 50%;
}

    .alert-mtr-popup-mobile > .modal-content > .modal-body {
        padding-left: 20px !important;
        padding-top: 5px !important;
        padding-right: 20px !important;
        padding-bottom: 5px !important;
        font-size: 11pt !important;
    }

.alert-custom-popup-ipad > .modal-content {
    position: fixed;
    width: 580px;
    background-color: white;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    left: 50%;
    top: 50%;
    margin-top: 0px !important;
    transform: translate(-50%, -50%);
}

    .alert-custom-popup-ipad > .modal-content > .modal-body {
        padding-left: 20px !important;
        padding-top: 5px !important;
        padding-right: 20px !important;
        padding-bottom: 5px !important;
        font-size: 11pt !important;
    }

.mobile-control > div > .dxbs-disable-resize {
    resize: none;
    min-height: 120px !important;
    width: 100% !important;
    font-size: 10pt !important;
}

.ipad-control > div > div > .dxbs-form-control {
    font-size: 10pt !important;
    height: 30pt !important;
    background-color: white !important;
}


@media (max-width: 1920px) {
    .dimension-textbox {
        width: 100%;
    }


    .ShowOrderDetailsPopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: calc(100% - 60px) !important;
        background-color: white !important;
        top: 20px;
    }

        .ShowOrderDetailsPopup > .modal-content > .modal-body {
            padding: 0px !important;
            height: calc(100% - 110px);
            overflow-y: auto;
        }

        .ShowOrderDetailsPopup > .modal-content > .modal-footer {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: center;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            padding-top: 5px;
        }
}

@media(max-width: 1768px) {
    .footer-text.footer-link {
        font-size: 11pt !important;
        color: Gray;
        text-decoration: none;
    }

    .ShowOrderDetailsPopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: calc(100% - 60px) !important;
        background-color: white !important;
        top: 20px;
    }

        .ShowOrderDetailsPopup > .modal-content > .modal-body {
            padding: 0px !important;
            height: calc(100% - 110px);
            overflow-y: auto;
        }

        .ShowOrderDetailsPopup > .modal-content > .modal-footer {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: center;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            padding-top: 5px;
        }
}

@media (max-width: 1640px) {
    .dimension-textbox {
        width: 100%;
    }

    .title-login-size {
        font-size: 18pt;
        text-align: center;
        margin-top: 20pt;
        margin-bottom: 10pt;
    }

    .textbox-login {
        font-size: 12pt;
        height: 30pt;
    }

    .margin-links-button {
        margin-bottom: 20pt;
    }

    .margin-new-account-label {
        margin-bottom: 15pt;
    }

    .btn-login {
        color: white;
        font-size: 12pt;
        background-color: #2B2B2B;
        border-color: #2B2B2B;
        width: 100%;
        height: 30pt;
        margin-top: 5pt;
    }

    .extra-login-text {
        font-size: 14pt;
    }



    .footer-text.footer-link {
        font-size: 10pt !important;
        color: Gray;
        text-decoration: none;
    }

    .footer-text {
        text-align: right;
        font-size: 0.9em !important
    }

    .signup-form-label {
        font-weight: bold;
        font-size: 10pt;
    }

    .textbox-registration {
        font-size: 12pt;
        height: 25pt;
    }

    .text-label {
        font-size: 12pt;
    }

    .registration-title {
        font-size: 20pt;
        text-align: center;
        margin-top: 15pt;
        margin-bottom: 10pt;
    }

    .form-group {
        margin-bottom: .4rem !important;
    }

    .ShowOrderDetailsPopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: calc(100% - 60px) !important;
        background-color: white !important;
        top: 20px;
    }

        .ShowOrderDetailsPopup > .modal-content > .modal-body {
            padding: 0px !important;
            height: calc(100% - 110px);
            overflow-y: auto;
        }

        .ShowOrderDetailsPopup > .modal-content > .modal-footer {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: center;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            padding-top: 5px;
        }
}

@media (max-width: 1366px) {
    .alert-custom-popup > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        /* top: 73%; */
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
    }

    .modal > .dxbs-popup {
        position: relative;
        left: auto;
        top: auto;
        box-sizing: border-box;
        /* height: 100%;*/
    }

    .modal-dialog {
        max-width: 100%;
        margin: 1.75rem auto;
    }

    .ipad-gridview-content {
        width: 100%;
    }

    .ShowOrderDetailsPopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: calc(100% - 60px) !important;
        background-color: white !important;
        top: 20px;
    }

        .ShowOrderDetailsPopup > .modal-content > .modal-body {
            padding: 0px !important;
            height: calc(100% - 110px);
            overflow-y: auto;
        }

        .ShowOrderDetailsPopup > .modal-content > .modal-footer {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: center;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            padding-top: 5px;
        }
}

@media (max-width: 1280px) {
    .font-size-nav-menu {
        font-size: 12px !important;
    }

    .filter-content {
        width: 100%;
    }

    .dimension-textbox {
        width: 100%;
    }

    .title-login-size {
        font-size: 18pt;
        text-align: center;
        margin-top: 20pt;
        margin-bottom: 10pt;
    }

    .textbox-login {
        font-size: 12pt;
        height: 30pt;
    }

    .margin-links-button {
        margin-bottom: 20pt;
    }

    .margin-new-account-label {
        margin-bottom: 15pt;
    }

    .btn-login {
        color: white;
        font-size: 12pt;
        background-color: #2B2B2B;
        border-color: #2B2B2B;
        width: 100%;
        height: 30pt;
    }

    .extra-login-text {
        font-size: 14pt;
    }


    .footer-text.footer-link {
        font-size: 8pt !important;
        color: Gray;
        text-decoration: none;
    }

    .footer-text {
        text-align: right;
        font-size: 0.9em !important
    }

    .signup-form-label {
        font-weight: bold;
        font-size: 10pt;
    }

    .textbox-registration {
        font-size: 12pt;
        height: 25pt;
    }

    .text-label {
        font-size: 12pt;
    }

    .registration-title {
        font-size: 20pt;
        text-align: center;
        margin-top: 15pt;
        margin-bottom: 10pt;
    }

    .form-group {
        margin-bottom: .4rem !important;
    }
}

@media (max-width: 1440px) {
    .search-result-by-hight {
        display: none;
    }

    .search-result-by-low {
        display: block;
    }

    .filter-content {
        width: 100%;
    }

    .gridview-content {
        width: calc(100% - 202px);
    }

    .filter-content-fav {
        width: 5.5%;
    }

    .gridview-content-fav {
        width: 100%;
    }

    .dimension-textbox {
        width: 100%;
    }

    .title-login-size {
        font-size: 18pt;
        text-align: center;
        margin-top: 20pt;
        margin-bottom: 10pt;
    }

    .textbox-login {
        font-size: 12pt;
        height: 30pt;
    }

    .margin-links-button {
        margin-bottom: 20pt;
    }

    .margin-new-account-label {
        margin-bottom: 15pt;
    }

    .btn-login {
        color: white;
        font-size: 12pt;
        background-color: #2B2B2B;
        border-color: #2B2B2B;
        width: 100%;
        height: 30pt;
    }

    .extra-login-text {
        font-size: 14pt;
    }

    .footer-text.footer-link {
        font-size: 9pt !important;
        color: Gray;
        text-decoration: none;
    }

    .footer-text {
        text-align: right;
        font-size: 0.9em !important
    }

    .signup-form-label {
        font-weight: bold;
        font-size: 10pt;
    }

    .textbox-registration {
        font-size: 12pt;
        height: 25pt;
    }

    .text-label {
        font-size: 12pt;
    }

    .registration-title {
        font-size: 20pt;
        text-align: center;
        margin-top: 15pt;
        margin-bottom: 10pt;
    }

    .form-group {
        margin-bottom: .4rem !important;
    }

    .ShowOrderDetailsPopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: calc(100% - 60px) !important;
        background-color: white !important;
        top: 20px;
    }

        .ShowOrderDetailsPopup > .modal-content > .modal-body {
            padding: 0px !important;
            height: calc(100% - 110px);
            overflow-y: auto;
        }

        .ShowOrderDetailsPopup > .modal-content > .modal-footer {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: center;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            padding-top: 5px;
        }
}

@media (max-width: 1114px) {
    .search-result-by-hight {
        display: none;
    }

    .search-result-by-low {
        display: block;
    }

    .grid-text-size {
        font-size: 8pt !important;
    }

    .filter-content {
        width: 100%;
    }

    .gridview-content {
        width: calc(100% - 202px);
    }

    .footer-text.footer-link {
        font-size: 7pt !important;
        color: Gray;
        text-decoration: none;
    }
}

@media (max-width: 1024px) {

    .width-button-go-products {
        width: 200px !important;
    }

    .btn-quote {
        margin-top: -10px;
        width: 125px;
        color: white !important;
        background-color: var(--company-color) !important;
        border-color: var(--company-color);
        font-size: 11pt;
        height: 37px;
    }

    .btn-cant-find-prod {
        width: 272px;
        color: white !important;
        background-color: var(--company-color) !important;
        border-color: var(--company-color);
        border-radius: var(--button-border-radius);
        font-size: 11pt;
        height: 35px;
        margin-top: 30px;
    }

    .search-result-by-hight {
        display: none;
    }

    .search-result-by-low {
        display: block;
    }

    .add-item-button {
        font-size: 10pt;
        width: 120px !important;
        float: right;
        margin-right: 10px;
        margin-top: -60px;
    }

    .add-item-button-customer-item {
        font-size: 10pt;
        width: 120px !important;
        float: right;
        margin-right: 10px;
        margin-top: -85px;
    }

    .dropdown-menu.show {
        display: block;
        left: -3px !important;
    }

    .filter-content {
        width: 100%;
    }

    .ipad-gridview-content {
        width: 100%;
    }

    html {
        height: 100% !important;
        min-height: 100% !important;
    }

    .height-mobile {
        height: 100% !important;
        overflow-y: auto;
    }

    #sidebar-wrapper-favorites {
        z-index: 1000;
        position: fixed;
        right: 450px;
        width: 0;
        height: 100%;
        margin-right: -435px;
        overflow-y: auto;
        background: #d7d7d8 !important;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        /*-webkit-box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);
    box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);*/
        border: 1px solid white !important;
    }

    #sidebar-wrapper-favorites1 {
        z-index: 1000;
        position: fixed;
        right: 450px;
        width: 0;
        height: 100%;
        margin-right: -435px;
        overflow-y: auto;
        background: #d7d7d8 !important;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        /*-webkit-box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);
    box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);*/
        border: 1px solid white !important;
    }

    .filter-content {
        display: none;
        width: 0%;
    }

    .gridview-content {
        width: 100%;
    }

    .dxbs-gridview > .card .dxbs-table > thead > tr:first-child > th, .dxbs-gridview > .card .dxbs-table > thead > tr:first-child > td {
        border-top: 0;
        background-color: #2B2B2B;
        color: white;
        border-radius: 0px;
        height: 25pt;
        /*font-size: 10pt;*/
    }

    .dxbs-grid-header-container > .dxgvHSDC > .card > .dxbs-scrollbar-padding {
        width: unset !important;
    }

    .filter-by-width {
        width: 70% !important;
    }

    .filter-bar-left-side {
        flex: 0 0 40.333333%;
        max-width: 40.333333%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .filter-bar-right-side {
        flex: 0 0 59.666667%;
        max-width: 59.666667%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .filter-by-width-fav {
        width: 60% !important;
    }

    .filter-bar-left-side-fav {
        flex: 0 0 50%;
        max-width: 50%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .filter-bar-right-side-fav {
        flex: 0 0 50%;
        max-width: 50%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .white-star {
        color: white !important;
        font-size: 8pt;
        position: absolute;
        margin-left: -27px;
        margin-top: 3px;
    }

    .dimension-textbox {
        width: 100%;
    }

    .margin-mobile {
        margin-top: 15pt;
    }

    .resolution-general {
        display: none;
    }

    .resolution-tablet {
        display: block;
    }

    .resolution-mobile {
        display: none;
    }

    .dimension-footer-content {
        width: 850px;
        display: table;
        margin: 25px auto;
    }
    /************** New Code************/
    .font-size-mtr {
        font-size: 10pt;
    }

    .modal-dialog {
        max-width: 100%;
        margin: 1.75rem auto;
    }

    .online-body-width {
        margin-left: auto;
        margin-right: auto;
        display: block;
        padding: 0px 10px;
        margin-top: 0px;
    }

    html {
        height: 100% !important;
        min-height: 100% !important;
    }

    .height-mobile {
        height: 100% !important;
        overflow-y: auto;
    }

    .modal-dialog {
        position: relative;
        width: auto;
        pointer-events: none;
        margin-top: .5rem;
        margin-bottom: .5rem;
        margin-left: 0px;
        margin-right: 0px;
    }

    .mobile-control-email > div > .dxbs-disable-resize {
        resize: none;
        min-height: 120px !important;
        width: 100% !important;
        font-size: 10pt !important;
    }

    .magin-modal-email {
        margin-left: 0px;
        margin-bottom: 10px;
        margin-top: 10px;
        margin-right: 0px;
    }

        .magin-modal-email > .mobile-control-email {
            width: 100%;
        }

    .address-book-record-font-size {
        font-size: 10pt;
    }

    .margin-top-address-book {
        margin-top: 0px !important;
    }

    .dxbs-tabs {
        position: fixed;
        top: 150px;
        background-color: white;
        width: 100%;
        z-index: 100;
        height: 50px;
    }

        .dxbs-tabs > ul {
            margin-top: 14px;
        }

    .small-text-font-size {
        font-size: 8pt;
    }

    .regular-text-font-size {
        font-size: 10pt;
    }

    .medium-text-font-size {
        font-size: 12pt;
    }

    .x-large-text-font-size {
        font-size: 18pt;
    }

    .large-text-font-size {
        font-size: 16pt;
    }

    .margin-mobile-row {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .mobile-control > tr > td {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: .2rem;
        padding-bottom: .2rem;
    }

    .CheckoutDateMarginButton {
        margin-top: -6px;
    }

    .CheckoutDateWidth {
        width: 100% !important;
    }

    .CheckoutDateHeight {
        height: 30px
    }

    .CheckoutDateHeightBorder {
        height: 31px
    }

    .ShowDatePopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: 450px !important;
        background-color: white !important;
    }

    .margin-mobile-top {
        margin-top: 5px !important;
    }

    .alert-custom-popup-email-us > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 80% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
        height: 330px !important;
    }

        .alert-custom-popup-email-us > .modal-content > .modal-body {
            padding-left: 20px !important;
            padding-top: 5px !important;
            padding-right: 20px !important;
            padding-bottom: 5px !important;
            font-size: 9pt !important;
        }

    .alert-custom-popup-email-us > .modal-footer {
        height: 60px !important;
    }


    .popup-email-us-nav-menu > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
        height: 245px !important;
    }

        .popup-email-us-nav-menu > .modal-content > .modal-body {
            padding-left: 20px !important;
            padding-top: 5px !important;
            padding-right: 20px !important;
            padding-bottom: 5px !important;
            font-size: 9pt !important;
        }

    .popup-email-us-nav-menu > .modal-footer {
        height: 60px !important;
    }

    .alert-nesting-custom-popup > .modal-content > .modal-body {
        padding-left: 20px !important;
        padding-top: 5px !important;
        padding-right: 20px !important;
        padding-bottom: 5px !important;
        font-size: 9pt !important;
    }

    .alert-custom-popup > .modal-content > .modal-body {
        padding-left: 20px !important;
        padding-top: 5px !important;
        padding-right: 20px !important;
        padding-bottom: 5px !important;
        font-size: 9pt !important;
    }

    .KeepInSaveForLaterButton {
        /*width: 100px !important;*/
        background-color: silver !important;
        border: none !important;
        color: black !important;
        font-weight: 600 !important;
    }

    .alert-custom-popup > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        /* top: 73%; */
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
    }

    .alert-nesting-custom-popup > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        transform: translate(-50%);
        left: 50%;
        margin-top: 60% !important;
    }

    .error-border {
        border: 1px solid red !important;
    }

    .mobile-control > div.card {
        border: 0;
        color: rgba(0,0,0,.87);
        background: white;
        width: 100%;
        margin-bottom: 2px;
    }

    .updateItemPopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        margin-top: 0px;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: fit-content !important;
        background-color: white !important;
    }

        .updateItemPopup > .modal-content > .modal-body {
            padding: 0px !important;
            height: calc(100% - 250px);
            overflow-y: auto;
        }

        .updateItemPopup > .modal-content > .modal-footer {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: center;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            padding-top: 5px;
        }

    .addItemPopup > .modal-content > .modal-footer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: end;
        justify-content: center;
        padding: 0.5rem;
        border-top: 1px solid #dee2e6;
        padding-top: 5px;
    }

    .mobile-control > div > .dxbs-disable-resize {
        resize: none;
        min-height: 120px !important;
        width: 100% !important;
        font-size: 10pt !important;
    }

    .mobile-control > .input-group > div > .dxbs-form-control {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
    }

    .mobile-control > div > div > .dxbs-form-control {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
    }

    .modal > .dxbs-popup {
        position: relative;
        left: auto;
        top: auto;
        box-sizing: border-box;
        height: 100%;
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: white !important;
        font-weight: 500 !important;
        font-size: 9pt !important;
        background-color: #828282 !important;
        /* border-bottom: 6px solid #59626a !important; */
        border-left: none;
        border-right: none;
        border-top: none;
    }

    .nav-tabs .nav-link {
        border-top: 1px solid #dddee1;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        background-color: #f9f9f9 !important;
        color: #2b2b2b !important;
        font-size: 9pt;
    }

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        display: none;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
        padding-right: 0px !important;
    }

    .grid-text-size {
        font-size: 8pt !important;
    }


    .mobile-control > .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 10rem;
        padding: .5rem 0;
        margin: .125rem 0 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid var(--company-color) !important;
        border-radius: .25rem;
        transform: translate3d(0px, 0px, 0px) !important;
        top: 38px !important;
    }

        .mobile-control > .dropdown-menu.show {
            display: block !important;
        }

    .btn-outline-primary-menu {
        color: black !important;
        border-color: var(--company-color) !important;
    }

    .PerPage .dxbs-form-control {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
    }

    .dx-pager .pagination {
        margin-left: auto;
        margin-right: auto;
    }

    .pagination-sm .page-item:first-child .page-link {
        border-top-left-radius: 0.2rem;
        border-bottom-left-radius: .2rem;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }

    .dx-pager .pagination .page-link[data-args="PBP"], .dx-pager .pagination .page-link[data-args="PBN"] {
        font-weight: 500;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }


    .dxbl-pager button {
        cursor: default !important;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }

    .pagination-sm .page-link {
        font-size: .875rem;
        line-height: 1.5;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
        padding-top: 6px;
        text-align: center;
    }

    .pagination-sm .page-item:last-child .page-link {
        border-top-right-radius: .2rem;
        border-bottom-right-radius: .2rem;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }

    .forgot-textbox .dxbs-form-control {
        font-size: 11pt !important;
        height: 40px !important;
        background-color: white !important;
    }

    .clear-search-label-btn {
        background-color: transparent !important;
        color: red !important;
        border: 1px solid transparent !important;
        margin-top: -4px;
    }

    .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
        color: white;
        background-color: transparent !important;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom: 0px !important;
        /*border: 1px solid var(--company-color) !important;*/
    }

    .mobile-dropdown-menu {
        left: 0px !important;
        width: 100%;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border: 1px solid var(--company-color);
        border-top: 0px;
        top: -3px !important;
    }

    .menu-mobile-filter {
        color: #000 !important;
        font-size: 12pt !important;
        cursor: pointer;
        border: 1px solid var(--company-color) !important;
        width: 100% !important;
    }

    .green-check {
        display: none;
        font-size: 20pt;
        color: green;
        margin-left: -20px;
    }

    .red-check {
        display: none;
        font-size: 20pt;
        color: darkred;
        margin-left: -20px;
    }

    .dxbs-form-control {
        font-size: 10pt !important;
        height: 30pt !important;
        background-color: white !important;
    }

    .footer-text.footer-link {
        font-size: 10pt !important;
        color: Gray;
        text-decoration: none;
    }

    .validation-message {
        color: red;
        font-size: 10pt;
    }

    .dxbs-memo .form-control:not(.dxbs-disable-mh) {
        min-height: 12em;
        max-height: 224px;
        width: 100% !important;
    }

    .MemoTextboxClass {
        min-width: 316px;
    }



    .textbox-registration {
        font-size: 10pt;
        height: 35pt;
    }

    .text-label {
        font-size: 10pt;
    }

    .extra-login-text {
        font-size: 12pt;
    }

    .margin-mobile {
        margin-top: 15pt;
    }

    .resolution-general {
        display: none;
    }

    .resolution-tablet {
        display: block;
    }

    .resolution-mobile {
        display: none;
    }

    .signup-form-label {
        display: block !important;
    }

    .red-star {
        display: none !important;
    }

    .box-regular-content {
        max-width: 330px;
        display: table;
        margin: 0 auto;
    }

    .box-create-reset-password {
        max-width: 330px;
        display: table;
        margin: 0 auto;
    }

    .box-registration-content {
        max-width: 850px;
        display: table;
        margin: 0 auto;
    }

    .row-mobile {
        display: block;
    }

    .dimension-footer-content {
        width: 330px;
        display: table;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .dimension-footer-content-empty {
        width: 330px;
        display: table;
        margin: 25px auto;
    }

    .lineSummaryGrid {
        /*height: 107px !important;*/
        width: 100% !important;
    }

    .ComboAvailableSizes {
        height: 40px !important;
        width: 100%;
    }

    /* .addItemPopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 100px) !important;
        height: fit-content !important;
        background-color: white !important;
        top: 20px;
    }

        .addItemPopup > .modal-content > .modal-body {
            padding: 0px !important;
            height: calc(100% - 490px);
            overflow-y: auto;
        }*/

    .modalAddressBook > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: 350px !important;
        background-color: white !important;
    }

        .modalAddressBook > .modal-content > .modal-body {
            position: relative;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0px;
        }

    .TextboxFt {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        padding-top: 4px;
        vertical-align: middle;
        padding: .25rem .5rem;
        line-height: 1.5;
        border-radius: .2rem;
        font-weight: 400;
        color: #495057;
        margin-bottom: 2px;
        width: 100% !important;
    }

        .TextboxFt:focus {
            color: #495057;
            background-color: white;
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
        }

    .TextboxIn {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        padding-top: 4px;
        vertical-align: middle;
        padding: .25rem .5rem;
        line-height: 1.5;
        border-radius: .2rem;
        font-weight: 400;
        color: #495057;
        margin-bottom: 2px;
        width: 100% !important;
    }

        .TextboxIn:focus {
            color: #495057;
            background-color: white;
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
        }

    .ShowOrderDetailsPopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: calc(100% - 60px) !important;
        background-color: white !important;
        top: 20px;
    }

        .ShowOrderDetailsPopup > .modal-content > .modal-body {
            padding: 0px !important;
            height: calc(100% - 110px);
            overflow-y: auto;
        }

        .ShowOrderDetailsPopup > .modal-content > .modal-footer {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: center;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            padding-top: 5px;
        }
}

@media (max-width: 768px) {
    div.card > .shippingAddress {
        padding-top: 15px !important;
        height: 130px !important;
        background-color: whitesmoke !important;
        border: 1px solid rgba(0,0,0,.12);
        /*margin-bottom: 30px;*/
        /*margin-top: 30px;*/
        /*border-radius: 6px;*/
        color: rgba(0,0,0,.87);
        background: white;
        /*width: 100%;*/
        /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
    }

    .hdr__promo_ipad {
        font-weight: normal;
        background-color: var(--company-color) !important;
        color: rgb(255,255,255) !important;
        align-items: center;
        font-size: 12pt !important;
        height: 32pt !important;
    }

    .hdr__promo {
        font-weight: normal;
        background-color: var(--company-color) !important;
        color: rgb(255,255,255) !important;
        align-items: center;
        font-size: 12pt !important;
        height: 32pt !important;
    }

    .ipad-gridview-content {
        width: 100%;
    }

    .online-content {
        overflow-y: scroll;
        overflow-x: hidden;
        height: calc(100vh - 146px);
    }

    .dxbs-gridview > .card .dxbs-table > thead > tr:first-child > th, .dxbs-gridview > .card .dxbs-table > thead > tr:first-child > td {
        border-top: 0;
        background-color: #2B2B2B;
        color: white;
        border-radius: 0px;
        height: 25pt;
        font-size: 10pt;
    }

    .margin-row-ipad {
        margin-top: 3px;
    }

    .checkoutbox {
        font-size: 10pt;
        padding: 10px;
        height: 100px;
        width: 100%;
        background-color: whitesmoke;
        border-radius: 2px;
        /*border: solid silver 1px;*/
    }

    .width-button-go-products {
        width: 200px !important;
    }

    .font-size-mtr {
        font-size: 10pt;
    }

    .modal-dialog {
        max-width: 100%;
        margin: 1.75rem auto;
    }

    .online-body-width {
        margin-left: auto;
        margin-right: auto;
        display: block;
        padding: 0px 10px;
        margin-top: 0px;
    }

    html {
        height: 100% !important;
        min-height: 100% !important;
    }

    .height-mobile {
        height: 100% !important;
        overflow-y: auto;
    }

    .modal-dialog {
        position: relative;
        width: auto;
        pointer-events: none;
        margin-top: .5rem;
        margin-bottom: .5rem;
        margin-left: 0px;
        margin-right: 0px;
    }

    .mobile-control-email > div > .dxbs-disable-resize {
        resize: none;
        min-height: 80px !important;
        width: 100% !important;
        font-size: 10pt !important;
    }

    .mobile-control > div > .dxbs-disable-resize {
        resize: none;
        min-height: 80px !important;
        width: 100% !important;
        font-size: 10pt !important;
    }

    .magin-modal-email {
        margin-left: 0px;
        margin-bottom: 10px;
        margin-top: 10px;
        margin-right: 0px;
    }

        .magin-modal-email > .mobile-control-email {
            width: 100%;
        }

    .address-book-record-font-size {
        font-size: 10pt;
    }

    .margin-top-address-book {
        margin-top: 0px !important;
    }

    .dxbs-tabs {
        position: fixed;
        top: 150px;
        background-color: whitesmoke;
        width: 100%;
        z-index: 100;
        height: 50px;
    }

        .dxbs-tabs > ul {
            margin-top: 14px;
        }




    .margin-mobile-row {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .mobile-control > tr > td {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: .2rem;
        padding-bottom: .2rem;
    }

    .CheckoutDateMarginButton {
        margin-top: -6px;
    }

    .CheckoutDateWidth {
        width: 100% !important;
    }

    .CheckoutDateHeight {
        height: 30px
    }

    .CheckoutDateHeightBorder {
        height: 31px
    }

    .ShowDatePopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 280px) !important;
        background-color: white !important;
    }

    .margin-mobile-top {
        margin-top: 5px !important;
    }

    .alert-custom-popup-email-us > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
        height: 330px !important;
    }

        .alert-custom-popup-email-us > .modal-content > .modal-body {
            padding-left: 20px !important;
            padding-top: 5px !important;
            padding-right: 20px !important;
            padding-bottom: 5px !important;
            font-size: 9pt !important;
        }

    .alert-custom-popup-email-us > .modal-footer {
        height: 60px !important;
    }


    .popup-email-us-nav-menu > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
        height: 245px !important;
    }

        .popup-email-us-nav-menu > .modal-content > .modal-body {
            padding-left: 20px !important;
            padding-top: 5px !important;
            padding-right: 20px !important;
            padding-bottom: 5px !important;
            font-size: 9pt !important;
        }

    .popup-email-us-nav-menu > .modal-footer {
        height: 60px !important;
    }

    .alert-nesting-custom-popup > .modal-content > .modal-body {
        padding-left: 20px !important;
        padding-top: 5px !important;
        padding-right: 20px !important;
        padding-bottom: 5px !important;
        font-size: 9pt !important;
    }

    .alert-custom-popup > .modal-content > .modal-body {
        padding-left: 20px !important;
        padding-top: 5px !important;
        padding-right: 20px !important;
        padding-bottom: 5px !important;
        font-size: 9pt !important;
    }

    .KeepInSaveForLaterButton {
        /*width: 100px !important;*/
        background-color: silver !important;
        border: none !important;
        color: black !important;
        font-weight: 600 !important;
    }

    .alert-custom-popup > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        /* top: 73%; */
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
    }

    .alert-nesting-custom-popup > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        transform: translate(-50%);
        left: 50%;
        margin-top: 50% !important;
    }

    .error-border {
        border: 1px solid red !important;
    }

    .mobile-control > div.card {
        border: 0;
        color: rgba(0,0,0,.87);
        background: white;
        width: 100%;
        margin-bottom: 2px;
    }

    .mobile-control > .input-group > div > .dxbs-form-control {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
    }

    .mobile-control > div > div > .dxbs-form-control {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
    }

    .modal > .dxbs-popup {
        position: relative;
        left: auto;
        top: auto;
        box-sizing: border-box;
        height: 100%;
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: white !important;
        font-weight: 500 !important;
        font-size: 9pt !important;
        background-color: #828282 !important;
        /* border-bottom: 6px solid #59626a !important; */
        border-left: none;
        border-right: none;
        border-top: none;
    }

    .nav-tabs .nav-link {
        border-top: 1px solid #dddee1;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        background-color: #f9f9f9 !important;
        color: #2b2b2b !important;
        font-size: 9pt;
    }

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        display: none;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
        padding-right: 0px !important;
    }

    .grid-text-size {
        font-size: 8pt !important;
    }


    .mobile-control > .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 10rem;
        padding: .5rem 0;
        margin: .125rem 0 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid var(--company-color) !important;
        border-radius: .25rem;
        transform: translate3d(0px, 0px, 0px) !important;
        top: 38px !important;
    }

        .mobile-control > .dropdown-menu.show {
            display: block !important;
        }

    .btn-outline-primary-menu {
        color: black !important;
        border-color: var(--company-color) !important;
    }

    .PerPage .dxbs-form-control {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
    }

    .dx-pager .pagination {
        margin-left: auto;
        margin-right: auto;
    }

    .pagination-sm .page-item:first-child .page-link {
        border-top-left-radius: 0.2rem;
        border-bottom-left-radius: .2rem;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }

    .dx-pager .pagination .page-link[data-args="PBP"], .dx-pager .pagination .page-link[data-args="PBN"] {
        font-weight: 500;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }


    .dxbl-pager button {
        cursor: default !important;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }

    .pagination-sm .page-link {
        font-size: .875rem;
        line-height: 1.5;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
        padding-top: 6px;
        text-align: center;
    }

    .pagination-sm .page-item:last-child .page-link {
        border-top-right-radius: .2rem;
        border-bottom-right-radius: .2rem;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }

    .forgot-textbox .dxbs-form-control {
        font-size: 11pt !important;
        height: 40px !important;
        background-color: white !important;
    }

    .clear-search-label-btn {
        background-color: transparent !important;
        color: red !important;
        border: 1px solid transparent !important;
        margin-top: -4px;
    }

    .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
        color: white;
        background-color: transparent !important;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom: 0px !important;
        /*border: 1px solid var(--company-color) !important;*/
    }

    .mobile-dropdown-menu {
        left: 0px !important;
        width: 100%;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border: 1px solid var(--company-color);
        border-top: 0px;
        top: -3px !important;
    }

    .menu-mobile-filter {
        color: #000 !important;
        font-size: 12pt !important;
        cursor: pointer;
        border: 1px solid var(--company-color) !important;
        width: 100% !important;
    }

    .green-check {
        display: none;
        font-size: 20pt;
        color: green;
        margin-left: -20px;
    }

    .red-check {
        display: none;
        font-size: 20pt;
        color: darkred;
        margin-left: -20px;
    }

    .dxbs-form-control {
        font-size: 10pt !important;
        height: 30pt !important;
        background-color: white !important;
    }

    .footer-text.footer-link {
        font-size: 10pt !important;
        color: Gray;
        text-decoration: none;
    }

    .validation-message {
        color: red;
        font-size: 10pt;
    }

    .dxbs-memo .form-control:not(.dxbs-disable-mh) {
        min-height: 12em;
    }

    .MemoTextboxClass {
        min-width: 316px;
    }



    .textbox-registration {
        font-size: 10pt;
        height: 35pt;
    }

    .text-label {
        font-size: 10pt;
    }

    .extra-login-text {
        font-size: 12pt;
    }

    .margin-mobile {
        margin-top: 15pt;
    }

    .resolution-general {
        display: none;
    }

    .resolution-tablet {
        display: none;
    }

    .resolution-mobile {
        display: block;
    }

    .signup-form-label {
        display: block !important;
    }

    .red-star {
        display: none !important;
    }

    .box-regular-content {
        max-width: 330px;
        display: table;
        margin: 0 auto;
    }

    .box-create-reset-password {
        max-width: 330px;
        display: table;
        margin: 0 auto;
    }

    .box-registration-content {
        max-width: 330px;
        display: table;
        margin: 0 auto;
    }

    .row-mobile {
        display: block;
    }

    .dimension-footer-content {
        width: 330px;
        display: table;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .dimension-footer-content-empty {
        width: 330px;
        display: table;
        margin: 25px auto;
    }

    .lineSummaryGrid {
        /*height: 107px !important;*/
        width: 100% !important;
    }

    .ComboAvailableSizes {
        height: 40px !important;
        width: 100%;
    }

    .modalAddressBook > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: 350px !important;
        background-color: white !important;
    }

        .modalAddressBook > .modal-content > .modal-body {
            position: relative;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0px;
        }

    .TextboxFt {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        padding-top: 4px;
        vertical-align: middle;
        padding: .25rem .5rem;
        line-height: 1.5;
        border-radius: .2rem;
        font-weight: 400;
        color: #495057;
        margin-bottom: 2px;
        width: 100% !important;
    }

        .TextboxFt:focus {
            color: #495057;
            background-color: white;
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
        }

    .TextboxIn {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        padding-top: 4px;
        vertical-align: middle;
        padding: .25rem .5rem;
        line-height: 1.5;
        border-radius: .2rem;
        font-weight: 400;
        color: #495057;
        margin-bottom: 2px;
        width: 100% !important;
    }

        .TextboxIn:focus {
            color: #495057;
            background-color: white;
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
        }

    .small-text-font-size {
        font-size: 8pt;
    }

    .regular-text-font-size {
        font-size: 10pt;
    }

    .medium-text-font-size {
        font-size: 12pt;
    }

    .large-text-font-size {
        font-size: 14pt;
    }

    .x-large-text-font-size {
        font-size: 16pt;
    }


    /****** Old Code********/
    .footer-text.footer-link {
        font-size: 11pt !important;
        color: Gray;
        text-decoration: none;
    }

    .online-body-width {
        margin-left: auto;
        margin-right: auto;
        display: block;
        padding: 0px 10px;
        margin-top: 0px;
    }

    .box-regular-content {
        max-width: 400px;
        display: table;
        margin: 0 auto;
    }

    html {
        height: 100% !important;
        min-height: 100% !important;
    }

    .height-mobile {
        height: 100% !important;
        overflow-y: auto;
    }

    .margin-mobile {
        margin-top: 15pt;
    }

    .resolution-general {
        display: none;
    }

    .box-registration-content {
        max-width: 715px;
        display: table;
        margin: 0 auto;
    }

    .resolution-tablet {
        display: block;
    }

    .resolution-mobile {
        display: none;
    }

    .dimension-footer-content {
        width: 707px;
        display: table;
        margin: 25px auto;
    }

    .filter-bar-left-side {
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .filter-bar-right-side {
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (max-width: 767px) {
    .btn-quote {
        width: 85px;
        color: white !important;
        background-color: var(--company-color) !important;
        border-color: var(--company-color);
        border-radius: var(--button-border-radius);
        font-size: 8pt;
        height: 31px;
        margin-top: -13px;
        position: absolute;
        margin-top: -24px;
    }

    .btn-cant-find-prod {
        width: 251px;
        color: white !important;
        background-color: var(--company-color) !important;
        border-color: var(--company-color);
        border-radius: var(--button-border-radius);
        font-size: 10pt;
        height: 32px;
        margin-top: 0px;
    }

    .updateItemPopupMobile > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        margin-top: 0px;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: fit-content !important;
        background-color: white !important;
    }

    .addItemPopupMobile > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: fit-content !important;
        background-color: white !important;
        top: 20px;
    }

    .dropdown-menu.show {
        display: block;
        left: -3px !important;
    }

    .hdr__promo {
        font-weight: normal;
        background-color: var(--company-color) !important;
        color: rgb(255,255,255) !important;
        align-items: center;
        font-size: 12pt !important;
        height: 45pt !important;
    }

    div.card > .shippingAddress {
        height: 140px !important;
        background-color: whitesmoke !important;
        border: 1px solid rgba(0,0,0,.12);
        /*margin-bottom: 30px;*/
        /*margin-top: 30px;*/
        /*border-radius: 6px;*/
        color: rgba(0,0,0,.87);
        background: white;
        /*width: 100%;*/
        /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
    }

    .mobile-aligment-order-confirmation {
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .checkoutbox {
        font-size: 10pt;
        padding: 10px;
        height: 118px;
        width: 100%;
        background-color: whitesmoke;
        border-radius: 2px;
        /*border: solid silver 1px;*/
    }

    .margin-top-confirmation {
        font-size: 30pt;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 0px;
        height: 20px;
    }

    .width-button-go-products {
        width: 95% !important;
    }

    .online-body-width {
        margin-left: auto;
        margin-right: auto;
        display: block;
        padding: 0px 10px;
        margin-top: 0px;
    }

    html {
        height: 100% !important;
        min-height: 100% !important;
    }

    .height-mobile {
        height: 100% !important;
        overflow-y: auto;
    }

    .modal-dialog {
        position: relative;
        width: auto;
        pointer-events: none;
        margin-top: .5rem;
        margin-bottom: .5rem;
        margin-left: 0px;
        margin-right: 0px;
    }

    .mobile-control-email > div > .dxbs-disable-resize {
        resize: none;
        min-height: 120px !important;
        width: 100% !important;
        font-size: 10pt !important;
    }

    .magin-modal-email {
        margin-left: 0px;
        margin-bottom: 10px;
        margin-top: 10px;
        margin-right: 0px;
    }

        .magin-modal-email > .mobile-control-email {
            width: 100%;
        }

    .address-book-record-font-size {
        font-size: 10pt;
    }

    .margin-top-address-book {
        margin-top: 0px !important;
        width: 100% !important;
    }

    .dxbs-tabs-landing-page {
        position: fixed;
        top: 172px;
        background-color: whitesmoke;
        width: 100%;
        z-index: 100;
        height: 50px;
    }

    .dxbs-tabs {
        position: fixed;
        top: 150px;
        background-color: whitesmoke;
        width: 100%;
        z-index: 100;
        height: 50px;
    }

        .dxbs-tabs > ul {
            margin-top: 14px;
        }


    .small-text-font-size {
        font-size: 8pt;
    }

    .regular-text-font-size {
        font-size: 10pt;
    }

    .medium-text-font-size {
        font-size: 12pt;
    }

    .x-large-text-font-size {
        font-size: 18pt;
    }

    .large-text-font-size {
        font-size: 16pt;
    }

    .margin-mobile-row {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .mobile-control > tr > td {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: .2rem;
        padding-bottom: .2rem;
    }

    .CheckoutDateMarginButton {
        margin-top: -6px;
    }

    .CheckoutDateWidth {
        width: 100% !important;
    }

    .CheckoutDateHeight {
        height: 30px
    }

    .CheckoutDateHeightBorder {
        height: 31px
    }

    .ShowDatePopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        background-color: white !important;
    }

    .margin-mobile-top {
        margin-top: 5px !important;
    }

    .alert-custom-popup-email-us > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
        height: 330px !important;
    }

        .alert-custom-popup-email-us > .modal-content > .modal-body {
            padding-left: 20px !important;
            padding-top: 5px !important;
            padding-right: 20px !important;
            padding-bottom: 5px !important;
            font-size: 9pt !important;
        }

    .alert-custom-popup-email-us > .modal-footer {
        height: 60px !important;
    }


    .popup-email-us-nav-menu > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
        height: 245px !important;
    }

        .popup-email-us-nav-menu > .modal-content > .modal-body {
            padding-left: 20px !important;
            padding-top: 5px !important;
            padding-right: 20px !important;
            padding-bottom: 5px !important;
            font-size: 9pt !important;
        }

    .popup-email-us-nav-menu > .modal-footer {
        height: 60px !important;
    }

    .alert-nesting-custom-popup > .modal-content > .modal-body {
        padding-left: 20px !important;
        padding-top: 5px !important;
        padding-right: 20px !important;
        padding-bottom: 5px !important;
        font-size: 9pt !important;
    }

    .alert-custom-popup > .modal-content > .modal-body {
        padding-left: 20px !important;
        padding-top: 5px !important;
        padding-right: 20px !important;
        padding-bottom: 5px !important;
        font-size: 9pt !important;
    }

    .KeepInSaveForLaterButton {
        /*width: 100px !important;*/
        background-color: silver !important;
        border: none !important;
        color: black !important;
        font-weight: 600 !important;
        font-size: 10pt !important;
    }

    .AlertNoButton {
        width: 100px !important;
        background-color: silver !important;
        border: none !important;
        color: white !important;
        font-weight: 600 !important;
        font-size: 10pt;
    }

    .alert-custom-popup > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        /* top: 73%; */
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
    }

    .alert-nesting-custom-popup > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        transform: translate(-50%);
        left: 50%;
        margin-top: 60% !important;
    }

    .error-border {
        border: 1px solid red !important;
    }

    .mobile-control > div.card {
        border: 0;
        color: rgba(0,0,0,.87);
        background: white;
        width: 100%;
        margin-bottom: 2px;
    }

    .mobile-control > div > .dxbs-disable-resize {
        resize: none;
        min-height: 60px !important;
        width: 100% !important;
        font-size: 10pt !important;
    }

    .mobile-control > .input-group > div > .dxbs-form-control {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
    }

    .mobile-control > div > div > .dxbs-form-control {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
    }

    .modal > .dxbs-popup {
        position: relative;
        left: auto;
        top: auto;
        box-sizing: border-box;
        height: 100%;
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: white !important;
        font-weight: 500 !important;
        font-size: 9pt !important;
        background-color: #828282 !important;
        /* border-bottom: 6px solid #59626a !important; */
        border-left: none;
        border-right: none;
        border-top: none;
    }

    .nav-tabs .nav-link {
        border-top: 1px solid #dddee1;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        background-color: #f9f9f9 !important;
        color: #2b2b2b !important;
        font-size: 9pt;
    }

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        display: none;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
        padding-right: 0px !important;
    }

    .grid-text-size {
        font-size: 8pt !important;
    }


    .mobile-control > .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 10rem;
        padding: .5rem 0;
        margin: .125rem 0 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid var(--company-color) !important;
        border-radius: .25rem;
        transform: translate3d(0px, 0px, 0px) !important;
        top: 38px !important;
    }

        .mobile-control > .dropdown-menu.show {
            display: block !important;
        }

    .btn-outline-primary-menu {
        color: black !important;
        border-color: var(--company-color) !important;
    }

    .PerPage .dxbs-form-control {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
    }

    .dx-pager .pagination {
        margin-left: auto;
        margin-right: auto;
    }

    .pagination-sm .page-item:first-child .page-link {
        border-top-left-radius: 0.2rem;
        border-bottom-left-radius: .2rem;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }

    .dx-pager .pagination .page-link[data-args="PBP"], .dx-pager .pagination .page-link[data-args="PBN"] {
        font-weight: 500;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }


    .dxbl-pager .pagination > li.active > a {
        cursor: default !important;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }

    .pagination-sm .page-link {
        font-size: .875rem;
        line-height: 1.5;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
        padding-top: 6px;
        text-align: center;
    }

    .pagination-sm .page-item:last-child .page-link {
        border-top-right-radius: .2rem;
        border-bottom-right-radius: .2rem;
        height: 30px;
        width: 40px;
        border-radius: var(--button-border-radius);
        margin-left: 2px;
        margin-right: 2px;
    }

    .forgot-textbox .dxbs-form-control {
        font-size: 11pt !important;
        height: 40px !important;
        background-color: white !important;
    }

    .clear-search-label-btn {
        background-color: transparent !important;
        color: red !important;
        border: 1px solid transparent !important;
        margin-top: -4px;
    }

    .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
        color: white;
        background-color: transparent !important;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom: 0px !important;
        /*border: 1px solid var(--company-color) !important;*/
    }

    .mobile-dropdown-menu {
        left: 0px !important;
        width: 100%;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border: 1px solid var(--company-color);
        border-top: 0px;
        top: -3px !important;
    }

    .menu-mobile-filter {
        color: #000 !important;
        font-size: 12pt !important;
        cursor: pointer;
        border: 1px solid var(--company-color) !important;
        width: 100% !important;
    }

    .green-check {
        display: none;
        font-size: 20pt;
        color: green;
        margin-left: -20px;
    }

    .red-check {
        display: none;
        font-size: 20pt;
        color: darkred;
        margin-left: -20px;
    }

    .dxbs-form-control {
        font-size: 10pt !important;
        height: 30pt !important;
        background-color: white !important;
    }

    .footer-text.footer-link {
        font-size: 10pt !important;
        color: Gray;
        text-decoration: none;
    }

    .validation-message {
        color: red;
        font-size: 10pt;
    }

    .dxbs-memo .form-control:not(.dxbs-disable-mh) {
        min-height: 6em;
    }

    .MemoTextboxClass {
        min-width: 316px;
    }



    .textbox-registration {
        font-size: 10pt;
        height: 35pt;
    }

    .text-label {
        font-size: 10pt;
    }

    .extra-login-text {
        font-size: 12pt;
    }

    .margin-mobile {
        margin-top: 15pt;
    }

    .resolution-general {
        display: none;
    }

    .resolution-tablet {
        display: none;
    }

    .resolution-mobile {
        display: block;
    }

    .signup-form-label {
        display: none !important;
    }

    .red-star {
        display: none !important;
    }

    .box-regular-content {
        max-width: 330px;
        display: table;
        margin: 0 auto;
    }

    .box-create-reset-password {
        max-width: 330px;
        display: table;
        margin: 0 auto;
    }

    .box-registration-content {
        max-width: 330px;
        display: table;
        margin: 0 auto;
    }

    .row-mobile {
        display: block;
    }

    .dimension-footer-content {
        width: 330px;
        display: table;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .dimension-footer-content-empty {
        width: 330px;
        display: table;
        margin: 25px auto;
    }

    .lineSummaryGrid {
        /*height: 107px !important;*/
        width: 100% !important;
    }

    .ComboAvailableSizes {
        height: 40px !important;
        width: 100%;
    }

    .modalAddressBook > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: 350px !important;
        background-color: white !important;
    }

        .modalAddressBook > .modal-content > .modal-body {
            position: relative;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0px;
        }

    .TextboxFt {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        padding-top: 4px;
        vertical-align: middle;
        padding: .25rem .5rem;
        line-height: 1.5;
        border-radius: .2rem;
        font-weight: 400;
        color: #495057;
        margin-bottom: 2px;
        width: 100% !important;
    }

        .TextboxFt:focus {
            color: #495057;
            background-color: white;
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
        }

    .TextboxIn {
        font-size: 10pt !important;
        height: 22pt !important;
        background-color: white !important;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        padding-top: 4px;
        vertical-align: middle;
        padding: .25rem .5rem;
        line-height: 1.5;
        border-radius: .2rem;
        font-weight: 400;
        color: #495057;
        margin-bottom: 2px;
        width: 100% !important;
    }

        .TextboxIn:focus {
            color: #495057;
            background-color: white;
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
        }
}

@media (max-width: 450px) {


    .dxbs-tabs-landing-page {
        position: fixed;
        top: 172px !important;
        background-color: transparent !important;
        width: 100%;
        z-index: 100;
        height: 50px;
    }

    .online-content {
        overflow-y: scroll;
        overflow-x: hidden;
        height: calc(100vh - 214px);
        margin-top: 54px;
    }

    .small-text-font-size {
        font-size: 7pt;
    }

    .regular-text-font-size {
        font-size: 9pt;
    }

    .medium-text-font-size {
        font-size: 11pt;
    }

    .x-large-text-font-size {
        font-size: 16pt;
    }

    .large-text-font-size {
        font-size: 14pt;
    }
}

.inventoryDdl > .form-control[readonly] {
    background-color: white !important;
}

.oo-eye {
    font-size: 1.2em;
    width: 1em;
    height: 1em;
}

svg:hover {
    fill: blue;
}

/** Cookie Consent - Start */

/* Visibility for the Cookie Consent banner DIV */
.visibilityDiv {
    animation: showBlock 2000ms 1s forwards;
    opacity: 0;
}

.topRight30percent {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30%;
    z-index: 10;
}

.topCenter30percent {
    position: absolute;
    top: 5px;
    left: 35%;
    width: 30%;
    z-index: 10;
}

/* Makes the banner fades in when displayed */
@keyframes showBlock {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



/** Cookie Consent - End */
.documentLink {
    color: black;
    text-decoration: underline;
    line-height: 1.7em;
}

.flyoutBody {
    margin: 5px;
    background-color: transparent;
    border: 1px solid silver;
}


.historyLables {
    font-size: 10pt;
    padding-top: 4px;
    width: auto;
    text-align: right;
}

.historyControl {
    margin-bottom: 10px !important;
    height: 30px !important;
    vertical-align: bottom;
}

.dateStyle {
    width: 120px !important;
}

.gridHeaderCenterAlign {
    text-align: center;
    width: 100%;
}

.gridHeaderRightAlign {
    text-align: right;
    margin-right: 0px !important;
    width: 100%;
}

.gridHeaderLeftAlign {
    text-align: left;
    margin-left: 0px !important;
    width: 100%;
}

.overflowText {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.dxbl-grid .dxbl-grid-detail-cell {
    padding: 0.4rem 1.5rem;
}

.table-striped tbody tr.alt-item-tr:nth-of-type(odd) {
    background-color: white !important
}

.fa-shipping-fast {
    margin: 4px;
    margin-right: 10px;
    color: black;
}


.gridStyle {
    font-size: 12pt !important;
    font-family: 'Segoe UI VSS (Regular)','Segoe UI','Trebuchet MS' !important;
}

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

.text-align-right {
    text-align: right;
    float: right;
}

.font-size-10 {
    font-size: 10pt;
}

.margin-bottom-0 {
    margin-bottom: 0px !important;
}

.font-size-12 {
    font-size: 12pt !important
}


.search-result-by-hight {
    display: block;
}

.search-result-by-low {
    display: none;
}

.need-help {
    color: var(--company-color) !important;
    font-size: 20pt !important
}

.favorite-icon-style {
    color: #ffffff !important;
    border: 0px !important;
    font-size: 14pt !important;
    cursor: pointer;
}

.branding-font-color {
    color: var(--company-color) !important;
}

.branding-bg-color {
    background-color: var(--company-color) !important;
}

.branding-font-color-white {
    color: white !important;
}

.line-status-color {
    color: blue !important;
}

.carousel-indicators li {
    width: 37pt !important;
    height: 10pt !important;
    background-color: rgb(255,255,255) !important
}
/*Nav Menu Bar Hover dropdown*/
.navbar-nav li:hover .dropdown-menu {
    display: block;
    width: 300px;
}
/*Loading Spinner*/
.spinner {
    border: 16px solid #d7d7d8 !important;
    border-top: 16px solid var(--company-color) !important;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: 1000;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}
/*End Loading Spinner*/
.online-content {
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100vh - 130px);
}

.scroll-x-hidden {
    overflow-x: hidden;
    overflow-y: hidden;
}

.scroll-y-hidden {
    overflow-x: hidden;
    overflow-y: hidden;
}

.row-scroll, .col {
    overflow-x: scroll;
    overflow-y: scroll;
}

html, body {
    font-size: 12pt !important;
    font-weight: normal !important;
    color: black !important;
    padding-right: 0px !important;
}

h1 {
    font-size: 2.0rem !important;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            text-overflow: ellipsis;
        }

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #d7d7d7; /*font-color-navbar*/
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: white;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: white;
            }

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox], [type=radio]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

/*@media (min-width: 768px) {*/

app {
    flex-direction: row;
}

.sidebar {
    width: 250px;
    height: 100vh;
    position: sticky;
    top: 0;
}

.main .top-row {
    position: sticky;
    top: 0;
}

.main > div {
}

.navbar-toggler {
    display: none;
}

.sidebar .collapse {
    /* Never collapse the sidebar for wide screens */
    display: block;
}
/**Header Styles*/
.header-promotion-row-div {
    margin-top: 4pt;
}

.hdr__promo {
    font-weight: normal;
    background-color: var(--company-color) !important;
    color: rgb(255,255,255) !important;
    align-items: center;
    font-size: 12pt !important;
    height: 25pt !important
}

.hdr_promo_icon {
    margin-top: 0px;
    width: 30px;
    padding-right: 5px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding: 0px !important;
    color: rgb(255,255,255) !important;
}

/*.hdr_promo_icon:hover {
        color: var(--company-color) !important;
    }*/

.hdr_menu {
    padding-right: 0px !important;
    padding-left: 0px !important;
    background-color: white !important;
}

hdr_menu_right_align {
    margin-left: 230px;
}

.hdr_titlefont {
    font-size: 15pt !important;
    color: black !important;
    font-weight: normal;
    position: relative;
    /*text-transform: uppercase;*/
}

    .hdr_titlefont:hover {
        color: black !important;
    }

.hdr_shop_link {
    font-size: 14pt !important;
    color: var(--company-color) !important;
    font-weight: bold;
    position: relative;
    text-decoration: underline;
    margin-top: 15pt;
}

    .hdr_shop_link:hover {
        font-size: 14pt !important;
        color: var(--company-color) !important;
        font-weight: bold;
        position: relative;
        text-decoration: underline;
        margin-top: 15pt;
    }




.search-bar {
    background-color: rgb(235, 235, 235) !important;
    /*padding-bottom: 20px;*/
}

.order-history-search-btn {
    background-color: transparent !important;
    color: black !important;
    border: 1px solid silver !important;
    height: 30px;
    min-width: 100px;
    line-height: 0.009em;
}

    .order-history-search-btn:hover {
        background-color: transparent !important;
        color: black !important;
        border: 1px solid silver !important;
        height: 30px;
        line-height: 0.009em;
    }

.order-history-filter-btn {
    background-color: transparent !important;
    color: black !important;
    border: 1px solid silver !important;
    height: 30px;
    line-height: 0.009em;
    min-width: 100px;
}

    .order-history-filter-btn:hover {
        background-color: transparent !important;
        color: black !important;
        border: 1px solid silver !important;
        height: 30px;
        line-height: 0.009em;
    }

.search-bar-inside-btn {
    background-color: transparent !important;
    color: black !important;
    border: 1px solid transparent !important;
}

    .search-bar-inside-btn:hover {
        background-color: transparent !important;
        color: black !important;
        border: 1px solid transparent !important;
    }

.search-bar-bottom-promo {
    text-align: center;
    font-weight: 600;
    color: white;
    margin-top: 10px;
    width: 100%;
}

.btnfast--tertiary-small {
    padding: 0.4375rem 0.625rem 0.3125rem 0.75rem;
}

/*.btnfast--tertiary {
    background: #d7d7d8 !important;
    border-color: white !important;
}*/
.badge-danger-cart {
    background-color: var(--company-color) !important;
    /*color: rgb(255,255,255) !important;
    
    font-size: 11pt !important;
    width: 34pt;
    height: 15pt;*/
}

    .badge-danger-cart:hover {
        color: white !important;
        background-color: rgb(43,43,43) !important;
        font-size: 11pt !important;
        font-weight: bold !important;
    }

.badge-danger-oos {
    color: rgb(43,43,43) !important;
    background-color: rgb(255,255,255) !important;
    font-size: 11pt !important;
    width: 30pt;
    height: 15pt;
    padding-top: 3px !important;
}

    .badge-danger-oos:hover {
        color: rgb(255,255,255) !important;
        background-color: rgb(43,43,43) !important;
        font-size: 11pt !important;
        font-weight: bold !important;
    }

.btnfast--arrow-blue, .btnfast--arrow-yellow, .btnfast--arrow-white, .btnfast--plus-blue {
    padding: 0.4375rem 0.625rem 0.3125rem 1rem;
}

.btnfast {
    background: transparent;
    border: 1px solid white;
    /*border-radius: 2.71875rem;*/
    color: black !important;
    cursor: pointer;
    display: inline-block;
    /*font-family: "Montserrat", sans-serif;*/
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25rem;
    /*padding: 0.5625rem 1rem 0.5rem;*/
    text-transform: uppercase;
    text-align: center;
    -webkit-transition: font-size 400ms ease-in-out, padding 400ms ease-in-out, background 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;
    transition: font-size 400ms ease-in-out, padding 400ms ease-in-out, background 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;
}

    .btnfast:hover {
        color: var(--company-color) !important;
    }

.menu-subitem {
    color: black !important;
}

    .menu-subitem:hover {
        color: var(--company-color) !important;
        /*font-weight: bold !important;*/
    }

.menu-subitem-img-hw {
    height: 25px !important;
    width: 35px !important;
    padding-right: 5px !important;
}

#reset-btn-advanced-search {
    font-size: 10pt !important;
    margin-left: 10px;
    width: 120px;
}

.footer-oos {
    /*border-top: 1px solid darkgrey;*/
    font-weight: normal;
    background-color: rgb(235, 235, 235) !important;
    color: black !important;
}

.footer-oos-table {
    width: 100%;
    height: 250pt;
}

.footer-copy-right {
    color: Gray;
    margin-bottom: 5px !important;
    /*margin-left: 30px !important;
    text-transform: uppercase;*/
    font-size: 12pt !important
}

.footer-text-links-wrapper {
    margin-bottom: 5px !important;
    /*margin-right: 170px !important;
    float: right !important;*/
}



.footer-link-separator {
    display: inline;
    margin-right: 5px;
    margin-left: 5px;
}

.home-chevron {
    color: black !important;
}

    .home-chevron:hover {
        /*color: var(--company-color) !important*/
    }

.hover01 img {
    height: 185px !important;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hover01:hover img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.home-product-title {
    color: black !important;
    font-weight: bold;
}

    .home-product-title:hover {
        /*color: var(--company-color) !important;*/
        font-weight: bold;
    }

.nav-link-oos {
    color: rgb(43,43,43) !important;
    /*font-weight: 600 !important;*/
    font-size: 1.2em !important;
}

    .nav-link-oos:hover {
        color: var(--company-color) !important;
        /*font-weight: 600 !important;*/
        font-size: 1.2em !important;
        /*text-decoration: underline;*/
    }

.our-products-title {
    padding-left: 15px;
    font-size: 2.7em !important;
}

.check-icon-oos {
    font-size: 15px;
    color: forestgreen;
}

.product-item-card-style {
    border-radius: 4px !important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !important;
}

.tile-view-item-card-font {
    font-size: 10pt !important;
}

.tile-view-fav-icon {
    font-size: 15px !important;
    margin-top: -5px !important;
    margin-left: 15px !important;
}

.email-for-quote-link {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: var(--company-color) !important;
    color: var(--company-color) !important;
    font-size: 1.1em !important;
}
/*}*/
/***************************************************************************** Slide Start *******************************************************************************************************/
.btn-link-continue-shopping {
    color: #fff !important;
    font-weight: 700;
    /*font-family: "Montserrat", sans-serif;*/
    font-size: 0.875rem;
    cursor: pointer;
}

.cart-header {
    /*display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;*/
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5625rem 0 0.5625rem 1.25rem;
    position: relative;
    min-height: 4rem;
}

.cart-title {
    font-size: 18pt;
    text-transform: none;
    margin: 0;
    font-weight: normal;
}

.bag__title {
    position: relative;
}

.shopping-cart-body-fav {
    background-color: #d7d7d8 !important;
}

.bag-footer-cart-details {
    width: 100%;
    z-index: 3;
    background-color: #192931 !important;
    padding: 1.25rem 2.5rem;
    /*border-top: 1px solid white !important;*/
}

.bag-header-cart-details {
    width: 100%;
    z-index: 3;
    background-color: #263c46 !important;
    padding: 1.25rem 2.5rem;
    border-bottom: 1px solid #fff;
    /*border-top: 1px solid white !important;*/
}

.bag-information-cart-details {
    width: 100%;
    z-index: 3;
    background-color: #263c46 !important;
    padding: 1.25rem 2.5rem;
    /*border-top: 1px solid white !important;*/
}

.bag-continue-shopping-bottom {
    bottom: 0;
    display: block !important;
    position: absolute;
    width: 100%;
    /*height: 72px;*/
    z-index: 3;
    background-color: #222 !important;
    padding: 25px;
    border-top: 1px solid white !important
}

.bag-continue-shopping-bottom-total {
    bottom: 85px;
    display: block !important;
    position: absolute;
    width: 100%;
    height: 50px;
    z-index: 3;
    background-color: #6c757d;
    padding: 12.5px;
    border-top: 2px solid white !important;
}

.bag-continue-shopping-bottom-later {
    bottom: 0px;
    display: block !important;
    position: absolute;
    width: 100%;
    height: 20px;
    z-index: 3;
    background-color: whitesmoke !important;
}

.bag-continue-shopping-bottom-fixed {
    position: fixed !important;
}


/*.bag-content {   
    height: calc(100vh - 146px);
    overflow-y: scroll;
    padding: 20px;
}*/
.bag-content {
    height: calc(100vh - 80px);
    overflow-y: scroll;
    padding: 20px;
}

.is-bag-exposed .bag--mini {
    /*-webkit-box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);
    box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);
    right: 0;*/
    /*-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);*/
}

.cart-close {
    font-size: 18px;
    position: absolute;
    right: 0;
    width: 3.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    margin-top: -5px;
}

.cart-close-slide {
    font-size: 24px;
    position: absolute;
    width: 3.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    margin-top: -38px;
    color: #fff !important;
    z-index: 1000;
    margin-left: 381px;
}

.btn-icon {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}


#wrapper {
    padding-right: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    #wrapper.toggled {
        padding-right: 450px;
    }

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 450px;
    width: 0;
    height: 100%;
    margin-right: -450px;
    overflow-y: auto;
    background: #ffffff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background-color: whitesmoke !important;
}

#wrapper.toggled #sidebar-wrapper {
    width: 450px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-left: -450px;
}

.wrapper-width {
    width: 420px !important;
}

.wrapper-width-total {
    width: 420px !important;
}



/*-------------------------------------------------------------------------------------------------*/
#wrapper-favorites {
    padding-right: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    #wrapper-favorites.toggled {
        padding-right: 850px;
    }

#sidebar-wrapper-favorites {
    z-index: 1000;
    position: fixed;
    right: 850px;
    width: 0;
    height: 145%;
    margin-right: -850px;
    overflow-y: auto;
    background: rgb(249,249,249) !important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    /*-webkit-box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);
    box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);*/
    border-left: 1px solid silver !important;
}

#wrapper-favorites.toggled #sidebar-wrapper-favorites {
    width: 863px;
}

#page-content-wrapper-favorites {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper-favorites.toggled #page-content-wrapper-favorites {
    position: absolute;
    margin-left: -850px;
}

#wrapper-favorites1 {
    padding-right: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    #wrapper-favorites1.toggled {
        padding-right: 425px;
    }

#sidebar-wrapper-favorites1 {
    z-index: 1000;
    position: fixed;
    right: 425px;
    width: 0;
    height: 105%;
    margin-right: -425px;
    overflow-y: auto;
    background: rgb(249,249,249) !important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    /*-webkit-box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);
    box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);*/
    border-left: 1px solid silver !important;
}

#wrapper-favorites1.toggled #sidebar-wrapper-favorites1 {
    width: 1100px;
}

#page-content-wrapper-favorites1 {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper-favorites1.toggled #page-content-wrapper-favorites1 {
    position: absolute;
    margin-left: -425px;
}

/****************************************************************************** Slide End ********************************************************************************************************/
/***************************************************************************** Browser View Start *******************************************************************************************************/
.padding-body-content {
    padding: 1.25rem 2.5rem;
}

.separator-login {
    height: 69px;
}

.divider {
    position: absolute;
    left: 50%;
    top: 5%;
    bottom: 5%;
    border-left: 1px solid #000;
}

.add-to-cart {
    border: 1px solid #d7d7d8 !important;
    border-radius: 10px;
    background-color: #e5e5e6 !important;
}

    .add-to-cart:hover {
        background-color: var(--company-color) !important;
        color: white;
        border-radius: 10px;
    }

.tile-view-icon {
    font-size: 25px;
    margin-top: 5px;
}

    .tile-view-icon:hover {
        color: var(--company-color) !important;
    }

.grid-view-icon {
    font-size: 25px;
    margin-top: 5px;
}

    .grid-view-icon:hover {
        color: var(--company-color) !important;
    }

.item-fav-icon:hover {
    color: var(--company-color) !important;
}

.show-products-tabs {
    background-color: transparent !important;
}

.show-products-tabs-item {
    font-weight: bold;
}



.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    /*    color: white !important;*/
    font-weight: 500 !important;
    font-size: 12pt !important;
    /*    background-color: #828282 !important;*/
    border-bottom: 8px solid var(--company-color) !important;
    border-left: none;
    border-right: none;
    border-top: none;
}

.show-products-header-div {
    border: none !important;
    background-color: transparent !important
}

.show-products-header-panel {
    padding: 0px !important;
    /*border-bottom: 1px solid #cdcdcd !important;*/
}

.show-products-tab-panel {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    /*border: 1px solid #d7d7d8;*/
}

.tab-item-anchor {
    color: black !important;
}

.main-body {
    background-color: transparent !important;
    width: 100%;
}

.child-body {
    /*background-color: white !important;
    border: 1px solid white !important;*/
}

.footer-class {
    background-color: rgb(235, 235, 235) !important;
    border: 1px solid rgb(235, 235, 235) !important;
}

.product-list-pagination {
    margin-top: 10px;
}

.footer-banner-oos {
    border-top: 1px solid #d7d7d8 !important;
    font-weight: 400;
    background-color: #d7d7d8 !important;
    color: black !important;
}

.shopping-cart-header {
    background-color: var(--company-color) !important;
    color: white !important
}

.favorite-slide-header {
    /*background-color: #0095ff !important*/
    background-color: #f9f9f9 !important;
    color: #2B2B2B !important
}

.shopping-cart-body {
    background-color: #d7d7d8 !important;
}

.shopping-cart-item {
    border: 1px solid white !important;
}

.cart-button-continue {
    width: 200px !important;
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
    font-weight: bold;
}

    .cart-button-continue:hover {
        color: #6c757d;
        background-color: #fff;
        border-color: #fff;
        font-weight: bold;
    }

.cart-button-search {
    cursor: pointer;
    width: 200px !important;
    background-color: var(--company-color) !important;
    color: white !important;
    border: white;
    font-weight: bold;
}

.cart-button-chekout {
    width: 200px !important;
    background-color: var(--company-color) !important;
    color: white;
    border: white;
    font-weight: bold;
}

    .cart-button-chekout:hover {
        background-color: white !important;
        color: var(--company-color) !important;
        border: var(--company-color) !important;
        font-weight: bold;
    }

.row-visible {
    display: block;
}

.card-columns {
    column-count: 5;
}

.promo-font-size {
    font-size: 18px;
}

.check-icon-oos {
    font-size: 20px;
    color: forestgreen;
}

.btn-cart {
    color: #000000;
    /*background-color: #CECECE;
    border-color: #8E8D8D;*/
}

.cart-anchor {
    padding-top: 1px;
    width: 90px;
    height: 40px;
}

.cart-size {
    font-size: 25px;
    margin-top: 5px;
}

.cart-hover {
    color: black;
    background-color: yellow;
    border-color: black;
}

.btn-cart.focus, .btn-cart:focus {
    box-shadow: 0 0 0 .2rem rgba(38,143,255,.5)
}

.btn-cart.disabled, .btn-cart:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

.user-icon-style {
    color: #ffffff !important;
    border: 0px !important;
    font-size: 14pt !important;
    cursor: pointer;
}

    .user-icon-style:hover {
        color: #ffffff !important;
        background-color: transparent !important;
        border: 0px !important;
        font-size: 14pt !important;
        cursor: pointer;
    }

.btn-cart:not(:disabled):not(.disabled).active, .btn-cart:not(:disabled):not(.disabled):active, .show > .btn-cart.dropdown-toggle {
    color: #fff;
    background-color: #0062cc;
    border-color: #005cbf
}

    .btn-cart:not(:disabled):not(.disabled).active:focus, .btn-cart:not(:disabled):not(.disabled):active:focus, .show > .btn-cart.dropdown-toggle:focus {
        box-shadow: 0 0 0 .2rem rgba(38,143,255,.5)
    }








.online-InMobile {
    display: none;
}

.aling-items-bottom {
    align-self: flex-end;
}

.is-mobile {
    display: none;
}

.is-tablet {
    display: none !important;
}

.is-browser {
    display: block !important;
}

.is-ipad {
    display: none !important;
}

.is-ipad-pro {
    display: none !important;
}

.is-phone {
    display: none !important;
}

.is-not-phone {
    display: block !important;
}

.is-not-mobile {
    display: block;
}

.online-NotMobile {
    display: block;
}

.online-promotion {
    /*font-size: 16px;*/
}

.show-products-header-title {
    background-color: white !important;
    color: black !important;
    padding: 2px !important;
    border: none !important;
}

.show-products-grid-header {
    background-color: #cdcdcd !important;
    padding: 0.70rem 0.9375rem !important;
}

.cart-remove-icon {
    color: black !important;
}

    .cart-remove-icon:hover {
        color: var(--company-color) !important;
    }

.card-deck {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: 0px !important;
    margin-left: 4px !important;
}

    .card-deck > .card {
        width: 18%;
        flex-wrap: wrap;
        flex: initial;
        margin-bottom: 10px !important;
    }

.btn-primary-btn {
    color: var(--company-color) !important;
    background-color: #d7d7d8 !important;
    border-color: #d7d7d8 !important;
}

    .btn-primary-btn:hover {
        color: white !important;
        background-color: var(--company-color) !important;
        border-color: var(--company-color) !important;
    }

.AlertNoButton,
.AlertYesButton {
    min-width: 100px !important;
    width: max-content;
    background-color: var(--button-background-color) !important;
    border: 1px solid var(--button-border-color) !important;
    color: var(--button-text-color) !important;
    font-weight: 600 !important;
    font-size: 10pt;
    margin: 0 .25rem;
}
    .AlertNoButton:hover,
    .AlertYesButton:hover {
        background-color: var(--button-hover-background-color) !important;
        border-color: var(--button-hover-border-color) !important;
        color: var(--button-hover-text-color) !important;
    }
/****************************************************************************** Browser View End ********************************************************************************************************/

/***************************************************************************** Ipad Pro View Start *******************************************************************************************************/
@media (max-width: 1024px) {

    .online-content {
        overflow-y: scroll;
        overflow-x: hidden;
        height: calc(100vh - 230px);
        margin-top: 54px;
    }

    .card-deck {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-right: -55px !important;
        margin-left: -15px !important;
    }

        .card-deck > .card {
            width: 21%;
            flex-wrap: wrap;
            flex: initial;
            margin-bottom: 10px !important;
        }



    .hdr_titlefont {
        font-size: 1.1em !important;
        color: black !important;
        font-weight: normal;
        position: relative;
        /*font-family: Arial, Helvetica, sans-serif;*/
        text-transform: uppercase;
    }

    .row-visible {
        display: none;
    }

    .card-columns {
        column-count: 3;
    }

    .promo-font-size {
        font-size: 18px;
    }

    .cart-size {
        font-size: 16px;
        margin-top: 5px;
    }

    .nav-link-oos {
        color: white !important;
        font-weight: 600 !important;
        font-size: 10pt !important;
    }

        .nav-link-oos:hover {
            color: white !important;
            text-decoration: underline;
            font-weight: 600 !important;
            font-size: 10pt !important;
            text-decoration: underline;
        }

    .is-tablet {
        display: block !important;
    }

    .is-browser {
        display: none !important;
    }

    .is-ipad {
        display: none !important;
    }

    .is-ipad-pro {
        display: block !important;
    }

    .is-phone {
        display: none !important;
    }

    .is-not-phone {
        display: block !important;
    }

    .online-promotion {
        font-size: 16px;
    }

    .is-mobile {
        display: block;
    }

    .is-not-mobile {
        display: none;
    }




    .online-InMobile {
        display: none;
    }

    .online-NotMobile {
        display: block;
    }

    .show-products-header-title {
        background-color: black !important;
        color: white !important;
    }

    .show-products-grid-header {
        background-color: #cdcdcd !important;
        padding: 0.70rem 0.9375rem !important;
    }
}
/****************************************************************************** Ipad Pro View End ********************************************************************************************************/

/***************************************************************************** Ipad View Start *******************************************************************************************************/
@media (max-width: 768px) {

    .footer-copy-right {
        color: Gray;
        margin-bottom: 0px !important;
        font-size: 11px;
        margin-left: 2px !important;
    }

    .card-deck {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-right: -18px !important;
        margin-left: -15px !important;
    }

        .card-deck > .card {
            width: 29%;
            flex-wrap: wrap;
            flex: initial;
            margin-bottom: 10px !important;
        }

    .nav-link-oos {
        color: white !important;
        font-weight: 600 !important;
        font-size: 7pt !important;
    }

        .nav-link-oos:hover {
            color: white !important;
            text-decoration: underline;
            font-weight: 600 !important;
            font-size: 7pt !important;
            text-decoration: underline;
        }



    .hdr_titlefont {
        font-size: 24px;
        color: black !important;
        font-weight: bold;
        position: relative;
        /*font-family: Arial, Helvetica, sans-serif;*/
        text-transform: uppercase;
    }

    .collapse:not(.show) {
        display: block !important;
    }

    .navbar-nav {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .row-visible {
        display: none;
    }

    .card-columns {
        column-count: 3;
    }

    .promo-font-size {
        font-size: 18px;
    }

    .is-tablet {
        display: block !important;
    }

    .is-browser {
        display: none !important;
    }

    .is-ipad {
        display: block !important;
    }

    .is-ipad-pro {
        display: none !important;
    }

    .is-phone {
        display: none !important;
    }

    .is-not-phone {
        display: block !important;
    }

    .online-promotion {
        font-size: 14px;
    }

    .is-not-mobile {
        display: none;
    }

    .is-mobile {
        display: block;
    }



    .online-InMobile {
        display: block;
    }

    .online-NotMobile {
        display: none;
    }

    .show-products-header-title {
        background-color: black !important;
        color: white !important;
    }

    .show-products-grid-header {
        background-color: #cdcdcd !important;
        padding: 0.70rem 0.9375rem !important;
    }

    .separator-login {
        height: 91px;
    }
}

/****************************************************************************** Ipad View End ********************************************************************************************************/

/***************************************************************************** Phone View Start *******************************************************************************************************/
@media (max-width: 450px) {


    .online-content {
        overflow-y: scroll;
        overflow-x: hidden;
        height: calc(100vh - 214px);
        margin-top: 54px;
    }

    .user-icon-style {
        color: #ffffff !important;
        border: 0px !important;
        font-size: 12pt !important;
        cursor: pointer;
    }

    .favorite-icon-style {
        color: #ffffff !important;
        border: 0px !important;
        font-size: 12pt !important;
        cursor: pointer;
    }

    .hdr__promo {
        font-weight: normal;
        background-color: var(--company-color) !important;
        color: rgb(255,255,255) !important;
        align-items: center;
        font-size: 12pt !important;
        height: 60px !important;
    }

    .cart-close-slide {
        font-size: 24px;
        position: absolute;
        width: 3.25rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-align: center;
        margin-top: -38px;
        color: #fff !important;
        z-index: 1000;
        margin-left: 312px;
    }

    .padding-body-content {
        padding: 0.25rem 0.5rem;
    }

    .separator-login {
        height: 0px;
    }

    .cart-button-chekout-cart-detail {
        width: 93px !important;
        background-color: var(--company-color) !important;
        color: white;
        border: white;
        font-weight: bold;
        font-size: 12px;
    }

        .cart-button-chekout-cart-detail:hover {
            background-color: white !important;
            color: var(--company-color) !important;
            border: var(--company-color) !important;
            font-weight: bold;
        }

    .cart-button-continue-cart-detail {
        width: 136px !important;
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
        font-size: 12px;
        font-weight: bold;
    }

    .cart-button-search {
        cursor: pointer;
        width: 155px !important;
        color: white !important;
        border: white;
        font-size: 12px;
        font-weight: bold;
    }

    .cart-button-chekout {
        width: 155px !important;
        color: white;
        border: white;
        font-size: 12px;
        font-weight: bold;
    }

    .cart-button-continue {
        width: 155px !important;
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
        font-size: 12px;
        font-weight: bold;
    }

    .footer-copy-right {
        color: Gray;
        margin-bottom: 0px !important;
        font-size: 9px;
        margin-left: 2px !important;
    }

    .card-deck {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-right: 0px !important;
        margin-left: 4px !important;
    }

        .card-deck > .card {
            width: 99%;
            flex-wrap: wrap;
            flex: initial;
            margin-bottom: 10px !important;
        }

    .search-bar {
        background-color: var(--company-color) !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-toggler {
        display: block;
    }

    .collapse:not(.show) {
        display: none !important;
    }

    .navbar-nav {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        -ms-flex-direction: row;
    }

    .nav-link-oos {
        color: white !important;
        font-weight: 600 !important;
        font-size: 7pt !important;
    }

        .nav-link-oos:hover {
            color: white !important;
            text-decoration: underline;
            font-weight: 600 !important;
            font-size: 7pt !important;
            text-decoration: underline;
        }


    .hdr_titlefont {
        font-size: 15px !important;
        color: black !important;
        font-weight: bold !important;
        position: relative !important;
        /*font-family: Arial, Helvetica, sans-serif;*/
        text-transform: uppercase !important;
    }

    .row-visible {
        display: none;
    }

    .card-columns {
        column-count: 1;
    }

    .promo-font-size {
        font-size: 14px;
    }

    .aling-items-bottom {
    }

    .is-tablet {
        display: none !important;
    }

    .is-browser {
        display: none !important;
    }

    .is-ipad {
        display: none !important;
    }

    .is-ipad-pro {
        display: none !important;
    }

    .is-phone {
        display: block !important;
    }

    .is-not-phone {
        display: none !important;
    }

    .online-promotion {
        font-size: 14px;
    }

    .btn-sm {
        padding: .25rem .5rem;
        font-size: .7rem;
        line-height: 1.5;
        border-radius: .2rem;
    }

    .is-not-mobile {
        display: none;
    }

    .is-mobile {
        display: block;
    }

    .online-InMobile {
        display: block;
    }

    .online-NotMobile {
        display: none;
    }

    .btn-sm {
        padding: .25rem .5rem;
        font-size: .5rem;
        line-height: 1.5;
        border-radius: .2rem;
    }

    .show-products-header-title {
        background-color: black !important;
        color: white !important;
    }

    .show-products-grid-header {
        background-color: #cdcdcd !important;
        padding: 0.70rem 0.9375rem !important;
    }

    #wrapper {
        padding-right: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

        #wrapper.toggled {
            padding-right: 380px;
        }

    #sidebar-wrapper {
        z-index: 1000;
        position: fixed;
        right: 380px;
        width: 0;
        height: 100%;
        margin-right: -380px;
        overflow-y: auto;
        background: #ffffff;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        background-color: whitesmoke !important;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 380px;
    }

    #page-content-wrapper {
        width: 100%;
        position: absolute;
        padding: 15px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: absolute;
        margin-left: -380px;
    }

    .wrapper-width {
        width: 370px !important;
    }

    .wrapper-width-total {
        width: 350px !important;
    }

    /*-------------------------------------------------------------------------------------------------*/
    #wrapper-favorites {
        padding-right: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

        #wrapper-favorites.toggled {
            padding-right: 380px;
        }

    #sidebar-wrapper-favorites {
        z-index: 1000;
        position: fixed;
        right: 380px;
        width: 0;
        height: 100%;
        margin-right: -380px;
        overflow-y: auto;
        background: #d7d7d8 !important;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        /*-webkit-box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);
    box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);*/
        border: 1px solid white !important;
    }

    #wrapper-favorites.toggled #sidebar-wrapper-favorites {
        width: 380px;
    }

    #page-content-wrapper-favorites {
        width: 100%;
        position: absolute;
        padding: 15px;
    }

    #wrapper-favorites.toggled #page-content-wrapper-favorites {
        position: absolute;
        margin-left: -380px;
    }
}

/****************************************************************************** Phone View End ********************************************************************************************************/

/***************************************************************************** Grid Start *******************************************************************************************************/
.grid-header {
    /*background-color: #263c46;*/
    padding: 0 0.3125rem;
    border-radius: 3px 3px 0 0;
    font-weight: bold;
    color: #000;
    font-size: 10pt;
    text-transform: uppercase;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    letter-spacing: 0.5px;
}
/****************************************************************************** Grid End ********************************************************************************************************/

/***************************************************************************** NavBar Start *******************************************************************************************************/
.card-header-background {
    background-color: #14244c !important;
    color: white !important;
}

div.card > .searchFilter {
    /*    border: 1px solid rgba(0,0,0,.12);*/
    /*margin-bottom: 30px;*/
    /*margin-top: 30px;*/
    /*border-radius: 6px;*/
    color: rgba(0,0,0,.87);
    background: #fff;
    /*width: 100%;*/
    /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
}

div.card.card-plain > .searchFilter {
    background: transparent;
    box-shadow: none;
}

.searchFilterHeader {
    /*    background-color: whitesmoke !important;*/
    border-color: rgba(0,0,0,.12);
}

.criteria-ddl {
    height: 30px !important;
    padding: 0rem 0.75rem !important;
}

div.card > .shippingAddress {
    height: 130px !important;
    background-color: white !important;
    border: 1px solid rgba(0,0,0,.12);
    /*margin-bottom: 30px;*/
    /*margin-top: 30px;*/
    /*border-radius: 6px;*/
    color: rgba(0,0,0,.87);
    background: #fff;
    /*width: 100%;*/
    /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
}

div.card.card-plain > .shippingAddress {
    background: transparent;
    box-shadow: none;
}

.shippingAddressHeader {
    border-radius: 0px !important;
    padding: 5px !important;
    margin-top: 0px !important;
    height: 40px !important;
    background-color: whitesmoke !important;
    border: 1px solid rgba(0,0,0,.12);
    border-bottom: 0px;
}

div.card > .priceSummary {
    border: 1px solid rgba(0,0,0,.12);
    /*margin-bottom: 30px;*/
    /*margin-top: 30px;*/
    /*border-radius: 6px;*/
    color: rgba(0,0,0,.87);
    background: #fff;
    /*width: 100%;*/
    /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
}

div.card.card-plain > .priceSummary {
    background: transparent;
    box-shadow: none;
}

.priceSummaryHeader {
    border-radius: 0px !important;
    padding: 5px !important;
    margin-top: 0px !important;
    height: 60px !important;
    background-color: whitesmoke !important;
    border: 1px solid rgba(0,0,0,.12);
    border-bottom: 0px;
}

div.card > .priceSummaryFooter {
    height: 60px !important;
    border: 1px solid rgba(0,0,0,.12);
    /*margin-bottom: 30px;*/
    /*margin-top: 30px;*/
    /*border-radius: 6px;*/
    color: rgba(0,0,0,.87);
    background-color: whitesmoke !important;
    /*width: 100%;*/
    /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
}

.priceSummaryTitle {
    font-size: 22pt;
    font-weight: 600;
    text-align: center;
}

.priceSummaryFooterButton {
    text-align: center;
}

.checkoutphoneNumberTxtbox .dxbs-form-control {
    width: 210px !important;
}

.ponumberTxtbox .dxbs-form-control {
    width: 230px !important;
}

.checkoutMTRCheckbox .dx-blazor-checkbox .custom-control.custom-checkbox .custom-control-label:before {
    padding-right: 5px !important;
}

div.card {
    border: 0;
    margin-bottom: 10px;
    /*margin-top: 30px;*/
    /*border-radius: 6px;*/
    color: rgba(0,0,0,.87);
    background: #fff;
    width: 100%;
    /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
}

    div.card.card-plain {
        background: transparent;
        box-shadow: none;
    }

    div.card .card-header {
        border-radius: 3px;
        padding: 1rem 15px;
        margin-top: -30px;
        border: 0;
    }


.card-header-fixed {
    position: fixed;
    z-index: 1000;
    width: 100%;
}


.card-plain .card-header:not(.card-avatar) {
    margin-left: 0;
    margin-right: 0;
}

.div.card .card-body {
    padding: 15px 30px;
}

div.card .card-header-primary {
    background: linear-gradient(60deg,#ab47bc,#7b1fa2);
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);
}

div.card .card-header-danger {
    background: linear-gradient(60deg,var(--company-color),#d32f2f);
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(244,67,54,.6);
}


.card-nav-tabs .card-header {
    margin-top: -30px !important;
}

.card .card-header .nav-tabs {
    padding: 0;
}

.nav-tabs, .nav-tabs dxbl-tab-list {
    border-bottom: 0px solid transparent !important;
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: black;
}

/*.nav-link:hover {
        color: black;
        background-color: whitesmoke !important;
    }*/

.nav-tabs .nav-link {
    border-bottom: 6px solid #aaa !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-left: 0px solid transparent !important;
    border-right: 0px solid transparent !important;
    border-top: 0px solid transparent !important;
    background-color: white !important;
    color: #2b2b2b !important
}

    .nav-tabs .nav-link:hover {
        border-bottom-color: #999 !important;
        
        background-color: transparent !important;
    }
    .nav-tabas .nav-link.hover::before {
        content: "";
        color: transparent !important;
        background-color: transparent !important;
    }
    .nav-tabs .nav-link.dxbl-active {
        border-bottom-color: var(--company-color) !important;
        border-bottom-width: 8px !important;
    }

.nav-background-color {
    background-color: #828282 !important;
}
/****************************************************************************** NavBar End ********************************************************************************************************/


/***************************************************************************** Boostrap Start ******************************************************************************************************/

.ordering-link {
    display: block;
    width: 100%;
}

.btn-primary {
    /*    color: #fff;
    background-color: var(--company-color) !important;*/
    border-color: var(--button-border-color) !important;
    background-color: var(--button-background-color) !important;
    color: var(--button-text-color) !important;
}

    .btn-primary:hover {
        background-color: var(--button-background-color-hover) !important;
    }

    .btn-primary:disabled {
        color: black;
        background-color: #e9ecef !important;
        border-color: #ced4da !important;
        opacity: 1;
        border: 1px solid #ced4da;
    }

.row-cell-middle {
    align-self: center;
}

.row-cell-text-center {
    text-align: center;
}

.btn-outline-primary {
    color: #007bff;
    border-color: transparent !important;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: transparent !important;
        border-color: transparent !important;
    }

    .btn-outline-primary.focus, .btn-outline-primary:focus {
        box-shadow: 0 0 0 .2rem transparent !important;
    }

    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
        color: #007bff;
        background-color: transparent
    }

    .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
        color: #fff;
        background-color: transparent !important;
        border-color: transparent !important;
    }

        .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem transparent !important;
        }

.btn-place-order {
    width: 120px;
    color: #FFF;
    background-color: var(--company-color);
    border-color: #2B2B2B;
}

    .btn-place-order:hover {
        color: #2B2B2B;
        background-color: #fff;
        border-color: #2B2B2B;
    }

.btn-go-to-checkout {
    width: 120px;
    color: #FFF !important;
    background-color: var(--company-color) !important;
    border-color: var(--company-color) !important;
}

    .btn-go-to-checkout.disabled, .btn-go-to-checkout:disabled {
        color: #000 !important;
        background-color: #fff !important;
        border-color: #4e555b !important;
    }

    .btn-go-to-checkout:not(:disabled):not(.disabled).active, .btn-go-to-checkout:not(:disabled):not(.disabled):active, .show > .btn-go-to-checkout.dropdown-toggle {
        color: #000 !important;
        background-color: #fff !important;
        border-color: #4e555b !important;
    }

        .btn-go-to-checkout:not(:disabled):not(.disabled).active:focus, .btn-go-to-checkout:not(:disabled):not(.disabled):active:focus, .show > .btn-go-to-checkout.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(130,138,145,.5);
        }
/*.btn-go-to-checkout:hover {
        color: var(--company-color) !important;
        background-color: #fff !important;
        border-color: var(--company-color) !important;
    }*/

.btn-contact-us {
    width: 130px;
    color: #FFF;
    background-color: var(--company-color) !important;
    border-color: var(--company-color) !important;
}

    .btn-contact-us:hover {
        color: var(--company-color) !important;
        background-color: #0000 !important;
        border-color: #4e555b !important;
    }


.btn-add-cart {
    width: 120px;
    font-weight: 500;
}

    .btn-add-cart.focus, .btn-add-cart:focus {
        box-shadow: 0 0 0 .2rem rgba(130,138,145,.5)
    }

    .btn-add-cart.disabled, .btn-add-cart:disabled {
        color: #000;
        background-color: #fff;
        border-color: #4e555b
    }

    .btn-add-cart:not(:disabled):not(.disabled).active, .btn-add-cart:not(:disabled):not(.disabled):active, .show > .btn-add-cart.dropdown-toggle {
        color: #000;
        background-color: #fff;
        border-color: #4e555b
    }

        .btn-add-cart:not(:disabled):not(.disabled).active:focus, .btn-add-cart:not(:disabled):not(.disabled):active:focus, .show > .btn-add-cart.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(130,138,145,.5)
        }

.apply-dimension {
    width: 100px;
}

.clear-dimension {
    width: 100px;
}

.btn-continue-shopping {
    width: 120px;
    color: #383838 !important;
    background-color: white;
    border-color: #383838 !important;
}

    .btn-continue-shopping:hover {
        width: 120px;
        color: #383838 !important;
        background-color: white;
        border-color: #383838 !important;
    }

.btn-add-item-close {
    width: 120px;
    color: #2b2b2b;
    background-color: #c5c4c4;
    border-color: #c5c4c4;
}

    .btn-add-item-close:hover {
        width: 120px;
        color: #2b2b2b;
        background-color: #c5c4c4;
        border-color: #c5c4c4;
    }

.btn-add-all-to-cart {
    width: 120px;
    color: #f9f9f9;
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

    .btn-add-all-to-cart:hover {
        width: 120px;
        color: #f9f9f9;
        background-color: #2b2b2b;
        border-color: #2b2b2b;
    }

    .btn-add-all-to-cart:disabled {
        width: 120px;
        color: #f9f9f9;
        background-color: #2b2b2b;
        border-color: #2b2b2b;
    }

.btn-delete-line-item {
    margin-left: 10px;
    line-height: 1.1em;
}

    .btn-delete-line-item:hover {
        margin-left: 10px;
        line-height: 1.1em;
    }

.btn-edit-line-item {
    color: #f9f9f9;
    background-color: #2b2b2b;
    border-color: #2b2b2b;
    line-height: 1.1em;
}

    .btn-edit-line-item:hover {
        color: #f9f9f9;
        background-color: #2b2b2b;
        border-color: #2b2b2b;
        line-height: 1.1em;
    }

    .btn-edit-line-item:disabled {
        color: #f9f9f9;
        background-color: #2b2b2b;
        border-color: #2b2b2b;
        line-height: 1.1em;
    }

.btn-add-item {
    width: 120px;
    color: #f9f9f9;
    background-color: #2b2b2b;
    border-color: #2b2b2b;
}

    .btn-add-item:hover {
        width: 120px;
        color: #2b2b2b;
        background-color: #c5c4c4;
        border-color: #c5c4c4;
    }

.btn-go-to-cart {
    width: 120px;
    color: #2b2b2b;
    background-color: #c5c4c4;
    border-color: #c5c4c4;
}

    .btn-go-to-cart:hover {
        width: 120px;
        color: #2b2b2b;
        background-color: #c5c4c4;
        border-color: #c5c4c4;
    }

.btn-login {
    color: #FFF;
    background-color: #2B2B2B;
    border-color: #2B2B2B;
}

    .btn-login:hover {
        color: #FFF;
        background-color: #2B2B2B;
        border-color: #4e555b
    }

    .btn-login.focus, .btn-login:focus {
        box-shadow: 0 0 0 .2rem rgba(130,138,145,.5)
    }

    .btn-login.disabled, .btn-login:disabled {
        color: #000;
        background-color: #fff;
        border-color: #4e555b
    }

    .btn-login:not(:disabled):not(.disabled).active, .btn-login:not(:disabled):not(.disabled):active, .show > .btn-login.dropdown-toggle {
        color: #000;
        background-color: #fff;
        border-color: #4e555b
    }

        .btn-login:not(:disabled):not(.disabled).active:focus, .btn-login:not(:disabled):not(.disabled):active:focus, .show > .btn-login.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(130,138,145,.5)
        }

/***************************************************************************** Boostrap End ******************************************************************************************************/



/****************************************************************************** DevExpress Start *******************************************************/
.dxbs-gridview > .card .dxbs-table > thead > tr:first-child > th,
.dxbs-gridview > .card .dxbs-table > thead > tr:first-child > td {
    border-top: 0;
    background-color: var(--grid-header-background-color);
    color: white;
    border-radius: 0px;
    height: 42pt;
    font-size: 12pt;
}

.dxbl-grid .dxbl-grid-table > thead > tr:first-child > th, .dxbl-grid > .dxbl-grid-table > thead > tr:first-child > td {
    border-top: 0;
    background-color: var(--grid-header-background-color);
    color: white;
    border-radius: 0px;
    line-height: 1.1rem;
}

.table-bordered td, .table-bordered th {
    border: 0px solid #dee2e6;
}

.search-grid-down > .card .dxbs-table > thead > tr:first-child > th, .dxbs-gridview > .card .dxbs-table > thead > tr:first-child > td {
    border-top: 0;
    color: #2B2B2B;
    background-color: silver;
    height: 20pt;
    font-size: 12pt;
    border-radius: 0px;
}

.search-grid-down > .card .dxbs-grid-table > thead > tr:first-child > th, .dxbs-grid > .card .dxbs-grid-table > thead > tr:first-child > td {
    border-top: 0;
    color: #2B2B2B;
    background-color: silver;
    height: 20pt;
    font-size: 10pt;
    border-radius: 0px;
}

/****************************************************************************** DevExpress End *******************************************************/




@media (max-width: 1366px) {
    .alert-custom-popup > .modal-content {
        position: absolute;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 90% !important;
        pointer-events: auto;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: .3rem;
        outline: 0;
        /* top: 73%; */
        margin-top: 50% !important;
        transform: translate(-50%);
        left: 50%;
    }

    .modal > .dxbs-popup {
        position: relative;
        left: auto;
        top: auto;
        box-sizing: border-box;
        height: 100%;
    }

    .modal-dialog {
        max-width: 100%;
        margin: 1.75rem auto;
    }

    .ipad-gridview-content {
        width: 100%;
    }

    .ShowOrderDetailsPopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: calc(100% - 60px) !important;
        background-color: white !important;
        top: 20px;
    }

        .ShowOrderDetailsPopup > .modal-content > .modal-body {
            padding: 0px !important;
            height: calc(100% - 110px);
            overflow-y: auto;
        }

        .ShowOrderDetailsPopup > .modal-content > .modal-footer {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: center;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            padding-top: 5px;
        }
}

@media (max-width: 1280px) {
    .font-size-nav-menu {
        font-size: 12px !important;
    }

    .filter-content {
        width: 100%;
    }

    .dimension-textbox {
        width: 100%;
    }

    .title-login-size {
        font-size: 18pt;
        text-align: center;
        margin-top: 20pt;
        margin-bottom: 10pt;
    }

    .textbox-login {
        font-size: 12pt;
        height: 30pt;
    }

    .margin-links-button {
        margin-bottom: 20pt;
    }

    .margin-new-account-label {
        margin-bottom: 15pt;
    }

    .btn-login {
        color: #FFF;
        font-size: 12pt;
        background-color: #2B2B2B;
        border-color: #2B2B2B;
        width: 100%;
        height: 30pt;
    }

    .extra-login-text {
        font-size: 14pt;
    }

    .margin-label-button {
        margin-bottom: 25pt;
    }

    .footer-text.footer-link {
        font-size: 8pt !important;
        color: Gray !important;
        text-decoration: none;
        margin-left: 7px !important;
        margin-right: 7px !important;
    }

    .footer-text {
        text-align: right;
        font-size: 0.9em !important
    }

    .signup-form-label {
        font-weight: bold;
        font-size: 10pt;
    }

    .textbox-registration {
        font-size: 12pt;
        height: 25pt;
    }

    .text-label {
        font-size: 12pt;
    }

    .registration-title {
        font-size: 20pt;
        text-align: center;
        margin-top: 15pt;
        margin-bottom: 10pt;
    }

    .form-group {
        margin-bottom: .4rem !important;
    }
}

@media (max-width: 1440px) {
    .search-result-by-hight {
        display: none;
    }

    .search-result-by-low {
        display: block;
    }

    .filter-content {
        width: 100%;
    }

    /*.gridview-content {
        width: calc(100% - 202px);
    }*/

    .filter-content-fav {
        width: 5.5%;
    }

    .gridview-content-fav {
        width: 100%;
    }

    .dimension-textbox {
        width: 100%;
    }

    .title-login-size {
        font-size: 18pt;
        text-align: center;
        margin-top: 20pt;
        margin-bottom: 10pt;
    }

    .textbox-login {
        font-size: 12pt;
        height: 30pt;
    }

    .margin-links-button {
        margin-bottom: 20pt;
    }

    .margin-new-account-label {
        margin-bottom: 15pt;
    }

    .btn-login {
        color: #FFF;
        font-size: 12pt;
        background-color: #2B2B2B;
        border-color: #2B2B2B;
        width: 100%;
        height: 30pt;
    }

    .extra-login-text {
        font-size: 14pt;
    }

    .margin-label-button {
        margin-bottom: 25pt;
    }

    .footer-text.footer-link {
        font-size: 9pt !important;
        color: Gray !important;
        text-decoration: none;
        margin-left: 7px !important;
        margin-right: 7px !important;
    }

    .footer-text {
        text-align: right;
        font-size: 0.9em !important
    }

    .signup-form-label {
        font-weight: bold;
        font-size: 10pt;
    }

    .textbox-registration {
        font-size: 12pt;
        height: 25pt;
    }

    .text-label {
        font-size: 12pt;
    }

    .registration-title {
        font-size: 20pt;
        text-align: center;
        margin-top: 15pt;
        margin-bottom: 10pt;
    }

    .form-group {
        margin-bottom: .4rem !important;
    }

    .ShowOrderDetailsPopup > .modal-content {
        position: absolute;
        float: left;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px) !important;
        height: calc(100% - 60px) !important;
        background-color: white !important;
        top: 20px;
    }

        .ShowOrderDetailsPopup > .modal-content > .modal-body {
            padding: 0px !important;
            height: calc(100% - 110px);
            overflow-y: auto;
        }

        .ShowOrderDetailsPopup > .modal-content > .modal-footer {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: center;
            padding: 0.5rem;
            border-top: 1px solid #dee2e6;
            padding-top: 5px;
        }
}

@media (max-width: 1114px) {
    .search-result-by-hight {
        display: none;
    }

    .search-result-by-low {
        display: block;
    }

    .grid-text-size {
        font-size: 8pt !important;
    }

    .filter-content {
        width: 100%;
    }

    /*.gridview-content {
        width: calc(100% - 202px);
    }*/

    .footer-text.footer-link {
        font-size: 7pt !important;
        color: Gray !important;
        text-decoration: none;
        margin-left: 7px !important;
        margin-right: 7px !important;
    }
}

@media (max-width: 1024px) {
    .search-result-by-hight {
        display: none;
    }

    .search-result-by-low {
        display: block;
    }

    .add-item-button {
        font-size: 10pt;
        width: 120px !important;
        float: right;
        margin-right: 10px;
        margin-top: -60px;
    }

    .dropdown-menu.show {
        display: block;
        left: -3px !important;
    }

    .filter-content {
        width: 100%;
    }

    .ipad-gridview-content {
        width: 100%;
    }

    html {
        height: 100% !important;
        min-height: 100% !important;
    }

    .height-mobile {
        height: 100% !important;
        overflow-y: auto;
    }

    #sidebar-wrapper-favorites {
        z-index: 1000;
        position: fixed;
        right: 450px;
        width: 0;
        height: 100%;
        margin-right: -435px;
        overflow-y: auto;
        background: #d7d7d8 !important;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        /*-webkit-box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);
    box-shadow: -0.625rem 0 0.625rem 0.625rem rgba(0,0,0,0.1);*/
        border: 1px solid white !important;
    }

    /****************************************************************************** Setting Controls End ****************************************************/


    /***************************************************************** Main Colors ***********************************************************************/
    .main-background-color {
        background-color: white !important;
    }
    /***************************************************************** End Main Color *******************************************************************/

}

@media (max-width: 390px) {
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: white !important;
        font-weight: 500 !important;
        font-size: 9pt !important;
        background-color: #828282 !important;
        /*border-bottom: 6px solid #59626a !important;*/
        border-left: none;
        border-right: none;
        border-top: none;
    }
}