/*
    Layout para pantalla de formación del usuarios
*/
.escritorio {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  scrollbar-color: var(--scroll-bar-color);
  overscroll-behavior: contain;
}

.front .main-footer {
  margin-top: 0;
}

/* Table fields solo en front */
.table-view .input-number {
  width: 70px;
}

.table-view .input-date {
  width: 140px;
}

.table-view .input-comment {
  width: 250px;
}

.table-view .table-select {
  width: auto;
  display: inline-block;
}

.table-view .select-estados {
  width: 180px;
}

/*
#15839 - No se alcanzan a visualizar todos los campos adicionales en Calificaciones
Hack tabla de calificaciones
Cuando se configura TOYOTA_EXTRA_TABLE_FIELDS es muy larga y no se puede ver bien
Solucion original fue que sea scrolleable en el X
*/
#tcalif-form {
  overflow-x: auto;
  padding-bottom: 5px;
}

/*
El efecto scrolleable no funciona si los headers son sticky
Se deshabilita solo para esta tabla
*/
#tcalif-form .table-condensed.table-view thead {
  position: relative;
  top: 0;
}

@media (max-width: 1200px) {
  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin: 0.25rem 1rem;
    padding: 0.5rem 0;
    display: block;
    border-bottom: 2px solid #999;
  }

  td {
    /* Behave  like a "row" */
    display: block;
    padding: 0.5rem 0;
    text-align: left !important;
    width: auto !important;
  }

  td:before {
    content: attr(data-heading);
    display: inline-block;
    width: 15rem;
    margin-right: 0.5rem;
    color: #848181;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .input-group .input-group-sm .filter-input-group {
    width: auto !important;
  }
}