:root {
    /*--brand-primary: #2E71A6;*/
    /*--brand-primary: #1C2E4A;*/
    --brand-primary: #284169;
    --brand-primary-hover: #245d8a;
    --brand-secondary: #5B7C99;
    --brand-secondary-hover: #4A6880;
    --brand-tertiary: #6c757d; /* should be a shade of grey */
    --brand-alt01: #1B2A4A; /* dark navy for deep accents */
    --brand-alt02: #c8af81; /* just in case there are more colors but shouldn't be */
    --brand-logo: url(/images/brands/Dial800-400x120-NAVY.png); /* small logo for app header */
    --brand-logo-login: url(../images/Dial800LogoLG-WhiteTxt.png); /* larger logo for login */
    --brand-logo-height: 2.6rem; /* adjust size of logo */
    --brand-logo-width: 140px; /* adjust width of logo if needed - DO NOT EXCEED 170px */
    --brand-headerbar-topmargin: 2px; /* vertical logo adjustment on top headerbar if needed */
    --gradient-dark: #2E71A6; /* change if different from primary and secondary colors */
    --gradient-light: #6B8FAD; /* change if different from primary and secondary colors */
    --gradient-dark: #0b1f3a; /* change if different from primary and secondary colors */
    --gradient-light: #1C2E4A; /* change if different from primary and secondary colors */
    --brand-grid-pills-bg: #e8eef4; /* set pills in table grid background color */
    --brand-grid-pills-text: #1e293b; /* set pills in table grid text color */
    /*menu button adjustments for white label with their own button names */
    --cv-displayicon: inline-block; /* show/hide callview icon with display: none or inline-block */
    --ar-displayicon: inline-block; /* show/hide accuroute icon with display: none or inline-block */
    --rr-displayicon: inline-block; /* show/hide rapidrecall icon with display: none or inline-block */
    --cv-btnbottompad: 13px; /* adjusts callview button bottom positioning active line - 15px no icon or 13px with icon */
    --ar-btnbottompad: 13px; /* adjusts accuroute button bottom positioning active line - 15px no icon or 13px with icon */
    --rr-btnbottompad: 13px; /* adjusts rapidrecall button bottom positioning active line - 15px no icon or 13px with icon */
    --cv-displaybtnsubtext: inline-block; /* show/hide callview btn subtext with display: none; or inline-block */
    --ar-displaybtnsubtext: inline-block; /* show/hide accuroute btn subtext with display: none; or inline-block */
    --rr-displaybtnsubtext: inline-block; /* show/hide rapidrecall btn subtext with display: none; or inline-block */
    --cv-displaybtntext: inline-block; /* show/hide callview button main text */
    --ar-displaybtntext: inline-block; /* show/hide accuroute button main text */
    --rr-displaybtntext: inline-block; /* show/hide rapidrecall button main text */
    --cv-btntext: ""; /* the new brand button one text */
    --ar-btntext: ""; /* the new brand button two text */
    --rr-btntext: ""; /* the new brand button three text */
    /*new updates */
    --brand-headerbar-icons: #A0AEC0 !important;
    --brand-headerbar-icons-hover: #c3cbd6 !important;
    --brand-marketing: #1C2E4A;
    --color-accent: #E9563A;
    --color-accent-hover: #d44a30;
}

