:root {
    --main-color:#1d77ca;
    --color-dark:#1f3971;
    --color-light:#91aee4;
    --color-media:#6999fa;
    --text-grey: #1f2811;
    --fundo-cinza-claro:#ccc;
    --fundo-padrao:#fff;   
    --fundo-body: #f1f5f9;
 }
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    list-style-type:none;
    text-decoration:none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a{
    color:var(--main-color)
}

body{
    margin-top: 0;
    background-color: var(--fundo-body);
}

a:hover{
    color:var(--fundo-light);
}
/* SIDE LEFT  */

button:hover{
    color:var(--fundo-light);
}
.sidebar{
    width:250px ;
    position: fixed;
    left:10;
    top:0;
    height: 100%;
    background:var(--color-dark);
    z-index: 100;
    transition: margin-left 300ms;
}

#nav-toggle:checked ~ .main-content header{
    width:calc(100%-60px);
    left: 70px;
}

#nav-toggle:checked ~ .main-content {
    margin-left: 70px;
}

#nav-toggle:checked + #nav-label .las.la-caret-left {
    display: none;
    color:var(--color-dark);
    font-size: large;

}

.card-header .edicao {
    display:none;
    color:#52711F;
}

.card-header .lista {
    display:block;
}

.card-header .cadas {
    display:none;
    color:var(--color-media);
}

#nav-toggle:checked + #nav-label .las.la-caret-right {
    display: inline;
}

.sidebar-logo{
    height: 90px;
    margin-top: 2rem;
    padding: 1rem 0rem 1rem 2rem;
    margin-bottom: 60px;
}

.sidebar-logo img{
    width:100%;
    height: 100%;
}


.sidebar-logo span{
    display: inline-block;
    padding-right: 2rem;
    
}

.sidebar-brand{
    margin-top: 5rem;
    padding: 1rem 0.5rem 1rem 1rem;
    text-align: center;
    color: var(--fundo-cinza-claro)  
}


.sidebar-menu {
    margin-top: 0.8rem;
    margin-left: 1.9rem;
}

.sidebar-menu a {
    margin-top: 1rem;
    display: block;
    color: #fff;
    font-size: 1.01rem;
}

.sidebar-menu li{
    width: 100%;
    margin-bottom: 0.8rem;
    padding: 0rem 0rem 0rem 0rem;
    display: inline;
}

.sidebar-menu a{
    display: block;
    color: #fff;
    font-size: 1.1rem;
}

.sidebar-menu a:hover{
    background: #fff;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: var(--main-color);
    border-radius: 16px 0px 0px 16px;
}

.sidebar-menu a span:first-child{
    font-size: 1.8rem;
    padding-right: 1.0rem ;
}


#nav-toggle:checked + .sidebar{
    width: 70px;
}

#nav-toggle:checked + .sidebar .sidebar-brand ,
#nav-toggle:checked + .sidebar li  {
    padding-left: 1rem;
    text-align: center;
}

#nav-toggle:checked + .sidebar li a  {
    padding-left: 0rem;
}

#nav-toggle:checked + .sidebar .sidebar-brand  span:last-child,
#nav-toggle:checked + .sidebar li a span:last-child{
    display: none;
}


/*SIDE RIGHT */

/* Container do Main  */

.main-content{
    transition: margin-left 300ms;
    margin-left: 235px ;
    margin-top: 0;
   }

  
.custom-visivel {
    /* Estilos personalizados para .lista quando a classe .custom-styling estiver presente */
    background-color: lightgray;
    border: 1px solid black;
}

.custom-invisivel {
    /* Estilos personalizados para .lista quando a classe .custom-styling estiver presente */
   display:none;
}





/* Headers  */

header{
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    left: 300px;
    top:0;
    
    z-index:100;
}

#nav-toggle{
    display: none;
}


header h2 {
  color:#222;  
}

header label span{
    font-size:1.5rem;
    padding-right:1rem;
}

.search-producao{
    border:1px solid #ccc;
    border-radius: 30px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    
}



.search-producao input{
    height: 100%;
    padding: .4rem;
    border: none;
    outline: none;
    border-radius: 16px;
    background:#fff ;
}

.search-wrapper{
    border:1px solid #ccc;
    border-radius: 30px;
    height: 50px;
    display: flex;
    align-items: center;
    overflow-x: hidden;
    
}

.search-wrapper span{
    display: inline-block;
    padding: 0rem 1rem;
    font-size: 1rem;
}

.search-wrapper input{
    height: 100%;
    padding: .4rem;
    border: none;
    outline: none;
    border-radius: 16px;
    background:#fff ;
}

