/*#################################################################################
    
    For ease of maintenance please ensure to follow the document structure listed below. If a new section is required, please add to the Table of Contents. 

    Table Of Contents

    #Welcome
    #Impersonation/DelegateLogin
    #Payments
    #OrderPad/QuotePad
    #B2B Catalog
    #Service Calls
    #Employee Login
    #File Manager
    #Error Pages
    #Dashboard
    #Media Queries  
    #Knockout Components
    #CP Only Template Overrides
    #Print
    #THUMBNAILS

    ###############################################################################*/


/************************************************** #Welcome ************************************************************/

/*Non B2B User*/

#ctl00_MainContent_pnlNews{
    margin-top: 27pt;
}

body.welcome{
    overflow-x: hidden;
}

.welcome-intro {
    padding: 0;
    margin-top: -1.7rem;
}

.static-banner {
    width: 100vw;
    height: 35vh;
    margin-top: -15pt;
    background-size: cover;
}

.banner-full {
    width: 100vw;
}

.row.welcome-contain {
    max-width: 70%;
    margin: auto;
}

.welcome-msg {
    padding: 25pt 42pt;
    margin: 0pt 0 20pt 0;
    width: 100vw;
    box-shadow: 7px 5px 7px #ccc;
}

    .welcome-msg img {
        max-width: 100%;
        margin: auto;
    }

.nav-cards {
    margin: 20pt auto !important;
    float: none;
    clear: both;
}

    .nav-cards a {
        height: 146px;
        display: flex;
        text-align: center;
        padding: 0.5rem;
        justify-content: center;
        overflow: hidden;
        text-shadow: 1px 1px 2px #333;
        line-height: 18pt;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 10pt;
        align-items: center;
    }

.feature-collection {
    margin: 5pt auto;
    clear: both;
    float: none;
    padding: 20pt 30pt;
}

    .feature-collection .itm-info {
        text-align: center;
        max-width: 325px;
        height: 250pt;
        padding: 10pt;
    }

        .feature-collection .itm-info .itm-img {
            display: block;
            min-height: 170pt;
            margin-bottom: 10pt;
            border: 1pt solid #eee;
        }

            .feature-collection .itm-info .itm-img img {
                max-width: 100%;
                margin: auto;
                width: auto;
                max-height: 170pt;
            }


        .feature-collection .itm-info .itm-price {
            display: block;
        }
/************************************************** #Impersonation/DelegateLogin **************************************************************/
.impersonate {
    padding: 40pt 20pt 0;
}

#BPList tr:first-child > th {
    box-shadow: #ccc 0 4px 0;
}

.landing-page {
    padding: 10pt;
}

.panel-heading {
    padding: 6pt 3pt;
    margin-top: 10pt;
}

    .panel-heading h3 {
        margin: 0;
    }

.dxgvFooter_SoftOrange td.dxgv ul {
    list-style: none;
    padding: 0;
}

.landing-page .table-responsive {
    margin: 10pt auto 0;
}


/************************************************** #Payments ************************************************************/

.balance-pay-now h3{
    margin-bottom: 0;
}

#statementsWrapper .table-responsive .table th, #statementsWrapper .payment-date{
white-space: nowrap;
}

.logout-panel span.balance-pay-now-wrapper {
    display: block;
    padding: 3pt 0;
}

.branch-dropdown .form-inline {
    margin: 10pt;
}


.address-wrapper {
    margin-top: 10pt;
    padding: 20pt 0 0;
}

.billing-doc-info .address-wrapper{
    margin-top: 20pt;
    max-width: 95%;
}

.o-summary .billing-doc-info .address-wrapper {
    max-width: 50%;
}

.table-responsive {
    width: 100%;
    margin: 10pt auto;
    overflow: auto;
}

    .table-responsive .table {
        border-left: 0;
        border-right: 0;
    }

        .table-responsive .table th {
            border-left: 0;
            border-right: 0;
            text-align: left;
            border-bottom: 1px;
            font-weight: normal;
        }

        .table-responsive .table td {
            text-align: left;
            padding: 5px 10px;
        }

.payment-totals-wrapper {
    height: auto;
    min-height: 130px;
}

.pay-on-account {
    text-align: right;
    margin-right: 0;
    padding: 10pt 5pt 0;
    width: auto;
}

.payment-totals-wrapper span {
    float: left;
}

.pay-on-account div.on-account-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 10pt;
    margin-bottom: 10pt;
}

.total-payment-val, .on-account-wrapper input {
    margin-right: 10pt;
    width: 50%;
}

.on-account-wrapper input {
    padding-right: 5pt;
    text-align: right;
    margin-left: 5pt;
}

.total-payment-val {
    float: right !important;
    clear: right;
    margin-right: 15pt;
}

.payment-amount {
    text-align: right !important;
}

.credit-card-metaphor-wrapper {
    display: inline-block;
    padding: 15pt;
    border-radius: 2px;
    width: 85%;
}

.notes-row {
    margin-top: 30pt;
}

#notes, .notes {
    padding: 4px;
    width: 100%;
    height: 160px;
    border-radius: 1px;
    margin: 10pt 0;
}

#creditCardExpiryDate .form-control{
    min-width: 100% !important;
    height: auto;
}

#paymentScreenCardAndNotesContainer div.col-md-6 {
    padding: 0;
}

#ctl00_MainContent_achPayScreen_lblAmount {
    padding: 12pt;
}

#btn-pay-account span {
    float: none;
}

.payment-btns button {
    margin-left: 5pt;
}

.payment-amount img {
    margin-left: 10pt;
    width: 8pt;
}

#statementsWrapper .table td, #statementsWrapper .table th {
    text-align: right;
}

    #statementsWrapper .table td:nth-child(-n+5), #statementsWrapper .table th:nth-child(-n+5) {
        text-align: left;
    }

#paymentPageTopBanner .dxgvTitlePanel_SoftOrange {
    padding: 10px 0;
    background-color: transparent;
}


.reports li.default-view, .reports li.delete-all{
    display: none;
}

/************************************************** #OrderPad/QuotePad ************************************************************/

.order-form-wrapper {
    padding: 25pt 30pt;
    width: 1000px;
}

.row.quick-add{
    margin: 15pt 0 0;
}

.quick-add-params div{
    padding: 10pt 15pt;
}

.quick-add-params .btn{
    margin-top: 20pt;
}

