table td {
    padding:0;
    margin:0;
}

.divTable {
    width:100%;
    display:flex;
    flex-direction: column;
}
.divTable .row {
    width:100%;
    padding-top:3px;
    padding-bottom:3px;
    border-bottom: thin solid gray;
    display: table-column;
    flex-direction: column;
}
.divTable .row:hover {
    background-color: #ccc;
}
.divTable2 {
    width:100%;
    display:flex;
    flex-direction: column;
}
.divTable2 .row {
    width:100%;
    padding-top:3px;
    padding-bottom:13px;
    display: flex;
    flex-direction: column;
}
.divTable2 .row:hover {
    color:blue;
    /*background-color: #ccc;*/
}


.tabla-formato1{
    width:100%;
    border-collapse: collapse;
    font-size: 14px;
    overflow: hidden;
}
.tabla-formato1 th{
    background-color: #1c2531;
    color:white;
    padding:3px;
    text-align: center;
    border:thin solid #ccc;
}
.tabla-formato1 tr.par {
    background-color: #eee;
}
.tabla-formato1 tr.impar {
    background-color: #ccc;
}
.tabla-formato1 tr:hover{
    transition-duration: 0.6s;
}
.tabla-formato1 td{
    border:  thin solid #eee !important;
    overflow: hidden;
}
.tabla-formato1 td input[type="text"] {
    width:99%;
}
.tabla-formato1 td input[type="date"] {
    
}
.tabla-formato3{
    width:100%;
    border-collapse: collapse;
    font-size: 14px;
    overflow: hidden;
}
.tabla-formato3 th{
    background-color: #ddd;
    color:black;
    padding:3px;
    text-align: center;
}
.tabla-formato3 td{
    border:  thin solid #ddd;
    overflow: hidden;
}
.tabla-formato3 td input[type="text"] {
    width:100%;
}
.tabla-formato3 td input[type="date"] {
    
}
.tabla-formato2{
    width:100%;
    font-size: 12px;
}
.tabla-formato2 th{
    background-color: #1c2531;
    color:white;
    padding:3px;
    text-align: center;
}
.tabla-formato2 td{
    border:  none;
}
.tabla-formato2 td input[type="text"] {
    width:99%;
}
.tabla-formato2 td input[type="email"] {
    width:99%;
}
.tabla-formato2 td  span  {
    color: red;
    font-style: italic;
    min-height: 15px;
    display:block;
}
.tabla-formato2 input[type="text"], input[type="date"], select {
    border-radius: 0px;
    font-size: 12px;
}

/*DIV TABLE 2*/
.div-table2{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  margin-bottom: 25px;
  font-size: 14px;
  background-color:#eee;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 1px 1px 8px gray;
}

.div-table2 .row{
    width:100%;
    display: flex;
    flex-direction: row;
    font-size: 12px;
    align-items:  center;
    border: thin solid #ccc;
}
.div-table2 .row input, select, textarea  {
    border-radius: 0px;
    margin-bottom: 0px;
}
.div-table2 .row .span{
    color:red;
    font-style: italic;
    font-size:11px;
    height: 7px;
}
.div-table2 .row textarea{
    min-height: 100px;
    width:95%;
}
.div-table2 .column{
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    padding:6px;
}
.div-table2 .column button{
    height: 28px;
}
.div-table2 .row .label{
    min-width: 400px;
    display:block;
}

/*TABLA LISTA 1*/
.tablaLista1{
    border: thin solid gray;
    border-top:     1px  solid blue;
    border-bottom:  1px  solid black;
    border-collapse: collapse;
    font-size:14px;
    width:90%;
    margin:auto;
}
.tablaLista1 td {
    border: thin solid gray;
    padding:3px;
}
.tablaLista1 tr:hover {
    background-color: #eee;
}
.tablaLista1 th {
    border: thin solid gray;
    border-bottom: 1px  solid black;
    background-color: white;
    color:gray;
    padding:3px;
}
@media only screen and (max-width: 800px){
        .div-table2{
          width: 300px;
        }
        .div-table2 .row{
            flex-direction: column;
            align-items:  flex-start;
        }        
        .tablaLista1{
            font-size:12px;
        }           
        .tabla-formato1{
            font-size: 12px;
        }
        .tabla-formato1 input[type="number"]{
            font-size:12px;
        }
}

