<style>

  .fix{display:none;}

  :root
    {
    --cor1:#2B333E; --cor2:#0082d8; --cor3:#F4B459;
    --branco:#ffffff; --cinzaClaro: #f0f0f0; --cinza: #CCCCCC; --cinzaEscuro: #6D6E6F;
    --bordaCurva:6px;
    --menuSuperiorAltura:50px;
    --menuLateralLarguraG:200px;
    --menuLateralLarguraP:70px;
    }

  body {display:flex; flex-direction:column; background-color:var(--branco); color:var(--cinzaEscuro);}

  a {display:inline; text-decoration:none; color:var(--cor2);}
  a:hover {text-decoration:none; }
  a i:hover {}  /* -webkit-transform: scale(1.2) color: rgba(255, 255, 255, 0.2);*/

  table {width:100%;}

  .grid-header {grid-area:header; z-index:4; background-color:var(--cor1); color:var(--cinzaClaro); }
  .grid-menu {grid-area:menu; z-index:2; background-color:var(--branco);}
  .grid-main {grid-area:main; z-index:1; background-color:var(--cinzaClaro); color:var(--cinzaEscuro); overflow-y:scroll; padding-top:10px; padding-right:10px;}
  .grid-container {display:grid; grid-template-areas:'menu header' 'menu main'; grid-gap:0px; grid-template-columns:var(--menuLateralLarguraG) calc(100% - var(--menuLateralLarguraG)); grid-template-rows:var(--menuSuperiorAltura) 100%; position:fixed; top:0; bottom:0; right:0; left:0;}

  .menuSuperior table td {height:var(--menuSuperiorAltura);}
  .menuSuperior i {font-size:25px; color:var(--branco);}

  .menuLateral tr {color: var(--cinzaEscuro); cursor:pointer;}
  .menuLateral tr:hover {background-color:var(--cinza);}
  .menuLateral hr {margin: 8px;}

  .menuPerfil {width:92%; margin:auto;}
  .menuPerfil table {border-collapse: collapse;}
  .menuPerfil tr td:first-child {width:10px; font-weight:bold; padding-bottom:5px; padding-top: 10px;}
  .menuPerfil tr td:nth-child(2) {border-left: 1px solid var(--cinza); padding-left: 20px;}
  .menuPerfil .card {padding:5px;}

  .corpo {padding: 10px; padding-right: 0px;} 
  .filtro {padding-right: 0px;} 
  
  .cor1 {color:var(--cor1);}                               .cor1:hover {color:var(--cor1);}
  .cor2 {color:var(--cor2);}                               .cor2:hover {color:var(--cor2);}
  .cor3 {color:var(--cor3);}                               .cor3:hover {color:var(--cor3);}
  .branco {color:var(--branco);}                           .branco:hover {color:var(--branco);}
  .cinza {color:var(--cinza);}                             .cinza:hover {color:var(--cinza);}
  .cinzaClaro {color:var(--cinzaClaro);}                   .cinzaClaro:hover {color:var(--cinzaClaro);}
  .cinzaEscuro {color:var(--cinzaEscuro);}                 .cinzaEscuro:hover {color:var(--cinzaEscuro);}

  .warning{color:#F4B459;}

  .fundo1 {background-color:var(--cor1);}                  .fundo1:hover {background-color:var(--cor1);}
  .fundo2 {background-color:var(--cor2);}                  .fundo2:hover {background-color:var(--cor2);}
  .fundo3 {background-color:var(--cor3);}                  .fundo3:hover {background-color:var(--cor3);}
  .fundoBranco {background-color:var(--branco);}           .fundoBranco:hover {background-color:var(--branco);}
  .fundoCinza {background-color:var(--cinza);}             .fundoCinza:hover {background-color:var(--cinza);}
  .fundoCinzaClaro {background-color:var(--cinzaClaro);}   .fundoCinzaClaro:hover {background-color:var(--cinzaClaro);}
  .fundoCinzaEscuro {background-color:var(--cinzaEscuro);} .fundoCinzaEscuro:hover {background-color:var(--cinzaEscuro);}

  .clarear1 {background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));}
  .clarear2 {background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));}

  .pngBranco {filter: brightness(0) saturate(100%) invert(92%) sepia(93%) saturate(0%) hue-rotate(267deg) brightness(104%) contrast(100%);}
  .pngVerde {filter: brightness(0) saturate(100%) invert(22%) sepia(61%) saturate(5568%) hue-rotate(125deg) brightness(93%) contrast(105%);}
  .pngVermelho {filter: brightness(0) saturate(100%) invert(27%) sepia(80%) saturate(7463%) hue-rotate(355deg) brightness(86%) contrast(117%);}

  .font8 {font-size: 8px;}
  .font10 {font-size: 10px;}
  .font12 {font-size: 12px;}
  .font14 {font-size: 14px;}
  .font16 {font-size: 16px;}
  .font18 {font-size: 18px;}
  .font20 {font-size: 20px;}
  .font22 {font-size: 22px;}
  .font24 {font-size: 24px;}
  .font26 {font-size: 26px;}
  .font28 {font-size: 28px;}
  .font30 {font-size: 30px;}

  .arialNarrow {font-family: 'Arial Narrow', Arial;}

  .center {text-align:center;}
  .left {text-align:left;}
  .right {text-align:right;}
  .bold {font-weight:bold;}

  .w100 {width:100%;}
  .margin5 {margin: 5px;}
  .margin10 {margin: 10px;}
  .margin20 {margin: 20px;}
  .padding5 {padding: 5px;}
  .padding10 {padding: 10px;}
  .padding20 {padding: 20px;}

  .border {border: 1px none var(--cinza);}
  .noBorder, .noBorder td {border: none !important;}
  .bordaCurva {border-radius:var(--bordaCurva); -webkit-border-radius:var(--bordaCurva); -moz-border-radius:var(--bordaCurva); -o-border-radius:var(--bordaCurva);}

  div[role="start1"]{color: #333; text-align: center; margin-top:80px; font-weight: bold; font-size: 23px;}
  div[role="start2"]{color: #333; text-align: center; margin-top:10px}
  div[role="system"]{color: #333; display:none;}
  div[role="label"]{color: #aaa; font-size: 12px;}
  div[role="user"]{color: #333;}
  div[role="assistant"]{color: #333;}
  p[role="wait"]{color: #aaa; font-size: 16px; margin-top: 5px;}

  .scroll {display:block;}
  .scroll::-webkit-scrollbar {width: 6px; height: 6px;}
  .scroll::-webkit-scrollbar-button {width:8px; height:8px;}
  .scroll::-webkit-scrollbar-thumb {background: var(--cinzaClaro); border: 10px none #f4f0ed; border-radius: 50px;}
  .scroll::-webkit-scrollbar-thumb:hover {background: var(--cinzaClaro);}
  .scroll::-webkit-scrollbar-thumb:active { background: var(--cinzaClaro);}
  .scroll::-webkit-scrollbar-track {background: #f4f0ed; border: 10px none #f4f0ed; border-radius: 5px;}
  .scroll::-webkit-scrollbar-track:hover {background: #f4f0ed;}
  .scroll::-webkit-scrollbar-track:active { background: #f4f0ed;}
  .scroll::-webkit-scrollbar-corner {background: transparent;}

  /* personalizar bootstrap ------------------------------------------------------ */

  .table {width:100%; border:1px solid #dddddd;}
  .table thead th {background-color:var(--cinzaEscuro); color:var(--cinzaClaro); font-size: 12px; vertical-align: middle;}
  .table tbody tr {background-color:var(--branco); color:var(--cinzaEscuro);}
  .table tbody tr:nth-child(even) {background-color: #fcfcfc;}
  .table tfoot td {background-color:var(--cinzaClaro); color:#666666; font-weight:bold; }
  .table th {padding:4px 6px 4px 6px; border-left:1px solid #dddddd; font-size:14px;}
  .table td {padding:4px 6px 4px 6px; border-left:1px solid #dddddd; font-size:14px; vertical-align:middle;}
  
  .input-group {width:100%; margin-top:5px;}
  .input-group-text {width:60px; font-size:14px; color: #666;}
  .form-floating  {width:100%; margin-top:5px;}
  .form-group label {font-size:11px !important; color:var(--cor1); padding:0px; margin:0px; margin-left:3px;}
  .form-check-label {margin-left:-3px !important;}

  .breadcrumb { padding-left:15px; padding-top:15px; color:var(--branco) !important} 
  .breadcrumb a { color:var(--branco) !important} 
  .breadcrumb span { color:var(--cor2) !important} 

  .modal-header {padding:8px 10px 8px 10px; font-size:20px;}
  
  /* .row{padding-left:20px; padding-right:20px;} */

  /* ajustes de responsividade */ 

  .ocultar600 {visibility: visible; }
  .ocultar800 {visibility: visible; }
  @media screen and (max-width: 600px){.ocultar600 {visibility: hidden; display:none;}}
  @media screen and (max-width: 800px){.ocultar800 {visibility: hidden; display:none;}}
 
  @media screen and (max-width: 800px)
    {
    .grid-main {padding-right: 10px; }
    .row{padding-left:5px; padding-right: 5px;}
     /* .card {padding-right: 20px;} */ 
    }

</style>