/* not working well for manuals
@media print {
    body {transform: scale(.7);}
}
*/
/* intereting but not right for this purpose
.ranges > ul {
    -moz-columns: 3 200px;
    -webkit-columns: 3 200px;
    columns: 3 200px;
}
*/
/* do not use stripes - untested
.dataTables_scrollBody { 
    background: none !important;
}
 */

/* If rowheight is set on scroller this is not necessary
.dataTables_scrollBody {
    min-height: 28px;
}*/

/*.npab-table         { overflow: auto; height: 200px; }
.npab-table thead th { position: sticky; top: 0; z-index: 1; }*/

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

/* fixed left col above yadcf dustbin */
.dtfc-fixed-left {
    z-index: 101 !important; 
}

.wallboard-iframe-container {
    position: relative;
    width: 100%;
    min-height: 80px;
    background-color: #f0f0f0;
    padding-top: 0;
    border-style: none;   
}

.wallboard-iframe-container.bordered {
    border-width: 5px;
    border-style: solid;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.wallboard-loading-text {
    text-align: center;
    font-size: 1.2em;
    color: #555;
    margin: 8px 0;
    padding: 0;
    text-align: center;
    margin-bottom: 5px;
}

.wallboard-iframe {
    margin-top: 5px;
    border-color: darkgreen;
    border-width: 5px;
    border-style: solid;
    border-radius: 5px;
    display: block;
    width: 100%;
    overflow: auto;
}

div.row-title {
    font-weight: bold;
    display: inline-block;
    width: 65px;
    padding-right: 2px;
    text-align: right;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    cursor: not-allowed;
}

div.dataTables_wrapper div.dataTables_processing {
    margin-top: -50px;
}

.not-a-button {
    background: none !important;
    border: none;
    padding: 0 !important;
    text-decoration: underline;
    cursor: pointer;
}

.sortable-list {
    list-style-type: none;
    margin: 0;
    padding: 5px;
    width: 100%;
}

.sortable-list li {
    margin: 0 3px 3px 3px;
    padding: 0.2em 0.4em;
    font-size: 1.4em;
    height: 36px;
    text-align: left;
}

.sortable-list span {
    position: absolute;
    margin-left: -1.3em;
}

.checkbox-container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 1.4em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #D9EDF7;
    border-style: solid;
    border-width: 2px;
    border-color: #3C8DBC;
    border-radius: 5px;
}

.checkbox-container:hover input ~ .checkbox-checkmark {
    background-color: #ECF0F5;
}

.checkbox-container input:checked ~ .checkbox-checkmark {
    background-color: #3C8DBC;
}
.checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox-container input:checked ~ .checkbox-checkmark:after {
    display: block;
}
.checkbox-container .checkbox-checkmark:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.pieLabelBackground {
    border-radius: 12px;
}

.sql_report_active {
    font-weight: bold;
    background-color: #FFFF70 !important;
}

.sql_report_name {
    vertical-align: middle;
    font-weight: bold;
    padding-left: 5px;
}

no-padding {
    padding: 0;
}

pre.json-display {
    background-color: black;
    color: white;
    font-family: monospace;
    font-size: 14px;
    font-weight: 400;
    height: auto;
    line-height: 20px;
}

.table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
    border-bottom-width: 0px;
}

.row-even > td {
    background-color: #E1EDF5;
}
.row-odd > td {
    background-color: #F0F6FA;
}

.tablesorter-bootstrap .tablesorter-filter-row {
    background-color: #F5F9FC;
}

.tablesorter-bootstrap .tablesorter-header-inner {
    position: relative;
    padding: 0px 20px 0px 2px
}

.tablesorter-bootstrap .sorter-false .tablesorter-header-inner {
    padding: 0px 2px;
}

.box-body:has(table) {
    padding: 0;
}

.box-body > .npab-table {
    table-layout: fixed;
    margin: 2px;
    width: unset;
    max-width: unset;
}
.npab-table-inner {
    table-layout: fixed;
    margin: 0;
    width: unset;
    max-width: unset;
}
.npab-table,
.npab-table > tbody > tr > td,
.npab-table > thead > tr > th {
    white-space: nowrap;
    border-color: #3C8DBC;
    border-width: 1px;
    border-style: solid;
}

/*.npab-border {
    border-color: #3C8DBC;
    border-width: 1px;
    border-style: solid;
}*/

.npab-fixed {
    overflow: hidden;
   
}
.npab-fixed-sm {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}
.npab-fixed-md {
    width: 86px;
    min-width: 86px;
    max-width: 86px;
}
.npab-fixed-lg {
    width: 162px;
    min-width: 162px;
    max-width: 162px;
}
.npab-fixed-xl {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}

.CodeMirror {
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 5px;
    height: auto;
}

.vehicle-display {
    position: relative;
    background: #F39C1244;
    border: 1px solid black;
    border-radius: 8px;
    border-color: #F39C12;
    padding: 10px 20px 20px;
    margin: 10px 0px;
}

.vehicle-drop {
    border-color: #3C8DBC;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    background: white;
    padding: 0px 8px 0px;
    margin: 0px 0px 8px;
}
.vehicle-drop-trader-hold {
    border-color: red;
    background: #ff000044;
}

.vehicle-drop-header {
    font-size: 110%;
    margin-bottom: 8px;
}

.vehicle-drop-header > div {
    padding-top: 4px;
    min-height: 35px;
    vertical-align: middle;
}

.table-vehicle-drop {
    margin-bottom: 4px;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}


.button-box-search {
  font-size: 16px;
  padding: 0.25em 0.5em;
  background-color: #fff;
  border: 2px solid #3C8DBC;
  border-radius: 4px;
  margin-bottom: 10px;
}

.btn-list {
    text-align: left;
}

.btn-list:before {
    content:"•\00a0\00a0\00a0";
/*    content: "• ";*/
/*    display: list-item;  This has to be list-item                                          
    margin-left : 1em;   If you use default list-style-position 'outside', you may need this */
}

.div-note > p:last-child {
    margin-bottom: 0;
}

.login-page.skin-green {
    background-color: #00A65A66;
}
.login-page.skin-blue {
    background-color: #3C8DBC66;
}
.login-page.skin-yellow {
    background-color: #F39C1266;
}

.login-box-body {
    border-radius: 8px;
    border-style: solid;
    border-width: 2px;
}

.login-box-msg {
    font-size: 110%;
    font-weight: 600;
}

.login-box {
    width: 360px;
    margin: 10% auto;
}

.login-logo {
    margin-bottom: 10px;
}

