* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {

font-size: 14px;
}

td {
    white-space: normal;
}

th {
    white-space: normal;
}

.container-menu {
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
header {
background-color:white;
width: 100%;
border-bottom: solid;
border-color: #dee2e6;
border-width: 1px;
position: fixed;
z-index: 10;
top: 0;
padding: 10px;
}

.logo-login {
    width: 80%;
    height: 80%;
}

.img-logo {
    margin-top: 30%;
    justify-content: center;
    display: flex;
}

.logo {
width: 30%;
margin-left: 10px;
}

.logout {
width: 25%;
}

.menu {
width: 100%;
}

.menu nav a {
color: dimgrey;
text-decoration: none;
padding-right: 70px;
font-size: 16px;
position: relative;
}

.menu nav a::after {
content: " ";
width: 0px;
height: 4px;
background-image: linear-gradient(45deg, #FF2500, #FF7100);
position: absolute;
top: 30px;
left: 0;
transition: width 0.5s;
}

.menu nav a:hover::after{
width: 30px;

}

.logo img {
width: 200px;
    
}

.logout {
margin-top: 15px;
display: flex;
}


.sair img {
cursor: pointer;
margin-right: 8px;

}

.text-center {
margin-top: 8%;
}

.footer {
color: dimgrey;
width: 100%;
height: 5%;
border-top: solid;
border-color: #dee2e6;
border-width: 1px;
position: fixed;
z-index: 10;
bottom: -1px;
background-color: white;
text-align: center;

}

.p-footer {
margin-top: 6px;
  
}

.cancelar {
background-color: darkred;
color: white;
width: 140px;
height: 40px;
border-radius: 5px;
border: none;
}

.cancelar:is(:hover) {
background-color: darksalmon;
}

.cancelar:is(:disabled) {
background-color: darksalmon;
}


.btenv  {
position: relative;
display: inline;
float: right;
margin-bottom: 15%;
}

.menu-mobile {
background-color: #0000008c;
backdrop-filter: blur(10px);
position: absolute;
top: 71px;
left: 0;
width: 100%;
height: 0;
visibility: hidden;
transition: 0.5s;
overflow: hidden;

}

.menu-mobile nav a{
color: white;
text-decoration: none;
display: block;
padding: 20px 30px;
font-size: 12pt;
    

}

.menu-mobile nav p {
color: white;
text-decoration: none;
display: block;
padding: 20px 30px;
font-size: 14pt;
}

.menu-mobile nav a:is(:hover) {

background-color: #000000ce;

}

.btn-menu {
width: 50px;
height: 50px;
border: 4px solid dimgrey;
border-radius: 8px;
background: transparent;
cursor: pointer;
display: none;
}

.linha {
width: 35px;
height: 4px;
background-color: dimgrey;
display: block;
margin: 5px auto;
position: relative;
transform-origin: center;
transition: 0.2s;
}

.btn-menu.ativar{
border: 4px solid dimgrey;

}

.btn-menu.ativar .linha:nth-child(1) {
transform: translateY(5px) rotate(-40deg);
}

.btn-menu.ativar .linha:nth-child(2) {
display: none;
}

.btn-menu.ativar .linha:nth-child(3) {
transform: translateY(-5px) rotate(40deg);

}

@media screen and (max-width: 2687px) {

html {
font-size: 17px;
}


.logo img {
width: 230px;
}

.text-center {
margin-top: 12%;
}

.menu nav a {
padding-right: 5em;
font-size: 20px;
left: -150px;
}

.logo {
width: 30%;
margin-left: 10px;
}

.logout {
width: 30%;
}

.menu {
width: 85%;
}

.ola {
width: 85%;
}

.ola p {
    font-size: 17px;
}

.sair img {
width: 35px;
}
}

@media screen and (max-width: 1920px) {

html {
font-size: 16px;
}


.logo img {
width: 190px;
}

.text-center {
margin-top: 12%;
}

.menu nav a {
padding-right: 5em;
font-size: 18px;
left: 0;
}

.logo {
width: 30%;
margin-left: 10px;
}

.logout {
width: 30%;
}

.menu {
width: 85%;

}

.ola {
width: 80%;
}

.ola p {
    font-size: 16px;
}

.sair img {
    width: 30px;
}

}

@media screen and (max-width: 1440px) {

html {
font-size: 15px;
}


.logo img {
width: 190px;
}

.text-center {
margin-top: 12%;
}

.menu nav a {
padding-right: 4em;
font-size: 17px;
left: 5px;
}

.logo {
width: 30%;
margin-left: 9px;
}

.logout {
width: 40%;
}

.menu {
width: 60%;
}

.ola {
width: 85%;
}

.ola p {
    font-size: 16px;
}

.sair img {
width: 30px;
}
}

@media screen and (max-width: 1420px) {

html {
font-size: 14px;
}


.logo img {
width: 190px;
}

.text-center {
margin-top: 12%;
}

.menu nav a {
        
padding-right: 4em;
font-size: 16px;
left: -50px;

}

.logo {
width: 30%;
margin-left: 10px;
}

.logout {
width: 33%;
}

.menu {
width: 60%;

}

.ola{
width: 85%;
}

.ola p {
    font-size: 15px;
}



.sair img {
width: 25px;
}

}

@media screen and (max-width: 1366px) {

html {
font-size: 13px;
}


.logo img {
width: 150px;
}

.text-center {
margin-top: 12%;
}

.menu nav a {
padding-right: 4em;
left: 80px;
font-size: 15px;
}

.logo {
width: 20%;
margin-left: 10px;
}

.logout {
width: 30%;
}

.menu {
width: 60%;
}

.ola {
width: 90%;
}

.ola p{
    font-size: 14px;
    width: 100%;
}

.sair img {
width: 22px;
}
}



@media screen and (max-width: 1083px) {

html {
font-size: 14px;
}


.logo img {
width: 170px;
}

.text-center {
margin-top: 12%;
}

.menu nav a {
padding-right: 4em;
left: 80px;
}

.logo {
width: 20%;
margin-left: 10px;
}

.logout {
width: 35%;
}

.menu {
width: 70%;
}

.ola {
width: 85%;
}

.ola p {
    font-size: 15px;
}

.sair img {
width: 25px;
}
}



@media screen and (max-width: 920px) {


html {
    font-size: 12px;
}

.menu, .sair {
display: none;
}

.logo {
width: 70%;
}

.menu-mobile.abrir {
visibility: visible;
height: 100vh;
}

.btn-menu {
display: block;
width: 40px;
height: 40px;
}

.linha {
width: 19px;
}

.text-center {
margin-top: 15%;
}

.logout {
display: none;
}
}
@media screen and (max-width: 920px) {



.menu, .sair {
display: none;
}

.menu-mobile {
display: block;
}

.logo img {
width: 140px;
}

.btn-menu {
display: block;
width: 34px;
height: 34px;
border: 3px solid dimgrey;
}

.linha {
width: 20px;
height: 3px;
background-color: dimgrey;
display: block;
margin: 4px auto;
position: relative;
transform-origin: center;
transition: 0.2s;
}

.btn-menu.ativar {
border: 3px solid dimgrey;
}

.btn-menu.ativar .linha:nth-child(1) {
transform: translateY(3px) rotate(-40deg);
}


.btn-menu.ativar .linha:nth-child(3) {
transform: translateY(-4px) rotate(40deg);
}



.ola {
display: none;
}

.menu-mobile {
top: 55px;
}

.text-center {
margin-top: 15%;
}
}

@media screen and (max-width: 768px) {


.menu-mobile {
top: 66px;
}

.text-center {
margin-top: 15%;
}

}

@media screen and (max-width: 768px) {

.menu, .sair {
display: none;
}

.menu-mobile {
display: block;
}

.logo img {
width: 140px;
}

.btn-menu {
display: block;
width: 32px;
height: 32px;
border: 3px solid dimgrey;
}

.linha {
width: 19px;
height: 3px;
background-color: dimgrey;
display: block;
margin: 4px auto;
position: relative;
transform-origin: center;
transition: 0.2s;
}

.btn-menu.ativar {
border: 3px solid dimgrey;
}

.btn-menu.ativar .linha:nth-child(1) {
transform: translateY(3px) rotate(-40deg);
}


.btn-menu.ativar .linha:nth-child(3) {
transform: translateY(-4px) rotate(40deg);
}



.ola {
display: none;
}

.menu-mobile {
top: 54px;
}

.text-center {
margin-top: 13%;
}

}


@media screen and (max-width: 425px) {
.menu, .sair {
display: none;
}

.menu-mobile {
display: block;
}

.logo img {
width: 140px;
}

.btn-menu {
display: block;
width: 32px;
height: 32px;
border: 3px solid dimgrey;
}

.linha {
width: 19px;
height: 3px;
background-color: dimgrey;
display: block;
margin: 4px auto;
position: relative;
transform-origin: center;
transition: 0.2s;
}

.btn-menu.ativar {
border: 3px solid dimgrey;
}

.btn-menu.ativar .linha:nth-child(1) {
transform: translateY(3px) rotate(-40deg);
}


.btn-menu.ativar .linha:nth-child(3) {
transform: translateY(-4px) rotate(40deg);
}



.ola {
display: none;
}

.menu-mobile {
top: 54px;
}

.text-center {
margin-top: 20%;
}
}

@media screen and (max-width: 375px) {


.menu, .sair {
display: none;
}

.menu-mobile {
display: block;
}

.logo img {
width: 120px;
}

.btn-menu {
display: block;
width: 31px;
height: 31px;
border: 3px solid dimgrey;
}

.linha {
width: 18px;
height: 3px;
background-color: dimgrey;
display: block;
margin: 3px auto;
position: relative;
transform-origin: center;
transition: 0.2s;
}

.btn-menu.ativar {
border: 3px solid dimgrey;
}

.btn-menu.ativar .linha:nth-child(1) {
transform: translateY(3px) rotate(-40deg);
}

.btn-menu.ativar .linha:nth-child(3) {
transform: translateY(-4px) rotate(40deg);
}

.ola {
display: none;
}

.menu-mobile {
top: 50px;
}

.text-center {
margin-top: 20%;
}


}


@media screen and (max-width: 320px) {

    html {
    font-size: 12px;
    }

    .menu, .sair {
    display: none;
    }

    .menu-mobile {
    display: block;
    }

    .logo img {
    width: 100px;
    }

    .btn-menu {
    display: block;
    width: 30px;
    height: 30px;
    border: 3px solid dimgrey;
    }

    .linha {
    width: 15px;
    height: 3px;
    background-color: dimgrey;
    display: block;
    margin: 3px auto;
    position: relative;
    transform-origin: center;
    transition: 0.2s;
    }

    .btn-menu.ativar {
    border: 3px solid dimgrey;
    }

    .btn-menu.ativar .linha:nth-child(1) {
    transform: translateY(3px) rotate(-40deg);
    }


    .btn-menu.ativar .linha:nth-child(3) {
    transform: translateY(-4px) rotate(40deg);
    }

    .ola {
    display: none;
    }

    .menu-mobile {
    top: 50px;
    }

    .text-center {
    margin-top: 25%;
    }





}