.quick-add h2 {
    text-transform: initial !important;
    font-weight: normal !important;
	border-bottom: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.quick-add .table tr {
    font-weight: normal !important;
}

.quick-add .table > thead:first-child > tr:first-child > th{
    color: inherit;
}

.input-group.date-picker.date-large .input-group-addon {
    padding: 0 6px;
    height: 18pt;
    display: inline-block;
    vertical-align: bottom;
	margin-left: -0.3rem;
}

    .input-group.date-picker.date-large .input-group-addon i {
        height: auto;
        margin: -3pt auto;
        text-align: center;
    }

.order-form-wrapper button {
    padding: 5pt 10pt;
}

.f-codename .date-picker {
    width: auto;
}

.f-codename .col-md-8 {
    float: left;
}

    .f-codename .col-md-8 h1 {
        margin: 5pt 0;
    }

.cardcode {
    margin-bottom: 20pt;
    display: block;
}

.f-codename .col-md-4 {
    float: right;
    width: 25%;
    clear: right;
}

.order-form-wrapper .address-wrapper {
    padding: 20pt 0;
    margin-bottom: 10pt;
}

.order-form-wrapper .form-control {
    height: 24px;
    z-index: 0;
	width: 100%;
}

.order-form-wrapper select.form-control {
    margin: 0 0 6px -4px;
    max-width: 250pt;
}

.order-form-wrapper .modal-body select.form-control {
    max-width: 100%;
}

.order-form-wrapper label{
    display: block;
}

.ordr-payment-details {
    line-height: 18pt;
    margin-top: 10pt;
}

    .ordr-payment-details img {
        vertical-align: top;
        width: 100%;
    }

.f-address .form-control {
    padding: 0 0 0 4px;
    margin: 0 0 0 -4px;
    width: 150px;
    font-weight: 400;
    box-shadow: none;
}

.f-address div div {
    max-width: 124pt;
}

.f-address span.required {
    display: inline-block;
    color: red;
    padding-left: 3pt;
}

.order-items-bar {
    margin-bottom: -8px;
    width: 100%;
    line-height: 1em;
    border-radius: 1pt;
}

    .order-items-bar h6 {
        padding: 10pt 5pt !important;
        margin: 0 !important;
    }

.f-itemsearch {
    padding: 0 0 10pt;
    border-bottom: 3px solid #ccc;
    margin-bottom: 20pt;
    margin-top: 10pt;
}

.f-search-label {
    padding-left: 12px;
}

.f-itemline {
    padding: 15pt 12px 2px 4px;
    border-bottom: 1px solid #ccc;
    line-height: 15pt;
    margin-bottom: 1pt;
}

.f-itemname {
    font-weight: normal;
}

.f-itemcode {
    display: inline-block;
    width: 100%;
}

.f-itemprice {
    margin: auto auto 4pt;
}

.f-itemline.error {
    background-color: #ffd0d7;
}

.f-itemline .form-control {
    margin-top: 3px;
    text-align: center;
}

.f-itemline .btn-link {
    text-align: right;
    float: right;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 3pt;
}

.f-itemline div {
    padding-left: 0px;
    margin-bottom: 4pt;
}


.udf-line p {
    margin-top: 1pt;
}

.invalid-udfs {
    background-color: #FFFAEE;
}

    .invalid-udfs .f-itemname {
        color: #F36A35;
    }

.o-line-total {
    text-align: center;
}

    .o-line-total label, .o-line-total span {
        font-weight: normal;
        margin-top: 1pt;
    }

.f-itemline label span {
    display: block;
}

div.shipping-notes input[type=checkbox]{
    margin: 5pt;
}

.payment-options{
    padding: 0;
    list-style: none;
    margin-top: 10pt;
}

.payment-options input{
    margin-right: 3pt;
    margin-left: 5pt;
}

.payment-options li, .payment-options li label {
    display: inline;
}

.payment-options li{
    padding-right: 5pt;
}

.input-group label{
    max-width: 73%;
}

.udf-line {
    margin-left: 0;
    padding-top: 3px;
    clear: both;
    width: 100%;
}

.search-box-item {
    margin: 10px;
    width: 96.5%;
}

.notes-row .order-total {
    margin: 30px -15px 0 0;
    padding: 0;
    width: 214px;
    float: right;
}

.order-total li {
    padding: 7pt 0;
    list-style-type: none;
    text-align: right;
}

    .order-total li .btn {
        margin-top: 7pt;
    }

.total-amount {
    display: inline-block;
    width: 130px;
}

.f-order-notes {
    margin-top: 20pt;
}


.disabled, .disabled:hover {
    color: #999 !important;
}

#itemPriceConfigurationModal .close {
    margin-top: -28pt;
}

#itemPriceConfigurationModal h5.modal-title {
    font-size: 15px !important;
    margin: 10px 0 !important;
}

#priceConfiguredItem {
    font-weight: bold;
}

.pricing-config-error-contain {
    margin-right: -20pt;
    margin-top: -15pt;
    display: none;
}

.o-itm-contain .row:nth-of-type(2) .pricing-config-error-contain {
    margin-top: -9pt;
}

.pricing-config-error {
    width: 100%;
    display: inline-block;
    padding: 2pt 11pt;
    opacity: 0.8;
    max-width: 98%;
}

/*UOM*/

.form-control.qty{
    margin-top: 10pt;
}

.order-form-wrapper label.uom{
    margin: 0;
}

select.form-control.uom {
    height: auto !important;
    width: auto;
    display: inline;
}

/*Order Summary*/

.o-summary {
    padding-bottom: 20pt;
}

.o-summary .cp-table .udf-line .row{
    margin-left: 0;
    margin-right: 0;
}

    .o-summary .billing-doc-info .address-wrapper {
        padding-left: 20pt !important;
        margin-left: 0;
    }

    .o-summary .doc-logo {
        position: relative;
    }

    .o-summary .billing-doc-info .btn-success {
        margin-left: 10pt !important;
    }

    .o-summary .billing-doc-info .udf-line .col-md-4 {
        width: 50%;
        padding: 0 5pt;
        border: none;
        margin-left: -10pt;
        margin-top: 20pt;
        font-weight: normal;
    }

    .o-summary .udf-line{
        margin-left: 10pt;
    }

    .o-summary .billing-doc-info{
        margin-top: 10pt;
    }

    .o-summary .f-order-notes span {
        display: block;
        margin-bottom: 5pt;
    }

    .o-summary .cp-table tbody tr td {
        border-top: 1px solid #ccc !important;
        border-bottom: none !important;
    }

    .o-summary .cp-table tbody tr:last-of-type td {
        border-bottom: 1pt solid #ccc;
    }

    .o-summary .cp-table tbody tr:first-of-type td {
        border-top: none !important;
    }

    .o-summary .cp-table tbody tr.udf-line td {
        border-top: 1px dashed #eee !important;
        padding: 0 10pt;
    }

        .o-summary .cp-table tbody tr.udf-line td span {
            margin-left: -7pt;
        }


            .o-summary .cp-table tbody tr.udf-line td span:nth-of-type(4) {
                clear: left;
            }

        .o-summary .cp-table tbody tr.udf-line td:first-child {
            font-weight: normal;
        }

pre {
    white-space: pre-line;
}

@keyframes pop-in {
                0% { opacity: 0;transform: scale(2);  }
                100% { opacity: 1;transform: scale(1);
                    -webkit-transform: rotate(10deg);
                    -o-transform: rotate(10deg);
                    -moz-transform: rotate(10deg);
                    -ms-transform: rotate(10deg);}
            }
        @-webkit-keyframes pop-in {
            0% { opacity: 0;-webkit-transform: scale(2); }
            100% { opacity: 1;-webkit-transform: scale(1);
                -webkit-transform: rotate(10deg);
                -o-transform: rotate(10deg);
                -moz-transform: rotate(10deg);
                -ms-transform: rotate(10deg);}
        }
        @-moz-keyframes pop-in {
            0% { opacity: 0;-moz-transform: scale(2); }
            100% { opacity: 1;-moz-transform: scale(1);
                -webkit-transform: rotate(10deg);
                -o-transform: rotate(10deg);
                -moz-transform: rotate(10deg);
                -ms-transform: rotate(10deg);}
        }
            

.pop-in {
    -webkit-animation: pop-in 1.5s;
    -moz-animation: pop-in 1.5s;
    -ms-animation: pop-in 1.5s;
}

.stamp {
    position: absolute;
    top: 25pt;
    right: 45%;
    z-index: 0;
    width: auto;
    opacity: 0.8;
    border-radius: 5pt;
    padding: 20pt;
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    text-transform: uppercase;
    font-weight: bold;
    height: auto;
    max-width: 161pt;
    text-align: center;
    line-height: 18pt;
}

.order-form-wrapper #buttons {
    text-align: right;
    margin-top: 15pt;
}

.total-stale {
    text-decoration: line-through;
}

.search-list-item ul {
    max-width: 30%;
    padding: 10px 30px;
    list-style-type: none;
    line-height: 15pt;
    border-top: none;
}

.search-list-item .ui-widget.ui-widget-content {
    max-height: 100pt;
    overflow: auto;
}

body.error-page .main {
    padding-left: 0;
}

#fatal-error {
    padding: 30pt;
    margin: 50pt auto;
    width: 100%;
    height: auto;
    max-width: 50vw;
    display: none;
    background: #fff;
    border: 1px solid #ccc;
}



