:root{
    /* #023b6d; */
    --primary:#023b6d;
    --primary:#044782;
    --secondary:#242b33;
    --button:#0364b8;
    --button:#375779;
    --primary:#313941;
    --negative:#fe4d5f;
    --positive:#29cc90;
    --selected:#375779;
    --color:#375779;
    --label:white;
}

html {
    height: 100%;
    min-height: 100%;
}
body{
    margin:0;
    background-color: #131a20;
    font-family: "Open Sans", sans-serif;
    color:#9daaad;
    color:#aebcc0;
    /*overflow: hidden;*/
    /*min-height: 100%;
    display: flex;
    flex-direction: column;*/
}

.material-symbols-outlined:hover{
    cursor:pointer;
    color:orange;
}
a span{
    color:#41464b;
}

footer{
    text-align: center;
    font-size:9px;
    margin-top: auto;
    margin-bottom:10px;
}
a{
  color:#2487ce;
  text-decoration: none;
  cursor:pointer;
}
a:hover{
    color:#2487ce;
    text-decoration: underline;
}

h1,h2{
    color:var(--color); 
}
/* NAV BAR */
nav a{
    color:white;
    text-decoration: none;
}
nav a:hover{
    color:#2487ce;
    text-decoration: none;
}

nav{
    background-color:var(--primary);
    float:left;
    width:100%;
    height: 55px;
    position: fixed;
    font-size:15px;
    /*box-shadow: 1px 1px 5px 1px #aaaaaa;*/
    top: 0;
    z-index: 1;
    border-bottom:1px solid #4d5d6d;
}

ul{
    list-style-type: none;
}

li{
    float:left;
}

nav ul{
   margin-top:17.5px
}

nav li{
    margin-right: 25px;
}

nav a{
    color:white;
    text-decoration: none;
}

.positive{
    color:var(--positive);
}

.negative{
    color:var(--negative);
}

.secondary{
    background-color:var(--secondary);
}
/* DROP DOWN */

#ddPrefMob{
    opacity: 0;
}

@media (max-width: 767px) {
    #ddPref{
       
        opacity: 1;
    }

    #ddPref{
        opacity: 0;
    }
    #ddPrefMob{
       
        opacity: 0;
    }

    #ddPrefMob{
        opacity: 1;
    }
}


/*
@media (max-width: 767px) {
    #ddPref:first-child{
        opacity: 0;
    }

    #ddPref:last-child{
        opacity: 1;
    }
}*/



.dropdown span{
    color:white;
    cursor:pointer;
    position: absolute;
    top:-3px;
    
}
    
.dropdown ul{
    top:20px;
    left:-50px;
    display:none;
    
}

.dropdown label{
    color:white;
    font-family: "Open Sans", sans-serif;
    font-size:15px;
    cursor:pointer;
    font-weight: normal;
    margin-top:-5px;
    padding-left:30px;
}

.dropdown li:hover{
    cursor:pointer;
}

.eaDropDown li{position:relative;   }

.eaDropDown li ul{position:absolute;}

.eaDropDown li ul li{
        display:block; 
        min-width:157px;
        padding-top:10px;
        padding-bottom: 10px;
        padding-left:35px;
        background-color: #262f3d;
        border-left:1px solid #75899c;
        color:#75899c;
}
.eaDropDown li ul li:last-child{
    border-top:1px solid #75899c;
    border-bottom:1px solid #75899c;
}

.eaDropDown li ul li:first-child{
    border-bottom:1px solid #75899c;
    font-size:10px;
    padding-left:3px;
    width:190px;
    text-align: center;
}

.eaDropDown li ul li span{
    color:#75899c;
    top: 7px;
    left: 5px;
}

