:root {
    --label-size: 9pt;
    --label-color: #999999;
    --text-statement-size: 9pt;
    --text-statement-color: #333333;
    --text-info-size: 8pt;
    --text-info-color: #acacac;
    --text-validate-error-size: 7.5pt;
    --text-validate-error-color: red;
    --text-validate-summary-size: 8pt;
    --form-input-size: 9.5pt;
    --form-input-color: #333333;
    --font: 'Montserrat'; /* 'Work Sans' */
    --alt-font: 'Verdana';
    --btn-font-size: 9pt;
    --header-label-font-size: 9pt;
    --col-header-label-font-size: 7.0pt;
    --col-header-label-color: lightsteelblue;
    --max-input-width: 275px;
    --link-font-size: 11px;
    --theme-color-darkest: #518ecc; /* link-hover-color  */
    --theme-color-darker: #5ba0e5; /* main-theme-color-dark */
    --theme-color-dark: #7bb3ea; /* btn-primary-hover-color */ /* 173,132,214 */
    --theme-color-light: #adcff2; /* main-theme-color-light */ /* 242,236,248 */
    --theme-color-lighter: #cde2f7; /* nav-hover-bgcolor */
    --theme-color-lightest: #eef5fc;
    --link-color: #487fb7;
    --link-hover-color: #4072a4;
    --btn-primary-color: var(--theme-color-darker);
    --btn-primary-hover-color: var(--theme-color-darkest);
    --btn-primary-text-color: #ffffff;
    --btn-secondary-color: #ffffff;
    --btn-secondary-hover-color: orange;
    --btn-special-color: orange;
    --btn-special-hover-color: #ffc04c; /* light orange */
    --btn-cancel-color: white;
    --btn-cancel-hover-color: #eeeeee;
    --btn-cancel-text-color: rgb(64,64,64);
    --btn-danger-text-color: white;
    --btn-danger-color: #f45835;
    --btn-danger-hover-color: #db4f30;
    --btn-danger-hover-text-color: white;
    --bg-light-2-rgb: rgb(249, 249, 249);
    --screen-header-color: var(--theme-color-lighter);
    --any-header-text-color: #333333;
    --nav-brand-size: 16pt;
    --nav-brand-color: var(--theme-color-darkest);
    --nav-brand-hover-color: var(--theme-color-darkest);
    --nav-outline-color: var(--theme-color-dark);
    --nav-link-size: 11.5pt;
    --nav-link-color: #333333;
    --nav-link-hover-color: #333333;
    --nav-link-hover-bgcolor: var(--theme-color-lightest);
    --dropdown-nav-item-size: 9.5pt; /* <li> items within a nav drop down */
    --dropdown-nav-item-color: #202020;
    --dropdown-nav-item-hover-color: #ffffff;
    --dropdown-nav-item-hover-bgcolor: var(--theme-color-darkest);
    --nav-bar-height: 40px;
}

.inactive {
    opacity: .4;
    
}

.audit-label {
    font-size: 8pt;
    color: #bbbbbb;
}

.audit-data {
    font-size: 8pt;
    color: #8c8c8c;
    font-weight: 600;
}

.theme-darkest {
    color: var(--theme-color-darkest);
}

.theme-darker {
    color: var(--theme-color-darker);
}

.theme-dark {
    color: var(--theme-color-dark);    
}


.font-std {
    font-family: var(--font) !important;
}

.font-alt {
    font-family: var(--alt-font) !important;
}

.highlight-for-drop {
    background-color: khaki;   
}


html {
    position: relative;
    min-height: 100%;
    font-size: 8pt;
}

body {
    padding: 0px;
    margin: 0px;
    font-family: var(--font);
}


.bg-light-2 {
    background-color: var(--bg-light-2-rgb);
}






.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fs-15 {
    font-size: 15pt !important;
}
.fs-14 {
    font-size: 14pt !important;
}
.fs-13-5 {
    font-size: 13.5pt !important;
}

.fs-13 {
    font-size: 13pt !important;
}
.fs-12-5 {
    font-size: 12.5pt !important;
}

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

.fs-11-5 {
    font-size: 11.5pt !important;
}

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

.fs-10-5 {
    font-size: 10.5pt !important;
}

.fs-10 {
    font-size: 10pt !important;
}

.fs-9-5 {
    font-size: 9.5pt !important;
}

.fs-9 {
    font-size: 9pt !important;
}

.fs-8-5 {
    font-size: 8.5pt !important;
}

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

.fs-7-5 {
    font-size: 7.5pt !important;
}

.fs-7 {
    font-size: 7pt !important;
}


.danger {
    color: #FF0000 !important;
}


/*  ---------------------------------------------------------------------------------------------------
    Types of text display.  These classes control only font, size, color and weight.  
*/
.text-validate-error {
    font-size: var(--text-validate-error-size);
    color: var(--text-validate-error-color) !important;
}

.text-validate-summary {
    font-size: var(--text-validate-summary-size);
    color: var(--text-validate-error-color) !important;
    font-weight: bold;
}

.text-message-summary {
    font-size: 10pt;
    color: forestgreen !important;
    font-weight: 500;
}

.text-statement {
    font-size: var(--text-statement-size);
    color: var(--text-statement-color);
    font-weight: 500;
}

.text-info {
    font-size: var(--text-info-size) !important;
    color: var(--text-info-color) !important;
  }

.descriptive {
    font-family: var(--font);
    font-size: 8.5pt;
    color: var(--text-statement-color);
    font-weight: 500;
}

.form-input {
    font-size: var(--form-input-size);
    font-family: var(--font);
    color: var(--form-input-color) !important;
    font-weight: 500;
}

