.login-outer-box {
    padding: 15% 15%;
    height: 100%;
    overflow: auto;
}

h4 {
    color: #9e9e9e;
    font-weight: bold;
    margin-top: .52rem;
}

#form-login button {
    width: 100%;
    border-radius: 5px;
}

#form-login .btn-large {
    height: 54px;
    line-height: 54px;
    font-size: 1rem;
    padding: 0 28px;
}

#form-login button.btn,
#form-login button.btn-large,
#form-login button.btn-small,
#form-login button.btn-floating {
    padding: 5px !important;
    height: 60px;

    text-transform: unset;
    letter-spacing: 0;
    border-radius: 30px;
    font-size: 2.5rem;
    padding: 0;
    margin-top: 30%;

    -webkit-box-shadow: 0 0px 7pt 0 rgba(0,0,0,0.14);
            box-shadow: 0 0px 7pt 0 rgba(0,0,0,0.14);

    transition: all .3s ease-in-out;

    image-rendering: -moz-crisp-edges;          /* Firefox */
    image-rendering: -o-crisp-edges;            /* Opera   */
    image-rendering: -webkit-optimize-contrast; /* Webkit  */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;   /* IE      */
    will-change: transform, opacity;
}

#form-login button.btn:focus,
#form-login button.btn-large:focus,
#form-login button.btn-small:focus,
#form-login button.btn-floating:focus {
    color:rgba(0,0,0,.8) !important;
    transition: all .3s ease-in-out;
}

#form-login button.btn:hover,
#form-login button.btn-large:hover,
#form-login button.btn-small:hover,
#form-login button.btn-floating:hover {
    color: rgba(0,0,0,.5) !important;
    transition: all .3s ease-in-out;
}


/* estilos dos inputs */

#form-login {
    padding: 8%;
}

#form-login button.expand {
    animation-iteration-count: 1;
    animation-name: expand_A;
    animation-duration: 1s;
    will-change: transform, opacity;
}

@keyframes expand_A {
    0%   {
        -webkit-transform: scale(1);  /* Chrome, Opera 15+, Safari 3.1+  */
            -ms-transform: scale(1);  /* IE 9 */
                transform: scale(1);  /* Firefox 16+, IE 10+, Opera */
        opacity: 1;
    }
    100% { 
        -webkit-transform: scale(25);  /* Chrome, Opera 15+, Safari 3.1+  */
            -ms-transform: scale(25);  /* IE 9 */
                transform: scale(25);  /* Firefox 16+, IE 10+, Opera */
        opacity: 0;
    }
}

#form-login button.expanded {
    transform: scale(30);
}

.input-field.login input:not([type]):not([readonly]),
.input-field.login input[type=text]:not(.browser-default):not([readonly]),
.input-field.login input[type=password]:not(.browser-default):not([readonly]),
.input-field.login input[type=email]:not(.browser-default):not([readonly]),
.input-field.login input[type=url]:not(.browser-default):not([readonly]),
.input-field.login input[type=time]:not(.browser-default):not([readonly]),
.input-field.login input[type=date]:not(.browser-default):not([readonly]),
.input-field.login input[type=datetime]:not(.browser-default):not([readonly]),
.input-field.login input[type=datetime-local]:not(.browser-default):not([readonly]),
.input-field.login input[type=tel]:not(.browser-default):not([readonly]),
.input-field.login input[type=number]:not(.browser-default):not([readonly]),
.input-field.login input[type=search]:not(.browser-default):not([readonly]),
.input-field.login textarea.materialize-textarea:not([readonly]) {
    text-align: center;
    font-size: 2rem;
    font-weight: 100;
    color: white;
    background-color: transparent;
    border: 2pt solid transparent;
    padding: 5px 0;
    -webkit-box-shadow: 0 0px 7pt 0 rgba(0,0,0,0.14) !important;
            box-shadow: 0 0px 7pt 0 rgba(0,0,0,0.14) !important;
    border-radius: 50px;
    transition: all .3s ease-in-out;
}