.theme-ringsquared {
    --brand-primary: #00B4D8;
    --brand-primary-hover: #009FBF;
    --brand-secondary: #150044;
    --brand-secondary-hover: #2E0091;
    --brand-tertiary: #808285; /* should be a shade of grey */
    --brand-alt01: black; /* just in case there are more colors but shouldn't be */
    --brand-alt02: skyblue; /* just in case there are more colors but shouldn't be */
    --brand-logo: url(/images/brands/RS-Logo-Blue-Dark.png);
    --brand-logo-login: url(../images/brands/RS-Logo-White-LG.png);
    --brand-logo-height: 2.6rem; /* adjust size of logo */
    --brand-logo-width: 170px; /* adjust width of logo if needed - DO NOT EXCEED 170px */
    --brand-headerbar-topmargin: 1px; /* vertical logo adjustment on top headerbar if needed */
    --gradient-dark: #00B4D8; /* change if different from primary and secondary colors */
    --gradient-light: skyblue; /* change if different from primary and secondary colors */
    /* hiding login messaging elements specific to us */
    --hide: none; /* hide login elements with display none removing vertical space */
    --brand-grid-pills-bg: #f0f3f5; /* set pills in table grid background color */
    --brand-grid-pills-text: #333; /* set pills in table grid text color */
    /*menu button adjustments for white label with their own button names */
    --cv-displayicon: inline-block; /* show/hide callview icon with display: none or inline-block */
    --ar-displayicon: inline-block; /* show/hide accuroute icon with display: none or inline-block */
    --rr-displayicon: inline-block; /* show/hide rapidrecall icon with display: none or inline-block */
    --cv-btnbottompad: 13px; /* adjusts callview button bottom positioning active line - 15px no icon or 13px with icon */
    --ar-btnbottompad: 13px; /* adjusts accuroute button bottom positioning active line - 15px no icon or 13px with icon */
    --rr-btnbottompad: 13px; /* adjusts rapidrecall button bottom positioning active line - 15px no icon or 13px with icon */
    --cv-displaybtnsubtext: inline-block; /* show/hide callview btn subtext with display: none; or inline-block */
    --ar-displaybtnsubtext: inline-block; /* show/hide accuroute btn subtext with display: none; or inline-block */
    --rr-displaybtnsubtext: inline-block; /* show/hide rapidrecall btn subtext with display: none; or inline-block */
    --cv-displaybtntext: inline-block; /* show/hide callview button main text */
    --ar-displaybtntext: inline-block; /* show/hide accuroute button main text */
    --rr-displaybtntext: inline-block; /* show/hide rapidrecall button main text */
    --cv-btntext: ""; /* the new brand button one text */
    --ar-btntext: ""; /* the new brand button two text */
    --rr-btntext: ""; /* the new brand button three text */
}


/* styles using variables */

.btn-brand, .btn-primary, .btn-callview {
    color: #fff !important;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
    .btn-brand:hover, .btn-brand.active, .btn-primary:hover, .btn-primary.active, .btn-callview:hover, .btn-callview.active {
        background-color: var(--brand-primary-hover);
        border-color: var(--brand-primary-hover);
        color: white;
    }
    .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
        color: #fff;
        background-color: var(--brand-primary-hover); 
        border-color: var(--brand-primary-hover); 
    }
.btn-brand:focus, .btn-primary.focus, .btn-primary:focus, .btn-callview:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(46, 113, 166, 0.4) !important;
}
    .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
        color: #fff;
        background-color: var(--brand-primary-hover);
        border-color: var(--brand-primary-hover);
    }
.btn-brand-light {
    color: #fff;
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

    .btn-brand-light:hover, .btn-brand-light:focus {
        color: #fff;
        background-color: var(--brand-secondary-hover);
        border-color: var(--brand-secondary-hover);
    }
    .btn-brand-light.active {
        color: #fff;
        background-color: var(--brand-primary);
        border-color: var(--brand-primary-hover);
    }
    /*.btn-purple {
        background-color: var(--brand-primary) !important;
        border-color: var(--brand-primary) !important;
    }

    .btn-purple:hover {
        background-color: #c64c35 !important;
    }*/
    .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
        /*outline: 5px auto -webkit-focus-ring-color;*/
        /*outline-offset: -2px;*/
        outline: none;
        outline-offset: 0;
        /*background-color: #c64c35!important;*/
    }
.btn.btn-link {
    color: var(--brand-primary);
    text-decoration: none;
    background-color: transparent;
}

    .btn.btn-link:hover, .btn.btn-link:focus, .btn.btn-link:active {
        color: #333; /* or #666; or #b7442e; */
        text-decoration: none;
    }