.input-label {
    font-size: var(--label-size) !important;
    color: var(--label-color) !important;
    font-weight: 500;
}

.input-label-color-only {    
    color: var(--label-color) !important;    
}

.quote-item-display {
    font-size: 9pt;
    color: #111111;
    /*color: #111111 !important;*/
    font-weight: 500;
}


.quote-declaration-display {
    font-size: 8.5pt;
    color: #366089;
    /*color: #111111 !important;*/
    font-weight: 500;    
}

.quote-field-label {
    font-size: 8pt !important;
    color: var(--label-color) !important;
    font-weight: 500;
}

.quote-field-label-dark {
    font-size: 8pt !important;
    color: #666666 !important;    
    font-weight: 500;
}


.col-header {
    color: var(--col-header-label-color);
    font-size: var(--col-header-label-font-size);
    vertical-align: bottom;
    text-align: left;
    padding-right: 15px;
    padding-bottom: 2px !important;
    margin-top: auto; /* forces the bottom align */
}


.data-field {
    font-size: var(--text-statement-size);
    color: var(--text-statement-color);
    font-weight: 500;
}


.label-top {
    margin-bottom: 3px;
    display: block;
}

.label-left {
    margin-right: 8px;
    display: inline;
    vertical-align: middle;
    text-align: left;
}



/*  End Text Types --------------------------------------------------------------------------------------------------- */



a {
    text-decoration: none;
    color: var(--link-color);
    font-family: var(--font);
    font-weight: 500;
}

    a:hover,
    a:focus {
        color: var(--link-hover-color);
        text-decoration: underline;
    }

    a.nohover:hover,
    a.nohover:focus {
        text-decoration: none;
    }


.quote_hdr_open {
    text-decoration: none;
    font-size: 10pt;
    font-weight: 600;
    color: rgb(64,64,64);
    background-color: white;
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 15px;
}

    .quote_hdr_open:hover,
    .quote_hdr_open:focus {
        cursor: pointer;
        text-decoration: none;
        background-color: #6495ed;
        color: white;
        border-radius: 8px;
    }

.quote_hdr_submitted {
    text-decoration: none;
    font-size: 10pt;
    font-weight: 600;
    color: rgb(64,64,64);
    background-color: white;
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 15px;
}

    .quote_hdr_submitted:hover,
    .quote_hdr_submitted:focus {
        cursor: pointer;
        text-decoration: none;
        background-color: #e59400;
        color: white;
        border-radius: 8px;
    }

.quote_hdr_accepted {
    text-decoration: none;
    font-size: 10pt;
    font-weight: 600;
    color: rgb(64,64,64);
    background-color: white;
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 15px;
}

    .quote_hdr_accepted:hover,
    .quote_hdr_accepted:focus {
        cursor: pointer;
        text-decoration: none;
        background-color: #008000;
        color: white;
        border-radius: 8px;
    }

.quote_hdr_ordered {
    text-decoration: none;
    font-size: 10pt;
    font-weight: 600;
    color: rgb(64,64,64);
    background-color: white;
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 15px;
}

    .quote_hdr_ordered:hover,
    .quote_hdr_ordered:focus {
        cursor: pointer;
        text-decoration: none;
        background-color: #8A2BE2;
        color: white;
        border-radius: 8px;
    }


.imglink {
    color: var(--theme-color-light);
}    

.imglink:hover {
    color: var(--link-hover-color);    
}

.imglink-danger:hover {
    color: var(--btn-danger-color);    
}



h1 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 13.0pt;
    font-weight: 600;
    line-height: 1.1;
    color: var(--any-header-text-color);
}

h2 {
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 11.5pt;
    font-weight: 600;
    line-height: 1.1;
    color: var(--any-header-text-color);
}

h3 {
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 10.5pt;
    font-weight: 600;
    line-height: 1.1;
    color: var(--any-header-text-color);
}


hr {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
    border: 0;
    border-top: 1px solid #cccccc;
}

.header {
    color: var(--any-header-text-color);
    text-transform: uppercase;
    font-weight: 700;
}


.inline {
    display: inline;
}

.block {
    display: block;
}

/* Set width on the form input elements since they're 100% wide by default */

select[disabled] {
    cursor: not-allowed;
    background-color: #eeeeee;
}

input::placeholder {
    opacity: 0.65 !important;    
    color: var(--text-info-color) !important;
    text-transform: lowercase !important;    
}

textarea::placeholder {
    opacity: 0.65 !important;
    color: var(--text-info-color) !important;
    text-transform: lowercase !important;
}

.required::placeholder {
    opacity: 0.75 !important;
    color: var(--text-statement-color) !important;
    text-transform: lowercase !important;
}


select {
    max-width: var(--max-input-width);
    width: 225px;
    line-height: 1.5;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
    height: 29px;
    font-size: var(--form-input-size);
    color: var(--form-input-color);
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    font-family: var(--font);
    font-weight: 500;
}

.contenteditcontrol {
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}