.eaDropDown li ul li a{color:#75899c}

.eaDropDown li ul li:hover{
    background:#375779;
    color:white;
}

.eaDropDown li ul li:hover a,.eaDropDown li ul li:hover span{
    color:white;
}


/* TABLES */

table{
    margin-left:15px;
    border-collapse: collapse;
    background:#242b33;
}

th{
    color:white;
    background-color:  var(--primary);
    font-size:14px;
    font-weight: normal;
    padding:7px;
    padding-top:8px;
    padding-bottom:8px; 
}

td{
    font-size:14px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top:5px;
    padding-bottom:5px;
}

/*tr:hover{
    background-color: #f3f3f3;
}*/

input, select {
    background-color: #262f3d;
    color:#617284;
    color:#375779;
    color:white;
    border:1px solid #617284;
}

input:focus, select:focus{
    outline:none;
    border:1px solid #375779;
}



tbody tr:nth-of-type(2n), tfoot tr:nth-of-type(2n) {
    background-color: rgba(0,0,0,.075);
    background-color: #313941;
}


tfoot tr:nth-of-type(1n){
    background-color: rgba(0,0,0,.075);
    border-top:1px solid #4b555f;
}

tfoot td{
    font-weight: bold;
}

/*tbody tr:nth-of-type(2n):hover {
    background-color: #f3f3f3;
}*/

/* ALERTS */
.alert{
    border-radius: 5px;
    margin:15px;
    width: calc(100% - 30px);
    height: 50px;
    font-size:14px;
    opacity: 1;
    transition: opacity 1s ease;
}

.alert-text{
    margin-top:15px;
    margin-left:15px;
}

.alert-close{
    float:right;
    margin-right:10px;
    margin-top:-20px;
    font-weight: bold;
    cursor:pointer;
    
}

.alert-success{
    color: #084298;
    background-color: #cfe2ff;
    border:1px solid #b6d4fe;
}

.alert-error{
    color: #842029;
    background-color: #f8d7da;
    border:1px solid #f5c2c7;
}

.alert-warning{
    color: #664d03;
    background-color: #fff3cd;
    border:1px solid  #ffecb5;
}

.alert-message{ 
    color: #41464b;
    background-color:  #e2e3e5;
    border:1px solid #d3d6d8;
}
.alert-default{
    color: white;
    background-color:  #375779;
    border:1px solid #375779;
}
/* FORMS */
label{
    /*color:#012970;*/
    font-weight: bold;
    
}
.form{
    display: grid;
    margin:15px;
    margin-left: auto;
    margin-right: auto; 
    background-color: white;
    box-shadow: 2px 1px 10px 1px #aaaaaa;
    width:fit-content;
}
.form td{
    font-size:12px;
}
.form-title{
    color:#012970;
    font-weight: bold;
    margin:15px;
    font-size: 18px;
}
.form table{
   margin:15px
}
.form tr{
    background-color: #313941;
}
.form tbody tr:nth-of-type(2n) {
    background-color:#242b33;
}

.form td:nth-child(odd){
    text-align: right;
}
.form input, .form select, .form textarea{
    height:25px;
    border-radius: 5px;
}

.form select{
    width:205px;
    height:30px;
}

#select-years{
    /*background-color: #e4e7ec;*/
   color:white;
}

.form textarea{
    width:470px;
    height:100px;
}

.form input[type="number"]{
    min-width:200px;
}
.form input[type="checkbox"]{
    width:20px;
    height: 20px;
}


.form input:focus, .form select:focus, .form textarea:focus{
    outline-color: #315f88;
    border:1px solid #375779; 
    outline:none;
    /*background-color: #fff;
    border-color: #315f88;
    outline: 0;*/
    /*box-shadow: 0 0 0 .25rem rgba(5, 44, 102, 0.25);*/
}

.form select:focus{
    border:2px solid #157bd4;
    border-radius:5px;
}

.form input[type="checkbox"]:focus{
    box-shadow: 0 0 0 0 black;
}

.form input:read-only{
    background-color: #e9e9ed;
    color:gray;
}
/* buttons */
button{
    width:180px;
    height:50px;
    color:white;
    background-color: var(--button);
    border-radius: 5px;
    cursor:pointer;
    border:0;
    font-size: 14px;
 
}
.button-sm{
    width:100px;
    height: 25px;
    font-size: 12px;
    font-family: Arial;
}

button:hover{
    background-color: #3194db;
}

button:active{
    background-color: #1275bd;
}
.btn-secondary{
    background-color: white;
    color:#315f88;
    border:1px solid #315f88;
}
.btn-secondary:hover{
    color:white;
    border:1px solid #3194db;
}
/* MODAL */
.wrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
 }
  
