.card {
    /* Layout Properties */
    /* min-width: 33%; */
    /* 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 system-ui, Arial, Sans-serif; */
    text-transform: uppercase;
}

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

.btn-primarybuxlogout {
    /* Layout Properties */

    /* UI Properties */
    background: #373737 0% 0% no-repeat padding-box;
    border: 1px solid #373737;
    border-radius: 2px;
    opacity: 1;
    /* Developer Style */
    float: inherit;
    text-align: center;
    /* font: normal normal bold 12px/12px system-ui, Arial, Sans-serif; */
    letter-spacing: 0.36px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.btn-primarybuxlogout:hover {
    color: white !important;
    opacity: 0.5;
}

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

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

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

.btn-primary:active,
.btn-primary:focus {
    color: white;
    background-color: #373737 !important;
    border-color: #373737 !important;
}

.btn-secondary {
    /* Layout Properties */
    /* height: 24px; */
    /* UI Properties */
    /* background: #FFFFFF 0% 0% no-repeat padding-box; */
    border: 1px solid #373737;
    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 system-ui, Arial, Sans-serif; */
    letter-spacing: 0.36px;
    color: #373737;
    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 #373737;
    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 system-ui, Arial, 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; */
    min-height: 4rem;
    align-content: center;
    /* UI Properties */
    background: #373737;
    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;
    background-position: center;
    background-size: 65%;
}

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

.screen-title h4 {
    /* font: normal normal 600 20px/22px system-ui, Arial, Sans-serif; */
    margin-bottom: 0px;
}

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

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

.password-reset .main-screen {
    min-height: 236px;
}

.form-group label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

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

.form-group input {
    font: normal normal normal 14px/14px system-ui, Arial, Sans-serif;
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid #1F3264;
    border-radius: 0;
    padding: 0;
    margin-bottom: 28px;
}

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

.form-group label {

    height: 14px;

    text-align: left;
    font: normal normal bold 14px/12px system-ui, Arial, Sans-serif;
    letter-spacing: 1.4px;
    color: #373737;
    text-transform: uppercase;
    opacity: 1;

    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 system-ui, Arial, 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: 40px;
    background: #373737;
    box-shadow: 0px 2px 6px #0000001F;
    border-radius: 0px;
    display: flex;
    align-items: center;
    opacity: 1;
}

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

.logged-out-content {
    font-family: system-ui, system-ui, Arial, Helvetica, sans-serif;
    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 system-ui, Arial, Sans-serif; */
    letter-spacing: 0px;
    margin-bottom: 0;
    margin-top: 0;
}

.alert label {
    text-align: left;
    /* font: normal normal normal 14px/20px system-ui, Arial, 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 system-ui, Arial, Sans-serif; */
    letter-spacing: 0px;
    color: #0A664E;
    display: inline-block;
}

.alert-success label {
    /* font: normal normal bold 14px/20px system-ui, Arial, 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 system-ui, Arial, 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 system-ui, Arial, 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 system-ui, Arial, 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 system-ui, Arial, 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;
    margin-bottom: 0;
}

.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 system-ui, Arial, 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 system-ui, Arial, Sans-serif; */
    letter-spacing: 0.2px;
    color: #373737;
    opacity: 1;
    /*Developer Style*/
    margin-top: 12.65px;
}


.dashboardanchor:hover {
    text-decoration-color: #373737 !important;
    text-decoration: underline;
}

.dashboardcard {
    width: 186px;
    height: 186px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 1px 3px #00000033;
    border: 1px solid #373737;
    border-radius: 4px;
    opacity: 1;
    /*Developer Style*/
    position: relative;
    margin: auto;
}

.dashboardcard-header {
    width: 186px;
    height: 12px;
    /* UI Properties */
    background: #373737 0% 0% no-repeat padding-box;
    border: 1px solid #373737;
    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: 0.5rem;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    /* font-family: system-ui, system-ui, Arial, Helvetica, 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: system-ui, system-ui, Arial, Helvetica, sans-serif; */
    margin: 24px 0;
    text-align: left;
    letter-spacing: -0.12px;
    color: #0248A3;
}

.login-page .form-check-input {
    margin-top: 0;
}