/* Minification failed. Returning unminified contents.
(1620,64): run-time error CSS1035: Expected colon, found '/'
(1620,67): run-time error CSS1062: Expected semicolon or closing curly-brace, found '.'
(1621,1): run-time error CSS1035: Expected colon, found '}'
 */
html * {
    font-size: 16px !important; /* bootstrap 5 default is 16px */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* override bootstrap 5. NOTE: don't use !important. Otherwise  Font Awesome  icons are incorrectly displayed!'*/
}

body {
    margin: 0px !important;
    padding: 0px !important;
    width: 100% !important;
    color:#444;
}

.body-loading {
    opacity: 0.4;
    pointer-events: none !important;
}

/* BEGIN: This makes contents (e.g. AG logo, menu items on nav bar, page contents) left justify on full screen */
.container {
    margin-left: 85px !important;
}

.container-fluid {
    margin-left: 85px !important;
}
/* END: */

/* BEGIN: Kentico public style for banner and navigation bar */
.topbar {
    background: #354851 !important;
}
.navbar-static-top {
    background: #465d6b !important;
}
/* END */

/* AG logo click-able div */
#agLogoDiv {
    height: 100%;
    margin-left: 5px;
    width: 270px;
    cursor: pointer;
}

#agLogoDiv:hover {
    background: #8f99a3; /* lighter shade of nav-item-main background */
    opacity: 0.2;
}

#pageLeftContent {
    float: left;
    margin-top: 50px;
    width: 270px;
    margin-left: 15px;
    position: fixed;
    /*background-color: #f2f2f2;*/ /* for debugging*/
}

#liveChatInfo p {
    font-size: 0.92em !important;
    color: #757575;
}

.center-div {
    float: left;
    margin-left: 210px; /* space between pageLeftContent and this div */
    margin-top: 0;
    width: 60vw; /*Bootstrap 5: 60vw is max for 27%. Higher numbers cause horizontal scroll and  space on the right side */
}

/* prevent center div from pushing down from the original vertical position when resized screen is narrow (<= 1050px) */
@media screen and (max-width: 1240px) {
    .center-div {
        margin-left: 270px; /* keep space between pageLeftContent and center div *visually* the same as the original space before screen was resized narrower */
        margin-top: 3px;
        position: absolute;
    }
}

/* prevent center div from pushing down from the original vertical position when resized screen is very wide (>= 2325px) */
@media screen and (min-width: 2325px) {
    .center-div {
        margin-left: 215px; /* keep space between pageLeftContent and center div *visually* the same as the original space before screen was resized wider */
        position: absolute;
    }
}

/* BEGIN: Prevent unnecessary horizontal scroll bar when accordion panel on small screen. Min value 1240px */
/* This works in conjunction with .center-div */
@media (max-width: 1240px) {
    /*  .body-content {
        background: #9acffe;
    }*/

    .container {
        margin-left: 2% !important;
    }

    .container-fluid {
        margin-left: 2% !important;
    }
}
/* END */

/* correct bootstrap 5: primary button weird gradient when hovered/focus */
.btn-primary:not(:disabled):not(.disabled):hover, .btn-primary:not(:disabled):not(.disabled):hover {
    background-image: linear-gradient(rgb(51, 122, 103) 0%, rgb(38, 90, 106) 100%) !important;
    background: rgb(36, 85,136) !important;
    border-bottom-color: rgb(36, 85, 100) !important;
}

.btn-primary:not(:disabled):not(.disabled):focus, .btn-primary:not(:disabled):not(.disabled):focus {
    background-image: linear-gradient(rgb(51, 122, 103) 0%, rgb(38, 90, 106) 100%) !important;
    background: rgb(36, 85, 136) !important;
    border-bottom-color: rgb(36, 85, 100) !important;
}

.navbar-right {
    margin-right: 10px !important; /* "About" menu item */
}

.nav-item-main {
    background: #5c6670 !important;
}

/* this makes horizontal accordions! */
/* <div class="accordion center-div" id="accordionExample"> */
/*.center-div {
    display: flex;
    justify-content: center;
    margin-left: 200px;
    justify-content: center;
}

@media screen and (max-width:2480px) {
    .center-div {
        flex-direction:row;
    }
}*/

.site-title {
    font-weight: bold;
    font-size: 22px !important;
    /* margin-left: 20px;*/
    margin-bottom: 15px;
    color: #949494;
}

.accordion-background-image {
    background-image: linear-gradient(to bottom, #cce0ff, #f0fbff);
    border: none !important;
}
a, select, .select-multiple-input, .uploadFileInput, .datepicker, .datepicker-input {
    cursor: pointer;
}

.select-multiple-input:focus {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.4)!important; /* overwrite bootstrap 5 too much glow */
}

/* modal dialog border radius */
.modal-content {
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    border-radius: 10px !important;
    text-align: center!important;
}