.wrapper a {
    display: inline-block;
    text-decoration: none;
    padding: 15px;
    background-color: #fff;
    border-radius: 3px;
    text-transform: uppercase;
    color: #585858;
    font-family: 'Roboto', sans-serif;
}
  
  .modal {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 77, 77, .7);
    transition: all .4s;
  }
  
  .modal:target {
    visibility: visible;
    opacity: 1;
  }
  
  .modal__content {
    border-radius: 4px;
    position: relative;
    width: 350px; 
    max-width: 90%;
    /*background: #fff;*/
    background-color:#262f3d ;
    padding: 1em 2em;
  }
  
  .modal__footer {
    text-align: right;
        
  }

.modal__close {
    position: absolute;
    top: 7px;
    right: 13px;
    color: #585858;
    font-size:25px;
    text-decoration: none;
}
.modal__close:hover {
    text-decoration: none;
}
/* FIM MODAL*/
/* TOPBAR*/
.menubar{
    width:100%;
    height:25px;
    position: fixed;
    top:55px;
    border-bottom:1px solid #4d5d6d;
    border-top:2px solid #375779;
    background-color: #3a4148;
    font-size:13px;
    color:#75899c;
   
}

.menubar ul{
    margin-top:0px;
}

.menubar li{
    margin-right:13px;
    margin-top:3px;
    cursor:pointer;
}

.menubar li:hover{
    color:#2487ce;
}

.container{
    border:0px solid red;
    position:static;
    margin-top:55px;
}

/** TIME LINE ...*/
.timeline{ 
    border-bottom:1px solid #4d5d6d;
    width:calc(100% - 1px);
    height:40px;
    background-color: #3a4148;
    overflow-y: auto;
    overflow-x: hidden;
    
}

.timeline div{
    float:left;
    min-width:60px;
    text-align: center;
    
    background-color: #262f3d;
    padding-top:11px;
    padding-bottom:12px;
    border-right:1px solid #4d5d6d;
    cursor:pointer;
    font-size:14px;
    width:5%;
}

.timeline-active {
    color:white;
    background-color:#375779 !important;
}

.timeline-active:hover {
    color:orange !important;
    background-color:#375779 !important;
}

.timeline div:hover{
    color:white;
    background-color:#375779 ;
}

.timeline div:hover:nth-child(1) {
    
    background-color:#262f3d ;

}

.timeline select{
    border:0;
    background-color:#262f3d;
    color:#375779;

}


/* FIM TIME LINE */
/** PAINELS */

.painels{
    border:0px solid  #313941;
    margin-left: 15px;
    margin-right:15px;
    margin-top:15px;
    border-radius: 5px;
    max-width: 1500px;
    
 }

@media (max-width: 767px) {
    .painels{
        margin-left: 0;
        margin-right:0;
    }
}

.painels table{
    margin:0;
    width:100%;
    white-space: nowrap;
}

.painels td, .painels th{
    font-size:12px;
}
.painels-title{
    background-color: #dde6ee;
    height:35px;
    font-size:12px;
}

.painels-body{
    display: block;
    width: 100%;
    overflow-x: auto;
    
}

.painels-body table{
    text-align: right;
}

.painels-title h1{
    color:#646464;
    margin-top:0px;
    margin-left:15px;
    padding-top:7px;
    font-size:14px;
    font-family: Arial;
    background-color: #dde6ee;
    font-weight: normal;
    float:left;
}

.painels-icon a{
    color:#41464b;
}
.painels-icons span{
    float:right;
    margin-top:5px;
    margin-right:5px;
    cursor:pointer;
}
.painels-icons span:hover{
    color:orange;
}

.painels-icons-nf span{
    cursor:pointer;
}
.painels-icons-nf span:hover{
    color:orange;
}

.painels-forms select, .painels-forms input{
    width:100px;
}

.painels-forms input[type=DATE]{
    width:120px;
}

.painels-forms table{
    text-align: center;
}

i{
    cursor:pointer;
}
i:hover{
    color:orange;
}

.form-edit input[type="text"], .form-edit input[type="number"]{
    width:60px;
}

.form-edit button{
    height:23px;
}

 /* Style the tab */
 .tab {
    overflow: hidden;
    background-color: #262f3d;
    max-width: 1500px;
    /*max-height: 35px;*/
}

  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    color:#646464;
    color:#75899c;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 6px 16px;
    transition: 0.5s;
    border-radius:0;
    height: 35px;
    width: auto;
    border-right:1px solid #313941;
    border-right:1px solid #4d5d6d;
    
  }

  .tab button:first-child{
      border-radius:5px 0 0 0 ;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: var(--primary);
    border-right:1px solid #313941
  }
  