.order-summary .order-total {
    margin-top: 10pt;
}

.order-summary .f-itemline {
    padding: 5px 21px 2px 21px;
}

#notAuthWrapper table{
    margin: 10vh auto;
}

/************************************************** #B2B Catalog ************************************************************/

.tooltip.show.cart-tip{
    margin: 0;
    z-index:999;
}

.itm-desc {
    margin: 20px auto;
    text-align: center;
}

h1.itm-desc {
    margin-left: 4px
}

.itm-desc img {
    margin: auto;
}

a.itm-img img.placeholder {
    width: auto;
    height: auto;
    max-height: 230pt;
    max-width: 100%;
}

liquid-content div.ko-component{
    padding: 0;
}

.collection-filters {
    padding: 10pt 0 0;
    clear: both;
    text-align: center;
}

    .collection-filters nav {
        display: inline-block;
        width: auto;
        float: left;
        margin-left: 27pt;
    }

    .collection-filters select {
        display: inline-block;
        width: auto;
        vertical-align: top;
        float: left;
        margin-left: 10pt;
    }

        .collection-filters select#itm-per-page {
            margin-left: 20pt;
        }

    .collection-filters .toggle-view {
        display: inline-block;
        vertical-align: top;
        margin: -5pt 30pt 2pt 10pt;
        float: right;
    }

        .collection-filters .toggle-view a.active, .collection-filters .toggle-view a.active:hover, .collection-filters .toggle-view a.active:focus, .collection-filters .toggle-view a.active:active {
            text-decoration: none !important;
            cursor: default;
        }

.products-tile {
    padding: 20pt 40pt;
    clear: both;
}

    .products-tile .itm-info {
        text-align: center;
        line-height: 13pt;
        min-height: 280pt;
    }

        .products-tile .itm-info a {
            display: block;
        }

            .products-tile .itm-info a.itm-img {
                height: 230px;
                margin-bottom: 10pt;
                max-width: 100%;
                overflow: hidden;
            }

    .products-tile a.itm-img img {
        width: auto;
        border-radius: 2pt;
        margin: auto;
        height: 230px;
        max-height: 100%;
    }

.variant-btn {
    max-width: 50%;
    margin: auto;
}

.qty-wrap {
    padding: 0;
}

.price-na {
    padding: 0 0 0 9pt;
}

.products-list .price-na .qty-toggle {
    text-align: left;
    padding-top: 30pt;
}

.products-tile .qty-toggle {
    margin: 5pt auto;
}

.products-tile .variant-btn {
    margin-top: 8pt;
    min-width: 150px;
    margin-bottom: -1px;
}


.qty-toggle input[type=text] {
    width: 30pt;
    margin: auto 5pt;
    text-align: center;
}

.products-list {
    width: 100%;
    display: block;
    margin: auto;
    float: none;
    clear: both;
}

    .products-list .itm-info {
        padding: 20pt;
        margin-top: -1px;
    }

    .products-list .list-itm-img {
        float: left;
        display: inline-block;
        width: 20%;
        height: auto;
        margin-right: 20pt;
    }

    .products-list a.itm-img img {
        width: auto;
        max-height: 100pt;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 12pt auto;
    }

    .products-list .list-itm-price {
        text-align: center;
        vertical-align: middle;
        padding: 25pt 0;
    }


    .products-list .list-itm-desc a {
        line-height: 12pt;
        margin: 10pt auto;
        display: block;
    }

    .products-list .itm-desc {
        margin: auto;
    }

    .products-list .qty-toggle {
        padding: 23pt 0 0 0;
        text-align: right;
        display: inline-block;
    }

    .products-list .variant-btn {
        margin-top: 23pt;
    }

    .products-list .qty-btn {
        clear: both;
        margin: 0 auto;
        display: inline-block;
        width: auto;
        padding: 5pt 3pt;
    }

p#onHand h3 {
    margin: -20pt auto 0;
    font-weight: 600;
}

div.price-and-availability {
    display: block;
}

    div.price-and-availability #availability {
        color: green;
    }

    div.price-and-availability #backorder {
        color: gray;
    }

        div.price-and-availability #backorder.not-permitted {
            color: red;
        }

    div.price-and-availability #availability.out-of-stock {
        color: red;
    }

section.itm-img, section.itm-details {
    padding: 50pt 10pt 10pt;
}

    section.itm-img .main-img {
        width: 92%;
        height: auto;
        margin: 2pt auto;
    }

    section.itm-img ul.additional-imgs li img {
        width: 100%;
        height: auto;
    }

.varients-contain {
    padding: 0;
    margin: 10pt auto 30pt;
}

    .varients-contain label {
        display: inline;
    }

    .varients-contain select {
        width: 15%;
        margin: 0 20pt 0 0pt;
    }

    .varients-contain input {
        width: 40pt;
        margin: 0 10pt 0 0;
    }

.remarks {
    height: auto;
    min-height: 200pt;
    padding: 10pt 45pt;
}

.additional-info {
    height: auto;
    min-height: 200pt;
    padding: 10pt 45pt 10pt 10pt;
}

    .additional-info label {
        display: inline-block;
        width: auto;
        min-width: 51%;
        font-style: italic;
        font-weight: 600;
    }

.additional-info ul{
    padding-left: 0;
}

.list-add-props li label {
    display: inline-block;
    width: auto;
    min-width: 35%;
    font-style: italic;
    font-weight: 600;
}


.additional-info li {
    list-style: none;
    line-height: 10pt;
    margin-left: 0 !important;
}

    .additional-info li span, .list-add-props li span {
        display: inline-block;
        max-width: 46%;
        vertical-align: text-top;
    }

.list-add-props {
    margin-top: 10pt;
}

    .list-add-props li {
        list-style: none;
        line-height: 8pt;
        margin-left: -15px;
    }

.user-actions #ctl00_B1SecurityPanel1 {
    width: fit-content;
    display: inline-block;
}

.user-actions #ctl00_B1SecurityPanel1 div{
    display: inline-block;
}

.b2b-enabled {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    margin-bottom: -1.1rem;
}


.b2b-disabled, .b2b-enabled {
    display: inline-flex;
}

.b2b-disabled a, .b2b-enabled a{
    position: relative;
}

.b2b-enabled cart-widget a#cart{
    margin-top: -0.3rem;
}

.side-nav .b2b-disabled, .side-nav .b2b-enabled, .side-nav cart-widget {
    width: 100%;
    flex-direction: column
}

#ctl00_div2CartWidget .cart-content{
    display:none;
}

.side-nav .b2b-disabled a {
    margin: 1.1rem auto 0;
}

.b2b-enabled i.itm-count, .navbar-header .b2b-enabled a#cart i.itm-count, .b2b-disabled a#cart i.itm-count, .b2b-disabled i.itm-count {
    border-radius: 1rem;
    right: -0.3rem;
    display: inline-flex;
    top: -0.5rem;
    position: absolute;
    transform: rotate(-15deg);
    min-height: auto;
    margin-right: 0;
    vertical-align: baseline;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0 0.3rem;
    border-radius: 1rem;
    height: 1.1rem;
    width: 1.1rem;
}

.navbar-header .b2b-enabled i.itm-count {
    right: -0.3rem;
    top: -1.3rem;
}

.general-links .b2b-enabled i.itm-count{
    left: 1.8rem;
}

.b2b-enabled .input-group {
    position: fixed;
    border-radius: 2pt;
    display: none;
    width: 34rem;
    max-width: 90vw;
    height: 6rem;
    padding: 2rem 1rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 15px 0px #ccc;
}

.b2b-enabled .input-group a{
    display: inline-block;
    width: auto;
    height: auto;
    border-radius: 0.2rem;
    min-height: 1.8rem;
    margin-top: 0;
    margin-bottom: 0;
}