.modal-header {
    /* top radius is the same as modal-content */
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.modal-close_icon {
    font-size: 2.50em !important;
}

@media screen and (max-width: 950px) {    
    .midWidthInput {
        height: 80px;
    }

    .control-label.labelBlueColor {
        max-width: 95% !important;

    }
}

@media screen and (max-width: 520px) {
    /* smallest browser width on PC*/
    .form-group2 {
        max-width: 44% !important;
        margin-left: 4%!important;
    }
    
    /* input box width */
    .midWidthInput {
        width: 99%;
    }

    /* Chrome & Edge */
    .modal-dialog {
        left: 3% !important;
        width: 95% !important;
    }

    .inprog-modal-center-dialog {
        top: 3% !important;
        left: 25% !important;
        position: fixed !important;
        /*height: 200px;*/
    }

    .select-arrow {
        margin-right: 0.35em !important; /* Chrome and Edge */
    }
    
    /* Firefox */
    @-moz-document url-prefix() {
        .midWidthInput {
            width: 95%;
        }

        .select-arrow {
            margin-right: 1.3em !important;
        }
    }
}

/* for mobile */
@media screen and (max-width: 415px) {
    .midWidthInput {
        width: 89%!important;
    }

    .form-group .form-check .form-check-label {
        width: 89% !important; /* same as midWidthInput width */
    }

    /* product/service dropdown */
    .dropdown {
        width: 89% !important; /* same as midWidthInput width */
    }

    .button-row > a {
        margin-left: 5px !important;
    }

    .button-row > input {
        margin-left: 5px !important;
    }
}

/* define inputs widths */
.card {
    /*width: 90% !important;*/ /* 100% does not fill the entire screen */
    max-width: 70% !important;
    min-width: 380px !important; /* smallest possible without truncated when browser has smallest width */
    border-radius: 9px !important;
}

form {
    /* Set the width to match that of the viewport. */
    /*width: 70vw;*/ /* this makes accordion panels expands when screen expands*/
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set custom default width on the form input elements since they're 100% wide by default */
/* DO not set width here! set width of .card instead */
input,
/*select,
textarea {
    max-width: 700px!important;
}
*/
/* override default max-width*/
input.midWidthInput {
    /*width:500px!important;*/
    /*min-width: 230px!important;*/
}

.modal-backdrop {
    opacity: 0.5;
    z-index: 1000; /* Use 1000 - 1049 for bootstrap 5 to cover entire page including accordion panels. Values more than 1049 will make a modal not accessible! */
    background: #505050; /* must specify background color. Otherwise input fields background is not totally covered. */
}

/* Transparent in-progress modal */
.modal-inprogress .modal-backdrop {
    opacity: 0.0 !important;
    z-index: 999 !important;
    background: transparent !important;
}

/* non-Transparent in-progress modal */
/*.modal-inprogress .modal-backdrop {
    opacity: 0.5 !important;
    z-index: 999 !important;
    background: #505050;
}*/

.inprog-modal-center-dialog {
    top: 35% !important; /* 35% show in progress modal vertically center of the page , 10% is just below the nav bar */
    align-items: center !important;
    width: 50%!important;
    /* do not specify height, max-height, min-height. Otherwise modal dialog is not resized properly */
}

/* mobile vertical screen */
@media screen and (max-width: 415px) {
    .modal-dialog {
        left: 0 !important;
        width: auto !important;
    }

    .inprog-modal-center-dialog {
        top: 3% !important;
        left: 25% !important;
        position: fixed !important;
        /*height: 200px;*/
    }
}

/* smallest browser width on PC */
@media screen and (max-width: 460px) {
    .modal-dialog {
        left: 2%!important;
        width: 95% !important;
    }

    .inprog-modal-center-dialog {
        top: 3% !important;
        left: 25% !important;
        position: fixed !important;
    }
    
    /* for debug */
    /*    .body-content {
        background: green !important; 
    }*/
}

/* mobile vertical screen - defined AFTER css for  smallest browser width */
@media screen and (max-width: 415px) {
    .modal-dialog {
        position: fixed !important;
        left: 2% !important;
        width: 95% !important;
    }

    .inprog-modal-center-dialog {
        top: 3% !important;
        left: 25% !important;
        position: fixed !important;
        /*height: 200px;*/
    }

    /* for debug */
    /*    .body-content {
        background: greenyellow !important; 
    }*/
}

/* for mobile landscape */
@media screen and (max-width: 700px) {
    .modal-dialog {
        width: 100%;
        left: 12%;
        top: 2%;
        margin: 0;
        padding: 0;
    }

    .modal-content {
        height: auto;
        min-height: 70%;
    }

    .inprog-modal-center-dialog {
        top: 10% !important;
        position: fixed !important;
        left: 25%;
        width: 50% !important;
    }

    .modal-body {
        margin-bottom: -20px !important;
    }
}

.modal-footer {
    border: none;
}

.no-shadow-modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0);
    -moz-box-shadow: 0 5px 15px rgba(0,0,0,0);
    -o-box-shadow: 0 5px 15px rgba(0,0,0,0);
    box-shadow: 0 5px 15px rgba(0,0,0,0);
    background: transparent !important;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
}

/*.numberCircle {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    padding: 8px;
    background: #fff;
    border: 2px solid darkblue;*/
/* color: red;*/
/*text-align: center;
}*/
.numberCircle {
    height: 30px;
    width: 30px;
    margin-top: 5px;
    margin-left: 5px;
    padding: 1px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    color: black;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid #005fb3;
    /* color: red;*/
}

/* JQuery validation error text color */
.error {
    /*color: #FF0000 !important; */
    color: #D4403A !important; /* color with minimum contrast for accessibility */
    font-weight: 500 !important; /* 500 is normal weight, 600 is bold */
}

.error-dark {
    color: #AB2A26 !important; /* more contrast/darker than .error for darker background color (e.g. gray) to meet accessibility contrast */
    font-weight: 500 !important; /* 500 is normal weight, 600 is bold */
}

/* 700px is when in-line radio buttons start to wrap */
@media (max-width: 700px) {
    .form-check-inline {
        display: block !important;
    }
}

/* Portrait phones and smaller */
/*@media (max-width: 480px) {
    .form-check-inline {
        display: block!important;
    }
}*/
/* radio buttons and label spacing */
.form-check-inline.checkboxes input {
    margin-right: 5px; /* must use margin-right */
}

.checkboxes label {
    display: inline-block;
    white-space: normal; /* to make label text wrapped for small screen */
    margin-left: 10px !important;
}

.labelAfterSpace {
    margin-top: -20px!important;
    margin-right: 5px;
}

.checkboxes input {
    vertical-align: middle;
    margin-bottom: 5px;
    margin-right: 5px;
}

.big-checkbox {
    width: 2.7rem;
    height: 2.7rem;
}

.medium-checkbox {
    width: 2.0rem;
    height: 2.0rem;
}

.medium-radio {
    width: 1.7rem;
    height: 1.7rem;
}

.button-row {
    padding-bottom: 20px !important;
    padding-top: 10px !important;
}

.button-row-left-right {
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}

.button-row-left-mid-right {
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    text-align: center;
}

.button-row-left-right .button-right {
    float: right;
    padding: 5px 7px 5px 7px !important; /* prevent link from shifting down when hovered with changed background color */
}

.button-row-left-right > a:hover {
    background: #cde7fe;
    padding: 5px 7px 5px 7px;
    border-radius: 4px !important;
    text-decoration: none!important; /* applicable for anchor link */
}

.button-row-left-mid-right .button-left {
    float: left!important;
}

.button-row-left-mid-right .button-right {
    float: right;
    padding: 5px 7px 5px 7px!important; /* prevent link from shifting down when hovered with changed background color */
}