.login-alert {
    padding: 5px;
    margin-top: -10px;
}

.login-page.skin-green .login-box-body {
    border-color: #00A65A;
}
.login-page.skin-blue .login-box-body {
    border-color: #3C8DBC;
}
.login-page.skin-yellow .login-box-body {
    border-color: #F39C12;
}

table.xdebug-error {
    max-width: 95%;
    margin: 5px auto;
    color: black;
    border-width: 3px;
}

table.xdebug-error > tbody > tr > th {
    padding: 4px 8px;
    font-weight: 800;
    border-bottom-width: 2px;
    font-size: 17px;
}
table.xdebug-error > tbody > tr > td {
    padding: 4px 8px;
    font-weight: 600;
    font-size: 15px;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #E1EDF5;
}
.table-striped>tbody>tr:nth-of-type(even) {
    background-color: #F0F6FA;
}

.dt-special > tbody > tr > td {
    user-select: none;
}

.helpdesk_analysis > tbody > tr > td,
.helpdesk_analysis > tbody > tr > th.right {
    padding-right: 11px !important;
}

.cell-narrow {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 1px;
}

td.cell-bold {
    font-weight: 600;
}

tr.selected {
    background-color: #D0D7FF !important;
}

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

.text-right-margin {
    text-align: right;
    padding-right: 30px !important;
}

table.dataTable.dt-checkboxes-select tbody tr {
    /*
        this makes only checkbox cells have a pointer, confusing otherwise
    */
    cursor: default;
}

input[type=checkbox] {
    cursor: pointer;
}

.daterangepicker > .ranges {
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: clip;
}

/*.dataTable th {
    word-wrap: break-word;
}
td, th {
    border: 1px solid #000;
}*/

th span.hide_me {
    display: none;
}

/*.box-header {
    text-align: center;
}*/

.small-box-footer {
    font-weight: 600;
}

.bg-dark-blue {
    background-color: DarkBlue;
    color: #ffffff;
}

.bg-dark-slate-blue {
    background-color: DarkSlateBlue;
    color: #ffffff;
}

.bg-dark-salmon {
    background-color: DarkSalmon;
    color: #ffffff;
}

.bg-orchid {
    background-color: Orchid;
    color: #ffffff;
}

.bg-steel-blue {
    background-color: SteelBlue;
    color: #ffffff;
}

.bg-dark-majenta {
    background-color: DarkMagenta;
    color: #ffffff;
}

.bg-coral {
    background-color: Coral;
    color: #ffffff;
}

.bg-indian-red {
    background-color: IndianRed;
    color: #ffffff;
}

.bg-dark-khaki {
    background-color: DarkKhaki;
    color: #ffffff;
}

.row.fix {
    display: flex;
    flex-wrap: wrap;
}

.small-box {
    border-radius: 5px;
    box-shadow: 0 2px 2px rgb(0 0 0 / 10%);
}

.inner-inner > table {
    margin-bottom: 0;
}

.small-box h3 {
    font-size: 30px;
    margin: 0 0 7px 0;
}
.small-box > .icon {
    color: #ffffff66;
}

.inner-inner > table > tbody > tr > td,
.inner-inner > table > tbody > tr > th {
    font-size: 120%;
    border-top: none;
    padding: 1px 5px;
} 

.inner-inner > table > tbody > tr > th {
    text-align: right;
} 
.inner-inner > table > tbody > tr > td  {
    text-align: left;
} 

.small-box > .inner {
    padding-bottom: 0px;
    min-height: 120px;
}

.small-box > .inner > .inner-inner {
    padding-left: 20px;
    padding-bottom: 7px;
    font-weight: 500;
}
.btn.buttons-columnVisibility {
    margin-top: 1px;
    width: 100%;
    text-align: left;
    padding: 2px 6px;
}

.btn.buttons-columnVisibility.active {
    background-color: #3c8dbc;
    border-color: #367fa9;
    color: white;
}

ul.calendar-navi {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /*text-align: center;*/
    padding-bottom: 5px;
    padding-top: 5px;
}

ul.calendar-navi li {
    white-space: nowrap;
    padding: 2px 8px;
    background: #039;
    color: white;
    font-weight: bold;
    border: #3C8DBC 2px solid;
    border-radius: 15px;
    display: inline-block;
    margin: 2px 4px;
}

.funnel-box {
    border: 1px solid #3C8DBC;
    color: #3C8DBC;
    background-color: #fff;
    border-radius: 5px;
    padding: 0px 3px;
    margin-right: 3px; 
    font-size: 13px;
}

.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border: 1px solid #3C8DBC;
}

.pagination>li>a:hover {
    border: 1px solid #3C8DBC;
}

.pagination>li>a, .pagination>li>span {
    padding: 4px 12px;
    color: #000;
    background-color: #fff;
    border: 1px solid #3C8DBC;
}

.form-control {
    border-color: #3C8DBC;
}

.btn {
    border-width: 1px;
    font-weight: 600;
}
.btn-default {
    color: black;
    border-color: #3C8DBC;
}

.box {
    border: 1px solid #3C8DBC;
    border-top: 3px solid #3C8DBC;
}

table.dataTable {
    background-color: white;
}

div.dataTables_wrapper div.dataTables_filter label {
    font-weight: normal;
    white-space: nowrap;
    margin: 0;
}

.frb-group {
    margin: 2px 0;
}

.frb ~ .frb {
    margin-top: 2px;
}

.frb input[type="radio"]:empty,
.frb input[type="checkbox"]:empty {
    /* display: none; // do not remove - it breaks validation */
    z-index: -1;
}

.frb input[type="radio"] ~ label:before,
.frb input[type="checkbox"] ~ label:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    content: '\f0c8';
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 15px;
    font-size: 22px;
}

.frb input[type="radio"]:checked ~ label:before,
.frb input[type="checkbox"]:checked ~ label:before {
    font-weight: 400;
    content: '\f14a';
}

.frb input[type="radio"] ~ label,
.frb input[type="checkbox"] ~ label {
    position: relative;
    cursor: pointer;
    width: 100%;
    border: 1px solid #3C8DBC;
    border-radius: 5px;
    background-color: #f4f4f4;
}

.frb input[type="radio"] ~ label:focus,
.frb input[type="radio"] ~ label:hover,
.frb input[type="checkbox"] ~ label:focus,
.frb input[type="checkbox"] ~ label:hover {
    box-shadow: 0px 0px 3px #333;
}

.frb input[type="radio"]:checked ~ label,
.frb input[type="checkbox"]:checked ~ label {
    color: #F4F4F4;
    background-color: #275D8B;
}

