*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Wix Madefor Text";
}

*:focus{
    outline-width: 2px;
    outline-color: rgb(128, 166, 255);
    color: rgb(75,161,254);
}

html,body{
    width: 100%;
    height: 100%;
    background: rgb(240,240,240);
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: rgba(231, 231, 231, 0);
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(150,150,150,0.2);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(150,150,150,0.9);
}

.top-desktop{
    display: inline;
    } 
    
.top-mobile{
    display: none;
    }
    
.box-profile{
    width: 180px;
    height: 110px;
    position: fixed;
    right: 10px;
    top: 50px;
    border-radius: 16px;
    text-align: center;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
    box-shadow: 0px 0px 10px rgba(180, 180, 180, 0.5);
    z-index: 3;
    display: none;
}

.box-profile .topo{
    width: 100%;
    height: 40px;
}

.box-profile .logout{
    padding: 0 10%;
}

.box-profile a{
    text-align: left;
    height: 40px;
    margin-top: 1px;
    padding: 6px calc(50% - 38px);
    display: flex;
    color: black;
    border-radius: 14px;
    font-weight: 400;
}

 .box-profile .background-color{
    background: rgba(180, 180, 180, 0.5);
    border-radius: 14px;
 }


.box-profile p{
    width: 40px;
    float: right;
    text-align: right;
    font-size: 18px;
    margin-top: 2px;
}

.box-profile a img{
    float: left;
    width: 26px;
    padding: 3px;
    border-radius: 1px;
}

.box-profile a:hover{
    filter: invert(100%);
 }
 
 .box-profile .background-color:hover{
    background: red;
 }

.fechar-profile{
    float: right;
    padding: 5px;
    width: 30px;
    height: 30px;
    border-radius: 18px;
    background-color: rgba(122, 122, 122, 0.801);
    cursor: pointer;
}

.fechar-profile:hover{
    background-color: rgba(255, 0, 0, 0.801);
}

.fechar-profile:hover img{
    filter: invert(100%);
 }

.box-clientes{
    width: 170px;
    position: fixed;
    border-radius: 12px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
    z-index: 20;
    display: none;
    box-shadow: 0px 0px 10px rgba(180, 180, 180, 0.5);
}

.topoclientes{
    width: 100%;
    height: 35px;
    float: left;
}

.box-clientes a{
    display: block;
    float: left;
    height: 35px;
    padding: 2px 8px;
    color: black;
    font-weight: 400;
    width: 100%;
    border-top: 1px solid rgb(210, 210, 210, 1);
    cursor: pointer;
}

section.box-content red{
    color: red;
}

 .box-clientes .background-color{
    background: rgba(180, 180, 180, 0.5);
    border-radius: 14px;
 }


.box-clientes p{
    padding-left: 5px;
    width: calc(100% - 22px);
    font-size: 18px;
    margin-top: 2px;
    float: left;
    text-align: left;
}

.box-clientes a img{
    float: right;
    width: 20px;
    margin-top: 4px;
}

.box-clientes a:hover{
    background-color: rgba(180, 180, 180, 0.2);
 }
 
 .box-clientes .background-color:hover{
    background: red;
 }

.fechar-clientes{
    margin-top: 5px;
    margin-right: 5px;
    height: 28px;
    width: 28px;
    float: right;
    padding: 5px;
    border-radius: 18px;
    background-color: rgba(122, 122, 122, 0.801);
    cursor: pointer;
}

.fechar-clientes img{
    height: 18px;
    width: 18px;
}

.fechar-clientes:hover{
    background-color: rgba(300, 0, 0, 1);
}

.fechar-clientes:hover img{
    filter: invert(100%);
 }

/* login*/
.box-login{
    max-width: 450px;
    width: 80%;
    max-height: 90%;
    overflow-y: auto;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    border-radius: 28px;
    text-align: center;
    padding: 12px 12px;
    filter: drop-shadow(0px 0px 8px rgba(50, 50, 50, 0.8));
    filter: unset;
    border: 1px solid rgb(210,210,210, 1);
    box-shadow: 0px 0px 3px rgba(180, 180, 180, 0.2);
}

.fechar-login{
    float: right;
    padding: 5px;
    border-radius: 18px;
    background-color: rgba(122, 122, 122, 0.801);
    width: 35px;
    height: 35px;
}
    
.fechar-login img{
    width: 25px;
    height: 25px;
}

.fechar-login:hover{
    background-color: rgba(300, 0, 0, 1);
}

.fechar-login:hover img{
    filter: invert(100%);
 }

.box-login .padlock img{
    filter: drop-shadow(3px 3px 4px rgba(100, 100, 100, 0.5));
}

.box-login h1{
    margin-top: 15px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 600;
    color: rgb(0, 0, 0);
}

.box-login h2{
    margin-top: 11px;
    margin-bottom: 20px;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 18px;
    font-weight: 600;
    color: rgb(100, 100, 100);
}

.box-login input{
    width: 94%;
    height: 40px;
    background: rgb(238, 238, 238);
    border: none;
    font-size: 18px;
    font-weight: 400;
    border-radius: 12px;
    max-width: 380px;
    padding-left: 15px;
    margin-top: 10px;
    outline: none;
}

.box-login .box-error{
    border-radius: 12px;
}

.box-login input[type=text]:hover, input[type=text]:focus, input[type=password]:hover, input[type=password]:focus{
    background: rgb(250, 250, 250);
    border: 2px solid rgb(128, 166, 255);
    font-weight: 600;
    color: black;
    padding-left: 13px;
}

.box-login [type=submit]{
    margin-top: 20px;
    width: 94%;
    height: 40px;
    background: rgb(75,161,254);
    color: #ffffff;
    border: none;
    font-size: 18px;
    font-weight: 500;
    border-radius: 12px;
    cursor: pointer;   
    max-width: 380px;
    margin-bottom: 20px;
}

.box-login [type=submit]:hover{
    background: rgb(8, 64, 167);
    color: #ffffff;
    font-weight: 600;
}

/*fim login*/

/* erro */
.box-error{
    margin-top: 20px;
    margin-left: 5%;
    width: 90%;
    min-height: 42px;
    padding: 4px;
    text-align: center;
    align-content: center;
    background-color: red;
    color: white;
    border-radius: 10px;
}

.box-error p{
    display: inline-block;
    align-self: center;
    text-align: center;
    font-size: 18px;
    margin: 3px;
}

.box-error h1{ 
    display: inline-block;
    align-self: center;
    text-align: center;
    color: white;
    margin-bottom: 6px;
    font-size: 18px;
}

.box-error img{
    align-items: center;
    width: 35px;
}
/* erro */

/* sistema */

