body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(230, 230, 230);
}

.janela_login {
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 80px;
    border-radius: 5px;
    color: #04848c;
    box-shadow: 8px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    width: 210px;
}

@media (max-width: 768px){
    .janela_login{

        background-color: rgb(255, 255, 255);
        position: absolute;
        top: 350px; /* Define a distância do topo */
        left: 195px; /* Define a distância da esquerda */
        transform: translate(-50%,-50%);
        padding: 80px;
        border-radius: 5px;
        color: #04848c;
        box-shadow: 8px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    
        /* Ajustes para aumentar o tamanho */
        width: 210px; /* Ajuste o valor horizontalmente conforme necessário */
        height: 450px; /* Ajuste o valor verticalmente conforme necessário */
    }
}




.span-required {
    color: #ff0000; /* Cor vermelha */
    font-size: 10px; /* Tamanho do texto */
    display: none;
}
.label-usuario{
    margin-left: -60px;
}
.label-senha{
    margin-left: -60px;
}

.input_usuario{
    width: 282px;
    padding: 5px;
    padding-right: 40px; /* Ajuste para dar espaço à imagem dentro do input */
    border-radius: 5px;
    border: 2px solid #d3d3d3; /* Borda cinza claro inicialmente */
    outline: none; /* Remove o outline padrão */
    font-size: 15px;
    transition: border-color 0.3s ease; /* Adiciona uma transição suave */
    margin-left: -60px;
}
.input_login{
    width: 282px;
    padding: 5px;
    padding-right: 40px; /* Ajuste para dar espaço à imagem dentro do input */
    border-radius: 5px;
    border: 2px solid #d3d3d3; /* Borda cinza claro inicialmente */
    outline: none; /* Remove o outline padrão */
    font-size: 15px;
    transition: border-color 0.3s ease; /* Adiciona uma transição suave */
    margin-left: -60px;
}

.input_usuario:hover, .input_login:hover {
    border-color: #04848c; /* Muda a cor da borda ao passar o mouse */
}

.input-error {
    border: 2px solid #e63636; /* Borda vermelha para erros */
}

.input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 282px;
}

/* Estilo para o ícone de olho */
.eye-icon {
    width: 20px;
    position: absolute;
    right: 15px;
    cursor: pointer;
}
.imagem_login {
    text-align: center;
}

.button_enviar {
    background-color: #04848c;
    border: none;
    padding: 15px;
    width: 100%;
    border-radius: 5px;
    color: aliceblue;
    cursor: pointer;
}

.button_enviar:hover {
    background-color: #01494e;
}

.sub_title {
    font-size: 10px;
    text-align: center;
}

.centralizar {
    text-align: center; /* Alinha o conteúdo ao centro */
}

.button_cadastro {
    background-color: rgb(230, 230, 230);
    border: none;
    padding: 15px;
    width: 100%;
    border-radius: 5px;
    color: #04848c;
    cursor: pointer;
    text-decoration: none;
}

.button_cadastro:hover {
    background-color: #04848c;
    color: rgb(230, 230, 230);
}
/*-----------------------------------------------------------------CSS RODAPE--------------------------------------------------------------*/
/*----------------------------------------------------REPONSIVIDADE PARA TELAS MAIORES PC---------------------------------------------------*/
.borda-rodape{
    background-color: transparent;
    position: absolute;
    top: 685px; /* Define a distância do topo */
    left: 265px; /* Define a distância da esquerda */
    width: 1060px; /* Ajuste o valor horizontalmente conforme necessário */
    height: 150px; /* Ajuste o valor verticalmente conforme necessário */    
    text-align: center;
    color: #929292;
    font-size: 12px;
}
/*------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------CSS RODAPE--------------------------------------------------------------*/
/*----------------------------------------------------REPONSIVIDADE PARA TELAS MENORES PC---------------------------------------------------*/
@media (min-width: 770px) and (max-width: 1599px) {
    .borda-rodape{
        background-color: transparent;
        position: absolute;
        top: 685px; /* Define a distância do topo */
        left: 195px; /* Define a distância da esquerda */
        width: 1060px; /* Ajuste o valor horizontalmente conforme necessário */
        height: 150px; /* Ajuste o valor verticalmente conforme necessário */    
        text-align: center;
        color: #929292;
        font-size: 12px;
    }
}
/*------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------CSS RODAPE--------------------------------------------------------------*/
/*--------------------------------------------------------RESPOSIVIDADE PARA CELULAR---------------------------------------------------------*/
@media (min-width: 350px) and (max-width: 768px){
    .borda-rodape{
        background-color: transparent;
        position: absolute;
        top: 685px; /* Define a distância do topo */
        left: 10px; /* Define a distância da esquerda */
        width: 370px; /* Ajuste o valor horizontalmente conforme necessário */
        height: 150px; /* Ajuste o valor verticalmente conforme necessário */    
        text-align: center;
        color: #929292;
        font-size: 12px;
    }
}
/*-------------------------------------------------------------BARRA DE ROLAGEM---------------------------------------------------------------*/
/* Barra de rolagem para navegadores baseados em WebKit */
::-webkit-scrollbar {
    width: 10px; /* Largura da barra vertical */
    height: 10px; /* Altura da barra horizontal */
}

::-webkit-scrollbar-thumb {
    background-color: #00828e; /* Cor da barra */
    border-radius: 20px; /* Arredondamento */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #00666c; /* Cor ao passar o mouse */
}

::-webkit-scrollbar-track {
    background: #d4d4d4; /* Cor do fundo da barra */
    border-radius: 10px;
}

/* Personalização para navegadores como Firefox */
* {
    scrollbar-color: #00828e #e2e2e2; /* Cor da barra e do fundo */
    scrollbar-width: thin; /* Define a largura como "fina" */
}