﻿.jacsys__login-area {
    display: flex;
    width: 100%;
    height: 100%;
    flex-flow: wrap;
}

.jacsys__login-area .jacsys__login-area-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.jacsys__login-area, .jacsys__login-area * {
    font-family: Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif;
}

.jacsys__login-area .login-box {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 440px;
    min-height: 380px;
    flex: none;
    padding: 6px;
    overflow: hidden;
}

.jacsys__login-area .login-box.register {
    max-width: 640px;
}

.jacsys__login-area .login-box.message {
    max-width: 640px;
    min-height: unset;
    width: unset;
}

.jacsys__login-area .login-box .login {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 32px;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.20);
    border-radius: 14px;
}

select,
input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"] {
    box-shadow: none;
    padding: 6px 10px;
    border: none;
    border-bottom: 1px solid #666;
    min-height: 36px;
    border-radius: 0;
    -webkit-border-radius: 0;
    display: block;
    width: 100%;
    outline: none;
}

/*
select:invalid,
input[type="text"]:invalid,
input[type="url"]:invalid,
input[type="email"]:invalid,
input[type="password"]:invalid {
    border-bottom: 1px solid red;
}
*/

.container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    flex: none;
    gap: 12px;
    transition: visibility 0.3s ease;
}

.jacsys__login-area .login-box img.logo {
    max-width: 256px;
    height: 36px;
    object-fit: contain;
}

.actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: end;
    justify-content: end;
}

.actions:last-of-type {
    flex-grow: 1;
}

button[type="submit"] {
    margin-top: 20px;
}

h1 {
    color: #1b1b1b;
    font-size: 1.8rem;
    font-weight: 600;
}

.logotipo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
}

.logotipo.center {
    justify-content: center;
}

.carousel {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel .gallery {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100%;
    min-width: 100%;
    transition: all 0.3s ease;
}

.carousel .gallery .slide {
    width: 100%;
    height: 0;
    flex: none;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.carousel.signin .gallery {
    transform: translateX(0%);
}

.carousel.signin .slide.signin {
    visibility: visible;
    height: 100%;
    opacity: 1;
}

.carousel.recovery .gallery {
    transform: translateX(-100%);
}

.carousel.recovery .slide.recovery {
    visibility: visible;
    height: 100%;
    opacity: 1;
}

.carousel.user_change .gallery {
    transform: translateX(-200%);
}

.carousel.user_change .slide.user_change {
    visibility: visible;
    height: 100%;
    opacity: 1;
}

.carousel.recovery_change .gallery {
    transform: translateX(-300%);
}

.carousel.recovery_change .slide.recovery_change {
    visibility: visible;
    height: 100%;
    opacity: 1;
}

.carousel.informer .gallery {
    transform: translateX(-400%);
}

.carousel.informer .slide.informer {
    visibility: visible;
    height: 100%;
    opacity: 1;
}

.message_error {
    color: red;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.telephoneRow {
    display:flex;
    gap:8px;
}

.telephoneRowInput {
    width:60px;
}

.solicitacaoOk {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:24px;
}