.btn-grey {
    background-color: var(--brand-tertiary);
    color: white;
    border-radius: 2px;
}
    .btn-grey:hover {
        background-color: var(--brand-tertiary);
        color: white;
    }
.text-tertiary {
    color: var(--brand-tertiary);
}


.nav-tabs > li.active > a.btn-link, .nav-tabs > li.active > a.btn-link:hover, .nav-tabs > li.active > a.btn-link:focus {
    color: var(--brand-primary);
}
/*    .btn.link-dark {  }
    .btn.link-dark:hover, .btn.btn-link:hover, .btn.link-dark:focus,
    .btn.btn-link:focus, .btn.link-dark:active, .btn.btn-link:active {
    }
*/

a.text-brand {
    color: var(--brand-primary);
}
    a.text-brand:hover {
        color: var(--brand-primary-hover);
    }

.bg-primary {
    background-color: var(--brand-primary)!important;
}
.bg-brand {
    background-color: var(--brand-primary)!important;
    color: white;
}
.bg-brand-grey {
    background-color: var(--brand-tertiary);
    color: white;
}
.bg-brand-light { 
    background-color: var(--brand-secondary); 
}
.bg-brand-marketing {
    background-color: var(--brand-marketing) !important;
}
.brand-marketing {
    color: var(--brand-marketing) !important;
}

a.link-dark { color: var(--brand-primary); }
a.link-dark:hover { color: var(--brand-primary-hover); }
a.link-dark.accuroute, a.link-dark.callview, a.link-dark.rapidrecall {
    color: var(--brand-primary);
}

/* pagers */
.pager-sr.purple, pager-sr.callview, a.pager-sr.callview {
    color: var(--brand-primary);
}
.pageActive.purple, .pageActive.callview {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}
#MainContent_rptPaging > tbody > tr > td > a:hover {
    color: var(--brand-primary);
}
    /* text styles */
    .text-primary, .text-primary-i, .text-accuroute, .text-purple, .text-blue { color: var(--brand-primary); }
    .text-purple:hover, .text-purple:active, .text-purple:focus {
        color: var(--brand-primary);
        text-decoration: none !important;
    }

/*.text-callview { color: var(--brand-primary) !important; }*/
.text-callview { color: var(--brand-secondary) !important; } /* uses brand secondary */
.text-brand { color: var(--brand-primary); }
.text-brand-light, a.text-brand-light {
    color: var(--brand-secondary);
}
    .text-brand-light:hover, a.text-brand-light:hover {
        color: var(--brand-secondary-hover);
    }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: var(--brand-primary);
}

.alert-brand {
    background-color: var(--brand-grid-pills-bg);
    color: var(--brand-grid-pills-text);
}

.alert-highlight {
    background-color: var(--highlight);
    color: white;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff !important;
    border-color: var(--brand-primary);
    background-color: var(--brand-primary);
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--brand-primary);
/*    box-shadow: 0 0 0 0.2rem rgba(233, 86, 58, 0.4) !important; */}

/* checkbox and radio button styles */
input[type=checkbox]:focus, input[type=radio]:focus {
    outline-color: var(--brand-primary);
    outline: -webkit-focus-ring-color var(--brand-primary) 1px !important;
    outline: var(--brand-primary) auto 1px !important;
}

input[type=checkbox]:not(.d800-switch) {
    height: 1.5rem;
    margin-top: -0.1rem!important;
    margin-right: .5rem; /* added for real-time events checkboxes */
}

    input[type=checkbox]:focus {
        border: 1px solid var(--brand-primary);
    }

    input[type=checkbox]:checked:after {
        background-color: var(--brand-primary);
    }
