body{
    font-family: Verdana, sans-serif;
    font-size: 1em;
    color: #fff;
    background-color: #f7f7f7;
}

.subTitulo{
    color: black;
    font-weight: 600;
    max-width: 60%;
    margin-left: 1.8%;
    text-align: start;
}

.container{
    max-width: 65%;
    max-height: 95%;
    margin-left: 10%;
    padding: 5% 0% 0% 1%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logoLogin{
    display: flexbox;
    position: inherit;
    padding: 5%;    
}

.fa-sun{
    position: relative;
    margin: 29% 0 0 4rem;
}

.fa-moon{
    position: relative;
    margin: 29% 0 0 4rem; 
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 1% 0 0 80%;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 0.5px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

.loginClass{
    display: grid;
    text-align: center;
    border-radius: 1em;
    border: #e4e4e4de solid 2px;
    margin: 10% 0 0 10%;
    background-color: #ffffffb6;
    width: 100%;
    height: auto;
    padding: 0 30% 0 30%;
}

input{
    border: none;
    border-bottom: rgba(141, 141, 141, 0.74) solid 2px;
    margin: 0.4em;
    text-align: center;
    max-width: 65%;
}

input:focus {
    outline: none;
}

.inputEmpresa{
    margin-top: 2em;
}

#inputSenha {
    margin-left: 2.3em;
}   

.original{
    color: black;
    padding: 0 0 0 0.3em;
}

.changed{
    color: black;
    padding: 0 0 0 0.15em;
}

.botaoLogin{
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    border-radius: 8px;
    width: 70%;
    height: 40%;
    font-weight: 600;
    border-bottom: 0.2em solid #9c5125;
    border-right: 0.1em solid #9c5125;
    background-color: #f15800;
    cursor: pointer;
    margin: 1em 0 2em 0;
}

.botaoLogin:hover {
    border-bottom-width: 0;
    border-right-width: 0;
    transform: translateY(1%);
    margin-bottom: 2.2em;
}

.botaoLogin:active{
    background-color: #9c5125;
}

.botaoEsqueci{
    color: #f15800;
    font-weight: 600;
}

.botaoEsqueci:hover{
    text-decoration: underline;
    cursor: pointer;
}

.botaoSuporte{
    margin: 1.5em 0 1.5em 0;
    border-bottom: 0.2em solid #000c35;
    border-right: 0.1em solid #000c35;
    background-color: #00165e;
    padding: 4%;
    border-radius: 8px;
    font-weight: 600;
    width: 80%;
    cursor: pointer;
}

.botaoSuporte:hover {
    border-bottom-width: 0;
    border-right-width: 0;
    transform: translateY(1%);
    margin-bottom: 1.7em;
}

.botaoSuporte:active{
    background-color: #000c35;
}

.footer{
    position: flex;
    display: flexbox;
    bottom: 0;
    margin: 10% 0 1% 15%;
    color: #979797;
    max-height: auto;
    max-width: 40%;
    font-size: 12px;
    font-weight: 600;
}

/* Tema claro */
body.light-mode {
    font-family: Verdana, sans-serif;
    font-size: 1em;
    color: #fff;
    background-color: #f7f7f7;
}

/* Tema escuro */
body.dark-mode {
    font-family: Verdana, sans-serif;
    font-size: 1em;
    color: #fff;
    background-color: #000133;
}

.dark-mode .subTitulo{
    color: #fff;
}

.dark-mode .footer{
    color: #dadada;
}

.dark-mode .loginClass{
    background-color: #fff;
}