.logo-bar {
    background-color: #333;
    border-bottom: 2px solid #222;
    color: #eee;

    padding-left: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 8px;
}
.logo-bar a {
    color: #fff;
}

.vr-notify-container {
    margin-top: 10px;
    display:none;
    float:right;
    padding:0 10px;
    color:#F2F2F2;
    font-size:11pt;
    position: relative;
    height: 38px;;
}

.vr-notify-container a {
    color:#F8F8F8;
    text-decoration: none;
    cursor: pointer;
}

.vr-notify-container a:hover, a {
    color:#FFF;
}

.vr-notify-container .header{
    float:right;
    text-align: left;
    padding-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}

.vr-notify-container .notify-sub-header{
    font-size: 9pt;
    color:#888;
}

.vr-notify-container > .icon-container {

    border: 2px solid #F2F2F2;
    color: #fff;
    font-weight: 500;
    border-radius: 100%;
    padding:8px;
    text-align: center;
    vertical-align: middle;  
    float:left;
    cursor: pointer;
    position: relative;
    background-color: #333;
    z-index: 999;
}

.vr-notify-container > .icon-container:hover {
    background-color: #888;
    color:#333;
    transition-timing-function: ease-in;
    transition: 0.5s;
}

.vr-notify-container ul.list-group.vr-notify-listview {
    background-color: #333;
    border:none;
    position: absolute;
    top:40px;
    right:-8px;
    z-index: 998;
    display: none;
    min-width: 250px;
}

.vr-notify-container ul.list-group.vr-notify-listview > li.list-group-item {
    display: block;
    background-color: #555;
    border-radius: 0;
    border-bottom: none;
    border-right: none;
    border-left: none;
    border-top: 1px #f2f2f2 solid;
    width: 100%;
    z-index: 997;
}

.vr-notify-container ul.list-group.vr-notify-listview > li.list-group-item:first-of-type {
    border-top: none;
    margin-top:20px;
} 

.vr-notify-container > .icon-container > .notify-badge {
    position: absolute;
    width:18px;
    top:-7px;
    left:-7px;
    font-size: 8pt;
    color:#fff;
    background-color: #D70000;
    border: 1px solid #FFF;
    border-radius: 100%;
}

.vr-notify-container ~ i {
    font-size:13pt;
    text-align: center;
}


.nav-bar {
    background-color: #c83b3c;
    border-bottom: 2px solid #a32e30;
    color: #eee;

    line-height: 21px;

    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    /* Can't untangle the nested tables to figure out where
     * the extra padding on the right side is coming from.
     * So we'll just match it here. */
    padding-right: 8px;
}
.nav-bar a {
    color: #fff;
}
.nav-bar a:hover {
    color: #333;
}

.pull-right {
    float: right;
}

h3 {
    font-size: 125%;
}
a {
    color: #D70000;
    font-weight: normal;
    text-decoration: underline;
}
a:visited {
    color: #870000;
}
a:active {
    color: #008787;
    text-decoration: none;
}
a:hover {
    color: #CD0000;
}
/** Front Page Dash Board **/

table#frontPageDashBoard {} #frontPageDashBoard fieldset legend a {
    color: #000000;
}

