@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,500&family=Titillium+Web:ital,wght@1,200&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {width: 100vw;}
.stm{
    width: 70vw;
    margin-left: 15vw;
    /*margin-top: 10px;*/
    height: 50px;
    border-radius: 10px;
    position: fixed;
    bottom: 60px;
    display: flex;
    justify-content: center; align-items: center;
    text-align: center;
    transition: all 5s ease-in-out;
    padding: 5px;
    z-index: 999;
}
.verde, .vermelho, .laranja{
    background-color: rgba(0, 100, 0, 0.9);
    /*border: 3px solid rgba(0, 100, 0, 0.8);*/
    color: white;
    text-shadow: 0.5px 0.5px 2px black;
    padding: 2px;
}
.vermelho{
    background-color: rgba(139, 0, 0, 0.9);
    
}
.laranja{
    background-color: rgba(223, 145, 0, 0.8);
    
}
body{
    background-color: rgb(217, 229, 233);
    margin: 0;
    padding: 0;
}

/*#################################################################
################         CABEÇALHO PADRÃO        ##################
###################################################################*/

.cabecalho{
    width: 100%;
    height: 115px;
    background-color: #061f50;
    display: flex;
}
.cabecalho-painel-esquerda{
    display: flex;
    align-items: center;
    width: 30%;
}
#logo-rmt{
    width: 320px;
    height: 75px;
}
.cabecalho-painel-esquerda-mob{
    display: none;
}
.cabecalho-painel-direita{
    width: 70%;
    color: white;
}
.menu-mobile{display: none;}
.cabecalho-painel-direita-mob{
    display: none;
    justify-content: end;
    margin-right: 21px;
}
.cabecalho-painel-direita-mob-btn{
    cursor: pointer;
}
.cabecalho-painel-direita-mob-btn:hover{
    color:rgb(0, 182, 182);
}
#icon-menu-mob{
    font-size: 35px;
}
.cabecalho-painel-direita-topo{
    text-align: end;
    margin-right: 15px;
    font-family: 'Trebuchet MS';
    padding: 5px;
}
.cabecalho-painel-direita-menu{
    display: flex;
    justify-content: end;
    margin-right: 12.5px;

}
.cabecalho-painel-direita-menu-modulo{
    /*margin-left: 15px;
    margin-right: 2.5px;*/
    display: flex; flex-direction: column; align-items: center;
    width: 80px;
}
.cabecalho-painel-direita-menu-modulo:hover .link-modulo{
    color: rgb(0, 182, 182);
}
.cabecalho-painel-direita-menu-modulo:hover .cabecalho-painel-direita-menu-modulo-btn{
    border: 2px solid rgb(0, 182, 182);
}
.cabecalho-painel-direita-menu-modulo:hover .cabecalho-painel-direita-menu-titulo{
    display: block;
}
.cabecalho-painel-direita-menu-modulo:hover .cabecalho-painel-direita-menu-submenu{
    display: flex;
}
.cabecalho-painel-direita-menu-modulo-btn{
    width: 60px;
    height: 60px;
    border: 2px solid white;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.link-modulo{
    text-decoration: none;
    color: white   ;
}
.cabecalho-painel-direita-menu-titulo{
    display: none;
    width: 90px;
    text-align: center;
    font-family: Tahoma;
    font-size: 14px;
    color: rgb(0, 182, 182);
    margin-top: 5px;
}
#icon-modulo{
    font-size: 45px;
}
.cabecalho-painel-direita-menu-submenu{
    background-color:  rgb(0, 182, 182);
    border-radius: 15px;
    padding: 10px;
    display: none;
    flex-direction: column;
    align-items: end;
    list-style: none;
    font-family: 'Trebuchet MS';
    font-size: 20px;
    box-shadow: 5px 5px 10px black;
    font-style: italic;
    height: 85px;
    z-index: 1000;
}
#submenu-minha-conta{
    width: 180px;
    position: absolute;
    right: 15px;
    top: 112px;
}
#submenu-fluxo-cx{
    width: 190px;
    position: absolute;
    right: 65px;
    top: 112px;
}
#submenu-subgerencia{
    width: 275px;
    height: 120px;
    position: absolute;
    right: 140px;
    top: 112px;
}

