:root {
    --dx-flex-blue: #003771;
    --dx-black-blue: #102739;
    --dx-medium-black-blue: #386493;
    --dx-light-black-blue: #7093b7;
    --dx-grayer-black-blue: #2e4667;
    --dx-web-blue: #0094d7;
    --dx-darker-blue: #0073ba;
    --dx-dark-green: #5eb700;
    --dx-green: #84c016;
    --dx-light-green: #b5dc39;
    --dx-lime-green: #d1e962;
    --dx-30-perent-lime: #f1f8d0;
    --dx-100-percent-cyan: #00adef;
    --dx-65-percent-cyan: #8dd7f8;
    --dx-5-percent-cyan: #f4fbfe;
    --dx-30-percent-cyan: #caebfc;
    --dx-bright-orange: #ff8c5c;
    --dx-salmon: #ffc5ad;
    --dx-light-bright-orange: #fff2d3;
    --dx-lightest-gray: #f9fafb;
    --dx-light-gray: #eef0f3;
    --dx-50-medium-gray: #d4d8de;
    --dx-medium-gray: #aab2bd;
    --dx-darker-medium-gray: #8c949e;
    --dx-lighter-cool-dark-gray: #656d78;
    --dx-cool-dark-gray: #485263;
}


html {
    height: 100%;
}

body {
    height: 100vh;
    overflow-x: hidden;
    color: var(--dx-cool-dark-gray);
    font-family: Lato,Helvetica,sans-serif;
}

form {
    height: 100%;
}

/**/

/*input[data-useragent*='MSIE 10.0'] {*/

/*    line-height: 1 !important;*/

/*}*/

/* this media query is supposed to identify IE10... possibly also IE11? Edge? */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    input.form-control {
        line-height: 1 !important;
    }

    .my-plan {
        height: 100%;
    }
}

/*This pseudo-element is non-standard, supported only in Internet Explorer 10, Internet Explorer 11, and Microsoft Edge. 
    The clear button is only shown on focused, non-empty text controls. It is added here to clear the cross button showing up in the text boxes in edit mode.*/

.form-control::-ms-clear {
    display: none;
}


/*

  Section: FLEX LAYOUT AND STICKY ITEMS
  Purpose: Styles for sticky sections

*/

/*
    2018-12-03 vs. dx-flex-container and the rest work fine for Enrolment steps (or do they?),
    not so much for EnrolmentOverview / inside account management. So the following
    styles are defined for those, for now.
*/