.frb input[type="radio"]:empty ~ label span,
.frb input[type="checkbox"]:empty ~ label span {
    display: inline-block;
}

.frb input[type="radio"]:empty ~ label span.frb-title,
.frb input[type="checkbox"]:empty ~ label span.frb-title {
    font-size: 16px;
    font-weight: 700;
    width: 180px;
    margin: 4px 4px 4px 30px;
}

.frb input[type="radio"]:empty ~ label span.frb-description,
.frb input[type="checkbox"]:empty ~ label span.frb-description {
    font-weight: 700;
    margin: 4px 4px 4px 4px;
}

.frb input[type="radio"]:empty:checked ~ label span.frb-description,
.frb input[type="checkbox"]:empty:checked ~ label span.frb-description {
    color: #fafafa;
}

.frb.frb-default input[type="radio"]:empty:checked ~ label span.frb-description,
.frb.frb-default input[type="checkbox"]:empty:checked ~ label span.frb-description {
    color: #999;
}


/* This is so that the left dropdown menu can be scrolled to always
    don;t seem to need this now that the non existant footer is ignored
*/
/*.wrapper {
    min-height: 1200px;
}*/

.table-basic, .table-basic td {
    border: 1px solid black;
    border-collapse: collapse;
}
.table-basic td {
    padding: 2px;
}

.form-group .select2-container .select2-selection--single {
/*    height: 23px;*/
}

.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
/*    padding: 0px 14px 0 2px;
    height: 23px;*/
    color: #757575;
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 24px;
}

.select2-container .select2-selection--single {
    height: 24px;
}

/*.yadcf-filter-wrapper .select2-container .select2-selection--single .select2-selection__rendered {
    margin-top: -4px;
}*/

/*.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 23px;
    top: 0px;
}*/

.yadcf-filter, .yadcf-filter-range-date, .yadcf-filter-range, .chosen-container.chosen-container-single .chosen-single, .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    color: #757575;
}

th.workflow-option-selected {
    background-color: #5BB1DD !important;
}

td.workflow-option-selected {
    background-color: #9ACFEA !important;
}

.alert .close {
    color: inherit;
    opacity: 1;
}

.process-button {
    border-style: solid;
    border-width: 2px;
    border-color: #3C8DBC;
    background-color: white;
    /*color: #3C8DBC;*/
    font-weight: bold;
    border-radius: 5px;
}

.process-button-selected {
    border-style: solid;
    border-width: 2px;
    border-color: #3C8DBC;
    background-color: #3C8DBC;
    color: white !important;
    font-weight: bold;
    border-radius: 5px;
}

.hidden_warning_in_pop {
    color: red;
}

.mandatory {
    background-color: #ECF0F5;
    /*
    border-style: solid;
    border-width: 2px;
    border-color: #3C8DBC;
    */
}

.form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline {
    padding-top: 2px;
}

.form-horizontal .checkbox, .form-horizontal .radio {
    min-height: 20px;
}

.tick-cross-0 {
    text-align: center;
    background-color: #ff9999;
}
tr:hover .tick-cross-0  {
    background-color: #ffcccc;
}
.tick-cross-1 {
    text-align: center;
    background-color: #99ff99;
}
tr:hover .tick-cross-1  {
    background-color: #ccffcc;
}

.editable.focus {
    min-width: 100px;
    width: auto;
}

.fixedHeader-floating {
    /*
    was 1100 but put it in front of modals
    */
    z-index: 100;
}

.telephone-link {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 0px 5px;
    border-radius: 8px;
    box-shadow: 0 1px 1px #3C8DBC;
    white-space: nowrap;
}

/* 1. Override the resting state of the selected row */
table.dataTable tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px #D0D7FF !important; /* Light blue */
    color: #333333 !important; /* Dark grey text */
}

/* 2. Override the hover state of the selected row */
table.dataTable.table-hover > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px #E1E8FF !important; /* Slightly darker blue on hover */
    color: #333333 !important;
}

/* 3. Ensure the Fixed Columns also obey the new shadow rules */
table.dataTable tbody > tr.selected > .dtfc-fixed-left,
table.dataTable.table-hover > tbody > tr.selected:hover > .dtfc-fixed-left {
    box-shadow: inset 0 0 0 9999px #D0D7FF !important;
    background-color: #D0D7FF !important; /* Fallback for the sticky column */
    color: #333333 !important;
}

table.dataTable tr.dtrg-start th {
    /*text-align: center;*/
    background-color: #3B8DBC !important;
    color: white;
    text-align: center;
}

table.dataTable tr.dtrg-level-1 th {
    background-color: 	#C4DDEB !important;
    font-weight: 600;
    color: black;
}

table.dataTable tr.dtrg-group td {
    background-color: #B1D4E7;
}

.dtfc-right-top-blocker,
.dtfc-left-top-blocker {
    display: none !important;
}

.bg-indigo, .bg-indigo > a {
    color: #fff !important;
    background-color: #6610f2 !important;
}

.direct-chat-messages {
    height: auto;
}

.direct-chat-text > :last-child {
    margin-bottom: 0;
}
.direct-chat-text > div > :last-child {
    margin-bottom: 0;
}

.direct-chat-text {
    color: black;
    border-color: var(--chat-border);
}
.direct-chat-text:after, .direct-chat-text:before {
    border-right-color: var(--chat-border);
}
.right .direct-chat-text:after, .right .direct-chat-text:before {
    border-left-color: var(--chat-border);
}
@media(min-width:1200px){
    .direct-chat-msg.left{
        margin-right: 25%;
    }
    .direct-chat-msg.right {
        margin-left: 25%;
    }
}

.pdf_trans {
    height: 92vh;
}
@media (max-width: 992px) {
    .pdf_trans {
        height: 45vh;
    }
}

.initials {
    display: inline-block;
    font-size: 1em;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    border-radius: 50%;
    background: plum;
    vertical-align: middle;
    color: white;
}

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button {
    margin-left: 4px;
} 

.ui-autocomplete {
    width: 600px;
    max-height: 500px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

.yadcf-filter,
.yadcf-filter-range-date,
.yadcf-filter-range,
.chosen-container.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    min-height: 24px;
}

.yadcf-filter-reset-button {
    /*
    Need to look at this again. Default is 1000 so it was nearly always at front 
    0 fixes fixed headers and fixed columns but trash icon can no longer be clicked because it's behind the sort icon
    100 means it's in front of the sorting button area in which it sits otherwise clicking on trash icon clicks to sort
    */
    z-index: 100;
}