.navbar-header .user-actions div.b2b-enabled{
    width: fit-content;
    display: inline-block;
}

.navbar-header .b2b-enabled a#cart, .navbar-header .b2b-enabled a#search {
    padding: 0.3rem;
    height: 2.1rem;
    border-radius: 0.5rem;
    margin-top: 1.1rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.2rem;
    width: 2.3rem;
}

.b2b-enabled .input-group.show, .b2b-enabled .input-group.collapse.in {
    display: block;
}

[type=submit] {
    -webkit-appearance: unset;
}

.b2b-enabled .input-group .search-input {
    width: calc(100% - 2.55rem);
    margin-right: -0.3rem
}

.shopping-cart {
    box-shadow: #ccc 2pt 6pt 10pt;
    overflow: auto;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 38rem;
    max-width: 90vw;
    min-height: 13rem;
    max-height: 35rem;
}

.shopping-cart .cart-title, .shopping-cart .cart-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.shopping-cart .cart-title h1{
    margin: 1rem;
}

.shopping-cart.empty p, p.empty {
    margin: 1rem;
    font-style: italic;
    clear: both;
}

.shopping-cart.empty p span, p.empty span{
    vertical-align: text-top;
}

.cart-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 5rem;
    height: auto;
    max-height: 26rem;
}

.cart-qty input {
    width: 4rem;
    text-align: center;
}

#close-cart {
    margin: 1rem !important;
    padding: 0 !important;
}

.user-actions a#close-cart span {
    display: inline-block;
}

.cart-itms {
    border-bottom: 1px solid #ccc;
    padding: 0.5rem 0;
    margin: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.cart-itms div.cart-remove a{
    text-align: right;
}

.cart-itms p, .cart-itms a{
    margin: 0 !important;
}

    .cart-itms div {
        padding: 0.5rem;
    }

        .cart-itms div.cart-img {
            padding: 0;
        }

    .cart-itms .itm-img img {
        max-width: 80%;
        max-height: 70pt;
    }

.cart-itm-name {
    overflow: hidden;
}

.shopping-cart .est-total {
    padding: 0 1rem;
}

.shopping-cart .est-total p{
    margin: 0;
}

.shopping-cart .checkout-btn {
    text-align: right;
    padding: 0 1rem;
}

.shopping-cart .checkout-btn .btn {
    padding: 3pt !important;
    margin: 1rem 0 1rem 1rem;
}

.shopping-cart a, .shopping-cart .btn, .b2b-enabled .input-group a, .b2b-enabled .input-group .btn {
    display: inline-block;
    width: auto !important;
    height: auto;
}

.b2b-enabled .input-group i {
    width: auto !important;
    margin: auto !important;
    min-height: initial !important;
}

.itm-img .carousel-indicators {
    position: static;
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
    list-style: none;
    flex-direction: row;
    flex-wrap: wrap;
}

    .itm-img .carousel-indicators li, .itm-img .carousel-indicators li.active {
        display: inline-block;
        width: 33.3%;
        height: auto;
        margin: auto;
        text-indent: 0;
        cursor: pointer;
        background-color: none;
        border: none;
        border-radius: 0;
    }

        .itm-img .carousel-indicators li.active img {
            border-radius: 2pt;
        }

.product-search-menu {
    position: relative;
}

    .product-search-menu #close-search {
        position: absolute;
        top: 0;
        right: 0;
    }

    .product-search-menu #close-search{
        background: transparent !important;
    }

    .product-search-menu #close-search .fas{
        display: block;
    }

    .product-search-menu .btn {
        position: absolute;
        top: 2rem;
        right: 1rem;
    }

.search-results {
    width: 32rem;
    position: fixed; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, 8.5%);
    max-height: 10rem;
    overflow: auto;
}

.search-results a{
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    text-align: left !important;
    border-radius: 0 !important;
}

.search-results p{
    margin: 0;
}

.collection-contain{
    max-width: 80vw;
    margin: auto;
}

.product-search-contain .input-group {
    max-width: 70%;
    margin: 40pt auto 10pt;
}

    .product-search-contain .input-group .form-control {
        z-index: 0;
        width: calc(100% - 32pt);
    }


    .product-search-contain h2{
        text-align: center;
    }

    .product-search-contain strong{
        word-break: break-all;
    }

     .product-search-contain .input-group .btn{
         margin-left: -1pt;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
     }

     .product-search-contain .input-group .btn span{
         line-height: 11.5pt !important;
      }


.itm-details li {
    margin-left: 30pt;
}

.main-content-box.product-details {
    padding-top: 0;
}

/***Variants***/

.var-contain {
    padding: 0;
}

    .var-contain a#addToCart {
        margin-bottom: 10pt;
    }

.var-filters div {
    min-width: 20%;
    padding: 10pt 20pt;
    min-height: 25%;
    margin: 20pt auto;
}

    .var-filters div:first-of-type {
        margin-left: 0;
        border-left: none;
        padding-left: 10pt;
    }

.var-filters ul{
    padding-left: 0;
}

.var-filters li {
    list-style: none;
    margin-left: -3pt;
    display: block;
    clear: both;
    padding-left: 1pt;
}

    .var-filters li input {
        width: auto !important;
    }

    .var-filters li label {
        margin-top: 0 !important;
    }

.variants-table {
    min-width: 100%;
    text-align: left;
    margin: 40pt 0;
}

    .variants-table th {
        font-weight: normal;
        padding: 8pt 5pt;
    }

        .variants-table th.v-stock {
            width: 70px;
        }

        .variants-table th.v-qty {
            width: 95px;
        }

    .variants-table td {
        vertical-align: top;
        padding: 5pt;
        line-height: 25pt;
    }

    .variants-table .stockQTY {
        width: 70pt;
        text-align: center;
    }


/***End Variants***/

.pagination {
    margin-top: 7pt;
    margin-bottom: 0;
}

.pagination > li > a, .pagination > li > span {
    padding: 3pt;
}


/***************************************** #Service Calls *******************************************************/

/*Service Call Details*/

.service-call-details {
    width: 800px;
    max-width: 90%;
    padding-top: 16pt;
}

.service-detail-list{
    margin-top: 1rem;
}

#serviceCallWrapper .form-control {
    display: block;
    margin-bottom: 5pt;
}

#globalServiceCallWrapper .panel {
    padding: 0;
    margin: 20pt auto;
}

#globalServiceCallWrapper .panel-body {
    padding: 15pt;
}

#globalServiceCallWrapper .panel-default > .panel-heading {
    font-weight: 200;
}

#globalServiceCallWrapper .form-group {
    min-height: 23pt;
}

#globalServiceCallWrapper .display_label {
    display: block;
}

/************************************************** #Employee Login *******************************************************/

.single-page-logout {
    padding: 0;
    margin: 15pt auto -60pt;
    height: auto;
}

.ep-login {
    padding-top: 0;
}

    .ep-login .footer {
        margin: 20pt auto;
        text-align: center;
    }

    .ep-login .content-box-header {
        padding-bottom: 0;
        color: inherit;
        font-weight: normal;
        line-height: 1.8em;
        margin-bottom: 13pt;
    }

    .ep-login .btn, .ep-login .btn:hover {
        padding: 3pt 10pt;
        border: none !important;
        margin-bottom: 10pt;
    }

    .ep-login .custom-file-input-button {
        height: 25.5pt;
        padding-top: 6pt;
    }

    .ep-login .dropdown-menu {
        top: 22pt;
        right: 0 !important;
        border-radius: 0;
        border-top: 0;
        max-width: 200pt;
        left: inherit;
        padding: 10pt 0 0 0;
        margin: 0;
    }

        .ep-login .dropdown-menu li .btn {
            padding: 0 0 10pt;
            margin: 0;
            line-height: 14pt;
        }

    .ep-login .btn .fa {
        font-weight: normal;
        vertical-align: text-top;
        padding-right: 5pt;
        line-height: 11pt;
    }

    .ep-login .btn .caret {
        margin-left: 5px;
        margin-right: -5px;
    }

