.card {
    /* Layout Properties */
    width: 303px;
    /* UI Properties */
    background: #FAFAFA 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 7px #00000033;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    opacity: 1;
    /* Developer Style */
    margin: auto;
    min-height: 478px;
}

button {
    text-align: center;
    letter-spacing: 0.36px;
    font: normal normal 600 12px/12px "Proxima Nova", Sans-serif;
    text-transform: uppercase;
}

.btn {
    padding: 5px 12px 4px 12px;
}

.btn-primarybuxlogout {
    /* Layout Properties */
    height: 24px;
    /* UI Properties */
    background: #0E65C0 0% 0% no-repeat padding-box;
    border: 1px solid #0E65C0;
    border-radius: 2px;
    opacity: 1;
    /* Developer Style */
    float: inherit;
    text-align: center;
    font: normal normal bold 12px/12px Proxima Nova, Sans-serif;
    letter-spacing: 0.36px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.btn-primary {
    /* Layout Properties */
    height: 24px;
    /* UI Properties */
    background: #0E65C0 0% 0% no-repeat padding-box;
    border: 1px solid #0E65C0;
    border-radius: 2px;
    opacity: 1;
    /* Developer Style */
    float: left;
}

    .btn-primary p {
        width: 40px;
        height: 15px;
        text-align: center;
        font: normal normal bold 12px/12px "Proxima Nova", Sans-serif;
        letter-spacing: 0.36px;
        color: #FFFFFF;
        text-transform: uppercase;
        opacity: 1;
    }

    .btn-primary:hover {
        background: #0E65C0 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000033;
        border: 1px solid #0E65C0;
        opacity: 1;
    }

    .btn-primary:active {
        color: inherit;
        background-color: inherit;
        border-color: inherit;
    }

.btn-secondary {
    /* Layout Properties */
    height: 24px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #125CB4;
    border-radius: 2px;
    opacity: 1;
    /* Develoer Style */
    margin-left: 24px;
}

    .btn-secondary p {
        /* Layout Properties */
        width: 48px;
        height: 15px;
        /* UI Properties */
        text-align: center;
        font: normal normal 600 12px/10px "Proxima Nova", Sans-serif;
        letter-spacing: 0.36px;
        color: #0248A3;
        text-transform: uppercase;
        opacity: 1;
    }

    .btn-secondary:hover {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 4px #00000033;
        border: 1px solid #125CB4;
        border-radius: 2px;
        color: inherit;
        opacity: 1;
    }

    .btn-secondary:active {
        color: inherit;
        background-color: inherit;
        border-color: inherit;
    }

.btn-tertiary {
    /* Layout Properties */
    width: 228px;
    height: 22px;
    /* UI Properties */
    text-align: left;
    text-decoration: underline;
    font: normal normal normal 16px/16px "Proxima Nova", Sans-serif;
    letter-spacing: 0px;
    color: #0A66C2;
    opacity: 1;
    /* Developer Style */
    padding-left: 0px;
    text-transform: none;
    margin-bottom: 9px;
}

    .btn-tertiary:hover {
        opacity: 1;
    }

.card-header {
    /* Layout Properties */
    width: 303px;
    height: 68px;
    /* UI Properties */
    background: transparent linear-gradient(72deg, #243B77 0%, var(--primary-info) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(72deg, #243B77 0%, #0A66C2 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 2px 6px #0000001F;
    border-radius: 4px 4px 0px 0px;
    opacity: 1;
    /*Developer Style*/
    position: relative;
}

    .card-header .logo {
        /* Layout Properties */
        width: 156px;
        height: 30px;
        /* UI Properties */
        background: transparent url('img/OS-logo-single-white.svg') 0% 0% no-repeat padding-box;
        opacity: 1;
        /* Developer style */
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
    }

.screen-title {
    /* Layout Properties */
    height: 24px;
    /* UI Properties */
    text-align: center;
    font: normal normal medium 20px/22px "Proxima Nova", Sans-serif;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    /* Developer Style */
    margin: 0px auto 40px;
}

    .screen-title h4 {
        font: normal normal 600 20px/22px "Proxima Nova", Sans-serif;
        margin-bottom: 0px;
    }

.col-sm-5 {
    max-width: none;
}

.row {
    display: block;
}

.main-screen {
    opacity: 1;
    /* Developer style */
    margin: 36px 36px 0 36px;
    min-height: 315px;
}
.password-reset .main-screen {
    min-height: 236px;
}

.form-group {
    margin-bottom: 28px;
}

    .form-group input {
        font: normal normal normal 16px/16px "Proxima Nova", Sans-serif;
        border: 0;
        outline: 0;
        background: transparent;
        border-bottom: 2px solid #1F3264;
        border-radius: 0;
        padding: 0;
        /*Developer Style*/
        margin-bottom: 28px;
    }

        .form-group input:focus {
            border-bottom: 2px solid #000000;
        }

    .form-group label {
        /* Layout Properties */
        height: 14px;
        /* UI Properties */
        text-align: left;
        font: normal normal bold 14px/12px "Proxima Nova", Sans-serif;
        letter-spacing: 1.4px;
        color: #0E65C0;
        text-transform: uppercase;
        opacity: 1;
        /* Developer Style */
        margin-bottom: 2.5px;
    }

.main-screen-form {
    line-height: 0px;
}

.form-control {
    height: 20px;
}

    .form-control:focus {
        color: inherit;
        background-color: inherit;
        border-color: inherit;
        outline: 0;
        box-shadow: none;
    }

    .form-control:disabled, .form-control[readonly] {
        text-align: left;
        background-color: inherit;
        font: normal normal normal 16px/16px "Proxima Nova", Sans-serif;
        letter-spacing: 0px;
        color: #9E9E9E;
        border-color: black;
        opacity: 1;
    }

.logged-out-page {
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
}

.whole-page-header {
    width: 100%;
    height: 68px;
    background: transparent linear-gradient(86deg, #243B77 0%, #0A66C2 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 2px 6px #0000001F;
    border-radius: 0px;
    display: flex;
    align-items: center;
    opacity: 1;
}

    .whole-page-header img {
        width: auto;
        height: 30px;
        margin-left: 32px;
    }

.logged-out-content {
    font-family: Proxima Nova;
    text-align: center;
    margin-top: 15vh;
}
/*++ Alert Style ++*/
/* This will ensure that message grows the height of the parent box on change password screen */
.change-password .alert{ 
    position:inherit;
}
.alert {
    margin-bottom: 0;
    padding: 10px;
    border-radius: 0px 0px 4px 4px;
    text-align: left;
    letter-spacing: 0px;
    left: 0px;
    width: 100%;
    opacity: 1;
    min-height: 58px;
}

.alert-inner {
    float: left;
    width: 258px;
}

.alert p {
    text-align: left;
    font: normal normal bold 14px/20px "Proxima Nova", Sans-serif;
    letter-spacing: 0px;
    margin-bottom: 0;
    margin-top: 0;
}

.alert label {
    text-align: left;
    font: normal normal normal 14px/20px "Proxima Nova", Sans-serif;
    letter-spacing: 0px;
}

.alert-success {
    background: #E1EFEC 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 8px #00000040;
    border: 1px solid #73AFA2;
    border-radius: 0px 0px 4px 4px;
    text-align: left;
    font: normal normal bold 14px/16px "Proxima Nova", Sans-serif;
    letter-spacing: 0px;
    color: #0A664E;
    display: inline-block;
}

    .alert-success label {
        font: normal normal bold 14px/20px "Proxima Nova", Sans-serif;
    }

    .alert-success ul {
        list-style-type: none;
        padding-inline-start: 0;
        margin-right: 8px;
        margin-bottom: 5px;
        text-align: left;
        font: normal normal bold 13px/16px "Proxima Nova", Sans-serif;
        letter-spacing: 0px;
    }

.alert-danger {
    background: #F6DBDF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 8px #00000040;
    border: 1px solid #DD7B88;
    border-radius: 0px 0px 4px 4px;
    text-align: left;
    font: normal normal normal 14px/20px "Proxima Nova", Sans-serif;
    letter-spacing: 0px;
    color: #C6243A;
}

    .alert-danger ul {
        list-style-type: none;
        padding-inline-start: 0;
        margin-right: 8px;
        margin-bottom: 5px;
        text-align: left;
        letter-spacing: 0px;
    }
.password-reset .password-complexity {
    position: inherit;
}
.password-complexity {
    font: normal normal normal 14px/24px "Proxima Nova", Sans-serif;
}

.password-complexity ul {
    list-style-type: inherit;
    margin-left: 10px;
}

    .password-complexity ul li:first-child {
        list-style-type: none;
        margin-left: -10px;
        text-align: left;
    }

    .password-complexity ul li {
        margin-left: 5px;
    }
.alert-warning {
    background: #FEECD9 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 8px #00000040;
    border: 1px solid #EB923E;
    border-radius: 0px 0px 4px 4px;
    opacity: 1;
    color: #000000;
}

/*-- Alert Style --*/

#close {
    float: right;
    display: inline-block;
    border: none;
    background: none;
    padding: 0;
}

.error-page {
    width: 100%;
}

.error-display {
    width: 100%;
    background: #F2DEDE 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 6px #00000033;
    border: 1px solid #BD2536;
    border-radius: 0px;
    margin: 0;
    opacity: 1;
    bottom: inherit;
}

    .error-display p {
        text-align: center;
        font: normal normal bold 16px/20px "Proxima Nova", Sans-serif;
        letter-spacing: 0.16px;
        color: #A94442;
        opacity: 1;
    }
.password-reset .button-panel{
    margin-bottom: 19px;
}

.button-panel {
    /* Layout Properties */
    height: 24px;
    /* UI Properties */
    opacity: 1;
    /* Developer Style */
    margin-bottom: 24px;
    width: 250px;
}

    .button-panel p {
        /* Developer Style */
        width: 100%;
        margin-top: 1px;
    }

.bottom-links {
    /* Layout Properties */
    width: 229px;
    /* UI Properties */
    opacity: 1;
    /* Developer Style */
    position: relative;
}

.btn-tertiary.bottom {
    bottom: 0;
}
  
.btn-tertiary:focus {
    box-shadow: none;
}

.screen-title-description {
    /* Layout Properties */
    width: 218px;
    height: 61px;
    /* UI Properties */
    text-align: left;
    font: normal normal normal 14px/20px "Proxima Nova", Sans-serif;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    /* Developer Style */
    margin-bottom: 28px;
}

.required::after {
    content: " *";
    font-weight: bold;
    color: red;
}
.optional::after {
    content: " (Optional)";
}
.dashboardcard-title {
    width: 186px;
    height: 46px;
    text-align: center;
    font: normal normal 600 14px/22px Proxima Nova, Sans-serif;
    letter-spacing: 0.2px;
    color: #0A66C2;
    opacity: 1;
    /*Developer Style*/
    margin-top: 12.65px;
}
.dashboardcard {
    width: 186px;
    height: 186px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 1px 3px #00000033;
    border: 1px solid #1266C2;
    border-radius: 4px;
    opacity: 1;
    /*Developer Style*/
    position: relative;
    margin: auto;
}
.dashboardcard-header {
    width: 186px;
    height: 12px;
    /* UI Properties */
    background: #1266C2 0% 0% no-repeat padding-box;
    border: 1px solid #1266C2;
    border-radius: 4px 4px 0px 0px;
    opacity: 1;
    /*Developer Style*/
    margin-bottom: 12.39px;
    margin-top: -1px;
    position: center;
    margin-left: -1px;
    margin-right: -1px;
}
.row {
    display: flex;
    align-items: center;
    justify-content: center;
}
.row a{
    padding: 10px;
}
.headerbox {
    /* Layout Properties */
    top: 14px;
    left: 204px;
    left: auto;
    width: 180px;
    height: 41px;
    /* UI Properties */
    opacity: 1;
    border-left: 1px solid;
    border-left-color: white;
    margin-right: auto;
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dashboard-tile {
    text-align: center;
}
.stillinprogress {
    font-size: 16px;
    line-height: 29px;
    font-weight: 600;
    font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
    margin: 24px 0;
    text-align: left;
    letter-spacing: -0.12px;
    color: #0248A3;
}