input[type=radio] {
   /*height: 1.4rem;*/
   /* margin-top: .3rem;*/
    margin-right: .25rem; /* added for real-time events checkboxes was .5rem */
}
/* for adjusting radios & checkboxes - see accuroute>routing>designer>actionmodals>locationmenumodal */
input[type=radio] {
    height: 1.4rem;
    /* margin-top: .3rem; */
    margin-right: .25rem;
}
input[type='radio']:checked:after {
    background-color: var(--brand-primary);
    animation: effect 150ms ease-in;
    padding: 1px 0 0 1px;
    border-radius: 50%;
    top: 3px; /* was -2px */
    left: -2px;
}

/* replace custom checkbox color for brand */
input[type="checkbox"]:checked + .label-text:before, input[type="radio"]:checked + .label-text:before {
    color: var(--brand-primary);
}
input[type='checkbox']:not(.d800-switch):after, input[type='radio']:not(.d800-switch):after {
    width: 16px;
    height: 16px;
    position: relative;
    content: '';
    display: inline-block;
    visibility: visible;
    cursor: pointer;
}
input[type='checkbox']:not(.d800-switch):checked:after {
    background-color: var(--brand-primary);
    /*color: var(--brand-primary)!important;*/
    content: "\f00c";
    font-family: "Font Awesome 7 Pro";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 0.9;
    -webkit-font-smoothing: antialiased;
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    margin-right: 5px;
    color: white;
    animation: effect 150ms ease-in;
    padding: 2px;
    border-radius: 2px;
    margin-top: 3px;
}
/* original code */
/*input[type='checkbox']:checked:after {
    background-color: var(--brand-primary);
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    width: 1.2em;*/ /* was 1.1em - for other checkboxes? */
    /*height: 1.2em;*/ /* was 1.1em - for other checkboxes? */
    /*display: inline-block;
    margin-right: 5px;
    color: white;
    animation: effect 150ms ease-in;
    padding: 2px 0 0 2px;*/ /* 1px 0 0 1px - for other checkboxes? */
    /*border-radius: 3px;
}*/

.form-check-input.d800-switch:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.form-switch .form-check-input.d800-switch:focus {
    box-shadow: rgba(240, 137, 117, .25)!important;
    /*background-image: none;*/
}
.form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(240, 137, 117, .5) !important; /* hide for white-label since vars don't work */
}

