body {
    background-color:#F0F0F0;
    padding-bottom:0;
    height:100vh;

    --bs-primary: #0083BE;
    --bs-primary-rgb: 0, 131, 190;
    --bs-link-color:#0083BE;
    --bs-link-color-rgb: 0, 131, 190;
    --bs-link-hover-color: #006a9b;
    --bs-link-hover-color-rgb: 0, 106, 155;
}
h2 {
    font-size:1.2rem;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0083BE;
    --bs-btn-border-color: #0083BE;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #006a9b;
    --bs-btn-hover-border-color: #006a9b;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #006a9b;
    --bs-btn-active-border-color: #006a9b;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0083BE;
    --bs-btn-disabled-border-color: #0083BE;
}
.btn-outline-primary {
    --bs-btn-color: #0083BE;
    --bs-btn-border-color: #0083BE;
    --bs-btn-hover-bg: #0083BE;
    --bs-btn-hover-border-color: #0083BE;
    --bs-btn-active-bg: #0083BE;
    --bs-btn-active-border-color: #0083BE;
    --bs-btn-disabled-color: #0083BE;
    --bs-btn-disabled-border-color: #0083BE;
}
.userDropdown {
    color:var(--bs-body-color);
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: #0083BE;
}
.alert a {
    color:#000;
}

.form-floating>.form-control:not(:placeholder-shown)~label::after {
    background-color:transparent;
}

form input[id="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
form input[id="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.loginContainer {
    background-color:#FFFFFF;
    text-align:center;
    max-width:360px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    overflow:hidden;
}
.loginContainerInner{
    padding:1.5rem;
}
.forgotPasswordLine {
    font-size:0.7rem;
}
.top-line {
    border-top: 5px solid #0083BE;
}
.copyright-text {
    padding:0 2rem;
}
.main-logo {
    max-width:200px;
}
.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(0,131,190,0.25);
    border-color:#72c1e5;
}
.form-check-input:checked {
    background-color: #0083BE;
    border-color: #0083BE;
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0,131,190,0.25);
    border-color:#72c1e5;
}
/* ACCOUNTS */

.server-name {
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 9px;
    padding: 2px 4px;
    position: absolute;
    right: 3px;
    top: 3px;
}

.account:hover .server-name, .account.active .server-name {
    color: #666666;
}

.account {
    display: inline-block;
    padding: 10px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease-in-out;
    position: relative;
    z-index: 1;
}

.account:hover, .account.active {
    border: 1px solid #0083be;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    background-color: #eff7fb;
    z-index: 2;
}

.account:hover .account-name, .account.active .account-name {
    color: #000000;
}

.account img {
    background-position: 20px -67px;
    background: url(/images/disk-blue.png) center top no-repeat;
    display: block;
    height: 62px;
    margin: 0 auto;
    width: 62px;
}

.account-name {
    font-size:0.75rem;
    margin-top:0.25rem;
}
.accountsCard {
    margin-bottom:1rem;
}
.accountsCard .card-body {
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:0;
    padding:0;
}
.card.loggedInCard {
    position:absolute;
}
.loggedInCard .profilePicture {
    width: 75px;
    text-align: center;
}
.accounts-search {
    max-width:360px;
    margin:0 auto;
}

/* OTP */
#otp-inputs {
    display:flex;
}
#otp-inputs input {
    margin-right:5px;
    -moz-appearance: textfield;
    appearance:textfield;
    text-align: center;
    font-size: 2.5em;
}
#otp-inputs input:last-child {
    margin-right:0;
}
/* Chrome, Safari, Edge, Opera */
#otp-inputs input::-webkit-outer-spin-button,
#otp-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* OTP CHOOSE METHOD */
.authenticationMethodCard {
    text-align:left;
    margin-bottom:15px;
}
.authenticationMethodCard p {
    margin: 0;
}
.authenticationMethodCard:hover, .authenticationMethodCard:focus, .authenticationMethodCard:active {
    border: 1px solid #90C9DB;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    background-color: #F5FDFF;
}

/* SET NEW PASSWORD */
form #email {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
form #oldPassword {
    margin-bottom: -1px;
    border-radius: 0;
}
form #newPassword {
    margin-bottom: -1px;
    border-radius: 0;
}
form #confirmPassword {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.resetContainer {
    text-align:center;
    max-width:360px;
}
#passwordStrengthHint {
    font-size:14px;
}
.password-strength-bar {
    width:18%;
    height:8px;
    background-color:#DDDDDD;
    border-radius:4px;
}

/* CHOOSE AUTHENTICATION METHOD */
.methods-container {
    
}

/* SETTINGS */
.settings-card {
    border-top: 0;
}
.auth-app {
    margin-bottom:0.3rem;
}
.auth-app img {
    width: auto;
    max-width: 100%;
    max-height: 38px;
}
.auth-app h5 {
    margin-right: 15px;
    margin-bottom: 0;
    width:250px;
    text-align:right;
}
.twoFactorAuthenticationMethod {
    border-radius: 6px;
    padding: 10px;
    margin-bottom:10px;
}
#passwordStrengthHint {
    font-size:14px;
}
.xbody {
    --bs-border-color: rgba(0, 0, 0, 0.175);
}

/* TOTP */
.recoveryCode {
    margin-bottom:3px;
}
.stepHeading {
    font-weight:bold;
}