.tab button.active {
    background-color: var(--primary);
    border-right:1px solid #313941;
    border-left:1px solid #313941;
    color:#75899c;
}

  .tab span{
     margin-top:5px;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  } 


/* cards*/

.cards{
    margin:15px;
    margin-bottom:0;
    height:52px;
    /*border:1px solid lightgray;
    background-color: #e4e7ec;*/
    /*min-width: 1000px;*/
    overflow: auto; 
}

.cards-mini{
    border-radius:5px;
    float:left;
    /*margin:8px;*/
    /*border:1px solid #357db0;*/
    background-color: #3194db;
    background-color: #357db0;
    background-color: #375779;
    height:50px;
    min-width:160px;
    color:white;
    font-size:12px;
    margin-right:15px;
    margin-top:2px;
}

.cards-mini-small{
    min-width:115px;
}

.cards-mini:hover{
    background-color: #2ea2d2;
    /*border:1px solid #2ea2d2;*/
    cursor:pointer;
}

.cards-mini-neg{
    background-color: #7a393e;
}

.cards-mini-neg:hover{
    background-color: #ce5a5a;
    cursor:pointer;
}

/* customizações */

.carteira{
    margin-bottom:15px;
    overflow-y: auto;
    max-height:300px;
    font-size:16px;
}
.carteira div{
    display:table-row;
}
.carteira div div{
    display:table-cell;
    padding-top:1px;
    padding-bottom:1px;
    vertical-align: middle;
}
.carteira div div:nth-child(2){
    text-align: right;
    width:10%;
}
.carteira input[type=radio]{
    width:30px;
}

.carteira-form{
    margin-bottom:15px;
    overflow-y: auto;
    max-height:300px;
}

.carteira-form div{
    width:99%;
    float:left;
    margin:1px;
}

.carteira-form div div{
    padding-top:1px;
    padding-bottom:1px;
    vertical-align: middle;
}

.carteira-form div div:nth-child(1){
    text-align: left;
    width:calc(85% - 5px);
}

.carteira-form div div:nth-child(2){
    text-align: right;
    float:left;
    width:15%;
}

.carteira-form input{
    width:100%;
}

.carteira-form span{
    cursor:pointer;
}

#tpOperacoes td{
    text-align: center;
    padding-top:0;
    padding-bottom:0;
}

#tpOperations tfoot i, #tpCurrent tfoot i{
    font-size:22px;
    position:absolute;
    margin-top: -4px;
    margin-left: 5px;
}

#tpOperations tfoot i:hover, #tpCurrent tfoot i:hover{
    color:orange;
    cursor:pointer;
}

#tpOperations tfoot i:nth-child(2), #tpCurrent tfoot i:nth-child(2){
    margin-left: 25px;
}

.iOPeracoes{
    font-size:22px;
    margin-left:10px;
    cursor:pointer;
}

.iOPeracoes:hover{
    color:orange;
}

#table-operations th{
    text-align: center;
}

#table-current{
    text-align: right;
}

#table-current td:nth-child(1),#table-current th:nth-child(1){
    text-align: center;
}

#table-current td:nth-child(2),#table-current th:nth-child(2){
    text-align: left;
}

#table-current td:nth-child(4),#table-current th:nth-child(4){
    text-align: center;
}

#table-custody td:nth-child(1),#table-custody th:nth-child(1),
#table-day     td:nth-child(1),#table-day     th:nth-child(1),
#table-month   td:nth-child(1),#table-month   th:nth-child(1){
    text-align: left;
    padding-left:50px; 
}

#chart-custody, #chart-day, #chart-month, #chart-year, #chart-history, #chart-transactions {
    position: relative;
    height: 90vh;
    overflow: hidden;
    
  }

.report-income-header{
    border-top:2px solid var(--primary);
    text-align: center;
    background-color: #e4e7ec;
    color:var(--primary);
    font-weight: bold;
}
.report-income td,.report-income th  {
    text-align: left;
}

