:root {
    --dark-mode-background-color: #434343;
    --dark-mode-card-background-color: #333333;
    --dark-mode-grey-color: #CCCCCC;
    --dark-mode-light-grey-color: #F2F2F2;
    --dark-mode-blue-color: #3AAACF;
    --dark-mode-skyblue-color: #41accf;
    --dark-mode-light-skyblue-color: #cce2f5;
    --dark-mode-orange-color: #FDD8AA;
    --dark-mode-light-orange-color: #F0D3B8;
    --dark-mode-red-color: #B20913;
    --dark-mode-secondary-button-color: #666666;
    --dark-mode-secondary-button-color-hover: #CCCCCC;
    --dark-mode-secondary-button-text: #FFFFFF;
    --dark-mode-secondary-button-text-hover: #333333;
    --dark-mode-secondary-blue-color: #75C4DD;
}

@font-face {
    font-family: GelPen;
    src: url('../fonts/GelPen.ttf');
}

:focus {
    outline: none;
}

/* Anchor styles */
a:link {
    /* these font styles should be unnecessary, as the links will continue to inherit their font. Since we are implementing themes,
        these font styles are interfering with newly introduced0 style that should be inherited. */
    /* font: 100% sans-serif, "Arial"; */
    color: #0093d0;
    text-decoration: none;
}

a:visited {
    color: #0093d0;
    text-decoration: none;
}

a:hover {
    color: #0000FF;
    text-decoration: none;
}

a:active {
    color: #0093d0;
    text-decoration: none;
}

a.menu:link {
    font: 10pt sans-serif, "Tacomah", "Arial"; /* TODO use of Tacomah or Arial is questionable */
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 300;
}

a.menu:visited {
    font: 10pt sans-serif, "Tacomah", "Arial";
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 300;
}

a.menu:hover {
    font: 10pt sans-serif, "Tacomah", "Arial";
    color: #FFFF00;
    text-decoration: none;
    font-weight: 300;
}

a.menu:active {
    font: 10pt sans-serif, "Tacomah", "Arial";
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 300;
}

a.smallmenu:link {
    font: 8pt sans-serif, "Tacomah", "Arial";
    color: #bbb;
    text-decoration: none;
    font-weight: normal;
}

a.smallmenu:visited {
    font: 8pt sans-serif, "Tacomah", "Arial";
    color: #bbb;
    text-decoration: none;
    font-weight: normal;
}

a.smallmenu:normal {
    font: 8pt sans-serif, "Tacomah", "Arial";
    color: #bbb;
    text-decoration: none;
    font-weight: normal;
}

a.smallmenu:active {
    font: 8pt sans-serif, "Tacomah", "Arial";
    color: #bbb;
    text-decoration: none;
    font-weight: normal;
}

a.childmenu:link {
    font: 11pt sans-serif, "Tacomah", "Arial";
    color: #145388;
    text-decoration: none;
    font-weight: normal;
}

a.childmenu:visited {
    font: 11pt sans-serif, "Tacomah", "Arial";
    color: #145388;
    text-decoration: none;
    font-weight: normal;
}

a.childmenu:normal {
    font: 11pt sans-serif, "Tacomah", "Arial";
    color: #CC0000;
    text-decoration: none;
    font-weight: normal;
}

a.childmenu:active {
    font: 11pt sans-serif, "Tacomah", "Arial";
    color: #145388;
    text-decoration: none;
    font-weight: normal;
}

a img {
    border: 0;
}

/* BUTTON STYLES */

div.btn {
    display: inline-block;
    height: 28px;
    color: #444; /*#5f6062*/
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    vertical-align: middle;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    text-shadow: 1px 1px 1px #fff;
    /*white-space:nowrap;*/
    text-indent: 0;
}

    div.btn.save, div.btn.blue {
        color: #000; /*#5f6062*/
        text-shadow: 1px 1px 1px #66ccff;
        width: 100px;
        white-space: nowrap;
    }

    div.btn.cancel {
        width: 80px;
        white-space: nowrap;
    }

    div.btn.disabled {
        color: #aaa;
        font-weight: normal;
        text-shadow: 1px 1px 1px #fff;
        white-space: nowrap;
        cursor: default;
    }
    div.btn.custom_disabled {
        color: #aaa;
        font-weight: normal;
        text-shadow: 1px 1px 1px #fff;
        white-space: nowrap;
        cursor: default;
        pointer-events:none;
    }

    div.btn .left {
        display: inline-block;
        background-repeat: no-repeat;
        width: 3px;
        height: 28px;
        float: none;
    }

    div.btn .right {
        display: inline-block;
        background-repeat: no-repeat;
        width: 3px;
        height: 28px;
        float: none;
    }

    div.btn .mid {
        display: inline-block;
        background-repeat: repeat-x;
        background-position: top;
        height: 28px;
        vertical-align: top;
        text-align: center;
        text-indent: -2px;
        padding-top: 6px;
        padding-left: 6px;
        padding-right: 6px;
        white-space: nowrap;
    }

    div.btn .left {
        background-image: url(../images/buttons/default_left.png);
    }

    div.btn .mid {
        background-image: url(../images/buttons/default_mid.png);
    }

    div.btn .right {
        background-image: url(../images/buttons/default_right.png);
    }

    div.btn:hover .left {
        background-image: url(../images/buttons/default_left_hover.png);
    }

    div.btn:hover .right {
        background-image: url(../images/buttons/default_right_hover.png);
    }

    div.btn:hover .mid {
        background-image: url(../images/buttons/default_mid_hover.png);
    }

    div.btn:active .left {
        background-image: url(../images/buttons/default_left_pressed.png);
    }

    div.btn:active .right {
        background-image: url(../images/buttons/default_right_pressed.png);
    }

    div.btn:active .mid {
        background-image: url(../images/buttons/default_mid_pressed.png);
    }

    div.btn.save .left {
        background-image: url(../images/buttons/save_left.png);
    }

    div.btn.save .mid {
        background-image: url(../images/buttons/save_mid.png);
    }

    div.btn.save .right {
        background-image: url(../images/buttons/save_right.png);
    }

    div.btn.save:hover .left {
        background-image: url(../images/buttons/save_left_hover.png);
    }

    div.btn.save:hover .right {
        background-image: url(../images/buttons/save_right_hover.png);
    }

    div.btn.save:hover .mid {
        background-image: url(../images/buttons/save_mid_hover.png);
    }

    div.btn.save:active .left {
        background-image: url(../images/buttons/save_left_pressed.png);
    }

    div.btn.save:active .right {
        background-image: url(../images/buttons/save_right_pressed.png);
    }

    div.btn.save:active .mid {
        background-image: url(../images/buttons/save_mid_pressed.png);
    }

    div.btn.blue .left {
        background-image: url(../images/buttons/save_left.png);
    }

    div.btn.blue .mid {
        background-image: url(../images/buttons/save_mid.png);
    }

    div.btn.blue .right {
        background-image: url(../images/buttons/save_right.png);
    }

    div.btn.blue:hover .left {
        background-image: url(../images/buttons/save_left_hover.png);
    }

    div.btn.blue:hover .right {
        background-image: url(../images/buttons/save_right_hover.png);
    }

    div.btn.blue:hover .mid {
        background-image: url(../images/buttons/save_mid_hover.png);
    }

    div.btn.blue:active .left {
        background-image: url(../images/buttons/save_left_pressed.png);
    }

    div.btn.blue:active .right {
        background-image: url(../images/buttons/save_right_pressed.png);
    }

    div.btn.blue:active .mid {
        background-image: url(../images/buttons/save_mid_pressed.png);
    }

    div.btn.custom_disabled .left, div.btn.disabled .left, div.btn.custom_disabled :hover .left, div.btn.disabled:hover .left, div.btn.custom_disabled:active .left , div.btn.disabled:active .left {
        background-image: url(../images/buttons/default_left_hover.png);
    }

    div.btn.custom_disabled .mid , div.btn.disabled .mid, div.btn.custom_disabled:hover .mid, div.btn.disabled:hover .mid, div.btn.custom_disabled:active .mid, div.btn.disabled:active .mid {
        background-image: url(../images/buttons/default_mid_hover.png);
    }

    div.btn.custom_disabled .right, div.btn.disabled .right, div.btn.custom_disabled:hover .right, div.btn.disabled:hover .right, div.btn.custom_disabled:active .right, div.btn.disabled:active .right {
        background-image: url(../images/buttons/default_right_hover.png);
    }

/*collapse button*/
.collapsebutton {
    height: 9px;
    position: relative;
    bottom: 0px;
    margin: 2px 0 -3px 0;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
    cursor: pointer;
    font-size: 10px;
    text-align: center;
    color: #0093D0;
    white-space: nowrap;
}

    .collapsebutton div {
        display: inline-block;
    }

    .collapsebutton.collapsed {
        background-image: url(../../../img/svgs/v1.0/Action_ExpandDown.svg);
    }

        .collapsebutton.collapsed:hover {
            background-image: url(../../../img/svgs/v1.0/Action_ExpandDown.svg);
        }

        .collapsebutton.collapsed:active {
            background-image: url(../../../img/svgs/v1.0/Action_ExpandDown.svg);
        }

    .collapsebutton.expanded {
        background-image: url(../../../img/svgs/v1.0/Action_CollapseUp.svg);
    }

        .collapsebutton.expanded:hover {
            background-image: url(../../../img/svgs/v1.0/Action_CollapseUp.svg);
        }

        .collapsebutton.expanded:Active {
            background-image: url(../../../img/svgs/v1.0/Action_CollapseUp.svg);
        }

        .collapsebutton.expanded .show {
            margin-left: -4px;
        }

    .collapsebutton.collapsed .show {
        margin-left: -2px;
    }

/* CONTENT STYLES */
.lineitem {
    margin-bottom: 4px;
}

.lastitem {
    border-bottom: none;
}

.linetitle, .linetitle a {
    color: #0093D0;
    font-size: 11px;
    font-weight: bold;
}

.linedetail {
    white-space: nowrap;
}

.linename {
    display: inline;
    font-weight: bold;
}

    .linename.large {
        font-size: 16px;
    }

.linevalue {
    display: inline;
    padding-left: 6px;
}

    .linevalue.large {
        font-size: 16px;
    }

.linelogo_large {
    display: inline-block;
    max-width: 80px;
    max-height: 60px;
    border: 0px;
}

.linelogo_small {
    display: inline-block;
    max-width: 40px;
    max-height: 30px;
    border: 0px;
}

/*grid data style*/
.datagrid {
    padding: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    border: 0px solid #CCCCCC;
    width: 100%;
}

    .datagrid td.content {
        border-style: solid;
        border-color: #cdcdcd;
        color: #000000;
        font: 10pt sans-serif, "Arial";
        padding: 5px;
        border: 1px solid #ccc;
    }

        .datagrid td.content.center {
            text-align: center;
        }

        .datagrid td.content.left {
            text-align: left;
        }

        .datagrid td.content.right {
            text-align: right;
        }

        .datagrid td.content input[type="text"] {
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            height: 22px;
        }

        .datagrid td.content .formselectfieldwrapper {
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            border-width: 0;
        }

/* DROP-DOWN STYLES */
.dropdown select {
    background: transparent;
    -webkit-appearance: none;
    border: 1px solid transparent;
    margin-left: -2px;
    margin-top: -2px;
    padding-left: 5px;
}

.dropdown {
    background: url("../../../img/svgs/v1.0/Action_ExpandDown.svg") no-repeat right #eee;
    padding: 1px;
    padding-right: 2px;
    overflow: hidden;
    height: 30px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #ccc;
}

/* EDITORS & DIALOGS */
.grideditfield {
    width: -moz-calc(100% - 4px);
    width: -webkit-calc(100% - 4px);
    width: calc(100% - 4px);
}

.editor.price {
    text-align: right;
    width: 80px;
}

    .editor.price.modified {
        background: #FFFFB5;
    }

    .editor.price.override {
        font-weight: bold;
        font-style: italic;
    }

.editor.quantity {
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
}

    .editor.quantity .value {
        display: inline-block;
    }

    .editor.quantity .icon {
        margin: -3px 0 0 4px;
    }

    .editor.quantity .validation {
        margin-top: -3px;
    }

.dialog.quantity {
    width: 250px;
    height: 100px;
    background-color: #ddd;
    background-image: url(../images/warning/tooltip_repeat.png);
    position: absolute;
    display: none;
    z-index: 10001;
    text-align: left;
    padding: 4px;
    border-radius: 3px;
}

    .dialog.quantity.eo {
        width: 120px;
        height: 70px;
        background-color: #ddd;
        background-image: url(../images/warning/tooltip_repeat.png);
        position: absolute;
        display: none;
        z-index: 10001;
        text-align: left;
        padding: 4px;
        border-radius: 3px;
    }

        .dialog.quantity.eo .buffer {
            padding: 10px;
        }

    .dialog.quantity input[type="text"] {
        text-align: left;
    }

    .dialog.quantity label {
        color: #eee;
    }

    .dialog.quantity .point.down {
        background-image: url(../images/warning/tooltip_point_down.png);
        width: 11px;
        height: 6px;
        position: absolute;
        bottom: 0px;
        margin-bottom: -6px;
        left: 122px;
    }

    .dialog.quantity.eo .point.down {
        left: 58px;
    }

.dialog.main {
    min-width: 200px;
    max-width: 40%;
    min-height: 50px;
    max-height: 94%;
    background-color: #fff;
    position: fixed;
    z-index: 10001;
    border-radius: 6px;
    display: none;
    color: #000;
    padding: 25px;
    left: 100px;
    top: 100px;
    border: 1px solid #000;
}

    .dialog.main > .title {
        font-size: 16px;
        font-weight: bold;
        margin-top: -4px;
        margin-bottom: 4px;
        color: #4E4F51;
    }

    .dialog.main .message {
        max-height: calc(100% - 50px);
        font-size: 12px;
        overflow: auto;
    }

    .dialog.main .validation.dialog {
        margin-top: -29px;
        margin-left: -29px;
    }

    .dialog.main .links {
        margin-top: 20px;
        text-align: center;
    }

        .dialog.main .links .link {
            padding: 0 20px 0 20px;
            font-size: 14px;
            font-weight: bold;
        }

            .dialog.main .links .link.disabled {
                pointer-events: none;
                color: #aaa;
            }

.spinner {
    position: fixed;
    margin-top: -100px;
    z-index: 9002;
    opacity: .8;
}

.spinnercontainerFullPage {
    position: fixed;
    z-index: 9999;
    left: calc(50%);
    top: calc(50%);
}

#maindialog.dialog.main {
    max-height: 700px;
}

    #maindialog.dialog.main .message {
        max-height: 650px;
    }

#calculatingTaxId {
    text-align: center;
    width: 200px;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
}

/*FOOTER STYLES */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#pagecontainer {
    min-height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

#footer {
    width: 100%;
    height: 13px;
    position: absolute;
    text-align: center;
    left: 0;
    bottom: 0;
    padding: 19px 0 18px 0;
    font-size: 1em;
    color: #999999;
}

    #footer.setFontSizeToNotDisappear {
        font-size: 10.4px;
    }

/* FORM STYLES */
input.standardsubmit {
    display: inline-block;
    height: 28px;
    color: #5f6062;
    font-size: 14px;
    cursor: default;
    vertical-align: middle;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    text-shadow: 1px 1px 1px #fff;
}

.standardfield input, .standardfield select {
    width: 99%;
    width: -moz-calc(100% - 3px);
    width: -webkit-calc(100% - 3px);
    width: calc(100% - 3px);
    height: 27px;
    margin: 0;
    padding: 0;
    margin-bottom: 2px;
    float: left;
}

.standardfield textarea {
    width: 99%;
    height: 200px;
    margin: 0;
    padding: 0;
    margin-bottom: 2px;
}

.split3field textarea {
    width: 300px;
    height: 81px;
    margin: 0;
    padding: 0;
    margin-bottom: 2px;
}

.split3field input, split3field select {
    width: 300px;
    height: 27px;
    margin: 0;
    padding: 0;
    margin-bottom: 2px;
}

.wrapfield {
    display: inline-block;
    width: 33%;
    text-align: left;
    vertical-align: top;
    padding: 4px 0 4px 0;
}

    .wrapfield input[type="checkbox"] {
        width: 18px;
        height: 18px;
        vertical-align: middle;
    }

    .wrapfield label {
        font-size: 13px;
        vertical-align: middle;
    }

    .wrapfield .customizerButton {
        display: inline-block;
        cursor: pointer;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 1px solid black;
        margin-left: 2px;
        background-color: white;
        color: black;
    }

        .wrapfield .customizerButton:hover {
            background-color: #ddd;
        }

        .wrapfield .customizerButton.active {
            background-color: black;
            color: white;
        }

            .wrapfield .customizerButton.active:hover {
                background-color: #444;
            }

input.readonly, select.readonly, .formselectfieldwrapper select.formselectfield.readonly,
input[disabled], select[disabled], .formselectfieldwrapper select.formselectfield[disabled] {
    color: #333;
    background-color: #EEE;
}
.select-container-for-select-ellipsis select.readonly,
.select-container-for-select-ellipsis.formselectfieldwrapper select.formselectfield.readonly,
.select-container-for-select-ellipsis select[disabled], .formselectfieldwrapper select.formselectfield[disabled] {
    color: transparent;
    background-color: #EEE;
}
#optemplates{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column
}

/*header styles*/
h1, h2, h3 {
    margin: 0;
    padding: 0;
    color: #4E4F51;
}

h1 {
    font-size: 24px;
    font-weight: bold;
}

h2 {
    font-size: 20px;
    font-weight: bold;
}

h3 {
    font-size: 16px;
    font-weight: bold;
}