.search-wrapper select{
    height: 100%;
    margin-left: 0.2rem;
    padding: .5rem .5rem;
    border: none;
    outline: none;
    background:#fff ;
}

.search-wrapper button{
    height: 100%;
    padding: .4rem;
    border: none;
    outline: none;
    color:var(--color-dark);
    background-color:  #f1f5f9;
    
}


.user-wrapper{
    display: flex;
    align-items: center;
    margin-right: 30px;
}

.user-wrapper img{
    border-radius: 50%;
    margin-right:1rem;
}

.user-wrapper small{
    display : inline-block;
    color:var(--text-grey);
           
}

.usuario small {
    font-weight: 800;
    color:var(--color-media);
}

.login-scc input,select {
    padding:0.5rem 0.5rem;
    background:var(--color-light);
   /* border-bottom: 1px double var(--color-dark);
    border-top: 1px double var(--color-dark);
    border-left:1px double var(--color-dark);
    border-right:1px double var(--color-dark);*/
    font-size: 1.0rem;
    border-radius: 16px;
    border:none;
    align-items: end;
   
}
.login-scc{
     border: var(--color-dark);
     border-style: solid;
     border-width: 0.05rem;
     border-radius: 2rem;
     padding:  2rem 1rem 1rem 1rem;
     width: 100%;
     margin-right: 3rem;
}    


.login-scc#div .entrada{
   background-color: #888;
}



.login-scc label{
    font-size: 1rem;
    color:var(--color-dark);;
    font-weight: 800;
}


.sistema{
    font-size: 3rem;
    color:var(--color-dark);
    font-weight: 800;
}

.sistema-titulo{
    font-size: 1rem;
    color:var(--color-dark);
    
}
.sistema-versao{
    font-size: 0.3rem;
    color:var(--color-dark);
    
}

#estilo-botao{
    background-color:var(--color-dark);
    width: 50%;
    justify-content: center;
    color:white;
    
}
/* Corpo padrão  */

main {
    margin-top: 0px;
    padding: 2rem 1.5rem;
    background: #f1f5f9;
    height: calc(100vh-90px);
    width: 100%;
    
}

/* Cards para paineis  */

.cards{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap:2rem;
    margin-top: 1rem;
    border-radius: 16px;
}

.card-single {
    display:flex;
     background: #fff;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.card-single div:last-child span{
    font-size: 4rem;
    color:var(--main-color);
}
 
.card-single div:first-child span{
    color: var(--text-grey);
}

 .card-single:last-child {
    background:var(--main-color);
 }


.card-single:last-child h2,
.card-single:last-child div:first-child span,
.card-single:last-child div:last-child span{
    color:#fff;  
}


/* Cards para operaciona  */

.grafico_card{
    display:grid;
    grid-template-columns: 100% auto;
    grid-gap:0.7rem;
    margin-top: 0.7rem;
    border-radius: 16px;
  
}