.input-field.login .select-wrapper .select-dropdown.dropdown-trigger:focus,
.input-field.login input:not([type]):focus:not([readonly]),
.input-field.login input[type=text]:not(.browser-default):focus:not([readonly]),
.input-field.login input[type=password]:not(.browser-default):focus:not([readonly]),
.input-field.login input[type=email]:not(.browser-default):focus:not([readonly]),
.input-field.login input[type=url]:not(.browser-default):focus:not([readonly]),
.input-field.login input[type=time]:not(.browser-default):focus:not([readonly]),
.input-field.login input[type=date]:not(.browser-default):focus:not([readonly]),
.input-field.login input[type=datetime]:not(.browser-default):focus:not([readonly]),
.input-field.login input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
.input-field.login input[type=tel]:not(.browser-default):focus:not([readonly]),
.input-field.login input[type=number]:not(.browser-default):focus:not([readonly]),
.input-field.login input[type=search]:not(.browser-default):focus:not([readonly]),
.input-field.login textarea.materialize-textarea:focus:not([readonly]) {
    outline: none;
    border: 2pt solid transparent !important;
    background-color: rgba(255,255,255,.4) !important;
    -webkit-box-shadow: 0 0px 25pt 0 rgba(255,255,255,.4) !important;
            box-shadow: 0 0pt 25pt 0 rgba(255,255,255,.4) !important;
    transition: all .3s ease-in-out;
}

.input-field.login input:not([type]):focus:not([readonly]) + label,
.input-field.login input[type=text]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login input[type=password]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login input[type=email]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login input[type=url]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login input[type=time]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login input[type=date]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login input[type=number]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login input[type=search]:not(.browser-default):focus:not([readonly]) + label,
.input-field.login textarea.materialize-textarea:focus:not([readonly]) + label {
  color: white;

  box-shadow: none;
  
  border: 1px solid rgba(0,0,0,.15);
  transition: all .3s ease-in-out;
}

/* Style Placeholders */
/*
::-webkit-input-placeholder {
    color: rgba(255,255,255,.5);
}
::-moz-placeholder {
    color: rgba(255,255,255,.5);
}
:-ms-input-placeholder {
    color: rgba(255,255,255,.5);
}
::-ms-input-placeholder {
    color: rgba(255,255,255,.5);
}
::placeholder {
    color: rgba(255,255,255,.5);
}
*/
::-webkit-input-placeholder {
    color: rgba(255,255,255,1);
}
::-moz-placeholder {
    color: rgba(255,255,255,1);
}
:-ms-input-placeholder {
    color: rgba(255,255,255,1);
}
::-ms-input-placeholder {
    color: rgba(255,255,255,1);
}
::placeholder {
    color: rgba(255,255,255,1);
}

.login-background {
    position: absolute;

    width: 100%;
    height: 100%;
    background-color: black;
    /* background-image: url('../../imagens/login/background.jpg'); */
    background-position-x: center;
    background-position-y: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-filter: grayscale(100%);
            filter: gray;
}
.login-background.img-0 {
    background-image: url('../../imagens/login/background_0.jpg');
}
.login-background.img-1 {
    background-image: url('../../imagens/login/background_1.jpg');
}
.login-background.img-2 {
    background-image: url('../../imagens/login/background_2.jpg');
}
.login-background.img-3 {
    background-image: url('../../imagens/login/background_3.jpg');
}
.login-background.img-4 {
    background-image: url('../../imagens/login/background_4.jpg');
}
.login-background.img-5 {
    background-image: url('../../imagens/login/background_5.jpg');
}
.login-background.img-6 {
    background-image: url('../../imagens/login/background_6.jpg');
}
.login-background.img-7 {
    background-image: url('../../imagens/login/background_7.jpg');
}

@media only screen and (min-height: 885px) {
    .login-box {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin-top: -443px !important;
        margin-left: -250px !important;
        width: 500px !important;
        height: 885px !important;
    }
}

