@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");

* {
    font-family: "Roboto", sans-serif;
}

html {
    height: 100vh;
}

body {
    min-height: 100vh;
    color: #141414;
    font-size: 14px;
}

.content {
    height: 100vh;
}

.flex-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.page-login {
    background-color: #e6e6e6;
}

.area-qrcode {
    margin: 40px;
}

    .area-qrcode > img {
        width: 160px;
    }

.page-login ::-moz-selection {
    background: #000000;
    color: white;
}

.page-login ::selection {
    background: #000000;
    color: white;
}

.section-login {
    background-color: #ffffff;
    /* -webkit-box-shadow: 0px 10px 32px -4px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 10px 32px -4px rgba(0,0,0,0.2);
    box-shadow: 0px 10px 32px -4px rgba(0,0,0,0.2); */
    padding: 60px 50px;
    width: 100vw;
    max-width: 390px;
}

    .section-login header {
        margin-bottom: 60px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .section-login header > img {
            margin: auto;
            max-height: 85px;
        }

        .section-login header .note {
            margin-top: 5px;
            font-size: 12px;
            font-weight: 300;
            color: #b4b4b4;
        }

    .section-login a {
        color: #2079b5;
        text-decoration: underline;
    }

        .section-login a:hover {
            color: #0d3149;
        }

    .section-login .form-login label {
        font-weight: 400;
        color: #141414;
        font-size: 16px;
    }

    .section-login .form-login input[type="text"],
    .section-login .form-login input[type="password"] {
        display: block;
        width: 100%;
        height: 40px;
        padding: 6px 0 10px;
        background: transparent;
        border: none;
        color: #b4b4b4;
        border-bottom: 1px solid #141414;
        transition: border 0.25s ease-out;
    }

        .section-login .form-login input[type="text"]::placeholder,
        .section-login .form-login input[type="password"]::placeholder {
            color: #b4b4b4;
        }

        .section-login .form-login input[type="text"]:focus,
        .section-login .form-login input[type="password"]:focus {
            border-color: #000000;
            outline: none;
        }


    .section-login .form-login-bemvindo {
        margin-top: -20px;
    }

        .section-login .form-login-bemvindo .message {
            margin-top: 0;
        }

        .section-login .form-login-bemvindo .user {
            overflow: hidden;
        }

        .section-login .form-login-bemvindo .foto,
        .section-login .form-login-bemvindo .nome {
            float: left;
        }

        .section-login .form-login-bemvindo .foto {
            width: 20%;
        }

            .section-login .form-login-bemvindo .foto img {
                margin: auto;
                max-width: 100%;
                display: block;
                border-radius: 5px;
            }

        .section-login .form-login-bemvindo .nome {
            width: 80%;
            padding-top: 20px;
            padding-left: 10px;
            line-height: 1.8rem;
            font-size: 2rem;
            word-break: break-all;
        }

        .section-login .form-login-bemvindo a.sair-totalmente {
            float: right;
            font-size: 0.9rem;
            vertical-align: bottom;
        }

    .section-login a.lembrar-senha {
        display: block;
        margin-top: 15px;
        margin-bottom: 40px;
        font-size: 11px;
        font-weight: 500;
        color: #00aadc;
        text-transform: lowercase;
    }

.btn-login {
    display: block;
    width: 100%;
    border-radius: 0;
    background-color: #141414;
    height: 50px;
    text-transform: lowercase;
    color: #ffffff;
    border: none;
    font-size: 16px;
    font-weight: 700;
}

    .btn-login:hover,
    .btn-login:focus,
    .btn-login:active {
        color: #ffffff;
        background-color: #000;
        border-color: #000;
    }

    .btn-login.disabled:hover,
    .btn-login.disabled:focus,
    .btn-login.disabled.focus,
    .btn-login[disabled]:hover,
    .btn-login[disabled]:focus,
    .btn-login[disabled].focus,
    fieldset[disabled] .btn-login:hover,
    fieldset[disabled] .btn-login:focus,
    fieldset[disabled] .btn-login.focus {
        background-color: #000000;
        border-color: #000;
    }

@media (min-width: 750px) {
    .content-login {
        height: 100vh;
    }

    .section-login {
        margin-top: 50px;
    }
}

/* custom ui*/
.validation-summary-errors {
    padding: 10px;
    margin-bottom: 30px;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #faccd1;
    color: #e8263d !important;
    background-color: #fcdee2;
    margin-top: -50px
}

    .validation-summary-errors ul {
        margin-bottom: 0;
    }

.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -30px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.icon-eye-slash {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAABwklEQVQ4ja3US4hPYRgG8N/MbFCmlI1YTE1SQ8ilXIqyEpNrEn+XUBMKC5LLQuQyig0pWZhQYyGX5C8rZZpBbiERNqOUjSzEgtTorfev03RmMY1nczrn+87zvc/7PO9XV61Wn+Aj2vDTEFGPR1iLxxj/Pwh3YSOa8QxLc20UruATfuEPPuMm1mHYQISBy5iFr7iF4/iOS3iFCziPl5ifB73H8oEIA68xA3ewH/eSYAluZ3UHMCZb1IcbOIW6MsKDmJMEh7AAzzETXWjKanfgKibhOnajvT/hIhzF5jz5CBZjJLqxAVtz/XCS/cDqbNFetAZRxEbGZjhasnc1NGUV09CB7bknDLyWexrxNo1rri+RXsOqdHpukm1CD74VyIroKxJFdMamqw357V3KXZNS21LqCywsEHXkvzvjpaFSqcTzA0ZgCybibrr6G+fS2ZOI/izDtiTryl6G5Iv9pe7DaazEm6zsLKagF/PwFNNxP82JOD3EsbLYRA/2YEXmqhNfMuTjCnmcmpJPpLMxXZPLCGuI0ZqA9XiQBBGZ6GFUG2MazkbIQ/7ovAciWv9iMxTEhRITE4adKatwsIgMxz3Qidl/AQC+azM+bKuPAAAAAElFTkSuQmCC') !important;
}

.icon-eye {
    width: 20px;
    height: 16px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAABN2lDQ1BBZG9iZSBSR0IgKDE5OTgpAAAokZWPv0rDUBSHvxtFxaFWCOLgcCdRUGzVwYxJW4ogWKtDkq1JQ5ViEm6uf/oQjm4dXNx9AidHwUHxCXwDxamDQ4QMBYvf9J3fORzOAaNi152GUYbzWKt205Gu58vZF2aYAoBOmKV2q3UAECdxxBjf7wiA10277jTG+38yH6ZKAyNguxtlIYgK0L/SqQYxBMygn2oQD4CpTto1EE9AqZf7G1AKcv8ASsr1fBBfgNlzPR+MOcAMcl8BTB1da4Bakg7UWe9Uy6plWdLuJkEkjweZjs4zuR+HiUoT1dFRF8jvA2AxH2w3HblWtay99X/+PRHX82Vun0cIQCw9F1lBeKEuf1UYO5PrYsdwGQ7vYXpUZLs3cLcBC7dFtlqF8hY8Dn8AwMZP/fNTP8gAAAAJcEhZcwAACxMAAAsTAQCanBgAAATxaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0OCA3OS4xNjQwMzYsIDIwMTkvMDgvMTMtMDE6MDY6NTcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChNYWNpbnRvc2gpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMC0wNC0xNVQwMDo0MzowNC0wMzowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjAtMDQtMTVUMDA6NDM6NTYtMDM6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMDQtMTVUMDA6NDM6NTYtMDM6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFhMDMyZTlkLTY2MzUtNDMxMy1hMjVjLWQxYmU5OTdlZGMyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxYTAzMmU5ZC02NjM1LTQzMTMtYTI1Yy1kMWJlOTk3ZWRjMjYiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxYTAzMmU5ZC02NjM1LTQzMTMtYTI1Yy1kMWJlOTk3ZWRjMjYiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjFhMDMyZTlkLTY2MzUtNDMxMy1hMjVjLWQxYmU5OTdlZGMyNiIgc3RFdnQ6d2hlbj0iMjAyMC0wNC0xNVQwMDo0MzowNC0wMzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+X3LerQAAAYdJREFUOI190z1Il1EUBvDf/yX7sGiKhooog0aHliKIMCocxAiElqCsQQuioMFBCFqiQXQoNIK0cguiIV6jqCGagpxE6IOsyGppaEgF+fcx3CNcXv76TOfcc85z7/Pce2tlWWqAdTiJ09hfqb3GPdzHXHWwaEB2FfO4HWQ/cAuDmMJeDOM3rq9EuBnvcAXfcCLqW2LwBlpRQwe+og8z2Fol3IaP2I3+yB/gX9Qn8AkLaEeJ7biMnUHakhO+xAZ04VpFxXpsingtnuBY5INx2tV4haYipLTgIh5mRO04jsdhR47zWVyiJ6wZqZVlWQ9f1qCeNU5ij8b4INmTYw7NBUYl6WcrDZ+XIYMvlfwUmjFe4BxmpafRkTWNrEA4nMVHcBc/0VPgDw5iUfLrUjQ+x2HpZpdQRyceRd6LZxEfwMLSLc9glyRzKPKjeBFSdkS9KTZtw/tQ8T1qb2FVtvus9KYGpPf1NNbfxGn/4hD2ZTM3cSH3orbMX96IM+iWfkeOaYzhDn5VB/8DLrNWxMUPrtUAAAAASUVORK5CYII=')
}


/* animations */
.shadow-drop-2-center {
    -webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes shadow-drop-2-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        -webkit-transform: translateZ(50px);
        transform: translateZ(50px);
        -webkit-box-shadow: 0px 10px 32px -4px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 10px 32px -4px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 10px 32px -4px rgba(0, 0, 0, 0.2);
    }
}