.grafico_card-single{
    display:flex;
    justify-content: space-between;
    background: #fff;
    padding: 2.5rem 2.5rem 2.5rem 2.5rem;
    border-radius: 16px;
    font-size: 1rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.cards-o{
    display:flex;
    margin-right: 70px;
    justify-content: space-between;
    margin-top: 0.5rem;
    border-radius: 16px;
  
}

.card-single-o {
    
    flex: 1; /* Distribui igualmente o espaço disponível entre os cards */
    background: #fff;
    padding: 2.5rem 1.5rem;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    margin: 0.7rem; /* Espaçamento entre os cards */
}

.card-single-o div:last-child span{
    font-size: 4rem;
    color:var(--main-color);
}
 
.card-single-o div:first-child span{
    color: var(--text-grey);
}

 .card-single-o:last-child {
    background:blue;
 }


.card-single-o:last-child h2,
.card-single-o:last-child div:first-child span,
.card-single-o:last-child div:last-child span{
    color:yellow;  
}


.menu-opcao-c{
    display: flex;
    padding:0rem 1rem;
    flex-direction: row;
    justify-items: first baseline;
    justify-content: space-around;
  }
  
.menu-opcao-c span{
    font-size: 1.2rem;
}

.menu-opcao-c button{
    border: none;
}
.card-header .fechar-janela{
    display: none;
}
.card-header .fechar-janela span{
    font-size: 2rem;
    background-color: white;
    
}

.card-header .fechar-janela button{
    border: none;
}




/* TELA COBRANÇA  PADRÃO */
.id-padrao{
    display: inline;
}
.menu-opcao{
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    padding: 0rem;
    display: flex;
    justify-content: flex-end; /* Alterado para justify-content */
    border-radius: 16px;
    background-color:var(--color-dark);
    width: 100%;
}


.menu-opcao ul {
   list-style: none;
   display: flex; /* Alterado para flex para os ícones ficarem lado a lado */
   align-items: center; /* Centraliza verticalmente os ícones */
   margin: 0;
   padding: 0;
}
  
.menu-opcao li {
    margin: 0;
    padding: 0;
  }
  


.menu-opcao  li button,
.menu-opcao a {
  border: 0;
  background: var(--color-dark);
  font-size: 2.5rem;
  padding: 0.1rem 0.1rem;
  color: white;
  cursor: pointer;
  border-radius: 16px;
}

.menu-opcao button title {
  font-size: large;
}

.menu-opcao li button:hover,
.menu-opcao a:hover {
  border-radius: 16px;
  color:var(--color-light);

}

.menu-semfundo{
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    padding: 0rem;
    display: flex;
    
    border-radius: 16px;
    background-color:transparent;
    width: 100%;
}


.menu-semfundo ul {
   list-style: none;
   display: flex; /* Alterado para flex para os ícones ficarem lado a lado */
   align-items: center; /* Centraliza verticalmente os ícones */
   margin: 0;
   padding: 0;
}
  
.menu-semfundo li {
    margin: 0;
    padding: 0;
  }
  


.menu-semfundo  li button,
.menu-semfundo a {
  border: 0;
 
  font-size: 2.5rem;
  padding: 0.1rem 0.1rem;
  color:var(--color-dark);
  cursor: pointer;
  border-radius: 16px;
}

.menu-semfundo button title {
  font-size: large;
}

.menu-semfundo li button:hover,
.menu-semfundo a:hover {
  border-radius: 16px;
  color:var(--color-light);

}

 

.rodape span{
    font-size: 1.2rem;
    color: var(--color-dark);
} 
.rodape small{
    font-size: 0.8rem;
      color:var(--color-dark);
}
#showMsg
{
    margin-left:0.8rem ;
    font-size: 0.8rem;
    display: flex;
    border-radius: 16px;
    
}


.alert-danger{
    color:red;
   }
   
.alert-success{
   color:green;
   }
   

.parcelas-grid{ 
    margin-top: 0.5rem;
    display:grid;
    grid-gap:2rem;
    grid-template-columns: 100% auto;
}

/* PADRAO */

.dados-cadastro{
    margin-top: 0.2rem;
    background:#fff;
    padding: 0.5rem 0.5rem; 
    border-radius: 16px;
    display: block;
    margin-bottom: 0.2rem;
}

.cadastro{
    display:grid;
    margin-left: 0.8rem;
    grid-template-columns: 1.3fr 1.3fr minmax(450px, 2fr);
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}


.cadastro input,select {
    padding:0.5rem 0.5rem;
    background:var(--color-light);
   /* border-bottom: 1px double var(--color-dark);
    border-top: 1px double var(--color-dark);
    border-left:1px double var(--color-dark);
    border-right:1px double var(--color-dark);*/
    font-size: 1.0rem;
    border-radius: 16px;
}
.cadastro div{
    margin-left: 0;
    margin-right: 0;
    padding: 0.15rem 0.15rem;
    
}
.cadastro span:first-child {
    width: 90px;
    font-style: normal;
    padding: 0.1rem 0.1rem;
    color:var(--main-color);
    
}
.cadastro span:last-child {
    color:var(--color-dark);
    font-weight: 500;
    font-display: var(--color-dark);
    padding: 0;
    
}

.dados-valores{
    margin-top: 0.5rem;
    background:red;
    padding: 1rem 0.5rem; 
    border-radius: 16px;
}

.calculo-padrao{
    
    display:grid;
    margin-left: 0.8rem;
    margin-top: 0.8rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

.calculo-padrao input,select {
    padding:0.5rem 0.5rem;
    background:var(--color-light);
    /*border-bottom: 1px double var(--color-dark);
    border-top: 1px double var(--color-dark);
    border-left:1px double var(--color-dark);
    border-right:1px double var(--color-dark);*/
    font-size: 1.0rem;
    border-radius: 16px;
}

.calculo-padrao div{
    margin-left: 0;
    margin-right: 0;
    padding: 0.15rem 0.15rem;
}


#avisoacordo span{
    color:red;
    font-size: 1rem;
}
#acordo {
    color:red;
    
}

.calculo-padrao span:first-child {
    width: 90px;
    font-style: normal;
    padding: 0.1rem 0.1rem;
    color:var(--main-color);
}

