body,
button {
    background-color: #efe2d2;
    font-family: "inter", sans-serif;
}
.body{
    background-color: #efe2d2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.area{
  width: 100%;
  max-width: 350px;
  text-align: center;
  padding: 10px;  
}
.areaPrincipal{
    text-align: center;
  }
  .h2{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .logo{
    width: 65%;
    height: auto;
  }
  .remember{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .gray{
    color: #999999;
  }
  .padding{
    padding: 20px;
  }
.usuario{
    color: #FFFFFF;
}  
:root {
    --offcanvas-width: 278px;
    --topNavbarHeight: 56px;
}

.sidebar-nav {
    width: var(--offcanvas-width);
}

.sidebar-link {
    display: flex;
    align-items: center;
}

.sidebar-link .right-icon {
    display: inline-flex;
    transition: all ease 0.25s;
}

.sidebar-link[aria-expanded="true"] .right-icon {
    transform: rotate(180deg);
}
.bodyContainer{
    text-align: justify;
    border: solid #7c7b7b;
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.input{
    margin-bottom: 20px;
}
.radius{
    margin-bottom: 20px;
}
.fontbold{
    font-weight: 500;
}
nav{
    align-items: center;
}
.cabecalho{
    border: 1px solid #7c7b7b;
    padding: 10px;
    text-align: center;
    background-color: #7c7b7b;
    border-radius: 8px;
    color: #FFFFFF;
}
.nomeTitulo{
    text-align: center;
}
.renovar{
  text-decoration: none;  
}
@media (min-width: 992px) {
    body {
        overflow: auto !important;
    }

    .offcanvas-backdrop::before {
        display: none;
    }

    main{
        margin-left: var(--offcanvas-width);
    }

    .sidebar-nav {
        transform: none;
        visibility: visible !important;
        top: var(--topNavbarHeight);
        height: calc(100% - var(--topNavbarHeight));
    }
}