/** large screen -> A */
@media only screen and (min-width: 992px) {
    .brand-logo img {
        width: 100%;
        padding: 15% 5%;
    }

    .login-box-footer {
        margin: 5% 0;
    }

    #form-login {
        border-left: none !important;
    }
}
/** large screen -> B */

/** medium screen -> A */
@media only screen and (min-width: 600px) {
    .brand-logo img {
        width: 100%;
        padding: 15% 5%;
    }

    .login-box-footer {
        margin: 5% 0;
    }

    #form-login {
        margin: 0 8% 0 0;
        padding: 4% 0 0 8%;
    }
}
/** medium screen -> B */

.brand-logo img {
    width: 100%;
    padding: 15% 15%;
}

@media screen and (orientation:portrait) {
    .login-box {
        background-color: rgba(0,0,0,.6);
        padding: 25px;
        margin: 50px;
        width: calc(100% - 100px);
        height: calc(100% - 100px);
    }
    
    .login-box .footer > a {
        position: absolute;
        bottom: 20%;
        left: 0;
        width: 100%;
        text-align: center;
    }

    @media screen and (max-width: 450px) {
        .login-box {
            background-color: rgba(0,0,0,.6);
            padding: 25px;
            margin: 20px;
            width: calc(100% - 40px);
            height: calc(100% - 40px);
        }
        #form-login {
            padding: 0 !important;
        }
    }

    @media screen and (max-width: 360px) {
        .login-box {
            background-color: rgba(0,0,0,.6);
            padding: 25px;
            margin: 10px;
            width: calc(100% - 20px);
            height: calc(100% - 20px);
        }
    }

    /* iphone 5/se*/
    @media screen and (max-width: 600px) {
        #form-login button.btn, #form-login button.btn-large, #form-login button.btn-small, #form-login button.btn-floating {
            margin-top: 5%;
        }
    }

    
}

@media screen and (max-height: 700px) and (max-height: 885px) {
    .login-box {
        background-color: rgba(0,0,0,.6);
        padding: 25px;
        margin: 50px;
        width: calc(100% - 100px);
        height: calc(100% - 100px);
    }
    .login-box .header {
        position: relative !important;
        height: 50% !important;
        width: 40% !important;
    }
    .login-box .content {
        height: 100% !important;
        width: 60% !important;
        padding: 10% 0;
        border-left: 1px solid rgba(255,255,255,.4);
    }
    .login-box .footer {
        position: absolute !important;
        height: 25% !important;
        /*width: 40% !important;*/
        bottom: 0;

        padding: 10% 5%;
        left: 0 !important;
    }

    @media screen and (max-height: 375px) {
        .login-box {
            background-color: rgba(0,0,0,.6);
            padding: 25px;
            margin: 10px;
            width: calc(100% - 20px);
            height: calc(100% - 20px);
        }
        .login-box .content .input-field.user {
            margin: 0 !important;
        }
    }

    @media screen and (max-height: 600px) {
        .login-box .content input {
            font-size: 1.5rem !important;
        }
        #form-login {
            padding: 4% 0 0 8% !important;
            border-left: none !important;
        }
    }

    @media screen and (max-height: 450px) {
        .login-box {
            background-color: rgba(0,0,0,.6);
            padding: 25px;
            margin: 20px;
            width: calc(100% - 40px);
            height: calc(100% - 40px);
        }
        .login-box .content {
            padding: 4px !important;
            border-left: none;/*1px solid rgba(255,255,255,.4);*/
        }

        .login-box .content button {
            margin-top: 0 !important;
            font-size: 1.5rem !important;
        }

        #form-login {
            padding: 8% 0 0 8%;
            border-left: none;
        }
    }

    @media screen and (max-height: 300px) {
        .login-box {
            background-color: rgba(0,0,0,.6);
            padding: 25px;
            margin: 5px;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
        }
        .login-box .content {
            padding: 0 !important;
            border-left: 1px solid rgba(255,255,255,.4);
        }

        .login-box .content .input-field input,
        .login-box .content .input-field input:active,
        .login-box .content .input-field input:focus {
            font-size: 1rem;
            margin-bottom: 0;
        }

        .login-box .content button {
            margin-top: 0 !important;
            font-size: 1.5rem !important;
        }

        #form-login {
            padding: 0 0 0 8%;
            border-left: none;
        }
    }
    /* 1980 x 1080 | escala de  125% */
    @media screen and (max-width: 1600px) {
        #form-login button.btn, #form-login button.btn-large, #form-login button.btn-small, #form-login button.btn-floating {
            margin-top: 5% !important;
        }
    }
}