.calculo-padrao span:last-child {
    color:var(--color-dark);
    font-weight: 500;
    font-display: var(--color-dark);
    padding: 0;
    
}


/* */
.linha5c-padrao{
    
    display:grid;
    margin-left: 0.8rem;
    margin-top: 0.8rem;
    grid-template-columns: auto;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

.linha5c-padrao input,select {
    padding:0.5rem 0.5rem;
    background:var(--color-light);
    border-bottom: 1px double var(--color-dark);
    border-top: 1px double var(--color-dark);
    border-left:1px double var(--color-dark);
    border-right:1px double var(--color-dark);
    font-size: 1.0rem;
    border-radius: 16px;
}

.linha5c-padrao div{
    margin-left: 0;
    margin-right: 0;
    padding: 0.15rem 0.15rem;
}



.linha5c-padrao span:first-child {
    width: 90px;
    font-style: normal;
    padding: 0.1rem 0.1rem;
    color:var(--main-color);
}

.linha5c-padrao span:last-child {
    color:var(--color-dark);
    font-weight: 500;
    font-display: var(--color-dark);
    padding: 0;
    
}


.terminal {
  margin-top: 2rem;
  width: 10rem;
  font-size: 1.2rem;
  
}

.cards-f{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap:2rem;
    margin-top: 1rem;
    border-radius: 16px;
}

.card-single-f {
    display:flex;
    justify-content: space-between;
    background: #fff;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.card-single-f:last-child {
    background:var(--color-dark);;
    color: #f0f0f0;
 }

.card-single-f div:last-child span{
    color: #f0f0f0;
    font-size: 3rem;
 }
.terminal input{
    padding:0.5rem 0.5rem;
    background:var(--color-light);;
    border-bottom: 1px double var(--color-dark);
    border-top: 1px double var(--color-dark);
    border-left:1px double var(--color-dark);
    border-right:1px double var(--color-dark);
    font-size: 1.0rem;
    border-radius: 16px;
    margin-right: 1rem;
}

.cod-barra{
    display: grid;
    width: 50%-7px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 2rem;
    padding: 1rem 1rem  1rem 1rem;
}
.barra{
    margin-top: 2rem;
    margin-right: 1rem;
}


.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }


/*CONGENERES */


.dados-cadastro-congeneres{
    margin-top: 0.5rem;
    background:#fff;
    padding: 1rem 0.5rem; 
    border-radius: 16px;
    border:none;
    width: 100%;
    height: 100%;
   
}
.cadastro-acordos{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-left: 0.8rem;
    flex-direction: row;
    border: none;
    display: none;
    
}


.highlight {
    color: red;
}

.cadastro-acordos input,select,textarea {
    padding:0.5rem 0.5rem;
    text-align: left;
    background:var(--color-light);
   /* border-bottom: 1px double var(--color-dark);
    border-top: 1px double var(--color-dark);
    border-left:1px double var(--color-dark);
    border-right:1px double var(--color-dark);
   */ 
    font-size: 1.0rem;
    border-radius: 16px;
}

#form-pesquisa-congeneres{
    font-size: 1.2rem;
    display: flex;
}

.duas-col{
    flex: 1;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    
    width: 100%; /* Largura mínima da coluna para evitar que seja muito estreita em dispositivos pequenos */
       
}

.linha#valores label{
   border-radius: 16px;
   border: none;
   color:var(--color-media);
   align-content: center;
   justify-content: center;
   margin-left: 100px;
   
}

.alinhar-centro-meio{
    margin-left:2rem;
    text-align: center; 
    vertical-align: middle; 
    display: inline-block;
}
.alinhar-direita-top{
    margin-left:2rem;
    text-align: right; 
    vertical-align: middle; 
    display: inline-block;
}
.alinhar-esquerda-top{
    margin-left:2rem;
    text-align: left; 
    vertical-align: top; 
  
}
.linha {
    padding: 5px;
   
}

.cadastro-acordos span:first-child {
   
    font-style: normal;
    padding: 0.1rem 0.1rem;
    color:var(--main-color);
    
}
.cadastro-acordos span:last-child {
    color:var(--color-dark);
    font-weight: 450;
    font-display: var(--color-dark);
    padding: 0;
    
}

.dados-parcelas{
    display:flex;
    flex-direction: column;
    border-radius:16px; 
    align-items: center;
    justify-content: center;
    align-content: center;
    
    width:100%;
   
}
.dados-parcelas tr{
  
    
    padding: 0.2rem;
    height: 2rem;
}