/* new code */
/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
a.menuBoxHeadingLink:link {
    color: rgb(97, 96, 96);
    font-weight: bold;
    text-decoration: none;
}
a.menuBoxHeadingLink:visited {
    color: rgb(97, 96, 96);
    font-weight: bold;
    text-decoration: none;
}
a.menuBoxHeadingLink:active {
    color: rgb(97, 96, 96);
    font-weight: bold;
    text-decoration: none;
}
a.menuBoxHeadingLink:hover {
    color: rgb(97, 96, 96);
    font-weight: bold;
    text-decoration: none;
}
a.menuBoxContentLink:link {
    color: rgb(97, 96, 96);
    text-decoration: none;
}
a.menuBoxContentLink:visited {
    color: rgb(97, 96, 96);
    text-decoration: none;
}
a.menuBoxContentLink:active {
    color: rgb(97, 96, 96);
    text-decoration: none;
}
a.menuBoxContentLink:hover {
    color: rgb(97, 96, 96);
    text-decoration: underline;
}
a.splitPageLink:link {
    color: rgb(0, 0, 255);
    text-decoration: none;
}
a.splitPageLink:visited {
    color: rgb(0, 0, 255);
    text-decoration: none;
}
a.splitPageLink:active {
    color: rgb(0, 0, 255);
    text-decoration: none;
}
a.splitPageLink:hover {
    color: rgb(0, 0, 255);
    text-decoration: underline;
    background-color: rgb(255, 255, 51);
}
.menuBoxHeading {
    color: rgb(97, 96, 96);
    background-color: rgb(255, 255, 255);
}
.menuBoxSubHeading {
    color: rgb(97, 96, 96);
}
.menuBoxContent {
    color: rgb(97, 96, 96);
    padding-left: 6px;
}
body {
    margin: 0px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.headerBar {
    background-color: rgb(179, 186, 197);
}
.headerBarContent {
    padding: 2px;
    font-size: 8px;
    color: rgb(0, 0, 128);
    font-weight: bold;
}
.columnLeft {
    border: 1px solid rgb(153, 153, 153);
    padding: 2px;
    background-color: rgb(240, 241, 241);
}

#leftside-menu-container.columnLeft {
    position: inherit;
    width: 220px;
    border: 0;
    border-right: 1px solid rgb(153, 153, 153);
    padding: 2px;
    background-color: rgb(240, 241, 241);
}

#leftside-menu-container.columnLeft > table {
    margin: 2px 0;
}

#leftside-menu-container.columnLeft .menuBoxHeading {
    padding-left: 8px;
    cursor: pointer;
}

#leftside-menu-container.columnLeft .menuBoxHeading:hover {
    background-color: #296583;
    border-color: #2e6da4;
}

#leftside-menu-container.columnLeft .menuBoxHeading:hover a {
    color: #fff;
}

#leftside-menu-container.columnLeft .menuBoxContent {
    padding-left: 16px;
}

#leftside-menu-container.columnLeft a.menuBoxContentLink:hover {
    color:#2e6da4;
}

body.bsv5 , body.bsv5 .pageWrapper {
    height:100%;
}

body.bsv5 .pageWrapper {
    display: flex;
    align-items: stretch;
}

body.bsv5 .columnRight {
    margin: 0;
    padding-top: 15px;
    background-color: #f3f4f6;
    width: 100%;
}

.pageHeading {
    font-size: 18px;
    color: rgb(114, 114, 114);
    font-weight: bold;
}

body.bsv5 .pageHeading {
    color: #495057;
    font-weight: bold;
    margin: 16px 0;
}

body.bsv5 .pageHeading  > a {
    text-decoration: none;
}