.button-row-left-mid-right > a:hover {
    background: #cde7fe;
    padding: 5px 7px 5px 7px;
    border-radius: 4px !important;
    text-decoration: none !important; /* applicable for anchor link */
}

.form-group {
    max-width: 700px; /* must defined! */
    min-width: 355px; /* must be less than .card min-width */
    margin-bottom: 20px;
}

.form-group2 {
    width: 48% !important;  /* same % value as the input width before an input in .form-group2 */
    margin-bottom: 20px;
    margin-left: 10%;
}

.form-group .form-check .form-check-label {
    margin-top: -5px!important; /* vertical space between checkboxes/radio*/
}

.form-group .form-check-inline .form-check-label {
    margin-left: 5px !important; /* horizontal space between in-line checkboxes/radio */
}

.form-group.required .control-label:after {
    font-size: 16px;
    color: #ff6666;
    margin-left: 2px;
    font-family: 'Glyphicons Halflings';
    content: '●';
    font-weight: bold;
    padding-bottom: 35px;
}

.form-group.required .text-for-label:after {
    font-size: 16px;
    color: #ff6666;
    margin-left: 2px;
    font-family: 'Glyphicons Halflings';
    content: '●';
    font-weight: bold;
    padding-bottom: 35px;
}

.form-group.at-least-one-required .control-label:after {
    font-size: 16px;
    color: #e68a00;
    margin-left: 2px;
    font-family: 'Glyphicons Halflings';
    content: '♦';
    font-weight: bold;
    padding-bottom: 35px;
}

.btn-xs {
    /* margin-left: 10px!important;*/
    width: 90px !important;
    padding: 5px 5px !important;
    font-size: 15px !important;
    line-height: 1.0 !important;
    border-radius: 3px !important;
}

.btn-xs-140 {
    /* margin-left: 10px!important;*/
    width: 140px !important;
    padding: 5px 5px !important;
    font-size: 15px !important;
    line-height: 1.0 !important;
    border-radius: 3px !important;
}

.btn-fix-length {
    width: 140px !important;
}

.btn-center {
    text-align: center;
}

.not-bold {
    font-weight: normal !important;
}

.dropdown-menu > li > a:hover {
    background-image: none;
    background-color: #d9e6f2;
    font-weight: bold;
}

.dropdown-item.active:hover {
    color: white !important; /* to change black color text over blue background of the selected item */
    font-weight: bold;
}

.medium-spinner-border {
    vertical-align: top; /* this vertically align text with the circle*/
    width: 3.7rem;
    height: 3.7rem;
    margin-left: 10px !important;
}

.large-spinner-border {
    vertical-align: top; /* this vertically align text with the circle*/
    width: 6.2rem;
    height: 6.2rem;
    border-width: 0.5rem; /* spinner thickness */
}

.extra-large-spinner-border {
    vertical-align: top; /* this vertically align text with the circle*/
    width: 9.2rem;
    height: 9.2rem;
    border-width: 0.6rem; /* spinner thickness */
}

/* Firefox, Chrome, Edge */
::placeholder {
    color: #c7c7c7 !important;
    white-space: normal !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;
    /*opacity: 1;*/ /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #c7c7c7 !important;
}

/* Firefox */
input:focus::-moz-placeholder {
    color: #9acffe !important;
    font-size: 0.9em !important;
    font-weight: 400 !important;
}

/* Chrome and Edge */
input:focus::-webkit-input-placeholder {
    color: #4eacfd !important;
    font-size: 0.9em !important;
    font-weight: 400 !important;
}

.control-label.labelBlueColor {
    font-weight: 500 !important; /* 500 is normal weight, 600 (default) is bold */
    color: #025197 !important;
    word-break: break-word !important;
    /*margin-right: 10px;*/ /* when label text starts wrapping reduce width so that the top textbox outline is not completely overlaid  */
    z-index: 0 !important; /* Do not use values below 0. Otherwise a label is not shown after validation error message is not displayed. O is sufficient for an error message to overlay the label text */
}

.textOnInput {
    position: relative;
}

.textOnInput label:not(.not-on-input) {
    position: absolute;
    top: -12px;
    left: 10px;
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
    z-index: 1;
    font-size: 14px;
    font-weight: normal;
    background: white!important;
}

.textOnInput-nextinput-samerow {
    position: absolute;
}

.textOnInput-nextinput-samerow label {
    position: absolute;
    top: -12px;
    left: 10px;
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
    z-index: 1;
    font-size: 14px;
    font-weight: normal;
}

/*.textOnInput label:after {
    width: 100%;
    height: 13px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}*/

.required.textOnInput .control-label:after:not(.not-on-input) {
    position: relative;
    font-size: 16px;
    color: #ff6666;
    margin-left: 2px;
    font-family: 'Glyphicons Halflings';
    content: '●';
    font-weight: bold;
    z-index: -1;
    padding-bottom: 40px;
}

/* Input field properties*/
/* :focus if height is change other elements (e.g. buttons, checkboxes) needed to be clicked twice */
/* use padding less than 32px to change input height does cause "click twice" issue */
.form-control.onFocus:focus {
    /* color: #0275d8 !important;*/
    color: #025197 !important;
    padding-bottom: 30px; /* subtle height change is best! */
    padding-top: 30px; /* subtle height change is best! */
    font-size: 1.2em;
    font-weight: 500 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.5) !important; /* overwrite bootstrap 5 too much glow */
}

/* "blur" */
.form-control.onFocus {
    min-height: 57px; /* input field height */
}

.form-control {
    min-height: 57px; /* input field height */
    border-radius: 6px !important; /* override bootstrap 5 */
}

/* for <select> element*/
.form-control.select-single {
    padding-top: 5px; /* space between input label and the first option text for Chrome and Edge */
}

@-moz-document url-prefix() {
    .form-control.select-single {
        padding-top: 0; /* space between input label and the first option text */
    }
}

.form-control.select-single:focus {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.4)!important; /* overwrite bootstrap 5 too much glow */
}

.form-control.select-multiple:focus {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.4)!important; /* overwrite bootstrap 5 too much glow */
}

.select-center {
    text-align: center; /* show options in center of dropdown box */
}

select option {
    padding-top: 3px !important; /* vertical space between options */
}

/* "placeholder" option color */
/*select option[value=""] {
    color: #cccccc !important;
}*/

.selected-placeholder-color {
    color: #757575 !important; /* accessibility */
}