table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
    background-color: transparent;
}

table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: transparent;
}

table.table.dataTable thead th {
    padding-left: 8pt;
    font-weight: bold;
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: 2pt;
}

table.dataTable.no-footer {
    margin-bottom: 20pt;
}

.login-choices ul{
    list-style: none;
    padding: 0;
}

.login-choices ul li{
    display: inline-block;
    margin-right: -3pt;
    width: 50%;
    text-align: center;
}

.login-choise ul li a{
    padding: 3pt;
    text-align: center;
}

/************************************************** #File Manager *******************************************************/

.attachment-table-scroll {
    height: 70%;
    max-height: 50vh;
    overflow: auto;
}

.table.attachment-table tr td:last-of-type {
    text-align: right !important;
    width: 55pt;
}

.table.attachment-table tr th:last-of-type {
    text-align: center;
}

.no-padding {
    padding: 0;
}

#snapShotListing {
    padding-bottom: 0;
    margin-bottom: 10pt;
    padding-top: 0;
    margin-top: 0;
}

    #snapShotListing .fa {
        line-height: 25pt;
    }

        #snapShotListing .fa:hover {
            cursor: pointer;
        }

.choose-file {
    padding: 20pt 0 0 0;
}

    .choose-file .filedrag {
        border: none;
        padding: 15pt 0 0 0;
    }

    .choose-file .btn-success {
        margin-top: 10pt;
    }

/************************************************** #Error Pages *******************************************************/

.login-page.error-page-custom .sidebar-header{
    margin: 2pt;
}

.login-page.error-page-custom .container{
    width: 100vw;
    max-width: unset;
    margin-left: -32pt;
}

.login-page.error-page-custom .card-body{
    width: 100vw;
}

.login-page.error-page-custom .login-panel {
    top: 25pt;
    left: 0;
    margin: 0;
}

/************************************************** #Dashboard **********************************************************************/
/*B1 View*/
.b1-view .user-actions, .b1-view .navbar-toggle, .b1-view .logout-panel, .b1-view #most-fab, .b1-view .sales-user-nav-btn, .b1-view .breadcrumb-nav a, .b1-view .breadcrumb-nav span,
#dashboard .hide-while-loading, #dashboard .hide-while-loading li {
    display: none !important;
}

.b1-view .breadcrumb-nav {
    color: #fff;
}

.b1-view #dashboard .top-tabbed-navigation.collapse {
    display: block !important;
    top: 38pt;
    width: auto;
    padding: 0;
}

#dashboard .top-tabbed-navigation .dropdown {
    display: inline-block;
}

#dashboard-contents{
    padding: 0 1rem;
}

#dashboard .no-dashboard-available-for-user {
    padding: 5px;
}

.b1-view .top-tabbed-navigation li {
    display: inline-block !important;
    width: auto;
    padding: 0 5px;
    border-right: 1pt solid #3c3c3c;
    border-bottom: none;
}


.b1-view .dash-row .widget-wrapper {
    height: 100% !important;
}

/*Fixed height for older versions of B1*/

.b1-view.old .dash-row .widget-wrapper {
    height: 300pt !important;
}

/*End B1 View*/

/*Links for table dashboard*/

.widget-menu-link {
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    position: absolute;
    top: -1.4rem;
    right: 0;
}

/***/

.widget-overflow {
    overflow: hidden; /*Prevents SVG images overflowing on screen resize*/
    display: flex;
    justify-content: center;
}

.dashboard-edit-page{
    overflow-x: hidden;
}

.dashboard-nav-btn {
    display: none;
}

.google-visualization-table-table {
    border: none !important;
    border-collapse: collapse;
}

.dashboard-panel {
    padding: 0;
}

    .dashboard-panel .card-title {
        border: none;
        background-image: none;
        padding: 10px;
    }

    .dashboard-panel h4 {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .dashboard-panel .btn-link {
        line-height: 1.8em;
        padding: 1pt 6pt;
        text-decoration: none;
    }

.ep-dash-total {
    text-align: right;
}

    .ep-dash-total .btn-link {
        padding: 0;
        clear: both;
        margin-right: -12px;
        text-align: right;
        line-height: 3pt;
        display: block;
    }

#dashboard .modal-dialog {
    max-width: 320pt !important;
}

#dashboard #prompt-title {
    display: none;
}

.dashboard-subnav {
    position: fixed;
    top: 4.4rem;
    right: 4pt;
    z-index: 15;
    display: inline-block;
    width: auto;
    z-index: 899;
}

    .dashboard-subnav select {
        display: inline-block;
        float: right;
    }

    .dashboard-subnav a {
        margin: 0 10px;
    }

#dashboard {
    list-style: none;
    padding: 0;
}

#dashboard .top-tabbed-navigation{
	padding: 0.3rem;
}

#dashboard .top-tabbed-navigation .input-group-addon, .order-date-picker-wrapper .input-group-addon, .order-form-wrapper .input-group-addon, .expense-name-date .input-group-addon, #expenseFields .input-group-addon {
    width: auto;
    margin-right: 0pt;
    background: none;
    border: none;
    display: inline-block;
}

#dashboard .top-tabbed-navigation .input-group input {
    max-width: 100pt;
    background: transparent !important;
}

.expense-name-date .input-group input {
    background: transparent;
}

#dashboard .top-tabbed-navigation .input-group-addon, .expense-name-date .input-group-addon {
    margin-left: -22pt;
    margin-right: 10pt;
}

.input-group.date {
    background: #fff;
    max-width: fit-content;
    border-radius: 0.3rem;
}

#dashboard .top-tabbed-navigation .form-control, .expense-name-date .form-control {
    width: auto;
    height: 20pt !important;
    margin: 0 -0.2rem 0 0;
    line-height: 12pt;
}

#dashboard .top-tabbed-navigation label, .order-date-picker-wrapper label {
    vertical-align: top;
}

#dashboard .top-tabbed-navigation input, .order-date-picker-wrapper input, .expense-name-date input {
    border-radius: 2pt;
    height: 22pt;
}

#dashboard .top-tabbed-navigation .refresh-dashboard-page{
    display: none;
}

#dashboard .top-tabbed-navigation a.fas{
    font-weight: 900;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.widget-wrapper {
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0;
    border-radius: 2pt;
    min-height: 150pt;
    display: flex;
    justify-content: normal;
    align-items: center;
    flex-direction: column;
}

div[data-bind="visible: $data.noData"]{
    position: absolute !important;
    top: 5rem;
}

.gauge-wrapper table {
    margin: auto !important;
}

.google-visualization-table-table th {
    padding: 0.3rem !important;
    font-weight: normal;
}

.google-visualization-table-table td {
    text-align: left;
    padding: 0.5rem !important;
    white-space: nowrap;
}

.google-visualization-table-table th.google-visualization-table-type-number,
.google-visualization-table-table td.google-visualization-table-type-number{
    text-align: right;
}

.editable-widget-wrapper {
    display: table;
    width: 100%;
    height: 100%;
    cursor: 0;
    padding: 10px 16px;
}

    .editable-widget-wrapper:active {
        cursor: 0;
    }

    .editable-widget-wrapper h1 {
        margin: 0 0 12px;
        padding: 0;
    }

    .editable-widget-wrapper h6 {
        font-weight: 400;
        font-style: italic;
        margin: 0 0 10px;
        padding: 0;
    }

    .editable-widget-wrapper .widget-icon {
        margin: 0;
    }

.inner-widget-wrap {
    padding: 0;
    width: 100%;
    position: relative;
}

.col .inner-widget-wrap {
    max-width: 45vw;
}