/* HELP STYLES */
.helpfont1 {
    font-family: GelPen;
    font-weight: normal;
    font-size: 25px;
}

.helpfont2 {
    font-family: GelPen;
    font-weight: 500;
    font-size: 14px;
}

.arrow-1 {
    background-image: url(../images/help/arrow-1.png);
    background-repeat: no-repeat;
    width: 444px;
    height: 36px;
}

.arrow-2 {
    background-image: url(../images/help/arrow-2.png);
    background-repeat: no-repeat;
    width: 367px;
    height: 30px;
}

.arrow-3 {
    background-image: url(../images/help/arrow-3.png);
    background-repeat: no-repeat;
    width: 296px;
    height: 11px;
}

.arrow-4 {
    background-image: url(../images/help/arrow-4.png);
    background-repeat: no-repeat;
    width: 246px;
    height: 21px;
}

.arrow-5 {
    background-image: url(../images/help/arrow-5.png);
    background-repeat: no-repeat;
    width: 155px;
    height: 17px;
}

.arrow-6 {
    background-image: url(../images/help/arrow-6.png);
    background-repeat: no-repeat;
    width: 84px;
    height: 16px;
}

.arrow-7 {
    background-image: url(../images/help/arrow-7.png);
    background-repeat: no-repeat;
    width: 16px;
    height: 52px;
}

.arrow-8 {
    background-image: url(../images/help/arrow-8.png);
    background-repeat: no-repeat;
    width: 49px;
    height: 18px;
}

.arrow-9 {
    background-image: url(../images/help/arrow-9.png);
    background-repeat: no-repeat;
    width: 37px;
    height: 13px;
}

.arrow-10 {
    background-image: url(../images/help/arrow-10.png);
    background-repeat: no-repeat;
    width: 23px;
    height: 13px;
}

.arrow-11 {
    background-image: url(../images/help/arrow-11.png);
    background-repeat: no-repeat;
    width: 14px;
    height: 10px;
}

.bracket-1 {
    background-image: url(../images/help/bracket-1.png);
    background-repeat: no-repeat;
    width: 944px;
    height: 20px;
}

.bracket-2 {
    background-image: url(../images/help/bracket-2.png);
    background-repeat: no-repeat;
    width: 716px;
    height: 21px;
}

.bracket-3 {
    background-image: url(../images/help/bracket-3.png);
    background-repeat: no-repeat;
    width: 477px;
    height: 17px;
}

.bracket-4 {
    background-image: url(../images/help/bracket-4.png);
    background-repeat: no-repeat;
    width: 219px;
    height: 16px;
}

.bracket-5 {
    background-image: url(../images/help/bracket-5.png);
    background-repeat: no-repeat;
    width: 125px;
    height: 13px;
}

.bracket-6 {
    background-image: url(../images/help/bracket-6.png);
    background-repeat: no-repeat;
    width: 80px;
    height: 12px;
}

.ellipse-1 {
    background-image: url(../images/help/ellipse-1.png);
    background-repeat: no-repeat;
    width: 957px;
    height: 48px;
}

.ellipse-2 {
    background-image: url(../images/help/ellipse-2.png);
    background-repeat: no-repeat;
    width: 466px;
    height: 60px;
}

.ellipse-3 {
    background-image: url(../images/help/ellipse-3.png);
    background-repeat: no-repeat;
    width: 379px;
    height: 57px;
}

.ellipse-4 {
    background-image: url(../images/help/ellipse-4.png);
    background-repeat: no-repeat;
    width: 305px;
    height: 100px;
}

.ellipse-5 {
    background-image: url(../images/help/ellipse-5.png);
    background-repeat: no-repeat;
    width: 144px;
    height: 57px;
}

.ellipse-6 {
    background-image: url(../images/help/ellipse-6.png);
    background-repeat: no-repeat;
    width: 106px;
    height: 40px;
}

.ellipse-7 {
    background-image: url(../images/help/ellipse-7.png);
    background-repeat: no-repeat;
    width: 97px;
    height: 106px;
}

.ellipse-8 {
    background-image: url(../images/help/ellipse-8.png);
    background-repeat: no-repeat;
    width: 83px;
    height: 80px;
}

.ellipse-9 {
    background-image: url(../images/help/ellipse-9.png);
    background-repeat: no-repeat;
    width: 33px;
    height: 32px;
}

.ellipse-10 {
    background-image: url(../images/help/ellipse-10.png);
    background-repeat: no-repeat;
    width: 28px;
    height: 30px;
}

.ellipse-11 {
    background-image: url(../images/help/ellipse-11.png);
    background-repeat: no-repeat;
    width: 34px;
    height: 32px;
}

.hand-grab {
    background-image: url(../images/help/hand-grab.png);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
}

.hand-point {
    background-image: url(../images/help/hand-point.png);
    background-repeat: no-repeat;
    width: 25px;
    height: 31px;
}

.rockstar-2 {
    background-image: url(../images/help/rockstar.png);
    background-repeat: no-repeat;
    width: 118px;
    height: 164px;
}

.smiley-face {
    background-image: url(../images/help/smiley-face.png);
    background-repeat: no-repeat;
    width: 11px;
    height: 12px;
}

.flipH {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.flipV {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

div.help-overlay {
    position: relative;
    width: 100%;
}

    div.help-overlay div {
        position: absolute;
        width: 100%;
    }

#helpmask {
    position: absolute;
    z-index: 10;
    background-color: #333;
    opacity: .8;
    display: none;
}

.helpimg {
    position: absolute;
    z-index: 11;
    display: none;
    margin-top: 15px;
    color: #fff;
}

.hidden {
    display: none;
}

#morehelp {
    width: 115px;
    height: 170px;
    position: fixed;
    z-index: 1000;
    bottom: -170px;
    right: 0px;
    background-image: url(../images/sprites/more-help-koala.png);
    cursor: pointer;
    margin-right: 0px;
}

    #morehelp .text {
        width: 70px;
        margin: 28px 0 0 15px;
        text-align: center;
        line-height: 10px;
        font-size: 10px;
        font-weight: bold;
        color: #0093D0;
    }

    #morehelp:hover .text {
        opacity: 1;
        color: #0000FF;
    }

#solution {
    display: none;
    margin-top: 10px;
    margin-right: 10px;
}

/* ICON STYLES */
.icons-action, .icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
}

.btn .icons-action, .btn .icon {
    margin-right: 4px;
    margin-top: -3px;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
}

.whiteIcon {
    fill: #fff
}

.topMenuIcon {
    width: 24px;
    height: 24px;
    fill: #fff;
}

.icons-action.add {
    background-image: url(../../../img/svgs/v1.0/Action_AddNew.svg);
}

.icons-action.delete {
    background-image: url(../../../img/svgs/v1.0/Action_Delete.svg);
}

.icons-action.edit {
    background-image: url(../../../img/svgs/v1.0/Action_Edit.svg);
}

.icons-action.copy {
    background-image: url(../../../img/svgs/v1.0/Action_Copy.svg);
}
/*.icons-action.export { background-image:url(../images/icons/Action_ExportFile.png); }*/
/*.icons-action.custom.color {  background-image:url(../images/icons/update-field.png); }*/
.icons-action.view {
    background-image: url(../../../img/svgs/v1.0/Action_View.svg);
}

    .icons-action.view.color {
        background-image: url(../../../img/svgs/v1.0/Action_View.svg);
    }

.icons-action.collapse {
    background-image: url(../../../img/svgs/v1.0/Action_CollapseUp.svg);
}

.icons-action.expand {
    background-image: url(../../../img/svgs/v1.0/Action_ExpandDown.svg);
}

.icons-action.expandRight {
    background-image: url(../../../img/svgs/v1.0/Action_CollapseRight.svg);
}

.icon.edit {
    background-image: url(../../../img/svgs/v1.0/Action_Edit.svg);
}

    .icon.edit.color {
        background-image: url(../../../img/svgs/v1.0/Action_Edit.svg);
    }

.icon.numpad.color {
    background-image: url(../../../img/svgs/v1.0/Action_Calculate.svg);
}

body.darkMode #costresults td.content .icon.numpad.color {
    filter: invert(.7);
}

.icon.next {
    background-image: url(../../../img/svgs/v1.0/Action_Forward.svg);
}

.icon.previous {
    background-image: url(../../../img/svgs/v1.0/Action_Back.svg);
}

.icon.wait {
    background-image: url(../images/icons/wait.gif);
}

.icon.update {
    background-image: url(../../../img/svgs/v1.0/Action_Refresh.svg);
}

.icon.save {
    background-image: url(../../../img/svgs/v1.0/Action_Save.svg);
}

.icon.open {
    background-image: url(../../../img/svgs/v1.0/Action_OpenFolder.svg);
}

.icon.package {
    background-image: url(../images/icons/create-package.png);
}

    .icon.package.color {
        background-image: url(../images/icons/create-package-color.png);
    }

.icon.save-next {
    background-image: url(../../../img/svgs/v1.0/Action_Forward.svg);
}

.icon.save-previous {
    background-image: url(../../../img/svgs/v1.0/Action_Back.svg);
}

.icon.save-add {
    background-image: url(../../../img/svgs/v1.0/Action_AddNew.svg);
}

.icon.gear-dropdown {
    background-image: url(../../../img/svgs/v1.0/Menu_System.svg);
}

.icon.gear {
    background-image: url(../../../img/svgs/v1.0/Menu_System.svg);
}

.icon.copy-quote {
    background-image: url(../../../img/svgs/v1.0/Action_Copy.svg);
}

.icon.warning {
    background-image: url(../../../img/svgs/v1.0/Status_Warning.svg);
}

.icon.close {
    background-image: url(../../../img/svgs/v1.0/Action_Close.svg);
}

.icon.approve {
    background-image: url(../../../img/svgs/v1.0/Action_Approve.svg);
}

.icons-action.up {
    background-image: url(../../../img/svgs/v1.0/Action_Move_Up.svg);
}

.icons-action.down {
    background-image: url(../../../img/svgs/v1.0/Action_Move_Down.svg);
}

.icon.plusconnect {
    background-image: url(../../../img/svgs/v1.0/Action_AddNew.svg);
}

.icon.nextarrow {
    background-image: url(../../../img/svgs/sell/Action_RightArrow.svg);
}

.icons-sort {
    width: 35px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
}

    .icons-sort.up {
        background-image: url(../../../img/svgs/v1.0/Action_CollapseUp.svg);
    }

    .icons-sort.down {
        background-image: url(../../../img/svgs/v1.0/Action_ExpandDown.svg);
    }

.icons-menu {
    min-width: 20px;
    height: 38px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin: -2px 8px 0 -8px;
}

div.mainmenu div.menuitem:hover .icons-menu.home, div.menuitem.selected .icons-menu.home {
    background-image: url(../images/menu/home_hover.png);
}

div.mainmenu div.menuitem:active .icons-menu.home, .icons-menu.home {
    width: 23px;
    background-image: url(../images/menu/home.png);
}

div.mainmenu div.menuitem:hover .icons-menu.admin, div.menuitem.selected .icons-menu.admin {
    background-image: url(../images/menu/admin_hover.png);
}

div.mainmenu div.menuitem:active .icons-menu.admin, .icons-menu.admin {
    width: 28px;
    background-image: url(../images/menu/admin.png);
}

div.mainmenu div.menuitem:hover .icons-menu.newquote, div.menuitem.selected .icons-menu.newquote {
    background-image: url(../images/menu/new_quote_hover.png);
}

div.mainmenu div.menuitem:active .icons-menu.newquote, .icons-menu.newquote {
    width: 19px;
    background-image: url(../images/menu/new_quote.png);
}

div.mainmenu div.menuitem:hover .icons-menu.openquote, div.menuitem.selected .icons-menu.openquote {
    background-image: url(../images/menu/open_quote_hover.png);
}

div.mainmenu div.menuitem:active .icons-menu.openquote, .icons-menu.openquote {
    width: 25px;
    background-image: url(../images/menu/open_quote.png);
}

div.mainmenu div.menuitem:hover .icons-menu.successlist, div.menuitem.selected .icons-menu.successlist {
    background-image: url(../images/menu/successlist_hover.png);
}

div.mainmenu div.menuitem:active .icons-menu.successlist, .icons-menu.successlist {
    width: 24px;
    background-image: url(../images/menu/successlist.png);
}
/*div.mainmenu div.menuitem:hover .icons-menu.openquote, div.menuitem.selected .icons-menu.openquote { background-image:url(../images/menu/biLogoGrey.png); }
div.mainmenu div.menuitem:active .icons-menu.openquote,.icons-menu.openquote{ width:25px; background-image:url(../images/menu/biLogoGrey-hover.png); }*/
.icon.logo {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin-right: 6px;
    margin-top: -6px;
}

    .icon.logo.notify {
        background-image: url(../../../img/svgs/v1.0/Application_Notification.svg);
    }

    .icon.logo.chatter {
        background-image: url(../../../img/svgs/sell/Action_Chat.svg);
    }

    .icon.logo.successlist {
        background-image: url(../../../img/svgs/v1.0/Menu_SuccessList.svg);
    }

    .icon.logo.kb {
        background-image: url(../../../img/svgs/v1.0/Application_Information.svg);
    }

.icon.field {
    display: inline-block;
    background-repeat: no-repeat;
    margin: 1px 0 0 -20px;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    cursor: pointer;
    position: absolute;
}

    .icon.field.cloud {
        background-image: url(../../../img/svgs/v1.0/Cloud.svg);
        background-size: 18px;
    }

        .icon.field.cloud.disabled {
            background-image: url(../../../img/svgs/v1.0/Cloud.svg);
            background-size: 18px;
            filter: opacity(50%);
            cursor: default;
        }

    .icon.field.search {
        background-image: url(../../../img/svgs/v1.0/Action_Search.svg);
        background-size: 18px;
        margin-top: 4px;
    }

.icon.tab {
    width: 18px;
    height: 18px;
    margin: 9px 8px 0 -8px;
    cursor: pointer;
    display: none;
}

.ui-tabs-selected .icon.tab,
/* In jquery-ui 1.9 .ui-tabs-selected changes to .ui.tabs-active */
.ui-tabs-active .icon.tab {
    display: inline-block;
}

.icon.sub-nav {
    display: inline-block;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    background-image: url(../images/icons/sub-nav.png);
}

.icon.sub-nav-eo {
    display: inline-block;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    background-image: url(../images/icons/sub-nav-eo.png);
}

.icon.sub-nav.next {
    background-image: url(../../../img/svgs/v1.0/Action_Forward.svg);
}

.icon.flag {
    width: 12px;
    height: 12px;
    position: absolute;
    margin: -5px 0 0 -5px;
    background-repeat: no-repeat;
}

    .icon.flag.early {
        background-image: url(../images/successlist/flag-early.png);
    }

    .icon.flag.great {
        background-image: url(../images/successlist/flag-great.png);
    }

    .icon.flag.good {
        background-image: url(../images/successlist/flag-good.png);
    }

    .icon.flag.late {
        background-image: url(../images/successlist/flag-late.png);
    }


/*Link styles*/
.link {
    color: #0093D0;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

    .link:hover {
        color: #0000FF;
    }

.logo.small {
    display: inline-block;
    height: 40px;
}

    .logo.small.beta {
        top: 12px;
        margin-top: -6px;
        height: 38px;
    }

    .logo.small.qa {
        margin-top: -12px;
        margin-top: -6px;
        height: 38px;
    }

#serverModeLabel {
    margin: 1px 0 0 0;
}

/* LOGIN STYLES */
.loginbg {
    background-image: url(../images/sell-wave-bg.png);
    background-repeat: no-repeat;
    background-position: center;
}

/* MENU STYLES */
div.mainmenu {
    white-space: nowrap;
    width: 980px;
    text-align: left;
    margin-top: 15px;
}

    div.mainmenu.beta, div.mainmenu.qa {
        margin-top: 10px;
    }

    div.mainmenu div.menuitem, div.mainmenu div.menuitem div {
        display: inline-block;
        height: 38px;
        vertical-align: top;
        font-size: 12px;
        padding: 0 auto 0 auto;
        text-align: center;
    }

    div.mainmenu div.menuitem {
        color: #ddd;
    }

        div.mainmenu div.menuitem .icon {
            padding-right: 8px;
        }

        div.mainmenu div.menuitem div.mid div {
            padding-top: 11px;
        }

        div.mainmenu div.menuitem div.left {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_midleft.png);
        }

        div.mainmenu div.menuitem div.mid {
            height: 38px;
            background-image: url(../images/menu/navbar_mid.png);
            background-repeat: repeat-x;
        }

        div.mainmenu div.menuitem div.right {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_midright.png);
        }

        div.mainmenu div.menuitem.first div.left {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_left.png);
        }

        div.mainmenu div.menuitem.last div.right {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_right.png);
        }

        div.mainmenu div.menuitem:hover div.left {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_midleft_hover.png);
        }

        div.mainmenu div.menuitem:hover div.mid {
            height: 38px;
            background-image: url(../images/menu/navbar_mid_hover.png);
            background-repeat: repeat-x;
        }

            div.mainmenu div.menuitem:hover div.mid div {
                color: #FFFFFF;
            }

        div.mainmenu div.menuitem:hover div.right {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_midright_hover.png);
        }

        div.mainmenu div.menuitem.first:hover div.left {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_left_hover.png);
        }

        div.mainmenu div.menuitem.last:hover div.right {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_right_hover.png);
        }

        div.mainmenu div.menuitem.selected div.left {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_midleft_selected.png);
        }

        div.mainmenu div.menuitem.selected div.mid {
            height: 38px;
            background-image: url(../images/menu/navbar_mid_selected.png);
            background-repeat: repeat-x;
        }

            div.mainmenu div.menuitem.selected div.mid div {
                color: #FFFFFF;
            }

        div.mainmenu div.menuitem.selected div.right {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_midright_selected.png);
        }

        div.mainmenu div.menuitem.first.selected div.left {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_left_selected.png);
        }

        div.mainmenu div.menuitem.last.selected div.right {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_right_selected.png);
        }

        div.mainmenu div.menuitem:active div.left {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_midleft_pressed.png);
        }

        div.mainmenu div.menuitem:active div.mid {
            height: 38px;
            background-image: url(../images/menu/navbar_mid_pressed.png);
            background-repeat: repeat-x;
        }

            div.mainmenu div.menuitem:active div.mid div {
                color: #DDDDDD;
            }

        div.mainmenu div.menuitem:active div.right {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_midright_pressed.png);
        }

        div.mainmenu div.menuitem.first:active div.left {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_left_pressed.png);
        }

        div.mainmenu div.menuitem.last:active div.right {
            width: 4px;
            height: 38px;
            background-image: url(../images/menu/navbar_right_pressed.png);
        }