.select-option-color {
    color: #212529 !important;
}

/* left aligned dropdown arrow */
.select-arrow {
    position: absolute;
    text-align: center !important;
    /*background: #ededed;*/ /* background does not cover full dropdown height if height does not have correct value. So don't show background! A down-arrow is aways at the middle of dropdown. */
    /*top: 23%!important;*/
    width: 17px;
    /*height: 3.9em;*/ /* height is depended on page font size */
    height: auto;
    margin-top: 0.1em;
    margin-right: 0.1em;
    padding-top: 20px; /* align arrow down icon vertically */
    border-radius: 3px !important;
    color: #0275d8;
}

.clear-text {
    pointer-events: visible !important; /* to override form-control-feedback pointer-events: none so cursor can be set */
    color: #cccccc;
    cursor: pointer;
    /*background: rgba(239, 243, 245, 1.0);*/
    background: rgba(255, 255, 255, 1.0);
    height: auto;
    min-height: 93%;
    margin-top:2px;
}

small + .clear-text {
    min-height: 62% !important;
}

small + .small2.clear-text {
    min-height: 65% !important;
}

#consumerAddressHelp.text-small-14px + .clear-text {
    min-height: 45% !important;
}

select option:hover {
    background: #d9e6f2; /* same as .dropdown-menu > li > a:hover  */
    font-weight: bold;
}

select {
    overflow-y: auto; /* hide vertical scroll bar when not needed. works with Chrome and Edge*/
    /*scrollbar-width: none;*/ /* hide vertical scroll bar when not needed for Firefox*/
}

.readonly-bg {
    background-color: transparent !important;
}

/* for debug */
/*.readonly-bg input:read-only {
    background-color: greenyellow !important; 
}*/

@-moz-document url-prefix() {
}

/* for input within label */
label:focus-within {
    color: #025197;
    font-weight: bold !important;
}

/* for label that is immediately after input */
.form-group input:focus + label {
    font-weight: bold !important;
}

.form-group input + label {
    font-weight: bold !important;
}

.form-row .btn {
    margin-left: 20px;
}

.dropdown button:focus + label {
    font-weight: bold !important;
}

label.error {
    font-weight: bold !important;
}

.dropdown-menu {
    width: 100% !important; /* so that dropdown menu width is the same as dropdown box width */
}

.dropdown-item {
    white-space: normal !important;
}

.dropdown-toggle {
    width: 100% !important; /* works in conjunction with form-group max-width */
    white-space: normal !important;
    border: 1px solid #cccccc !important;
    border-radius: 7px !important;
    min-height: 55px;
    /*text-align: left!important;*/ /* dropdown button text alignment */
}

.dropdown-toggle:focus {
    color: #0275d8 !important;
    border: 1px solid #4eacfd !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(2, 117, 216, 0.3) !important;
    outline: none !important; /* remove chrome black outline */
}

.nav-dropdown-toggle:focus {
    border-color: transparent !important; /* bootstrap 5: remove light blue border after nav-dropdown-toggle is clicked and move mouse pointer away */
}

.dropdown .control-label:after {
    position: relative;
    font-size: 12px;
    color: #ff6666;
    margin-left: 2px;
    font-family: 'Glyphicons Halflings';
    content: '●';
    font-weight: bold;
    z-index: -1;
    padding-bottom: 40px;
}

/* for Bootstrap 5 */
.dropdown-btn {
    background: none !important;
}

/* for Bootstrap 5 */
.dropdown-btn:hover {
    background: none !important;
    color: #0275d8;
}

/* for Bootstrap 5 */
.nav-dropdown-toggle {
    border-color: transparent !important;
    margin: 0 !important;
    text-decoration: none!important;
}

/* for Bootstrap 5 */
.nav-dropdown-toggle:hover {
    border-color: transparent !important;
    border-radius: 0 !important;
    min-height: 55px !important; /* bootstrap 5: related to height of .navbar defined in AgoCustomBootstrap.css*/
    max-height: 55px !important; /* bootstrap 5:related to height of .navbar defined in AgoCustomBootstrap.css*/
}

/* for Firefox */
/* bootstrap 5: no longer needed */
/*@-moz-document url-prefix() 
    .nav-dropdown-toggle:hover {
        min-height: 55px !important;*/ /* bootstrap 5: eliminate navbar-right item text vertically shifted up/down when over (Chrome, Edge) */
        /*max-height: 55px !important;*/ /* bootstrap 5: eliminate navbar-right item text vertically shifted up/down when over (Chrome, Edge) */
    /*}
}*/

/* for Bootstrap 5 */

.nav-item .nav-dropdown-toggle {
    border-radius: 0 !important;
}

.nav-item .nav-dropdown-toggle:focus {
    border-radius: 0 !important;
}

.nav .dropdown .dropdown-menu {
    background: rgba(239, 243, 245, 1.0) !important; /* opaque 1.0 to cover Google language and any content on the (narrow) page */
}

/*.dropdown-button-md {
    max-width: 500px !important;*/ /* same as input.midWidthInput */
/*min-width: 230px!important;
}*/
/*.dropdown-menu-md {
    max-width: 500px !important;*/ /* same as input.midWidthInput */
/*min-width: 230px !important;
}*/
/* override bootstrap active blue background, which is too bright, used for drop-down active (selected) item */
a.active {
    background-color: #026dca !important;
}

.text-muted-light {
    color: #757575; /* minimum contrast for accessibility */
}

.text-warning-dark {
    color: #B85C00; /* minimum contrast for accessibility */
}

