:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #FFD333;
    --secondary: #F5F5F5;
    --success: #28a745 !important;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #FFFFFF;
    --dark: #3D464D;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Roboto", sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }



  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Dos columnas de igual tamaño */
    gap: 15px; /* Espacio entre las celdas */
}

.grid-container-g {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* Dos columnas de igual tamaño */
  gap: 10px; /* Espacio entre las celdas */
  
}

.grid-item {
    padding: 15px;
    /*border: 1px solid #ccc;*/
    color:#007bff;
    background-color: #4E5880;
    padding: 10px 5px 10px 5px;
    margin: 10px 5px 10px 5px;
    border-radius: 5px; /* Rounded corners */
    vertical-align: middle !important;
    
}
.grid-item-i{
  font-size: 10px !important;
  padding: 1px 5px 10px 5px !important;
  
}
.formatod{
  text-align: center;
  
}


@media (max-width: 512px) {


  .tipoth{
    font-size: 10px;
    padding: 3px !important;
    margin: 150px;
    text-align: center;
    background: #f9f9f9;
    color: #111;
    border: 1px solid #ababab;
    border-collapse: collapse;
  }

  .bodydash{
    font-size: 10px;
    border: 1px solid #ababab;
    border-collapse: collapse;
    text-align: left;
  }  

  .tituloid{
    width: 25px !important;
  }

  .titulofec{
    width: 55px !important;
  }
  .titulosku{
    width: 15px !important;
  }

  .titulonombre{
    width: 180px !important;
  }

  .formato{
    font-size: 10px;
    border: 1px solid #ababab;
    vertical-align: middle !important;
    padding: 5px 1px 5px 1px !important;
  }


  .r{
    
    text-align: center;
    vertical-align: middle !important; 
  }
  
  .ca{
  font-size: 10px;
  color:#DADCE6;
  padding: 10px 5px 10px 5px !important;
  background-color: #4E5880;
  border: 1px solid #4E5880; /* Red solid border */
        border-radius: 5px; /* Rounded corners */
  }
  .cad{
    margin: 10px 15px 10px 15px !important;
    background-color: #4E5880 !important;
  }

  .grid-container {
    grid-template-columns: 1fr 1fr 1fr; /* Una sola columna */
}
.grid-container-g {
  grid-template-columns: 2fr 2fr 2fr 2fr 2fr; /* Una sola columna */
  
}


.grid-item {
  
  /*border: 1px solid #ccc;*/
  color:#007bff;
  font-size: 8px !important;
  padding: 1px 5px 1px 5px !important;
  margin: 10px 5px 10px 5px;

  
}



}
/*tablet vertical*/
@media only screen and (min-width: 400px) and (max-width: 512px) {

}
/*celular horizontal*/
@media only screen and (min-width: 513px) and (max-width: 750px) {
    
}
/*tablet horizontal*/
@media only screen and (min-width: 751px) and (max-width: 820px) {
     
}
@media (min-width: 992px) {
  
}

@media (max-width: 1250px) {
  
}
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    
}

@media only screen and (min-width: 1000px) and (max-width: 1250px) {

}