.clear{clear:both;}

.center{padding: 0 2%; margin: 0 auto;} 

/* menu lateral */

aside{
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100%;
    padding: 5px;
    backdrop-filter: blur( 5px );
    background-color: rgba(245, 245, 245, 0.5);
    overflow-y: auto;
    z-index: 2;
    border-right: 1px solid rgb(210,210,210, 0.3);
}

.mobile-menu{
    text-align: center;
    position: fixed;
    float: left;
    left: 5px;
    top: 5px;
    border-radius: 7px;
    width: 80%;
    min-width: 200px;
    max-width: 240px;
    height: 452px;
    min-height: 100px;
    max-height: calc(100% - 10px);
    background-color: rgba(250, 250, 250, 0.8);
    backdrop-filter: blur( 9.9px );
    -webkit-backdrop-filter: blur( 9.9px );
    border: .1px solid rgb(216, 215, 215);
    z-index: 3;
}

.menu{
    padding: 5px;
    height: calc(100% - 75px);
    overflow-y: auto;
}

.items-menu{
        border-radius: 7px;
        padding: 0;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-bottom: 20px;
}

.pesquisa{
        border-radius: 7px;
        padding: 0;
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-bottom: 10px;
        display:none;
}

.mobile-menu{
    display:none;
}

.box-user{
    margin-top: 15px;
    position: relative;
    width: calc(100% - 10px);
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 10px;
    padding-bottom: 15px;
    margin-left: 5px;
    border-radius: 9px;
    display: flex;
    background-color: unset;
    padding: 3px;
    cursor: pointer;
}

.box-user:hover{
    background-color: rgba(255, 255, 255, 0.5);
}

.profile-avatar{
    width: 50px;
    height: 50px;
    border-radius: 90px; 
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
}

.profile-avatar img{
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 90px;
    display: inline-block;
}

.profile-pic{
    width: 50px;
    height: 50px;
    border-radius: 90px; 
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
}

.profile-pic img{
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 90px;
    display: inline-block;
}

.user-name h2{
    text-align: left;
    padding: 0 5px;
    color: black;
    font-size: 17px;
    font-weight: 600;
}

.user-name h1{
    color: black;
    font-size: 14px;
    font-weight: 300;
    margin-top: 5px;
    margin-left: 5px;
    border: 0px;
    width: 100%;
    display: inline-block;
    border-radius: 2px;
    background: none;
    text-align: left;
}

.items-menu a{
    text-align: left;
    height: 38px;
    margin-top: 0px;
    margin-bottom: -4px;
    padding: 6px 8px;
    width: 100%;
    display: inline-block;
    color: rgb(50,50,50);
    color: black;
    border-radius: 9px;
    font-weight: 600;
}

.items-menu p{
    width: calc(100% - 35px);
    float: right;
    text-align: left;
    font-size: 15px;
    margin-top: 4px;
}

.progress-bar{
    position: fixed;
    top: 0px;
    left: 0;
    width: 0;
    height: 3px;
    border-radius: 0 3px 3px 0;
    background-color: rgb(80,183,293);
    z-index: 1000;
    transition: width 0.4s ease;
}

.pesquisa a{
    text-align: left;
    height: 38px;
    margin-top: 0px;
    padding: 6px 8px;
    width: 100%;
    display: inline-block;
    background-color: rgba(210, 210, 210, 0.5);
    color: rgb(90,90,90);
    border: rgb(200, 200, 200) 1.5px solid;
    border-radius: 7px;
    font-weight: 600;
}

.pesquisa p{
    width: calc(100% - 35px);
    float: right;
    text-align: left;
    font-size: 15px;
    margin-top: 4px;
}

.pesquisa img{
    float: left;
    width: 27px;
    border-radius: 6px;
    margin-top: -1px;
}

.items-menu a:hover{
    background-color: white;
    color: black;
    cursor: pointer;
}

.items-menu img{
    float: left;
    width: 27px;
    margin-top: -1px;
}

.items-menu a.menu-active{
    background-color: rgb(80,183,293);
    cursor: pointer;
    font-weight: 600;
    padding-left: 0px;
    color: white;
}

.items-menu .menu-active p{
    width: calc(100% - 43px);
}

.items-menu a.menu-active:hover{
    background-color: rgb(43,133,243);
    cursor: pointer;
}

.items-menu a.menu-active .borda{
    width: 5px;
    background: rgb(75,115,254);
    height: 20px;
    float: left;
    border-radius: 4px;
    margin-top: 2px;
    margin-right: 3px;
    background-color: unset;
}


/* fim menu lateral */

header{
    position: fixed;
    width: calc(100% - 250px);
    height: 45px;
    left: 250px;
    top: 0;
    padding: 8px 10px;
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 5px );
    background-color: rgba(250, 250, 250, 0.3);
    float: left;
    z-index: 2;
}

footer{
    position: fixed;
    width: 100%;
    height: 55px;
    padding: 9px 0;
    backdrop-filter: blur( 9.9px );
    -webkit-backdrop-filter: blur( 9.9px );
    left: 0;
    bottom: 0;
    padding: 5px 0;
    background-color: rgba(250, 250, 250, 0.5)
    border-top: .1px solid rgb(216, 215, 215);
    z-index: 2;
    display: none;
}

.bottom-items{
    padding: 0 5px;
    width: 20%;
    float: left;
}

.bottom-items img{
    padding: 3px 7px;
    width: 40px;
    filter: grayscale(100%) opacity(50%);
}

.bottom-items a{
    margin-top: 6px;
    margin-left: calc(50% - 30px);
    display: block;
    text-align: center;
    width: 60px;
    height: 32px;
    border-radius: 20px;
}

.bottom-items img:hover{
    filter: grayscale(0%)
}

.bottom-items .menu-active img{
    filter: grayscale(0%);
}

header .profile-mobile{
    float: right;
    width: 35px;
    height: 35px;
    border-radius: 25px;
    backdrop-filter: blur( 9.9px );
    -webkit-backdrop-filter: blur( 9.9px );
    background-color: rgba(255, 255, 255, 0.651);
}

header .profile-mobile img{
    width: 100%;
    border-radius: 25px;
    top: 0;
    left: 0;
}

.profile:hover{
    background-color: rgba(240, 240, 240, 0.801);
}

.list{
    width: 25px;
    height: 25px;
    float: left;
    margin-top: 4px;
    padding: 1px;
    border-radius: 15px;
    cursor: pointer;
}

.list img{
    width: 20px;
    height: 25px;
}

.logout-desktop{
    float:right;
    padding: 5px 10px 2px 10px;
    border-radius: 10px;
    background-color: rgba(230, 230, 230, 0.7);
    background-color: unset;
    cursor: pointer;
}