/* PANEL STYLES */
div.panel.review, div.panel.editable {
    overflow: hidden;
}

div.panel {
    border: 1px solid #CCCCCC;
    background-color: #fff;
    padding: 10px;
    font-size: 10px;
    margin: 0px 0px 5px 5px;
    clear: both;
}

    div.panel::after {
        content: "";
        display: table;
        clear: both;
    }

    div.panel.nobody {
        padding-bottom: 0px;
    }

    div.panel div.title, div.panel div.title a {
        font-size: 16px;
        color: #4E4F51;
        font-weight: bold;
    }

    div.panel .subscript {
        margin-top: 2px;
        font-size: 10px;
        color: #888;
        font-style: italic;
        font-weight: normal;
    }

    div.panel div.title {
        border-bottom: 1px solid #CCCCCC;
        text-indent: -5px;
        white-space: nowrap;
        min-height: 21px;
    }

        div.panel div.title * {
            text-indent: 0;
            vertical-align: middle;
        }

        div.panel div.title .right {
            float: right;
            vertical-align: middle;
        }

.titlefont {
    font-size: 16px;
    color: #4E4F51;
    font-weight: bold;
}

.eo-submitted {
    background-image: url(../../../img/svgs/v1.0/Status_Success.svg);
    width: 18px;
    height: 18px;
}

div.divider {
    border-bottom: 1px solid #CCCCCC;
    height: 0;
}

.panel .title.small {
    font-size: 12px;
    height: 16px;
    color: #4E4F51;
    border-bottom: 1px solid #CCCCCC;
    font-weight: bold;
    text-indent: 5px;
    padding-top: 5px;
    padding-bottom: 2px;
    margin-bottom: 8px;
}

div.panel .panelicon {
    vertical-align: middle;
    padding-right: 0px;
    border: 0;
}

div.panel div.content {
    padding: 10px 5px 5px 5px;
}

.panelsection {
    display: inline-block;
    vertical-align: top;
    /*padding:0px 0px 0px 20px;*/
    padding: 5px 10px 10px 10px;
    /* border: 1px solid #CCC; */
    /* background-color: #F7F7F7; */
}

div.panel .sub_title {
    overflow: visible;
    height: 23px;
    padding: 0px 0px 3px 5px;
    border-bottom: 1px solid #CCCCCC;
    text-indent: -5px;
    white-space: nowrap;
    font-size: 16px;
    color: #4E4F51;
    padding-top: 10px;
    font-weight: normal;
    overflow: auto;
}

div.precontent {
    padding: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
}

div.panel div.footer {
    border-top: 1px solid #CCCCCC;
    padding: 0px;
    padding-bottom: 0px;
    padding-top: 10px;
    margin-top: auto;
}

div.panel.toolbar.bottom {
    display: none;
}

div.panel.toolbar .left, div.panel div.footer .left {
    float: left;
}

div.panel.toolbar .right, div.panel div.footer .right {
    float: right;
}

/* FLOATING TOOLBAR */
div.panel.toolbar.top.fixed {
    position: fixed;
    /* height: 500px; */
    width: 31px;
    margin-left: -1px;
    margin-top: 37px;
    z-index: 9;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

    div.panel.toolbar.top.fixed .massupdate-actions,
    div.panel.toolbar.top.fixed .tabupdate-actions {
        margin: 0px 0px 0 -5px;
    }

.hide {
    display: none !important;
}

/* PAGING STYLES */
.panel.paging .paging {
    float: right;
    font-size: 12px;
    color: #5F6062;
    text-indent: 0;
    white-space: nowrap;
}

    .panel.paging .paging .prev, .paging .next {
        display: inline-block;
        text-decoration: underline;
        cursor: pointer;
        color: #0093D0;
    }

    .panel.paging .paging .prev {
        border-right: 1px solid #A4A4A4;
        margin-right: 6px;
        padding-right: 8px;
    }

    .panel.paging .paging .next {
        border-left: 1px solid #A4A4A4;
        margin-left: 6px;
        padding-left: 8px;
    }

    .panel.paging .paging .resultCount {
        display: inline-block;
    }

/* QUOTE HOME - FIELDS */
.formcolumn {
    display: inline-block;
    padding: 0 5px 0 0px;
    vertical-align: top;
    text-align: left;
    width: 206px;
}

.grid.col4x2 .formcolumn {
    width: 198px;
    min-width: 198px;
}

.formcolumn.leftborder {
    border-left: 1px solid #ccc;
    padding-left: 14px;
    margin-left: 4px;
}

.formcolumn .formsubcolumn {
    display: inherit;
    padding: 0 0 0 20px;
    vertical-align: top;
    text-align: left;
    width: -moz-calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
}

div.formgap {
    width: 194px;
    height: 42px;
}

div.panel .formcolumn div.title, .dialog.main .formcolumn div.title {
    /* total height should be 42 */
    margin-top: 0;
    padding-top: 6px;
    height: 21px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    font-weight: normal;
    color: black;
    text-indent: -5px;
    padding-left: 10px;
    padding-right: 0;
    margin-left: -15px;
}

.formlabel {
    text-align: left;
    /* display: inline-block; */
    white-space: nowrap;
    font-size: 10px;
}

.formfield .btn {
    margin: -6px 0 0 0px;
}

.formfieldlabel, .loginfieldlabel, .formlabel {
    display: inline-block;
    text-align: left;
    padding-bottom: 0px;
    color: #4E4F51;
    height: 13px;
    font-size: 10px;
    white-space: nowrap;
}

body.darkMode #doglPreviewQuoteFormSelect {
    background: var(--dark-mode-card-background-color);
    border-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

.formlabel.disabled {
    color: #5E5E5E;
}

.loginfieldlabel {
    color: #666;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 1px;
    padding-left: 0px;
}

.formtext {
    display: inline-block;
    padding-left: 8px;
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 5px;
    margin-bottom: -2px;
    height: 22px;
}

.formfield, .loginfield {
    padding-right: 5px;
    white-space: nowrap;
    padding-bottom: 5px;
    min-height: 24px;
}

.loginfield {
    padding-left: 0px;
}

.formcolumn .formfield input:not([type=checkbox]):not([type=radio]), .formcolumn .formfield div.label, .formcolumn div.formgap, .formcolumn .formfield textarea, .formcolumn .textInputWithSelect {
    width: -moz-calc(100% - 7px);
    width: -webkit-calc(100% - 7px);
    width: calc(100% - 7px);
    overflow-x: hidden;
}

.formfield input:not([type=checkbox]):not([type=radio]), .formfield textarea, .formfield div.label, .formfield textarea {
    width: 194px;
    height: 22px;
    line-height: 22px;
    border: 1px solid #CCCCCC;
    margin: 0;
    padding: 0 0 0 2px;
    font-size: 13px;
}

.formfield .shorttext {
    width: 40px !important;
}

.formfield div.label {
    border: 0;
    padding: 1px 1px 1px 3px;
}

.formfield div.label.readonly {
    background-color: #EEE;
}

.formfield input[type="checkbox"] {
    width: auto;
    height: 24px;
}

.formfield textarea {
    max-width: calc(100% - 7px);
}

    .formfield textarea.resizable {
        max-height: none;
    }

    .formfield textarea.x2 {
        height: 64px;
    }

        .formfield textarea.x2:not(.resizable) {
            max-height: 64px;
            min-height: 64px;
            resize: none;
        }

    .formfield textarea.x3 {
        height: 106px;
    }

        .formfield textarea.x3:not(.resizable) {
            max-height: 106px;
            min-height: 106px;
            resize: none;
        }

    .formfield textarea.x4 {
        height: 148px;
    }

        .formfield textarea.x4:not(.resizable) {
            max-height: 148px;
            min-height: 148px;
            resize: none;
        }

    .formfield textarea.x5 {
        height: 190px;
    }

        .formfield textarea.x5:not(.resizable) {
            max-height: 190px;
            min-height: 190px;
            resize: none;
        }

.formselectfield select /* FA: This might be an outdated style? I don't think we usually put "select"s inside of ".formselectfield"s. */ {
    background: transparent;
    width: 222px;
    font-size: 12px;
    border: 0px solid #FFF;
}

.formselectfield, select.formselectfield {
    height: 22px;
    overflow: hidden;
    border: 0px solid #ccc;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 220px;
    font-size: 13px;
}

.formselectlabel {
    height: 22px;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 13px;
}

.formselectfieldwrapper select.formselectfield {
    background: transparent;
    width: -moz-calc(100% + 25px);
    width: -webkit-calc(100% + 25px);
    width: calc(100% + 25px);
}

.formcolumn .formselectfieldwrapper {
    width: -moz-calc(100% - 10px);
    width: -webkit-calc(100% - 10px);
    width: calc(100% - 10px);
}

.formselectfieldwrapper {
    margin-bottom: 5px;
    height: 22px;
    overflow: hidden;
    border: 1px solid #ccc;
    background: url("../../../img/svgs/v1.0/Action_ExpandDown.svg") no-repeat right;
    background-size: 18px 18px; /* ER: fixes douple arrow and arrow alligned in the center issues on IE */
    background-color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .formselectfieldwrapper.compact {
        margin: 0;
        vertical-align: middle;
        display: inline-block;
    }

#remaptable .formselectfield {
    padding: 2px 50px 2px 0;
}

.formselectfieldwrapper .validation {
    margin-top: 0;
}

.textInputWithSelect {
    position: relative;
    width: 194px;
    height: 22px;
    border: 1px solid #CCC;
}

    .textInputWithSelect input, .textInputWithSelect select {
        height: 22px;
        line-height: 22px;
        padding: 0;
        border: 0;
        margin: 0;
        font-size: 13px;
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        background: none;
        position: absolute;
        /* left: 0; */
    }

    .textInputWithSelect input {
        width: calc(100% - 28px);
        padding-left: 2px;
        border-right: 1px solid #ccc;
        z-index: 1;
    }

    .textInputWithSelect select {
        background: url("../../../img/svgs/v1.0/Action_ExpandDown.svg") no-repeat right;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: white;
        width: 100%;
        z-index: 0;
        right: 0;
    }
/* IE10+ styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .textInputWithSelect select {
        background: none;
    }
}

.formfield textarea {
    height: 46px;
    max-height: 46px;
    /* max-width:192px; */
}

textarea.full {
    width: 100%;
    height: 200px;
}

.formcolumn .formfield input[type=text].datepicker.range, input[type=text].datepicker.range, .datepicker.range {
    width: 86px;
    cursor: pointer;
}

.datepickerWrapper {
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

.dateRange .datepickerWrapper {
    width: 90px;
}

.numericRange input.range, .formcolumn .formfield .numericRange input[type=text].range {
    width: 86px;
}

.dateRange > span, .numericRange > span {
    padding-left: 5px;
    padding-right: 4px;
}

.formcheckboxwrapper {
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 5px;
    white-space: nowrap;
}

    .formcheckboxwrapper input[type="checkbox"], .formcheckboxwrapper input[type="radio"] {
        margin: 11px 0 2px 0;
        vertical-align: middle;
        height: 24px;
        width: 16px;
    }

.formcolumn .formcheckboxwrapper label.formlabel,
.formcolumn .formcheckboxwrapper label.standardformlabel,
.formcolumn .formcheckboxwrapper label {
    width: -moz-calc(100% - 29px);
    width: -webkit-calc(100% - 29px);
    width: calc(100% - 29px);
}

.formcheckboxwrapper label.formlabel,
.formcheckboxwrapper label.standardformlabel,
.formcheckboxwrapper label,
.multisectioninput {
    display: inline-block;
    font-size: 13px;
    white-space: normal;
    padding-left: 5px;
    width: 172px;
    vertical-align: middle;
    margin-bottom: -8px;
    height: 100%;
    color: Black;
    word-wrap: break-word;
}

.verticalform .formcheckboxwrapper input[type="checkbox"], .verticalform .formcheckboxwrapper input[type="radio"] {
    margin: 2px 0 2px 0;
}

.verticalform.compact .formcheckboxwrapper input[type="checkbox"], .verticalform.compact .formcheckboxwrapper input[type="radio"] {
    margin: 0 0 0 0;
    height: 16px;
}

.verticalform .formcheckboxwrapper label.formlabel, .verticalform .formcheckboxwrapper label.standardformlabel, .verticalform .formcheckboxwrapper label {
    margin-bottom: 0;
}

.isDirtyHighlighted {
    background-color: #FFFFCC;
}

/* Checkbox and radio style resets */

input[type="checkbox"], input[type="radio"] {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 16px;
    width: 16px;
}

/* SEARCH STYLES */
.searchInputWrapperDiv{
    border: 0;
    border-bottom: solid 1px #7d7d7d;
    width:98%;
}
.searchInputWrapperDiv input{
    text-overflow: ellipsis;
    white-space: nowrap;
    width:90% !important;
    border:0 !important;
    outline: none !important;
}
.searchInputWrapperDiv input:focus{
    outline: none !important;
}
.searchinput {
    width: 195px;
    height: 21px;
    border: 1px solid #ccc;
}

.searchselectfieldwrapper {
    margin-bottom: 5px;
    height: 25px;
    width: 195px;
    border-bottom: 1px solid #7d7d7d;
}

.searchselectfield {
    overflow: hidden;
    width: 100%;
    background: url("../../../img/svgs/v1.0/Action_ExpandDown.svg") no-repeat;
    background-position: right 0%;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* IE10+ styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .searchselectfield {
        background: none;
    }
}

.formselectfield.disabled {
    background-color: #ebebe4 !important;
}

.asyncselect {
    cursor: pointer;
}

.contentcontainer {
    /*height:100%;*/
    height: 74px;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    text-indent: 0;
}

.horizontalline {
    height: 1px;
    width: 100%;
    background-color: #CCCCCC;
    margin-top: 5px;
    margin-bottom: 5px;
}

.normalcontent {
    padding-left: 5px;
    margin-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.quotewrapper {
    width: 100%;
    min-height: 78px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.smalltitles {
    font-size: 12px;
    height: 14px;
    color: #4E4F51;
    /* border-bottom:1px solid #CCCCCC; */
    font-weight: bold;
    text-indent: 5px;
    padding-top: 5px;
    padding-bottom: 2px;
    overflow: hidden;
}

/* QUICK FILTER STYLES */
.placeholder_text {
    color: #aaa;
}

.quicksearch_wrapfields {
    margin-left: 10px;
}

/* SEPARATOR STYLES */
.sepleft {
    border-left: 1px solid #ccc;
}

.sepright {
    border-right: 1px solid #ccc;
}

.septop {
    border-top: 1px solid #ccc;
}

.sepbottom {
    border-bottom: 1px solid #ccc;
}

.sepall {
    border: 1px solid #ccc;
}

.linesep {
    font-size: 1px;
}

.fieldicon {
    margin-left: -18px;
    margin-bottom: -6px;
    cursor: pointer;
    width: 18px;
    filter: invert(6%) sepia(28%) saturate(97%) hue-rotate(314deg) brightness(100%) contrast(85%);
}

    .fieldicon:hover {
        filter: invert(51%) sepia(50%) saturate(6055%) hue-rotate(187deg) brightness(102%) contrast(96%);
    }

.datepicker + img + .clearDatePicker {
    padding: 4px 4px 3px 4px;
    width: 18px;
}

.datepicker.clearable:not(.clear) + .fieldicon {
    display: none;
}

.datepicker.clearable.clear + .fieldicon + .fieldicon.clearDatePicker {
    display: none;
    width: 18px;
}

/*Signature and Image Editor*/
.windowMask {
    position: absolute;
    z-index: 9000;
    /* background-color:#333; */
    display: none;
}

.signature {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.signatureSizer {
    height: 50px;
    width: 200px;
    margin-top: 7px;
}

.window {
    position: fixed;
    display: none;
    z-index: 9999;
}

    .window.belowmask {
        z-index: 8999;
    }

.popOutPanel {
    border: 2px solid #888888;
    background-color: #fff;
    padding: 5px;
    font-size: 12px;
    color: #777777;
    clear: both;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    min-width: 445px;
    text-align: left;
}

/* TAB STYLES */
.ui-tabs .ui-tabs-panel.tabpage {
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    padding: 10px 0 10px 0;
    margin: -2px 0 0 1px;
}

.ui-tabs .ui-tabs-nav li {
    height: 35px;
}
    /* In jquery-ui 1.9 .ui-tabs-selected changes to .ui-tabs-active */
    .ui-tabs .ui-tabs-nav li:not(.ui-tabs-selected):not(.ui-tabs-active) {
        padding-bottom: 0;
        border-bottom: 1px solid #aaa !important; /* FA: js style to override has !important */
    }

    .ui-tabs .ui-tabs-nav li.ui-tabs-selected,
    /* In jquery-ui 1.9 .ui-tabs-selected changes to .ui-tabs-active */
    .ui-tabs .ui-tabs-nav li.ui-tabs-active {
        padding-bottom: 1px;
        border-bottom: 0;
    }

.tabs-underliner {
    width: 100%;
    height: 0;
    margin-top: -2px;
    border-top: 1px solid #aaa;
}

#customertabs {
    margin: 0 0 0 -1px;
}

/* Javascript UI autocomplete styles */
ul.ui-autocomplete {
    background-color: White;
    border: 1px solid #CCCCCC;
    font-size: 13px;
    line-height: normal;
}

    ul.ui-autocomplete,
    ul.ui-autocomplete li.ui-menu-item,
    ul.ui-autocomplete li.ui-menu-item a {
        margin: 0;
        padding: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

        ul.ui-autocomplete li.ui-menu-item a {
            padding: 0 3px;
        }

            ul.ui-autocomplete li.ui-menu-item a.ui-state-hover {
                background: none;
                background-color: #39f;
                border-color: #39f;
                color: White;
            }

/* THUMBNAIL STYLES (created in conjuction with common.js) */
.thumbnail {
    display: table-cell;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    vertical-align: middle;
}

    .thumbnail.small {
        width: 32px;
        height: 32px;
    }

        .thumbnail.small img {
            max-width: 32px;
            max-height: 32px;
        }

    .thumbnail.medium {
        width: 64px;
        height: 64px;
    }

        .thumbnail.medium img {
            max-width: 64px;
            max-height: 64px;
        }

    .thumbnail.large {
        width: 128px;
        height: 128px;
    }

        .thumbnail.large img {
            max-width: 128px;
            max-height: 128px;
        }

img.itemthumbnail, table .thumbnail.small img {
    max-width: 50px;
    max-height: 30px;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

/* UTILITY STYLES */
.hidden {
    display: none;
}

.fill {
    width: 100%;
}

.center {
    text-align: center;
}

.prose {
    font-size: 13px;
}

.noclick {
    pointer-events: none;
}

.relative {
    position: relative;
}

/* VALIDATION STYLES */
.validation {
    display: inline-block;
    position: absolute;
    /*z-index:1;*/
    width: 18px;
    height: 18px;
    margin-left: -26px;
    margin-right: 6px;
    margin-top: 1px;
    vertical-align: middle;
    background-repeat: no-repeat;
}

    .validation.custom {
        margin: 0;
        position: inherit;
    }

    .validation.error.tip {
        background-image: url(../../../img/svgs/sell/Status_Error_Red.svg);
    }

    .validation.warning.tip {
        background-image: url(../../../img/svgs/sell/Status_Warning_Orange.svg);
    }

    .validation.ok.tip {
        background-image: url(../../../img/svgs/v1.0/Status_Success.svg);
    }

    .validation.wait.tip {
        background-image: url(../images/warning/wait.gif);
    }

    .validation.error {
        background-image: url(../../../img/svgs/sell/Status_Error_Red.svg);
    }

    .validation.warning {
        background-image: url(../../../img/svgs/sell/Status_Warning_Orange.svg);
    }

    .validation.ok {
        background-image: url(../../../img/svgs/v1.0/Status_Success.svg);
    }

    .validation.wait {
        background-image: url(../images/warning/wait.gif);
    }

    .validation.question {
        background-image: url(../../../img/svgs/v1.0/Application_Help.svg);
    }

        .validation.question.tip {
            background-image: url(../../../img/svgs/v1.0/Application_Help.svg);
        }

    .validation.review {
        background-image: url(../images/icons/review.png);
    }

    .validation.approve {
        background-image: url(../../../img/svgs/v1.0/Action_Approve.svg);
    }

    .validation.approvegreen {
        background-image: url(../../../img/svgs/v1.0/Action_Approve.svg);
        filter: invert(37%) sepia(100%) saturate(641%) hue-rotate(74deg) brightness(89%) contrast(107%);
    }

    .validation.deny {
        background-image: url(../../../img/svgs/v1.0/Action_Deny.svg);
    }

    .validation.denyred {
        background-image: url(../../../img/svgs/v1.0/Action_Deny.svg);
        filter: invert(17%) sepia(63%) saturate(3857%) hue-rotate(347deg) brightness(91%) contrast(117%);
    }

    .validation.info {
        background-image: url(../../../img/svgs/v1.0/Application_Information.svg);
    }

.borderError {
    border: solid red 1px;
}

.tooltip {
    display: none;
    position: absolute;
    z-index: 6;
    color: White;
    font-family: Roboto, sans-serif;
    font-weight: normal;
    font-size: 14px;
    background-color: #1d1d1d;
    background-image: url(../images/warning/tooltip_repeat.png);
    background-repeat: repeat;
    min-width: 150px;
    max-width: 250px;
    padding: 10px;
    margin-left: -26px;
    margin-top: 27px;
    white-space: normal;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-align: left;
}

    .tooltip .point.up {
        position: absolute;
        background-image: url(../images/warning/tooltip_point_up.png);
        top: -5px;
        margin-left: -4px;
        width: 11px;
        height: 6px;
    }

    .tooltip .point.down {
        position: absolute;
        background-image: url(../images/warning/tooltip_point_down.png);
        bottom: -5px;
        margin-left: -4px;
        width: 11px;
        height: 6px;
    }

    .tooltip.hoverinfo {
        font-family: Arial;
        color: #DDD;
        margin: 40px 0 0 0;
        word-wrap: break-word;
    }

        .tooltip.hoverinfo.tooltipconflict {
            display: none !important;
        }


/*styles pulled in quosalstyle*/
body {
    font: 65% sans-serif, "Arial";
    margin: 0px;
    /*background-color:#FFF;*/
    /*background-color:#EAE8E8;*/
    /*background-color:#F3F3F3;*/
}

.demoHeaders {
    margin-top: 2em;
}

#dialog_link {
    padding: .4em 1em .4em 20px;
    text-decoration: none;
    position: relative;
}

    #dialog_link span.ui-icon {
        margin: 0 5px 0 0;
        position: absolute;
        left: .2em;
        top: 50%;
        margin-top: -8px;
    }

ul#icons {
    margin: 0;
    padding: 0;
}

    ul#icons li {
        margin: 2px;
        position: relative;
        padding: 4px 0;
        cursor: pointer;
        float: left;
        list-style: none;
    }

    ul#icons span.ui-icon {
        float: left;
        margin: 0 4px;
    }

