/*
Current Version : 3.0.0.3-b
Release Date    : Friday, March 21st 2025
*/

* {
    box-sizing  : border-box;
    margin      : 0px;
    padding     : 0px;
    font-family : "Open Sans", sans-serif;
    font-size   : 1rem;
    font-weight : normal;
    line-height : 1.5;
}

body { background-color: #F1F1F1; }

button {
    display             : flex;
    flex-direction      : row;
    width               : 120px;
    min-height          : 40px;
    outline             : none;
    border              : 0px;
    border-radius       : 5px;
    padding             : .5rem;
    align-items         : center;
    justify-content     : center;
    background-color    : #FFFFFF;
    cursor              : pointer;
    transition          : 250ms;
}
    
    button:disabled {
        background-color    : #F1F1F1;
        color               : #000000;
        pointer-events      : none;
    }

    button:hover { opacity: .7; }

h3 { font-size: x-large; }

input {
    width           : 100%;
    outline         : none;
    border          : 1px solid #DEDEDE;
    border-radius   : 0px 5px 0px 0px;
    padding         : .5rem;
    transition      : 250ms;
}

    input:focus { border-color: #2196F3; }

input[type="password"] { padding-right: 40px; }

.bg-black {
    background-color    : #000000;
    color               : #FFFFFF;
}

.bg-blue {
    background-color    : #2196F3;
    color               : #FFFFFF;
}

.container {
    display         : flex;
    flex-direction  : column;
    width           : 80%;
    min-height      : 100vh;
    margin          : auto auto;
}

.f-small { font-size: small; }

.h-24px { height: 24px; }

.icon-input {
    display         : flex;
    flex-direction  : row;
}

    .icon-input input { border-left: 0px; }

    .icon-input span {
        display         : flex;
        flex-direction  : column;
        min-width       : 48px;
        justify-content : center;
        align-items     : center;
    }
    
        .icon-input span i { font-size: 20px; }

.loader--dark-gray {
    border          : 4px solid #FFFFFF;
    border-top      : 4px solid #616161;
    border-radius   : 50%;
    animation       : spin 2s linear infinite;
}

.mt-005 { margin-top: .5rem; }

.mt-1 { margin-top: 1rem; }

.mt-2 { margin-top: 2rem; }

.mt-3 { margin-top: 3rem; }

.panel {
    display             : flex;
    flex-direction      : column;
    width               : 25%;
    margin              : auto auto;
    border-radius       : 10px;
    padding             : 1rem;
    background-color    : #FFFFFF;
}

.password-toggle {
    visibility  : hidden;
    position    : absolute;
    align-self  : center;
    height      : 42px;
    color       : #616161;
    cursor      : pointer;
    transition  : 250ms;
}

    .password-toggle:hover { color: #2196F3; }

.w-24px { width: 24px; }

.w-48px { width: 48px; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    
    100% { transform: rotate(360deg); }
}

@media only screen and (max-width: 1600px) {
    .panel { width: 35%; }
}

@media only screen and (max-width: 1200px) {
    .panel { width: 45%; }
}

@media only screen and (max-width: 992px) {
    .panel { width: 55%; }
}

@media only screen and (max-width: 768px) {
    .panel { width: 60%; }
}

@media only screen and (max-width: 600px) {
    .container { width: 100%; }
    
    .panel {
        width           : 100%;
        height          : 100vh;
        border-radius   : 0px;
    }
}