.form-control {
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
    height: 29px;
    line-height: 1.5;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

    .form-control:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

    .form-control[disabled],
    .form-control[readonly],
    fieldset[disabled] .form-control {
        cursor: not-allowed;
        background-color: #eeeeee;
    }


    .form-control-noborder {

    }



.form-textarea {
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    line-height: 1.428571429;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

    .form-textarea:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

    .form-textarea[disabled],
    .form-textarea[readonly],
    fieldset[disabled] .form-textarea {
        cursor: not-allowed;
        background-color: #eeeeee;
    }



/*  adds spacing below a group of elements */
.form-group {
    margin-bottom: 10px;
}

.btn {
    height: 29px;
    display: inline-block;
    padding: 4px 18px;
    font-size: var(--btn-font-size);
    font-weight: 600;
    /*line-height: 1.5;*/
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .btn:focus {
        /*        outline: thin dotted #333;
        outline: 0px auto -webkit-focus-ring-color;*/
        outline-offset: 0px;
        outline: none !important;
    }

    .btn:hover,
    .btn:focus {
        text-decoration: none;
        box-shadow: none !important;
    }

    .btn:active,
    .btn.active {
        background-image: none;
        outline: 0;
        outline: none !important;
    }

    .btn.disabled,
    .btn[disabled],
    fieldset[disabled] .btn {
        pointer-events: none;
        cursor: not-allowed;
        background-color: #DDDDDD;
        opacity: 0.65;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.btn-primary {
    color: var(--btn-primary-text-color);
    background-color: var(--btn-primary-color);
    min-width: 100px;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-default {
        color: white;
        border-color: var(--btn-primary-hover-color);
        background-color: var(--btn-primary-hover-color);
    }

    .btn-primary:disabled {
        border-color: #EEEEEE;
    }


.btn-action {    
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
}


    .btn-action:hover,
    .btn-action:focus,
    .btn-action:active,
    .btn-action.active,
    .open {
        /*background-color: var(--theme-color-lightest);*/
        background-color: #f4f4f4;
        border-radius: 100%;        
    }

.btn-action-delete {

}

.btn-action-edit {
}

    .btn-action-edit:hover {
        color: #4072a4;
    }


.btn-action-delete:hover {
    color: red;
}

.btn-action-add {
}

    .btn-action-add:hover {
        color: #5ba0e5;
    }

.btn-action:disabled {
    pointer-events: none;
    opacity: 0.65;
}


.btn-action-2 {
    display: inline-block;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 2px solid transparent;
}

    .btn-action-2:hover,
    .btn-action-2:focus,
    .btn-action-2:active,
    .btn-action-2.active,
    .open {
        background-color: transparent;
        border-bottom: 2px solid #aaa;
    }


.btn-special {    
    margin-bottom: 0;        
    min-width: 100px;
    color: #ffffff;    
    background-color: var(--btn-special-color);
}

    .btn-special:hover,
    .btn-special:focus,
    .btn-special:active,
    .btn-special.active,
    .open {
        color: #ffffff;
        background-color: var(--btn-special-hover-color);

        /*border-color: orange;*/
    }

    .btn-special:disabled {
        border-color: #EEEEEE;
    }



.new-btn {
    padding-top: 2px;
    padding-bottom: 3px;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 7.25pt;
    cursor: pointer;
    border-radius: 4px;
    background-color: var(--btn-secondary-color);
    border: 1px solid var(--btn-secondary-hover-color);
    color: var(--btn-secondary-hover-color);
    white-space: nowrap;
}

    .new-btn:hover,
    .new-btn:focus,
    .new-btn:active,
    .new-btn.active,
    .open {
        color: #ffffff;
        background-color: var(--btn-secondary-hover-color);
        border-color: var(--btn-secondary-hover-color);
        text-decoration: none;
    }

.new-btn:disabled {
    pointer-events: none;
    opacity: 0.65;
}

.edit-btn {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 7.5pt;
    border-radius: 4px;
    /*background-color: transparent;*/
    border: 1px solid #dddddd;
    color: var(--link-color);
    white-space: nowrap;
    font-weight: 600;
    cursor: pointer;
    background-color: #FFFFFF;
}

    .edit-btn:hover,
    .edit-btn:focus,
    .edit-btn:active,
    .edit-btn.active,
    .open {
        color: #ffffff;
        background-color: var(--btn-primary-color);
        border-color: var(--btn-primary-color);
        text-decoration: none;
    }

.edit-btn:disabled {
    pointer-events: none;
    opacity: 0.65;
}



.edit-btn-danger:hover,
.edit-btn-danger:focus,
.edit-btn-danger:active,
.edit-btn-danger.active,
.open {
    color: #ffffff;
    background-color: var(--btn-danger-color);
    border-color: var(--btn-danger-color);
    text-decoration: none;
}


.btn-cancel {
    color: var(--btn-cancel-text-color);
    background-color: var(--btn-cancel-color);
    min-width: 100px;
    border-color: #cccccc;
    font-weight: bold;
}

    .btn-cancel:hover,
    .btn-cancel:focus,
    .btn-cancel:active,
    .btn-cancel.active {
        background-color: var(--btn-cancel-hover-color);
        color: var(--btn-cancel-text-color);
        border-color: #cccccc;
    }

.btn-cancel:disabled {
    border-color: #EEEEEE;
}

.btn-danger {
    color: var(--btn-danger-hover-color);
    background-color: white;
    min-width: 100px;
    border-color: #cccccc;    
    font-weight: bold;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger.active {
        background-color: var(--btn-danger-color);
        color: white;
        /*background-color: var(--btn-danger-hover-color);*/
        color: var(--btn-danger-hover-text-color);
        border-color: #cccccc;
    }

    .btn-danger:disabled {
        border-color: #EEEEEE;
    }



.modal-title {
    margin: 0;
    line-height: 1.428571429;
    font-size: 10pt;
    font-weight: bold;
}

.modal-header {
    min-height: 16.428571429px;
    padding: 8px;
    border-bottom: 1px solid #e5e5e5;
    /*background-color: rgb(240, 238, 227); */
    background-color: var(--theme-color-lighter);
    color: var(--any-header-text-color);
}

    .modal-header .close {
        margin-top: -2px;
    }

.modal-body {
    position: relative;
    padding: 18px;
}


.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

    .close:hover,
    .close:focus {
        color: #000000;
        text-decoration: none;
        cursor: pointer;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}




.alt-font {
    font-family: var(--alt-font) !important;
}



/* THESE will perfectly align text next to checkbox */
label {
    display: flex;
    align-items: center;
}

input[type=checkbox] {
    flex: none;
}

input[type=text] {
    padding-left: 4px;
    padding-right: 4px;
}

/* IMPLEMENT as:  
   <label>
       <input type="checkbox" id="PrePopulate" />
         <span class="form-statement">Pre-Populate Data</span>
   </label>
*/


.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
    /* Reset to static positioning (ideally, remove the position: absolute; from Bootstrap) */
    position: static;
    /* Properly align using flex */
    align-self: center;
    /* Align in the case where flex doesn't apply (checkbox & radio addons, mostly) */
    vertical-align: middle;
    /* Setting width and height is optional; alignment works without. However, setting it allows for more predictable layouts. */
    min-width: 16px;
    min-height: 16px;
    width: 16px;
}

.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
    /* 16 (min-width of input) + 4 = 20 */
    margin: 0 4px 0 -20px;
}



input[type="checkbox"].opto {
    display: none;
}

label.opto:before {
    background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #035f8f;
    height: 16px;
    width: 16px;
    display: block;
    border-radius: 2px;
    /*cursor: pointer;*/
    pointer-events: none;
}

input[type="checkbox"].opto + label.opto:before {
    content: '';
    background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #6495ed;
    border-radius: 2px;
    color: #6495ed;
    font-size: 10pt;
    font-weight: 800;
    line-height: 11px;
    text-align: center;
    border: 2px solid #035f8f;
}

input[type="checkbox"].opto:disabled + label.opto:before {
    border-color: #6495ed;
    border-radius: 2px;
    color: #6495ed;
    background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

input[type="checkbox"].opto:checked + label.opto:before {
    content: '✓';
}

.opto {

}



.vertical-middle {
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle !important;
}

.vertical-top {
    margin-top: 0;
    margin-bottom: auto;
    vertical-align: top !important;    
}







/* ###################################################  */
/* BREAK POINTS  */

/* screen size 576 (sm) and greater */
@media (min-width: 576px) {
    .text-right-gteq-sm {
        text-align: right;
    }

    .float-right-gteq-sm {
        float: right;
    }

    .show-when-gteq-sm {
        visibility: visible;
    }

    .hide-when-gteq-sm {
        visibility: hidden;
    }

    .display-cell-when-gteq-sm {
        display: table-cell;
    }

    .display-none-when-gteq-sm {
        display: none;
    }

}


/* screen size 768 (md) and greater */
@media (min-width: 768px) {
    .show-when-gteq-md {
        visibility: visible;
    }

    .hide-when-gteq-md {
        visibility: hidden;
    }



}


/* screen size 992 (lg) and greater */
@media (min-width: 992px) {

    .left-mar-gteq-lg-60px {
        margin-left: 60px;
    }

    .show-when-gteq-lg {
        visibility: visible;
    }

    .hide-when-gteq-lg {
        visibility: hidden;
    }

    .display-none-when-gteq-lg {
        display: none !important;
        visibility: hidden;
    }

    .top-pad-gteq-lg-10px { /* top padding applied for >= than lg screen size */
        padding-top: 10px;
    }


}




/* 0 -- 575, 576 -- 767, 768 -- 991, 992 --  */
/*   xs          sm          md          lg  */
/* screen size up to 576 (xs) */
@media (max-width: 575px) {
    .top-pad-lteq-xs-10px { /* top padding applied for less than sm screen size */
        padding-top: 10px;
    }

    .top-pad-lteq-xs-5px {
        padding-top: 5px;
    }

    .text-left-lteq-xs {
        text-align: left;
    }

    .float-left-lteq-xs {
        float: left;
    }

    .left-pad-lteq-sx-8px {
        padding-left: 8px;
    }

    .show-when-lteq-xs {
        visibility: visible;
    }

    .hide-when-lteq-xs {
        visibility: hidden;
    }

    .display-none-when-lteq-xs {
        display: none;
    }
}




@media (max-width: 767px) {

    .top-mar-lteq-sm-5px {
        margin-top: 5px !important;
    }

    .top-mar-lteq-sm-15px {
        margin-top: 15px !important;
    }

    .top-pad-lteq-sm-10px { /* top padding applied for less than md screen size */
        padding-top: 10px !important;
    }

    .top-mar-lteq-sm-10px { /* top padding applied for less than md screen size */
        margin-top: 10px !important;
    }

    .left-mar-lteq-sm-10px { /* left margin applied for less than md screen size */
        margin-left: 10px !important;
    }

    .left-mar-lteq-sm-15px { /* left margin applied for less than md screen size */
        margin-left: 15px !important;
    }

    .left-mar-lteq-sm-20px { /* left margin applied for less than md screen size */
        margin-left: 20px !important;
    }

    .show-when-lteq-sm {
        visibility: visible;
    }

    .hide-when-lteq-sm {
        visibility: hidden;
        display: none !important;
    }
}

@media (max-width: 991px) {

    .dropdown-nav-lteq-md {
        border: 0px;
        margin-left: 25px;
    }


    .top-pad-lteq-md-10px { /* top padding applied for less than lg screen size */
        padding-top: 10px !important;
    }

    .top-mar-lteq-md-10px { /* top padding applied for less than md screen size */
        margin-top: 10px !important;
    }

    .top-pad-lteq-md-15px { /* top padding applied for less than lg screen size */
        padding-top: 15px !important;
    }

    .no-border-lteq-md {
        border: 0px !important;
    }

    .hide-when-lteq-md {
        visibility: hidden;
        display: none !important;
    }

}

.screen-header {
    display: table;
    width: 100%;
    min-height: 30px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    vertical-align: middle;
    background-color: var(--screen-header-color);
    border-bottom: 1px solid #e3e3e3;
    border-top: 1px solid #e3e3e3;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05);
}

.screen-header-accepted {
    background-color: #b2d8b2 !important;
    border-bottom: 1px solid #e3e3e3;
    border-top: 1px solid #e3e3e3;
}

.screen-header-submitted {
    background-color: #f4d499 !important;
    border-bottom: 1px solid #e3e3e3;
    border-top: 1px solid #e3e3e3;
}

.screen-header-ordered {
    background-color: #e7d4f9 !important;
    border-bottom: 1px solid #e3e3e3;
    border-top: 1px solid #e3e3e3;
}

.header-badge {
    font-size: var(--text-statement-size);
    border: 1px solid #bbbbbb;
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: bold;
    color: var(--text-statement-color) !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .3em;
    background-color: #ffffff !important;
    border: 1px solid #bbbbbb;
}

.header-item-badge {
    display: inline-block;
    margin-left: 0px;
    margin-right: 8px;
}

.header-item-label {
    margin-left: 3px;
    margin-right: 5px;
    color: #333333;
    font-size: var(--header-label-font-size);
}



bg-confirmed {
    background-color: green !important;
    color: white;
}

bg-inferred {
    background-color: #dddddd !important;
    color: black;
}



.pad-top-10 {
    padding-top: 10px !important;
}

.pad-top-9 {
    padding-top: 9px !important;
}

.pad-top-8 {
    padding-top: 8px !important;
}

.pad-top-7 {
    padding-top: 7px !important;
}

.pad-top-6 {
    padding-top: 6px !important;
}

.pad-top-5 {
    padding-top: 5px !important;
}

.pad-top-4 {
    padding-top: 4px !important;
}

.pad-top-3 {
    padding-top: 3px !important;
}

.pad-top-2 {
    padding-top: 2px !important;
}

.pad-top-1 {
    padding-top: 1px !important;
}





.no-padding {
    padding: 0px !important;
}

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

.test-border {
    border: 1px dotted blue;
}


/*.sectionboxtitle {
    color: rgb(64,64,64);
    font-size: 10.5px;
    font-weight: bold;
}*/

.card {
    padding-top: 8px;
    padding-bottom: 7px;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 3px;
    margin-bottom: 3px;
}

.card-body {
    padding: 0px;
    margin: 0px;
    flex: 0 0 auto;
    font-family: var(--font);
    font-size: var(--smaller-font-size);
}

.card-title {
    font-weight: bold;
    padding: 0px;
    padding-bottom: 3px;
    margin: 0px;
    font-family: var(--font);
    font-size: var(--text-info-size);
}

.card-with-header {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 3px;
    margin-bottom: 3px;
    border: 1px solid #cccccc;
}

.card-body-with-header {
    padding-top: 8px;
    padding-bottom: 7px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 0px;
    /*flex: 0 0 auto;*/
    text-align: left;
    font-family: var(--font);
    font-size: var(--smaller-font-size);
}

.card-header {
    text-align: left;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    margin-bottom: 0;
    background-color: var(--theme-color-light);
    border-bottom: 1px solid #cccccc;
}


.no-border {
    border: 0px;
}


/* ###################################################  */
/* BREAD CRUMBS */

.top-item {
    padding-top: 8px;
    padding-left: 10px;
}

div.breadcrumb {
    margin-right: 10px;
    margin-left: 5px;
    margin-bottom: 0px;
    margin-top: 0px;
    border-top: 0px dashed #DDDDDD;
    border-bottom: 0px dashed #DDDDDD;
}

ul.breadcrumb {
    padding: 0px;
    margin: 0px;
    list-style: none;
    background-color: white;
}

    /* Display list items side by side */
    ul.breadcrumb li {
        display: inline;
        font-size: 8pt;
        font-weight: 500;
        /*font-size: 18px;*/
    }

        /* Add a slash symbol (/) before/behind each list item */
        ul.breadcrumb li + li:before {
            padding-left: 4px;
            padding-right: 4px;
            color: rgb(64,64,64);            
            font-family: 'Verdana';
            font-size: 8pt;
            font-weight: 500;
            content: ">\00a0";
        }

        /* Add a color to all links inside the list */
        ul.breadcrumb li a {
            color: var(--link-color);
            text-decoration: none;
        }

            /* Add a color on mouse-over */
            ul.breadcrumb li a:hover {
                /*color: #3f75a2;*/
                text-decoration: underline;
            }


/*div.breadcrumb {
    margin-right: 10px;
    margin-left: 5px;
    margin-bottom: 0px;
    margin-top: 0px;
    border-top: 0px dashed #DDDDDD;
    border-bottom: 0px dashed #DDDDDD;
}

ul.breadcrumb {
    padding: 6px;
    margin: 0px;
    list-style: none;
    background-color: white;
}*/

    /* Display list items side by side */
    /*ul.breadcrumb li {
        display: inline;
        font-size: 8pt;
        font-weight: 500;*/
        /*font-size: 18px;*/
    /*}*/

        /* Add a slash symbol (/) before/behind each list item */
        /*ul.breadcrumb li + li:before {
            padding: 6px;
            color: rgb(64,64,64);
            font-family: Calibri;
            font-size: 8pt;
            font-weight: 500;
            content: ">\00a0";
        }*/

        /* Add a color to all links inside the list */
        /*ul.breadcrumb li a {*/
            /*color: #588ebb;*/
            /*text-decoration: none;
            font-size: 8pt;
            font-weight: 500;
        }*/

            /* Add a color on mouse-over */
            /*ul.breadcrumb li a:hover {*/
                /*color: #3f75a2;*/
                /*text-decoration: underline;
            }*/





/* ###################################################  */
/* POPOVER */
.popover {
    padding: 0px;
    margin: 0px;
    border-radius: 6px;
}

.popover-header {
    border: 0px;
    padding: 7px;
    margin: 1px;
    background-color: var(--theme-color-lightest);
    font-size: 9pt;
    font-weight: 700;
    padding-left: 11px;
    color: var(--any-header-text-color);
    font-family: var(--font);
}

.popover-body {
    padding: 7px;
    margin: 0px;
    font-size: 8pt;
    padding-left: 11px;
    color: var(--text-statement-color);
    font-family: var(--font);
    font-weight: 500;
}

/* this is the icon */
.question-tooltip {
    font-size: 11pt;
    color: var(--theme-color-dark);
}


/* this is the icon */
.description-tooltip {
    font-size: 10pt;
    color: var(--theme-color-light);
}

.description-popover-body {
    font-size: 9pt;
    font-family: var(--font);
}

.description-popover-header {
    background-color: #eeeeee !important; /*var(--theme-color-darker);*/
    padding: 7px;
    font-size: 9pt !important;
    font-family: var(--font) !important;    
    font-weight: 700;
}


.action-btn-tooltip {
    background-color: rgb(64,64,64) !important; /*var(--theme-color-darker);*/
    color: white;
    padding-top: 6px;
    padding-bottom: 5px;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 8pt !important;
    font-family: var(--font) !important;
    font-weight: 500;
    border: 0px;
    border-radius: 4px;
}


.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: rgb(64,64,64);
}

.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    right: -1px;
    border-width: 0.4rem 0.4rem 0.4rem 0;
    border-right-color: rgb(64,64,64);
}

.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    top: -1px;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: rgb(64,64,64);
}



/* ###################################################  */
/* TABLE LAYOUTS */


.table-row {
    padding-top: 2px;
    padding-bottom: 2px;
    display: table-row;
    height: 36px;
}

    .table-row:before,
    .table-row:after {
        display: table;
        content: " ";
    }

    .table-row:after {
        clear: both;
    }

    .table-row:before,
    .table-row:after {
        display: table;
        content: " ";
    }

    .table-row:after {
        clear: both;
    }


.table-cell-for-text {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 15px;
    display: table-cell;
    vertical-align: top;
    text-align: left;
    /*background-color: blanchedalmond;*/
}





/*.wine-name-include-check-cell {
    display: table-cell;
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
    padding-right: 3px;
    padding-top: 3px;
}

.wine-name-value-cell {
    display: table-cell;
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
}*/

.row {
    padding: 0px;
    margin: 0px;
}

.valign-middle {
    margin-top: auto;
    margin-bottom: auto;
}

/* this doesn't work for responsive mobile!  the shit don't wrap right */
.presentation-row {
    border-bottom: 1px solid #f2f2f2;
    /*height: 40px;*/
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: default;
}

    .presentation-row:hover {
        background-color: #f4f4f4;
    }


.hover-select:hover {
    background-color: #f4f4f4;
    cursor: default;
}

.hover-select-special:hover {
    /*background-color: #ebf3fb !important;    */
    /*background-color: #ffecc9 !important;   */
    /*background-color: #efe6d6 !important;*/
    background-color: #Fbf8f4 !important;
    cursor: default;
}

.hover-select-special-blue:hover {
    background-color: #ebf3fb !important;    
    /*background-color: #ffecc9 !important;   */
    /*background-color: #efe6d6 !important;*/
    cursor: default;
}


.hover-select-special-darkblue:hover {
    background-color: #cde2f7 !important;
    /*background-color: #ffecc9 !important;   */
    /*background-color: #efe6d6 !important;*/
    cursor: default;
}



.col-12 {
    padding: 0px;
    margin: 0px;
}





/* pad right */
.padr-5 {
    padding-right: 5px;
}

.padr-6 {
    padding-right: 6px;
}

.padr-7 {
    padding-right: 7px;
}

.padr-8 {
    padding-right: 8px;
}

.padr-9 {
    padding-right: 9px;
}

.padr-10 {
    padding-right: 10px;
}

.padr-12 {
    padding-right: 12px;
}

.padr-15 {
    padding-right: 15px;
}

.padr-20 {
    padding-right: 20px;
}


/* pad left */
.padl-5 {
    padding-left: 5px;
}

.padl-6 {
    padding-left: 6px;
}

.padl-7 {
    padding-left: 7px;
}

.padl-8 {
    padding-left: 8px;
}

.padl-9 {
    padding-left: 9px;
}

.padl-10 {
    padding-left: 10px;
}

.padl-12 {
    padding-left: 12px;
}

.padl-15 {
    padding-left: 15px;
}

.padl-20 {
    padding-left: 20px;
}


.pinnednote-img {
    color: #129900;
}

.productionnote-img {
    /*color: #484c44;*/
    color: #000080;
}

.unpinnote-img {
    color: red;
}

.pinnednote-img-cell {
    background-color: #e7f4e5;
    padding-left: 8px;
    vertical-align: top;
    padding-top: 9px;
    border: 0px solid #afe4a7;
}

.productionnote-img-cell {
    background-color: #e5e5f2;
    padding-left: 8px;
    vertical-align: top;
    padding-top: 9px;
}

.pinnednote-note-cell {
    vertical-align: top;
    padding-top: 6px;
    background-color: #e7f4e5;
    padding-left: 6px;    
    padding-right: 15px;
    font-size: 9pt;
    font-weight: 600;
    padding-bottom: 5px;
    border: 0px solid #afe4a7;

}

.productionnote-note-cell {
    vertical-align: top;
    padding-top: 6px;
    /*background-color: #e8ebe5;*/
    background-color: #e5e5f2;
    padding-left: 6px;
    padding-right: 15px;
    font-size: 9pt;
    font-weight: 600;
    padding-bottom: 6px;
    color: #000080;
}







/* **************************************************************************************************************/
/* NAVBAR */
/* **************************************************************************************************************/
.navbar {
    border-bottom: 0px solid var(--nav-outline-color);
    min-height: 26px !important;
    background-color: green;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}



.navbar-brand {
    float: left;
    padding-left: 0px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    line-height: var(--nav-bar-height);
    font-size: var(--nav-brand-size);
    font-weight: 600;
    color: var(--nav-brand-color);
}

    .navbar-brand:hover,
    .navbar-brand:focus {
        text-decoration: none;
        color: var(--nav-brand-hover-color);
    }



.navbar-nav > .nav-item {
    border: 0px solid blue;
    margin: 0px;
    margin-right: 18px;
    padding: 0px;
    margin-bottom: 0px;
    line-height: var(--nav-bar-height);

}


    .navbar-nav > .nav-item > a {        
        padding-top: 3px !important;
        padding-bottom: 0px !important;
        padding-left: 0px;
        padding-right: 0px;
    }


    .navbar-nav > .nav-item > .nav-link {
        padding-left: 18px;
        padding-right: 18px;
    }

    .navbar-nav > .nav-item > a.disabled {
        color: #DDDDDD;
        pointer-events: none;
        cursor: default;
    }


.nav-link {
    display: block;
    padding: 0px;
    padding-left: 0px;
    margin: 0px;
    margin-left: 0px;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    border-bottom: 1px solid transparent;
    font-weight: 600;
    font-size: var(--nav-link-size);
    color: var(--nav-link-color);
}

    .nav-link:hover, .nav-link:focus {
        text-decoration: none;
        background-color: var(--nav-link-hover-bgcolor);
        border-bottom: 1px solid var(--nav-outline-color);
        color: var(--nav-link-hover-color) !important;
    }


.nav-link-secondary {
    font-size: 10pt;
    /*opacity: .95;*/
    color: #666666;
}


.nav-tabs > .nav-item > .nav-link {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 10pt;
}




.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

    .nav-tabs .nav-link-tab {
        margin-bottom: -1px;
        background: none;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

        .nav-tabs .nav-link-tab:hover, .nav-tabs .nav-link-tab:focus {
            border-color: #e9ecef #e9ecef #dee2e6;
            background-color: var(--nav-link-hover-bgcolor);
            isolation: isolate;
        }

        .nav-tabs .nav-link-tab.disabled {
            color: #6c757d;
            background-color: transparent;
            border-color: transparent;
        }

        .nav-tabs .nav-link-tab.active,
        .nav-tabs .nav-item.show .nav-link-tab {
            color: #495057;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }

    .nav-tabs .dropdown-menu {
        margin-top: -1px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }


.dropdown-nav-item {
    display: block;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    clear: both;
    font-weight: 500;
    font-size: var(--dropdown-nav-item-size);
    color: var(--dropdown-nav-item-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    line-height: 28px;
}

.dropdown-nav-item:hover, .dropdown-nav-item:focus {
    text-decoration: none;
    color: var(--dropdown-nav-item-hover-color);
    background-color: var(--dropdown-nav-item-hover-bgcolor);
    font-weight: 500;
}

.dropdown-nav-item.active, .dropdown-nav-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--theme-color-dark);
}

.dropdown-nav-item.disabled, .dropdown-nav-item:disabled {
    color: #adb5bd;
    pointer-events: none;
    background-color: transparent;
}


.navbar-toggler-icon-lt {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler-lt {
    color: rgba(64, 64, 64, 0.55);
    border-color: rgba(64, 64, 64, 0.1);
}

.dropdown-menu {
    padding: 0px;
}

.dropdown-divider {
    padding: 0px;
    margin: 2px;
}


@media (max-width: 992px) {
    .nav-link:hover, .nav-link:focus {
        border-bottom: 1px solid transparent; /* no border in mobile mode*/
/*        background-color: var(--nav-hover-bgcolor);
        color: var(--nav-item-color);
*/    }

    .navbar-nav > .nav-item {
        margin-left: 10px;
        line-height: 25px;
    }
}



.quote-item-option-col {
    display: table-cell;
    white-space: nowrap;
    border-left: 0px solid #eeeeee;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 7px;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}

.quote-item-grip-col {
    display: table-cell;
    white-space: nowrap;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    padding-top: 6px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 10pt;
    border-top: 1px dashed #eeeeee;
    color: #aaa;
    cursor: grab;
    text-align: center;
}

    .quote-item-grip-col:hover {
        border: 2px solid khaki;
    } 


    .quote-item-col-left-nowrap {
        display: table-cell;
        padding-top: 6px;
        padding-right: 10px;
        white-space: nowrap;
        padding-left: 5px;
        border-left: 1px solid #ccc;
        /*border-top: 1px dashed #ebf3fb;*/
        border-top: 1px dashed #eeeeee;
    }


.quote-item-col-left-border-right {
    display: table-cell;
    padding-top: 6px;
    padding-right: 10px;
    white-space: nowrap;
    padding-left: 5px;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}

.quote-item-col-edit {
    display: table-cell;
    padding-top: 9px;
    padding-right: 5px;
    white-space: nowrap;
    padding-left: 5px;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}

.quote-item-col-price {
    display: table-cell;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 5px;
    padding-left: 10px;
    width: 100%;
    border-left: 1px solid #ccc;
    text-align: right;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}

.quote-item-option-col-edit {
    display: table-cell;
    padding-top: 5px;
    padding-bottom: 3px;
    padding-right: 5px;
    white-space: nowrap;
    padding-left: 5px;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}

.quote-item-option-col-left-nowrap {
    display: table-cell;
    padding-top: 5px;
    padding-bottom: 3px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-right: 10px;
    white-space: nowrap;
    padding-left: 5px;
    border-left: 1px solid #ccc;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}

.quote-item-option-col-price {
    display: table-cell;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-right: 5px;
    padding-left: 10px;
    width: 100%;
    border-left: 1px solid #ccc;
    text-align: right;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}

.quote-item-option-col-tax {
    display: table-cell;
    padding-top: 5px;
    padding-bottom: 3px;
    padding-right: 6px;
    padding-left: 6px;
    width: 100%;
    border-left: 1px solid #ccc;
    text-align: center;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}

.quote-item-option-col-desc {
    min-width: 300px;
    display: table-cell;
    padding-top: 5px;
    padding-bottom: 3px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-right: 10px;
    padding-left: 6px;
    border-left: 1px solid #ccc;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}

.quote-item-col-tax {
    display: table-cell;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 6px;
    padding-left: 6px;
    width: 100%;
    border-left: 1px solid #ccc;
    text-align: center;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}

.quote-item-col-desc {
    min-width: 300px;
    display: table-cell;
    padding-top: 6px;
    padding-right: 10px;
    padding-left: 6px;
    border-left: 1px solid #ccc;
    /*border-top: 1px dashed #ebf3fb;*/
    border-top: 1px dashed #eeeeee;
}




.quote-dec-col-desc {
    min-width: 300px;
    display: table-cell;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 10px;
    padding-left: 8px;    
    border-top: 0px dashed #eeeeee;    
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.quote-dec-col-edit {
    display: table-cell;
    padding-top: 6px;
    padding-bottom: 0px;
    padding-right: 8px;
    white-space: nowrap;
    padding-left: 5px;
    border-top: 0px dashed #eeeeee;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}




.lead-event-orange {
    color: orange;
}

.lead-event-ored {
    color: #FF7200;
}

.lead-event-gold {
    color:#E8C714; 
}

.lead-event-bluish {
    color: #323B95;
}

.lead-event-maroon {
    color:#5E1B42;
}

.lead-event-soft-red {
    color: #F44336;
}


.lead-event-green {
    color: #009900;
}

.lead-event-black {
    color: black;
}

.lead-event-gray {
    color: rgb(64,64,64);
}


/*
    
                                <div class="lead-status-select">
                                    <button>Active</button>
                                    <div class="lead-status-select-content">
                                        <a rel="noopener" target="_blank" href="https://blog.hubspot.com/">Blog</a>
                                        <a rel="noopener" target="_blank" href="https://academy.hubspot.com/">Academy</a>
                                        <a rel="noopener" target="_blank" href="https://www.youtube.com/user/hubspot">YouTube</a>
                                    </div>
                                </div>    
    
.lead-status-select {
    display: inline-block;
    position: relative;
}

.lead-status-select-content {
    display: none;
    position: absolute;
    width: 100%;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.lead-status-select:hover .lead-status-select-content {
    display: block;
}

.lead-status-select-content a {
    display: block;
    color: #000000;
    padding: 5px;
    text-decoration: none;
}

    .lead-status-select-content a:hover {
        color: #FFFFFF;
        background-color: #00A4BD;
    }*/






.btn-action-close-extra {}
.btn-action-close-extra:hover,
    .btn-action-close-extra:focus,
    .btn-action-close-extra:active,
    .btn-action-close-extra.active,
    .open {
        background-color: #fdecea;     
        border-color: #f9a19a;
    }

.btn-action-reopen-extra {}
    .btn-action-reopen-extra:hover,
    .btn-action-reopen-extra:focus,
    .btn-action-reopen-extra:active,
    .btn-action-reopen-extra.active,
    .open {
        background-color: #f1fae5;
        border-color: #9de24c;
    }

.btn-action-extra {}
    .btn-action-extra:hover,
    .btn-action-extra:focus,
    .btn-action-extra:active,
    .btn-action-extra.active,
    .open {
        background-color: #f8f8f8;
        border-color: #c1c4df;
    }

.btn-action-quote {
}

    .btn-action-quote:hover,
    .btn-action-quote:focus,
    .btn-action-quote:active,
    .btn-action-quote.active,
    .open {
        background-color: #e6f0fb;
        border-color: #c1c4df;
    }




@media screen {
    #printSection {
        display: none;
    }
}

@media print {
    body * {
        visibility: hidden;        
    }

    #nonPrintSection {
        display: none;
    }

    #printSection, #printSection * {
        visibility: visible;
    }

    #printSection {
        position: absolute;
        left: 0;
        top: 0;
    }
}


.result-msg {
    color: green;
    font-weight: 600;    
}


/* This css is necessary to get a font-awesome spinner spinning! */
/* Define an animation behavior */
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}
/* This is the class name given by the Font Awesome component when icon contains 'spinner' */
.fa-spin-it {
    /* Apply 'spinner' keyframes looping once every second (1s)  */
    animation: spinner 1s linear infinite;
}


.saved-toast {
    background-color: rgb(64,64,64);
    color: white;
    font-size: 10pt;
    font-weight: 500;
}