#toolbar {
    padding: 10px 10px;
}

label.inputlabel {
    width: 190px;
    float: left;
    padding-top: 3px;
    font: 11pt sans-serif, "Arial";
}

.floatleft {
    float: left;
}

.panel.accordian {
    overflow: hidden;
}

.accordianImage.collapsed {
    background-image: url(../../../img/svgs/v1.0/Action_ExpandDown.svg);
}

.accordianImage.expanded {
    background-image: url(../../../img/svgs/v1.0/Action_CollapseUp.svg);
}

.color.success {
    color: #00C600;
    font-size: 16px;
    font-weight: bold;
}

.label.noresults {
    font-size: 14px;
    color: #5F6062;
    padding: 8px;
    font-style: italic;
}

.standardformlabel {
    text-align: left;
    display: inline-block;
}

.standardformfieldlabel {
    padding-top: 5px;
    text-align: left;
    padding-left: 0px;
    color: #4E4F51;
}

/* CONFIG MENUS */
.configbtn {
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

    .configbtn img {
        width: 24px;
        height: 24px;
    }

.configmenu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #555;
    min-width: 140px;
    box-shadow: 2px 2px 6px 1px rgba(80,80,80,.3);
    border-radius: 2px;
    z-index: 10001;
}

    .configmenu .menuitem {
        padding: 6px;
        border-bottom: 1px solid #ccc;
        font-size: 12px;
        vertical-align: middle;
        cursor: pointer;
        color: #000;
        font-weight: normal;
    }

        .configmenu .menuitem:hover {
            background-color: #0093D0;
            color: #fff;
        }

        .configmenu .menuitem:last-child {
            border-bottom: none;
        }

        .configmenu .menuitem img {
            vertical-align: middle;
            margin: -3px 6px 0 0;
        }

/* TOOLBAR STYLES */
.panel .toolbar {
    display: inline-block;
}

.panel .title .toolbar {
    margin-top: -2px;
}

.toolbutton {
    display: inline-block;
    cursor: pointer;
    text-indent: 0;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 2px;
    vertical-align: middle;
    min-height: 18px;
    min-width: 18px;
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: -4px;
    font-size: 14px;
    color: black;
}

.panel.toolbar .toolbutton {
    margin-top: 0px;
}

.toolbutton:hover {
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px rgba(0,0,0,.25);
}

.toolbutton.disabled:hover {
    border: none;
    box-shadow: none;
    cursor: default;
}

.panel .toolbar .vr {
    display: inline-block;
    width: 2px;
    height: 15px;
    background-color: #ccc;
    vertical-align: middle;
    margin: 0 2px 0 2px;
}

.toolbutton.edit {
    background-image: url(../../../img/svgs/v1.0/Action_Edit.svg);
}

.toolbutton.add-customer {
    background-image: url(../../../img/svgs/v1.0/Action_AddCustomer.svg);
}

.toolbutton.add-opportunity {
    background-image: url(../../../img/svgs/v1.0/Application_Opportunity.svg);
}

.toolbutton.add {
    background-image: url(../../../img/svgs/v1.0/Action_AddNew.svg);
}

.toolbutton.addcomment {
    background-image: url(../../../img/svgs/v1.0/Action_Comment.svg);
}

.toolbutton.back {
    background-image: url(../images/toolbar/back.png);
}

.toolbutton.check-order-porter {
    background-image: url(../../../img/svgs/sell/Action_Download.svg);
}

.toolbutton.recheck-order-porter {
    background-image: url(../images/toolbar/recheck-order-porter.png);
}

.toolbutton.check-manager-approval {
    background-image: url(../images/toolbar/check-manager-approval.png);
}

.toolbutton.config-drop-down {
    background-image: url(../../../img/svgs/v1.0/Menu_System.svg);
}

.toolbutton.dropdown {
    background-image: url(../../../img/svgs/v1.0/Action_ExpandDown.svg);
}

.toolbutton.delete {
    background-image: url(../../../img/svgs/v1.0/Action_Delete.svg);
}

.toolbutton.edit-customer {
    background-image: url(../images/toolbar/edit-customer.png);
}

.toolbutton.edit-opportunity {
    background-image: url(../images/toolbar/edit-opportunity.png);
}

.toolbutton.open-opportunity {
    background-image: url(../images/toolbar/open-opportunity.png);
}

.toolbutton.delete-customer {
    background-image: url(../images/toolbar/delete-customer.png);
}

.toolbutton.etilize-search {
    background-image: url(../images/toolbar/etilize-search.png);
}

.toolbutton.btn_unfilter {
    background-image: url(../images/toolbar/clear-grid-filter.png);
}

.toolbutton.btn_refresh_liqf {
    background-image: url(../../../img/svgs/v1.0/Action_Refresh.svg);
}

.toolbutton.gear {
    background-image: url(../../../img/svgs/v1.0/Menu_System.svg);
}

.toolbutton.import-avatax {
    background-image: url(../images/toolbar/import-avatax.png);
}

.toolbutton.import-greatamerica {
    background-image: url(../images/toolbar/import-greatamerica.png);
}

.toolbutton.import-greatamerica-fast {
    background-image: url(../images/toolbar/import-greatamerica-fast.png);
}

.toolbutton.import-hp-iquote {
    background-image: url(../images/toolbar/import-hp-iquote.png);
}

.toolbutton.import-tech-data-quote {
    background-image: url(../images/toolbar/import-tech-data-quote.png);
}

.toolbutton.load-mapping {
    background-image: url(../images/toolbar/load-mapping.png);
}

.toolbutton.new-version {
    background-image: url(../images/toolbar/new-version.png);
}

.toolbutton.next {
    background-image: url(../../../img/svgs/v1.0/Action_Forward.svg);
}

.toolbutton.paste-dell-quote {
    background-image: url(../images/toolbar/paste-dell-quote.png);
}

.toolbutton.import-dell-xml {
    background-image: url(../images/toolbar/import-dell-xml.png);
}

.toolbutton.import-dell-pdf {
    background-image: url(../images/toolbar/import-dell-pdf.png);
}

.toolbutton.import-dell-quote {
    background-image: url(../images/toolbar/import-dell.png);
}

    .toolbutton.import-dell-quote.multi {
        background-image: url(../images/toolbar/import-dell-multi.png);
    }

.toolbutton.paste-quote {
    background-image: url(../images/toolbar/paste-quote.png);
}

.toolbutton.product-search {
    background-image: url(../images/toolbar/product-search.png);
}

.toolbutton.product-config {
    background-image: url(../images/toolbar/product-configuration.png);
}

.toolbutton.quote-audit-trail {
    background-image: url(../images/toolbar/quote-audit-trail.png);
}

.toolbutton.remove-opportunity {
    background-image: url(../images/toolbar/delete-opportunity.png);
}

.toolbutton.refresh {
    background-image: url(../../../img/svgs/v1.0/Action_Refresh.svg);
}

    .toolbutton.refresh.disabled {
        background-image: url(../../../img/svgs/v1.0/Action_Refresh.svg);
        filter: opacity(50%);
    }

.toolbutton.save-mapping {
    background-image: url(../images/toolbar/save-mapping.png);
}

.toolbutton.search-customer {
    background-image: url(../images/toolbar/search-customer.png);
}

.toolbutton.search-opportunity {
    background-image: url(../images/toolbar/search-opportunity.png);
}

.toolbutton.search-versions {
    background-image: url(../images/toolbar/search-versions.png);
}

.toolbutton.update {
    background-image: url(../../../img/svgs/v1.0/Action_Refresh.svg);
}

.toolbutton.update-white {
    background-image: url(../../../img/svgs/v1.0/Action_Refresh_White.svg);
}

.toolbutton.copy-quote {
    background-image: url(../../../img/svgs/v1.0/Action_Copy.svg);
}

.toolbutton.create-template {
    background-image: url(../images/toolbar/create-template.png);
}

.toolbutton.check-shipping {
    background-image: url(../images/toolbar/shipping.png);
}
/*.toolbutton.tabupdate-actions.sidebar { background-image:url(../images/toolbar/tab-action.png); }*/
/*.toolbutton.massupdate-actions.sidebar { background-image:url(../images/toolbar/item-action.png); }*/
.toolbutton.unpin {
    background-image: url(../images/toolbar/pin.png);
}

    .toolbutton.unpin:active {
        background-image: url(../images/toolbar/unpin.png);
    }

.toolbutton.pin {
    background-image: url(../images/toolbar/unpin.png);
}

    .toolbutton.pin:active {
        background-image: url(../images/toolbar/pin.png);
    }

.toolbutton.minimize {
    background-image: url(../../../img/svgs/v1.0/Action_Minimize.svg);
}

.toolbutton.maximize {
    background-image: url(../../../img/svgs/v1.0/Action_Maximize.svg);
}

.toolbutton.video {
    background-image: url(../images/icons/video.png);
}

#movablepanels .widget:hover .toolbutton.editmode {
    background-image: url(../../../img/svgs/v1.0/Action_Edit.svg);
}

.toolbutton.editmode_resize.larger {
    background-image: url(../images/userdashboard_icons/widget-down.png);
}

.toolbutton.editmode_resize.smaller {
    background-image: url(../images/userdashboard_icons/widget-up.png);
}

.toolbutton.editmode_remove {
    background-image: url(../../../img/svgs/v1.0/Action_Delete.svg);
}

.toolbutton.editwidget {
    background-image: url(../../../img/svgs/v1.0/Action_Edit.svg);
}

.toolbarcheckboxwrapper {
    display: inline-block;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 5px;
    white-space: nowrap;
    margin-right: 10px;
}

    .toolbarcheckboxwrapper input[type="checkbox"], .toolbarcheckboxwrapper input[type="radio"] {
        margin: 11px 0 2px 0;
        vertical-align: middle;
        height: 24px;
        width: 16px;
    }

    .toolbarcheckboxwrapper label {
        display: inline-block;
        font-size: 13px;
        white-space: normal;
        padding-left: 5px;
        vertical-align: middle;
        margin-bottom: -8px;
        height: 100%;
        color: Black;
        word-wrap: break-word;
    }

.standaloneWarning {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
    padding-left: 5px;
    background-repeat: no-repeat;
    background-image: url(../../../img/svgs/sell/Status_Warning_Orange.svg);
}

.standaloneError {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
    padding-left: 5px;
    background-repeat: no-repeat;
    background-image: url(../../../img/svgs/sell/Status_Error_Red.svg);
}

/* MOBILE MENU */
#liquidmenu {
    background-image: url(../images/menu/mobile-menu.png);
    width: 22px;
    height: 22px;
}

    #liquidmenu:hover {
        background-image: url(../images/menu/mobile-menu-hover.png);
    }

/* TUTORIAL STYLES */
#tutorial {
    display: none;
}

    #tutorial .slide {
        margin-left: 10px;
    }

    #tutorial .screenshot {
        box-shadow: 2px 2px 4px #888;
        margin-bottom: 10px;
        border: solid 1px #888
    }

    #tutorial .step .number {
        font-size: 16px;
        vertical-align: middle;
    }

    #tutorial .step .message {
        vertical-align: middle;
        margin-left: 4px;
    }

    #tutorial .leftpanel {
        float: left;
    }

    #tutorial .rightpanel {
        float: left;
        margin-left: 20px;
        width: 176px;
    }

.bx-prev {
    margin-left: -30px;
}

.bx-next {
    margin-right: -30px;
}