.logout-desktop:hover{
    background-color: rgba(280, 280, 280, 1);
}

.sidebar{
    float: left;
    padding: 5px 10px 2px 10px;
    border-radius: 10px;
    background-color: rgba(230, 230, 230, 0.7);
    background-color: unset;
    cursor: pointer;
}

.sidebar:hover{
    background-color: rgba(280, 280, 280, 1);
}

/* conteudo dos menus selecionados */

.w100{
    width: 100%;
    height: auto;
}

.w33{
    width: calc(100% / 3 - 3px);
    border: 1px solid gray;
}

.w33 p{
    font-size: 22px;
    text-align: left;
}

.left{
    float: left;
}

.background-home{
    height: 40px;
    width: 100%;
    float: left;
}


.background-header{
    height: 40px;
    width: calc(100% - 250px);
}

.content{
    width: calc(100% - 250px);
    position: absolute;
    left: 250px;
    top: 0px;
    height: 100vh;
    padding: 10px;
    overflow-y: auto;
    z-index: 1;
}

.background{
    display: flex;
    height: 100%;
    width: 100%;
}

.background img{
    height:100%; 
    width:100%;
    object-fit: cover;
}

.box-content-velho-apagar{
    padding: 0px 5px;
    max-width: 1000px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    webkit-transform: translate(-50%);
    display: inline-block;
    border-radius: 12px;
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 9.9px );
    background-color: rgba(300, 300, 300, 0.3);
    max-height: calc(100vh - 110px);
    max-height: unset;
    background-color: unset;
    overflow-y: auto;
}

.card{
    margin: 2px 0px;
    padding: 3px 8px;
    border-radius: 16px;
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 9.9px );
    background-color: rgba(300, 300, 300, 0.3);
}

.box-content{
    padding: 0 calc(50% - 500px);
}

.box-content-duo{
    padding: 0 calc(50% - 600px);
}

.box-content-bottom-options{
    max-height: calc(100vh - 140px);
    max-height: unset;
}

.background-financeiro{
    width: calc(100% - 250px);
    height: 25px;
    display: inline;
    float: left;
}
    
.box-content-inside{
    margin: 5px 0px;
    border-radius: 10px;
    padding: 10px;
    background: rgba(350, 350, 350, 0.85);
    backdrop-filter: blur( 9.9px );
    -webkit-backdrop-filter: blur( 9.9px );
    box-shadow: 0px 0px 3px rgba(180, 180, 180, 0.8);
    border: 1px solid rgb(210,210,210, 1);
    border: none;
}

.title{
    position: relative;
    width: 100%;
    padding: 2px 0px;
    float: left;
    height: 26px;
}

.title h2{
    margin-right: 5px;
}

.title .menu-button{
    margin-top: -4px;
    float:right;
    padding: 4px 4px 3px 4px;
    border-radius: 15px;
    cursor: pointer;
}

.title .menu-total{
    display: none;
}

.title .menu-button:hover{
    background-color: rgba(219, 219, 219, 0.815);
}

.botao-menu-fechar{
    display:none;
}

.botao-menu-abrir{
    display:inline;
}

.title .total-button{
    float:right;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.815);
}

.title .total-button:hover{
    background-color: rgba(219, 219, 219, 0.815);
}

.total-button{
    display:none;
}

.botao-total-fechar{
    display:none;
}

.botao-total-abrir{
    display:none;
}

.box-content-inside h2{
    padding: 0px 5px;
    font-size: 18px;
    font-weight: 600;
}

.box-content-inside h1{
    font-size: 14.5px;
    font-weight: 300;
}

.box-content-inside h2{
    display: inline;
}

.box-content-inside h2 img{
    width: 22px;
    display: inline;
    text-align: center;
    float: left;
}

.box-metricas{
    width: 100%;
    margin: 0px;
    border: 0px;
    float: left;
    height: auto;
    border-top: 1px solid rgb(210,210,210);
    overflow-x: auto;
}

.box-options{
    width: 100%;
    margin: 0px;
    display: none;
    float: left;
}

.box-metrica-single{
    height: 62px;
    border-radius: 8px;
    padding: 0px 2px;
    margin: 0px;
    background: rgb(255, 255, 255);
    background: none;
    margin-top: 10px;
    border: 0px;
    display: inline-block;
}

.w33{
    width: calc(100% / 3 - 3px);
    padding: 5px 2px;
    height: auto;
}

.box-metrica-single input{
    width: 100%;
    height: 35px;
    background: rgb(245, 245, 245);
    font-weight: 500;
    border: none;
    font-size: 17px;
    border-radius: 8px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 5px;
    color: black;
    outline: none;
}

.box-metrica-single input:hover{
    background: rgb(250, 250, 250);
    border: 2px solid rgb(128, 166, 255);
    font-weight: 600;
    color: black;
    padding-left: 4px;
    padding-right: 4px;
}

.box-metrica-single input:focus{
    background: rgb(250, 250, 250);
    border: 2px solid rgb(128, 166, 255);
    font-weight: 600;
    color: rgb(8, 64, 167);
    padding-left: 4px;
    padding-right: 4px;
}

.box-hora-inicial input, .box-data-inicial input, .box-hora-final input, .box-data-final input, .box-data input, .box-filtro-data input{
        min-width: calc(100% - 18px) !important;
}

/* box-individuais */

.box-nome{
    width: calc(100% - 390px);
}

.box-data{
    width: 190px;
}

.box-cpf{
    width: 190px;
}

.box-ramo{
    width: 30%;
}

.box-tributacao{
    width: calc(40% - 10px);
}

.box-regime{
    width: 30%;
}

.box-email{
    width: calc(100% - 390px);
}

.box-celular{
    width: 190px;
}

.box-fixo{
    width: 190px;
}

.box-rua{
    width: calc(100% - 330px);
}

.box-nr{
    width: 70px;
}

.box-bairro{
    width: 250px;
}

.box-complemento-cliente{
    width: calc(100% - 495px);
}

.box-cidade{
    width: 190px;
}

.box-estado{
    width: 100px;
}

.box-cep{
    width: 190px;
}

.box-forma-pgto-cliente{
    width: calc(50% - 2.5px);
}

.box-situacao-credito{
    width: calc(50% - 2.5px);
}

.box-filtro-nome{
    width: calc(100% - 495px);
}

.box-filtro-nome-cliente{
    width: calc(100% - 277px);
}

.box-filtro-cpf{
    width: 165px;
}

.box-filtro-data{
    width: 190px;
}

.box-botoes{
    width: 103px;
    padding-top: 23px;
}