.content {
    font-size: 14px;
    color: rgb(0, 0, 0);
}
.content_heading {
    font-size: 14px;
    color: rgb(0, 0, 0);
    font-weight: bold;
}
.dataTableHeadingRow {
    background-color: rgb(201, 201, 201);
}
.dataTableHeadingContent {
    font-size: 15px;
    color: rgb(255, 255, 255);
    font-weight: bold;
}
.dataTableRow {
    background-color: rgb(240, 241, 241);
}
.dataTableRowSelected {
    background-color: rgb(222, 228, 232);
}
.dataTableRowOver {
    background-color: rgb(255, 255, 255);
    cursor: pointer;
}
.dataTableContent {
    font-size: 12px;
    color: rgb(0, 0, 0);
}
.dataTableContentRed {
    font-size: 12px;
    color: rgb(204, 0, 0);
}
.dataTableContentRedAlert {
    font-size: 12px;
    color: rgb(255, 0, 0);
    font-weight: bold;
}
.page-container {
    padding: 12px;
}
.infoBoxHeading {
    font-size: 12px;
    color: rgb(255, 255, 255);
    background-color: rgb(179, 186, 197);
}
.infoBoxContent {
    font-size: 12px;
    color: rgb(0, 0, 0);
    background-color: rgb(222, 228, 232);
}
.messageBox {
    font-size: 12px;
    text-align: left;
    font-weight: bold;
}
.messageStackError {
    font-size: 12px;
    background-color: rgb(255, 77, 82);
    text-align: left;
    //    font-weight: bold;
    color: rgb(255, 255, 255);
}
.messageStackWarning {
    font-size: 12px;
    background-color: rgb(255, 255, 0);
    text-align: left;
    //    font-weight: bold;
    color: rgb(0, 0, 0);
}
.messageStackSuccess {
    font-size: 12px;
    background-color: rgb(0, 204, 102);
    text-align: left;
    color: rgb(0, 0, 0);
}
TR.headerError {
    background: #ff0000;
}
TD.headerError {
    font-size: 12px;
    background: #ff0000;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}
TR.headerInfo {
    background: #00ff00;
}
TD.headerInfo {
    font-size: 12px;
    background: #00ff00;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}
checkbox,
input,
radio,
select,
textarea,
file {
    font-size: 12px;
}
form {
    display: inline;
}
.formArea {
    border: 1px solid rgb(123, 158, 189);
    background-color: rgb(241, 249, 254);
}
.formAreaTitle {
    font-size: 12px;
    font-weight: bold;
}
.attributes-odd {
    background-color: rgb(244, 247, 253);
}
.attributes-even {
    background-color: rgb(255, 255, 255);
}
.specialPrice {
    color: rgb(255, 0, 0);
}
.oldPrice {
    text-decoration: line-through;
}
.fieldRequired {
    font-size: 12px;
    color: rgb(255, 0, 0);
}
.smallText {
    font-size: 12px;
}
.main {
    font-size: 12px;
}
.errorText {
    font-size: 12px;
    color: rgb(255, 0, 0);
}
.attributeBoxContent {
    font-size: 12px;
    color: rgb(0, 0, 0);
    background-color: rgb(128, 128, 128);
}
.TR.attributeBoxContent {
    font-size: 12px;
    color: rgb(0, 0, 0);
    background-color: rgb(128, 128, 128);
}
.TD.attributeBoxContent {
    font-size: 12px;
    color: rgb(0, 0, 0);
    background-color: rgb(192, 192, 192);
}
.infoboxAdminHeading {
    font-size: 14px;
    font-weight: bold;
    color: rgb(0, 0, 0);
}
.infoboxAdmin {
    font-size: 12px;
    color: rgb(0, 0, 0);
}
.infobox-listing-odd {
    background: rgb(248, 248, 249) none repeat scroll 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}
.infobox-listing-even {
    background: rgb(240, 241, 241) none repeat scroll 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}
.epa_error {
    background: rgb(227, 18, 48) none repeat scroll 0%;
    font-size: 12px;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    color: rgb(255, 255, 255);
}
.epa_output {
    background: rgb(248, 248, 249) none repeat scroll 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}
.epa_msg {
    background: rgb(153, 204, 255) none repeat scroll 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
}
.editOrder {
    font-size: 12px;
    color: rgb(0, 0, 0);
    background-color: rgb(192, 192, 192);
}
.helpMain {
    font-size: 12px;
    color: rgb(0, 0, 0);
}
.dtree {
    font-size: 12px;
    color: rgb(102, 102, 102);
    white-space: nowrap;
}
.dtree img {
    border: 0px none;
    vertical-align: middle;
}
.dtree a {
    color: rgb(51, 51, 51);
    text-decoration: none;
}
.dtree a.node,
.dtree a.nodeSel {
    padding: 1px 2px;
    white-space: nowrap;
}
.dtree a.node:hover,
.dtree a.nodeSel:hover {
    color: rgb(51, 51, 51);
    text-decoration: underline;
}
.dtree a.nodeSel {
    background-color: rgb(192, 210, 236);
}
.dtree .clip {
    overflow: hidden;
}
div.menuBar,
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
    font-size: 8pt;
    font-style: normal;
    font-weight: normal;
    color: rgb(0, 0, 0);
}
div.menuBar {
    border: 2px outset rgb(224, 224, 224);
    padding: 4px 2px;
    background-color: rgb(224, 224, 224);
    text-align: center;
    font-weight: bold;
}
div.menuBar a.menuButton {
    border: 1px solid rgb(224, 224, 224);
    margin: 1px;
    padding: 2px 6px;
    background-color: transparent;
    color: rgb(0, 0, 0);
    cursor: default;
    left: 0px;
    position: relative;
    text-decoration: none;
    top: 0px;
    z-index: 100;
}
div.menuBar a.menuButton:hover {
    border: 1px outset rgb(224, 224, 224);
    background-color: transparent;
    color: rgb(0, 0, 0);
}
div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
    border: 1px inset rgb(224, 224, 224);
    background-color: rgb(80, 80, 240);
    color: rgb(255, 255, 255);
    left: 1px;
    top: 1px;
}
div.menu {
    border: 2px outset rgb(224, 224, 224);
    padding: 0px 1px 1px 0px;
    background-color: rgb(224, 224, 224);
    left: 0px;
    position: absolute;
    top: 0px;
    visibility: hidden;
    z-index: 101;
}
div.menu a.menuItem {
    padding: 3px 1em;
    color: rgb(0, 0, 0);
    cursor: default;
    display: block;
    text-decoration: none;
    white-space: nowrap;
}
div.menu a.menuItem:hover,
div.menu a.menuItemHighlight {
    background-color: rgb(80, 80, 240);
    color: rgb(255, 255, 255);
}
div.menu a.menuItem span.menuItemText {} div.menu a.menuItem span.menuItemArrow {
    margin-right: -0.75em;
}
div.menu div.menuItemSep {
    border: 1px inset rgb(224, 224, 224);
    margin: 4px 2px;
}
fieldset {
    border: 1px solid rgb(204, 204, 204);
    padding: 5px;
    margin-bottom: 10px;
    text-align: left;
}
fieldset p {
    margin: 10px 0px;
}
legend {
    border: 1px solid rgb(204, 204, 204);
    padding: 2px;
    color: rgb(0, 0, 0);
    font-size: 1.1em;
    font-weight: bold;
    background-color: rgb(247, 247, 247);
    text-align: center;
}
body,
td,
th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: rgb(0, 0, 0);
    line-height: 1.5em;
}
.pagination {
    font-size: 14px;
    background: #F0F1F1;
    color: #FF0000;
    text-align: center;
    padding: 3px;
}
.pagination,
current {
    font-weight: bold;
}
/* Tables for 2016 */