.report-income td:nth-child(1),.report-income th:nth-child(1),
.report-income td:nth-child(5),.report-income th:nth-child(5){
    text-align: center;
}
.report-income td:nth-child(7),.report-income th:nth-child(7),
.report-income td:nth-child(8),.report-income th:nth-child(8){
    text-align:right;
}


.report-income td:hover{
    cursor:pointer;
}


.planos th{
    font-weight: bold;
}

/*.planos tbody tr:nth-of-type(2n) {
    background-color: #e4e7ec;
}*/
.planos tbody td{
    text-align: center !important;
    padding-top:8px;
    padding-bottom:8px;

}

.planos-precos td{
    font-size:16px;
    color:white;
    font-weight: bold;
}

/*
.zebra tbody tr:nth-of-type(2n) {
    background-color:var(--secondary);
}
.zebra tbody tr:nth-of-type(1n) {
    background-color:#313941;
    background-color:#242b33;
}*/

#seek-p2{
    display:none;
}


#modal-contato-content{
    width:550px;
    height:400px;
    text-align: center;
}

#drop-configuracoes{
    margin-right:40px;
    width:140px;
}

#modal-perfil-content{
    width:60%;
    height:60%;
}

#table-profile{
    margin:0;
    width:100%;
}

#painel-senha table{
    margin:0;width:100%;
}

#painel-planos table{
    margin:0;
    width:100%;
    overflow-x: scroll;

}

#modal-changepassword-content{
    width:500px;
    height:225px;
    text-align: center;
}

#modal-sobre-content{
    width:450px;
    text-align: center;
}

@media screen and (max-width: 1150px) {
    .tab-response button{
        max-width: 100px;
        font-size:12px;
    }
 }
 @media screen and (max-width: 1000px) {
    .tab-response button{
        max-width: 100px;
        font-size:12px;
        padding:5px 10px;
    }
 }
 @media screen and (max-width: 900px) {
    .tab-response button{
        max-width: 100px;
        font-size:11px;
        padding:4px 4px;
    }
    .tab-response-1 button{
        max-width: 100px;
        font-size:11px;
        padding:4px 4px;
    }
}
@media screen and (max-width: 764px) {
     
     .tab-response button{
        max-width: 25px;
        font-size:11px;
        padding:4px 4px;
        overflow: hidden;
    }
    .tab-response button:hover{
        max-width: 50px;
    }
    .timeline div{
        min-width: 10px;
        font-size:11px;
        overflow: hidden;
        height:17px;
    }
    .cards{
        margin-left: 1px;
        margin-right: 0;
    }
    #url-label, #mode-theme{ 
        display:none;
    }
    #contato-icon{
        float:left;
    }
    .painels-icons span{
        font-size:20px;
    }
    .alert{
        border-radius: 5px;
        margin-top:15px;
        margin:1px;
        width: 100% ;
        height: 50px;
        font-size:11px;
    }
    .alert-text{
        margin-right:35px;
        text-align: center;
    }
    .alert-close{
        margin-top:-27px;
    }
    /*#drop-configuracoes{
        margin-right:80px;
    }*/
    #modal-perfil-content{
        margin-top:50px;
        width: 100%;
        height: 75%;
    }
    #modal-changepassword-content{
        width:80%;
        text-align: center;
    }


    #modal-sobre-content{
        width:80%;
        text-align: center;
    }

 }

 .processing-btn {
    position: relative;
    overflow: hidden;
    pointer-events: none;
  }
  
  .processing-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    animation: processing-animation 2s infinite linear;
    z-index: 1;
  }
  
  .processing-btn::before {
    content: "";
    position: relative;
    z-index: 2;
  }
  
  @keyframes processing-animation {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  
#countunsaved{
    font-weight: bold;
    display: flex;
    position: absolute;
    background:#375779; 

    color:white;
    width:20px;
    height:20px;
    border-radius: 50%;
    border:1px solid white;
    font-size: 10px;
    justify-content: center;
    align-items: center;
    margin-top:23px;
    margin-left:-10px;
    cursor:pointer;
}

#countunsaved:empty {
    display: none;
}

.operation-note textarea{
    width:100%;
    height:50px;
    background-color: #262f3d;
    color:white;
    border: 1px solid #617284;
} 
  
.showNote{
    cursor:pointer;
    color:#2487ce;
}