.cabecalho-painel-direita-menu-submenu li{
    margin-bottom: 10px;


}
.cabecalho-painel-direita-menu-submenu li:hover a{
    color: white;
    cursor: pointer;
    
}
.cabecalho-painel-direita-menu-submenu li:hover a #icon-sub-menu{
    color: #fff;
}
.cabecalho-painel-direita-menu-submenu li a{
    text-decoration: none;
    display: flex;
    color: darkblue;
}
.cabecalho-painel-direita-menu-submenu li a #icon-sub-menu{
    color: darkblue;
}
#icon-sub-menu{
    font-size: 25px;
    margin-left: 10px;
}

.msgpopup{
    position: absolute; 
    width: 40%;
    left: 30%;
    top: 15vh;
    background-color: rgb(243, 196, 204);
    border: 5px solid darkred;
    border-radius: 20px;
    padding: 30px;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 0 15px rgb(31, 28, 28);
}
.premsgpopup {
    border: 5px solid darkgoldenrod;
    background-color: rgb(243, 224, 196);
}
.msgpopup b.vermelho{
    width: 50%;
}
.msgpopup p a{
    color: blue;
    text-decoration: underline;
}
.msgpopup img{
    width: 50%;
    border-radius: 10px;
    margin-left: 25%;
    margin-top: 10px;
}
#btnClosePopUp{
    position: absolute;
    right: 5px;
    top: 2px;
    font-size: 2rem;
    color: gray;
    cursor: pointer;
}
#btnClosePopUp:hover{
    color: darkred;
}


/*#################################################################
################         CORPO DAS PAGINAS       ##################
###################################################################*/
.d-none{display: none;}
.container{
    padding: 10px;
    width: 100%;
    min-height: calc(100vh - 165px);
    background-color: #f0f0f0;
}
.container h1{
    font-size: 2em;
    font-family: 'Cabin', sans-serif;
    color: rgb(3, 221, 221);
    text-shadow: 1px 1px black;
    margin-left: 7px;
}
.cadastro-mov{
    display: none;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 10px;
    width: 40%;
    min-width: 500px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
    background-color: rgb(250, 253, 255);
    position: fixed;
    top: 0; right: 0;
    box-sizing: border-box;
    z-index: 999;
}
.cabecalho-form{
    width: 100%;
    height: 60px;
    text-align: center;
    margin-top: 2px;
}
.cadastro-mov h2{
    font-family: Tahoma, sans-serif;
    font-size: 2.5em;
    margin-left: 5px;
    color: rgb(20, 20, 219);
    text-shadow: 2px 2px 2px gray;
}
.form-label{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: italic;
    margin-left: 6%;
    color: rgb(87, 83, 83);
}
.form-cad-mov-input, #fDescTarefa, #fcomentUsuarioTarefa, #fDescEditarTarefa{
    width: 90%;
    height: 60px;
    padding: 5px;
    margin-top: 5px;
    margin-left: 5%;
    margin-bottom: 5px;
    border: 2px solid rgb(235, 235, 235);
    border-radius: 10px;
    box-shadow: none;
    font-size: 1em;
    font-family: 'Trebuchet MS', Arial;

}
.form-cad-mov-input:focus, #fDescTarefa:focus, #fcomentUsuarioTarefa:focus, #fDescEditarTarefa:focus{
    border: 2px solid darkblue;
    outline: 0;
}
#tipoMov, #bancoMov{background-color: transparent;}
#fDescTarefa, #fcomentUsuarioTarefa, #fDescEditarTarefa{height: 100px;}
.btn-form{
    width: 90%;
    height: 50px;
    padding: 5px;
    margin-top: 5px;
    margin-left: 5%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.4em;
    font-family: 'Trebuchet MS', Arial;
    border-radius: 60px;
    color: white;
    cursor: pointer;
    border: 0;
    background-color: darkgreen;
}
.btn-red{background-color: brown;}
.btn-form:hover{font-size: 1.5em; background-color: rgb(4, 83, 4);}
.btn-red:hover{background-color: rgb(141, 31, 31);}