.widget-wrapper h1 {
    display: inline-block;
    width: 100%;
    font-weight: 600;
    text-align: center;
    margin: 0;
    padding: 0.5rem 0 0;
}

    .widget-wrapper h1 span {
        position: relative;
        z-index: 5;
    }

.global-widgets-wrapper .col-md-3, .widget-droppable-wrap .widget-col, .global-widgets-wrapper .col-md-12, .widget-col {
    padding: 5pt;
}


/* KPI */

.kpi-value {
    display: table;
    margin: 0 auto;
    padding: 10px 0 0;
    width: auto;
    text-align: center;
}

.red .larger-better.kpi-value .red-arrow {
    display: block;
    margin-top: 20%;
}

.red .lower-better.kpi-value .red-arrow-lower-better {
    display: block;
}

.yellow .kpi-value .yellow-arrow {
    display: block;
    margin-top: 12%;
}

.green .larger-better.kpi-value .green-arrow {
    display: block;
}

.green .lower-better.kpi-value .green-arrow-lower-better {
    display: block;
    margin-top: 20%;
}

.kpi-value img, .kpi-value span {
    float: left;
}

.kpi-value img {
    padding: 0;
}

.kpi-subtitle {
    display: inline-block;
    width: 100%;
    font-weight: 600;
    text-align: center;
    padding: 0;
}

.kpi-previous-value {
    display: block;
    width: 100%;
    text-align: center;
    font-style: italic;
}

.red-arrow, .yellow-arrow, .green-arrow, .red-arrow-lower-better, .green-arrow-lower-better {
    display: none;
}

.ct-chart-line .ct-series-a .ct-point {
    display: none;
}

#line-chart-target {
    margin-top: 30px;
}

#LeadtoQuoteRatioRep .ct-chart {
    max-height: 400px;
}

    #LeadtoQuoteRatioRep .ct-chart .ct-series.ct-series-a .ct-area {
        fill: transparent;
    }

.refresh-dashboard-page {
    display: none;
}

.pie-chart-colours {
    margin: 0;
    padding: 0;
}

    .pie-chart-colours li {
        list-style-type: none;
        font-size: 11px;
    }

#gauge-div {
    display: block;
    margin: 0 auto;
    width: 240px;
    height: 250px;
}

.inner-widget-wrap .table {
    border-color: transparent !important;
    box-shadow: none !important;
}

.google-visualization-table {
    max-height: 350px !important;
    overflow: auto;
}

.google-visualization-table-th {
    border: none !important;
}

.google-visualization-table-th,
.google-visualization-table-td {
    padding: 4px !important;
}

.widget-col.col-height {
    display: block;
}

/***
  EDITABLE DASHBOARD
  ***/

.edit-widgets-navbar-actions {
    position: fixed;
    top: 45pt;
    left: 0px;
    z-index: 103;
    display: inline-block;
    padding: 8px 6px;
    width: 100vw;
}

    .edit-widgets-navbar-actions .btn {
        font-weight: 400;
    }

.widget-droppable-wrap {
    margin: 0 8pt 5pt;
    padding: 14px 10px;
    width: 100%;
    max-height: 100%;
    border-radius: 2pt;
}

.global-widgets-wrapper-edit {
    display: inline-block;
    padding: 0px 20px;
    float: left;
    position: relative;
    width: calc(100vw - 25rem);
    height: calc(100vh - 9rem);
}


    .global-widgets-wrapper-edit .ui-sortable-placeholder, .widget-drawer .ui-sortable-placeholder {
        visibility: visible !important;
        border: 2pt dashed #ccc;
        background: transparent;
    }

.widget-drawer .ui-sortable-placeholder {
    width: 100% !important;
    max-width: 100% !important;
}

.widget-drawer {
    display: inline-block;
    padding: 30pt 20px;
    width: 230pt;
    float: right;
    height: calc(100vh - 6rem);
    /* overflow: hidden; commented because it was causing cards to be hidden on drag */
    position: absolute;
    top: -1rem;
    right: 0;
    bottom: 0;
}

    .widget-drawer h1 {
        margin: 0;
        padding: 0 0 10px 0;
        text-align: center;
        font-weight: 600;
    }

.available-widget {
    display: inline-block;
    margin: 10px 0 0 0;
    padding: 8px 10px 0px 10px;
    width: 100%;
    text-align: left;
    border-radius: 2pt;
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

    .available-widget:active {
        cursor: -webkit-grabbing;
        cursor: -moz-grabbing;
    }

.widgets-droppable-area {
    padding-bottom: 200px;
    max-height: 100%;
    overflow: auto;
}

.available-widget img {
    display: inline-block;
    margin-top: -4px;
    padding-right: 10px;
    width: 36px;
    float: left;
}

.available-widget p {
    display: inline-block;
    font-size: 14px;
    float: left;
}

.ui-sortable-helper {
    transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}

.line-editable-actions {
    position: relative;
    bottom: -1rem;
    float: right;
}

    .line-editable-actions li {
        display: inline-block;
        list-style-type: none;
        float: right;
    }

    .line-editable-actions a {
        position: relative;
        top: 0;
        transition: all .2s ease-in-out;
    }

        .line-editable-actions a:hover {
            top: -3px;
            cursor: pointer;
        }

.remove-edit-size-wrap {
    display: inline-block;
    width: 100%;
}

.edit-widget-size {
    display: inline-block;
    width: 100%;
}

    .edit-widget-size label {
        font-weight: bold;
    }

    .edit-widget-size select {
        padding: 0;
    }

.remove-edit-size-wrap a {
    margin-bottom: 6px;
    padding: 5px 0;
    clear: both;
}

.dash-all-widgets-used {
    padding-top: 20px;
    font-style: italic;
    text-align: center;
}

/* DASHBOARD WIDGETS END */

.date-small {
    display: none;
}

.date-large {
    display: inline-block;
}

.date-large, .date-small {
    width: auto;
}

/************************************************** #Media Queries ************************************************************/

/******************************* #Desktops and LapTops ****************************/

@media screen and ( max-width: 1480px ) {

    #SalesRevYTD {
        overflow-x: scroll;
    }
}

@media (max-width: 1201px) {
    #prod-carousel {
        /* max-width: 30%;*/
        height: auto;
        margin: auto;
    }
}

@media (max-width: 1280px) {
    .row.welcome-contain {
        max-width: 98%;
    }

    .collection-contain {
        max-width: 100%;
    }
}