/* PRICE SOURCE LOOKUP */
.pricesourcelookup {
    width: 18px;
    height: 18px;
    background-image: url(../../../img/svgs/v1.0/Cloud.svg);
    background-size: 18px;
    position: relative; /*this is a fix for responsive UI*/
    margin-top: -12px;
    margin-left: -4px;
    z-index: 8;
}

    .pricesourcelookup.etilize.compare {
        margin-left: 0;
    }

    .pricesourcelookup.contentgrid {
        margin-top: 0px;
        margin-left: 0px;
        position: inherit;
        display: inline-block;
    }

    .pricesourcelookup.searchgrid {
        margin-top: 0px;
        margin-left: 0px;
        position: inherit;
    }

    .pricesourcelookup:hover {
        background-image: url(../../../img/svgs/v1.0/Cloud.svg);
        background-size: 18px;
    }

    .pricesourcelookup.disabled {
        background-image: url(../../../img/svgs/v1.0/Cloud.svg);
        background-size: 18px;
        filter: opacity(50%);
    }

.panel.productsources #pricing .pending {
    margin-top: 10px;
}

.panel.productsources {
    position: absolute;
    width: 220px;
    z-index: 9;
    text-align: left;
}

    .panel.productsources.etilize {
        margin-left: -4px;
    }

    .panel.productsources .title .close {
        width: 18px;
        height: 18px;
        float: right;
        background-image: url(../../../img/svgs/v1.0/Action_Close.svg);
        cursor: pointer;
    }

        .panel.productsources .title .close:hover {
            background-image: url(../../../img/svgs/v1.0/Action_Close.svg);
        }

    .panel.productsources.contentgrid, .panel.productsources.searchgrid {
        margin-top: 5px;
    }

.spinner.productsourcelookup {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 6px;
    left: -44px;
}

    .spinner.productsourcelookup.contentgrid {
        left: 0px;
        top: 0px;
        position: inherit;
    }

    .spinner.productsourcelookup.searchgrid {
        left: 0px;
        top: 0px;
        position: inherit;
    }

#sourcestable {
    width: 100%;
}

table.warehousetable td {
    padding-bottom: 4px;
}

#sourcestable tr.sourcerow:hover, table.warehousetable tr.whrow:hover {
    background-color: #eaeaea;
    cursor: pointer;
}

#sourcestable td.imgcol {
    width: 1px;
    padding-right: 4px;
    padding-left: 0px;
}

body.darkMode #sourcestable td.imgcol {
    filter: invert(.7);
}

#sourcestable td.pricecol {
    width: 1px;
    padding-right: 10px;
    text-align: right;
}

#sourcestable td.namecol {
    text-align: right;
    font-weight: bold;
    font-size: 12px;
}

body.darkMode #sourcestable td.namecol {
    color: var(--dark-mode-grey-color);
}

.etilizeprice {
    font-size: 11px;
    font-weight: bold;
    color: #0a0;
}

body.darkMode .etilizeprice {
    color: #0a0 !important;
}

.etilizeqty {
    font-size: 9px;
    font-weight: bold;
}

body.darkMode .etilizeqty {
    color: #5f6062 !important;
}

.nodata {
    padding-left: 22px;
    color: #5f6062;
    font-size: 12px;
    font-style: italic;
}

.warehousetable {
    width: 100%;
    padding-left: 12px;
}

.whqtycol {
    text-align: right;
}

.ui-tabs {
    position: static;
}

/* Open Quote List */
div.panel div.content.quotelist {
    padding-top: 2px;
}

    div.panel div.content.quotelist div.horizontalline {
        margin-bottom: 2px;
        margin-top: 2px;
    }

    div.panel div.content.quotelist .contentcontainer .quoteindicators {
        width: 30px;
        /*border-right: 1px solid #CCCCCC;*/
        float: right;
    }

        div.panel div.content.quotelist .contentcontainer.quoteindicators div.innerdiv {
            padding-top: 2px;
            padding-right: 11px;
            float: right;
        }

        div.panel div.content.quotelist .contentcontainer.quoteindicators.successlist {
            border-right: 0;
        }

            div.panel div.content.quotelist .contentcontainer.quoteindicators.successlist div.innerdiv {
                padding-right: 0;
            }

#mask, .windowMask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 9000;
    background-color: #F3F3F3 !important;
    opacity: .5 !important;
    display: none;
}

/* ADMIN MENU REQUIRED*/
.menu-top-level:required {
    float: left;
    margin-left: 0px;
    padding: 10px 2px 10px 2px;
    width: 200px;
    background-color: #FFFFFF;
    font: 16px sans-serif, "Tacomah", "Arial";
    color: red;
    border-top: 2px solid #CCCCCC;
    cursor: pointer;
}

.menu-level1:required {
    float: left;
    margin-left: 20px;
    padding: 2px;
    width: 180px;
    background-color: #FFFFFF;
    font: 11pt sans-serif, "Tacomah", "Arial";
    color: red;
}

.menu-level1.selected > div.menulabel:required {
    background-color: red;
    width: 150px;
}

.menu-level2.selected > div.menulabel:required {
    background-color: red;
}

/* FORMS REQUIRED*/
input:required, textarea:required {
    border-color: red !important;
}

    input:required + label {
        color: red;
    }

/* CLIPBOARD */
#clipboard {
    position: fixed;
    min-width: 200px;
    background-color: #FDFDC7;
    border: 2px solid #AFAF62;
    border-radius: 2px;
    z-index: 99999;
    display: none;
    box-shadow: 2px 2px 4px rgba(0,0,0,.3);
    overflow: auto;
    min-height: 100px;
    max-height: 800px;
    max-width: 100%;
    max-width: calc(100% - 4px);
    height: 350px;
}

    #clipboard .title {
        margin: 5px;
        border-bottom: 1px solid #AFAF62;
        font-weight: bold;
        padding-bottom: 4px;
        font-size: 12px;
        cursor: move;
    }

    #clipboard .body {
        margin: 7px;
        min-height: 100px;
        max-height: calc(100% - 40px);
        min-height: calc(100% - 40px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    #clipboard .title .close {
        width: 18px;
        height: 18px;
        float: right;
        background-image: url(../../../img/svgs/v1.0/Action_Close.svg);
        cursor: pointer;
    }

    #clipboard .title .trash {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-bottom: -3px;
        margin-left: 4px;
        background-image: url(../../../img/svgs/v1.0/Action_Delete.svg);
        cursor: pointer;
    }

    #clipboard .title .refresh {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-bottom: -3px;
        margin-left: 4px;
        background-image: url(../../../img/svgs/v1.0/Action_Refresh.svg);
        cursor: pointer;
    }

.servermessage {
    margin-top: 6px;
    padding: 10px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
}

.priceoverridefield {
    font-weight: bold;
    font-style: italic;
}

/* HORIZONTAL SCROLL STRIP AKA SIDESCROLLER */
/* FSP 4/5/16: This SideScroller feature has been ported to React, and these styles are relevant to NextGen as well as older markup. */
div.scroll-strip.right {
    background-image: url(../images/quote/quote_content/scroll-arrow-right.png), -webkit-linear-gradient(left, rgba(40, 40, 40, .12), rgba(40, 40, 40, .45));
    background-image: url(../images/quote/quote_content/scroll-arrow-right.png), -moz-linear-gradient(left, rgba(40, 40, 40, .12), rgba(40, 40, 40, .45));
    background-image: url(../images/quote/quote_content/scroll-arrow-right.png), -ms-linear-gradient(left, rgba(40, 40, 40, .12), rgba(40, 40, 40, .45));
    background-image: url(../images/quote/quote_content/scroll-arrow-right.png), linear-gradient(to right, rgba(40, 40, 40, .12), rgba(40, 40, 40, .45));
}

div.scroll-strip.left {
    background-image: url(../images/quote/quote_content/scroll-arrow-left.png), -webkit-linear-gradient(left, rgba(40, 40, 40, .45), rgba(40, 40, 40, .12));
    background-image: url(../images/quote/quote_content/scroll-arrow-left.png), -moz-linear-gradient(left, rgba(40, 40, 40, .45), rgba(40, 40, 40, .12));
    background-image: url(../images/quote/quote_content/scroll-arrow-left.png), -ms-linear-gradient(left, rgba(40, 40, 40, .45), rgba(40, 40, 40, .12));
    background-image: url(../images/quote/quote_content/scroll-arrow-left.png), linear-gradient(to right, rgba(40, 40, 40, .45), rgba(40, 40, 40, .12));
}

div.sidescroll-container {
    width: 100%;
    position: relative;
}

    div.sidescroll-container table.datagrid {
        width: -webkit-calc(100% - 1px);
        width: -moz-calc(100% - 1px);
        width: calc(100% - 1px);
        float: left;
    }

    div.sidescroll-container > div.sidescroll-subcontainer {
        overflow: auto;
        width: 100%;
    }

div.scroll-strip-parent.right {
    float: right;
}

div.scroll-strip-parent, div.scroll-strip {
    width: 34px;
}

div.scroll-strip {
    z-index: 2;
    height: 100%;
    height: -webkit-calc(100% - 17px);
    height: -moz-calc(100% - 17px);
    height: calc(100% - 17px);
    position: absolute;
    background-position: center;
    background-repeat: repeat-y;
    opacity: .6;
}

    div.scroll-strip.hide {
        display: none;
    }
/* END HORIZONTAL SCROLL STRIP AKA SIDESCROLLER */

div.overflow {
    overflow: visible;
}

/* SOURCE GROUPS */
#customSourcesList {
    cursor: pointer;
    color: #336;
    font-style: italic;
    font-weight: bold;
    display: inline;
}

    #customSourcesList.disabled {
        color: #999;
        cursor: default;
    }

/* FULLSCREEN PANEL EXPAND BUTTON */
div.panel .title .fullscreenicon {
    background-image: url(../../../img/svgs/v1.0/Action_FullScreen.svg);
    width: 18px;
    height: 18px;
    float: right;
    cursor: pointer;
    margin-left: 10px;
}

div.panel.fullscreen {
    position: fixed;
    left: 0px;
    top: 0px;
    width: -moz-calc(100% - 22px);
    width: -webkit-calc(100% - 22px);
    width: calc(100% - 22px);
    height: -moz-calc(100% - 69px);
    height: -webkit-calc(100% - 69px);
    height: calc(100% - 69px);
    height: calc(100% - 62px);
    margin: 47px 0 0 0;
    padding-top: 50px;
    margin: 0;
    z-index: 9996 !important; /*keeps this above #topHeader (for cw_suite)*/
    overflow: auto;
}

    div.panel.fullscreen > div.title {
        position: fixed;
        top: 10px;
        left: 0;
        z-index: 3;
        background-color: white;
        width: -webkit-calc(100% - 29px);
        width: -moz-calc(100% - 29px);
        width: calc(100% - 29px);
        width: calc(100% - 47px);
        padding: 16px 10px 4px 15px;
        border: 2px solid #CCCCCC;
        text-indent: 0;
    }

        div.panel.fullscreen > div.title div.toolbar .notfullscreen {
            display: none;
            visibility: hidden;
        }

body.overflowHidden {
    overflow: hidden;
}

.grid.editMode div.fullscreenicon {
    display: none;
}
/* -- ITEM NOTES FULL SCREEN MODE -- */
.fullscreen iframe {
    width: calc(100% - 30px) !important;
    width: -moz-calc(100% - 30px) !important;
    width: -webkit-calc(100% - 30px) !important;
    height: calc(100% - 60px);
    margin-top: -10px;
    position: absolute;
}

/* DEBUG INFO */
.debuginfo {
    margin: 30px 10px 30px 10px;
    padding: 0 10px 10px 10px;
    border: 1px dashed #B72A2A;
    background-color: #FFE0E0;
    width: calc(100% - 42px);
    font-size: 12px;
}

.debugheader {
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    padding: 3px 0 3px 0;
}

.debuginfo .debugline {
    line-height: 14px;
}

    .debuginfo .debugline.exception {
        color: #D00;
        font-weight: bold;
        cursor: pointer;
    }

    .debuginfo .debugline.stack {
        display: none;
        padding-left: 10px;
    }

.soaptrace {
    padding: 5px 0 5px 0;
}

.debugline.soap.url {
    color: #00D;
    cursor: pointer;
}

    .debugline.soap.url.request {
        color: #080;
    }

.debugline.soap.message {
    display: none;
    padding-left: 10px;
}

.rowtemplate {
    display: none;
}

::-ms-clear {
    display: none;
}

.infobox {
    display: block;
    border-radius: 5px;
    border: 1px solid #666;
    background-color: #EEE;
    padding: 5px;
    margin: 10px;
    font-size: small;
    color: #666;
}
    body.darkMode .infobox {
        color: #fff;
    }
    .infobox.success {
        color: #0A0;
        border: 1px solid #0C0;
        background-color: #DFD;
    }

    .infobox.error {
        color: #A00;
        border: 1px solid #C00;
        background-color: #FDD;
    }

    .infobox.warning {
        color: #DA0;
        border: 1px solid #FD0;
        background-color: #FDD;
    }

    .infobox.notice {
        color: rgb(20, 20, 20);
        background-color: rgb(255, 255, 255);
        border: solid 2px #eb7b18;
        border-radius: 4px;
        font-size: small;
        background: url("../../../skins/quosal/images/warning/warn29.png") no-repeat left;
    }

    .infobox.noticeless {
        border-radius: 4px;
        background-color: rgb(255, 255, 255);
        border: solid 2px #0a92fa;
        background: url("../../../skins/quosal/images/warning/info29.png") no-repeat left;
    }

    .infobox.message {
        margin-left: 18px;
        border: none;
        display: block;
        background-color: transparent;
    }

#maindialog .instruction {
    color: Red;
    max-height: 10em;
    overflow: auto;
}

#maindialog .formcolumn.adminColumn {
    border: 1px solid #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-bottom: 4px;
}

#maindialog .formcolumn + .formcolumn.adminColumn {
    margin-left: 40px;
}

/* -- MAIN MENU QUICK SEARCH -- */
.headerQuickQuoteSearch {
    display: inline-block;
}

    .headerQuickQuoteSearch input {
        margin: 0;
        border: 0;
    }

        .headerQuickQuoteSearch input[type=text] {
            width: 130px;
            max-width: 150px;
            min-width: 25px;
            display: inline-block;
            padding: 1px 5px;
            color: #555;
            background-color: #DDD;
        }

            .headerQuickQuoteSearch input[type=text]:focus {
                color: black;
                background-color: White;
            }

        .headerQuickQuoteSearch input[type=submit] {
            margin: 2px;
            color: transparent;
            background-color: #4E4F51;
            background-position: center;
            cursor: pointer;
            margin-right: 10px;
        }

/* -- DEVEXPRESS Editor -- */
div.maximizableIframeContainer {
    background: #fafafa;
    border: none;
}

    div.maximizableIframeContainer.maximized {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0px;
        bottom: 0px;
        right: 0px;
        margin: 0;
        overflow: hidden;
        z-index: 99999999;
    }

.fullscreenicon {
    background-image: url(../../../img/svgs/v1.0/Action_FullScreen.svg);
    width: 18px;
    height: 18px;
    cursor: pointer;
    float: right;
    position: relative;
    border: none;
}

div.maximizableIframeContainer.maximized .rtfEditor {
    height: calc(100% - 20px) !important;
}

/* -- TAB SPREADSHEET - (DEVEXPRESS - Spreadsheet.aspx) -- */
#aspSpreadSheet {
    width: calc(100% - 1px) !important;
}

/* -- TOOLBAR -- */
form#form1 .toolbar {
    width: calc(100% - 95px);
}

    form#form1 .toolbar .left, form#form1 .toolbar .right {
        display: inline-block;
    }

.toolbar .left {
    margin-left: 5px;
}

/* -- BUTTONS -- */
.custom-file-upload input[type="file"] {
    display: none;
}

.custom-file-upload, #btnLoad {
    color: #000;
    font: 12px Tahoma, Geneva, sans-serif;
    border: 1px solid #7F7F7F;
    background: #E0DFDF url('/QuosalWeb/DXR.axd?r=1_27-vWkGa') repeat-x top;
    text-shadow: 1px 1px 1px #FFFFFF;
    white-space: nowrap;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    padding: 5px 20px;
}

    .custom-file-upload:hover, #btnLoad:hover {
        color: #000000;
        border: 1px solid #606060;
        background: #F2F2F2 url('/QuosalWeb/DXR.axd?r=1_28-vWkGa') repeat-x top;
    }

form#form1 #SaveButton {
    color: #000;
    text-shadow: 1px 1px 1px #66ccff;
    width: 100px;
    border: 1px solid #323232;
    border-top: none;
    border-radius: 3px;
    background-image: url(../images/buttons/save_mid.png);
}

    form#form1 #SaveButton:hover {
        background-image: url(../images/buttons/save_mid_hover.png);
    }

.dxbButton div.dxb {
    padding: 3px 7px 3px;
    border: none;
}
/* -- UX CLEANUP -- */
#aspSpreadSheet_SSRC_TC_T6T, #aspSpreadSheet_SSRC_TC_AT6T,
#aspSpreadSheet_SSRC_T0G0I1, #aspSpreadSheet_SSRC_T0G0I2 {
    display: none;
}

#aspSpreadSheet a:hover {
    font: 11px Verdana, Geneva, sans-serif;
}
/* -- FIREFOX FLOAT ISSUE FIX -- */
form#form1 .toolbar .right {
    position: absolute;
    right: 10px;
}

#etilizelink {
    width: 180px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
}

.img-truefalse {
    width: 18px;
    height: 18px;
}

.img-smalldropdown {
    width: 18px;
    height: 18px;
}

body.darkMode #costresults div.sourceoptionsbtn img.img-smalldropdown {
    filter: invert(.7);
}

/* Sell Intel */
.bitile iframe {
    border: 2px solid #ccc;
    margin: 2px;
}

textarea {
    white-space: pre-wrap;
}