.yadcf-filter-wrapper {
    /* 
        default of -14 expands table width so creates scrollbars if dt in box  
        back to 0 here and 14 in next rule
        only want -14 margin if a sorting column exists
    */
    margin-right: 0px; 
    margin-top: 2px;
}

th.sorting > .yadcf-filter-wrapper,
th.sorting_desc > .yadcf-filter-wrapper,
th.sorting_asc > .yadcf-filter-wrapper {
    margin-right: -19px; 
}


table.dataTable thead th.sorting_disabled   {
    padding: 5px 3px 5px 3px;
}

table.dataTable tbody td.editable {
    box-shadow: inset 0 0 1px 1px black; 
    /* border: 1px solid black; */
}

.content {
    padding: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

div.DTE_Field div:not([data-dte-e="msg-error"]) {
    margin: 4px 4px 6px 2px;
}

@media screen and (min-width: 768px) {
    .dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{
        display: block;
    }
    .dropdown-menu{
        margin-top: 0;
    }
    .dropdown-toggle{
        margin-bottom: 0;
    }
    .navbar .dropdown-toggle, .nav-tabs .dropdown-toggle{
        margin-bottom: 0;
    }
}

#circle {
    position: absolute;
    top: 15%; /*may need work*/
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;	
}

.loader {
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    border: 8px solid #265D8B;
    border-top: 8px solid #3B8DBC;
    border-radius: 50%;
    animation: rotate 5s linear infinite;
}

@keyframes rotate {
    100% {transform: rotate(360deg);}
} 

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

div.dt-button-collection > .dropdown-menu {
    border-color: #3C8DBC;
    border-style: solid;
    border-width: 2px;
    padding: 2px !important;
}

div.dt-button-collection.fixed.five-column {
  margin-left: -375px;
}
div.dt-button-collection.five-column {
  width: 750px;
}
div.dt-button-collection.five-column > :last-child {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  -ms-column-count: 5;
  -o-column-count: 5;
  column-count: 5;
}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

/*
@media (max-width: 992px) {
    .scrollable-menu {
        height: auto;
        max-height: 200px;
        overflow-x: hidden;
    }
}
*/

.dropdown-menu>li>a>.glyphicon, .dropdown-menu>li>a>.fa, .dropdown-menu>li>a>.ion {
    width: 20px;
    margin-right: 0px;
}

.pull-right > .btn-sm {
    margin-top: 2px;
}

td > .btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

td p {
    margin: 0;
}

.detail_note {
    background-color: #d9e9f3;
    padding: 3px 6px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #3C8DBC;
    color: #3C8DBC;
    margin: 3px 2px;
}

.disabled {
    cursor: not-allowed !important;
    color: #ccc;
}

.yadcf-filter,
.yadcf-filter-range-date,
.yadcf-filter-range,
.chosen-container.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices li.search-field input[type="text"],
.chosen-container-multi .chosen-choices li.search-field input[type="select"] {
    width: 100%;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 4px;
    padding-right: 0px;
    
}

.inuse,
.ui-slider-range .inuse,
.yadcf-filter-range-number-slider .inuse,
.inuse + .select2-container .select2-selection {
    color: black;
    background: yellow;
    font-weight: 600;
}


.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 21px;
}

.form-group .select2-container .select2-selection--single {
    height: 34px;
}

.select2-container--default .select2-selection--single {
    /*background-color: #3c8dbc;*/
    border: 1px solid #3c8dbc;
    padding-left: 4px;
    padding-right: 18px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    line-height: 1;
    min-height: 28px;
    font: inherit;
    font-weight: normal;
    font-size: 14px;
    color: black;
    background-color: #FFF;
    border: 1px solid #3c8dbc;
    border-radius: 4px;
    padding-left: 2px;
    width: 100%;
}

.select2-container--default .select2-selection--multiple {
    cursor: text;
    line-height: 1;
    min-height: 28px;
    font: inherit;
    font-weight: normal;
    font-size: 14px;
    color: black;
    background-color: #FFF;
    border: 1px solid #3c8dbc;
    border-radius: 4px;
    width: 100%;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 2px;
}

.select2-results__option {
    white-space: pre-line;
}

.select2-container .select2-search--inline .select2-search__field {
    box-sizing: border-box;
    border: none;
    font-size: 100%;
    margin: 0;
    padding: 5px 5px 0px 5px;
    vertical-align: middle;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #3B8EBC;
    border: none;
    font-weight: normal;
    color: white;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
    padding-right: 4px;
}

.select2 {
    width: 100%;
/*    min-width: 100px;*/
/*    max-width: 300px;*/
}

.select2 .select2-search--dropdown {
    padding: 0;
}

.btn.disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}

.alert-margin {
    margin: 5px 20px;
}

.yes-row {
    background-color: #449d4433;
}
.yes-row:hover td{
    background-color: #449d4466;
}
.no-row {
    background-color: #c9302c33;
}
.no-row:hover td {
    background-color: #c9302c66;
}

table tr.heading-team-main th {
    text-align: center;
    padding-left: 15px;
    font-size: 110%;
    background-color: #437FAB77;
}

table tr.heading-team-sub th {
    background-color: #437FAB33;
}

.pagebreak {
    page-break-before: always;
} /* page-break-after works, as well */


tr.danger-green td {
  background-color: #94ff99;
}
tr.danger-green:hover td {
  background-color: #94ff9999;
}
tr.danger-amber td {
  background-color: #fce895;
}
tr.danger-amber:hover td {
  background-color: #fce89599;
}
tr.danger-red td {
  background-color: #ff9994;
}
tr.danger-red:hover td {
  background-color: #ff999499;
}

tr.traffic-light-row:hover td {
    background-color: #ffffff66;
}

table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected, tr.selected {
    background-color: #B0BED9;
}