@media (max-width: 991.98px) {
    /*    .dx-no-scroll { overflow-y: hidden; }*/

    .dx-scroll {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
}

@media (min-width: 992px) {
    .dx-lg-no-scroll {
        overflow-y: hidden;
    }

    .dx-lg-scroll {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        overflow-x: hidden;
    }
}


.dx-flex-container {
    overflow-x: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}

.dx-flex-sub-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* Pushes footer down to bottom on a short page */

.dx-main-content {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

/* sticky header & main content and footer will share scroll */

.dx-flex-scroll {
    -webkit-overflow-scrolling: touch;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: visible;
}

.dx-header {
    -ms-flex: none;
    flex: none;
}

.dx-footer {
    -ms-flex: none;
    flex: none;
}

@media (min-width: 992px) {
    /*using position: fixed to be compatible with all browsers. IE does not support sticky */
    .dx-sticky-totals {
        position: fixed;
        top: 0;
        z-index: 1020;
    }

    /* unsticks header */
    .dx-flex-scroll {
        overflow-y: visible;
    }
}

@media (max-width: 991.98px) {
    /*using position: fixed to be compatible with all browsers. IE does not support sticky */
    .dx-sticky-totals-small {
        position: fixed;
        top: 0;
        z-index: 1020;
    }

    .dx-sticky-header-small {
        position: fixed;
        top: 0;
        z-index: 1020;
    }

    .dx-under-sticky-header {
        padding-top: 68px;
    }

    /* unsticks header */
    .dx-flex-scroll {
        overflow-y: visible;
    }
}

/* End Section: FLEX LAYOUT AND STICKY ITEMS */

.btn:focus, .btn:hover {
    box-shadow: none;
    /*font-weight: bolder;*/
}

a {
    text-decoration: none;
    outline: none;
}

    a:hover,
    a:visited,
    a:active,
    a:focus {
        text-decoration: none;
        outline: none;
        box-shadow: none;
    }

.accordion .card-header a {
    font-size: 1.125rem;
    font-weight: bold;
}

    .accordion .card-header a:hover {
        color: var(--dx-web-blue) !important;
    }

/*

  Section: FORM ELEMENTS
  Purpose: Styles for readonly and updateable form elements

*/

.dx-label-gray {
    color: var(--dx-50-medium-gray);
}

.dx-blue-question {
    color: var(--dx-100-percent-cyan);
}

/* Styles for DIV that sourrounds form elements */

.dx-form-group {
    border-bottom: .0625rem solid var(--dx-light-gray) !important;
    border-top: .0625rem solid var(--dx-light-gray) !important;
}

.dx-form-group-dependents {
    border-top: .0625rem solid var(--dx-light-gray) !important;
}

/* Style to turn off borders */

@media (max-width: 575px) {
    .dx-form-group {
        border-bottom: 0 !important;
        border-top: 0 !important;
    }
}

.dx-basic-table-header {
    background-color: var(--dx-5-percent-cyan);
}

.dx-basic-table-header.error {
    border-top: .0625rem solid var(--dx-bright-orange);
    border-bottom: .0625rem solid var(--dx-bright-orange);
}

.dx-basic-table-header.error span {
    color: var(--dx-bright-orange);
}

/* Styles for the LABEL element of a non-editable 'Field labels' in design document */

.dx-form-field-label {
    color: var(--dx-cool-dark-gray);
    font-weight: bold;
}

.form-group.is-invalid .dx-form-field-label {
    color: var(--dx-bright-orange);
}

/* Styles for the LABEL element of a editable 'Basic table' in design document */

.dx-basic-table-label {
    color: var(--dx-cool-dark-gray);
    font-weight: bold;
    border-bottom: .0625rem var(--dx-light-gray);
    border-top: .0625rem var(--dx-light-gray);
    background-color: var(--dx-5-percent-cyan);
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    display: -ms-flexbox;
    display: flex;
}

.dx-data-table-control-cell {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    display: -ms-flexbox;
    display: flex;
}

.dx-basic-table-label-update {
    color: var(--dx-cool-dark-gray);
    font-weight: bold;
    border-bottom: .0625rem var(--dx-light-gray);
    border-top: .0625rem var(--dx-light-gray);
    background-color: var(--dx-5-percent-cyan);
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 575px) {
    .dx-basic-table-label-update {
        background-color: white;
    }

    .row.mb-0.is-invalid > .dx-data-table-row-update {
        margin-bottom: inherit !important;
    }
}

.dx-basic-table-label-altoption {
    color: var(--dx-cool-dark-gray);
    font-weight: bold;
    border-bottom: 0;
    border-top: 0;
    background-color: var(--dx-5-percent-cyan);
}

.dx-data-table-row {
    color: var(--dx-cool-dark-gray);
    border-bottom: .0625rem solid var(--dx-light-gray);
    border-top: 0;
}

.dx-data-table-row.error {
    border-bottom: .0625rem solid var(--dx-bright-orange);
}

.dx-data-table-row-update {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    display: -ms-flexbox;
    display: flex;
}

.dx-data-table-row-alter {
    color: var(--dx-cool-dark-gray);
    background-color: var(--dx-5-percent-cyan);
    border-bottom: .0625rem solid var(--dx-5-percent-cyan);
    border-top: 0;
}

.dx-data-table-header {
    border-bottom: .0625rem solid var(--dx-web-blue);
    font-weight: bold;
}

.dx-data-table-row-header {
    font-weight: bold;
    background-color: var(--dx-5-percent-cyan);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.dx-data-table-label {
    background-color: transparent;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.dx-data-table-sub-label {
    font-weight: 500;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.dx-data-table-row-information {
    color: var(--dx-web-blue);
    font-size: 0.75rem;
    font-weight: bold;
    font-style: italic;
}

.dx-data-table-number-alignment {
    text-align: right;
}

.dx-data-table-row-header-disabled {
    color: var(--dx-medium-gray);
    background-color: var(--dx-5-percent-cyan);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.dx-data-table-label-disabled {
    color: var(--dx-medium-gray);
    background-color: transparent;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.dx-data-table-row-information-disabled {
    color: var(--dx-medium-gray);
    font-size: 0.75rem;
    font-weight: bold;
    font-style: italic;
}

.dx-data-break {
    word-wrap: break-word;
}

.dx-accordion-expanded-description {
    border-bottom: 0.15rem solid var(--dx-web-blue);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Styles for the INPUT element in a form */

.dx-form-textbox {
    border: solid .0625rem var(--dx-50-medium-gray) !important;
    background-color: var(--dx-lightest-gray) !important;
    min-width: 50px;
}

    .dx-form-textbox::-ms-clear {
        display: none;
    }

    .dx-form-textbox:focus {
        outline: none;
        box-shadow: 0 0 .3125rem var(--dx-medium-gray);
        background-color: white !important;
        transition: box-shadow .5s linear;
    }

.dx-form-field-label-dark {
    color: white;
    font-weight: bold;
}

/* Styles for the SELECT element in a form based on 'DROP DOWNS' in the design document */

select {
    -moz-appearance: none;
    -webkit-appearance: none;
}

    select::-ms-expand {
        display: none;
    }

.dx-form-dropdown-dark {
    border: solid .0625rem white !important;
    background-color: white !important;
}

    .dx-form-dropdown-dark:focus {
        outline: none;
        box-shadow: 0 0 .3125rem white;
        background-color: white !important;
        transition: box-shadow .5s linear;
    }

.dx-form-dropdown {
    border: solid .0625rem var(--dx-50-medium-gray) !important;
    background-color: var(--dx-lightest-gray) !important;
}

    /* Change style when drop down box gets focus */

    .dx-form-dropdown:focus {
        outline: none;
        box-shadow: 0 0 .3125rem var(--dx-medium-gray);
        background-color: white !important;
        transition: box-shadow .5s linear;
    }

    /* Style when select element option is hovered */

    .dx-form-dropdown > option:hover, .dx-form-dropdown-dark > option:hover {
        color: white;
        background-color: var(--dx-web-blue) !important;
    }

/* Styles for the drop down arrow */

.dx-form-dropdown-arrow {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
}

    /* Styles for the drop down arrow */

    .dx-form-dropdown-arrow:after {
        /*background-color: var(--dx-lightest-gray) !important;*/ /* Causes the entire area not to be selectable in IE10 */
        background-color: transparent;
        /*border-bottom: solid .0625rem var(--dx-50-medium-gray) !important;
        border-top: solid .0625rem var(--dx-50-medium-gray) !important;
        border-right: solid .0625rem var(--dx-50-medium-gray) !important;*/
        border-radius: 5px;
        box-sizing: border-box;
        color: var(--dx-web-blue);
        content: "\f0d7";
        display: block;
        font-family: FontAwesome;
        height: calc(2.25rem + 2px);
        padding: .25rem .5rem;
        pointer-events: none;
        position: absolute;
        right: 0;
        text-align: center;
        top: .375rem;
        width: 2.5rem;
        /*z-index: 1;*/
    }

.form-group.is-invalid .dx-form-dropdown-arrow:after {
    /*border-bottom: solid .0625rem var(--dx-bright-orange) !important;
        border-top: solid .0625rem var(--dx-bright-orange) !important;
        border-right: solid .0625rem var(--dx-bright-orange) !important;*/
    color: var(--dx-bright-orange);
}

/* End Section: FORM ELEMENTS */

/*

  Section: BUTTONS
  Purpose: All styles for buttons including link buttons

*/

/* overriding button style for dark screen */

.dx-btn-light-on-dark,
.dx-btn-light-on-dark:focus,
.dx-btn-light-on-dark:hover {
    box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(19,55,90,0.5) !important;
}

/* end of overriding button style for dark screen */


/* section header BUTTON */

.dx-btn-section-header,
.dx-btn-section-header:focus,
.dx-btn-section-header:hover {
    box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(19,55,90,0.5) !important;
    font-size: 1rem !important;
}

/* section header button style for dark screen */

/* Styles for the green BUTTON element */

.dx-btn-green {
    background-image: linear-gradient(to bottom, var(--dx-light-green), var(--dx-dark-green));
    border: var(--dx-dark-green) .0625rem !important;
    color: white !important;
    font-weight: bold !important;
    min-width: 100px;
    box-shadow: .0625rem .0625rem 0.25rem var(--dx-medium-gray);
    transition: border-color 0.2s;
    transform: scale(0.98);
    font-size: 1.125rem;
}

    .dx-btn-green:focus,
    .dx-btn-green:hover {
        background-image: linear-gradient(to bottom, var(--dx-lime-green), var(--dx-green));
        border: var(--dx-green) .0625rem !important;
        transition: background-image 0.2s;
        box-shadow: .0625rem .0625rem 0.25rem var(--dx-medium-gray);
    }

    .dx-btn-green:active {
        outline-style: none;
        background: var(--dx-green) !important;
        border: var(--dx-dark-green) .0625rem !important;
        box-shadow: none;
    }

    .dx-btn-green:disabled {
        opacity: 0.25;
        box-shadow: none;
    }

        .dx-btn-green:disabled:hover {
            background-image: linear-gradient(to bottom, var(--dx-light-green), var(--dx-dark-green));
            border-color: var(--dx-dark-green);
        }

/* Styles for the blue BUTTON element */

.dx-btn-blue, .dx-btn-blue-enabled {
    background-image: linear-gradient(to bottom, var(--dx-100-percent-cyan), var(--dx-darker-blue));
    border: var(--dx-darker-blue) .0625rem !important;
    color: white;
    font-weight: bold !important;
    min-width: 100px;
    box-shadow: .0625rem .0625rem .25rem var(--dx-medium-gray);
    transition: border-color 0.2s;
    transform: scale(0.98);
    font-size: 1.125rem;
}

    .dx-btn-blue:focus,
    .dx-btn-blue:hover {
        background-image: linear-gradient(to bottom, var(--dx-65-percent-cyan), var(--dx-100-percent-cyan));
        border: var(--dx-100-percent-cyan) .0625rem !important;
        transition: background-image 0.2s;
        box-shadow: .0625rem .0625rem 0.25rem var(--dx-medium-gray);
    }

    .dx-btn-blue:active {
        outline-style: none;
        background: var(--dx-web-blue) !important;
        border: var(--dx-darker-blue) .0625rem !important;
        box-shadow: none !important;
    }

    .dx-btn-blue:disabled {
        opacity: 0.25;
        box-shadow: none;
    }

        .dx-btn-blue:disabled:hover {
            background-image: linear-gradient(to bottom, var(--dx-100-percent-cyan), var(--dx-darker-blue));
            border-color: var(--dx-darker-blue);
        }

.dx-btn-blue-angle {
    font-weight: bold !important;
}

/* Styles for the gray BUTTON element */

.dx-btn-gray, .dx-btn-gray-disabled {
    background-image: linear-gradient(to bottom, white, var(--dx-light-gray));
    border: var(--dx-light-gray) .0625rem !important;
    color: var(--dx-darker-medium-gray);
    font-weight: bold !important;
    min-width: 100px;
    box-shadow: .0625rem .0625rem .25rem var(--dx-medium-gray);
    transition: border-color 0.2s;
    transform: scale(0.98);
    font-size: 1.125rem;
}

    .dx-btn-gray:focus,
    .dx-btn-gray:hover {
        background-image: linear-gradient(to bottom, white, var(--dx-lightest-gray));
        border: var(--dx-light-gray) .0625rem !important;
        transition: background-image 0.2s;
        box-shadow: .0625rem .0625rem 0.25rem var(--dx-medium-gray);
        color: var(--dx-darker-medium-gray) !important;
    }

    .dx-btn-gray:active {
        outline-style: none;
        background: var(--dx-light-gray) !important;
        border: var(--dx-50-medium-gray) .0625rem !important;
        box-shadow: none;
    }

    .dx-btn-gray:disabled {
        opacity: 0.25;
        box-shadow: none;
    }

        .dx-btn-gray:disabled:hover {
            background-image: linear-gradient(to bottom, white, var(--dx-light-gray));
            border-color: var(--dx-light-gray);
        }

.dx-btn-gray-angle {
    color: var(--dx-100-percent-cyan);
    font-weight: bold !important;
}

/* Styles for the A element */


.dx-btn-link {
    font-weight: bold !important;
}

    .dx-btn-link a {
        background-color: transparent;
        color: var(--dx-web-blue);
        font-weight: bold !important;
    }

        .dx-btn-link a:focus,
        .dx-btn-link a:hover {
            background-color: transparent;
        }

        .dx-btn-link a:disabled {
            color: var(--dx-lighter-cool-dark-gray);
        }


.dx-link-light-on-dark {
    color: white;
    text-decoration: underline;
}

    .dx-link-light-on-dark:visited {
        color: white;
        text-decoration: underline;
    }

    .dx-link-light-on-dark:focus,
    .dx-link-light-on-dark:hover {
        color: var(--dx-30-percent-cyan);
        outline: none;
        text-decoration: underline;
    }

.dx-link-dark-on-light {
    color: var(--dx-web-blue);
    text-decoration: underline;
}

    .dx-link-dark-on-light:visited {
        color: var(--dx-web-blue);
        text-decoration: underline;
        outline: none;
    }

    .dx-link-dark-on-light:focus,
    .dx-link-dark-on-light:hover {
        color: var(--dx-darker-blue);
        text-decoration: underline;
        outline: none;
    }


.dx-btn-footer {
    min-width: 125px;
}

/* End Section: BUTTONS */

/*

  Section: ACCORDION - separate page into sections
  Purpose: Styles for headings and sections under accordion control

*/

.accordion > div.dx-card {
    border: 0;
    padding: 0;
}

.accordion div.dx-card-header {
    background-color: white;
    border-bottom: 1px solid var(--dx-web-blue);
    padding-left: 0;
    border-radius: 0;
}

    .accordion div.dx-card-header a {
        text-decoration: none;
    }

.accordion div.dx-card-body {
    padding: 0;
}

.dx-section {
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

.dx-section-header-print {
    display: none;
}

.dx-section-header-gray {
    background-color: var(--dx-light-gray);
    color: var(--dx-cool-dark-gray);
    font-weight: 700;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.dx-section-header {
    background-color: var(--dx-web-blue);
    color: white;
    font-weight: 700;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

    .dx-section-header span {
        color: white;
        font-weight: 400;
    }

    .dx-section-header a {
        color: white;
        font-weight: 400;
        text-decoration: underline;
    }

        .dx-section-header a.nodecor {
            text-decoration: none !important;
            font-size: 1.2rem;
        }

/* Toggles arrow icon for accordion headings */

[data-toggle="collapse"] .fa.toggle-me:before {
    content: "\f0d8";
}

[data-toggle="collapse"].collapsed .fa.toggle-me:before {
    content: "\f0d7";
}

[data-toggle~="collapse"] {
    cursor: pointer;
}

/* End Section: ACCORDION */

/*
	
	Section: SIDE NAV
	Purpose: Styles for the side navigation

*/

.bg-dark {
    background-color: var(--dx-black-blue) !important;
}

    .bg-dark.dx-side-nav-link a:hover {
        color: white !important;
    }

.dx-side-nav-link a {
    color: var(--dx-web-blue);
}

    .dx-side-nav-link a:hover,
    .dx-side-nav-link a:focus {
        color: var(--dx-darker-blue) !important;
    }

    .dx-side-nav-link a:visited {
        color: var(--dx-web-blue);
    }


/* End Section: SIDE NAV */

/*

  Section: NAVIGATION/MENU
  Purpose: Styles for menu system with dropdowns, navigation sections and links

*/

.navbar-brand {
	margin-left: 1rem;
}

.navbar-dark .navbar-nav .nav-link .fa.toggle-me:before {
    content: "\f0d7";
    padding-left: 0.25rem;
}

.navbar-dark .navbar-nav .show .nav-link .fa.toggle-me:before {
    content: "\f0d8";
    padding-left: 0.25rem;
}

.nav-member-name {
    display: inline-block;
    max-width: 80%;
    overflow-x: hidden;
    white-space: nowrap;
}

.dx-whitespace-nowrap {
    white-space: nowrap;
}

a.d-lg-block .nav-member-name {
    max-width: 200px;
}

/* XS, SM, MD Device Menu */
@media (max-width: 991.98px) {

    #nav-content {
        background-color: var(--dx-grayer-black-blue) !important;
        padding-left: .8rem;
        padding-right: .8rem;
    }

    .dx-responsive-nav-item {
        border-bottom: var(--dx-black-blue) solid;
        border-bottom-width: .5px;
        padding-bottom: .5rem;
        padding-top: .5rem;
    }

    .dx-member-icon {
        padding-right: .5rem;
        width: 2rem;
        height: 2rem;
    }

    /*Hamburger icon*/

    .navbar-toggle,
    .navbar-toggle:focus,
    .navbar-toggle:hover {
        outline: none !important;
        padding: .6rem 0;
        background: transparent !important;
        border-color: transparent !important;
    }

    .bar1, .bar2, .bar3 {
        width: 2rem;
        height: .2rem;
        background-color: white;
        margin: 0.5rem 0;
        transition: 0.4s;
    }

    .bar1, .bar3 {
        -webkit-transform-origin: 12%;
        transform-origin: 12%;
    }

    /* Toggles hamburger icon to an X in a cool way */
    .navbar-toggle:not(.collapsed) .bar1 {
        -webkit-transform: translateY(75%) rotate(45deg);
        transform: translateY(75%) rotate(45deg);
    }

    .navbar-toggle:not(.collapsed) .bar2 {
        opacity: 0;
        width: 0;
    }

    .navbar-toggle:not(.collapsed) .bar3 {
        -webkit-transform: translateY(-75%) rotate(-45deg);
        transform: translateY(-75%) rotate(-45deg);
    }

    /*End Hamburger icon*/

    .dx-nav-dropdown {
        padding: 0 !important;
        border: 0 !important;
        margin: 0 !important;
        border-radius: 0;
        background-color: var(--dx-grayer-black-blue) !important;
    }

        .dx-nav-dropdown .dropdown-item {
            color: white !important;
            padding: .5rem 0;
        }

            .dx-nav-dropdown .dropdown-item:hover,
            .dx-nav-dropdown .dropdown-item:focus,
            .dx-nav-dropdown .dropdown-item:active {
                color: var(--dx-30-percent-cyan) !important;
                background-color: var(--dx-grayer-black-blue) !important;
            }

    .navbar-dark .navbar-nav .dropdown-menu {
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        -moz-transition: opacity 0.5s linear;
        -o-transition: opacity 0.5s linear;
        -webkit-transition: opacity 0.5s linear;
        transition: opacity 0.5s linear
    }

    .navbar-dark .navbar-nav .dropdown-menu.show {
        max-height: 1000px;
        opacity: 1;
    }

    .navbar-dark {
        background-color: var(--dx-black-blue) !important;
        padding: 0 !important;
    }

        .navbar-dark .navbar-nav .nav-link {
            color: white;
            font-weight: bold;
        }

            .navbar-dark .navbar-nav .nav-link:hover,
            .navbar-dark .navbar-nav .nav-link:focus,
            .navbar-dark .navbar-nav .nav-link:active {
                color: white !important;
            }

        .navbar-dark .navbar-nav .show > .nav-link {
            background-color: var(--dx-grayer-black-blue);
            color: var(--dx-light-black-blue) !important;
        }

        .navbar-dark .navbar-text:focus,
        .navbar-dark .navbar-text:hover {
            color: white
        }
}

/* LG, XL Screen Menu */
@media (min-width: 992px) {

    .dx-member-icon {
        padding-right: .5rem;
        padding-bottom: .25rem !important;
        margin-bottom: -0.25rem !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .dx-nav-dropdown {
        padding: 0 !important;
        border: 0 !important;
        margin: 0 !important;
        border-radius: 0;
        background-color: var(--dx-black-blue) !important;
    }

        .dx-nav-dropdown .dropdown-item {
            color: white;
        }

            .dx-nav-dropdown .dropdown-item:hover,
            .dx-nav-dropdown .dropdown-item:focus,
            .dx-nav-dropdown .dropdown-item:active {
                color: var(--dx-30-percent-cyan) !important;
                background-color: var(--dx-black-blue) !important;
            }

    .navbar-dark .navbar-nav .dropdown-menu {
        display: block;
        height: 0;
        opacity: 0;
        overflow: hidden;
        -moz-transition: opacity 0.5s ease-in-out;
        -o-transition: opacity 0.5s ease-in-out;
        -webkit-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out
    }

        .navbar-dark .navbar-nav .dropdown-menu.show {
            height: auto;
            opacity: 1;
        }

    .navbar-dark .navbar-nav .nav-link {
        font-weight: bold;
        color: var(--dx-web-blue) !important;
    }

        .navbar-dark .navbar-nav .nav-link:hover {
            color: var(--dx-darker-blue) !important;
        }

    .navbar-dark .navbar-nav .show > .nav-link {
        background-color: var(--dx-grayer-black-blue);
        color: var(--dx-light-black-blue) !important;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out
    }

    .navbar-dark .navbar-text:focus,
    .navbar-dark .navbar-text:hover {
        color: white
    }
}

/* Toggles arrow icon for accordion headings */

/* End Section: NAVIGATION/MENU */

/*

  Section: PAGE HEADER
  Purpose: Styles for Flex Header elements

*/

.dx-step-number {
    color: var(--dx-medium-gray);
}

.dx-step-name {
    color: var(--dx-cool-dark-gray);
    font-weight: bold;
}

.dx-page-level-step-description {
    background-color: var(--dx-5-percent-cyan);
    padding: 0.4rem;
}

.dx-page-level-overview-step-description {
    padding-bottom: 2em;
}

/* End Section: PAGE HEADER */

/*

  Section: MISCELLANEOUS
  Purpose: Styles for various elements

*/

.dx-vertical-seperator {
    border-left-color: var(--dx-light-gray);
    border-left-width: 0.0625rem;
    border-left-style: solid;
}

.dx-about-me-button {
    min-width: 150px;
}

.dx-beneficiary-button {
    min-width: 250px;
}

.dx-not-selectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

::placeholder {
    color: var(--dx-medium-gray) !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--dx-medium-gray) !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--dx-medium-gray) !important;
}

.dx-gray-background {
    background-color: var(--dx-lightest-gray);
}

.dx-white-background {
    background-color: white;
}

@media (max-width: 991.98px) {
    .dx-footer-background {
        background-color: white;
    }
}

@media (min-width: 992px) {
    .dx-footer-background {
        background-color: var(--dx-lightest-gray);
    }
}

/* End Section: MISCELLANEOUS */

/*

  Section: FONTS
  Purpose: Get Lato fonts

*/

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/lato-v14-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/lato-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/lato-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/lato-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/lato-v14-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}


.fa {
    font-size: 18px;
}

/* End Section: FONTS */

/*

  Section: GREEN CHECKBOX
  Purpose: Define the green checkbox using bootstrap 4 classes

*/

.dx-checkbox-label {
    font-size: 1rem;
    padding-left: 1.5rem;
}

.dx-checkbox-label-adjust-top {
    padding-top: .5rem;
}


/* To align checkbox to the top:
    - add the class "align-items-start" to the div.custom-checkbox
    - add the following class, "dx-checkbox-label-top", to the first child div

    e.g.:       <div class="custom-control form-control-lg custom-checkbox pt-4 align-items-start">
                    <div class="dx-checkbox-label-top">
                        <input type="checkbox" class="custom-control-input" id="checkboxConsent" onclick="CheckBoxRequired()">
                        <label class="custom-control-label" for="checkboxConsent">&nbsp;</label>

*/

.dx-checkbox-label-top {
    padding-top: 0.25rem;
}

.custom-control-label::before,
.custom-control-label::after {
    width: 2rem;
    height: 2rem;
    background-color: var(--dx-lightest-gray);
    border: 1px solid var(--dx-50-medium-gray);
    border-radius: 4px;
    -webkit-transform: translate(0, -0.25rem);
    transform: translate(0, -0.25rem);
}

.custom-control-label-sm::before,
.custom-control-label-sm::after {
    width: 1.5rem;
    height: 1.5rem;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::after {
    border: none;
    background-color: var(--dx-light-green);
    background-size: 67% 67%;
    transition: background-color 1s;
}

.custom-control-input:focus ~ .custom-control-label::before {
    outline: none;
    box-shadow: 0 0 .3125rem var(--dx-medium-gray);
    background-color: white !important;
    transition: box-shadow .5s linear;
}

/* Green label text when checked
    add this class (probably as the last one) to the label span, e.g.:
                    <label class="custom-control-label dx-checkbox-label-top" for="checkboxConsent"></label>
                    <span class="dx-checkbox-label dx-checkbox-label-highlight">Label Text here.</span>
*/

.custom-control-input:checked ~ .custom-control-label.dx-checkbox-label-highlight {
    color: var(--dx-light-green) !important;
}

/* Prevents text from going green when validated and is valid */

.was-validated .custom-control-input:valid ~ .custom-control-label {
    color: unset;
    background-image: none !important;
}

/* Prevents bootstrap 4.5 validation icons from showing in inputs */
.form-control.is-valid,.was-validated .form-control:valid {
    background-image: none !important;
}

/* End Section: GREEN CHECKBOX */


/* 
    Section: RADIO BUTTON
    Purpose: custom radio button style

*/

/* The container */

.dx-labelContainer {
    display: inline;
    position: relative;
    padding-left: 2.188rem;
    margin-bottom: 75rem;
    cursor: pointer;
    /*font-size: 1.375rem;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */

    .dx-labelContainer input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom radio button */

.dx-checkmark {
    position: absolute;
    top: -5px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: var(--dx-lightest-gray);
    border-radius: 50%;
    border: 1px solid #aab2bd;
}

/* On mouse-over, add a grey background color */

.dx-labelContainer:hover input ~ .dx-checkmark {
    background-color: var(--dx-light-gray);
}

/* When the radio button is checked, add a blue background */

.dx-labelContainer input:checked ~ .dx-checkmark {
    background-color: var(--dx-light-green);
    border: 0;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.dx-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */

.dx-labelContainer input:checked ~ .dx-checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */

.dx-labelContainer .dx-checkmark:after {
    top: 8px;
    left: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}

/* End Section: RADIO BUTTON */

/* 
    Section: RADIO BUTTON (UPDATED)
    Purpose: custom radio button style
    Usage: 
    <label class="dx-radiocontainer" for='id_of_input'>
        <input type="radio" id='id_of_input' name='group_name' />
        <span class="dx-radiobutton"></span>
        <span class="dx-radiocaption">label for the radio button</span>
    </label>
*/

/* The container */

.dx-radiocontainer {
    display: inline;
    position: relative;
    padding-left: 2.188rem;
    margin-bottom: 75rem;
    cursor: pointer;
    /*font-size: 1.375rem;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */

    .dx-radiocontainer input {
        display: none;
    }

/* Create a custom radio button */

.dx-radiobutton {
    position: absolute;
    top: -5px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: var(--dx-lightest-gray);
    border-radius: 50%;
    border: 1px solid var(--dx-50-medium-gray);
    transition: background-color .2s ease-in;
}

/* On mouse-over, add a grey background color */

.dx-radiocontainer:hover input ~ .dx-radiobutton {
    background-color: var(--dx-light-gray);
}

/* When the radio button is checked, add a blue background */

.dx-radiocontainer input:checked ~ .dx-radiobutton {
    background-color: var(--dx-light-green);
    border: 0;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.dx-radiobutton:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */

.dx-radiocontainer input:checked ~ .dx-radiobutton:after {
    display: block;
}

/* Style the indicator (dot/circle) */

.dx-radiocontainer .dx-radiobutton:after {
    top: 8px;
    left: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}

.dx-radiocontainer .dx-radiocaption {
    font-weight: bold;
    transition: color .2s ease-in;
}

.dx-radiocontainer input:checked ~ .dx-radiocaption {
    color: var(--dx-light-green);
}

/* End Section: RADIO BUTTON (UPDATED) */

/* 
    Section: RADIO BUTTON (CENTERED LABEL)
    Purpose: custom radio button style

*/

/* Create a custom radio button */

.dx-radio-button-centered-checkmark {
    height: 100%;
    width: 100%;
    background-color: var(--dx-lightest-gray);
    border-radius: 50%;
    border: 1px solid var(--dx-medium-gray);
    margin: 0;
}

.dx-radio-button-container * {
    cursor: pointer;
}

.dx-radio-button-container > div:first-child {
    height: 25px;
    width: 25px;
    flex: 0 0 auto;
}

/* On mouse-over, add a grey background color */
.dx-radio-button-container:hover input ~ .dx-radio-button-centered-checkmark {
    background-color: var(--dx-light-gray);
}

/* When the radio button is checked, add a light-green background */

.dx-radio-button-container input:checked ~ .dx-radio-button-centered-checkmark {
    background-color: var(--dx-light-green);
    border: none;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.dx-radio-button-centered-checkmark:before {
    content: "";
    display: none;
}

/* Show the indicator (dot/circle) when checked */

.dx-radio-button-container input:checked ~ .dx-radio-button-centered-checkmark:before {
    display: block;
}

/* Style the indicator (dot/circle) */

.dx-radio-button-container .dx-radio-button-centered-checkmark:before {
    margin-top: 30%;
    margin-left: 30%;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: white;
}

/* End Section: RADIO BUTTON (CENTERED LABEL) */


/* 
    Section: VALIDATION
    Purpose: Form elements validation styles

/* validation begin */

.invalid-feedback {
    font-weight: bold !important;
    color: var(--dx-bright-orange) !important;
}

/* Used with form-group to highlight the label of an invalid form control */

.form-group.is-invalid label:first-child {
    color: var(--dx-bright-orange);
}

.custom-select.is-valid:not(.dx-fld-dropdown-proper),
.form-control.is-valid:not(.dx-fld-dropdown-proper),
.was-validated .custom-select:valid:not(.dx-fld-dropdown-proper),
.was-validated .form-control:valid:not(.dx-fld-dropdown-proper) {
    background-color: var(--dx-medium-gray);
}

.custom-select.is-valid:focus, .form-control.is-valid:focus, .was-validated .custom-select:valid:focus, .was-validated .form-control:valid:focus {
    box-shadow: 0.06rem 0.06rem 0.5rem var(--dx-medium-gray);
    border-color: transparent;
}

.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid {
    background-color: var(--dx-light-bright-orange);
    border-color: var(--dx-bright-orange) !important;
    box-shadow: none !important;
}

.form-group.is-invalid .dx-basic-table-label {
    color: var(--dx-bright-orange) !important;
}

.dx-validation-area {
    background-color: var(--dx-light-bright-orange);
    padding: 1rem;
}

.dx-benefit-warning,
.dx-validation-area-message {
    font-weight: bold;
    color: var(--dx-bright-orange);
}

div.is-invalid .dx-fld-label {
    color: var(--dx-bright-orange);
}

/* End Section: VALIDATION */

/* 
    Section: FOOTER
    Purpose: Styles for Flex Footer elements

*/

.dx-footer-link {
    text-decoration: none;
    font-size: .8rem;
}

    .dx-footer-link:visited,
    .dx-footer-link:hover,
    .dx-footer-link:focus,
    .dx-footer-link:active {
        text-decoration: none;
        outline: none;
    }

.dx-footer-copyright {
    font-size: .65rem;
}

.dx-footer-copyright-lh {
    line-height: 0.85rem !important;
}

/* End Section: FOOTER */

/* 
    Section: MODAL
    Purpose: Styles for Modal elements

*/

.modal-title {
    text-align: center;
    width: 100%;
}

.modal-header,
.modal-footer {
    border-style: none;
    padding: 0;
}

    .modal-header .close {
        padding: 0;
        margin: 0;
        position: absolute;
        top: .125rem;
        right: .5rem;
    }

        .modal-header .close:focus {
            outline: none !important;
        }

.dx-lightbox {
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 767.98px) {
    .dx-lightbox {
        padding: 20px !important;
    }
}

@media only screen and (min-width: 768px) {
    .dx-lightbox {
        padding: 30px !important;
    }
}

.dx-box-base {
    border: 1px solid var(--dx-50-medium-gray);
    background-color: var(--dx-lightest-gray);
    opacity: 0.75;
}

.dx-scrollbox {
    overflow: auto;
}

.dx-scrollbox-title {
    font-size: 18px;
    font-weight: bold;
}

/* End Section: MODAL */


/* 
    Section: TOOLTIPS (popper.js)
    Purpose: Styles for Modal elements
*/

.tooltip-inner {
    background-color: white !important;
    color: var(--dx-darker-medium-gray) !important;
    /*border: var(--dx-light-gray) !important;
    box-shadow: 0 0 0.625rem 0.125rem var(--dx-light-gray);*/
    padding: .5rem !important;
}

    .tooltip-inner.large {
        max-width: none;
        text-align: left;
    }

.tooltip.show {
    pointer-events: none;
    opacity: .95;
}


.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    display: none;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    display: none;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    display: none;
}

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
    display: none;
}

/* 
    Section: PIE CHART
    Purpose: Styles for 3rd party charts.js
*/


#chart-canvas-container {
    position: relative;
    margin: auto;
    max-height: 300px;
    max-width: 300px;
}

.dx-chartHeader {
    font-size: 1.625rem;
    color: var(--dx-medium-gray);
}

.dx-chartContainer {
    background-color: var(--dx-lightest-gray);
}

.dx-chartLegend {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    column-count: 1;
    -webkit-column-width: 200px; /* Chrome, Safari, Opera */
    column-width: 200px;
}

.dx-legend-ul {
    list-style: none;
    padding-right: 40px;
}

/*spin editor*/

.dx-spin-up, .dx-spin-down {
    color: var(--dx-black-blue);
    background-color: white;
    border-color: var(--dx-50-medium-gray);
}

    .dx-spin-up:hover, .dx-spin-down:hover {
        background-color: var(--dx-5-percent-cyan) !important;
    }

.dx-spin > input {
    text-align: center;
    border-color: var(--dx-50-medium-gray);
    background-color: var(--dx-lightest-gray);
    transition: background-color 1s;
}

    .dx-spin > input.invalid {
        background-color: var(--dx-bright-orange);
        transition: none;
    }

/*spin editor end*/

.dx-acknowledge-scrollbox {
    padding-left: 0.5em;
    padding-right: 0.5em;
    width: 100%;
    height: 25%;
}

/* 
    Section: Terms of Use
    Purpose: Styles for the Terms of Use page
*/

.dx-terms {
    width: 96%;
}

.dx-terms-title,
.dx-terms-sub-title,
.dx-terms-section-header {
	font-weight: bold;
	font-size: 1.0625rem;
	margin-bottom: .5rem;
}

.dx-terms-item {

}

/* End Section: Terms of Use */

/* ALM12291 */
input {
    -webkit-user-select: auto !important;
    -webkit-transform: translate3d(0,0,0);
}

.row.mb-0.is-invalid>.dx-data-table-row-update {
    margin-bottom: 1rem;
}

.lh-1 {
    line-height: 1;
}

#pdfTitle {
    font-size: 2rem;
    font-weight: bold;
    color: var(--dx-web-blue);
}

/* The date-picker input */
.dx-fld-date-picker {
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: right center;
}

/* The light calendar icon */
.dx-fld-date-picker-light {
    background-image: url('../images/calendar_icon.png');
}

/* The dark calendar icon */
.dx-fld-date-picker-dark {
    background-image: url('../images/calendar_icon_blue.png');
}

/* In-Page Alert Message */
.in-page-alert {
    background-color: #f4fbfe; /* lighter blue background */
    border: 1px solid #1183b9; /* darker blue border */
    border-left-width: 5px; /* thicker left border */
    border-radius: 0; /* no rounded corners */
    position: relative; /* for absolute positioning of the icon */
    padding-left: 50px; /* increased space for the icon */
}

.in-page-alert .alert-icon {
    font-weight: bold; /* make the icon bold */
    position: absolute; /* position it absolutely within the alert */
    left: 15px; /* increase space between icon and text */
    top: 25px; /* center it vertically */
    transform: translateY(-50%); /* precise vertical centering */
    background-color: #1183b9; /* darker blue background */
    color: white; /* white text color */
    border-radius: 0; /* make the icon ractangle */
    width: 22px; /* width of the icon */
    height: 22px; /* height of the icon */
    font-size: 16px; /* adjust font size of the exclamation mark */
    line-height: 22px; /* align the exclamation mark vertically */
    text-align: center; /* align the exclamation mark horizontally */
}