/******************************* #Tablets *****************************************/

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

    #dashboard{
        margin-top: 3rem;
    }

    .dashboard-subnav {
        display: none;
    }

    .sales-user-nav-btn .fa-chevron-down:before {
        content: "\f077";
    }

    .sales-user-nav-btn.collapsed .fa-chevron-down:before {
      content: "\f078";
    }

    .inner-widget-wrap {
        padding: 10px 2px;
    }

    .kpi-value img {
        padding: 0
    }

    #dashboard .top-tabbed-navigation .input-group input {
        min-width: 100pt;
    }

    .dash-options-cal {
        left: 0;
        max-width: 100vw;
        top: 76pt;
    }

    .dashboard-edit-page .sidebar {
        display: none !important;
    }

    .dashboard-edit-page .main {
        padding-left: 0;
    }

    .edit-widgets-navbar-actions {
        left: 0;
    }

        .edit-widgets-navbar-actions .btn {
            padding: 0 10px;
        }

    .editable-widget-wrapper {
        margin-bottom: 10px;
    }

    .global-widgets-wrapper {
        padding-top: 0;
    }

    .dash-options-cal.collapse {
        display: none;
    }

        .dash-options-cal.collapse.in {
            display: block;
        }

    .dashboard-nav-btn {
        z-index: 7 !important;
    }

    .inner-widget-wrap {
        width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 1024px) {

    .dashboard-subnav {
        display: none;
    }

    .mobile-quick-lnks a {
        max-width: unset;
        width: 24%;
    }
    
    /*Welcome Page*/

    .banner-full {
        width: 100vw;
    }

    .row.welcome-contain {
        max-width: 100%;
    }

    .welcome-msg {
        margin: 0;
    }

    .no-margin, .expense-user .checkbox label span, .row, .data-item-wrapper {
        margin: 0;
    }

    .panel {
        padding: 30px 10px 0;
    }

    .landing-page .panel{
        padding: 0 10pt;
    }

    /*Cart*/

    .navbar .shopping-cart h1 {
        margin-left: 0;
    }

    /*Collections*/

    .products-list .list-itm-img {
        width: 40%;
    }

    /*Order Pad*/

    .f-codename .col-md-4 {
        width: 40%;
    }

    .order-form-wrapper {
        padding: 45pt 15pt;
    }

    .o-line-total {
        text-align: left;
    }

    .o-summary {
        padding-top: 20pt;
    }

        .o-summary .billing-doc-info {
            padding-left: 10pt;
        }

            .o-summary .billing-doc-info .btn-success {
                margin-left: 10pt !important;
            }

            .o-summary .billing-doc-info .udf-line .col-md-4 {
                margin-left: 0;
            }

    /*B2B*/

    #prod-carousel {
        max-width: unset;
        height: auto;
        margin: auto;
    }

    .variant-btn {
        max-width: 60%;
    }

    .var-filters div {
        min-width: 20%;
        padding: 10pt 7pt;
        min-height: 14vh;
        margin: 20pt auto;
    }

    .var-filters li label {
        max-width: 50%;
    }

    .products-list .qty-toggle{
        display: block;
        text-align: center;
    }

    .products-list .qty-wrap {
        display: block;
        text-align: center;
    }

}

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

    .dashboard-edit-page .top-tabbed-navigation {
        display: none;
    }

    .inner-widget-wrap .table-responsive {
        max-width: 100vw;
    }

    .widget-wrapper {
        max-width: 100%;
        display: inline-block;
    }
}

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

    /*Full width dashboard widgets on phone*/

    .widget-col.col-height {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .kpi-value img {
        height: 1em;
    }
}

@media screen and (max-width: 880px) {

    /*Search*/

    .b2b-enabled .input-group {
        width: 100%;
    }

        .b2b-enabled .input-group .form-control {
            height: 30pt;
        }

    .search-results {
        width: 100%;
        left: 0;
        right: 0;
        max-width: 100vw;
    }

    /*Overriding bootstrap styles for dashboard*/

    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 0;
    }

    /*Product Listing*/

    .collection-filters .toggle-view {
        margin: 2pt 16pt 2pt 100pt;
    }

    .collection-filters select {
        width: 13%;
        margin: 0 5pt;
    }

    .products-list .variant-btn{
        float: right;
        margin-top: -19pt;
    }

    .products-list .list-itm-img {
        float: left;
        display: inline-block;
        height: auto;
        margin-bottom: 10pt;
        margin-right: 20pt;
    }

    .collection-filters select#itm-per-page {
        margin-left: 20pt;
    }

    /*Cart*/

    .cart-scroll {
        height: 148pt;
    }

    /*Product View*/

    .collection-filters nav {
        margin: auto;
        display: block;
    }

    section.itm-details {
        padding: 20pt 10pt;
    }

    section.itm-title {
        padding: 30pt 10pt 0;
    }

        section.itm-title h1 {
            margin-bottom: 0;
        }

    section.itm-img {
        padding: 20pt 10pt;
    }

    .varients-contain select {
        width: 35%;
    }

    .remarks {
        padding: 0 0 10pt 10pt;
        min-height: initial;
    }

    .additional-info {
        border-right: 0 !important;
        padding: 10pt;
        min-height: initial;
    }

    .var-filters div:first-of-type, .var-filters div {
        padding-left: 10pt;
    }

    .var-filters li label {
        max-width: 45%;
    }

    .remarks {
        border: none !important;
    }

    #prod-carousel {
        height: auto;
        margin: auto;
    }

    .product-details{
        width: 100vw;
        max-width: 100vw;
        margin-left: -10pt;
        border: none;
        margin-top: -11pt;
    }


    body.product-det-page .main-content-box {
        border: none;
    }

    /*Welcome*/

    .static-banner {
        height: 40vh;
    }

    /*Make Payment*/

    #statementsWrapper {
        padding-bottom: 50pt;
    }

    .payment-totals-wrapper span {
        float: none;
        margin-bottom: 5pt;
        margin-right: 0;
        display: inline-block;
    }

    .on-account-wrapper input {
        margin-right: 0;
    }

    /*Reports*/

    #report-display{
        overflow-x: auto;
    }
}

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

    .inner-widget-wrap {
        padding: 10px 2px;
    }

    .kpi-previous-value {
        padding: 4px 0 10px 0;
    }

    #gauge-div, #pie-chart, #donut-chart {
        width: 100%;
    }

    .edit-widgets-navbar-actions {
        left: 0;
    }

        .edit-widgets-navbar-actions .btn {
            padding: 0 10px;
        }

    .global-widgets-wrapper-edit {
        width: 62%;
    }

    .editable-widget-wrapper {
        margin-bottom: 10px;
    }

    .col-full-height {
        height: auto;
    }
}

@media (max-width:843px) {
    /*Collections*/

    .products-list .list-itm-price {
        padding: 15pt 15pt 0 0;
        width: 100%;
        text-align: left;
        margin-top: 0px;
    }


    .products-list .qty-toggle {
        padding: 10pt 0 0 0%;
    }

    .products-list .list-itm-img {
        margin-bottom: 0;
    }

    .products-tile {
        padding: 10pt 0;
    }

    /*Welcome Page*/
    .welcome-msg {
        width: 100vw;
    }

    /*Order Summary*/

    .o-summary .btn-success {
        margin-bottom: 10pt;
    }

    /*Payments*/
    .paymentInputContainer{
        margin: 20pt 0;
    }
}

/******************************* #Phones ******************************************/

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

    .kpi-value img {
        height: 2em;
    }

    .red .larger-better.kpi-value .red-arrow,
    .red .lower-better.kpi-value .red-arrow-lower-better,
    .yellow .kpi-value .yellow-arrow,
    .green .larger-better.kpi-value .green-arrow,
    .green .lower-better.kpi-value .green-arrow-lower-better {
        margin-top: 0;
    }
}

@media only screen and (max-device-width : 769px) {

    .dash-date-picker-wrapper {
        float: left;
        clear: both;
        margin-top: 10pt;
    }
}

@media (min-width: 768px) {
    .col-sm-height {
        display: table-cell;
        float: none !important;
    }

    .kpi-value span {
        font-size: 26px;
        line-height: 10pt;
    }

    .red .larger-better.kpi-value .red-arrow,
    .red .lower-better.kpi-value .red-arrow-lower-better,
    .yellow .kpi-value .yellow-arrow,
    .green .larger-better.kpi-value .green-arrow,
    .green .lower-better.kpi-value .green-arrow-lower-better {
        margin-top: 0;
    }
}

@media (max-device-width: 767px) {

    .col-height {
        display: block !important;
        margin-bottom: 10px;
        float: none !important;
    }

    .widget-wrapper {
        min-height: 100pt;
    }

    #pie-chart {
        display: block;
        margin: 0 auto;
        max-width: 300px;
    }
}

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

    .edit-layout.fas {
        display: none;
    }

    .inner-widget-wrap {
        padding: 0;
        border-right: none;
        border-bottom: none;
    }

}

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

    .inner-widget-wrap .table-responsive {
        border: 0;
        margin-bottom: 15px;
        overflow: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
}