/* select2 bootstrap4 overrides */
.select2-container--bootstrap4 .select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
    background-color: rgba(233, 86, 58, 0.75);
    color: white;
}
/*.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--brand-primary);
    -webkit-box-shadow: 0 0 0 0.2rem rgba(233, 86, 58, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(233, 86, 58, 0.25);
}*/
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--brand-primary);
    -webkit-box-shadow: none;
    box-shadow: none;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand-primary);
    color: white;
}
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand-primary);
    color: #fff;
}
.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(233 86 58 / 25%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(233 86 58 / 25%);
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    border-color: var(--brand-primary);
}
.select2-container--bootstrap .select2-dropdown {
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    border-color: var(--brand-primary);
}
/* header branding */
.navbar-brand {
    background-image: var(--brand-logo);
    background-size: contain;
    margin-top: var(--brand-headerbar-topmargin);
    height: var(--brand-logo-height);
    width: var(--brand-logo-width);
}
/* sidebar change gradient for brand */
.sidebar .load-filter {
    background: var(--gradient-light);
    background: -moz-linear-gradient(130deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    background: -webkit-linear-gradient(130deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    background: linear-gradient(130deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--gradient-light)",endColorstr="var(--gradient-dark)",GradientType=1);
}
#sidebarRight .user-info {
    background: var(--gradient-light);
    background: -moz-linear-gradient(130deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    background: -webkit-linear-gradient(130deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    background: linear-gradient(130deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--gradient-light)",endColorstr="var(--gradient-dark)",GradientType=1);
}
.sidebar .nav > li > a:focus, .sidebar .nav > li > a.active {
background-color: #252c35;
border-left-color: var(--brand-primary);
}
.sidebar .nav > li > a:hover i, .sidebar .nav > li > a:focus i, .sidebar .nav > li > a.active i {
    color: var(--brand-primary);
}
.sidebar-dashicons > a:hover i, .sidebar-dashicons > a:focus i, .sidebar-dashicons > a.active i {
    color: var(--brand-primary);
}
/* login page branding */
.login-logo {
    background-image: var(--brand-logo-login);
    background-repeat: no-repeat;
    background-size: 15rem;
    height: 7rem;
    margin: 0 auto;
}
/* tint background color */
.body-brand {
    min-height: 100vh;
    position: relative;
    margin: 0;
    padding-bottom: 175px; /*height of the footer*/
    box-sizing: border-box;
    /* to show background image */
    /*background: url('../images/plexus-abstract-network-titles-cinematic-background-37.png') no-repeat center center fixed;
    height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: left center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(180 40 10 / 0.80);
    background-blend-mode: luminosity;*/ /* multiply is darker */
}
.disclaimer { 
    color: #ededed;
    background: rgba(0,0,0,.4)!important;
    padding-top: 5px;
}
.disclaimer-signin {
    color: #ededed;
    background: rgba(0,0,0,.05) !important;
    padding-top: 5px;
    border: none;
}
.mb-5 { margin-bottom: 5px!important; }
/* new login brand mods */
div.loginBox.newBrand {
    margin: 0 auto;
    background-color: white!important;
    padding: 2em 2em 1em 2em!important;
    width: 25em;
    border-radius: 10px;
    /*box-shadow: 0 0 18px #999!important;*/
    border-radius: 15px !important;
    color: #999;
}
.centerBackground {
    /*background-color: var(--brand-primary);*/
    background-color: rgba(129,130,133,0.8);
    max-width: 35em;
    border-radius: 10px !important;
    padding: .75em 1rem;
}
.loginCredentials.newBrand {
    font-size: 2em!important;
    font-weight: bold;
    text-shadow: none;
    color: var(--brand-primary);
    text-align: center;
}
.form-control.newBrand {
    cursor: auto;
    padding: .5rem;
    background: rgb(244, 244, 244);
    color: rgb(54, 54, 54);
    width: 100%;
    font-style: italic;
    border: 2px solid rgb(244, 244, 244);
    box-sizing: border-box;
    border-radius: 15px !important;
}
    .form-control.newBrand:focus {
        border-color: var(--brand-primary);
    }
#btnLogon.newBrand, #btnUsername.newBrand, #inputPassword.newBrand {
    border-radius: 2em !important;
    box-shadow: none !important;
    padding: 0.5rem 1rem;
}
.signinfooter {
    position: absolute;
    bottom: 0;
    height: 175px;
    width: 100%;
    /* hiding disclamer */
    display: none;
}
p.msgUpdate {
    background: rgba(129,130,133,.3);
    padding: 5px 0;
    font-size: 1.2em;
    border-radius: 10px !important;
    display: var(--hide);
}
p.msgBottom {
    background: rgba(129,130,133,.2);
    padding: 5px 0;
    border-radius: 10px !important;
    opacity: var(--opacity);
}
.joinNow {
    padding: 3px 6px;
    border-radius: 15px !important;
}
.text-white { color: white; }
.ptb-5 { padding: 5px 0 13px 0; }
/* accuroute specific */
.nav-tabs.d800 li.active a:before {
    color: var(--brand-primary);
}
.nav-tabs.d800 li.active a:after {
    background: var(--brand-primary);
}
.nav-tabs.d800 li a:hover, .nav-tabs.d800 li.active a {
    color: var(--brand-primary);
    border: none !important;
}
.nav-link.d800-nav {
    color: var(--brand-primary);
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: var(--brand-secondary-hover);
}
/* Responsive: adjust body and footer to bottom */
@media screen and (min-width: 1072px) {
    .body-brand {
        padding-bottom: 115px; /*height of the footer*/
    }
    .signinfooter {
        height: 7.2rem;
    }
}
@media screen and (max-width: 1071px) {
    .body-brand {
        padding-bottom: 135px; /*height of the footer*/
    }
    .signinfooter {
        height: 135px;
    }
}
@media screen and (max-width: 970px) {
    .body-brand {
        padding-bottom: 155px; /*height of the footer*/
    }
    .signinfooter {
        height: 155px;
    }
}
@media screen and (max-width: 562px) {
    .body-brand {
        padding-bottom: 175px; /*height of the footer*/
    }
    .signinfooter {
        height: 175px;
    }
}
@media screen and (max-width: 530px) {
    .body-brand {
        padding-bottom: 195px; /* height of the footer */
    }
    .signinfooter {
        height: 195px;
    }
}

/* general areas */

/* tables */
.table-colored > thead > tr > th {
    border-color: var(--brand-primary);
    background-color: var(--brand-primary);
    color: #ffffff;
}
a.sortable-column {
    color: var(--brand-primary);
}
.table-callview > tbody > tr > th, .table-callview > thead, .table-purple > tbody > tr > th, .table-purple > thead {
    background-color: #eee!important;
}
.table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th {
    /*background-color: rgba(247, 202, 70, 0.4) !important;*/
    background-color: #eee !important;
}
/* checkboxes */
input [type="checkbox"]:checked + .label-text:before {
color: var(--brand-primary);
}
/* labels */
.label-brand-light { background-color: var(--brand-secondary); }
.label-brand-dark { background-color: var(--brand-primary); }
.label-brand-lightgrey { background-color: #999; }
.label-brand-darkgrey { background-color: #808285; }
/* panels */
/* panel heading primary is our brand grey */
.panel-primary {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}
    .panel-primary > .panel-heading {
        color: #fff;
        background-color: #808285;
        /*border-color: #337ab7;*/
    }
/* wizards */
.wizard-step-title-text {
    color: var(--brand-primary);
}
#radioBtn .notActive {
    /*color: #eee!important;*/
}
.popover-title { background-color: #b3bbc2!important }
/* wizard filters */
a.list-group-item-brand, button.list-group-item-brand {
    color: var(--brand-primary);
}
.list-group-item-brand {
    color: var(--brand-primary);
    background-color: #e8f4f8;
}
a.list-group-item-brand:hover, button.list-group-item-brand:hover, a.list-group-item-brand:focus, button.list-group-item-brand:focus {
    color: var(--brand-primary-hover);
    background-color: #d4edf3;
}
a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading {
    color: inherit;
}
/* selects, checkboxes, radios */
select.form-control + .chosen-container .chosen-results li:hover, select.form-control + .chosen-container .chosen-results li.active-result:hover, select.form-control + .chosen-container .chosen-results li.highlighted {
    background-color: var(--brand-primary);
}
select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices, select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single, select.form-control + .chosen-container .chosen-search input[type=text]:focus {
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(233 86 58 / 25%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(233 86 58 / 25%);
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    border-color: var(--brand-primary);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    text-decoration: none;
    color: #ffffff;
    background-color: var(--brand-primary);
}
option:hover, option.highlighted { 
    background-color: var(--brand-primary); 
    color: #fff;
}
div#ctl00_MainContent_updLoadView > span {
    width: 70% !important;
}
/* for accuroute managegroups percent allocaton group range slider */
.rangeslider__fill {
    background: var(--brand-secondary) !important;
}
/* brand color gradients */
.brand-color-gradient-130deg {
    background: var(--gradient-light);
    background: -moz-linear-gradient(130deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    background: -webkit-linear-gradient(130deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    background: linear-gradient(130deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--gradient-light)",endColorstr="var(--gradient-dark)",GradientType=1);
}
.brand-color-gradient-330deg {
    background: var(--gradient-light);
    background: -moz-linear-gradient(330deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    background: -webkit-linear-gradient(330deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    background: linear-gradient(330deg, var(--gradient-light) 0%, var(--gradient-dark) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--gradient-light)",endColorstr="var(--gradient-dark)",GradientType=1);
}
/* accuroute ai tag adjustments */

.ai-tags {
    font-size: .5em;
    left: .95em;
    top: .5em;
    color: white;
    text-shadow: -1px -1px 0 var(--brand-alt02), 1px -1px 0 var(--brand-alt02), -1px 1px 0 var(--brand-alt02), 1px 1px 0 var(--brand-alt02);
}
.ai-tag-color {
    color: var(--brand-primary);
}

/* styles not using variables */
    .popover-content > p {
    color: #777;
}
.btn.btn-link-white {
    color: white;
    text-decoration: none;
    background-color: transparent;
}

    .btn.btn-link-white:hover, .btn.btn-link-white:focus, .btn.btn-link-white:active {
        color: #efefef; /* or #666; or #b7442e; */
        text-decoration: none;
    }

.btn.btn-link-grey {
    color: grey;
    text-decoration: none;
    background-color: transparent;
}

    .btn.btn-link-grey:hover, .btn.btn-link-grey:focus, .btn.btn-link-grey:active {
        color: #333; /* or #666; or #b7442e; */
        text-decoration: none;
    }

.btn-help-orange {
    color: #ffffff;
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary-hover);
}

    .btn-help-orange:hover, .btn-help-orange:focus, .btn-help-orange:active {
        color: #ffffff;
        background-color: var(--brand-secondary-hover);
        border-color: var(--brand-secondary-hover);
    }
.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
    /*box-shadow: 0 0 0 0.2rem rgba(233, 86, 58, 0.5) !important;*/
}
.info-box .content .text, .info-box .content .number {
    color: white;
}
a.no-hover {
    color: #888;
}

    a.no-hover:hover {
        color: #333;
    }
.btn-link.tab:hover {
    background-color: #efefef !important;
}

.btn-link.tab.active-p {
    color: #333 !important;
    background-color: #efefef !important;
}

.btn-link-clear-spacing {
    padding: 0;
    border: 0;
    vertical-align: unset;
}
/* menu nav brands underline */
.navbar-inverse .navbar-nav > li.callview.active, .navbar-inverse .navbar-nav > li.accuroute.active,
.navbar-inverse .navbar-nav > li.rapidrecall.active, .navbar-inverse .navbar-nav > li.callview:hover,
.navbar-inverse .navbar-nav > li.callview:focus, .navbar-inverse .navbar-nav > li.accuroute:hover,
.navbar-inverse .navbar-nav > li.accuroute:focus, .navbar-inverse .navbar-nav > li.rapidrecall:hover,
.navbar-inverse .navbar-nav > li.rapidrecall:focus {
    border-bottom: solid 3px #9E9E9E;
}
.line {
    margin-bottom: 0 !important; /* adjusted from -4 */
}
.navbar-inverse .navbar-nav > li {
    /* color: #999999; */
    color: #ffffff;
    border-bottom: solid 3px transparent;
}
li#callview a span.callview-btntxt {
    display: var(--cv-displaybtntext);
}
li#accuroute a span.accuroute-btntxt { 
    display: var(--ar-displaybtntext);
}
li#rapidrecall a span.rapidrecall-btntxt {
    display: var(--rr-displaybtntext);
}
li#callview > a > span.menuSubtext {
    display: var(--cv-displaybtnsubtext);
}
li#accuroute > a > span.menuSubtext {
    display: var(--ar-displaybtnsubtext);
}
li#rapidrecall > a > span.menuSubtext {
    display: var(--rr-displaybtnsubtext);
}

