/*----------------------------------------
    Login Page
------------------------------------------*/
main {
    position: relative;
    height: 100%;
}

@media (max-width: 991.98px) {
    main {
        height: calc(100vh - 27px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.content-main {
    position: relative;
    width: 100%;
    min-height: 100%;
    background: linear-gradient(to right, #1D364E 0%, #0B151E 100%); /* #11212F #1D364E #0B151E.(dark) */
}

.content-logo {
    position: relative;
    width: 570px;
    max-width: 570px;
    margin: 0 auto;
    padding: 0px;
}

    .content-logo .mov-mobile img {
        width: calc(100% - 32px);
    }

    .content-logo .text-mov-1 {
        font-size: 1.3rem;
        font-weight: bold;
    }

    .content-logo .text-mov-2 {
        font-size: 1rem;
        font-weight: 500;
    }

.content-login {
    right: 0px;
    width: 400px;
    height: 100vh;
    padding: 0px;
    background-color: white;
}

.form-box {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
}

.login-form {
    position: relative;
    width: 100%;
    height: 100% !important;
    padding: 10px;
}

    .login-form .form-mov-img {
        width: 100%;
        height: 50px;
        margin: 0px;
        padding: 2px;
    }

        .login-form .form-mov-img img {
            width: 180px;
            margin: 0px;
        }

/* <form row col> */
.form-box .login-form .row {
    margin: 0px !important;
    padding: 0px !important;
}

    .form-box .login-form .row .col,
    .form-box .login-form .row .col.s12,
    .form-box .login-form .row .col.m12,
    .form-box .login-form .row .col.l12 {
        margin: 0px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

        .form-box .login-form .row .col i {
            position: absolute !important;
            float: right;
            right: 2px;
            width: 3rem;
            margin: 0px;
            padding: 0px;
            bottom: .2rem;
            font-size: 2rem;
        }

        .form-box .login-form .row .col input {
            position: relative;
            width: 100%;
            margin: 0px !important;
            /*padding: 0px !important;*/
            padding-right: 50px !important;
            box-sizing: border-box;
        }

        .form-box .login-form .row .col label {
            width: 98%;
            top: .38rem;
            left: .30rem;
            margin: 0px !important;
            padding: 0px !important;
        }

        .form-box .login-form .row .col .input-field select option {
            height: 10px;
            font-size: small;
            border: 1px solid red !important;
        }
/* <form row col> */

.input-field .input-alert {
    width: 100%;
    display: block;
    height: 18px !important;
    font-size: 12px;
    margin-left: 2px !important;
    font-weight: 700;
}

.form-box .login-form .btn-login {
    transition: background-color 0.4s ease;
    background-color: #154B82;
}

    .form-box .login-form .btn-login:hover {
        transition: background-color 0.4s ease;
        background-color: #0C2947;
    }

.footer-text {
    height: 30px;
    line-height: 28px;
    font-size: 0.9rem;
}

/* <bootstarp> font */
/* Large devices (desktops, 991px and down) */
@media (max-width: 991.98px) {
    .flex-sm-column {
        position: relative;
        width: auto;
        padding-bottom: 32px;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }

    .content-logo {
        width: 100%;
    }

        .content-logo .mov-mobile img {
            max-width: 350px;
        }

        .content-logo .text-mov-1 {
            font-size: 14px;
        }

        .content-logo .text-mov-2 {
            font-size: 12px;
        }

    .content-login {
        width: 380px;
        max-width: 380px;
        height: auto;
        margin-left: 10px;
        margin-right: 10px;
        padding: 0px;
    }

    @media (min-height: 737.98px) and (max-height: 1280.98px) {
        @media (orientation: portrait) {
            .flex-sm-column {
                padding-top: 15%;
            }
        }
    }
}
/* </bootstarp> font */

/* <Efeito de baixo para cima> */
@keyframes slideFromBottomToTopMov {
    0% {
        transform: translateY(5%);
        opacity: 0;
        visibility: hidden;
    }

    100% {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
    }
}

.content-logo .mov-mobile {
    animation: 1s ease-out 0s slideFromBottomToTopMov;
}

@keyframes slideFromBottomToTopText {
    0% {
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
    }

    50% {
        transform: translateY(50%);
        opacity: 0.5;
        visibility: hidden;
    }

    100% {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
    }
}

.content-logo .slide-mov {
    animation: 1s ease-out 0s slideFromBottomToTopText;
}
/* </Efeito de baixo para cima> */

/* <Pagina reset password> */
.alert-info-pass {
    background: linear-gradient(to bottom, #f3f2f2 0%, #dadada 100%);
    border: 1px solid #8d9296bd;
    border-radius: 10px;
    z-index: 3;
    width: 98%;
    height: auto;
    padding: 0px 10px;
    bottom: 68px;
    -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.6);
    box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.6);
}

    .alert-info-pass::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 8px;
        border-style: solid;
        border-color: #8d9296bd transparent transparent transparent;
    }

    .alert-info-pass ul {
        font-size: .9rem;
        font-weight: 700;
        width: 100%;
        height: 100%;
        margin: 0px;
    }

        .alert-info-pass ul li {
            margin-left: 15px;
        }

            .alert-info-pass ul li:nth-child(1) {
                margin-left: 20px;
                color: #0071C4 !important;
            }

            .alert-info-pass ul li div.li-custom-error,
            .alert-info-pass ul li div.li-custom-sure {
                position: relative;
                float: left;
                top: 0px;
                width: 20px;
                height: 18px;
                text-align: center;
                margin-right: 8px;
            }

            .alert-info-pass ul li div.li-custom-sure {
                border-left: 2px solid green;
                border-bottom: 2px solid green;
                top: 5px;
                left: 6px;
                margin-right: 14px;
                width: 14px;
                height: 8px;
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotateZ(-45deg);
            }
/* </Pagina reset password> */