@media (max-width:740px) {

    /*Make Payment*/

    .pay-on-account {
        width: 40%;
    }

    /*order pad*/
    .f-codename .col-md-4 {
        width: 50%;
    }

    .stamp {
        right: 42%;
        padding: 3pt;
        top: 50pt;
        width: 123pt;
    }


    .pricing-config-error {
        max-width: 97%;
    }

    /*Product Details*/

    .itm-img .carousel-indicators li, .itm-img .carousel-indicators li.active {
        width: 24.3%;
    }

    section.itm-img ul.additional-imgs li img {
        width: 60%;
    }

    .var-filters div:first-of-type, .var-filters div {
        padding: 0 10pt;
        border: none;
        margin: 10px auto;
    }

    .products-tile .itm-info {
        min-height: 215pt;
    }

    /*order summary*/

    .o-summary .doc-logo{
        top: 25pt;
    }

    .products-list .qty-wrap {
        text-align: left;
    }


    .products-list .qty-toggle {
        display: inline-block;
        text-align: left;
    }
}

@media (max-width:670px) {
    .collection-filters select {
        width: 28%;
        margin: 0 10pt 0 0pt;
    }

        .collection-filters select#itm-per-page {
            margin-left: -24px;
        }

    .collection-filters nav {
        margin: 10pt auto;
        display: block;
        float: none;
    }

    .products-tile .itm-info a.itm-img {
        height: 88pt;
    }

    .payment-methods label {
        margin-right: 20pt;
    }

    .f-codename .col-12 {
        float: none;
        clear: both;
    }

    .navbar .shopping-cart h1 {
        margin-bottom: 0;
    }
}

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

    .dash-date-picker-wrapper {
        width: 100%;
        float: left;
    }
}

@media (max-width:560px) {

    .products-tile .itm-info {
        width: 100%;
    }

    #prod-carousel{
        max-width: unset;
    }

    .mobile-quick-lnks a{
        max-width: unset;
        width: 25%;
        margin-right: -4pt;
    }
}

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

    /* Dashboad */

    #dashboard #table-div {
        width: 89%;
    }

    .edit-layout.fas {
        display: none;
    }
}

@media (max-width:500px) {

    .main-content-box h1.float-right {
        margin-top: 60pt;
        float: none !important;
    }

    .pricing-config-error {
        max-width: 96%;
        margin-left: -3pt;
    }

    .o-summary {
        padding-top: 30pt;
    }

    .stamp {
        right: 6pt;
        padding: 3pt;
        top: 50pt;
        width: 123pt;
    }

    .main-content-box.o-summary h1.float-right {
        margin-top: 50pt;
        margin-left: 0;
    }

    .o-summary.doc-content h1.float-right {
        margin-left: 7pt;
    }

    .o-summary .doc-header {
        margin-right: 6pt;
    }

    .menu-expand {
        display: none;
    }

    .subnav-panel .form-control {
        max-width: 79pt;
    }

    #ctl00_MainContent_ctl00_ddeLayouts {
        max-width: 33vw;
    }

    .products-list .qty-wrap {
        display: inline-block;
        text-align: left;
    }

    .products-list .variant-btn {
        float: none;
        margin-top: 10pt;
    }

    #paymentPageTopBanner{
        overflow: auto;
    }

    #creditCardBillingInfo{
        padding-top: 20pt;
    }

}

@media (max-width: 480px) {

    .dash-choose-salesperson {
        width: 136px;
    }

    .mobile-hidden {
        display: none;
    }

    .dashboard-subnav select {
        display: none;
    }


    .dash-date-picker-wrapper {
        clear: both;
        width: 100%;
    }

        .dash-date-picker-wrapper .date-50 {
            display: inline-block;
            width: 140px;
            float: left;
        }

    #table-div {
        width: 98%;
    }

        #table-div td {
            padding: 2px;
        }
}

@media (max-width:420px) {

    /*Welcome Page*/

    .welcome-msg {
        width: 100vw;
        padding: 20pt;
        margin: 0 0 10pt 0;
    }

    /*Product Listing*/

    .collection-filters .toggle-view {
        margin: 2pt -3pt 2pt -5pt;
    }

    .products-list .list-itm-img {
        width: 100%;
        margin-bottom: 10pt;
        padding-left: 0;
    }

    .products-list .list-itm-price {
        padding: 12pt 0 0;
    }

    .products-list a.itm-img img {
        clear: both;
    }


    /*Make Payment*/

    .pay-on-account {
        width: 70%;
    }

    /*Order Pad*/
    .f-codename .date-picker {
        width: 140px;
    }

    /*Product Details*/

    section.itm-img .main-img {
        width: 92%;
    }

    .itm-img .carousel-indicators li, .itm-img .carousel-indicators li.active {
        width: 33.3%;
    }

    section.itm-img ul.additional-imgs li img {
        width: 100%;
    }
}

@media (max-width:360px) {

    #ctl00_PageHeader_spAddToOrder a {
        padding: 3pt;
    }

    .payment-methods label {
        margin-right: 0pt;
    }

    .order-form-wrapper {
        width: 100% !important;
    }

    .b2b-enabled i.itm-count {
        left: 16pt;
    }

}

/************************************************** #Knockout Components ************************************************************/

.ko-component {
    opacity: 0;
}

    .ko-component.loaded {
        opacity: 1;
        transition: all .2s ease-in-out;
    }

/**************************************************	#Quote Approval ************************************************************/


.terms {
    text-align: justify;
    text-justify: inter-word;
    white-space: pre-wrap;
}

.messageBox {
    text-align: center;
    font-weight: bold;
}

.callbackMessage {
    text-align: center;
}
.modal-body .form-check{
    margin: 0 11pt;
}

.modal-body .notes{
    margin: 0;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
}

    .lds-ellipsis div {
        position: absolute;
        top: 33px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .lds-ellipsis div:nth-child(1) {
            left: 8px;
            animation: lds-ellipsis1 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(2) {
            left: 8px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(3) {
            left: 32px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(4) {
            left: 56px;
            animation: lds-ellipsis3 0.6s infinite;
        }

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}


/**************************************************	#CP Only Template Overrides ************************************************************/

select {
    border-radius: 2pt !important;
    margin: inherit;
    box-shadow: none;
    max-width: inherit;
    height: inherit;
}

.notificationArea{
    padding: 0 !important;
    border: none;
}

.notificationArea div{
    margin: 0.313rem 0.625rem;
}

.notificationArea div:empty{
    display: none;
}

@media (max-width: 1082px){
    .inner-widget-wrap{
        overflow-x: visible;
    }
}

/************************************************** #THUMBNAILS ************************************************************/

.grid-thumbnails {
    max-height: 6rem;
}

/************************************************** #Print ************************************************************/

@media print {

    .b2b-enabled {
        display: none;
    }

    .toprow td {
        border: 1px solid;
        border-right: none;
        border-left: none;
    }

    .btn-success, .stamp {
        display: none;
    }

    .o-summary .doc-header label {
        min-width: 102pt;
    }

    .o-summary h1.float-right {
        width: auto;
        text-align: right;
        clear: none;
    }

    .sales-user-nav-btn {
        display: none !important;
    }

}

/*************************************************   #B2B Disabled Cart **************************************************/

.navbar-header .b2b-disabled {
    width: fit-content;
    display: inline-block;
}

.navbar-header .b2b-disabled i.itm-count {
    right: -0.3rem;
    top: -1.3rem;
}

.b2b-disabled i.itm-count {
    padding: 0 0.3rem;
    border-radius: 1rem;
    right: 0.3rem;
    display: inline-flex;
    top: -0.3rem;
    position: absolute;
    transform: rotate(-15deg);
    width: 1.3rem;
    height: 1.3rem;
    min-height: auto;
    margin-right: 0;
    vertical-align: baseline;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.cart-slim .cart-itms div {
    padding-top: 0;
    padding-bottom: 0
}

.cart-slim .cart-itms div.cart-remove a {
    padding: 2px;
    margin: 0;
}

.cart-slim .shopping-cart-total {
    margin-top: 5pt;
}