.dados-valores-congeneres{
    margin-top: 0.5rem;
    background:red;
    padding: 1rem 0.5rem; 
    border-radius: 16px;
}
.calculo-padrao-congeneres{
    
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-left: 0.8rem;
    margin-top: 0.8rem;
    display: none;
    border: none;
    
}

.calculo-padrao-congeneres input,select {
    padding:0.5rem 0.5rem;
    text-align: left;
    background:var(--color-light);
    font-size: 1.0rem;
    border:0;
    border-radius: 16px;
}

.filtro-sinistro{
    margin-top: 1.5rem;
    display:grid;
    grid-gap:1.5rem;
    grid-template-columns: 100% auto;
    display:none;
    
}

.filtro-sinistro i {
  font-size: 1.8rem;
}

.filtro-sinistro input,select,textarea {
    padding:0.5rem 0.5rem;
    text-align: left;
    background:var(--color-light);
   /* border-bottom: 1px double var(--color-dark);
    border-top: 1px double var(--color-dark);
    border-left:1px double var(--color-dark);
    border-right:1px double var(--color-dark);
   */ 
    font-size: 1.0rem;
    border-radius: 16px;
    border:0;
}

.filtro-sinistro button {
    margin-left: 0.9rem;
    font-weight: 300;
    font-size: 1.9rem;
    color:var(--color-dark);
}

.filtro-sinistro label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Estilizando os rótulos dos botões de rádio */
.radio-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    
}



/* Estilizando os botões de rádio */
.radio-input {
    display: none;
}

/* Estilizando os botões de rádio personalizados */
.radio-input + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    border: 2px solid #888;
    border-radius: 50%;
    vertical-align: middle;
}


/* Estilizando os botões de rádio quando selecionados */
.radio-input:checked + label:before {
    border-color: var(--color-dark);
    background-color:var(--color-light);
}

#aviso-acordo-congeneres span:first-child{
    color:red;
    font-size: 0.9rem;
}


.calculo-padrao-congeneres span:last-child {
    color:var(--color-dark);
    font-weight: 450;
    font-display: var(--color-dark);
    
}

.status-sinistro {
    border-radius: 16px;
    display: flex;
    justify-content: flex-end; /* Alinhar horizontalmente à direita */
    align-items: flex-end; /* Alinhar verticalmente ao final */
    margin-left: 0.8rem;
    margin-bottom: 0.3rem;
    display: none;
    color:var(--color-dark);  
}

.status-sinistro label{
   margin-left: 0.5rem;
   font-weight: bold; /* Aplicar negrito ao texto */
   color:var(--color-dark);
  }  

.recent-grid{
    margin-top: 3.5rem;
    display:grid;
    grid-gap:2rem;
    grid-template-columns: 45% auto;
}

.tarefa-grid{
    margin-top: 1.5rem;
    display:grid;
    grid-gap:1.5rem;
    grid-template-columns: 50% auto;
}

.tarefa-grid-consulta{
    margin-top: 1.5rem;
    display:grid;
    grid-gap:1.5rem;
    grid-template-columns: 100% auto;
}

.tarefa-grid-consulta td span{
    font-size: 1.7rem;
}

.tarefa-grid-op{
    margin-top: 1rem;
    display:grid;
    grid-gap:1rem;
    grid-template-columns: 60% auto;
}


.grid-rank{
   display:grid;
   grid-gap:1.2rem;
   grid-template-columns: 3fr 2fr 1fr 1fr 1fr 1fr ;
}

.grid-rank-cliente{
    display:grid;
   grid-gap:2rem;
   grid-template-columns: 100% auto;
}


.grid-aviso{
    display:grid;
    grid-gap:1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 3fr 1fr 1fr ;
}

.grid-aviso span{
    color: red;
   
}

.grid-aviso a{
    color:#52711F;
    
}

.grid-aviso button{
    background-color:#ccc;
    font-size: 1.rem;
}


.grid-aviso a:hover{
    color:var(--fundo-cinza-claro);
}


.card{
    background:#fff;
    border-radius: 16px;
    padding:0.2rem;
    margin-bottom: 0.2rem;
}

.card-header,
.card-body{
    padding:0.07rem;
     margin-bottom: 0.2rem;
}
.card-header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:0.07rem;
}

#tabela-historico-parcelas {
    background-color: #f1f5f9; /* Altere a cor de fundo para a cor desejada */
    border-collapse: collapse; /* Mesclar as bordas das células da tabela */
    width: 100%; /* Ajustar a largura da tabela conforme necessário */
    border-radius: 16px;  
}

  /* Estilizar as células do cabeçalho */