/* SPINNER INTRODUCED IN APRIL 2018 */
.april2018spinner_loading {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    padding: 8.5px;
    vertical-align: middle;
    text-align: center;
    background-color: transparent;
    border: 4.3px solid transparent;
    border-top-color: #026CCF;
    border-bottom-color: #026CCF;
    border-radius: 50%;
    min-height: 30.2px;
    min-width: 30.2px;
}

.april2018spinner_outer {
    animation: april2018spinner_spin 1s infinite;
}

.april2018spinner_inner {
    animation: april2018spinner_spin 1s infinite;
}

@keyframes april2018spinner_spin {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

#april2018spinner_wrap {
    box-sizing: border-box;
    display: table-cell;
    vertical-align: middle;
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: 9001;
}

#costresults .itemrow td {
    vertical-align: top;
}

body.darkMode #costresults div.warehousebtn img {
    filter: invert(.7);
}

/* see also etilize.css when merged */
#paging {
    float: right;
    font-size: 12px;
    margin-top: 0px;
}

    #paging td[align=right] {
        text-align: right;
        color: #5f6062;
    }

    #paging td[align=left] {
        font-size: 18px;
        color: #5f6062;
    }

#nextpage, #prevpage {
    text-decoration: underline;
    cursor: pointer;
    color: #0093d0;
    padding-bottom: 3px;
}

#nextpage {
    border-left: 1px solid #a4a4a4;
    margin-left: 6px;
    padding-left: 8px;
}

#prevpage {
    border-right: 1px solid #a4a4a4;
    margin-right: 6px;
    padding-right: 8px;
}

#resultcount {
    font-size: 12px;
    color: #5f6062;
}

.PriceModCalculatorIcon {
    display: inline-block;
    vertical-align: text-top;
}

    .PriceModCalculatorIcon .CwButton-innerLightActive .isvg {
        width: 18px;
        height: 18px;
    }

    .PriceModCalculatorIcon .CwButton-innerLightActive {
        padding: 0;
        z-index: 2;
    }

.panel .pricingHelper {
    position: absolute;
    z-index: 9;
    min-width: 300px;
}

    .panel .pricingHelper .close {
        width: 18px;
        height: 18px;
        float: right;
        margin-top: -15px;
        margin-right: -5px;
        background-image: url(../../../img/svgs/v1.0/Action_Close.svg);
    }

.pricingHelper .pricingFields {
    margin: 15px;
}

.pricingFields .originalFields {
    border-style: solid;
    border-color: lightgray;
    border-width: thin;
    display: inline-block;
    width: 130px;
}

.pricingFields .calculatedFields {
    border-style: solid;
    border-color: #0093d0;
    border-width: 1px;
    display: inline-block;
    width: 130px;
}

.pricingFields .pricingFieldLabel {
    font-size: 11px;
    text-align: center;
    display: block;
    padding-top: 5px;
}

.pricingFields .pricingFieldValue {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    display: block;
    padding-top: 10px;
    padding-bottom: 5px;
}

.quoteEditInfoBlock {
    border-style: solid;
    border-color: #0a92fa;
    border-width: 1px;
    background-color: aliceblue;
    margin: 0 10px 10px 10px;
    display: inline-block;
    padding: 10px;
}

.quoteEditInfoMessage {
    font-size: 14px;
    display: inline;
}

.quoteEditCloseInfoBlock {
    width: 14px;
    height: 14px;
    margin-left: 25px;
    background-image: url(../../../img/svgs/v1.0/Action_Close.svg);
    display: inline-block;
    vertical-align: sub;
}

.passwordErrorText {
    color: red;
}

#passwordHelpText {
    font-size: 13px;
}

.registrationDialog {
    position: fixed;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
}

.registrationDialogContent {
    position: absolute;
    top: 30%;
    left: 40%;
    width: 500px;
    padding: 10px;
}

.cancelRegistrationDialog {
    font-size: 14px;
    margin-bottom: 10px;
    margin-right: 10px;
    font-weight: 600;
}

label.cancelRegistrationDialog:hover {
    color: #66ccff;
}

.warningBlock {
    border: solid 1px #eb7b18;
    background-color: #ffebdd;
    margin: 5px 2px 5px 2px;
    padding: 2px;
}

.warningIcon {
    vertical-align: bottom;
    display: inline-block;
    margin-right: 2px;
}

.notificationMessage {
    font-size: 14px;
    display: inline;
    color: #282828;
    font-family: Roboto;
    line-height: 1.43;
}

.sellErrorId {
    color: #cccccc;
    font-size: 10px;
    font-family: Consolas;
}

    .sellErrorId input {
        color: #cccccc;
        font-size: 10px;
        border: none;
        padding: 0;
        margin: 0;
        display: inline;
        width: 198px;
        font-family: Consolas;
    }

.referenceLink {
    color: #026ccf;
    cursor: pointer;
}

.addNewIcon {
    padding-right: 12px;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.podFrame {
    height: calc(100vh - 112px);
    width: 100%;
    border: 0;
}

.infohovericon {
    background-image: url(../../../img/svgs/v1.0/Application_Information_New.svg);
    height: 12px;
    width: 12px;
    margin-bottom: -8px;
}

.hoverinfoarea.withinfoIcon {
    display: inline-block;
}

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

.sectionspacer {
    margin: 10px 0;
    padding-right: 10px;
}

.settingslabeltitle {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 3px;
}

.toolbar .CwDropdown-dropDown {
    z-index: 3;
}

/* Begin Dark Mode */

body.darkMode div.panel {
    background-color: var(--dark-mode-card-background-color);
}

    body.darkMode div.panel label.switch span {
        background-color: var(--dark-mode-card-background-color);
        border: 1px var(--dark-mode-blue-color) solid;
    }

        body.darkMode div.panel label.switch span.unchecked {
            color: var(--dark-mode-grey-color);
        }

    body.darkMode div.panel div.title {
        color: var(--dark-mode-grey-color);
        background: var(--dark-mode-card-background-color);
        border-color: var(--dark-mode-background-color);
    }

    body.darkMode div.panel div.smalltitles {
        color: var(--dark-mode-grey-color);
    }

    body.darkMode div.panel div.content, body.darkMode div.panel div.parserError {
        color: var(--dark-mode-grey-color);
        background: var(--dark-mode-card-background-color);
    }

    body.darkMode div.panel div.content p :not(.ck) {
        color: var(--dark-mode-grey-color);
    }

    body.darkMode div.panel div.content #UniqueEmailWarningMsg table {
        color: var(--dark-mode-grey-color);
    }

body.darkMode label, body.darkMode label.standardformlabel, body.darkMode .standardformfieldlabel, body.darkMode label.formlabel {
    color: var(--dark-mode-grey-color);
}

body.darkMode .panelsection .content tbody tr td {
    color: var(--dark-mode-grey-color);
}

body.darkMode .titlefont {
    color: var(--dark-mode-grey-color);
}

body.darkMode .searchselectfield {
    color: var(--dark-mode-grey-color);
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode #videolib .quoteformblock, body.darkMode #etilizedocs .quoteformblock, body.darkMode #productdocs .quoteformblock, body.darkMode #salesliterature .quoteformblock {
    background-color: var(--dark-mode-background-color) !important;
    border: 1px solid var(--dark-mode-card-background-color);
}

body.darkMode .searchinput {
    color: var(--dark-mode-light-grey-color);
    background-color: var(--dark-mode-background-color);
}

body.darkMode .CwRadioButton-controlIndicator {
    width: 16px;
    height: 16px;
    border: solid white;
    border-width: 1px;
    border-radius: 60%;
}

body.darkMode .CwRadioButton-control input:checked ~ .CwRadioButton-controlIndicator {
    background: var(--dark-mode-blue-color);
    border: solid var(--dark-mode-blue-color);
    color: var(--dark-mode-blue-color);
    border-width: 1px;
}

body.darkMode .CwCheckBox-checkbox {
    border: solid white;
    border-width: 1px;
    border-radius: 3px;
}

body.darkMode .CwCheckBox-wrap:focus .CwCheckBox-control .CwCheckBox-checkboxChecked {
    border: 1px solid var(--dark-mode-blue-color);
}

body.darkMode .CwCheckBox-wrap:focus .CwCheckBox-control .CwCheckBox-checkbox {
    border: 1px solid var(--dark-mode-light-grey-color);
}

    body.darkMode .CwCheckBox-wrap:focus .CwCheckBox-control .CwCheckBox-checkbox + label {
        color: var(--dark-mode-grey-color);
    }

body.darkMode .CwCheckBox-checkboxChecked {
    background: var(--dark-mode-blue-color);
    border: solid var(--dark-mode-blue-color);
    border-width: 1px;
    border-radius: 3px;
}

body.darkMode div.notificationTesting {
    color: var(--dark-mode-grey-color);
}

body.darkMode .CwButton-wrap.quaternary .CwButton-innerStandardActive {
    border: none;
    background-color: var(--dark-mode-secondary-button-color);
    color: var(--dark-mode-secondary-button-textr);
}

    body.darkMode .CwButton-wrap.quaternary .CwButton-innerStandardActive:hover {
        background-color: var(--dark-mode-grey-color);
        color: var(--dark-mode-secondary-button-text-hover);
    }

body.darkMode .CwButton-innerStandardActive {
    background-color: var(--dark-mode-blue-color);
}

    body.darkMode .CwButton-innerStandardActive:hover {
        background-color: var(--dark-mode-skyblue-color);
    }

body.darkMode .CwButton-wrap.secondary .CwButton-innerStandardActive {
    background-color: var(--dark-mode-secondary-button-color);
    color: var(--dark-mode-secondary-button-text);
}

    body.darkMode .CwButton-wrap.secondary .CwButton-innerStandardActive:hover {
        background-color: var(--dark-mode-grey-color);
        color: var(--dark-mode-secondary-button-text-hover);
    }

body.darkMode .CwCheckBox-wrap:focus .CwCheckBox-control label {
    color: var(--dark-mode-blue-color);
}

body.darkMode .lineitem {
    color: var(--dark-mode-grey-color);
}

body.darkMode .linevalue {
    color: var(--dark-mode-grey-color);
}

body.darkMode .newnotification .linevalue {
    color: #000000;
}

body.darkMode #footer {
    background-color: var(--dark-mode-background-color);
}

body.darkMode .formselectfieldwrapper {
    background-color: transparent;
    color: var(--dark-mode-grey-color);
}

body.darkMode tr.dataGridRow {
    background-color: var(--dark-mode-card-background-color) !important;
}

body.darkMode div#imageEditorWindow.window {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode #imageEditorWindow [name='imageTitle'], body.darkMode #imageEditorWindow [name='imageHelp'] {
    color: var(--dark-mode-grey-color);
}

body.darkMode div.imageEditingArea div.imageContainer.resizer div.jcrop-holder {
    background-color: transparent !important;
}

body.darkMode div.userInputFields div.urlSection input#userURL {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode div.editThumbnail div.imgWrapper img.imgOverlay {
    background-color: transparent;
    filter: invert(.7);
}

body.darkMode .formselectfieldwrapper select.formselectfield {
    width: 100%;
    background-color: transparent;
    color: var(--dark-mode-grey-color);
}

body.darkMode .formselectfieldwrapper select.formselectfield option {
    background-color: var(--dark-mode-card-background-color);
}


body.darkMode .formselectfieldwrapper.select-container-for-select-ellipsis select.formselectfield.text-ellipsis {
    padding: 5px;
    appearance: none;
    background-size: 10px 10px;
    color: transparent;
}

body.darkMode .formselectfieldwrapper select.formselectfield.text-ellipsis[disabled],
body.darkMode .formselectfieldwrapper select.formselectfield.text-ellipsis[read-only] {
    background-color: #aaaaaa4f;
}

body.darkMode .searchselectfield {
    background-image: url("../../../img/svgs/v1.0/Action_ExpandDown_DarkMode.svg");
    background-repeat: no-repeat;
    background-position: right;
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode .formcheckboxwrapper input {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode .formcolumnURL .formfield input:not([type=checkbox]):not([type=radio]) {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode .formcolumn .formfield input:not([type=checkbox]):not([type=radio]), body.darkMode .formcolumn .formfield div.label, body.darkMode .formcolumn div.formgap, body.darkMode .formcolumn .formfield textarea, body.darkMode .formcolumn .textInputWithSelect {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

    /* DarkMode Readonly Fields Fix*/
    body.darkMode .formcolumn .formfield input:not([type=checkbox]):not([type=radio]).readonly,
    body.darkMode .formcolumn .formfield input:not([type=checkbox]):not([type=radio])[readonly],
    body.darkMode .formcolumn .formfield input:not([type=checkbox]):not([type=radio])[disabled] {
        background-color: #aaaaaa4f !important;
        cursor: default !important;
    }

    body.darkMode .formcolumn .formfield input:not([type=checkbox]):not([type=radio])[readonly]#BehalfRep {
        background-color: var(--dark-mode-card-background-color) !important;
        color: var(--dark-mode-grey-color);
        cursor: default !important;
    }

body.darkMode .formcolumn .formfield div.label.readonly
{
    background-color: #aaaaaa4f !important;
}

.formcolumn .formfield input:not([type=checkbox]):not([type=radio]).readonly,
.formcolumn .formfield input:not([type=checkbox]):not([type=radio])[readonly],
.formcolumn .formfield input:not([type=checkbox]):not([type=radio])[disabled] {
    background-color: #EEE;
    cursor: default !important;
}

    .formcolumn .formfield input:not([type=checkbox]):not([type=radio])[readonly]#InsideRep,
    .formcolumn .formfield input:not([type=checkbox]):not([type=radio])[readonly]#Owner,
    .formcolumn .formfield input:not([type=checkbox]):not([type=radio])[readonly]#BehalfRep {
        background-color: #ffffff;
        cursor: default !important;
    }


/* END DarkMode Readonly Fields Fix*/

body.darkMode #pagecontainer {
    background-color: var(--dark-mode-background-color);
}

body.darkMode .panel .toolbar {
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode .placeholder_text {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode .formfield input:not([type=checkbox]):not([type=radio]), body.darkMode .formfield textarea, body.darkMode .formfield div.label, body.darkMode .formfield textarea {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode #maindialog.dialog.main {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

    body.darkMode #maindialog.dialog.main input {
        background-color: var(--dark-mode-background-color);
        color: var(--dark-mode-grey-color);
    }

body.darkMode .linename {
    color: var(--dark-mode-grey-color);
}

body.darkMode .newnotification .linename {
    color: #000000;
}

body.darkMode #resultcount {
    color: var(--dark-mode-grey-color);
}

body.darkMode .windowMask {
    background-color: var(--dark-mode-background-color) !important;
}

body.darkMode .CwButton-innerLightActive {
    color: var(--dark-mode-grey-color);
    fill: var(--dark-mode-grey-color);
}

body.darkMode .link {
    color: var(--dark-mode-blue-color);
}

body.darkMode #searchInput {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode div div.formField input[type="text"] {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode div div.formField div.tooltip {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode .CwDropdown-dropDown {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode .quote_mode_banner.template {
    background-color: var(--dark-mode-red-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode .dialog.main > .title {
    color: var(--dark-mode-grey-color);
}

body.darkMode .CwDropdown-highlightedItem {
    background-color: var(--dark-mode-blue-color);
    color: var(--dark-mode-light-grey-color);
}

body.darkMode .wrapfield.DISABLED,
body.darkMode .wrapfield.DISABLED label {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-secondary-button-color-hover);
}

    body.darkMode .wrapfield.DISABLED input[type=checkbox]:checked {
        accent-color: var(--dark-mode-secondary-dark-blue-color);
    }

    body.darkMode .wrapfield.DISABLED input[type=checkbox]:disabled {
        filter: contrast(100%);
    }

body.darkMode .wrapfield.CHECKED,
body.darkMode .wrapfield.CHECKED label {
    background-color: var(--dark-mode-secondary-blue-color);
    color: var(--dark-mode-card-background-color);
}

    body.darkMode .wrapfield.CHECKED input[type=checkbox]:checked {
        accent-color: var(--dark-mode-card-background-color);
    }

    body.darkMode .wrapfield.CHECKED input[type=checkbox]:disabled {
        accent-color: var(--dark-mode-secondary-dark-blue-color);
    }

body.darkMode .formcolumn .formcheckboxwrapper label.formlabel {
    color: var(--dark-mode-grey-color);
    background-color: var(--dark-mode-card-background-color) !important;
}

body.darkMode div.formfieldwrapper.isDirtyHighlighted .formcheckboxwrapper {
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode span.widthSetup {
    color: var(--dark-mode-grey-color);
}

body.darkMode .term_option {
    color: var(--dark-mode-grey-color);
    height: 40%;
}

    body.darkMode .term_option.selected {
        background-color: #f78f1e;
        color: var(--dark-mode-card-background-color);
    }

        body.darkMode .term_option.selected + img {
            filter: invert(0.8) hue-rotate(177deg) brightness(135%);
            mix-blend-mode: normal;
        }

body.darkMode .sortableTermList {
    background-color: var(--dark-mode-background-color);
}

body.darkMode #maindialog.dialog.main {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode #mask {
    background-color: var(--dark-mode-grey-color) !important;
}

body.darkMode .dialog.main > .title {
    color: var(--dark-mode-grey-color);
}

body.darkMode #quotecontentconfig .menuitem {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

    body.darkMode #quotecontentconfig .menuitem:hover {
        background-color: var(--dark-mode-blue-color);
        color: var(--dark-mode-light-grey-color);
    }

body.darkMode .sub_title {
    color: var(--dark-mode-grey-color);
}

body.darkMode #availableforms {
    background-color: var(--dark-mode-card-background-color);
}

    body.darkMode #availableforms .quoteformblock, body.darkMode #availablepdfs .quoteformblock {
        background-color: var(--dark-mode-background-color);
        border: 1px solid var(--dark-mode-card-background-color);
    }