.table16 {
    margin-bottom: 12px;
    background-color: #ffffff;
    border-collapse: collapse;
    border: 1px solid #DDD;
}
.table-list > thead > tr,
.table16 > tbody > tr,
.table16 > tfoot > tr {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
table.table16 > thead > tr > th,
table.table16 > tbody > tr > th,
table.table16 > tfoot > tr > th,
table.table16 > thead > tr > td,
table.table16 > tbody > tr > td,
table.table16 > tfoot > tr > td {
    text-align: left;
    vertical-align: top;
    border-top: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    padding: .2rem .4rem;
}
table.table16 td.right, table.table16 th.right {
    text-align: right;
}
.table16 > thead > tr > th {
    font-size: 15px;
    font-weight: 400;
    color: #9e0b0f;
    vertical-align: bottom;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
table.table16 > tbody > tr > td {
    font-size: 13px;
    margin-bottom: 2px;
}
table.table16 > tbody > tr:nth-child(even) {
    background: #F8F8F8;
}
table.table16 > tbody > tr:hover > td {
    background-color: #f9bdbb;
}
.clear-fix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

/*
div.dataTables_processing {
    z-index: 1000;
    box-shadow: 0px 0px 100px 100px rgba(255,255,255,0.7),
                0px 2px 5px 0px rgba(0,0,0,1);


    -webkit-touch-callout: none;
    -ms-user-select: none;
    user-select: none;
}
*/


.hoja-spinner{
    color: rgb(220,220,226);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -80px;
    margin-top: -80px;
    width: 160px;
    height: 160px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 19px;
    line-height: 160px;
    -webkit-font-smoothing: antialiased;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    translate3d(0, 0, 0); /* Stops memory leak */
}

.hoja-spinner:after,
.hoja-spinner:before{
    content: "";
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
}

.hoja-spinner:after{
    /*
    box-shadow: inset     0  10px 0 rgba( 200,   59,  60, 1.0),
                inset  10px     0 0 rgba( 255,  255, 255, 1.0),
                inset     0 -10px 0 rgba( 200,   59,  60, 0.9),
                inset -10px     0 0 rgba( 255,  255, 255, 1.0);
    */

    box-shadow: inset     0  10px 0 rgba( 198, 198, 198, 0.8),
                inset  10px     0 0 rgba( 244, 244, 244, 0.6),
                inset     0 -10px 0 rgba( 198, 198, 198, 0.7),
                inset -10px     0 0 rgba( 244, 244, 244, 0.5);

    animation: hojaSpinnerRotarZ 3.5s -0.5s linear infinite;
}

.hoja-spinner:before{
    /*
    box-shadow: inset     0  10px 0 rgba( 158,  47,  47, 0.7),
                inset  10px     0 0 rgba(  34,  34,  34, 0.9),
                inset     0 -10px 0 rgba( 158,  47,  47, 1.0),
                inset -10px     0 0 rgba(  34,  34,  34, 0.9);
    */

    box-shadow: inset     0  10px 0 rgba( 224, 224, 224, 0.7),
                inset  10px     0 0 rgba( 168, 168, 168, 0.0),
                inset     0 -10px 0 rgba( 224, 224, 224, 1.0),
                inset -10px     0 0 rgba( 168, 168, 168, 0.0);

    animation: hojaSpinnerRotarIZ 3.5s -0.5s linear infinite;
}

@keyframes hojaSpinnerRotarZ{
    0%{
        transform:rotateZ(0deg) scaleX(1) scaleY(1);
    }
    50%{
        transform:rotateZ(180deg) scaleX(0.82) scaleY(0.95);
    }
    100%{
        transform:rotateZ(360deg) scaleX(1) scaleY(1);
    }
}

@keyframes hojaSpinnerRotarIZ{
    0%{
        transform:rotateZ(0deg) scaleX(1) scaleY(1);
    }
    50%{
        transform:rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
    }
    100%{
        transform:rotateZ(-360deg) scaleX(1) scaleY(1);
    }
}

/*
.pofo-maker-po-loading-screen{
    background-color: #FFFFFF;
    z-index: 100;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    opacity: 1.0;
}
 */

/* Fix to make Sweet Alert 2 work with Bootstrap 3 (This can be removed if we move to Bootstrap 4 or 5) */
.swal2-popup {
    font-size: 1.6rem !important;
}
.swal2-icon {
    width:  5em !important;
    height: 5em !important;
    border-width: 0.25em !important;
}


.swal2-overlay {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*noinspection CssReplaceWithShorthandSafely*/
.custom-swal-action-button {
    border: 0;
    border-radius: .25em;
    color: #fff;
    font-size: 1em;

    background: initial; /* reset background*/
    background-color: #2778c4 !important;
}

.custom-swal-delete-button {
    border: 0;
    border-radius: .25em;
    color: #fff;
    font-size: 1em;

    background: initial; /* reset background*/
    background-color: #B71C1C !important;
}


/* Credit Memo - Special Refund Line Items */
/*
[data-feature="credit-memo"][data-section="line-item-row"][data-item-is-refund="yes"]
{
    background-color: #ffd7d9 !important;
}
[data-feature="credit-memo"][data-section="line-item-row"][data-item-is-refund="yes"]
    button.btn-primary
{
    background-color: #750e13 !important;

    border-top-color:    #a2191f!important;
    border-bottom-color: #a2191f!important;
    border-right-color:  #a2191f!important;
    border-left-color:   #a2191f!important;
}
*/
[data-feature="credit-memo"][data-section="line-item-row"][data-item-is-refund="yes"]
    td.li-product
{
    color: #750e13 !important;
}
[data-feature="credit-memo"][data-section="line-item-row"][data-item-is-refund="yes"]
    td.li-product
        .tag
{
    background-color: #750e13 !important;
}


.filters-container {
    display: flex;
    align-items: flex-end;
}

.filters-container > div {
    margin-right: 12px;
}

.filter-small-number-input {
    text-align: center;
}


.filter-small-number-input input {
    text-align:right;
    width:34px;
}

.p-0 {
    padding: 0px;
}

.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #296583;
    border-color: #2e6da4;
}

.swal2-content input.mid-input {
    padding: 0.25em 0.75em;
    margin: 0.5em 0;
    height: 1.75em;
}

.swal2-content div.has-help-text input.mid-input {
    margin-bottom: 0;
}

.swal2-content small {
    font-size: 70%;
    color: #999;
}

.popoverHelp {
    margin-top: 8px;
    font-weight: bold;
    color: #b00;
    border: 1px solid #b00;
    background-color: #FA9A82;
    right: 21px;
    position: fixed;
    z-index: 50;
    top: 14px !important;
}

.popoverHelp:hover, .popoverHelp:focus, .popoverHelp:active:focus {
    background-color: #D87860;
    color: #b00;
}

.processing-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid #222;
    border-right-color: transparent;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    right: 8px;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}

.processing-spinner {
    position: unset;
    margin: 4px 8px;
    vertical-align: middle;
}

@keyframes spinner-border {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spinner-border {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}