#tabela-historico-parcelas th {
    background-color: #f1f5f9; /* Cor de fundo para o cabeçalho */
    color:var(--color-dark);
    text-align: center; /* Centralizar o texto do cabeçalho */
    padding: 10px; /* Adicionar espaçamento interno ao cabeçalho */
  }

/* Estilize a tabela normalmente */
#tabela-dinamica-parcelas {
   /* border-collapse: collapse; /* Mesclar as bordas das células da tabela */
    width: 100%; /* Ajustar a largura da tabela conforme necessário */
    border-radius: 16px;
    background-color: #f1f5f9; 
  
}

  /* Estilize as células do cabeçalho */
#tabela-dinamica-parcelas th {
    background-color: #ccc; /* Cor de fundo para o cabeçalho */
    text-align: center; /* Centralizar o texto do cabeçalho */
    padding: 0.5rem; /* Adicionar espaçamento interno ao cabeçalho */
   
  }

  #tabela-dinamica-parcelas td {
    text-align: center; /* Centralizar o texto do cabeçalho */
    padding: 0.5rem; /* Adicionar espaçamento interno ao cabeçalho */
    font-size: 1rem;
  }

    
  #tabela-dinamica-parcelas td input {
    text-align: center; /* Centralizar o texto do cabeçalho */
     font-size: 1rem;
  }

  #tabela-dinamica-parcelas td button {
     background-color: #f1f5f9;
  }

  #tabela-dinamica-parcelas td button:hover {
    background-color: var(--color-dark)
 }

  /* Estilize as células de dados */

  /* Altere a cor de fundo quando o mouse passar sobre a linha da tabela */
  #tabela-dinamica-parcelas tbody tr:hover {
    background-color: var(--color-light); /* Altere a cor de fundo quando o mouse passar sobre a linha */
    border-radius: 16px; 
}


/* Impressão que estarão nos filtros */

/* Estilos para a página de impressão em modo paisagem */
.print-page-land {
    margin-top: 20mm;
    margin-bottom: 20mm;
    margin-left: 20mm;
    margin-right: 20mm;
    width: 297mm; /* Largura da página A4 em modo paisagem (297mm) */
    height: 210mm; /* Altura da página A4 em modo paisagem (210mm) */
    background-color: white;
}

.print-page-portrait {
    margin-top: 20mm;
    margin-bottom: 20mm;
    margin-left: 20mm;
    margin-right: 20mm;
    width: 210mm; /* Largura da página A4 em modo retrato (210mm) */
    height: 297mm; /* Altura da página A4 em modo retrato (297mm) */
    background-color: white;
}

/* Estilos para o título da página de impressão em modo paisagem */
.print-titulo-land {
    color: white;
    text-align: center;
    margin-bottom: 20px;
    background-color: #666;
}
.print-header {
    text-align: center;
    font-weight: bold;
    margin: 10mm 0;
}

.print-grid-filtro{
    margin-top: 1.5rem;
    display:grid;
    grid-gap:1.5rem;
    grid-template-columns: 100% auto;
}

.print-grid-filtro th{
    padding-left: 0.5rem ;
}

.table-responsive.print-table {
    
    text-align: left;
}

.logo-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: 20px;
    margin-bottom: 40px;
}

.logo {
    max-width: 250px;
    margin-right: 120px;
    
}
.sinistro-info {
    margin-bottom: 20px;
    margin-left: 20px;
    padding: 2rem 2rem;
    font-family: Arial, sans-serif;
    overflow: auto; /* Adiciona barras de rolagem vertical e horizontal quando necessário */
    max-height: 500px; /* Define a altura máxima da div para ativar a barra de rolagem vertical */
    white-space: nowrap;
}

.client-info {
    font-size: 12px;
    margin-right: 20px;
}

.line {
    height: 1px;
    background-color: #ddd;
    margin-bottom: 20px;
}

/* Estilos para o rodapé */
.footer {
    margin-top: 50px;
    text-align: center;
    font-size: 12px;
    color: #666;
}


/*Telas parcelas
quando cadastrar aparecer
#tela-parcelas{
    background:#fff
   
}
 */

table{
    width: 100%;
    border-radius: 16px;
}

thead tr {
    border-radius: 16px;
    background-color:var(--color-dark);
    color: white;
}

thead td{
    font-weight: 300;
    align-items: left;
    align-content: center;
   
}

thead th{
    font-weight: 700;    
    color:white;
    font-weight: 400;
    

}


tr {
    border-top: 1px solid #f0f0f0;
    border-bottom: 2px solid var(--color-dark);
}

