:root {
    --header1: #19353e; /*almost black -#16353c;*/
    --header2: #4a6d77; /*dark dark blue -#2e6d7b;*/
    --backgrnd: #f5f2eb; /*No Change white*/
    --altbackgrnd: #aeb093; /*light green-gray*/
    --footer1: #73877b; /*light green-blue*/
    --footer2: #c57b57; /*No Change  orange */ 
    --text: #19353e; /*#4a6d77; instead of 2e6d7b, going to use 19353e*/
    --text2: #2e6d7b; /*dark blue*/
    --icon_light: #f5f2eb; /*No Change  cream*/
    --icon_dark: #19353e; /*almost black -#16353c;*/
}

body {
    padding-top: 10px;
    padding-bottom: 20px;
}

.nctestmsg{
    font-size: 1.3em;
}

.ncbanner {
    text-align: center;
    position: relative;
    z-index: 1000;
    min-height: 165px;
    margin-bottom: 5px;
    border: 1px solid transparent;
}

.ncbody {
    background-color: var(--header1);
    color: var(--backgrnd);
}

.nccontent {
    background-color: var(--backgrnd);
    color: var(--text);
}

.nclogo {
    width: 320px;
    height: 191px;
}

.ncsitename {
    text-align: center;
    font-size: x-large;
    font-weight: bold;
    font-style: italic;
    color: var(--backgrnd); /*var(--footer2);*/
}

.ncfooter {
    background-color: var(--header2); 
    color: var(--backgrnd);
}


a.mailIT:link {
    color: var(--backgrnd);
}

a.mailIT:hover {
    color: #030277; /*var(--footer2);*/
}

a.genLink:link, a.genLink:visited {
    color: var(--text);
}

a.genLink:hover, a.genLink:active {
    color: #ff0000; /*var(--header2);*/
}

.btnstd {
    background-color: var(--header2);
    border-color: var(--footer2);
    border-width: medium;
    padding: 3px;
    margin: 1px 4px 1px 4px;
    color: var(--backgrnd);
}

.btnstd:focus-visible {
    background-color: var(--backgrnd);
    border-color: var(--footer2);
    border-width: thick;
    padding: 1px 3px 1px 3px;
    color: var(--text);
}

.btnstd:hover {
    background-color: var(--backgrnd);
    border-color: var(--footer2);
    border-width: thick;
    padding: 1px 3px 1px 3px;
    color: var(--text);
}

.btnpay {
    position: center;
    background-image: url('/images/LexisNexis-PayOnlineText.jpg');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-color: var(--header2);
    color: var(--backgrnd);
    font-size: 14px;
    padding: 16px 4px 16px 160px;
    margin: 2px 5px 2px 5px;
    border: 4px var(--footer2) solid;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    white-space: normal;
}

.btnpay:hover {
    background-color: var(--backgrnd);
    border-color: var(--footer2);
    border: 5px var(--footer2) solid;
    padding: 15px 4px 15px 160px;
    color: var(--text);
}

.UpperCaseTextField {
    text-transform: uppercase;
}

.vert-bottom {
    vertical-align: bottom !important;
}

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

.StepLblCSS {
    background-color: var(--header2);
    color: var(--backgrnd);
    font-weight: bold;
}

.HeaderCSS {
    background-color: var(--header2);
    color: var(--backgrnd);
    font-weight: bold;
}

.ItemCSS {
    background-color: var(--backgrnd);
    color: var(--header1);
}

.AltItemCSS {
    background-color: var(--altbackgrnd);
    color: var(--header1);
}

.FooterCSS {
    background-color: var(--footer1);
    color: var(--backgrnd);
    text-align: right;
    font-family: Consolas;
}

.btnstyle {
    margin: 5px;
}

.btnfont {
    font-size: .75em;
}

.rbl input[type="radio"] {
    margin-top: .5em;
    margin-left: 1em;
    margin-right: .25em;
}

input[type="radio"] {
    position: relative;
    top: 2px;
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    margin: 0 5px 0 0;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 14px;
    background-color: var(--backgrnd);
    border: 2px solid var(--footer2);
    outline-color: transparent;
}

input[type="radio"]:focus {
    outline: none;
}

/* Apply a custom indicator ONLY when navigating via keyboard */
input[type="radio"]:focus-visible {
    outline: 2px dashed var(--footer1);
    outline-offset: 4px;
    border-radius: 45%; /* Matches the circular shape of the radio */
}

input[type="radio"]:checked:hover + label {
    color: #ff0000;
    font-weight: bold;
}

input[type="radio"]:before {
    content: '';
    display: block;
}

input[type="radio"]:checked:before {
    position: relative;
    top: 1px;
    left: 1px;
    box-sizing: content-box;
    width: 12px;
    height: 12px;
    margin: 0 5px 0 0;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 12px;
    background-color: var(--footer1);
    outline-color: transparent;
}

input[type="checkbox"] {
    position: relative;
    top: 2px;
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    margin: 0 5px 0 0;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 2px;
    background-color: var(--footer1);
    border: 2px solid var(--footer2);
}

input[type="checkbox"]:before {
    content: '';
    display: block;
}

input[type="checkbox"]:checked:before {
    width: 6px;
    height: 11px;
    margin: 0px 4px;
    border-bottom: 2px solid var(--backgrnd);
    border-right: 2px solid var(--backgrnd);
    transform: rotate(45deg);
}

.br {
    display: block;
    margin-bottom: 0em;
}

.brsmall {
    display: block;
    margin-bottom: -.1em;
}

.brxsmall {
    display: block;
    margin-bottom: -.2em;
}

@media screen and (max-width: 992px) {
    div.container {
        font-size: 12px;
    }
}

@media screen and (max-width:768px) {
    .addRightBorder-sm {
        border-right: 1px solid var(--header1);
    }

    .addLeftBorder-sm {
        border-left: 1px solid var(--header1);
    }
}