.text-small-14px {
    font-size: 14px!important;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* bootstrap 5:  must define border-radius and it should be the same border-radius as .accordion-card-reader border-radius */
.accordion-item {
    border-radius: 8px !important;
}

.accordion-card-reader {
    height: 40px;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    border-radius: 8px !important;
}

.accordion-card-reader-header {
    vertical-align: middle;
    display: table-cell;
}

.accordionCheckMark {
    font-size: 1.5em !important;
    float: right !important;
    color: #00b32d;
    margin-right: 10px;
    margin-top: 5px;
}

.accordion-body {
    margin-top: 10px; /* add space between the first element and accordion title */
}

.disabledCard {
    opacity: 0.4;
}

.disabledDiv {
    pointer-events: none;
    opacity: 0.4;
}

.disableTextbox {
    background: transparent!important;
}

.google-translate {
    float: right;
    margin-top: -22px;
}

/*.gc-reset {
    transform: scale(0.95) !important;
    -webkit-transform: scale(0.95) !important;
    transform-origin: 0 0 !important;
    -webkit-transform-origin: 0 0 !important;
}*/

/* This makes reCAPTCHA pop-up center on a smallest screen without horizontal scroll bar */
/*@media screen and (max-width: 520px) {
    .g-recaptcha-bubble-arrow + div {
        position: fixed !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
}*/


@media(max-width: 520px) {

    #recaptcha_challenge_image {
        left: -50px!important;
        width: 80% !important;
        height: 80% !important;
    }

    #recaptcha_response_field {
        left: -50px!important;
        width: 80% !important;
        height: 80% !important;
    }

    .recaptchatable #recaptcha_image {
        left: -50px!important;
        width: 80% !important;
        height: 80% !important;
    }
    .recaptchatable .recaptcha_r1_c1,
    .recaptchatable .recaptcha_r3_c1,
    .recaptchatable .recaptcha_r3_c2,
    .recaptchatable .recaptcha_r7_c1,
    .recaptchatable .recaptcha_r8_c1,
    .recaptchatable .recaptcha_r3_c3,
    .recaptchatable .recaptcha_r2_c1,
    .recaptchatable .recaptcha_r4_c1,
    .recaptchatable .recaptcha_r4_c2,
    .recaptchatable .recaptcha_r4_c4,
    .recaptchatable .recaptcha_image_cell {
        left: -50px !important;
        width: 80% !important;
        background: none !important;
        height: 80% !important;
    }

/*    .g-recaptcha-bubble-arrow {
        display: none !important;
    }*/
    
        /*    .g-recaptcha-bubble-arrow + div {
        position: fixed !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -webkit-transform-origin: center center;
        z-index: 1600!important;
    }*/


    /* Firefox */
    @-moz-document url-prefix() {
        .g-recaptcha-bubble-arrow + div {
            left: -50px !important;
            background: white !important;
        }
    }
}

/*@media(min-width: 415px) and (max-width : 768px) {
    #rc-imageselect {
        transform: none;
        -webkit-transform: none;
    }
    .g-recaptcha iframe {
        max-width: none;
        transform: none;
        -webkit-transform: none;
    }
}*/

/*.g-recaptcha > div > div{
  margin: 4px auto !important;
  text-align: left;
  width: auto !important;
  height: auto !important;
}*/


.navbar-nav .nav-link {
    margin-top: 0px !important; /* remove space above nav-item and nav-bar */
    padding-bottom: 20px; /* remove space below nav-item and nav-ba */
    padding-left: 15px;
}

.navbar-nav .nav-link:hover {
    color: #b3ffff !important;
    text-decoration: none !important;
}

/* space between items on bootstrap navbar */
.navbar-nav > li {
    padding-left: 20px;
    padding-right: 20px;
}

.nav-item .nav-link.large-font {
    font-size: 18px !important;
}

.dropdown-menu .nav-link:hover {
    color: #025197 !important;
    text-decoration: none !important;
}


/*.focusOnHover {*/
/* empty - used to make elements (e.g. buttons) focus on hover to work with input height resized on focus */
/*}*/

/* bootstrap 5: hamburger dropdown */
@media only screen and (min-width: 415px) and (max-width : 768px) {

    .navbar-collapse {
        /*border-color: transparent !important;*/ /* overwrite white border dividing site name and expanded dropdown */
    }

    .navbar-nav .nav-link {
        padding-left: 15px; /* align with nav-dropdown-toggle */
    }

    .navbar-toggler:hover {
        background: #04519b !important; /* no need to have .navbar-collapse*/
    }

    .navbar-toggler:focus {
        border-width: 0 !important;
        background: rgb(4, 85, 165) !important;
        /*right: 13px;*/ /* bootstrap 5: prevent collapse dropdown button from shifting left/right when click to focus  */
        /*position: absolute;*/ /* bootstrap 5: prevent collapse dropdown button from shifting left/right when click to focus  */
    }

    .navbar-collapse .nav-item .nav-dropdown-toggle {
/*        background: #005fb3 !important;*/
        color: white;
        left: 0!important;
        border-radius: 0 !important;
        padding-top: 15px; /* bootstrap 5 prevent up/down shift when hovering over dropdown */
        max-height: 50px!important; /* bootstrap 5 prevent up/down shift when hovering over dropdown */
        min-height: 50px!important; /* bootstrap 5 prevent up/down shift when hovering over dropdown */
        /*width: 110vw !important;*/ /* Do not specify width which causes a horizontal scrollbar */
    }


        /*.navbar-collapse .nav-item .nav-dropdown-toggle:focus {
            background-image: linear-gradient(#04519b, #044687 60%, #033769) !important;*/
            /*width: 100vw !important;*/
        /*}*/

    .navbar-collapse .dropdown-menu.show {
        margin-left: 0px !important; /* opened menu to flush left */
        padding-left: 0px; /* text padding */
        border-radius: 0 !important; /* Do not specify width which causes a horizontal scrollbar */
    }
}

input[type="date"]::-webkit-datetime-edit-year-field {
    position: absolute !important;
    border-left: 1px solid #8c8c8c;
    padding: 2px;
    color: #444;
    left: 56px;
}

.datepicker {
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    border-radius: 12px !important;
    position: absolute !important;
    left: 25%!important;
}

/* or whatever other font size you want */

.datepicker,
.table-condensed {
    width: 300px !important;
    height: 240px !important;
    margin-left: -5px !important;
    margin-right: -5px !important;
    background: #eff3ff !important;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.4) !important; /* overwrite bootstrap 5 too much glow */
}

th.today {
    background: #ccd9ff !important; /* Today button background color*/
}

.supplier-search-table thead th {
    vertical-align: middle !important;
    border: none !important;
}

/* blur */
.datepicker-input-no-shadow {
    padding-bottom: 25px !important; /* to eliminate datepicker input text move up/down when date is clicked  */
    padding-top: 25px !important; /* to eliminate datepicker input text move up/down when date is clicked  */
    border-color: rgba(102, 175, 233, 0.4) !important;
}

.datepicker-input-no-shadow:focus {
    border-color: rgba(102, 175, 233, 0.4) !important;
}

