/* ===== RESET ===== */
* {
    margin      : 0;
    padding     : 0;
    box-sizing  : border-box;
}
html, body {
    height: 100%;
}
input {
    outline : none;
    border  : none;
}
input::placeholder {
    color       : #999;
    font-size   : 18px !important;
}
button {
    outline     : none !important;
    border      : none;
    background  : transparent;
    cursor      : pointer;
}

/* ===== LAYOUT PRINCIPAL ===== */
.limiter {
    width       : 100%;
    margin      : 0 auto;
    font-size   : 18px !important;
}
.container-login100 {
    width           : 100%;
    min-height      : 100vh;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    align-items     : center;
    padding         : 15px;
    background      : #f2f2f2;
    font-size       : 18px !important;
}
.wrap-login100 {
    border-radius   : 15px !important;
    height          : 530px;
    width           : 1220px;
    background      : #fff;
    overflow        : hidden;
    display         : flex;
    flex-wrap       : wrap;
    align-items     : stretch;
    flex-direction  : row-reverse;
}
.login100-form {
    width       : 50%;
    display     : flex;
    flex-wrap   : wrap;
    padding     : 160px 65px 40px;
}
.login100-form-title {
    font-size       : 20px;
    color           : #555;
    text-transform  : uppercase;
    letter-spacing  : 2px;
    text-align      : center;
    width           : 100%;
}
.login100-more {
    width               : 50%;
    background-repeat   : no-repeat;
    background-size     : cover;
    background-position : center;
    position            : relative;
    z-index             : 1;
}
.login100-more::before {
    content     : "";
    position    : absolute;
    z-index     : -1;
    width       : 100%;
    height      : 100%;
    top: 0; left: 0;
    background  : rgba(0,0,0,.3);
}
.wrap-input100 {
    width       : 100%;
    position    : relative;
    border      : 1px solid #e6e6e6;
}

.rs1-wrap-input100,
.rs2-wrap-input100 {
    width: 50%;
}

.rs2-wrap-input100 { border-left: none; }

.input100 {
    display     : block;
    width       : 100%;
    background  : transparent;
    font-size   : 18px !important;
    color       : #666;
    line-height : 1.2;
    padding     : 0 15px;
}

input.input100 {
    height: 55px;
}

/* ===== RESPONSIVO ===== */
@media(max-width: 992px) {
    .login100-form {
        width           : 60%;
        padding-left    : 30px;
        padding-right   : 30px;
    }
    .login100-more { width: 40%; }
}

@media(max-width: 768px) {
    .login100-form { width: 100%; }
    .login100-more { width: 100%; }
}

@media(max-width: 576px) {
    .login100-form {
        padding-left    : 15px;
        padding-right   : 15px;
        padding-top     : 150px;
    }
    .rs1-wrap-input100,
    .rs2-wrap-input100 { width: 100%; }
    .rs2-wrap-input100 { border-left: 1px solid #e6e6e6; }
}

/* ================================== BOTÃO PULSAR =================================== */

.container-login100-form-btn {
    width           : 100%;
    display         : flex;
    justify-content : center;
}
.btn {
    width           : 100%;
    background      : #007bff;
    border          : solid 1px #0063f7;
    border-radius   : 6px;
    padding         : 12px 20px;
    font-weight     : 600;
    font-size       : 18px;
    cursor          : pointer;
    height          : 55px;
    position        : relative;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    color           : #fff;
    overflow        : hidden;
}
.btn:hover { background: #005ae1; color: white !important; }
.btn:focus {
    outline     : none; /* tira o padrão azul */
    border      : 2px solid black; /* primeira borda */
    box-shadow  : 0 0 0 3px #999; /* segunda borda em volta */
    background  : #005ae1; 
    color       : white !important;
}
.btn:disabled { opacity : 0.6; cursor: not-allowed; }
.hidden { display: none !important; }
.loader-button {
    display         : flex;
    position        : absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    justify-content : center;
    align-items     : center;
}
.loader-button.hidden { display: none !important; }
.spinner-sm {
    height          : 20px;
    display         : flex;
    align-items     : center;
    justify-content : center;
}
.spinner-sm > div {
    display             : block;
    margin-left         : 4px;
    width               : 4px;
    height              : 20px;
    background-color    : #fff;
    animation           : sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner-sm .rect2 { animation-delay: -1.1s; }
.spinner-sm .rect3 { animation-delay: -1.0s; }
.spinner-sm .rect4 { animation-delay: -0.9s; }
.spinner-sm .rect5 { animation-delay: -0.8s; }

@keyframes sk-stretchdelay {
    0%, 40%, 100% { transform: scaleY(.4); }
    20% { transform: scaleY(1); }
}