.box-filtro-botao{
    width: 100%;
    display: flex;
}

.box-codigo-prod{
    width: 100px;
}

.box-cod-barras{
    width: 170px;
}

.box-descricao{
    width: calc(100% - 170px - 100px - 8px);
}

.box-complemento{
    width: calc(100% - 190px - 190px - 8px);
}

.box-marca-prod{
    width: 190px;
}

.box-valor-prod{
    width: 190px;
}

.box-qtde{
    width: calc(50% - 110px - 4px);
}

.box-local-estoque{
    width: calc(50% - 110px - 4px);
}

.box-controle-estoque{
    width: 220px;
}

.box-preco{
    width: calc(100% / 5 - 3px);
}

.box-fornecedor{
    width: calc(100% - 450px - 11px);
}

.box-cod-fornecedor{
    width: 150px;
}

.box-un-medida{
    width: 150px;
}

.box-fator-conversao{
    width: 150px;
}

.box-classificacao{
    width: calc(100% / 4 - 3px);
}

.box-nome-locacao{
    width: calc(100% - 180px - 5px);
}

.box-cpf-locacao{
    width: 180px;
}

.box-periodo-locacao{
    width: calc(100% - 535px - 10px);
}

.box-qtde-periodos{
    width: 55px;
}

.box-data-inicial, .box-data-final{
    width: 140px;
}

.box-hora-inicial, .box-hora-final{
    width: 95px;
}

.box-cod-prod-locacao{
    width: 70px;
}

.box-descricao-prod-locacao{
    width: calc(100% - 487px);
}

.box-qtde-prod-locacao{
    width: 50px;
}

.box-valor-prod-locacao{
    width: 80px;
}

.box-desconto-prod-locacao{
    width: 80px;
}

.box-entrega, .box-valor-entrega, .box-endereco-entrega{
    width: calc(33.33% - 3px);
}


.box-content-cliente{
    width: calc(35% - 5px);
    float: left;
}

.box-content-data{
    width: calc(65% - 5px);
    float: right;
}

.box-content-pgto{
    width: calc(40% - 5px);
    float: left;
}

.box-content-total{
    width: calc(60% - 5px);
    float: right;
}

.box-forma-pgto{
    width: calc(100% - 210px);
}

.box-desconto{
    width: 100px;
    display: inline-block;
}

.box-acrescimo{
    width: 100px;
    display: inline-block;
}

.box-valor-pago{
    width: 100px;
}

.box-troco{
    width: 100px;
}

.box-total{
    width: calc(100% - 415px);
    font-size: 10px;
    color: white;
    background: rgb(75,161,254);
}

.box-total input{
    text-align: right;
    color: white;
    font-weight: 700;
    background: rgb(75,161,254);
}

.box-nome-user{
    width: calc(50% - 2px);
}

.box-password-user{
    width: calc(50% - 2px);
}

.box-imagem-user{
    width: 100%;
}

/* fim das box-individuais */

.content [type=submit][name=salvar]{
    float: right;
    width: 120px;
    height: 35px;
    background: rgb(75,161,254);
    color: white;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 400;
    border: none;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    box-shadow: 0px 0px 3px rgba(180, 180, 180, 0.2);
}

.content [type=submit][name=salvar]:hover{
    background: rgb(8, 64, 167);
    color: #ffffff;
    font-weight: 600;
}

.content [type=submit][name=cancelar]{
    float: left;
    width: 120px;
    height: 35px;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    cursor: pointer;
    border-radius: 10px;
    font-weight: 400;
    border: 1px solid rgb(210,210,210, 0.3);
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    box-shadow: 0px 0px 3px rgba(180, 180, 180, 0.2);
}

.content [type=submit][name=cancelar]:hover{
    background: rgb(255, 93, 93);
    color: #000000;
    font-weight: 600;   
}

.content [type=submit][name=filtrar]{
    text-align: center;
    padding: 0px 2;
    width: 96px;
    height: 35px;
    background: rgb(75,161,254);
    border: none;
    font-size: 17px;
    border-radius: 10px;
    margin-top: 2px;
    color: white;
    cursor: pointer;
    font-weight: 400;
}

.content [type=submit][name=filtrar]:hover{
    background: rgb(8, 64, 167);
    color: #ffffff;    
    font-weight: 600;   
}

.content [type=file]{
    text-align: center;
    padding: 5px 0;
    width: 90px;
    height: 30px;
    background: rgb(75,161,254);
    border: none;
    font-size: 15px;
    border-radius: 8px;
    margin-top: 5px;
    color: white;
    cursor: pointer;
    font-weight: 400;
}

/* sub-menus */

.espaco-sub-menu{
    text-align: center;
    padding: 0px calc(50% - 150px);
    margin-bottom: 8px;
    margin-top: 2px;
}

.sub-menu{
    text-align: center;  
    display: flex;
    align-items: center;
    width: 300px;
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 5px );
    background-color: rgba(245, 245, 245, 0.5);
    border-radius: 20px;
    padding: 3px;
}

.sub-menu a{
    display: flex;
    text-align: center;
    height: 30px;
    margin-top: 0px;
    padding: 1px 1px;
    width: 95%;
    color: black;
    border-radius: 15px;
    font-weight: 400;
}

.sub-menu p{
    width: calc(100% - 27px);
    float: right;
    text-align: center;
    font-size: 16px;
    margin-top: 4px;
}

.sub-menu a:hover{
    background: rgba(300, 300, 300, 0.2);
    backdrop-filter: blur( 9.9px );
    -webkit-backdrop-filter: blur( 9.9px );
    cursor: pointer;
}

.sub-menu a.menu-active{
    background-color: rgba(100, 100, 100, 0.4);
    cursor: pointer;
    font-weight: 600;
    color: white;
}

.sub-menu img{
    margin-left: 5px;
    margin-top: 3px;
    width: 22px;
    height: 22px;
}

.sub-menu a.menu-active img{
    filter: invert(100%);
}

.espaco-financeiro{
    text-align: center;
    padding: 0px calc(50% - 380px);
    margin-bottom: 10px;
    margin-top: 3px;
    position: fixed;
    bottom: 0;
    left: 250px;
    width: calc(100% - 250px);
    z-index: 5;
}


.financeiro{
    text-align: center;  
    display: flex;
    width: 100%;
    align-items: center;
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 5px );
    background-color: rgba(210, 210, 210, 0.4);
    border-radius: 20px;
    padding: 3px;
}

.financeiro p{
    width: calc(100%);
}

.box-alert{
    margin-bottom: 5px;
    width: 100%;
    padding: 8px 2px;
    font-size: 17px;
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur( 9.9px );
    -webkit-backdrop-filter: blur( 9.9px );
    font-weight: 600;
    margin: 5px 0px;
}