.login-box {
    position: absolute;
    background-blend-mode: normal;
    /* background-image: linear-gradient(4deg,rgba(0, 165, 240, 0.5), 51%,rgba(0, 215, 215, 0.5)), url(../../imagens/login/background.jpg); */
    background-position-x: center;
    background-position-y: center;
    border-radius: 2px;
    /* border: 1px solid rgba(0,83,120,0.5); */
}

.login-box.img-0 {
    background-image: linear-gradient(4deg,rgba(0, 165, 240, 0.9), 51%,rgba(0, 215, 215, 0.9)), url(../../imagens/login/background_0.jpg);
}
.login-box.img-1 {
    background-image: linear-gradient(4deg,rgba(0, 165, 240, 0.9), 51%,rgba(0, 215, 215, 0.9)), url(../../imagens/login/background_1.jpg);
}
.login-box.img-2 {
    background-image: linear-gradient(4deg,rgba(0, 165, 240, 0.9), 51%,rgba(0, 215, 215, 0.9)), url(../../imagens/login/background_2.jpg);
}
.login-box.img-3 {
    background-image: linear-gradient(4deg,rgba(0, 165, 240, 0.9), 51%,rgba(0, 215, 215, 0.9)), url(../../imagens/login/background_3.jpg);
}
.login-box.img-4 {
    background-image: linear-gradient(4deg,rgba(0, 165, 240, 0.9), 51%,rgba(0, 215, 215, 0.9)), url(../../imagens/login/background_4.jpg);
}
.login-box.img-5 {
    background-image: linear-gradient(4deg,rgba(0, 165, 240, 0.9), 51%,rgba(0, 215, 215, 0.9)), url(../../imagens/login/background_5.jpg);
}
.login-box.img-6 {
    background-image: linear-gradient(4deg,rgba(0, 165, 240, 0.9), 51%,rgba(0, 215, 215, 0.9)), url(../../imagens/login/background_6.jpg);
}
.login-box.img-7 {
    background-image: linear-gradient(4deg,rgba(0, 165, 240, 0.9), 51%,rgba(0, 215, 215, 0.9)), url(../../imagens/login/background_7.jpg);
}

/*
.login-box {
    position: absolute;
    background-blend-mode: hard-light, multiply, darken;
    background-color: rgba(0,0,0,.6);
    background-image: linear-gradient(0deg,#7fd2f790,#7febeb90), url(../../imagens/login/background.jpg);
    background-position-x: center;
    background-position-y: center;
    border-radius: 2px;
    border: 1px solid #00000010;
}
*/
.login-box .header {
    position: relative;
    height: 30%;
}
.login-box .content {
    position: relative;
    height: 50%;
}
.login-box .footer {
    position: relative;
    height: 20%;
}

.login-box .footer > a {
    position: absolute;
    color: white;
    font-size: 1.2rem;
    bottom: 20%;
    left: 0;
    width: 100%;
    text-align: center;
}


/*
.login-box-footer {
    position: absolute;
    bottom: 0 !important;
    left: 0 !important;
    margin: 8% 0;
    text-align: center;
    font-size: 1.2rem;
}

.login-box-footer > a {
    color: white;
}
*/
.password-recover {
    font-size: 1.2rem;
    font-weight: 500;
    color: white;
}

.spinner-white-only {
    border-color: white;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

.modal .modal-footer {
    padding: 4px 10px;
}