/*TABLA FORMATO 4*/
.tabla-formato4{
    width:100%;
    border-collapse: collapse;
    font-size: 14px;
    overflow: hidden;
}
.tabla-formato4 th{
    background-color: #1c2531;
    color:white;
    padding:3px;
    text-align: center;
}
.tabla-formato4 tr.par {
    background-color: #eee;
}
.tabla-formato4 tr.impar {
    background-color: #ccc;
}
.tabla-formato4 td{
    border:  none;
    overflow: hidden;
}
.tabla-formato4 td input[type="text"] {
    width:100%;
}
.tabla-formato4 td input[type="date"] {
    
}


/*TABLA PARA ESTUDIANTES AGENDA*/
.tabla-formato5{
    width:90%;
    border-collapse: collapse;
    font-size: 14px;
    overflow: hidden;
    margin:auto;
}
.tabla-formato5 th{
    background-color: #f1f1f1;
/*    background-color: #1c2531;*/
    color:black;
    padding:3px;
    text-align: center;
    border:thin solid #ccc;
}
.tabla-formato5 tr.par {
    background-color: #eee;
}
.tabla-formato5 tr.impar {
    background-color: #ccc;
}
.tabla-formato5 tr:hover{
    background-color: #fafafa  !important;
    transition-duration: 0.6s;
}
.tabla-formato5 td{
    overflow: hidden;
    padding:3px;
    border:thin solid #eee;
}
.tabla-formato5 td input[type="text"] {
    width:100%;
}
.tabla-formato5 td input[type="date"] {   
}
.tabla-nota-alumno{
    border: thin solid #ccc;
}
.tabla-nota-alumno td {
    border:none;
    text-align: center;
}

.divx7{
    display:flex !important;
    flex-direction: column;
}
.divx7 row {
    width:100% !important;
    min-height: 35px;
    margin:2px !important;
    border:thin solid black !important;
    display:flex !important;
    flex-direction: row !important;
    justify-content: flex-end;    
}

.divx7 column {
    padding:2px;
    border:thin solid red;
}

.divx7 column-right {
    
};

.table-formato7{
    margin:auto;
}
.table-formato7{
    border-collapse: collapse;
}
.table-formato7 td{
    padding:5px;
    border:thin solid gray;
}
.table-formato7 th{
    padding-top:15px;
    padding-bottom: 3px;
}

.table-formato8{
    width:96%;
    background-color: white !important;
    margin-left: auto;
    margin-right: auto;
    margin-top:20px;
    border-collapse: collapse;
    box-shadow:  2px 2px 5px gray;
}
.table-formato8 th {
    background-color: #f9f9f9;
    padding:5px;
    color: #666;
}
.table-formato8 td {
    border: thin solid #eee;
    background-color: #fff;
    padding:3px;
    color: #777;
}
.table-formato9{
    width:100% !important;
    background-color: white !important;
    border-collapse: collapse;
    font-size: 14px;
}
.table-formato9 th {
    background-color: #f9f9f9;
    padding:5px;
    color: #666;
}
.table-formato9 td {
    border: none;
    background-color: #fff;
    color: #777;
    padding:4px;
}
.table-formato9 td input[type="text"] {
    width:100%;
}
.table-formato9 td label {
    padding-top: 10px;
    font-weight: bold;
    color:#99cccc;
}