.erro{
    background-color: rgba(255, 93, 93, 0.7);
    color: white;
}

.sucesso{
    background-color: rgba(49, 224, 52, 0.7);
    color: white;
}

/* fim dos sub-menus */

.background-home{
    height: 100%;
}

.background-home img{
    height: 100%;
    width: 100%;
    border-radius: 7px;
    z-index: -1;
}

.background-home t1{
    font-size: 20px;
    color: black;
    z-index: 2;    
}

/* fim conteudo dos menus selecionados */

/* tabela resposiva */

.table-responsive{
    border-radius: 8px;
    padding: 4px 5px;    
    margin: 0px;
    background: rgb(255, 255, 255);
    margin-top: 10px;
    border: 0px;
    font-size: 17px;
}

.table-responsive .row:nth-of-type(1){
    font-weight: bold;
}

.row{
    border-top: none;
    border-bottom: 1px solid gray;
}

.col{
    float: left;
    width: 33%;
}

/* Contêiner que limita a altura e habilita a rolagem */
.table-container {
    max-height: calc(100vh - 236px); /* Defina a altura máxima desejada */
    overflow-y: auto; /* Ativar rolagem vertical quando exceder a altura */
    overflow-x: auto; /* Adicionar rolagem horizontal se necessário */
    width: 100%; /* Largura total do contêiner */
    margin-top: 10px;
    border-radius: 8px;
}


.table-container-bottom-menu{
    max-height: calc(100vh - 257px);
}

.table-container-taller{
    max-height: calc(100vh - 196px);
}

/* Tabela */
table {
    border-radius: 8px;
    border-collapse: collapse; /* Para bordas unidas */
    width: 100%; /* A tabela preenche a largura do contêiner */
    min-width: 100%; /* Garante que a tabela tenha pelo menos 100% de largura */
    margin: 0;
    font-size: 17px;
}

/* Linhas e células */
table tr:nth-of-type(1) {
    font-weight: bold;
}

table tr {
    border-bottom: 1px solid gray;
    height: 30px;
}

