#progress-display {
    opacity: 0.8;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(Images/ajax-loading.gif);
    background-color: black;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 9996;
    display: none;
}
/*region BOOTSTRAP OVERRIDE */
.form-group:before,
.form-group:after {
    clear: both;
    content: ' ';
    display: table;
}

.lead {
    font-size: 32px;
}

.panel-title {
    font-weight: bold;
}

h1 {
    font-size: 1.9em;
}

h2 {
    font-size: 1.7em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.3em;
}

h5 {
    font-size: 1.0em;
}

h6 {
    font-size: 0.8em;
}

li.active > a {
    opacity: 0.6;
}

.tab-pane.in {
    background-color: #FFF;
    background-color: rgba(255,255,255,0.6);
    padding: 10px;
    border: #DDD solid;
    border-width: 0 1px 1px;
}

/*endregion*/

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

/**region TABLE STYLES*/
.table-nkr th, .table-nkr td {
    white-space: nowrap;
    text-align: center;
}

    .table-nkr th.text-left, .table-nkr td.text-left {
        text-align: left !important;
    }

.center-col-heading {
    height: 200px;
    white-space: nowrap;
    text-align: left !important;
    width: 50px;
}

    .center-col-heading > div {
        transform: translate(33px, 2px) rotate(315deg);
        width: 50px;
    }

        .center-col-heading > div > span {
            display: block;
            border-bottom: 1px solid #CCC;
            width: 200px;
        }

.custom-borders {
}

    .custom-borders > thead > tr > th, .custom-borders > tbody > tr > td {
        border: solid #CCC;
        border-width: 1px 0 0 0;
    }

    .custom-borders.cborder-outline tbody tr:last-child td {
        border-bottom-width: 1px;
    }

    .custom-borders.cborder-outline td:first-child, .custom-borders.cborder-outline th:first-child {
        border-left-width: 1px;
    }

    .custom-borders.cborder-outline td:last-child, .custom-borders.cborder-outline th:last-child {
        border-right-width: 1px;
    }

    .custom-borders.cborder-outline tr:last-child td {
        border-bottom-width: 1px;
    }

    .custom-borders .cborder-left {
        border-left-width: 1px !important;
    }

    .custom-borders .cborder-right {
        border-right-width: 1px !important;
    }

    .custom-borders .cborder-top {
        border-top-width: 1px !important;
    }

    .custom-borders .cborder-bottom {
        border-bottom-width: 1px !important;
    }

    .custom-borders .cborder-notop, .custom-borders > thead > tr.cborder-notop th, .custom-borders > tbody > tr.cborder-notop td {
        border-top-width: 0 !important;
    }
/**endregion */
.hashnav-section {
    margin-top: -60px;
    padding-top: 60px;
}

.footer-text {
    font-size: 24px;
    font-style: italic;
    margin-top: 40px;
    text-align: center;
    font-weight: bold;
}

.main-content {
    background-color: rgba(245, 245, 245, 0.85);
    padding: 0 20px 20px;
    min-height: 400px;
}

.form-required {
    color: red;
}

.bg-image {
    display: none;
}

.no-bg {
    background: none !important;
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 0;
}

.btn-problem {
    background-color: #F5F599;
    color: black;
}

.bg-image {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/Content/Images/treeoflife.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: -1;
}

.sub-question {
    margin-left: 20px;
    margin-bottom: 15px;
    /*padding-bottom: 10px;*/
    border: 1px solid #CCC;
    border-width: 0 0 0 1px;
}

.sub-question-noborder {
    margin-left: 20px;
    margin-bottom: 15px;
    /*padding-bottom: 10px;*/
    border: 1px solid #CCC;
    border-width: 0 0 0 1px;
}

/* Residency sub-questions keep the indent but drop the left rule: the registration
   page is a landing page, not the questionnaire where that rule reads as nesting. */
.sub-question.sub-question-no-rule {
    border-left-width: 0;
}

/*#region GRID/ROW SYSTEM */
.block {
    display: block;
}

.row-margined {
    margin-top: 10px;
    margin-bottom: 10px;
}

.row-margined-first {
    margin-top: 10px;
    margin-bottom: 5px;
}

