@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: #999999;
            margin: 0;
            padding: 0;
        }

        div#pailogin{
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 100;
            margin: auto;
            background-color: rgb(37, 48, 71);
            visibility: visible;
        }
        
        
        div#login {
            margin: auto;
            width: min-content;
            height: 320px;
            display: grid;
            grid-template-columns: min-content;
            grid-template-rows: min-content;
            margin: auto;
            /* box-shadow: 3px 3px 10px rgba(0,0,0,.3); */ /* Sombra da div */
            border-radius: 20px;
            font-size: 15pt;
            /* background-image: linear-gradient(to bottom, #abe7ff , #e0ebff ,#e0ebff ,#fafafa, #e0ebff, #e0ebff , #abe7ff); */
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
            padding: 10px;
        }
        
               /* Tem que ter isso para funcionar animação */
@keyframes deslisaparabaixo {
0% { margin-top: -100%; }
100% { margin-top: 0px; } /* aqui não tem margem porque a div pai dem padding-top */
}

div#login {
animation: deslisaparabaixo 0.5s; /* animação */
}



/* @keyframes efeitovidro {
0% { width: 272px; }
6%{ width: 0px; }
100% { width: 0px; }
} */

                
        
        div#login figure{
            grid-row: 1/2;
            grid-column: 1/2;
            padding: 3px;
            width: 272px;
            height: 80px;
            text-align: left;
        }


        /* div.vidro{
            position:absolute;
            width: 1px;
            height: 105px;
            animation: efeitovidro 7s infinite linear;
            background-color: rgb(37, 48, 71);
        } */
        
        div#login form#login{
            grid-row: 2/3;
            grid-column: 1/2;
            grid-template-columns: min-content;
            grid-template-rows: min-content;
            margin: 10px;
            text-align: center;
        }

        div#login form#login span#login{
            grid-row: 1/2;
            grid-column: 1/2;
            display: flex;
            width: min-content;
            padding-bottom: 10px;
        }

        div#login form#login span#senha{
            grid-row: 2/3;
            grid-column: 1/2;
            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: 274px;
            padding-left: 10px;
        }
        
        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: 274px;
            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: 330px;
        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{
          /* margin-bottom: -15px; */
          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;
        }

        p#infoserver {
            margin-top: 10px;
            z-index: 200;
            margin:auto;
            text-align:center;
            margin-bottom:10px;
        }
        
        div#infoservertext {
            padding:5px;
            background-color:rgb(37, 150, 75);
            color:rgb(255, 255, 255);
            text-align: center;
            font-family: sans-serif, helvetica;
            font:bolder;
            font-size:8pt;
        }