td{
    padding:0.2rem 0.6rem;
    font-size:.9rem;
    align-items:left;
    color:var(--main-color);
}

td .status{
   display: inline-block;
   height: 10px;
   width: 10px;
   border-radius: 50%; 
   margin-right: 1rem;
}

.status{
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 50%; 
    margin-right: 1rem;
   
 }
 

td button{
    font-size: 1.7rem;
    color:var(--main-color);
    background: #fff;
    border: none;
}



tr td:last-child{
    display: flex;
    align-items: center;
}


.status.aguarde{
    background:#FFC107;
}

.status.andamento{
    background:green;
}

.status.cancelado{
    background:black;
}

.status.avencer{
   background: yellowgreen;
}
.status.alerta{
    background:red;
    font-size: 0.9rem;
    color:red;
}

.status.negativado{
    background:red;
    font-size: 1rem;
    color:red;
}
.status.pendente{
    background:magenta;
    font-size: 0.9rem;
    
}

.status.ajuizado{
    background:rgb(255, 251, 0);
    font-size: 0.9rem;
    
}

.status.baixado{
    background:rgb(7, 7, 7);
    font-size: 0.9rem;
    
}

.status.suspenso{
    background:burlywood;
    font-size: 0.9rem;
    
}

.status.aconfirmar{
    background:greenyellow;
        
}

.status.vazio{
    background:rgb(13, 224, 252);
    font-size: 0.9rem;
    
}

.status.concluido{
    background:#036fe4;
    font-size: 0.9rem;
    
}

.status.quitado{
    background:#036fe4;
    font-size: 0.9rem;
    
}

.status.renegociado{
    background:rgb(233, 75, 156);
    font-size: 0.9rem;
    
}

.status.mensagem{
    background:blueviolet;
}

.status.nf{
    background:lawngreen;
}

.status.encaminhado{
    background:rgb(251, 29, 255);
}

/* Estilo para o input desabilitado */
input:disabled {
    background-color: lightgray; /* Altere para a cor desejada */
  }

.table-responsive{
    width: 100%;
    border-radius: 16px;
    color:white;
    padding:0rem;
}
.table-responsive-consulta{
    width: 100%;
    border-radius: 16px;
    color:white;
    padding:0rem;
    border:none;
    display: flex;
}



.table-responsive tbody tr:hover {
    background-color: var(--color-light);/* Altere a cor de fundo quando o mouse passar sobre a linha */
    border-radius: 16px; 
    padding: 0;
    width: 100%;
}
.campo-input{
    padding:0.3rem 0.3rem;
    border:none;
    background:var(--color-light);
    font-size: 1.0rem;
    border-radius: 16px;
}
.table-responsive input{
    padding:0.3rem 0.3rem;
    border:none;
    background:var(--color-light);
   /* border-bottom: 1px double var(--color-dark);
    border-top: 1px double var(--color-dark);
    border-left:1px double var(--color-dark);
    border-right:1px double var(--color-dark);*/
    font-size: 1.0rem;
    border-radius: 16px;
}


.table-responsive-consulta input{
    padding:0.3rem 0.3rem;
    border:none;
    background:var(--color-light);
   
    font-size: 1.0rem;
    border-radius: 16px;
}

.table-responsive-consulta tbody tr {
    border-radius: 16px; 
    padding: 0;
    width: 100%;
}
.button-geral button{
    background:transparent ;
    font-size: 1.5rem;
    color:var(--color-dark);
    border: none;
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
   
}
.formulario-responsive{
    display: flex;
    width: 100%;
    gap: 10px;
    
}

.customer {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: .1rem .5rem;
}

.info{
    display:flex;
    align-items: center;
}

.info img{
    border-radius:50%;
    margin-right: 1rem;
}

.info h4{
    font-size:.8rem;
    font-weight: 400;
    color:#222;
}

.info small{
    font-weight: 600;
    color:var(--text-grey)
}

.contact span{
    font-size: 0.9rem;
    display:inline-block;
    margin-left:.3rem;
    color:var(--main-color);    
}

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

   .sidebar{
        width: 70px;
    }
    
   .sidebar .sidebar-brand ,
   .sidebar li  {
        padding-left: 1rem;
        text-align: center;
    }
    
    .sidebar li a  {
        padding-left: 0rem;
    }
    
    .sidebar .sidebar-brand h1 span:last-child,
    .sidebar li a span:last-child{
        display: none;
    }
    
    .main-content header{
        width:calc(100%-70px);
        left: 70px;
        margin-top: 0;
       
    }
    
    .main-content {
        margin-left: 70px;
        margin-top: 0;
        
    }

    .sidebar:hover{
        width: 200px;
        z-index: 200;
    }
    
   
   .sidebar:hover li {
        padding-left: 1.5rem;
        text-align: left;
    }
    
    .sidebar:hover li a  {
        padding-left: 1rem;
    }
    
    
    .sidebar:hover li a span:last-child{
        display: inline;
    }

}