.row-margined-last {
    margin-bottom: 10px;
}

.rows-striped .row {
    border: solid #CCC;
    border-width: 1px 0 0 0;
    padding-top: 15px;
    padding-bottom: 20px;
}

    .rows-striped .row:nth-child(odd) {
        background-color: #F9F9F9;
    }
/*#endregion GRID/ROW SYSTEM*/

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* 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 width on the form input elements since they're 100% wide by default */
.table-nkr th, .table-nkr td {
    white-space: nowrap;
    text-align: center;
}

    .table-nkr th.text-left, .table-nkr td.text-left {
        text-align: left;
    }

    .table-nkr th.text-right, .table-nkr td.text-right {
        text-align: right;
    }

.img-responsive {
    width: 100%;
}

.rounded-corners-5 {
    border-radius: 5px;
}

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
    content: "\e114"; /* adjust as needed, taken from bootstrap.css */
    float: right; /* adjust as needed */
    color: grey; /* adjust as needed */
}

.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}

.panel-heading .accordion-toggle-left {
    padding-left:10px;
}
.panel-heading .accordion-toggle-left:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
    content: "\e114"; /* adjust as needed, taken from bootstrap.css */
    float: left; /* adjust as needed */
    color: inherit; /* adjust as needed */
}

.panel-heading .accordion-toggle-left.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
.section-heading {
    margin-bottom: 3px;
}

h1.section-heading {
    border: solid #DDD;
    border-width: 0 0 1px 0;
    margin-bottom: 20px;
}

h2.section-heading {
    border: solid #DDD;
    border-width: 0 0 1px 0;
    margin-bottom: 20px;
}

h3.section-heading {
    border: solid #DDD;
    border-width: 0 0 1px 0;
    margin-bottom: 10px;
}
/* Override the default bootstrap behavior where nav-bar invesre text is grey, now
    it will be white 
*/
.navbar-inverse .navbar-brand {
    color: #dddddd;
}

.navbar-inverse .navbar-text {
    color: #dddddd;
}

.navbar-inverse .navbar-nav > li > a {
    color: #dddddd;
}

    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
        color: #ffffff;
    }

/* @media CONTROLS "try to create "mobile-up" - .text-left-xs, .text-left-sm examples below are mobile-up */

.text-left-xs {
    text-align: left !important;
}

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

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