/* menu nav brands */
@media (min-width: 992px) {
    .navbar-nav > li > a {
        padding-top: 15px;
    }
    .navbar-nav > li.callview > a {
        padding-bottom: var(--cv-btnbottompad);
    }
    .navbar-nav > li.accuroute > a {
        padding-bottom: var(--ar-btnbottompad);
    }
    .navbar-nav > li.rapidrecall > a {
        padding-bottom: var(--rr-btnbottompad);
    }
}
li.callview > a > span.menuicon {
    display: var(--cv-displayicon); 
    width: 22px;
    height: 22px;
    margin-right: 1rem;
}
li.accuroute > a > span.menuicon {
    display: var(--ar-displayicon);
    width: 22px;
    height: 22px;
    margin-right: 1rem;
}
li.rapidrecall > a > span.menuicon {
    display: var(--rr-displayicon);
    width: 22px;
    height: 22px;
    margin-right: 1rem;
}

.callview-btntxt { margin-right: 0.1rem; display: var(--hidebtntext); }
.callview-newbtntxt:after { content: var(--cv-btntext); }
.accuroute-btntxt { margin-right: 0.1rem!important; }
.accuroute-newbtntxt:after { content: var(--ar-btntext); }
.rapidrecall-btntxt { margin-right: 0.1rem!important; display: var(--hidebtntext); }
.rapidrecall-newbtntxt:after { content: var(--rr-btntext); }