table td {
    padding: 8px;
    text-align: left;
    white-space: nowrap; /* Evita quebra de linha */
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

table tr:hover {
    background: rgb(230, 230, 230);
}

.selected {
    background-color: rgb(75, 161, 254);
    color: white;
}

.selected:hover {
    background-color: rgb(43,133,243);
}

/* bater ponto */

.testeteste{
    margin: 80px;
    width: 80px;
    height: 40px;
    float: right;
}

.testeteste h2{
    display: none;
}

.testeteste:hover{
    margin: 0px;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    background: black;
}

.testeteste:hover h2{
    display: inline;
    font-size: 80px;
    color: white;
}

.testeteste[type=submit]{
    margin: 80px;
    width: 80px;
    height: 40px;
    float: right;
}

.baterponto{
    max-width: 400px;
    width: 80%;
    backdrop-filter: blur( 9.9px );
    -webkit-backdrop-filter: blur( 9.9px );
    background-color: rgba(255, 255, 255, 0.8);
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    webkit-transform: translate(-50%,-50%);
    border-radius: 18px;
    text-align: center;
    padding: 12px 12px;
}

.baterpontoblackback [type=submit]{
    display: inline;
}

.baterponto [type=submit]{
    margin-top: 30px;
    width: 80%;
    height: 40px;
    background: rgb(35, 103, 230);
    color: #ffffff;
    border: none;
    font-size: 15px;
    font-weight: 400;
    border-radius: 15px;
    cursor: pointer;   
    max-width: 380px;
    margin-bottom: 30px;
}

.baterponto [type=submit]:hover{
    background: rgb(8, 64, 167);
    color: #ffffff;
}

.baterponto h2{
    color: black;
    font-size: 25px;
    font-weight: 600;
    margin-top: 15px;
    text-align: center;
}

.baterponto .user-name h1{
    color: black;
    font-size: 20px;
    font-weight: 300;
    margin-top: 5px;
    border: 2px;
    width: 50%;
    text-align: center;
    border-radius: 6px;
    background-color: rgba(212, 211, 211, 0.801);
}

.baterponto .profile-avatar{
    margin-top: 15px;  
    width: 120px;
    height: 120px;
    border-radius: 120px; 
    background: gray;
    display: inline-block;
}

.baterponto .profile-pic{
    margin-top: 15px;  
    width: 120px;
    height: 120px;
    border-radius: 120px; 
    background: gray;
    display: inline-block;
}

.baterponto .profile-pic img{
    border: none;
    width: 120px;
    height: 120px;
    border-radius: 120px;
    display: inline-block;
}

.baterponto .profile-avatar img{
    border: none;
    width: 120px;
    height: 120px;
    border-radius: 120px;
    display: inline-block;
}

/* fim bater ponto */

/* fim tabela resposiva */


@media screen and (max-width: 1250px){
    
    .box-content-cliente, .box-content-data, .box-content-pgto, .box-content-total{
        width: 100%;
    }

}

@media screen and (max-width: 900px){
    
    .box-user .user-name{
        display: none;
    }
    
    .box-user{
        padding: 0;
        margin: 0;
        margin-left: 9px;
        margin-bottom: 12px;
    }
    
    .box-user:hover{
    background-color: unset;
    }

    aside{
        width: 70px;
        padding: 20px 0;
        border-right: none;
        backdrop-filter: blur( 5px );
        -webkit-backdrop-filter: blur( 9.9px );
        background-color: rgba(250, 250, 250, 0.3);
    }
    
    header{
        width: calc(100% - 70px);
        left: 70px;
    }
    
    .background-header{
        width: calc(100% - 70px);
        height: 40px;
    }
    
    .content{
        width: calc(100% - 70px);
        left: 70px;
        height: 100%;
        top: 0;
    }
    
    .espaco-financeiro{
    left: 70px;
    width: calc(100% - 70px);
    }
    
    .items-menu a{
        height: 50px;
        width: 50px;
        padding: 5px;
    }
    
    .items-menu a.menu-active{
        background-color: unset;
    }
    
    .items-menu a.menu-active:hover{
        background-color: unset;
    }
    
    .items-menu a:hover{
        background-color: unset;
    }
    
    .items-menu .menu-active img{
        height: 50px;
        width: 50px;
        border-radius: 13px;
        margin-top: -5px;
        margin-left: -0.5px;
        border: 4px solid rgb(75,161,254);
        border: 4px solid rgba(255, 255, 255, 1);
        background: rgb(255, 255, 255, 1);
        box-shadow: 0px 0px 5px rgba(150, 150, 150, 0.8);
    }
    
    .items-menu img:hover{
        height: 45px;
        width: 45px;
        border-radius: 10px;
        margin-top: -2px;
        margin-left: -3px;
        box-shadow: 0px 0px 5px rgba(150, 150, 150, 0.8);
    }
    
    .items-menu .menu-active img:hover{
        height: 48px;
        width: 48px;
        border-radius: 13px;
        margin-top: -4px;
        margin-left: 1px;
        box-shadow: 0px 0px 5px rgba(150, 150, 150, 0.8);
    }
    
    .borda{
        display:none;
    }
    
    .items-menu p{
        display: none;
    }
    
    .items-menu img{
        float: left;
        width: 40px;
        margin: 0px;
    }
    
    .items-menu{
        margin-bottom: 0;
    }
    
    .content [type=submit][name=salvar]{
        margin-right: 5px;
        float: left;
    }
    
    .content [type=submit][name=cancelar]{
        margin-left: 5px;
        float: right;
    }
        
    .content [type=submit][name=salvar],.content [type=submit][name=cancelar]{
        float: left;
        width: calc(50% - 5px);
        height: 40px;
    }
}

@media screen and (max-width: 800px){
    
    .box-periodo-locacao, .box-qtde-periodos{
        width: calc(50% - 2.5px);
    }
    
    .box-data-inicial, .box-data-final{
        width: calc(30% - 3px);
    }
    
    .box-hora-inicial, .box-hora-final{
        width: calc(20% - 3px);
    } 
    
    .financeiro p{
        display: none;
    }
    
    .financeiro a{
        align-self: center;
        position: center;
        text-align: center;
    }
    
    .financeiro img{
        margin-left: calc(50% - 11px);
    }
    
    .financeiro a.menu-active p{
        display: inline;
    }
    
    .financeiro a.menu-active{
        padding: 1px 5px;
    }
    
    .financeiro a.menu-active img{
        margin-right: 3px;
        margin-left: 0px;
    }
    
    .espaco-financeiro{
        padding: 0px calc(50% - 180px);
    }
}

@media screen and (max-width: 650px){
    .box-desconto, .box-acrescimo{
    display:none;
    }
    
    .menu-button{
    display:inline;
    }
    
    .menu-total{
    display:inline;
    }
    
    .botao-total-abrir{
    display:inline;
    }
    
    
    .title .menu-button, .menu-total img{
        display: inline;
    }
    
    .box-metrica-single{
        width: 100%;
    }
    
    .box-total input{
        font-size: 20px;
    }
    
    .box-desconto, .box-acrescimo, .box-troco, .box-valor-pago, .box-filtro-data{
        width: calc(50% - 2.5px);
    }
    
    .box-data-inicial, .box-data-final, .box-periodo-locacao{
        width: calc(60% - 2.5px);
    }
    
    .box-hora-inicial, .box-hora-final, .box-qtde-periodos{
        width: calc(40% - 2.5px);
    }
    
    .box-valor-prod-locacao, .box-desconto-prod-locacao, .box-qtde-prod-locacao{
        width: calc(50% - 2.5px);
    }
    
    .box-cod-prod-locacao{
        width: calc(30% - 2.5px);
    }
    
    .box-descricao-prod-locacao{
        width: calc(70% - 2.5px);
    }

    .box-classificacao{
        width: calc(50% - 2.5px);
    }

    .box-botoes{
        background-color:#ffffff00;
        width: 103px;
        height: 50px;
        float: right;
        padding-top: 5px;
    }
    
    .box-filtro-botao{
        width: 100%;
        display: inline-block;
    }
}

@media screen and (max-width: 450px){
/* login*/
    .box-login{
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        background: white;
        position: absolute;
        padding: 12px 12px;
        left: 50%;
        padding-top: 20%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        border-radius: 0px;
        text-align: center;
        filter: drop-shadow(0px 0px 4px rgba(100, 100, 100, 0.8));
    }
    
    .fechar-login{
        float: right;
        padding: 5px 5.5px 2px 3.5px;
        border-radius: 20px;
        background-color: rgba(122, 122, 122, 0.801);
        width: 40px;
        height: 40px;
    }
    
    .fechar-login img{
        float: right;
        width: 30px;
        height: 30px;
    }
    
    .fechar-login:hover{
        background-color: rgba(255, 0, 0, 0.801);
    }
    
    .box-login .padlock img{
        filter: drop-shadow(3px 3px 4px rgba(100, 100, 100, 0.5));
        width: 120px;
    }
    
    .box-login h1{
        margin-top: 20px;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 20px;
        font-size: 30px;
        font-weight: 600;
        color: rgb(50,50,50);
    }
    
    .box-login h2{
        margin-top: 11px;
        margin-bottom: 20px;
        margin-left: 5%;
        margin-right: 5%;
        font-size: 22px;
        font-weight: 600;
        color: rgb(100, 100, 100);
    }
    
    .box-login input{
        width: 90%;
        height: 45px;
        background: rgb(238, 238, 238);
        border: none;
        font-size: 18px;
        border-radius: 10px;
        max-width: 380px;
        padding-left: 15px;
        margin-top: 10px;
    }
    
    .box-login [type=submit]{
        margin-top: 20px;
        width: 90%;
        height: 45px;
        color: #ffffff;
        border: none;
        font-size: 18px;
        font-weight: 500;
        border-radius: 10px;
        cursor: pointer;   
        max-width: 380px;
        margin-bottom: 30px;
    }
    
    .box-login [type=submit]:hover{
        background: rgb(8, 64, 167);
        color: #ffffff;
        
    }
    
    .card{
    margin: 0px 0px;
    padding: 0px 0px;
    filter: none;
    background-color: unset;
    }
    
    .box-clientes{
    width: 200px;
    position: fixed;
    border-radius: 15px;
    backdrop-filter: blur( 7px );
    -webkit-backdrop-filter: blur( 7px );
    display: none;
    transform: translate(+50%, 0%);
    }

    .topoclientes{
    width: 100%;
    height: 45px;
    float: left;
    }

    .box-clientes a{
    display: block;
    float: left;
    height: 45px;
    padding: 2px 8px;
    color: black;
    font-weight: 400;
    width: 100%;
    border-top: 1px solid rgb(210, 210, 210, 1);
    cursor: pointer;
    }

    .box-clientes .background-color{
    background: rgba(180, 180, 180, 0.5);
    border-radius: 14px;
    }


    .box-clientes p{
    padding-left: 5px;
    width: calc(100% - 30px);
    font-size: 20px;
    margin-top: 5px;
    float: left;
    text-align: left;
    }

    .box-clientes a img{
    float: right;
    width: 20px;
    margin-top: 9px;
    }

    .box-clientes a:hover{
    background-color: rgba(180, 180, 180, 0.2);
    }
 
    .box-clientes .background-color:hover{
    background: red;
    }

    .fechar-clientes{
    margin-top: 5px;
    margin-right: 5px;
    height: 30px;
    width: 30px;
    float: right;
    padding: 5px;
    border-radius: 18px;
    background-color: rgba(122, 122, 122, 0.801);
    cursor: pointer;
    }

    .fechar-clientes img{
    height: 20px;
    width: 20px;
    }

    .fechar-clientes:hover{
    background-color: rgba(300, 0, 0, 1);
    }

    .fechar-clientes:hover img{
    filter: invert(100%);
    }
    
    .box-error{
    margin-left: 5%;
    width: 90%;
    min-height: 45px;
    }
/* login*/

    table{
        border-radius: 5px;   
        font-size: 19px;
    }
    
    .table-container{
        max-height: calc(100vh - 320px);
        min-height: 20px;
    }
    
    .table-container-bottom-menu{
        max-height: calc(100vh - 365px);
    }
    
    .table-container-taller{
        max-height: calc(100vh - 265px);
    }
    
    table tr{
        height: 35px;
    }

    .box-botoes{
        background-color: unset;
        width: 100%;
        padding: 5px;
    }
    
    .box-filtro-botao{
        width: 100%;
        display: inline-block;
    }
    
    .box-metrica-single .box-options{
        height: 40px;
    }
    
    aside{
        display: none;
    }
    
    header{
        padding: 8px 15px;
        height: 50px;
        display: inline;
        width: 100%;
        left: 0;
        border-bottom: .1px solid rgb(216, 215, 215);
    }
    
    .background-footer{
        width: 100%;
        height: 50px;
        display: inline;
        float: left;
    }
    
    footer{
        display: inline;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur( 5px );
        background-color: rgba(250, 250, 250, 0.5);
    }
    
    .background{
        display: none;
    }
    
    .background-header{
        width: 100%;
        left: 0;
        height: 50px;
    }
    
    .content{
        background: rgb(240,240,240);
        top: 0px;
        height: 100%;
        width: 100%;
        left: 0;
    }
    
    .content h2{
        font-size: 20px;
        font-weight: 700;
        color: black;
    }
    
    .content h1{
        font-size: 18px;
        font-weight: 500;
        color: black;
    }
    
    .content [type=submit][name=filtrar]{
        float: left;
        width: 100%;
        margin: 0px 0px;
        height: 40px;
        margin-bottom: 0;
        box-shadow: none;
        font-size: 18px;
        border-radius: 12px;
    }
    
    .content [type=submit][name=salvar],.content [type=submit][name=cancelar]{
        margin: 5px 0px;
        float: left;
        width: calc(100%);
        height: 40px;
        font-size: 18px;
        border-radius: 12px;
    }
    
    .box-metricas{
        float: left;
        border-top: 1px solid rgb(210,210,210);
        overflow-x: auto;
    }
    
    .box-content-inside h2 img{
        display: inline;
        width: 25px;
        float: left;
        margin-right: 5px;
        margin-left: 0px;
    }
    
    .title img{
        display: inline;
        width: 25px;
        float: left;
        margin-right: 5px;
        margin-left: 10px;
    }

    .box-content-inside h2{
        width: calc(100% - 35px);
        float: left;
        margin-bottom: 5px;
        font-weight: 600;
    }
    
    .title{
        height: 30px;
    }
    
    .title h2{
        width: calc(100% - 100px);
        font-size: 20px;
    }
    
    .title .menu-button, .menu-total img{
        display: inline;
        padding: 0;
        margin: 0;
        margin-top: 2px;
        margin-right: 5px;
        padding: 0;
    }
    
    .title .menu-button:hover, .menu-total:hover{
        background-color: unset;
    }
    
    .top-desktop{
        display: none;
    }
    
    .top-mobile{
        display: inline;
    }
    
    .box-user .user-name{
        display: inline;
    }
    
    .box-user{
        position: relative;
        width: calc(100%);
        padding-left: 2px;
        padding-right: 2px;
        margin-top: 5px;
        margin-bottom: 10px;
        padding-bottom: 15px;
        margin-left: 0px;
        border-radius: 7px;
        display: flex;
        background-color: rgba(255, 255, 255, 0.5);
    }
    
    .box-user:hover{
        background-color: rgba(210, 210, 210, 0.932);
        cursor: pointer;
    }
    
    .profile-avatar{ 
        width: 55px;
        height: 55px;
        display: inline-block;
    }
    
    .profile-avatar img{
        width: 55px;
        height: 55px;
        display: inline-block;
    }
    
    .profile-pic img{
        width: 55px;
        height: 55px;
        display: inline-block;
    }

    .items-menu{
        background: rgba(255, 255, 255);
        border-radius: 9px;
        padding: 0;
        margin-left: 0;
        margin-bottom: 20px;
        width: 100%;
    }
    
    .items-menu a{
        height: 38px;
        margin-top: 0px;
        margin-bottom: -5px;
        width: 100%;
        display: inline-block;
        color: rgb(100, 100, 100);
        border-radius: 0;
        font-weight: 600;
    }
    
    .items-menu .menu-active img{
        width: 24px;
        height: 24px;
        border-radius: 0px;
        margin-top: 2px;
        margin-left: 10px;
        border: none;
        background: none;
    }
    
    .items-menu .borda-baixo{
        height: 1px;
        width: calc(100% - 40px);
        margin-left: 40px; 
        background-color: rgba(250, 250, 250, 0.8);
        border-radius: 0px;
        border-top: 0;
        border-bottom: 0;
    }

    .items-menu p{
        font-size: 16px;
        margin-top: 5px;
        width: calc(100% - 35px);
        color: black;
        display: inline-block;
    }
    
    .items-menu .menu-active p{
        font-size: 16px;
        margin-top: 5px;
        width: calc(100% - 40px);
        color: white;
        display: inline-block;
    }

    .items-menu img{
        float: left;
        padding: 0px;
        margin-top: 3px;
        margin-left: 5px;
        width: 24px;
        display: inline-block;
    }
    
    .items-menu{
        position: relative;
        float: left;
        overflow-y: auto;
    }
    
    .items-menu a:hover{
        background-color: rgba(210, 210, 210, 0.932);
        cursor: pointer;
    }
    
    .items-menu a.menu-active{
        background-color: rgb(75,161,254);
        cursor: pointer;
        font-weight: 600;
        color: white;
    }
    
    .items-menu a.menu-active:hover{
        background-color: rgba(180, 180, 180, 0.9);
        cursor: pointer;
    }
    
    .items-menu .menu-active img{
        float: left;
        padding: 0px;
        margin-top: 3px;
        margin-left: 5px;
        width: 24px;
        border-radius: 0;
        border: none;
        background: none;
        box-shadow: none;
    }
    
    .items-menu img:hover{
        float: left;
        padding: 0px;
        margin-top: 3px;
        margin-left: 5px;
        width: 24px;
        box-shadow: none;
        background: none;
    }
    
    .items-menu .menu-active img:hover{
        float: left;
        padding: 0px;
        margin-top: 3px;
        margin-left: 5px;
        width: 24px;
        box-shadow: none;
        background: none;
    } 
    
    
    .box-metrica-single input{
        font-size: 18px;
        font-weight: 500;
        height: 40px;
    }
    
    .box-metrica-single{
        height: 75px;;
        padding: 4px 5px;
    }
    
    .box-content-inside{
        background: white;
        padding: 10px 5px;
        margin: 8px 0px;
        border-radius: 12px;
        box-shadow: 0px 0px 10px rgba(180, 180, 180, 0.2);
        border: none;
    }
    
    .box-metrica-single{
        border-radius: 8px;
        margin-top: 5px;
    }
    
    .box-content{
        max-height: none;
        padding: 0;
        background:none;
    }
    
    .box-content-duo{
        max-height: none;
        padding: 0;
        background:none;
    }
    
    .box-profile{
        width: calc(100% - 20px);
        right: 10px;
        top: 60px;
        height: 140px;
        border-radius: 20px;
    }
    
    .fechar-profile{
        float: right;
        padding: 5px;
        border-radius: 18px;
        background-color: rgba(122, 122, 122, 0.801);
        width: 35px;
        height: 35px;
    }
        
    .fechar-profile img{
        width: 25px;
        height: 25px;
    }
    
    .box-profile .background-color{
        background: rgba(180, 180, 180, 0.5);
        border-radius: 20px;
    }
    
    .box-profile a{
        height: 50px;
    }
    
    
    .box-profile p{
        border-radius: 30px;
        width: 50px;
        float: right;
        text-align: right;
        font-size: 20px;
        margin-top: 6px;
    }
    
    .box-profile a img{
        margin-top: 4px;
        width: 30px;
        height: 30px;
    }
    
    .mobile-menu{
        min-width: 100%;
        top: 0px;
        left: 0;
        padding: 0px;
        height: 100%;
        background: rgba(80, 80, 80, 0.1);
        z-index: 5;
        border: none;
        border-radius: 0;
    }
    
    .top-black{
        width: 100%;
        height: 30px;
    }
    
    .top{
        border-radius: 20px 20px 0 0;
        width: 100%;
        height: 55px;
        padding: 17px 20px;
        background: white;
        border-bottom: .1px solid rgb(216, 215, 215);
    }
    
    .top h1{
        font-size: 18px;
        float: right;
        font-weight: 600;
        cursor: pointer;
        color: rgb(80, 80, 80);
    }
    
    .menu{
        background: rgb(235,235,235);
        padding: 10px 0;
    }
    
    .box-user h2{
        font-size: 22px;
    }
    
    .box-user h1{
        font-size: 18px;
    }
    
    .box-user{
        width: calc(100% - 30px);
        margin: 15px 15px;
        border-radius: 17px;
        padding: 15px 10px;
        background: white;
    }
    
    .user-name{
        margin-left: 10px;
    }
    
    .items-menu{
        width: calc(100% - 30px);
        margin: 5px 15px;
        padding: 0;
        overflow-y: hidden;
    }
    
    .items-menu a{
        height: 50px;
        width: 100%;
    }
    
    .items-menu p{
        font-size: 18px;
        margin-top: 9px;
        width: calc(100% - 52px);
        color: black;
        margin-left: 0;
    }
    
    .items-menu img{
        width: 33px;
        margin: 2.5px 7px;
    }
    
    .items-menu .menu-active img{
        width: 33px;
        height: 33px;
        margin: 2.5px 12px;
    }
    
    .items-menu .borda-baixo{
        width: calc(100% - 58px);
        height: 1px;
        margin-left: 58px;
        background: rgba(235, 235, 235);
    }
    
    .items-menu a.menu-active{
        color: white;
    }
    
    .items-menu .menu-active p{
        font-size: 18px;
        margin-top: 9px;
        width: calc(100% - 58px);
        color: white;
    }
    
    .box-botoes{
        height: 50px;
    }
    
    .espaco-sub-menu{
        height: 45px;
        margin-top: 8px;
        border-radius: 20px;
    }
    
    .sub-menu{
        border-radius: 20px;
    }
    
    .sub-menu a{
        height: 31px;
        border-radius: 20px;
        padding: 2px;
    }
    
    .sub-menu p{
        width: 100%;
        font-size: 18px;
        margin-top: 2px;
    }
    
    .espaco-sub-menu{
        text-align: center;
        padding: 0px;
        height: 40px;
        margin-top: 8px;
    }
    
    .sub-menu{
        background: rgba(210,210,210,0.5);
        align-items: center;
        width: calc(100%);
        padding: 1px;
        margin: 0;
        height: 37px;
        border-radius: 12px;
        padding: 3px;
    }
    
    .sub-menu a{
        height: 31px;
        border-radius: 10px;
    }
    
    .sub-menu .menu-active{
        box-shadow: 0px 0px 2px rgb(160, 160, 160);
    }
    
    .sub-menu a.menu-active{
        color: black;
        background: white;
    }
    
    .sub-menu a.menu-active img{
        filter: none;
    }
    
    .financeiro a{
    display: flex;
    text-align: center;
    height: 31px;
    margin-top: 0px;
    padding: 1px 1px;
    width: 100%;
    color: black;
    border-radius: 10px;
    font-weight: 400;
    }
    
    .espaco-financeiro{
        padding: 5px 10px;
        bottom: 50px;
        left: 0;
        width: 100%;
    }
    
    .financeiro a.menu-active p{
        display: none;
    }
    
    .financeiro a.menu-active{
        margin: 0;
        padding: 1px;
    }
    
    .financeiro a.menu-active img{
        margin: 2.5px calc(50% - 12.5px);
    }
    
    .financeiro img{
    margin: 2.5px calc(50% - 12.5px);
    width: 25px;
    height: 25px;
    }
    
    .background-financeiro{
    width: 100%;
    height: 55px;
    display: inline;
    float: left;
    }
}

@media screen and (max-width: 350px){
    .sub-menu img{
        display: none;
    }
    .financeiro img{
        display: inline;
    }
}