/* color for disable years on datepicker calendar */
.datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover {
    color: #cccccc;
}

/* color for disable dates on datepicker calendar */
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    color: #cccccc;
}

/*.datepicker-input-no-shadow:focus + label {
    font-weight:bold!important;
    color: green!important;
}

.datepicker-input-no-shadow + label {
    font-weight: bolder!important;
    color: red!important;
}*/

.btn-link {
    color: #4a8acf; /* override bootstrap 5 bright blue color */
}

.tooltip-inner { /* default text-align is center */
    color: #444;
    font-size: 13px !important;
    background: #fafcda;
    min-width: 100px;
    max-width: 500px;
    /* border */
    border: 0.3rem dotted;
    border-radius: 5px;
    border-color: #a0c0de;
    margin-left: 0.48rem; /* space between tooltip on the right of an element for arrow border-width: 0.5rem 1.2rem 0.5rem 0 */
    margin-right: 0.65rem; /* space between tooltip on the left of an element for arrow border-width: 0.5rem 1.2rem 0.5rem 0 */
    margin-bottom: 0.6rem; /* space between tooltip on the top of an element for arrow border-width: 1.1rem 0.53rem 0 0.53rem */
    margin-top: 0.65rem; /* space between tooltip on the bottom of an element for arrow border-width: 1.1rem 0.53rem 0 0.53rem */
}

.tooltip-html-div .tooltip-inner {
    margin-bottom: 0.6rem;
}

.tooltip-large .tooltip-inner {
    font-size: 15px !important;
}

.tooltip-waring .tooltip-inner {
    background: #ffcc80 !important;
    font-weight: bold;
}

/* tooltip on the left with a left arrow pointing from an element */
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    left: -0.7rem; /* horizontal alignment */
    top: -0.3rem; /* vertical alignment */
    border-width: 0.5rem 1.1rem 0.5rem 0; /* top, right (arrow base), bottom, left */
    border-right-color: #507495;
}

/* tooltip on the right with a left arrow pointing to an element */
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    right: -6px; /* horizontal alignment */
    top: -0.40rem; /* vertical alignment */
    border-width: 0.5rem 1.1rem 0.5rem 0; /* top, right (arrow base), bottom, left */
    border-right-color: #507495;
}

/* tooltip on the top with a down arrow pointing to an element */
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    top: -0.75rem; /* vertical alignment */
    left: -0.35rem; /* horizontal alignment */
    border-width: 1.1rem 0.53rem 0 0.53rem; /* top (arrow base), right, bottom, left */
    border-top-color: #507495;
}

/* tooltip at the bottom with a up arrow pointing to an element */
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    top: -0.30rem; /* vertical alignment */
    left: -0.35rem; /* horizontal alignment */
    border-width: 1.1rem 0.53rem 0 0.53rem; /* top (arrow base), right, bottom, left */
    border-top-color: #507495;
}

.tooltip-html-title {
    color: #6c757d;
    text-align: center;
    font-weight: 600;
    font-size: 22px;
    border-bottom: 2px solid #c1bebe;
    line-height: 35px; /* vertical align text */
    margin-top: -3px; /* vertical align text */
    margin-left: -5px; /* for full horizontal line width */
    margin-right: -5px; /* for full horizontal line width */
    margin-bottom: 5px; /* for space below title section */
}

.tooltip-html-div {
    background: transparent; /* div height is a little higher than .tooltip-inner's height */
    /* uncomment if remove the same set of border properties from .tooltip-inner */
    /* border: 0.1rem solid;
    border-radius: 5px;
    border-color: #a0c0de;
    */
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.tooltip-html-left {
    text-align: left;
    margin-left: 5px;
}

.tooltip.show {
    opacity: 1.0;
}

.fileUploadDiv {
    border: 1px solid;
    border-color: rgba(102, 175, 233, 0.4);
    /*    border-top-color: transparent !important;*/
    border-radius: 5px;
    /*    border-top-left-radius: 0 !important;
    border-top-right-radius: 0!important;*/
    margin-top: -13px !important;
    display: inline-block;
    min-width: 100px !important; /* this makes the div width within accordion on the smallest screen! */
    padding-top: 10px;
    padding-bottom: 10px;
}

.fileUploadDiv label {
   /* margin-left: 10px;*/
    font-weight: normal!important;
    display: block!important;
    padding-left: 5px; /* space before checkbox */
}

.fileUploadDiv label [type="checkbox"] {
    margin-right: 5px; /* space after checkbox */
}

.uploadFileInput:focus {
    padding-bottom: 25px !important; /* to eliminate datepicker input text move up/down when date is clicked  */
    padding-top: 25px !important; /* to eliminate datepicker input text move up/down when date is clicked  */
}

.fileUploadButton {
    padding-top: 0px !important;
    height: 20px !important;
    font-size: 1.0em !important;
    align-items: center;
    /*height: 15px!important;*/
}

.fileupload-checkbox {
    margin-bottom: 10px !important; /* space between checkbox lines */
}

.table-header {
    color: #696969; /* accessibility */
    font-weight: 600 !important;
    text-align: center;
}

th {
    border-bottom: 0.2rem solid lightgrey!important;
    border-top: hidden!important;
}

/* IMPORTANT: Do NOT use thead, tbody.block WITHOUT specific element ID. It affects datepicker UI!  */
table#suppliersSearchTable thead, tbody.block {
    display: block;
}

table#suppliersSearchTable tbody.vertical-scroll {
    max-height: 60vh; /* support dynamic modal height (see class .modal-dialog-full-page). DO not use 800px or higher - Need to use browser scroll bar to see Select button */
    overflow-y: auto; /* table with vertical scroll */
    overflow-x: hidden;
}

table#suppliersSearchTable tr td {
    border: none !important;
}

.td-vertical-align {
    vertical-align: middle !important;
}

.div-table-wrapper-no-scroll {
    overflow: hidden!important; /* hide horizontal scrollbar after a table was shown with vertical scroll bar even though table is not wider than the parent div */
}

.div-table-wrapper-scrollbar {
    height: 550px;
    overflow: auto;
}

#complaintDetailsTableDiv.div-table-wrapper {
    margin-top: -15px;
}

/* space after table header and table body */
.div-table-wrapper tbody:before {
    content: "";
    display: block;
    line-height: 1px;
}

.div-table-wrapper table {
    width: 100%;
    border: 0 transparent;
}