@media only screen and  (max-width: 960px){
    .cards{
        grid-template-columns: repeat(3 , 2fr);
    }

    .cards-o{
        grid-template-columns: repeat(6 , 1fr);
    }
    .recent-grid{
        grid-template-columns: 60% 40%;
    }

    .cadastro-sinistro{
        grid-template-columns: repeat(1 , 1fr);
    }

    header h2{
        display: flex;
        align-items: center;
    }

    header h2 label{
        display: inline-block;
        text-align: center;
        background:  var(--main-color);
        padding-right: 0rem;
        margin-right: 1rem;
        height: 40px;
        width: 40px;
        border-radius:50%;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content: center !important;
    }

    header h2 span {
        text-align: center;
        padding-right: 0rem;
    }


}

@media only screen and  (max-width: 768px){
    .cards{
        grid-template-columns:repeat(2, 1fr);
    }

    .cards-o{
        grid-template-columns: repeat(2 , 1fr);
    }

    .recent-grid{
        grid-template-columns: 60% 40%;
    }
   
    .tarefa-grid{
        grid-template-columns: 100%;
    }
    .tarefa-grid-op{
        grid-template-columns: 100%;
    }
    .grid-aviso{
        grid-template-columns: 100%;
    }

   
    
    .cards-f{
        grid-template-columns: 100%;
    
    }    
    
    header h2{
        display: flex;
        align-items: center;
    }

    header h2 label{
        display: inline-block;
        text-align: center;
        background:  var(--main-color);
        padding-right: 0rem;
        margin-right: 1rem;
        height: 40px;
        width: 40px;
        border-radius:50%;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content: center !important;
    }

    header{
        width: 100% !important;
        left:0 !important;
       
    }
  
    .search-wrapper{
        display: none;

    }

    .user-wrapper{
        display: none;
    }

    .sidebar-brand{
        display: none;
    }

    #nav-toggle:checked + .sidebar{
        left:0 !important;
        z-index:100;
        width:250px;
        
    }
    
   
    #nav-toggle:checked ~.las.la-caret-left {
        display: none;
    }

    #nav-toggle:checked  ~.las.la-caret-right {
        display: inline;
    }
   
    #nav-toggle:checked + .sidebar li{
        padding-left: 2rem;
        text-align: left;
    }
    
    #nav-toggle:checked + .sidebar li a {
        padding-left: 1rem;
    }

  
    #nav-toggle:checked + .sidebar li a span:last-child{
        display: inline;
    }
   
    #nav-toggle:checked ~ .main-content header{
        margin-left: 0rem !important;
    }
    
    
    
    
}

@media only screen and  (max-width: 568px){
    .cards{
        grid-template-columns: 100%;
    }

    .cards-o{
        grid-template-columns: 100%;
    }

    .recent-grid{
        grid-template-columns: 100%;
    }
  
    .tarefa-grid{
        grid-template-columns: 100%;
    }
    .tarefa-grid-op{
        grid-template-columns: 100%;
    }

    .cards-f{
        grid-template-columns: 100%;
    
    }    
    
    .cod-barra{
        grid-template-columns: 100%;
    }
    .user-wrapper{
        display: none;
    }



    header h2{
        display: flex;
        align-items: center;
    }

    header h2 label{
        display: inline-block;
        text-align: center;
        background:  var(--main-color);
        padding-right: 0rem;
        margin-right: 1rem;
        height: 40px;
        width: 40px;
        border-radius:50%;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content: center !important;
    }

    header{
        width: 100% !important;
        left:0 !important;
       
    }
  

    .search-wrapper{
        display: none;
    }

    .user-wrapper{
        display: none;
    }

    .sidebar-brand{
        display: none;
    }

    #nav-toggle:checked + .sidebar{
        left:0 !important;
        z-index:100;
        width:300px;
    }

   
    #nav-toggle:checked + .sidebar li{
        padding-left: 2rem;
        text-align: left;
    }
    
    #nav-toggle:checked + .sidebar li a {
        padding-left: 1rem;
    }

  
    #nav-toggle:checked + .sidebar li a span:last-child{
        display: inline;
    }
   
    #nav-toggle:checked ~ .main-content header{
        margin-left: 0rem !important;
    }
    
    
}