.menu, .painel-tabelas, .resumo{
    margin: 10px;
    border-radius: 10px;
    border: 2px solid darkblue;
    background-color: rgb(232, 240, 240);
    display: flex;
    padding: 5px;
    min-width: 598px;
}
.menu{
    align-items: center;
    height: 80px;
}
.menu-filtro{
    width: 60%;
}
.L1, .L2{display: flex; padding: 1.5px;}
.C1{width: 50%;} .C2{width: 30%;} .C3{width: 20%;}

label{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: italic;
    margin-left: 3px;
    color: rgb(87, 83, 83);
}

select, input{ 
    width: 95%;
    height:35px;
    padding: 5px;
    background-color: transparent;
    border: 2px solid rgb(212, 212, 212);
    border-radius: 5px;
    box-shadow: none;
    outline: none;
    font-size: 1em;
    font-family: 'Trebuchet MS', Arial;
    
}
#btnAplicarFiltro{
    height: 35px;
    width: 35px;
    background-color: rgb(8, 160, 8);
    color: white;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}
#btnAplicarFiltro:hover{background-color: green;}



.menu-act{
    width: 40%;
    text-align: end;
    margin-right: 10px;
    display: flex; justify-content: end;

}
.botoes, .botoes-L, .botoes-R{
    display: flex;
    align-items: center;
    justify-content: center;
}
.botoes{
    height: 50px;
    width: 30%;
    /* margin-left: 70%;*/
    cursor: pointer;
    background-color: blue;
    color: white;
    border: 0; border-radius: 7px;
    min-width: 150px;
}
.botoes:hover{background-color: darkblue;}
.botoes-r{            
    font-size: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
}
.botoes-L{
    margin-left: 7px;
}

.painel-tabelas{justify-content: center;}
.receitas, .despesas{
    width: 50%;
    min-width: 337px;
}
.receitas{
    background-color: rgb(209, 255, 209);
    color: darkgreen;
    border-radius: 10px;
    margin-right: 2.5px;
    
}
.despesas{
    background-color: rgb(255, 229, 229);
    color: darkred;
    border-radius: 10px;
    margin-left: 2.5px;
}
h2{
    text-align: center;
    font-family: Tahoma, sans-serif;
}
table{
    width: 100%;
    border-collapse: collapse;
}
thead{
    width: 100%;
    color: white;        
    
}
thead >tr{
    background-color: black;
}
.th-data{width: 25%;}
.th-Valor {width: 25%;}
.th-Desc{width: 50%; min-width: 150px;}


tbody > tr:nth-child(2n){
    background-color: rgba(194, 193, 193, 0.3);
}
/*tr{
    background-color: rgb(226, 226, 226);   
}*/
td{
    color: black;
    height: 25px;
    font-family: 'Trebuchet MS', Arial;
}
.td-valor{
    margin-right: 10px;
}
.total-txt{
    
    background-color: black;
    color: white;
    font-size: 1.25em;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: italic;
    text-align: end;
    margin-right: 10px;
}
.total-vlr{
    background-color: black;
    color: lightgreen;
    font-size: 1.25em;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: italic;
    text-align: center;
    margin-right: 10px;
}
#total-despesas{color: lightcoral;}
a{text-decoration: none; color: black;}