.div-table-wrapper table th {
    position: sticky !important;
    top: 0!important;
    background: #e0ebeb;
    border-bottom: hidden!important;
    border-top: hidden!important;
}

/* remove horizontal border that is shown on top of each row when a table has "table-with-row-spacing" class */
.div-table-wrapper table tr td {
    border: none!important;
}

/* overwrite bootstrap 5 table-striped background color */
.table-striped-1 > tbody > tr:nth-child(odd) > td {
    background-color: #f2f2f2;
}

#complaintDetailsTable {
    word-break: break-word;
}

.table-with-row-spacing {
    border-collapse: separate;
    border-spacing: 0 0.35em;
}

.table-row-border {
    outline: 0.11em solid #d9e6f2;
}

/* rows with selected Suppliers have borders and need left and right spacing */
.table-layout-supplier-for-bordered-row {
    width: 99.8%;
    margin-left: 2px;
}

/* rows with selected Complaints have borders and need left and right spacing */
.table-layout-for-bordered-row {
    width: 99.5% !important; /* min width. higher values hide the right border of a selected row */
    margin-left: 2px;
}

.table-layout-for-bordered-row-scrollbar {
    width: 99.4%!important; /* min width. higher values hide the right border of a selected row */
    margin-left: 2px;
}

.selected-row {
    border: 2px solid #b3cce6;
    font-weight: bold;
    color: #025197;
}

.unselected-row {
    border: 0 transparent;
    font-weight: normal;
    color: -moz-default-color;
}

.caption-1 {
    text-align: center;
    caption-side: top !important;
    font-weight: 600 !important;
    color: #666666; /* accessibility */
    background: #f0f0f5;
}

.modal-dialog-full-page {
    width: 90%;
    max-height: 100%;
    max-width: none;
    top: 2% !important;
    left: 0.8% !important;
}

.modal-dialog-50 {
    width: 50%;
    max-width: none;
    top: 2% !important;
    left: 2% !important;
}

.modal-content-full-page {
    height: 85%;
    min-height: 85%;
    border-radius: 0;
}

.modal-error-md {
    max-width: 580px !important;
}

.modal-header-error-bg {
    background: #ffcc80;
}

.modal-header-background {
    background: #e6f0ff;
}

.modal-header-success {
    background: #5cb85c;
}

.textArea {
    padding-top: 14px; /* so that the top line is not partially covered by a label */
    color: #a3a3c2 !important;
    resize: none;
    height: 120px!important;
    font-family: "courier new", courier, monospace!important;lo/;......;l
}

.customHeader1 {
    color: rgb(60, 45, 53);
    font-size: 18px !important;
    font-weight: bold;
    padding-bottom: 15px;
}

.customHeader2 {
    color: rgb(60, 45, 53);
    font-size: 16px !important;
    padding-bottom: 15px;
}

.uppercase {
    text-transform: uppercase;
}

/* Accessibility compliant begins */
.copyright {
    color: #757575 !important;
    position: absolute;
    bottom: 10px;
    left: 10px;
    float: left;
    font-size: 12px !important;
}

.text-for-label {
    color: #025197 !important;
}

.ignore-label-processing {
    /* empty - for non-error label that should not be modified for accessibility */
}

.not-on-input {
    /* empty - for label that is not to be on text box input */
}

.required-hidden-input {
    /* empty - for hidden input that is required for form validation */
}

/* Accessibility compliant ends */

/*@media screen and (max-width: 570px) {
    .navbar-collapse .nav-item {
        left: -267px !important;
    }
}*/
/*.dropdown-toggle:active {
    border-color: red !important;
}*/
/*@media screen and (max-width: 478px) {*/
/* Firefox: smallest browser width on PC*/
/*.navbar-default .navbar-nav {
        background: black!important;
    }
    .navbar-collapse .nav-item {
        margin-top: -37px !important;
        background: #9acffe !important;
    }*/
/* position navbar dropdown without gap below navbar */
/*.navbar-default .navbar-nav > li > a {
        padding-top: 0px !important;*/ /* 12px has no gap. 13px has thin gap */
/*}
}*/
/*@media only screen and (max-width : 768px) {
    .navbar-collapse {*/
/*background-color: red!important;*/
/*margin-top: 0px !important;
        border-color: transparent !important;*/ /* overwrite white border */
/*}

    .navbar-collapse .dropdown {
        background: #005fb3 !important;
        margin-top: 0 !important;
        opacity: 0.9 !important;
    }

    .navbar-collapse .dropdown .dropdown-menu {
        background: white !important;
        opacity: 1 !important;
    }

    .navbar-default .navbar-nav > li > a {
        background: transparent !important;
        padding-top: 12px !important;
    }
}*/
.accordionTitleButton {
    /* empty - used to access accordion button elements */
}

.formNotValidated {
    /* empty - used to indicate a form that has never been validated */
}

.show-inprog-modal {
    /* empty - used for in-progress modal */
}

.resetButton {
    /* empty - used for reset buttons */
}

.dropDownSelected {
    /* empty - used for drop-down selected hidden input */
}

.addressVerified {
    /* empty - used for show/hide glyphicon*/
}

.static-label {
    /* empty - used to exclude label from hidden */
}

.default-dropdown-item {
    /* empty - used to specify default selected item  */
}

.inputMaxlength {
    /* empty - used to specify max number of characters for input */
}

.inputAddressMaxlength {
    /* empty - used to specify max number of characters for input */
}

.select-single {
    /* empty - used to change select option style */
}

.select-multiple-input {
    /* empty - for input element associated with select multiple */
}
.select-multiple {
    /* empty - used to allow ENTER as select */
}

.datepicker-input {
    /* empty - common datepicker properties */
}

.datepicker-input-date {
    /* empty - for datepicker - date
}

.datepicker-input-year {
    /* empty - for datepicker year */
}

.validateOnBlur {
    /* empty - for fields that are validated on blur by JQuery validator */
}

.helpCenterPhone {
    /* empty - used to replace default help center phone number with configuration value */
}

.consumer-address-at-least-one-required {
    /* empty - used to validate group of consumer address inputs which at least one is required. */
}

.consumerAddressReqGroup {
    /* empty - used for group of consumer domestic address inputs that must be all specified or unspecified. */
}

.consumerAddressGroup {
    /* empty - used for group of consumer domestic address optional inputs. */
}