body.darkMode #attachedforms.attachments {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode #attachedvideos.attachments {
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode #simpletab .tabs li:hover:not(.selected) {
    background-color: var(--dark-mode-background-color) !important;
    color: var(--dark-mode-grey-color);
}

body.darkMode #simpletab .tabs li.selected {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode #simpletab .tabs li {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

    body.darkMode #simpletab .tabs li:hover {
        background-color: var(--dark-mode-card-background-color);
        color: var(--dark-mode-grey-color);
    }

body.darkMode .ui-tabs-anchor {
    color: var(--dark-mode-grey-color);
    background-color: var(--dark-mode-background-color);
}

body.darkMode .ui-tabs .ui-tabs-nav li a {
    background: none;
    padding: 8px 16px;
}

body.darkMode .sellErrorId input {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode a:hover {
    color: var(--dark-mode-skyblue-color);
}

body.darkMode .attachments .quoteformblock {
    background-color: var(--dark-mode-background-color);
}

body.darkMode #contentPanelContainer .panel .datagrid td.content input[type="text"]:focus {
    color: var(--dark-mode-grey-color);
    border-bottom: var(--dark-mode-blue-color) !important;
}

body.darkMode div.formField input#AccountName, body.darkMode div.formField input#AccountNumber, body.darkMode div.formField input#Website,
body.darkMode div.formField input#Description, body.darkMode div.formField input#PriceLevelName, body.darkMode div.formField input#PaymentTerms,
body.darkMode div.formField input#Address1, body.darkMode div.formField input#Address2, body.darkMode div.formField input#City,
body.darkMode div.formField input#State, body.darkMode div.formField input#PostalCode, body.darkMode div.formField input#Country,
body.darkMode div.formField input#Title, body.darkMode div.formField input#FirstName, body.darkMode div.formField input#LastName,
body.darkMode div.formField input#JobTitle, body.darkMode div.formField input#EmailAddress, body.darkMode div.formField input#DayPhone,
body.darkMode div.formField input#MobilePhone {
    background-color: var(--dark-mode-card-background-color) !important;
    color: var(--dark-mode-grey-color);
}

body.darkMode div.formField input[disabled]#AccountName {
    background-color: #aaaaaa4f !important;
    color: var(--dark-mode-grey-color);
    cursor: default !important;
}

body.darkMode .standardfield input#sendto, body.darkMode .standardfield input#subject {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode button#btnRequest1.btn3.review.request, body.darkMode button#btnRequest2.btn3.review.request {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
    border: none;
}

    body.darkMode button#btnRequest1.btn3.review.request:hover, body.darkMode button#btnRequest2.btn3.review.request:hover {
        background-color: #5a5a5a;
        color: var(--dark-mode-grey-color);
    }

body.darkMode .content .row-dragger .ui-sortable-handle {
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode ul.ui-droppable.ui-sortable.ui-tabs-nav.ui-corner-all.ui-helper-reset.ui-helper-clearfix.ui-widget-header {
    background-color: var(--dark-mode-background-color);
    background-image: none;
}

body.darkMode .tab.selectable.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab.ui-tabs-active.ui-state-active {
    background-color: var(--dark-mode-background-color);
    background-image: none;
    border-top: var(--dark-mode-background-color) !important
}

    body.darkMode .tab.selectable.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover {
        background-color: var(--dark-mode-background-color);
        background-image: none;
        border-top: var(--dark-mode-background-color) !important
    }

body.darkMode textarea {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode #contentPanelContainer .panel .datagrid td.content .readonly {
    color: var(--dark-mode-grey-color);
}

body.darkMode #dbpagedescription.prose {
    color: var(--dark-mode-grey-color);
}

body.darkMode .tab.selectable.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab {
    background-color: var(--dark-mode-background-color);
    background-image: none;
    border-top: var(--dark-mode-background-color) !important
}

body.darkMode .tab.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab {
    background-color: var(--dark-mode-background-color);
    background-image: none;
    border-top: var(--dark-mode-background-color) !important
}

body.darkMode ul.ui-tabs-nav.ui-corner-all.ui-helper-reset.ui-helper-clearfix.ui-widget-header {
    background-color: var(--dark-mode-card-background-color);
    background-image: none;
}

body.darkMode .headerQuickQuoteSearch input[type=text] {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

    body.darkMode .headerQuickQuoteSearch input[type=text]:focus {
        box-shadow: 0px 2px 0px 0px var(--dark-mode-blue-color);
    }

body.darkMode .context-menu {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

    body.darkMode .context-menu .menuitem.disabled span {
        color: #aaa;
    }

    body.darkMode .context-menu .menuitem.disabled:hover {
        background-color: transparent;
    }

body.darkMode #ui-datepicker-div.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
    background-color: var(--dark-mode-card-background-color);
    color: white;
}

body.darkMode .ui-widget-header .ui-icon {
    filter: invert(1) !important;
}

body.dakrMode .ui-datepicker-week-end .ui-datepicker th, body.darkMode .ui-datepicker-calendar {
    color: white;
}

body.darkMode .ui-state-hover, body.darkMode .ui-widget-content .ui-state-hover {
    background: #4d4949 !important;
    color: #e5e5e5 !important;
    background-image: none;
    border: 1px solid #6e6e6e;
}

body.darkMode .ui-state-default, body.darkMode .ui-widget-content .ui-state-default {
    color: white;
    background-image: none;
    border: 1px solid #9b9696;
    background: linear-gradient(180deg, rgb(84 84 84) 0%, rgb(135 130 130) 100%);
}

body.darkMode .ui-state-highlight, body.darkMode .ui-widget-content .ui-state-highlight {
    background: linear-gradient(180deg, rgb(116 110 48) 0%, rgb(85 83 20) 100%) !important;
    background-image: none;
}

body.darkMode div.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
    background-color: var(--dark-mode-card-background-color);
    color: white;
    background-image: none;
}

body.darkMode div.search-controls button {
    background-color: var(--dark-mode-secondary-button-color);
    color: white;
    border: none;
}

    body.darkMode div.search-controls button:hover {
        background-color: #CCCCCC;
        color: black;
    }

body.darkMode .panel.paging .paging .resultCount {
    color: var(--dark-mode-grey-color);
}

body.darkMode input[type=checkbox], body.darkMode input[type="radio"] {
    filter: contrast(40%);
}

    body.darkMode input[type=checkbox]:checked, body.darkMode input[type="radio"]:checked {
        filter: contrast(100%);
        accent-color: #51a8d0;
    }

    body.darkMode input[type=checkbox]:disabled, body.darkMode input[type="radio"]:disabled {
        filter: contrast(0%);
    }

body.darkMode .datagrid td.content.left, body.darkMode .datagrid td.content.right, body.darkMode .datagrid td.content.center, body.darkMode table.datagrid tr th {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode div.panel {
    color: var(--dark-mode-grey-color);
}

body.darkMode .ck-widget td, 
body.darkMode .ck-widget th {
    color: rgb(33, 33, 33);
}

body.darkMode .datagrid input[type=checkbox] {
    filter: contrast(40%);
}

    body.darkMode .datagrid input[type=checkbox]:checked {
        filter: contrast(100%);
        accent-color: #51a8d0;
    }

    body.darkMode .datagrid input[type=checkbox]:disabled {
        filter: contrast(0%);
    }

    body.darkMode .datagrid input[type=checkbox][disabled]:checked {
        filter: contrast(100%) invert(0.9) brightness(130%);
    }

body.darkMode .datagrid td.content {
    color: var(--dark-mode-grey-color);
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode div.title span span input[type=checkbox] {
    filter: contrast(40%);
}

    body.darkMode div.title span span input[type=checkbox]:checked {
        filter: contrast(100%);
        accent-color: #51a8d0;
    }

    body.darkMode div.title span span input[type=checkbox]:disabled {
        filter: contrast(0%);
    }

body.darkMode div.message div.panel.undefined div.content div#itemfields div.wrapfield input[type=checkbox]:checked {
    accent-color: var(--dark-mode-card-background-color);
}

body.darkMode .formcheckboxwrapper input[type="checkbox"] {
    filter: contrast(40%);
}

    body.darkMode .formcheckboxwrapper input[type="checkbox"]:checked {
        filter: contrast(100%);
        accent-color: #51a8d0;
    }

    body.darkMode .formcheckboxwrapper input[type="checkbox"]:disabled {
        filter: contrast(0%);
    }

body.darkMode .formcheckboxwrapper input[type=checkbox][disabled]:checked {
    filter: contrast(100%) invert(0.9) brightness(130%);
}

body.darkMode div.toolbarcheckboxwrapper input[type=checkbox] {
    filter: contrast(40%);
}

    body.darkMode div.toolbarcheckboxwrapper input[type=checkbox]:checked {
        filter: contrast(100%);
        accent-color: #51a8d0;
    }

    body.darkMode div.toolbarcheckboxwrapper input[type=checkbox]:disabled {
        filter: contrast(0%);
    }

body.darkMode .formcheckboxwrapper input[type=checkbox] {
    filter: contrast(40%);
}

    body.darkMode .formcheckboxwrapper input[type=checkbox]:checked {
        filter: contrast(100%);
        accent-color: #51a8d0;
    }

    body.darkMode .formcheckboxwrapper input[type=checkbox]:disabled {
        filter: contrast(0%);
    }

body.darkMode div.panelsection div.content table tr td input[type="checkbox"], body.darkMode .verticalform.compact .formcheckboxwrapper input[type="radio"] {
    filter: contrast(40%);
}

    body.darkMode div.panelsection div.content table tr td input[type="checkbox"]:checked, body.darkMode .verticalform.compact .formcheckboxwrapper input[type="radio"]:checked {
        filter: contrast(100%);
        accent-color: #51a8d0;
    }

    body.darkMode div.panelsection div.content table tr td input[type="checkbox"]:disabled, body.darkMode .verticalform.compact .formcheckboxwrapper input[type="radio"]:disabled {
        filter: contrast(0%);
    }

body.darkMode .datagrid input[type=radio] {
    filter: contrast(40%);
}

    body.darkMode .datagrid input[type=radio]:checked {
        filter: contrast(100%);
        accent-color: #51a8d0;
    }

    body.darkMode .datagrid input[type=radio]:disabled {
        filter: contrast(0%);
    }

body.darkMode textarea#versioncomment.disable_exempt {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode div#maximizeEditorContainer.maximizableIframeContainer {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode .wrapfield .customizerButton {
    background-color: var(--dark-mode-secondary-button-color);
    color: var(--dark-mode-secondary-button-text);
    border: none;
    box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
    border-radius: 3px;
}

body.darkMode button#topAttach.undefined:disabled, body.darkMode div.panel.undefined button:not(.save):disabled, body.darkMode div.panel.undefined button:disabled, body.darkMode button#pdf-preview-btn:disabled,
body.darkMode button#btn_compare[style*="graytext"],
body.darkMode td.comparecorner div.comparedesccol button[style*="graytext"] {
    background-color: #c2c2c2;
    color: #aaaaaa;
    border: none;
    cursor: context-menu;
    box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
    border-radius: 3px;
}

body.darkMode button#topAttach.undefined, body.darkMode div.panel.undefined button:not(.save), body.darkMode button#pdf-preview-btn,
body.darkMode button#btn_compare,
body.darkMode td.comparecorner div.comparedesccol button {
    background-color: var(--dark-mode-secondary-button-color);
    color: var(--dark-mode-secondary-button-text);
    border: none;
    box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
    border-radius: 3px;
}

    body.darkMode button#topAttach.undefined:not([disabled]):hover, body.darkMode div.panel.undefined button:not([disabled], .save):hover, body.darkMode button#pdf-preview-btn:hover,
    body.darkMode button#btn_compare:hover,
    body.darkMode td.comparecorner div.comparedesccol button:hover {
        background: var(--dark-mode-secondary-button-color-hover);
        color: var(--dark-mode-secondary-button-text-hover);
        border: none;
        box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
        border-radius: 3px;
    }

body.darkMode button.btn.submit, body.darkMode button#reset.btn {
    background-color: var(--dark-mode-secondary-button-color);
    color: var(--dark-mode-secondary-button-text);
    border: none;
    box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
    border-radius: 3px;
}

    body.darkMode button.btn.submit:not([disabled]):hover, body.darkMode button#reset.btn:not([disabled]):hover {
        background: var(--dark-mode-secondary-button-color-hover);
        color: var(--dark-mode-secondary-button-text-hover);
        box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
        border-radius: 3px;
    }

body.darkMode button#topCancel.cancel, body.darkMode button.cancel {
    background-color: var(--dark-mode-secondary-button-color);
    color: var(--dark-mode-secondary-button-text);
    border: none;
    box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
    border-radius: 3px;
}

    body.darkMode button#topCancel.cancel:disabled, body.darkMode button.cancel:disabled {
        background-color: var(--dark-mode-background-color);
        color: var(--dark-mode-grey-color);
        border: none;
        box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
        border-radius: 3px;
    }

    body.darkMode button#topCancel.cancel:hover, body.darkMode button.cancel:hover {
        background: var(--dark-mode-secondary-button-color-hover);
        color: var(--dark-mode-secondary-button-text-hover);
        box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
        border-radius: 3px;
    }

body.darkMode button#topSave.save, body.darkMode button.save {
    background-color: var(--dark-mode-blue-color);
    color: var(--dark-mode-light-grey-color);
    border: none;
    box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
    border-radius: 3px;
}

    body.darkMode button#topSave.save:disabled, body.darkMode button.save:disabled {
        background-color: var(--dark-mode-grey-color);
        color: var(--dark-mode-light-grey-color);
        border: none;
        box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
        border-radius: 3px;
    }

    body.darkMode div.panel.undefined button:not(.save):disabled, body.darkMode div.panel.undefined button:disabled,
    body.darkMode button#topSave.save:disabled, body.darkMode button.save:disabled{
        color:#aaaaaa;
    }

    body.darkMode button#topSave.save:not([disabled]):hover, body.darkMode button.save:not([disabled]):hover {
        background-color: #41bbe4;
        color: var(--dark-mode-light-grey-color);
        box-shadow: 0px 4px 8px rgba(33, 33, 33, 0.2);
        border-radius: 3px;
    }

body.darkMode div.panel.undefined, body.darkMode div.panel-container.edit.ui-sortable {
    background-color: var(--dark-mode-card-background-color) !important;
    color: var(--dark-mode-card-background-color);
}

body.darkMode #TermOptionsList .draggable {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode button.btn.getNext.active, body.darkMode div#detailspanel div.resultsheader button {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
    border: none;
}

    body.darkMode button.btn.getNext.active:hover, body.darkMode div#detailspanel div.resultsheader button:hover {
        background-color: #5a5a5a;
        color: var(--dark-mode-grey-color);
    }

body.darkMode td.rightcontent, body.darkMode td.content {
    color: var(--dark-mode-grey-color);
}

body.darkMode div.content div.customizefields div.panel.undefined div div span {
    color: var(--dark-mode-grey-color);
}

body.darkMode div.successbucket.late {
    background-image: none;
    background-color: #fce8e6;
    margin: 4px;
    border: 1px solid #e2473b;
    border-radius: 20px;
}

    body.darkMode div.successbucket.late:hover {
        background-image: none;
        background-color: #fdb5ae;
        margin: 4px;
        border: 1px solid #e2473b;
        border-radius: 20px;
    }

body.darkMode div.successbucket.empty {
    background-image: none;
    background-color: #fff3e4;
    margin: 4px;
    border: 1px solid #ff9b20;
    border-radius: 20px;
}

    body.darkMode div.successbucket.empty:hover {
        background-image: none;
        background-color: #fdd8aa;
        margin: 4px;
        border: 1px solid #ff9b20;
        border-radius: 20px;
    }

body.darkMode div.successbucket.great {
    background-image: none;
    background-color: #eef9e8;
    margin: 4px;
    border: 1px solid #4ab017;
    border-radius: 20px;
}

body.darkMode div.content span.addText {
    color: var(--dark-mode-secondary-button-text);
}

body.darkMode table.datagrid td[name="ItemNotesHtml"] span {
    background-color: var(--dark-mode-card-background-color) !important;
}

body.darkMode div.content button:not([disabled], .save, .ck):hover span {
    color: black;
}

body.darkMode span.CwPill-pill {
    color: black !important;
}

body.darkMode div.successbucket.great:hover {
    background-image: none;
    background-color: #cffcb7;
    margin: 4px;
    border: 1px solid #4ab017;
    border-radius: 20px;
}

body.darkMode div.successbucket.good {
    background-image: none;
    background-color: #eef9e8;
    margin: 4px;
    border: 1px solid #4ab017;
    border-radius: 20px;
}

    body.darkMode div.successbucket.good:hover {
        background-image: none;
        background-color: #cffcb7;
        margin: 4px;
        border: 1px solid #4ab017;
        border-radius: 20px;
    }

body.darkMode div.successbucket.early {
    background-image: none;
    background-color: #fafafa;
    margin: 4px;
    border: 1px solid #999999;
    border-radius: 20px;
}

body.darkMode table#qhop_message.message tbody tr td span#qhop_message_total.total, body.darkMode div.resultLine.historyactions a span.historybutton,
body.darkMode div.resultLine.historyactions span.historybutton {
    color: var(--dark-mode-grey-color);
}

body.darkMode div.bar {
    background-color: var(--dark-mode-secondary-button-color) !important;
}

body.darkMode .progressFraction {
    color: #F3F3F3;
}

body.darkMode div.successbucket.early:hover {
    background-image: none;
    background-color: #bbbbbb;
    margin: 4px;
    border: 1px solid #999999;
    border-radius: 20px;
}