@keyframes shadow-drop-2-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        -webkit-transform: translateZ(50px);
        transform: translateZ(50px);
        -webkit-box-shadow: 0px 10px 32px -4px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 10px 32px -4px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 10px 32px -4px rgba(0, 0, 0, 0.2);
    }
}

.slide-in-elliptic-top-fwd {
    -webkit-animation: slide-in-elliptic-top-fwd .7s cubic-bezier(.25, .46, .45, .94) both;
    animation: slide-in-elliptic-top-fwd .7s cubic-bezier(.25, .46, .45, .94) both
}

@-webkit-keyframes slide-in-elliptic-top-fwd {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1
    }
}

@keyframes slide-in-elliptic-top-fwd {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1
    }
}

.jello-horizontal {
    animation: jello-horizontal .9s 2s both
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1)
    }

    30% {
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        transform: scale3d(1.05, .95, 1)
    }

    100% {
        transform: scale3d(1, 1, 1)
    }
}

.fade-in {
    -webkit-animation: fade-in 1.2s cubic-bezier(.39, .575, .565, 1.000) 0.3s both;
    animation: fade-in 1.2s cubic-bezier(.39, .575, .565, 1.000) 0.3s both
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.bounce-in-bottom {
    -webkit-animation: bounce-in-bottom 1.1s .3s both;
    animation: bounce-in-bottom 1.1s .3s both
}

@-webkit-keyframes bounce-in-bottom {
    0% {
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }

    55% {
        -webkit-transform: translateY(65px);
        transform: translateY(65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    81% {
        -webkit-transform: translateY(28px);
        transform: translateY(28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    95% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes bounce-in-bottom {
    0% {
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }

    55% {
        -webkit-transform: translateY(65px);
        transform: translateY(65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    81% {
        -webkit-transform: translateY(28px);
        transform: translateY(28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    95% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: none;
    background: white;
    -webkit-text-fill-color: #b4b4b4;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

.btn-back {
    background-color: #337ab7
}

    .btn-back:hover,
    .btn-back:focus,
    .btn-back:active {
        color: #ffffff;
        background-color: #337ab7;
        border-color: #000;
    }

.parsley-errors-list.filled {
    color: red;
    font-size: 13px;
    list-style-type: none;
    margin: 5px 0px 0px -40px;
}