.consumerIntlAddressReqGroup {
    /* empty - used for group of consumer international address inputs that must be all specified or unspecified. */
}

.consumerIntlAddressGroup {
    /* empty - used for group of consumer international address optional inputs. */
}

.businessAddRequiredGroup {
    /* empty - used for required inputs of a new supplier/business */
}

.radio-allow-uncheck {
    /* empty - allow radio button to uncheck */
}

.autoCompleteAddress {
    /* empty - used for inputs that have Google Auto-complete address */
}

.nextInputAfterAutoCompleteAddress {
    /* empty - used to focus the next input after auto complete address is filled */
}

.addrAutocompleteCheckbox {
    /* empty -used for checkboxes for address auto complete */
}

.addressOverride {
    /* empty - used for ALL divs that have manually-entered  address fields */
}

.usaAddressOverride {
    /* empty - used for div that has manually-entered domestic (USA) address fields */
}

.internationalAddressOverride {
    /* empty - used for div that has manually-entered international address fields */
}

.country-dropdown {
    /* empty - used for any country drop-down elements */
}

.search-country-dropdown {
    /* empty - used for search criteria country drop-down only */
}

.state-dropdown {
    /* empty - used for any state drop-down elements */
}

.search-state-dropdown {
    /* empty - used for search criteria state drop-down only */
}

.domesticPhoneSection {
    /* empty - used for domestic consumer and business (supplier) phones */
}

.intlPhoneSection {
    /* empty - used for international consumer and business (supplier) phones */
}

.overrideRequiredAddress {
    /* empty - used for required domestic address elements enter manually (i.e. override auto complete address) */
}

.overrideRequiredIntlAddress {
    /* empty - used for required international address elements enter manually (i.e. override auto complete address) */
}

.zipCode {
    /* empty - used for ZIP 5 digit code + 4 digits extension elements */
}

.search-zipCode {
    /* empty - used for search criteria ZIP 5 digit code element only */
}


.phone-with-ext {
    /* empty - used for phones with extension */
}

.intlphone-with-ext {
    /* empty - used for international phones with extension */
}

.phone-no-ext {
    /* empty - used for phones with no extension */
}

.intlphone-no-ext {
    /* empty - used for international phones with no extension */
}

.textAreaCharsCounter {
    /* empty - used for character counter of associated text area elements */
}

.required-dropdown-noDefault {
    /* empty - used for required dropdowns that have no non-blank default value */
}

.moneyInput {
    /* empty - used for money ($) inputs */
}

.personName {
    /* empty - for person first and last names elements */
}

.businessName {
    /* empty - for business/organization names elements */
}

.radioYesNoWithAssociatedInputs {
    /* empty - for yes/No radio buttons associated with other inputs */
}

.mileage {
    /* empty - for mileage integer number */
}

/* public record */

.date-range {
    /* empty - for pair of date range inputs */
}
.error-placeholder {
    /* empty - for error placeholder elements */
}

.search-criteria {
    /* empty - for group of elements which at least one must be specified */
}

.complaint-selection {
    /* empty - for checkboxes of complaint selections */
}

.no-leading-space {
    /* empty - for inputs with no leading space as typing */
}

.supplier-search-table {
    /* empty - for supplier search result table */
}

.tooltip-html {
    /* empty - for elements using bootstrap 5 tool-tip with HTML content */
}

/* Use this CSS file to overwrite styles defined in Site.css for Communication section compliance */
.accordion-background-image {
    /* background-image: linear-gradient(to bottom, #c3cfd5, #f0f3f5) !important;*/
    background-image: linear-gradient(to bottom, #b4c3cb, #f0f3f5) !important;
    border: none !important;
}

.numberCircle {
    border: 2px solid #465d6b !important;
}

.accordionCheckMark {
    color: #487870 !important;
}

.button-row-left-right > a:hover {
    background: #c3cfd5;
}

.button-row-left-mid-right > a:hover {
    background: #ced8dd;
}

.div-table-wrapper table th {
    /*background: #ced8dd !important;*/ /* table header background color of supplier search result table on a modal (ced8dd is the same as modal title background color) */
}

.caption-1 {
    background: #e1e7ea !important; /* complaint status caption text */
}

.fa-caret-down.select-arrow {
    color: #cccccc; /*#b2c2cd;*/
    font-size: 1.2em !important;
}

.fa-caret-up {
    color: #cccccc; /*#b2c2cd;*/
    font-size: 1.2em !important;
}

.fa-calendar {
    color: #cccccc;
}

/* Overwrite bootstrap styles */
.btn-primary {
    background-image: linear-gradient(to bottom, #7492a4 0%, #465d6b 100%);
    border-color: #b1c3cd;
    box-shadow: 0 0 0 0rem rgba(72, 120, 112, 0.5)
}

    .btn-primary:not(:disabled):not(.disabled).hover, .btn-primary:not(:disabled):not(.disabled):hover {
        background-image: linear-gradient(to bottom, #516b7b 0%, #465d6b 100%) !important;
        border-color: #b1c3cd !important;
    }

    .btn-primary:not(:disabled):not(.disabled).focus, .btn-primary:not(:disabled):not(.disabled):focus {
        background-image: linear-gradient(to bottom, #516b7b 0%, #465d6b 100%) !important;
        border-color: #b1c3cd !important;
    }

input[type=checkbox] {
    accent-color: #d2dbe0 !important;
}

input[type="radio"]:checked {
    /*  background-color: #487870 !important;*/
    background-color: #65869a !important;
}

.modal-title {
    background: #ced8dd !important;
}

.modal-title-error-bg {
    background: #ffcc80 !important; /* must be the same color as .modal-header-error-bg in Site.css */
}

.modal-header-background {
    background: #ced8dd !important; /* must be the same as .modal-title */
}

.modal-header-success {
    background: #ced8dd !important; /* #5cb85c for bootstrap green success color */
}

.dropdown-menu > li > a:hover {
    background-color: #e1e7ea !important;
}

select option:hover {
    background-color: #e1e7ea !important; /* same as .dropdown-menu > li > a:hover  */
}

/* selected option */
select option:focus,
select option:active,
select option:checked {
    background: linear-gradient(#b4c3cb, #b4c3cb) !important;
    background-color: #b4c3cb !important; /* for IE */
    color: #ffed00 !important;
}