body.darkMode .successbucket a {
    color: black;
}

body.darkMode div.icon.sub-nav {
    mix-blend-mode: plus-lighter;
    filter: invert(1) hue-rotate(177deg) brightness(150%);
    background-color: currentColor;
}

body.darkMode .collapsebutton.expanded {
    background-image: url("../../../img/svgs/v1.0/Arrow_up_DarkMode.svg");
    background-size: 10px;
}

body.darkMode .collapsebutton.collapsed {
    background-image: url("../../../img/svgs/v1.0/Arrow_down_DarkMode.svg");
    background-size: 13px;
}

body.darkMode .col4x1 .panelsection {
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode .CwDropdownMulti-dropDown {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-light-grey-color);
}

body.darkMode .CwDropdownMulti-dropDownHighlightedItem {
    background-color: var(--dark-mode-blue-color);
}

    body.darkMode .CwDropdownMulti-dropDownHighlightedItem label {
        color: black;
    }

body.darkMode .panelsection {
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode .ui-tabs .ui-tabs-nav li:not(.ui-tabs-selected):not(.ui-tabs-active) {
    background: none;
    background-color: var(--dark-mode-background-color);
}

body.darkMode .ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background: none;
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode div.formfield select#ForeignKey_TeamName {
    background-color: var(--dark-mode-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode div.formfield div input#Owner, body.darkMode div.formfield div input#InsideRep {
    background-color: var(--dark-mode-card-background-color) !important;
    color: var(--dark-mode-grey-color);
}

body.darkMode td.orderPorterPaymentMode {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode table.termOptionsPrepareContent tbody, body.darkMode table.termOptionTabDetailTable tbody {
    background-color: var(--dark-mode-card-background-color) !important;
    color: var(--dark-mode-grey-color);
}

    body.darkMode table.termOptionTabDetailTable tbody tr td {
        color: var(--dark-mode-grey-color);
    }

        body.darkMode table.termOptionsPrepareContent tbody tr td input, body.darkMode table.termOptionTabDetailTable tbody tr td input {
            background-color: var(--dark-mode-card-background-color) !important;
            color: var(--dark-mode-grey-color);
        }

body.darkMode #termOptionsTab .formcheckboxwrapper label.formlabel {
    background-color: var(--dark-mode-card-background-color) !important;
    color: var(--dark-mode-grey-color);
}

body.darkMode div#orderPorterTemplateGroups.panel div.content div.template_group.reserved,
body.darkMode div#orderPorterTemplateGroups.panel div.content div.template_group {
    background-color: var(--dark-mode-card-background-color);
}

    body.darkMode div#orderPorterTemplateGroups.panel div.content div.template_group.collapsed div.smalltitles.templatekey:hover {
        background-color: var(--dark-mode-card-background-color);
    }

body.darkMode div#etilizefilters div.formfieldlabel, body.darkMode div#etilizefilters div.etilizeFormFields div.formfieldlabel {
    color: var(--dark-mode-grey-color);
}

body.darkMode div#etilizefilter_b div.fieldgroupheader {
    color: var(--dark-mode-grey-color);
}

body.darkMode select.formselectfield[disabled] {
    width: 100%;
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode div.columnsize img.columnsizeclear {
    filter: invert(0.7);
}

body.darkMode div.formField div.statusWarning {
    filter: invert(.7);
}

body.darkMode .successstage img {
    filter: invert(1);
}

body.darkMode table.datagrid tbody tr td.content .attachedimage {
    filter: invert(.7);
}

body.darkMode div#lookupprices2.icon.field.cloud.disabled {
    filter: invert(.6);
}

body.darkMode div#lookupprices2.icon.field.cloud {
    filter: invert(1);
}

body.darkMode div#maximizeIframeButton.fullscreenicon {
    filter: invert(.7);
}

body.darkMode div.toolbutton.add {
    filter: invert(.7);
}

body.darkMode img.actionEdit {
    filter: invert(.7);
}

body.darkMode div.hidePriceHelper {
    filter: invert(.7);
}

body.darkMode .fieldicon {
    filter: invert(.7);
}

body.darkMode .toolbutton.actionclose {
    filter: invert(.7);
}

body.darkMode #refreshButton {
    filter: invert(.7);
}

body.darkMode .toolbutton.gear {
    filter: invert(.7);
}

body.darkMode .toolbutton.actionrefreshnotfullscreen {
    filter: invert(.7);
}

body.darkMode .toolbutton.configbtn {
    filter: invert(.7);
}

body.darkMode .fieldicon:hover {
    filter: invert(.7);
}

body.darkMode .ui-datepicker .ui-datepicker-prev span, body.darkMode .ui-datepicker .ui-datepicker-next span {
    filter: invert(.7);
}

body.darkMode div.btn .left {
    filter: invert(.75);
}

body.darkMode div.btn .right {
    filter: invert(.75);
}

body.darkMode div.btn .mid {
    filter: invert(.75);
}

body.darkMode div.btn:hover .left {
    filter: invert(.1);
}

body.darkMode div.btn:hover .right {
    filter: invert(.1);
}

body.darkMode div.btn:hover .mid {
    filter: invert(.1);
}

body.darkMode .tooltip {
    filter: invert(.99);
}

body.darkMode div.btn.disabled .left {
    filter: invert(.2) !important;
}

body.darkMode div.btn.disabled .right {
    filter: invert(.2) !important;
}

body.darkMode div.btn.disabled .mid {
    filter: invert(.2) !important;
}

body.darkMode div.btn.save .left {
    filter: invert(.2) !important;
}

body.darkMode div.btn.save .right {
    filter: invert(.2) !important;
}

body.darkMode div.btn.save .mid {
    filter: invert(.2) !important;
}

body.darkMode div.btn.blue .left {
    filter: invert(.2) !important;
}

body.darkMode div.btn.blue .right {
    filter: invert(.2) !important;
}

body.darkMode div.btn.blue .mid {
    filter: invert(.2) !important;
}

body.darkMode .icons-action.collapse {
    filter: invert(.7);
}

body.darkMode .icons-action.add {
    filter: invert(.7);
}

body.darkMode .toolbutton.edit, body.darkMode .toolbutton.update {
    filter: invert(.7);
}

body.darkMode div.toolbutton.notfullscreen {
    filter: invert(.7);
}

body.darkMode .icon.close {
    filter: invert(.7);
}

body.darkMode .action-add-new img {
    filter: invert(.7);
}

body.darkMode .CwTriggerField-triggerField {
    fill: var(--dark-mode-light-grey-color);
}

    body.darkMode .CwTriggerField-triggerField input:focus ~ div {
        fill: var(--dark-mode-blue-color);
    }

    body.darkMode .CwTriggerField-triggerField input.CwTextField-textField {
        color: white;
    }

body.darkMode .CwMultiSelect-cwMultiSelectStyleFocused {
    box-shadow: 0 2px 0 0 var(--dark-mode-blue-color);
}

body.darkMode .formcolumn .formfield input:focus:not([type=checkbox]):not([type=radio]) {
    box-shadow: 0 2px 0 0 var(--dark-mode-blue-color) !important;
}

body.darkMode #movablepanels .widget:hover .toolbutton.editmode {
    filter: invert(.7);
}

body.darkMode .toolbutton.editmode_remove, body.darkMode .toolbutton.copy-quote, body.darkMode .toolbutton.delete {
    filter: invert(.7);
}

body.darkMode div.panel .title .fullscreenicon {
    filter: invert(.7);
}

body.darkMode .icon.field.search, body.darkMode .icons-action.edit, body.darkMode .img-truefalse {
    filter: invert(.7);
}

body.darkMode .icons-action.delete, body.darkMode .infohovericon {
    filter: invert(.7);
}

body.darkMode .pricesourcelookup {
    filter: invert(.7);
}

body.darkMode .icons-action.delete, body.darkMode .infohovericon {
    filter: invert(.7);
}

body.darkMode .icons-action.add {
    filter: invert(.7);
}

body.darkMode div.panel .title .fullscreenicon {
    filter: invert(.7);
}

body.darkMode .icon.field.search, body.darkMode .icons-action.edit, body.darkMode .img-truefalse {
    filter: invert(.7);
}

body.darkMode #movablepanels .widget:hover .toolbutton.editmode {
    filter: invert(.7);
}

body.darkMode .clearDatePicker {
    filter: invert(.7);
}

body.darkMode .toolbutton.editmode_remove, body.darkMode .toolbutton.copy-quote, body.darkMode .toolbutton.delete {
    filter: invert(.7);
}

body.darkMode .toolbutton.edit, body.darkMode .toolbutton.update {
    filter: invert(.7);
}

body.darkMode .validation.ok {
    filter: invert(.7);
}

body.darkMode #form_action_edit {
    filter: invert(.7);
}

body.darkMode #form_action_remove_on {
    filter: invert(.7);
}

body.darkMode #form_action_remove_off {
    filter: invert(.7);
}

body.darkMode #form_action_addnew {
    filter: invert(.7);
}

body.darkMode #form_menu_system {
    filter: invert(.7);
}

body.darkMode #form_action_delete {
    filter: invert(.7);
}

body.darkMode .icon.flag.late {
    filter: contrast(0.6) brightness(220%) hue-rotate(358deg);
}

body.darkMode div.formcolumn.successstages div.formfieldlabel label.standardformlabel {
    color: black;
}

body.darkMode div.panel.undefined div.formcolumn.productsearchprefillmapping button:disabled span {
    color: var(--dark-mode-light-grey-color);
}

body.darkMode td.prefillMappingSurceColumn div.formselectfieldwrapper select.formselectfield {
    background-position: 100% !important;
}

body.darkMode td.sourceProperty div.formfield input {
    background-color: var(--dark-mode-card-background-color) !important;
}

body.darkMode td.productSearchImput div.formselectfieldwrapper select.formselectfield {
    background-position: 100% !important;
}

body.darkMode td.productDeleteButton div.toolbutton {
    filter: invert(.7);
}

body.darkMode div.xformfield.approvalrulesfilter span, body.darkMode div.xformfield.approvalrulesfilter div label.formlabel {
    color: var(--dark-mode-light-grey-color) !important;
}

body.darkMode .datagrid td.content.center.editButtom .icons-action.edit:hover {
    filter: invert(51%) sepia(50%) saturate(6055%) hue-rotate(187deg) brightness(102%) contrast(96%) !important;
}

body.darkMode .datagrid td.content.center.copyButtom .icons-action.copy {
    filter: invert(.7);
}

    body.darkMode .datagrid td.content.center.copyButtom .icons-action.copy:hover {
        filter: invert(51%) sepia(50%) saturate(6055%) hue-rotate(187deg) brightness(102%) contrast(96%) !important;
    }

body.darkMode .datagrid td.content.approvalSwitchButton span label.switch span.slider.round {
    background-color: var(--dark-mode-card-background-color);
    border: 1px var(--dark-mode-blue-color) solid;
}

body.darkMode .datagrid td.content.approvalSwitchButton span label.switch span.unchecked.slider.round {
    background-color: var(--dark-mode-grey-color) !important;
}

body.darkMode .datagrid td.content.approvalSwitchButton span label.switch span.slider.round:before {
    background-color: var(--dark-mode-blue-color);
}

body.darkMode .datagrid td.content.approvalSwitchButton span label.switch span.unchecked.slider.round:before {
    background-color: #f3f3f3;
}

body.darkMode div.panel.undefined div.content div.addRuleForm div.blankformcolumn div.blankformfieldwrapper span {
    color: black !important;
    background-color: var(--dark-mode-light-skyblue-color) !important;
}

body.darkMode div.panel.undefined div.content div.addRuleForm div.blankformcolumn div.blankformfieldwrapper img {
    filter: invert(0);
}

body.darkMode .recurringPaymentsTermsPanel .formcolumn div.label.financingPrincipalLabel,
body.darkMode .recurringPaymentsTermsPanel .formcolumn div.label.financingRecurringBeforeDiscountLabel {
    background-color: transparent;
}

body.darkMode .recurringPaymentsTermsPanel .formcolumn .termsFormfieldBackground {
    background-color: var(--dark-mode-background-color) !important;
}

body.darkMode #fluid_tab-edit .formfield input[type=text],
body.darkMode #fluid_tab-edit .formfield textarea#TabEdit_TabDescription {
    background-color: var(--dark-mode-card-background-color) !important;
}

body.darkMode .headerRightContent.walkMeButton #walkme .walkMeButtonImg {
    filter: invert(1);
}

/* Override CKEditor 5 dark mode styles */
body.darkMode .ck section.ck-widget.ck-widget_selected .edit-grid-link {
    color: white;
}
.ck .ck-widget.ck-widget_selected .edit-grid-link {
    color: black;
}
.darkMode .ck-editor__editable {
    background: var(--dark-mode-card-background-color);
    border-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
  }

  .darkMode .ck-widget {
    background: white;
    color: rgb(33, 33, 33);
    ;
  }
  .darkMode .editorCnt {
    /* Overrides the border radius setting in the theme. */
    --ck-border-radius: 4px;

    /* Overrides the default font size in the theme. */
    --ck-font-size-base: 14px;

    /* Helper variables to avoid duplication in the colors. */
    --ck-custom-background: var(--dark-mode-card-background-color);
    --ck-custom-foreground: var(--dark-mode-background-color);
    --ck-custom-hover: rgba(39, 39, 39);
    --ck-custom-border: var(--dark-mode-gray-color);
    --ck-custom-white: white;

    /* -- Overrides generic colors. ------------------------------------------------------------- */

    --ck-color-base-foreground:  rgba(18, 18, 18, 0.38);
    --ck-color-focus-border: hsl(208, 90%, 62%);
    --ck-color-text: hsl(0, 0%, 98%);
    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);

    /* -- Overrides the default .ck-button class colors. ---------------------------------------- */

    --ck-color-button-default-background: var(--ck-custom-background);
    --ck-color-button-default-hover-background: var(--ck-custom-hover);
    --ck-color-button-default-active-background: hsl(270, 2%, 20%);
    --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
    --ck-color-button-default-disabled-background: var(--ck-custom-background);

    --ck-color-button-on-background: var(--ck-custom-foreground);
    --ck-color-button-on-hover-background: var(--ck-custom-hover);
    --ck-color-button-on-active-background: hsl(255, 4%, 14%);
    --ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);

    --ck-color-button-action-background: hsl(168, 76%, 42%);
    --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
    --ck-color-button-action-active-background: hsl(168, 76%, 36%);
    --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
    --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
    --ck-color-button-action-text: var(--ck-custom-white);

    --ck-color-button-save: hsl(120, 100%, 46%);
    --ck-color-button-cancel: hsl(15, 100%, 56%);

    /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */

    --ck-color-dropdown-panel-background: var(--ck-custom-background);
    --ck-color-dropdown-panel-border: var(--ck-custom-foreground);

    /* -- Overrides the default .ck-dialog class colors. ----------------------------------- */

    --ck-color-dialog-background: var(--ck-custom-background);
    --ck-color-dialog-form-header-border: var(--ck-custom-border);

    /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */

    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
    --ck-color-split-button-hover-border: var(--ck-custom-foreground);

    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */

    --ck-color-input-background: var(--ck-custom-background);
    --ck-color-input-border: hsl(257, 3%, 43%);
    --ck-color-input-text: hsl(0, 0%, 98%);
    --ck-color-input-disabled-background: hsl(255, 4%, 21%);
    --ck-color-input-disabled-border: hsl(250, 3%, 38%);
    --ck-color-input-disabled-text: hsl(0, 0%, 78%);

    /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */

    --ck-color-labeled-field-label-background: var(--ck-custom-background);

    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */

    --ck-color-list-background: var(--ck-custom-background);
    --ck-color-list-button-hover-background: var(--ck-color-base-foreground);
    --ck-color-list-button-on-background: var(--ck-color-base-active);
    --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
    --ck-color-list-button-on-text: var(--ck-color-base-background);

    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */

    --ck-color-panel-background: var(--ck-custom-background);
    --ck-color-panel-border: var(--ck-custom-border);

    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */

    --ck-color-toolbar-background: var(--ck-custom-background);
    --ck-color-toolbar-border: var(--ck-custom-border);

    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */

    --ck-color-tooltip-background: hsl(252, 7%, 14%);
    --ck-color-tooltip-text: hsl(0, 0%, 93%);

    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */

    --ck-color-image-caption-background: hsl(0, 0%, 97%);
    --ck-color-image-caption-text: hsl(0, 0%, 20%);

    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */

    --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
    --ck-color-widget-hover-border: hsl(43, 100%, 68%);
    --ck-color-widget-editable-focus-background: var(--ck-custom-white);

    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */

    --ck-color-link-default: hsl(190, 100%, 75%);
}

body.darkMode select {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

/* End Dark Mode */


 .select-container-for-select-ellipsis {
    position: relative;
    display: inline-block;
  }
  
 .select-container-for-select-ellipsis::before {
    content: attr(data-content);
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    left: 0;
    padding-right: 8px;
    font-size:13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-transform: capitalize;
    pointer-events: none;
    z-index: 1;
  }


 body.darkMode .select-container-for-select-ellipsis option{
    color: white;
    background-color: #333333;
  }
  .select-container-for-select-ellipsis option{
    background-color: #FFF;
    color: #000;
  }

::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border: 3px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a3a3a5;
}
select.formselectfield::-webkit-scrollbar-thumb :hover {
    background-color: #a3a3a5;
} 


html:has(> body.darkMode) {

    ::-webkit-scrollbar-track {
        background: #434343;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #5F5F63;
        border: 3px solid #434343;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #505051;
    }

}

select.formselectfield::-webkit-scrollbar {
    width: 12px;
}