.resumo{
    justify-content: space-between;
    font-family: 'Trebuchet MS', Arial;
}
.lista-bancos{
    display: grid;
    grid-template-columns: auto auto;
    width: 49.45%;
    /*background-color: rgb(214, 212, 212);*/
    border-radius: 10px;
    padding: 2px;
}
.banco{
    min-width: 33%;
    text-align: center;
    padding: 2px;
    background-color: rgb(214, 212, 212);
    border-radius: 10px;
    margin: 0 2.5px 0 2.5px;
    
}
.banco-titulo{
    background-color: black;
    color: white;
    border-radius: 10px 10px 0 0;
}
.banco-total{
    background-color: black;
    color: white;
    border-radius: 0 0 10px 10px;
    width: 100%;
    margin-left: 0;
    
}
.saldo-geral{
    width: 49.45%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: black;
    font-size: 1.5em;
    border-radius: 10px;
}
.cor-red{color: lightcoral; margin-left: 7px;}
.cor-green{color: lightgreen;margin-left: 7px;}
.lista-tarefas{
    width: 80%;
    /*background-color: aqua;*/
}
.btn-act-tarefas{   
    background-color: aqua;
    width: 37px;
    height: 37px;
    border-radius: 100%;
    margin: 2.5px;
    display: flex;
    justify-content: center; align-items: center;
    cursor: pointer;
    color: #fff;
    
}
.container-act-tarefas{
    display: flex;
    justify-content: center;
    height: 45px;
}

.trf-act-blue{background-color: rgb(35, 65, 199);}
.trf-act-blue:hover{background-color: rgb(4, 33, 161);}
.trf-act-green{background-color: rgb(8, 160, 8);;}
.trf-act-green:hover{background-color: green;}
.trf-act-orange{background-color: orange;}
.trf-act-orange:hover{background-color: rgb(214, 140, 3);}
.trf-act-red{background-color: rgb(197, 45, 45);}
.trf-act-red:hover{background-color: brown;}



footer{
    height: 50px;
    width: 100%;
    background-color: #061f50;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    bottom: 0;
    display: flex; 
    align-items: center;
    justify-content: center;
}

/* #################################################
####################################################
###########                              ###########
###########                              ###########
###########         VERSÃO TELAS         ###########
###########      MENORES DE DESKTOPS     ###########
###########                              ###########
####################################################
####################################################*/

@media only screen and (max-width: 1024px){
    .cabecalho-painel-esquerda{
        width: 50%;
    }
    .cabecalho-painel-direita{
        display: flex;
        justify-content: end;
        align-items: center;
        width: 50%;
    }
    .cabecalho-painel-direita-mob{
        display: flex;
    }
    .cabecalho-painel-direita-topo, .cabecalho-painel-direita-menu{
        display: none;

    }
    .menu-mobile{
        display: none;
        background-color: #d2e1e9;
        width: 40%;
        min-width: 330px;
        height: 100%;
        padding-bottom: 25px;
        position: fixed; top: 0; right: 0;
        box-shadow: -2px 2px 5px;
        overflow-y: auto;
        z-index: 1500;
    }
    .menu-mobile-cabecalho{
        height: 50px;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 20px;
        color: #061f50;;
        font-style: italic;
        font-size: 1.2em;
    }
    .menu-mobile-corpo-nav li{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        margin: 10px 10%;
        height: 50px;
        color: #F1F3F4;
        background-color: #061f50;
        border-radius: 10px;
        font-family: Verdana, Tahoma, sans-serif;
    }
    .menu-mobile-corpo-nav li:hover{background-color: rgb(0, 182, 182); cursor: pointer; color: #061f50; transition: 0.3s;}
    .desc-menu-mob{
        width: 75%;
        display: flex;
        font-size: 1.25em;
    }
    .icon-menu-mob{
        display: flex;
        justify-content: end;
        width: 25%;
        margin-right: 10px;

    }
    #icon-modulo-mob{font-size: 25px;}
    #btncloseMenuMob{
        padding: 5px;
        color: gray;
        border: 1.5px gray solid;
        border-radius: 50px;
        font-size: 1.2em;
    }
    #btncloseMenuMob:hover{
        color: darkred;
        border: 1.5px darkred solid;
        cursor: pointer;
    }
    
    .menu-mobile-corpo-nav ul{
        display: none;
        width: 80%; 
        margin-left: 10%;
    
    }
    .menu-mobile-corpo-nav ul li{
        background-color: rgb(0, 182, 182);
    }
    .menu-mobile-corpo-nav ul li:hover{
        background-color: darkblue;
        color:  white;
    }
    .menu-show{
        /*CLASSE SERA SERA INSERIDA VIA JS QUANDO FOR ACIONADO MENU QUE TEM UM SUBMENU*/
        display: block;
    
    }
    .submenu-mob-icon{
        display: flex;
        justify-content: end;
        width: 20%;
        margin-right: 7px;
    }
    .submenu-mob-desc{
        width: 75%;
        display: flex;
        font-size: 1.10em;
    }
    .container h1{
        margin-left: 3px;
    }
    .menu, .painel-tabelas, .resumo{
        margin-left: 0;
    }

}