/* --- COLOR 0 (Very Light Blue) --- */
.color-0-no-hover        { background-color: #F5F9FC; }
td.color-0, th.color-0   { background-color: #F5F9FC !important; }
tr:hover td.color-0      { background-color: #EFF5FA; }
tr.selected td.color-0   { background-color: #C0DAEC; }

/* --- COLOR 1 (Light Green) --- */
.color-1-no-hover        { background-color: #C0FDCC; }
td.color-1, th.color-1   { background-color: #C0FDCC !important; }
tr:hover td.color-1      { background-color: #C0FDCC99; }
tr.selected td.color-1   { background-color: #B8DED3; }

/* --- COLOR 2 (Light Yellow) --- */
.color-2-no-hover        { background-color: #FCFDC0; }
td.color-2, th.color-2   { background-color: #FCFDC0 !important; }
tr:hover td.color-2      { background-color: #FCFDC099; }
tr.selected td.color-2   { background-color: #D6DECD; }

/* --- COLOR 3 (Light Periwinkle) --- */
.color-3-no-hover        { background-color: #D0D7FF; }
td.color-3, th.color-3   { background-color: #D0D7FF !important; }
tr:hover td.color-3      { background-color: #D0D7FF99; }
tr.selected td.color-3   { background-color: #C0CBEC; }

/* --- COLOR 4 (Light Purple) --- */
.color-4-no-hover        { background-color: #F4C7FC; }
td.color-4, th.color-4   { background-color: #F4C7FC !important; }
tr:hover td.color-4      { background-color: #F4C7FC99; }
tr.selected td.color-4   { background-color: #D2C3EB; }

/* --- COLOR 5 (Light Pink/Red) --- */
.color-5-no-hover        { background-color: #FED8D8; }
td.color-5, th.color-5   { background-color: #FED8D8 !important; }
tr:hover td.color-5      { background-color: #FED8D899; }
tr.selected td.color-5   { background-color: #D6B8C5; }

/* --- COLOR 6 (Light Peach/Orange) --- NEW */
.color-6-no-hover        { background-color: #FFE6C0; }
td.color-6, th.color-6   { background-color: #FFE6C0 !important; }
tr:hover td.color-6      { background-color: #FFE6C099; }
tr.selected td.color-6   { background-color: #D6C2A5; }

.color-grey {
    background-color: #ECF0F5 !important;
}
tr:hover td.color-grey{
    background-color: #ECF0F599;
}
tr.selected .color-grey {
    background-color: #ECF0F5
}

/* logout form in navbar */
.navbar-nav > li > form {
    display: block;
    padding: 10px 8px;
    position: relative;
}

/* change padding of table cells */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 2px 4px;
}
/* move glyphicons up to match less padding */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    top: 3px;
}

.box-header>.fa, .box-header>.glyphicon, .box-header>.ion, .box-header .box-title {
    font-size: 16px;
}

/* datatables in box body */
.box-body {
    padding: 0 4px 2px 4px;
}

.box-header {
    padding: 4px 8px;
}

.box {
    margin-bottom: 15px;
}

.content-header {
    padding: 5px 15px;
}

.content-header > .breadcrumb {
    top: 0px;
}

.content {
    padding-top: 0px;
}

.content-header > h1 {
    font-size: 20px;
}

.btn-box-tool {
    padding: 1px 5px;
}

.btn-group {
    margin: 2px;
}

.btn-group-checkbox {
    margin: 0px 2px;
}

.btn-group-sm>.btn, .btn-sm {
    padding: 4px 8px;
}

.dataTable > tbody > tr > td .btn-group {
    margin: 0px;
}

.dataTable > tbody > tr > td .btn-xs {
   /* display:inline-block;
    padding: 0px 5px; 
    font-size: 10px;
    line-height: 1.5; */
}
    
.box-search {
    margin-bottom: 0;
    border-radius: 0px 0px 3px 3px;
    box-shadow: 0 0 0;
}

.trader-link {
    overflow: hidden;
}

.dataTable tbody tr {
    height: 28px;
}

.table-bordered {
    /* if there is a bottom border then a scrollbar appears on scrollable dts */
    border-bottom: 0; 
    /*border-bottom-width: 1px;*/
}

.text-nowrap {
    white-space: nowrap;
}

tfoot input {
    width: 100%;
    padding: 2px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-weight: normal;
    height: 80%;
}

tfoot.foothead {
    /* move datatable row searches to the top */
    display: table-header-group !important;
}

/* responsive "+" icon /* responsive "+" icon - no longer needed after responsive 2.4 update
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
    top: 3px;
}*/

.panel-heading {
    padding: 4px 8px;
}

.panel {
    margin: 0px;
}

.panel-table {
    margin-bottom: 10px;
}

.panel-table > table > tbody > tr > td,
.panel-table > table > tbody > tr > th {
    border-top: 1px solid #337AB7;
    padding: 4px;
} 

.panel-table > table > tbody > tr > th {
    text-align: right;
}

.panel-body {
    padding: 10px; 
}

.level-2 {
    z-index: 2000 !important;
}
.level-3 {
    z-index: 3000 !important;
}

.modal-header, .modal-footer{
    padding: 5px 15px;
}

.modal-header {
    cursor: -webkit-grab;
    cursor: grab;
}

.modal-body {
    padding: 10px;
}

.modal-primary .modal-body {
    background-color: #fff !important;
    color: #000 !important;
}

.modal-header .close {
    margin-top: 2px;
}
.alert, .box {
    margin-top: 5px;
    margin-bottom: 5px;
}

.example-modal .modal {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    display: block;
    z-index: 1;
}

.example-modal .modal {
  background: transparent !important;
}

.control-sidebar-bg, .control-sidebar {
/*    right: -100%;
    width: 100%; 100% covers the main left menu*/
    right: -55%;
    max-width: 700px;
    width: 55%;
}
 .control-sidebar-full {
/*    right: -100%;
    width: 100%;*/
    right: 0%;
    max-width: unset;
    width: 90%;
}

.control-sidebar .tab-pane {
    border: 2px solid #3C8DBC;
    border-radius: 5px !important;
    padding: 10px;
    background-color: white;
    color: black;
}

.control-sidebar-tabs {
    font-size: 125%;
    font-weight: 600;
}                  

.control-sidebar-dark .table{
    color: black;
}

div.dataTables_processing {
    /* display: block !important; <--- add if testing */
    z-index: 100000;
    top: 50px !important;
    left: 50% !important;
    width: 300px !important;
    height: 100px;
    background-color: white;
    border-width: 3px;
    border-color: #3C8DBC;
    color: #3C8DBC;
    font-weight: 600;
    font-size: 200%;
    padding: 12px 6px !important;
}

div.dataTables_processing>div:last-child {
    height: 0px;
    margin: 4px auto;
}

.form-group {
    margin-bottom: 5px;
}

.form-control {
    padding: 3px 6px;
    font-size: 14px;
}

form > hr {
    margin-top: 8px;
    margin-bottom: 0px;
}

form > h4 {
    font-weight: 700;
    font-size: 14px;
}

.info-box-text {
    text-transform: none;
}
.info-box-icon-right {
    float: right;
}
.info-box {
    margin-bottom: 10px;
}
.info-box-content {
    padding: 2px 8px;
}

.info-box .progress {
    height: 15px;
}

.hide_buttons {
    display: inline;
}

.hide_buttons > input { /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}

.hide_buttons > input + span{ /* IMAGE STYLES */
    cursor: pointer;
}

.hide_buttons > input:checked + span{
    /* Checked Styles */
    opacity: 1.0;
}

.hide_buttons > input:not(:checked) + span{
    /* Explicit Unchecked Styles */
    opacity: 0.1;
}

.td-indented {
    padding: 1px !important;
    padding-left: 23px !important;
    padding-right: 2px !important;
}

.box-indented {
    /* margin-top: 0px; */
    /* margin-bottom: 0px; */
    border: 1px solid #d2d6de;
    margin: 1px;
    /* border-right: 0; */
    border-radius: 5px;
}

.box-indented > .box-header {
    padding: 3px !important;
}

.box-indented  > .box-header > .box-title {
    font-size: 16px !important;
}

.box-header .box-title {
    font-weight: bold;
}

.box-indented  > .table-responsive {
    margin-bottom: 0px;
}

.fa-spin-reverse {
    -webkit-animation: fa-spin 2s infinite linear reverse;
            animation: fa-spin 2s infinite linear reverse;
}

.right {
    text-align: right;
}

.centered {
    text-align: center;
}

.right-val{
    padding-left: 10px !important;
}

.wallfixed {
    min-width: 60px;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  height: auto;
  padding: 4px 8px;
  text-align: left;
}

.navbar-nav > .user-menu > .dropdown-menu {
  padding: 0;
}

.recent-trader_list {
    border-color: #4A8EBE !important;
    border-width: 2px !important;
    border-top: 0 !important;
    padding-top: 0;
}
.recent-trader_list > li > a,
.recent-trader_list > li > span {
    color: #4A8EBE !important;
    font-size: 110% !important;
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
}
.recent-trader_list > li > span {
    background-color: #D9EDF7;
    /*border-bottom: 2px solid #4A8EBE;*/
    color: #4A8EBE !important;
    padding-top: 3px;
    font-weight: 550;
}

.label-btn {
    pointer-events: none;
    text-align: right;
}
.btn-static {
    pointer-events: none;
}

.sitemap {
    list-style-type: none;
}

.sitemap > li > span,
.sitemap > li > a > span {
    font-size: 120%;
}

.sitemap > li > i,
.sitemap > li > a > i {
    text-align: left;
    width: 27px;
    font-size: 120%;
}

.sitemap > li > span {
    padding-left: 0;
}

.sitemap-title {
    padding-left: 27px;
}

.fake-label {
    text-align: right;
    height: 30px;
    padding-top: 9px;
    font-weight: normal;
    font-size: 85%;
    padding-right: 3px;
    padding-left: 3px;
}

.btn-cust-acc {
    padding-top: 0px;
}

.modal-trader, .modal-transaction, .pointer {
    cursor: pointer;
}
.pointer > a {
    cursor: pointer !important;
}

.trader_action_row > td {
    cursor: pointer;
    text-align: center;
}

.dropdown-active {
    background-color: #3c8dbc;
    border-color: #367fa9;
    color: #fff !important;
}

.popover-title .close {
    line-height: 0.7 !important;
}

.popover{
    max-width: 100%;
}

span.popjson{
    cursor: help;
    border-bottom: 1px dotted;
}

.help-hover {
    cursor: help;
}

.fakelink, .origin_ref, span.popclick{
    color: #3c8dbc;
    /*text-decoration: underline;*/
    cursor: pointer;
}

.flot-inv-content {
    width: 100%;
    height: 630px;
    margin: 0 auto;
    padding: 0;
}

.flot-inv-chart {
    height: 600px;
    width: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

.flot-inv-container {
    width: 100%;
    height: 630px;
    padding: 10px;
    margin: 0;
}

.flot-inv-legend {
    width: 100%;
    padding-left: 0px;
    font-size: 14px;
    line-height: 1.2em;
}


.flot-content {
    width: 100%;
    height: 330px;
    margin: 0 auto;
    padding: 0;
}

.flot-chart-supp {
    height: 450px;
    width: 100%;
    font-size: 18px;
    line-height: 1.2em;
}
.flot-chart {
    height: 300px;
    width: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

.flot-legend {
    height: 30px;
    width: 100%;
    padding-left: 50px;
    font-size: 14px;
    line-height: 1.2em;
}
/* flot legend table */
.legendLabel {
    padding-left: 3px;
    padding-right: 10px;
}

.flot-container {
    width: 100%;
    height: 330px;
    padding: 0;
    margin: 0;
}

.target_row_opening td, .target_row_closing td{
    background-color: #81B5D433 !important;
}
.target_row_open td{
    background-color: #81B5D466 !important;
}
.target_row_open tr:hover td {
    background-color: #3C8DBC !important;
}

.table-row-inject {
    margin-bottom: 0;
    border-top: 0 !important;
    padding: 0 !important;
}

.table-row-inject td {
    background-color: #3C8DBC11;
    border-top-width: 0 !important;
}

.table-row-inject tr td:first-child {
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #81B5D466;
}

/*
    old method read
    .table-row-inject tr:last-child td {
    but this effected all rows of a table nested within the final tr of parent
    had to style up the final row to close it off cleanly
*/
.table-row-inject .final-injection-row td {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #81B5D466;
}

.table-row-inject tr td:last-child {
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #81B5D466;
}

.perc-color {
    padding: 0px 3px;
    font-size: 80%;
    font-weight: bold;
    text-align: right;
    border-radius: 3px;
    border-style: solid;
    border-width: 3px;
    min-width: 35px;
}

.btn-report-period {
    text-align: left;
    padding-left: 10px;
}

.background-element {
    font-size: 100%;
    text-align: right;
    margin-left: 5px;
    color: white;
    opacity: 1;
}




table.dataTable thead th,
table.dataTable thead td {
    padding: 3px 0px 3px 3px;
}

/*
 * Sort styling
 */
table.dataTable thead th {
    position: relative;
    background-image: none !important; /* Remove the DataTables bootstrap integration styling */
    border-bottom: 1px solid #3C8DBC;
    vertical-align: bottom;
}

table.dataTable tfoot th {
    border-top: 1px solid #3C8DBC;
}

table.dataTable tfoot.foothead th {
    border-top: 0;
    border-bottom: 1px solid #3C8DBC99;
}

table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting {
    padding-right: 18px;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute;
    top: 0px;
    right: 2px;
    display: block;
    font-family: "Font Awesome 5 Pro";
}

table.dataTable thead th.sorting:after {
    content: "\f0dc";
    color: #bbb;
    opacity: 1;
    font-size: 1.2em;
    padding-top: 0;
}
table.dataTable thead th.sorting_asc:after {
    content: "\f0de";
    color: black;
    opacity: 1;
    font-size: 1.2em;
}
table.dataTable thead th.sorting_desc:after {
    content: "\f0dd";
    color: black;
    opacity: 1;
    font-size: 1.2em;
}

div.dataTables_scrollBody table.dataTable thead th.sorting:after,
div.dataTables_scrollBody table.dataTable thead th.sorting_asc:after,
div.dataTables_scrollBody table.dataTable thead th.sorting_desc:after {
    content: "";
}

/* In Bootstrap and Foundation the padding top is a little different from the DataTables stylesheet */
table.table thead th.sorting:after,
table.table thead th.sorting_asc:after,
table.table thead th.sorting_desc:after {
    top: 0px;
}

.border-none {
    border: 0px !important;
}
.border-left {
    border-left: 1px solid #f4f4f4;
}

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    /* width: 350px;  */
}

.alert-flyer-confirm {
    margin: 14px !important;
}

.files-table > tbody > tr:hover {
    cursor: pointer;
}

.files-table > tbody > tr > td {
    padding: 5px 10px;
}

.files-title {
    font-weight: bold;
    font-size: 110%;
}

@media only screen and (min-width: 1202px) {
    .modal-xl {
        width: 1200px;
    }
    .modal-manual {
        width: 870px;
    }
}

.modal-xxl {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 99%;
}


.td-full-row {
    text-align: center;
    font-weight: bold;
    background-color: #3C8DBC66;
}

.row-highlight td {
    font-weight: bold;
    background-color: #3C8DBC22;
}

.btn-manual {
    cursor: pointer;
    color: #00A6CF;
    margin-left: 5px;
    margin-right: 5px;
}

h1 > .btn-manual {
    font-size: 80%;
}

.abbr {
    cursor: help;
    border-bottom: 1px dotted #4A8EBE !important;
}

.box-header > .box-tools {
    right: 5px;
    top: 1px;
}

.customer-reports {
    border-radius: 3px;
    border: 1px solid #4A8EBE44;
    padding: 2px 4px;
    background-color: #4A8EBE22;
}

.panel.with-nav-tabs .nav>li>a {
    position: relative;
    display: block;
    padding: 5px 10px;
}

.panel.with-nav-tabs .panel-heading {
    padding: 3px 3px 0 3px;
}
.panel.with-nav-tabs .nav-tabs {
	border-bottom: none;
}
.nav-tab-question {
	line-height:150%;
        list-style-type: none;
}
.tab-pane {
    min-height:650px;
}
.panel.with-nav-tabs .nav-justified {
    margin-bottom: -1px;
}

.nav-tier-2 {
    margin-bottom: -1px;
}

.nav-tier-2 > li > a {
    position: relative;
    display: block;
    border-style: solid;
    border-color: #4A8EBE;
    border-width: 0px 0px 2px 0px;
}
.nav-tier-2 > li.active > a {
    border-style: solid;
    border-color: #4A8EBE;
    border-width: 2px 2px 0px 2px;
}

.tab-pane {
    border: 1px solid #BCE8F1;
    border-radius: 5px 5px 5px 5px;
}

.tab-pane-tab {
    padding: 0 5px;
}

.tab-pane.active:first-child {
  border-radius: 0 5px 5px 5px;
}

/********************************************************************/
/*** PANEL DEFAULT ***/
.with-nav-tabs.panel-default .nav-tabs > li > a,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
    color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > .open > a,
.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
    color: #777;
	background-color: #ddd;
	border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.active > a,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
	color: #555;
	background-color: #fff;
	border-color: #ddd;
	border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #f5f5f5;
    border-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #777;   
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #555;
}
/********************************************************************/
/*** PANEL PRIMARY ***/
.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
    color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
	color: #fff;
	background-color: #3071a9;
	border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
	color: #428bca;
        font-weight: bold;
	background-color: #fff;
	border-color: #428bca;
	border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #428bca;
    border-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #fff;   
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    background-color: #4a9fe9;
}
/********************************************************************/
/*** PANEL SUCCESS ***/
.with-nav-tabs.panel-success .nav-tabs > li > a,
.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
	color: #3c763d;
}
.with-nav-tabs.panel-success .nav-tabs > .open > a,
.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
	color: #3c763d;
	background-color: #d6e9c6;
	border-color: transparent;
}
.with-nav-tabs.panel-success .nav-tabs > li.active > a,
.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
	color: #3c763d;
	background-color: #fff;
	border-color: #d6e9c6;
	border-bottom-color: transparent;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #3c763d;   
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #d6e9c6;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #3c763d;
}
/********************************************************************/
/*** PANEL INFO ***/
.with-nav-tabs.panel-info .nav-tabs > li > a,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
	color: #31708f;
}
.with-nav-tabs.panel-info .nav-tabs > .open > a,
.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
	color: #31708f;
	background-color: #bce8f1;
	border-color: transparent;
}
.with-nav-tabs.panel-info .nav-tabs > li.active > a,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
	color: #31708f;
	background-color: #fff;
	border-color: #bce8f1;
	border-bottom-color: transparent;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #31708f;   
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #bce8f1;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #31708f;
}
/********************************************************************/
/*** PANEL WARNING ***/
.with-nav-tabs.panel-warning .nav-tabs > li > a,
.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
	color: #8a6d3b;
}
.with-nav-tabs.panel-warning .nav-tabs > .open > a,
.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
	color: #8a6d3b;
	background-color: #faebcc;
	border-color: transparent;
}
.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
	color: #8a6d3b;
	background-color: #fff;
	border-color: #faebcc;
	border-bottom-color: transparent;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #8a6d3b; 
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #faebcc;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #8a6d3b;
}
/********************************************************************/
/*** PANEL DANGER ***/
.with-nav-tabs.panel-danger .nav-tabs > li > a,
.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
	color: #a94442;
}
.with-nav-tabs.panel-danger .nav-tabs > .open > a,
.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
	color: #a94442;
	background-color: #ebccd1;
	border-color: transparent;
}
.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
	color: #a94442;
	background-color: #fff;
	border-color: #ebccd1;
	border-bottom-color: transparent;
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #f2dede; /* bg color */
    border-color: #ebccd1; /* border color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #a94442; /* normal text color */  
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #ebccd1; /* hover bg color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    color: #fff; /* active text color */
    background-color: #a94442; /* active bg color */
}

.phone_block {
    float: left;
    width: 23px;
    height: 23px;
    margin: 0;
    margin-right: 5px;
    border: 1px solid rgba(0, 0, 0, .2);
}

.static-note {
    margin: 4px 8px 8px 8px;
    padding: 10px;
    border-width: 1px;
    border-color: #4A8EBE;
    border-style: dashed;
    border-radius: 3px;
    font-size: 100%;
    font-weight: bold;
}

.border-rotate {
    margin: 4px 8px 8px 8px;
    padding: 10px;
    background: linear-gradient(90deg, #4A8EBE 50%, transparent 50%), linear-gradient(90deg, #4A8EBE 50%, transparent 50%), linear-gradient(0deg, #4A8EBE 50%, transparent 50%), linear-gradient(0deg, #4A8EBE 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right   top;
    animation: border-dance 1s 10 linear;
}
@keyframes border-dance {
    0% {
        background-position: left top, right bottom, left bottom, right   top;
    }
    100% {
        background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px;
    }
}

/* bring back burger */
.sidebar-toggle:before {
    font-weight: 900;
    font-family: "Font Awesome 5 Pro";
    font-size: 12px;
}

.btn > i.fa {
    font-size: 11px;
}

td > i.fa, td > span > i.fa {
    font-size: 13px;
}

.sidebar-menu>li>a>.far, .treeview-menu>li>a>.far, .dropdown-menu>li>a>.far,
.sidebar-menu>li>a>.fal, .treeview-menu>li>a>.fal, .dropdown-menu>li>a>.fal,
.sidebar-menu>li>a>.fad, .treeview-menu>li>a>.fad, .dropdown-menu>li>a>.fad {
    width: 20px;
    font-size: 13px;
    text-align: center;
}

.sidebar-menu>li>a {
    padding: 6px 8px 6px 12px;
    display: block;
}

/* get rid of annoying white line that appears after object */
object { 
    position: absolute; 
    top: -1px; 
    left: -1px;
    right: -1px;
    bottom: -1px;
    width: calc(100% + 3px); 
    height: calc(100% + 3px);
}

.form-fieldset > legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

.form-control-required {
    opacity:0.6;
    font-size: 13px;
    color: #D68910;
}

select ~ .form-control-feedback {
    margin-right: 10px;
}

select[multiple] ~ .form-control-feedback {
    margin-right: 0;
}

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}

.has-feedback.has-error .form-control-feedback.fa {
    line-height: 52px;
}

.has-feedback label~.form-control-feedback {
    /* Default was 25px but this broke inline radio buttons. 0 seems to work everywhere */
    top: 0px;
}

.help-block {
    /* font-weight: bold; */
}

.has-error {
    border: 1px solid #99000033;
    border-radius: 3px;
    padding: 10px 4px 2px;
    margin: 10px auto;
    background-color: #99000011;
}

.info-box-table {
    margin: 0 0 0px 0;
}
.info-box-table tr td, .info-box-table tr th {
    padding: 0px 2px;
}

.bodge {
    display: inline-block;
    min-width: 10px;
    padding: 1px 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    margin-top: 2px;
    vertical-align: top;
    background-color: white;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    color: #3c8dbc;
    border-color: #3c8dbc;
}
.bodge-red {
    color: red;
    border-color: red;
}
.bodge-yellow {
    color: olive;
    border-color: olive;
}
.bodge-green {
    color: green;
    border-color: green;
}
.bodge-orange {
    color: orange;
    border-color: orange;
}
.bodge-blue {
    color: blue;
    border-color: blue;
}
.bodge-purple {
    color: purple;
    border-color: purple;
}
.btn > .bodge {
    margin-top: 1px;
    background-color: LightYellow;
}
td > .bodge {
    margin-top: 4px;
}
.bodge-ticket {
    border-color: DarkBlue;
    color: DarkBlue;
    background-color: PeachPuff;
    margin-top: 3px !important;
    font-size: 14px;
    font-weight: 700;
    border-width: 1px;
    cursor: pointer;
}
.bodge-workflow {
    border-color: #2F2D49;
    color: #2F2D49;
    background-color: #cBc9c0;
    margin-top: 3px !important;
    font-size: 14px;
    font-weight: 600;
    border-width: 1px;
    cursor: pointer;
}
.bodge-workflow-status {
    margin-top: 3px !important;
    font-size: 14px;
    font-weight: 600;
    border-width: 1px;
}

table.workflow-quote-options th odd {
    background-color: #D9EDF7cc;
}
table.workflow-quote-options th {
    background-color: #D9EDF7ff;
}
table.workflow-quote-options td.odd {
    background-color: #D9EDF722;
}
table.workflow-quote-options td {
    background-color: #D9EDF755;
}

table.workflow-quote-options tbody tr td.workflow-highlight-cell-mega {
    background-color: #f4b6c266 !important;
}

th.workflow-highlight-cell,
tr.workflow-highlight-row th {
    background-color: #f6abb688 !important;
}

td.workflow-highlight-cell,
tr.workflow-highlight-row td {
    background-color: #f4b6c244 !important;
}

/*
    Below is a fix or the default behavour of the sort arrows
*/
/* 1. Ensure enough space on the RIGHT side so text doesn't overlap */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
    padding-left: 4px !important; /* Normal left padding */
    padding-right: 20px !important; /* Massive gap on the right for the arrows */
}

/* 2. Strip bottom positioning and pin them to the right */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after {
    bottom: auto !important; 
    right: 4px !important; /* Pins them to the right edge */
}

/* 3. Position the UP arrow at the top right */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before {
    top: 4px !important; 
}

/* 4. Position the DOWN arrow just beneath it */
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:after {
    top: 14px !important; /* Adjust this if the arrows overlap each other */
}

/* 1. Force BOTH arrows to the exact native resting opacity when dustbin is hovered */
table.dataTable thead > tr > th.yadcf-hovered:before,
table.dataTable thead > tr > th.yadcf-hovered:after {
    opacity: 0.125 !important; 
}

/* 2. If the column is sorted ASC (A-Z), keep the UP arrow at the native active opacity */
table.dataTable thead > tr > th.yadcf-hovered.sorting_asc:before {
    opacity: 0.6 !important; 
}

/* 3. If the column is sorted DESC (Z-A), keep the DOWN arrow at the native active opacity */
table.dataTable thead > tr > th.yadcf-hovered.sorting_desc:after {
    opacity: 0.6 !important; 
}