.table-formato10{
    width:100% !important;
    background-color: white !important;
    border-collapse: collapse;
    font-size: 18px;
    margin-bottom:15px;
}
.table-formato10 th {
    background-color: #f9f9f9;
    padding:5px;
    color: #666;
}
.table-formato10 td {
    border: none;
    background-color: #fff;
    color: #777;
    padding:2px;
    padding-top:15px;
    padding-bottom:5px;
    padding-left: 15px;
    padding-right: 15px;
}
.table-formato10 textarea {
    background-color: #EEE !important;
}
.table-formato10 select {
    font-size: 18px;
}
.table-formato10 button {
    font-size: 18px;
    
}
.table-formato10 td input {
    width:100%;
    font-size: 18px;
}
.table-formato10 td label {
    padding-top: 10px;
    font-weight: bold;
    color:#99cccc;
}

.table-formato12{
    margin:auto;
}
.table-formato12{
    border-collapse: collapse;
}
.table-formato12 td{
    padding:5px;
    border:thin solid #e3e3e3;
    background-color: white;
    box-shadow: 3px 3px 3px #999;
}
.table-formato12 th{
    padding-top:15px;
    padding-bottom: 3px;
}


.tabla-base-1{
    width:100%;
    border-collapse: collapse;
}
.tabla-base-1 td {
    border:thin solid #eee;
}
.table-formato-sin-lineas{
    width:100% !important;
    background-color: white !important;
    border-collapse: collapse;
}
.table-formato-sin-lineas td {
    border: none !important;
    background-color: #fff;
    color: #777;
    padding:5px;
}
.table-formato15{
    background-color: white;
    border-radius: 10px;
    width:100%;
    font-size: 12px;
    padding: 10px;
    border-collapse: collapse;
}
.table-formato15 tr:hover {
    background-color: #ffc;
    cursor: pointer;
}
.table-formato15 th input[type="text"]{
    max-width: 120px;
}
.table-formato15 th {
    background-color: #ddd;
    text-align: left;
    color: black;
}
.table-formato15 td {
    border:thin solid #ccc;
	padding: 4px;
}

.tabla-formato6{
    width:96%;
    border-collapse: collapse;
    font-size: 18px;
    
}
.tabla-formato6 th{
    background-color: #ddd;
    font-weight: bold;
    text-align: left;
    border:thin solid #aaa;
    padding-left:  15px;
    padding-right: 15px;
}
.tabla-formato6 td{
    background-color: white;
    border:thin solid #aaa;
    padding-left:  15px;
    padding-right: 15px;
}



<!-- TABLA FORMATO 16-->
.table-formato16-container{
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    justify-content: center;
    align-content: center;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    padding:25px;
}
    
.table-formato16 {
  display: flex;
  flex-direction: column;
  width: 400px;
  background-color: white;
}

.table-formato16 .thead a {
  display: block; /* Make the entire row clickable */
  text-decoration: none; /* Remove default link underline */
  color: inherit; /* Inherit text color */
}

.table-formato16 .tbody-scrollable {
  height: 350px;
  overflow-y: auto; /* Enable vertical scrolling */
}

.table-formato16 .tbody-scrollable a {
  display: block; /* Make the entire row clickable */
  text-decoration: none; /* Remove default link underline */
  color: inherit; /* Inherit text color */
}
.table-formato16 tr:hover  {
    background-color: windowtext;
    color: windowframe;
}

.table-formato16 .thead {
  display: flex;
}

.table-formato16 tr {
  display: flex;
  width: 100%;
  cursor: pointer;
}

.table-formato16 th, .td {
  border: 1px solid #ccc;
  padding: 8px;
}

.table-formato16 .th.codigo-postal, .td.codigo-postal {
  width: 75px;
  flex-shrink: 0; /* Prevent shrinking */
}

.table-formato16 .th.departamento, .td.departamento {
  flex-grow: 1; /* Allow the second column to take remaining space */
}

.table-formato16 .th {
  font-weight: bold;
  background-color: #f0f0f0;
}