/* #################################################
####################################################
###########                              ###########
###########                              ###########
###########         VERSÃO MOBILE        ###########
###########                              ###########
###########                              ###########
####################################################
####################################################*/

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

    body{
        padding: 5px;
    }
    .stm{
        width: 50vw;
        margin-left: 25vw;
        bottom: 30px;
    }

    #logo-rmt{
        display: none;
        
    }
    .cabecalho-painel-esquerda{
        width: 80%;
    }
    .cabecalho-painel-esquerda-mob{
        display: block;
        color: white;
        padding: 5px;
        font-size: 1.5em;
        font-family: 'Cabin', sans-serif;
        font-size: 40px;
    }
    #titulo-secundario{
        font-size: 15px;
        color: cyan
    }
    .menu-mobile{
        position: relative;
        width: 100%;
        height: calc(100vh - 165px);
    }
    #btncloseMenuMob{
        display: none;
    }
    .icon-menu-mob{
        width: 10%;
    }

    .container h1{
        margin-left: 3px;
        font-size: 2em;
    }

    .menu{
        
        flex-direction: column;
        align-items: center;
        min-width: calc(100vw - 30px);
        height: auto;
        margin-left: 0;
    }
    .menu-act, .menu-filtro{
        width: 100%;
        display: flex; 
        justify-content: center;
        padding: 5px; 
    }

    #form-filtro, .L1, .L2{width: 100%;}
    .C1{width: 65%;}
    .C2{width: 25%;}
    .C3{width: 10%;}
    #btnAplicarFiltro{
        border-radius: 50px;
    }
    .menu-act{margin-left: 9px;}
    .botoes{
        width: 100%;
        border-radius: 500px;
    }
    .painel-tabelas, .resumo{
        flex-direction: column;
        min-width: calc(100vw - 30px);
        height: auto;
        margin-left: 0;
    }
    .receitas, .despesas, .saldo-geral, .lista-bancos{
        min-width: 100%;
        margin-right: 5px;}
    .despesas{
        margin-top: 10px;
        margin-left: 0;
    }

    .cadastro-mov{
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100vw;
        height: 100vh;
        padding: 0;
    }
    .cabecalho-form{
        font-size: 0.8em;
    }
    #form-cad-mov{
        width: 100%;
        margin-left: 5px;
    }
    tr{
        display: flex;
        flex-direction: column;

    }
    td{text-align: center;}
    thead{
        display: none;
    }
    tfoot{background-color: black;}
    .total-txt, .total-vlr{text-align: center;}  
    .tr-igualdade{display: none;} 
    .lista-bancos{
        display: block;
        text-align: center;
    }
    .banco{
        width: 98%;
        margin: 5px 0;
    }
    .saldo-geral{
        font-size: 1.25em;
        background-color: rgb(120, 62, 173);
        min-width: 97%;
        margin-left: 1.5%;
        height: 50px;
    }

    .lista-tarefas{
        
        min-width: 100%;
    }
    /*.lista-tarefas > table > tbody > tr > td{
        height: 35px;
        box-sizing: border-box;
    }*/

    .msgpopup{
        width: 80%;
        left: 10%;
        top: 10vh;
        padding: 35px 15px 35px 15px;
    }

    .msgpopup b.vermelho{
        width: 70%;
    }
    .msgpopup img{
        width: 90%;
        margin-left: 5%;
    }


}
@media only screen and (max-width: 380px){
    h1{
        font-size: 2em;
    }
}