@charset "UTF-8";


/* Para usar uma fonte diferente tem que criar a pasta
fonts e colar o arquivo fonte também na pasta.
*/
@font-face{
    font-family: 'MvBoli';
    src: url("../_fonts/mvboli.ttf");
        }
        
        body{
            background-color: rgb(37, 48, 71);
            margin: 0;
            padding: 0;
        }

        div#pailogin{
            margin: auto;
            background-color: rgb(37, 48, 71);
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        /* Tem que ter isso para funcionar animação */
        @keyframes revelaAlert {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
        }

        div#login {
            width: min-content;
            font-size: 15pt;
            text-align: center;
            /* padding: 10px; */
            display: flex;
            flex-direction: row;
            justify-items: center;
            align-items: center;
            background-image: linear-gradient(to bottom, #abe7ff , #e0ebff ,#e0ebff ,#fafafa, #e0ebff, #e0ebff , #abe7ff);
            padding: 20px 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 12px 3px inset #0084b9;
            animation: revelaAlert 0.5s;
            animation-iteration-count: 1;
        }
        
        div#login form#login{
            margin: 10px;
            text-align: center;
        }

        div#login form#login span#login{
            display: flex;
            width: min-content;
            padding-bottom: 10px;
        }

        div#login form#login span#senha{
            display: flex;
            width: min-content;
            padding-bottom: 10px;
        }
        
        div#login form#login span#login input.login{
            border-style: none;
            height: 37px;
            border-radius: 6px;
            margin-left: 3px;
            border-style: solid;
            border-width: 3px;
            border-color: rgba(0,0,0,0); /* Defini a borda 100 transparente */
            width: 200px;
            padding-left: 10px;
            font-size: 12px;
            font-family: 'Roboto', Arial, sans-serif;
        }
        
        input.login:focus{
            border-color: #55b6dd;
        }
        
        div#login form#login span#senha input.senha{
            border-style: none;
            height: 37px;
            border-radius: 6px;
            margin-left: 3px;
            border-style: solid;
            border-width: 3px;
            border-color: rgba(0,0,0,0); /* Defini a borda 100 transparente */
            width: 200px;
            padding-left: 10px;
        }
        
        div#login form#login span#senha input.senha:focus{
            border-color: #55b6dd;
        }
        
        
        input.botao{ /* Botão do formulário de acesso */
        grid-row: 3/4;
        grid-column: 1/2;    
        height: 50px;
        width: 256px;
        background-color: #e5e5e5;
        border-radius: 6px;
        background-color: #0b92c8;
        font-weight: bold;
        color: #ffffff;
        padding: 10px;
        font-size: 12px;
        }
    
        input.botao:hover{ /* Botão do formulário padrão ao passar mouse por cima */
        background-color: dodgerblue;
        color: #ffffff;
        box-shadow: 3px 3px 10px rgba(0,0,0,.3);
        }   
        
        img.logologin{
          height: 40px;
          border-radius: 6px;
        }
        
        /* Ajuste para tirar borda muita larga para input após atualização do Chrome */
        input.login, input.senha, input.botao {
        outline: none!important;
        border: solid 1px rgb(140, 140, 140)!important;
        }

        .logoAcesso{
            width: 200px;
        }

        .borda{
            border-color: #ffffff;
            border-style: solid;
            padding: 5px;
            border-radius: 10px;
            box-shadow: 0px 0px 2px 0px #323333b8 inset;
            display: flex;
            flex-direction: column;
            }