.responsive-table {
}

    .responsive-table .row {
        margin: 0 0 0 0;
    }

    .responsive-table > .row-thead > .row > *[class^="col-"], .responsive-table > .row-tbody > .row > *[class^="col-"] {
        padding: 5px !important;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .responsive-table .row-thead {
        border: solid #CCC;
        border-width: 0 0 1px 0;
        background-color: #003300;
        color: white;
        font-weight: bold;
    }

    .responsive-table > .row-tbody > .row:nth-child(odd) {
        background-color: white;
    }

    .responsive-table > .row-tbody > .row:nth-child(even) {
        background-color: #F2F2F2;
    }


/**region COMPONENTS */

a.call-to-action {
    display: block;
    color: #000;
    font-size: 22px;
    border-radius: 5px;
    text-align: center;
    line-height: 28px;
    padding: 22px;
    background: #E8A288;
    margin: 10px 0;
    max-width: 100%;
}

a:link.call-to-action, a:visited.call-to-action {
    color: #000;
    text-decoration: none;
}

a:hover.call-to-action, a:active.call-to-action {
    color: #333;
    text-decoration: none;
    background: #CE8165; /* Old browsers */
}
/**endregion COMPONENTS */

a.link-inverse:link, a.link-inverse:visited { color:white; }
a.link-invrese:active, a.link-inverse:hover { color:#EEE; }

@media only screen and (max-width:479px) {
    .progress-tracker > * {
        font-size: 10px !important;
        height: 70px !important;
        padding: 0 !important;        
    }

        .progress-tracker > *:not(:last-child):after {
            width: 50px !important;
            height: 50px !important;
            right: 0 !important;
            -webkit-transform: translate(25px,13px) rotate(135deg) !important;
            -moz-transform: translate(25px,13px) rotate(135deg) !important;
            -ms-transform: translate(25px,13px) rotate(135deg) !important;
            -o-transform: translate(25px,13px) rotate(135deg) !important;
            transform: translate(25px,13px) rotate(135deg) !important;
        }

        .progress-tracker > *:last-child:after {
            height: 70px !important;
        }

    .progress-tracker .text {
        left: 15px !important;
        text-align: end !important;
        line-height: 10px !important;
    }

    .primary.clickable > .text {
        left: 4px !important;
    }

    .progress-tracker .clickable .text::after {
        right: -20px !important;
    }

    .progress-tracker .helpText {
        top: 75px !important;
    }
}

@media only screen and (max-width:768px ) { /** mobile only **/
    .visible-xs-inline {
        display: inline !important;
    }

    .jumbotron {
        padding: 0;
    }

        .jumbotron h1 {
            text-align: center;
        }

        .jumbotron .lead {
            font-size: 1.2em;
            text-align: center;
        }

    .homepage-form {
        padding: 0px;
    }

    .xsonly-padtop {
        margin-top: 8px;
    }

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

    .xsonly-text-right {
        text-align: right;
    }

    .xsonly-text-left {
        text-align: left;
    }

    .xsonly-block {
        display: block;
    }

    .xsonly-block-center {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .xsonly-bold {
        font-weight: bold;
    }


    .responsive-table > .row-thead > .row > *[class^="col-"] {
        border: solid #004400;
        border-width: 1px 0 0;
    }

    .responsive-table > .row-tbody > .row > *[class^="col-"] {
        border: solid #EEE;
        border-width: 1px 0 0;
    }

    .responsive-table > .row-tbody > .row {
        margin-top: 3px;
        border: solid #000;
        border-width: 1px 0 0 0;
    }
}

@media only screen and ( min-width:768px ) {
    .text-left-sm {
        text-align: left !important;
    }

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

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

    .jumbotron h1 {
        font-size: 48px;
    }

    .homepage-form {
        padding: 0 50px;
    }

    .row-sm-flex-center {
        display: flex;
        align-items: center;
    }
}

@media only screen and ( min-width: 992px ) {
    .text-left-md {
        text-align: left !important;
    }

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

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

    .row-md-flex-center {
        display: flex;
        align-items: center;
    }
}

@media only screen and ( min-width: 1200px ) {
    .text-left-lg {
        text-align: left !important;
    }

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

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

    .row-lg-flex-center {
        display: flex;
        align-items: center;
    }
}

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

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

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

.larger {
    font-size: 1.2em;
}

.smaller {
    font-size: 0.8em;
}

.summary-data-mobile {
    margin-left: 10px;
}

@media only screen and (max-width: 991px) {
    .summary-label-mobile {
        margin-top: 10px;
    }

    /*.container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

        .container-fluid > .row > .col-xs-12 {
            padding-left: 5px;
            padding-right: 5px;
        }*/

    .panel-body {
        padding-left: 10px;
        padding-right: 5px;
    }

    /*div.row-margined > div.col-xs-12 {
        padding-left: 10px;
        padding-right: 10px;
    }*/

    .summary-mobile-content {
        padding-left: 7px;
        padding-right: 7px;
    }

    .radio-inline + .radio-inline {
        margin-left: 0px;
    }
}

div.form-group > div.col-xs-12 {
    margin-left: 5px;
}

div.layout-notselected-light {
    background-color: white !important;
    border: 1px solid silver;
    cursor: pointer;
    padding: 5px;
}

div.layout-notselected-dark {
    background-color: #1a1a1a !important;
    color: white;
    border: 1px solid silver;
    cursor: pointer;
    padding: 5px;
}

div.layout-selected-light {
    background-color: white !important;
    border: 3px solid blue;
    cursor: pointer;
    padding: 5px;
}

div.layout-selected-dark {
    background-color: #1a1a1a !important;
    color: white;
    border: 3px solid red;
    cursor: pointer;
    padding: 5px;
}

div.preview {
    display: none;
    z-index: 9999;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.microsite-buttons {
    display: flex;
    justify-content: space-between;
}

.microsite-buttons-mobile > button {
    margin-bottom: 5px;
}

@media only screen and (max-width: 414px) {
    .microsite-buttons-mobile {
        display: block;
    }

    .microsite-buttons {
        display: none;
    }
}

@media only screen and (min-width: 415px) {
    .microsite-buttons-mobile {
        display: none;
    }

    .microsite-buttons {
        display: flex;
    }
}

div.image-actions {
    display: flex;
    justify-content: center
}

@media only screen and (max-width: 414px) {
    div.image-actions > div {
        margin-top: 5px;
    }
}

footer div.col-xs-6:nth-child(1) {
    padding-right: 0px;
}

footer div.col-xs-6:nth-child(2) {
    padding-left: 0px;
}

footer div.footer-left-side {
    background-color: rgba(245, 245, 245, 0.85);
    padding: 5px 5px 5px 10px;
}

footer div.footer-support-phone {
    background-color: rgba(245, 245, 245, 0.85);
    padding: 5px 10px 5px 5px;
}

.dash-step {
    width: 100%;
    height: 100px;
    margin: 0;
    background-color: #EEE;
    border: 1px solid #999;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    text-align: center;
    color: #000;
}

.dash-step.inactive {
    background-color: #EEE;
    color: #999;
}

.dash-step.active {
    background-color: #27629c;
    color: #FFF;
}

.dash-step-btn {
    width: 100%;
    margin: 5px 0 0;
}



.progress-tracker-wrapper {
    padding-right: 36px;
}

.progress-tracker {
    padding: 20px;
    display: flex;
    gap: 0;
}

    .progress-tracker > * {
        flex: 1 1 0;
        min-width: clamp(50px, 10%, 100px);
        position: relative;
        height: 100px;
        line-height: 100px;
        padding: 0 20px;
        border: 1px solid #ccc;
        margin-right: 4px;
        background-color: #EEE;
        display: flex;
        align-items: center;
    }

        .progress-tracker > *:not(:last-child):after {
            content: '';
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            width: 71px;
            height: 71px;
            position: absolute;
            right: 2px;
            top: -4px;
            background-color: #EEE;
            z-index: 150;
            -webkit-transform: translate(37px,18px) rotate(135deg);
            -moz-transform: translate(37px,18px) rotate(135deg);
            -ms-transform: translate(37px,18px) rotate(135deg);
            -o-transform: translate(37px,18px) rotate(135deg);
            transform: translate(37px,18px) rotate(135deg);
            clip-path: polygon(0 0, 100% 0, 0 100%) !important;
        }

        .progress-tracker > *:not(:first-child) {
            flex-basis: 60px;
            margin-left: 0;
        }

        .progress-tracker > *:last-child:after {
            content: '';
            border: 1px solid #ccc;
            border-width: 1px 1px 1px 0;
            width: 35px;
            height: 100px;
            position: absolute;
            right: -35px;
            background-color: #EEE;
            z-index: 150;
        }

        .progress-tracker > *.clickable {
            cursor: pointer;
            font-weight: bold;
        }

        .progress-tracker > *.success, .progress-tracker > *.success:after {
            background-color: #198754;
            color: white;
        }

            .progress-tracker > *.success.clickable:hover, .progress-tracker > *.success.clickable:hover:after {
                background-color: #106d42;
            }

        .progress-tracker > *.primary, .progress-tracker > *.primary:after {
            background-color: #0d6efd;
            color: white;
        }

            .progress-tracker > *.primary.clickable:hover, .progress-tracker > *.primary.clickable:hover:after {
                background-color: #0856cc;
            }

        .progress-tracker > *.warning, .progress-tracker > *.warning:after {
            background-color: #ffc107;
            color: black;
        }

            .progress-tracker > *.warning.clickable:hover, .progress-tracker > *.warning.clickable:hover:after {
                background-color: #ca9a08;
            }

        .progress-tracker > *.danger, .progress-tracker > *.danger:after {
            background-color: #dc3545;
            color: white;
        }

            .progress-tracker > *.danger.clickable:hover, .progress-tracker > *.danger.clickable:hover:after {
                background-color: #ac212f;
            }

    .progress-tracker .text {
        position: relative;
        left: 20px;
        z-index: 200 !important;
        text-align: center;
        line-height: 20px;
        width: 100%;
    }

    .primary.clickable > .text {
        left: 0;
    }

    .progress-tracker .helpText {
        position: absolute;
        top: 100px;
        left: 20px;
        text-align: center;
        line-height: 12px;
        font-size: 12px;
        width: 100%;
        z-index: 200 !important;
        color: #000;
    }

    .progress-tracker .success .text::after {
        content: "";
        position: absolute;
        right: -30px; /* tweak position */
        top: 50%;
        width: 30px;
        height: 30px;
        transform: translateY(-50%);
        pointer-events: none;
        opacity: .38;
        background-color: currentColor;
        -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\
<path fill="%23fff" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>\
<path fill="%23fff" d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>\
</svg>') center / 100% 100% no-repeat;
        mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\
<path fill="%23fff" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>\
<path fill="%23fff" d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>\
</svg>') center / 100% 100% no-repeat;
    }

    .progress-tracker .clickable .text::after {
        content: "";
        position: absolute;
        right: -50px; /* tweak position */
        top: 50%;
        width: 30px;
        height: 30px;
        transform: translateY(-50%);
        pointer-events: none;
        opacity: .80;
        background-color: currentColor;
        -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\
<path fill="%23fff" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z"/>\
</svg>') center / 100% 100% no-repeat;
        mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\
<path fill="%23fff" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z"/>\
</svg>') center / 100% 100% no-repeat;
    }

/* Advance Reinbursement Styling |start| */

@media (max-width: 767px) {
    #center-table { display: block; width: 100%; }
    #center-table thead { display: none; }
    #center-table tbody { display: block; width: 100%; }
    #center-table tbody tr { display: block; width: 100%; border-bottom: 1px solid #ddd; }
    #center-table tbody td { display: block; width: 100%; box-sizing: border-box; text-align: left; border-top: none !important; white-space: normal; }
    #center-table .center-selection-btn { width: 100%; box-sizing: border-box; float: none; }
}

.filter-bar { background-color: #c8102e; border-radius: 4px; padding: 15px; color: #fff; }
.filter-bar h4 { color: #fff; }
.filter-bar .control-label { color: #fff; font-weight: normal; }
.btn-filter { background-color: #fff; color: #333; border-color: #fff; font-weight: bold; }
.icon-nkr-red, .text-nkr-red { color: #c8102e; }
.btn-nkr-red { background-color: #c8102e; border-color: #c8102e; color: #fff; }
.btn-nkr-red:hover, .btn-nkr-red:focus { background-color: #a30d26; border-color: #a30d26; color: #fff; }
.text-ineligible, .text-ineligible-row { color: #666 !important; }
#center-table thead th { background-color: #e5e5e5; }
#center-table thead th a { color: inherit; text-decoration: none; }
#center-table { table-layout: fixed; }
#center-table td:first-child, #center-table th:first-child { white-space: normal; }
#center-table.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fff; }
#center-table > tbody > tr > td { font-weight: 500; }
#center-table > tbody > tr.success > td { background-color: #fff; }
#center-table > tbody > tr.success:hover > td, #center-table > tbody > tr.success:focus-within > td { background-color: #edfff0; }
#center-table > tbody > tr.warning > td { background-color: #fff; }
#center-table > tbody > tr.warning:hover > td, #center-table > tbody > tr.warning:focus-within > td { background-color: #fffced; }
#center-table > tbody > tr.text-ineligible-row > td { background-color: #f9f9f9; }
#center-table .btn-success { background-color: #008a00; border-color: #008a00; }
#center-table .btn-success:hover, #center-table .btn-success:focus { background-color: #007300; border-color: #007300; }

@media (min-width: 768px) {
    body.select-center-page .container { width: 76.39%; }
}

/* Advance Reinbursement Styling |end| */

/* Validation summary: white text on solid red, replacing Bootstrap's dark-red-on-pink.
   Scoped to .validation-summary so the non-production "test server" banner, which also
   uses .alert-danger, keeps its existing style. */
.alert-danger.validation-summary {
    color: #FFFFFF;
    background-color: #CE0E2D;
    border-color: #CE0E2D;
}