li#callview > a > span > img.svg-icon {
    filter: saturate(0%) brightness(140%)
}

li#accuroute > a > span > img.svg-icon {
    filter: saturate(0%) brightness(170%)
}

li#rapidrecall > a > span > img.svg-icon {
    filter: saturate(0%) brightness(90%)
}

li#callview:hover > a > span > img.svg-icon, li#callview.active > a > span > img.svg-icon {
    filter: saturate(0%) brightness(200%)
}

li#accuroute:hover > a > span > img.svg-icon, li#accuroute.active > a > span > img.svg-icon {
    filter: saturate(0%) brightness(240%)
}

li#rapidrecall:hover > a > span > img.svg-icon, li#rapirecall.active > a > span > img.svg-icon {
    filter: saturate(0%) brightness(140%)
}
/* nav menu subtext */
li#callview.active > a > div.menuSubtext, li#accuroute.active > a > div.menuSubtext, li#rapidrecall.active > a > div.menuSubtext {
    font-size: 13px;
    color: white;
}
/*-- new stuff from Kall8 --*/
/* grid header sorting stuff */
a:not([href]):not([tabindex]) {
    color: var(--brand-primary);
    cursor: pointer;
}
/* grid footer pager stuff */
.page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
/*-- Popover Stuff --*/
.popover-header {
    background-color: var(--brand-secondary);
    color: white;
}
.popover-custom {
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.15);
}
.popover-arrow { } /* if we want to change the arrow look */
.popover-body { } /* if we want to change the body look */
/*-- new stuff --*/
.text-header-icon-light {
    color: var(--brand-headerbar-icons);
}
.text-header-icon-light:hover {
    color: var(--brand-headerbar-icons-hover);
}
.btn-accent {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}
    .btn-accent:hover {
        background: var(--color-accent-hover);
        border-color: var(--color-accent-hover);
        color: white;
    }

  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  }

  /* ---------- new home page responsive ---------- */
  @media (max-width: 1100px) {
    .modules { grid-template-columns: repeat(2, 1fr)!important; }
    .news-grid { grid-template-columns: 1fr 1fr!important; }
    .news-card.featured { grid-column: 1 / -1!important; }
    .resources { grid-template-columns: 1fr!important; }
    .hero { grid-template-columns: 1fr!important; padding: 40px 32px!important; }
    .hero h1 { font-size: 34px!important; }
  }
  @media (max-width: 640px) {
    /*.page { padding: 16px; }*/
    .modules { grid-template-columns: 1fr!important; }
    .news-grid { grid-template-columns: 1fr!important; }
    .hero { padding: 32px 24px!important; }
    .hero h1 { font-size: 28px!important; }
  }