.form-floating > label {
    color: #ddd;
    font-weight: 300;
}
main#popup {
    padding: 20px;
    border: 1px solid #ccc;
    background: #fafafa;
}
.loading {
    opacity: .6
}

main#popup h1 {
    background: #344e5f;
    color: #fff;
    margin: 0 -20px 20px -20px;
    padding: 8px 20px;
    font-size: 1.6em;

}
main#popup h1 small {
     color: #bbb;
    font-size: .7em;

}


.center-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    font-weight: 200;
}

@media (max-width:979px) {
    .center-screen {
        min-height: fit-content;
    }
}
.form-group {
    margin-top:1em
} 

.form-floating textarea.form-control{
    height:auto
}


.user-form {
   /*border: 1px solid #b9b9b9; */
    background: #f8f8f8;
    /* opacity: .9; */
    padding: 5% 10%;
    /* border-radius: 0px; */
    width: 100%;
    box-shadow: 7px 7px 10px #9f9f9f;
}
.user-form input{
    border-color: #b4b4b4;
    

}
.user-form input:focus{
    outline: 0;
    box-shadow: none ! Important;
    background: #f2f9ff;
}

.user-form h1 {
    text-align: center;
    line-height: 1.2em;
    font-weight: 400;
    color: #237b8d;
}

.user-form p {
    text-align: center;
    line-height: 1.2em;
}

.user-form .col-form-label {
    margin-bottom: 0;
    padding: 1px 5px;
    /* text-align: right; */
    width: 100%;
    color: #237b8d;
}

.user-form .form-group {
    border-top: 1px solid #ccc;
    margin: 40px 0 0 0;
    padding: 25px 0 0 0;
    text-align: center;
}

.user-form .btn.btn-primary {
    background: #678098;
    border-color: #678098;
    margin: 5px 3px;
}
.user-form .btn.btn-secondary {
    background: #8ea3b7;
    border-color: #8ea3b7;
    margin:5px 3px;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

.nav-pills{
    --bs-link-color:#4a83a8;
    --bs-nav-pills-link-active-bg: #4a83a8;

}

.btn-primary
 {
    --bs-btn-bg: #4a83a8;
    --bs-btn-border-color: #598db1;
    --bs-btn-hover-bg: #66a3cc;
    --bs-btn-hover-border-color: #5b96be;
    --bs-btn-active-bg: #386c8d;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-bg: #3999da;
    --bs-btn-disabled-border-color: #3999da;
}
.btn-outline-primary
 {
    --bs-btn-color: #4a83a8;
    --bs-btn-border-color: #598db1;
    --bs-btn-hover-bg: #66a3cc;
    --bs-btn-hover-border-color: #5b96be;
    --bs-btn-active-bg: #386c8d;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-bg: #3999da;
    --bs-btn-disabled-border-color: #3999da;
}
input:-internal-autofill-selected{
    background:none;
}
.form-label-group input:not(:placeholder-shown) ~ label {
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    color: #777;
}
.form-label-group input:not(:placeholder-shown) ~ label,
.form-label-group input:-webkit-autofill ~ label /* <<<< Add these */
{
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    color: #aaa;
}
.form-label-group input:-webkit-autofill ~ label {
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 12px;
    color: #777;
}
.avatar {
    border-radius:100%
}


.nav-link .avatar {
    border-radius: 100%;
    display: block;
    float: left;
    margin-right: 10px;
}
.nav-link .avatar + b {
    display: inline-block;
}
.nav-link .avatar + b small{
    display: block;
    font-weight: normal;
    line-height: .8;
    font-size: .8em;
    color: #868585;
}

.dropdown-menu.user{

    padding-top: 0;

}
.dropdown-menu.user .dropdown-item{
    padding: 10px var(--bs-dropdown-item-padding-x);
    --bs-dropdown-link-hover-bg: #4a83a8;
    --bs-dropdown-link-hover-color: #ffffff;
}
.user-details{
    text-align: center;
    background: #eee;
    padding: 10px 5px;
    border-bottom: 1px solid #dfd9d9;
    margin-bottom: 5px;
}
.user-details b {
    display:block;
}
.user-details b small {
    display: block;
    font-weight: normal;

    font-size: .8em;
    color: #868585;
}
.user-details em{
    color: #4a83a8;
    font-weight: 600;
    font-size: .7em;
    line-height: 1.5em;
    display: block;
}
.dropdown-item {
    font-weight:200;
}
.dropdown-item i{
    color: #4a83a8;
    margin-right: 5px;
}
.dropdown-item:hover i {
    color:#fff
}