body {
    height:100vh !important;
    width:100vw !important;
    display:flex;
    text-align:center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    color:white
}

.box-1 {
    width:500px; 
    background-image: linear-gradient(to bottom, #0c233f , #2a4669);
    height:600px;
    margin-top:calc((100vh - 600px) / 2);
    border-radius:10px;
    padding:50px;
    position: relative;
}

.form-control {
    background-color: transparent !important;
    border:none !important;
    color:white !important;
    box-shadow: none !important;
    border-bottom:1px solid rgba(255, 255, 255, 0.457) !important;
    border-radius:0px !important;
    font-size:14px !important;
}

a {
    text-decoration:none !important
}

.form-floating label {
    background-color: transparent !important;
    font-size:14px !important;
    margin-top:5px !important;
    color:rgba(255, 255, 255, 0.686) !important;
}

.form-floating input:focus ~ label,
.form-floating input:not(:placeholder-shown) ~ label {
    margin-top:-5px !important;
    color:rgba(255, 255, 255, 0.686) !important;
    font-size:15px !important
}

.form-floating > input + label:after {
   background: transparent !important;
}

.text-1 {
    font-size:14px;
    margin-top:20px;
    margin-bottom:30px
}

.text-3 {
    position:absolute;
    bottom:10px;
    width:100%;
    margin-left:-50px;
    font-size:12px
}

.text-2 {
    font-size:13px; 
    color:rgb(255, 255, 255);
}



#banner {
    background: url(../../../../../../../../../static/images/fixed/bkg_login.png);
    background-position: center;
    background-size: cover;
    width: 100%;
    position: relative;
    top: 0;
    justify-content:center !important;
    display:flex
}


.btn-primary {
    height:35px;
    display:flex;
    justify-content: center;
    align-items: center;
    color:white;
    border:none !important;
    background-color: rgba(255, 255, 255, 0.165) !important;
    font-family: 'Inter', sans-serif;
    font-size:13px;
    font-weight:500;
    padding:7px 22px 
}

@media (min-width: 1400px) and (max-width: 3840px) {

}

@media (min-width: 1200px) and (max-width: 1399px) {

}

@media (min-width: 992px) and (max-width: 1199px) {

}

@media (min-width: 768px) and (max-width: 991px) {

}

@media (min-width: 576px) and (max-width: 767px) {

}

@media (max-width: 575px) {

    .box-1 {
        height:100vh !important;
        width:100vw !important;
        margin-top:0px !important;
        border-radius:0px !important;
    }

    .text-3 {
        position:absolute;
        bottom:0px;
        width:100%;
        margin-left:-50px;
        font-size:12px
    }

}



.full-width-radio .form-check-label {
    width: 100%;
    background-color: transparent;
    border: 1px solid #ffffff3e;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    color:white !important
}

.full-width-radio .form-check-input:checked + .form-check-label {
    background-color: #ffffff3e;
    border-color: #ffffff3e;
}

.full-width-radio .form-check-label:hover {
    background-color: #ffffff3e;
    border-color: #ffffff3e;
}