*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Expressway Rg";
  margin: 0;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  scrollbar-color: #888 #f1f1f1;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 3px;
}

html{
  height: 100%;
}

body {
  background-color: rgb(229,229,229) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

span {
  cursor: pointer;
  user-select: none;
}

.select2 {
  width: 100% !important;
  text-align: left !important;
}

.modal-backdrop {
  height: 1000vh;
  width: 100%;
}

.form-control {
  border-radius: 3px !important;
}

.modal {
  padding-right: 0px !important;
}

.myFont {
  font-size: 0.8rem;
}

input[type="date"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 13px;
  box-sizing: border-box;
}

.date-firefox {
  padding: 0px 0px 0px 5px !important;
  line-height: 0 !important;
}

.select2-dropdown {
  z-index: 9999999999 !important;
}

select {
  height: 24px!important;
}

.select2-selection--single {
  height: 24px !important;
}

.pequeno {
  height: 20px !important;
}


.bg-elvira {
  background-color: #F18D24 !important;
}

#wrapper {
  display: grid;
  grid-template-areas: "sidebar topbar" "sidebar main-content";
  grid-template-columns: minmax(auto, max-content) 1fr;
  grid-template-rows: auto 1fr;
  height: 100%;
}

a {
  text-decoration: none !important;
}

.submenu_manuel {
  margin-left: 0.3rem !important;
}

.sidebar-brand {
  height: 100% !important;
  height: fit-content;
}

.navbar {
  min-height: 7vh !important;
}

/*Menu andres*/
.fila-datos {
  margin-left: 0.4rem;
}

.tab-pane {
  padding: 10px;
}

.paginacion {
  width: 100% !important;
  margin-top: 20px;
}

.nav-tabs {
  border-bottom: 1px solid #F18D24;
}

.nav-tabs .nav-item {
  height: 100%;
}

.nav-tabs .nav-link {
  background: rgb(66,170,166);
  color: white;
}

.nav-tabs .nav-link.active {
  color: white;
  border-color: #F18D24;
  background: #F18D24;
}

.nav-link::after {
  background-color: transparent !important;
}

.modal-body {
  color: white;
}

.btn-close {
  color: white;
}

.btn-primary {
  background: #FF6A00;
  border-color: #FF6A00;
}

.btn-primary:hover {
  background:#FF6A00;
}

.btn-light {
  background:#FF9A42;
  border-color:#FF9A42;
  color: white;
}

.btn-light:hover {
  background:#FF9A42;
  border-color:#FF9A42;
  color: white;
}

.card-body {
  padding: 0.5rem 1rem 0.5rem 1rem !important;
}

.form-group {
  margin-bottom: 0.7rem !important;
}

.table {
  margin-bottom: 0px;
}

#wrapper {
  height: 100% !important;
}

body {
  font-family: 'Expressway Rg' !important;
}

select option {
  font-family: 'Expressway Rg',sans-serif !important;
}

#collapseUsuarios p:nth-child(2) {
  display: none;
}

.sidebar-nav-link.active {
  border-bottom: 1px solid white;
}
/*Fin andres*/

span > i, td[class="text-right w-50"] > a > i, td[class="text-right w-25"] > a > i {
  font-size: 20px;
}

th {
  text-shadow: 0.5px 1px 3px #392000;
  letter-spacing: 1px;
}

label {
  text-shadow: 0.5px 1px 3px #392000;
  letter-spacing: 0.3px;
}

i:not([type="button"]) ~ span, i:not([type="button"]) {
  text-shadow: 0.5px 1px 3px #392000;
  letter-spacing: 0.3px;
}

td > a > i:not([type="button"]), td > span > i:not([type="button"]) {
  text-shadow: 1px 1px #000000;
}

/*div > a > img {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}*/

p > a, p[class="user-text-dropdown"] {
  text-shadow: 1px 1px 3px #392000;
}

.invalido {
  background-color: #ffa5a5;
}


@media (max-width: 1601px) {
  .main-list,.main-edit {
    width: 98% !important;
  }
}

@media (max-width: 1440px) {
  .sidebar-container-toggle {
    width: 110px !important;
    transition: all 0.1s;
  }
  i[class="bi bi-chevron-down float-right"] {
    margin-bottom: 6px;
  }
}

@media (max-width: 900px) {
  .main-list,.main-edit {
    margin:0 auto;
  }

  #sidebar-container{
    display: none;
    height: 99vh;
  }

}

@media (max-width: 1300px) {
  .select2 {
    width: 100% !important;
  }
  .form-control {
    width: 100% !important;
  }
  .d-flex.justify-content-between.align-items-center.w-100 {
    height: 70px;
    padding: 0;
    flex-wrap: wrap;
  }
}

@media (min-width: 901px) {
  .burguer-container {
    display: none !important;
  }
  #title {
    margin-left: 1.5rem;
  }
}

@media (max-width: 901px) {
  .centrar-botones {
    display: flex !important;
    justify-content: center !important;
  }

}

#nav-all-container {
  justify-content: center !important;
}

@media (max-width: 900px) {
  .burguer-container {
    display: block !important;
    margin: 0 !important;
  }
  .user-box-container > a, .user-box-container > div {
    margin: 4px;
  }
  #logo-mobile {
    width: 14%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #logo-mobile > img {
    margin-left: 70px;
  }
  #sidebar-container {
    width: 100% !important;
    position: absolute;
    height: 100vh;
  }
  #topbar-container {
    width: 100% !important;
    justify-content: center !important;
    padding-left:20px;
    padding-right:20px;
  }
  #nav-all-container {
    width: 100%;
    display: flex;
    justify-content: space-between !important;
    align-items: center;
    margin: 0px !important;
    padding: 0 !important;
  }
  #navbar-user-dropdown {
    width: 15%;
    justify-content: space-between;
  }
  #main-title-container {
    text-align: center;
  }
  #main-content-container {
    margin: 10px auto !important;
  }
  main {
    padding-top: 20px !important;
    width: 100% !important;
  }
  #main-home {
    background-size: 100% 100% !important;
    background-position: left !important;
    background-repeat: no-repeat;
    width:100vw;
  }
  .modal-content {
    width: 100%;
  }
  .user-box {
    padding: 0 !important;
  }
  .user-box-container {
    padding-right: 24px;
  }
  .user-box-container > i {
    margin: 0px;
  }

}

@media (min-width: 801px) {
  main.edicion-formativa {
    width: 100% !important;
  }
}

@media (max-width: 800px) {
  #wrapper {
    display: block;
  }
  #title {
    margin-left: 0rem !important;
    text-align: center;
  }
  #nav-pagination {
    width: 100%;
  }
  .select2 {
    width: 100% !important;
  }
  .navbar svg, .navbar-navi {
    font-size: 2rem !important;
  }
  main {
    padding-top: 20px !important;
    /*width: 100% !important;*/
  }
  div.d-flex {
    flex-wrap: wrap !important;
  }
  .form-label {
    width: 100% !important;
  }
  main {
    width: 97vw !important;
  }
  #logo-mobile > img {
    margin-left: 52px;
  }
  .form-simetrico {
    width: 70%;
  }
  .form-simetrico > label {
    width: 100%;
  }
  .form-simetrico > select {
    width: 100%;
  }
}

@media (max-width:600px) {
  .user-box-container > a, .user-box-container > div {
    margin: 0px;
  }
  #logo-mobile > img {
    margin-right: 20px;
  }
}

@media (max-width:400px) {
  #logo-mobile > img {
    margin-right: 42px;
  }
}

.abs-fijo{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index:999999999999999999999;
  width:fit-content;
  top:5px;
  height:fit-content;
  }


  #tablas-tutorias th{
    color:white !important;
  }


  select:not(.select2){
    padding:0px !important;
  }

  .pagination{
    margin-top:20px;
  }

  .falta-dato{
    height: 25px;
    width: 25px;
    margin: 0 10px 0 5px;
    background-color: #f6e08c;
    border:1px solid #F18D24;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 25px;
    width: 100%; /* Ancho del select */
    overflow: hidden; /* Oculta el texto excedente */
    text-overflow: ellipsis; /* Agrega puntos suspensivos (...) al final del texto excedente */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  }

  input:disabled{
    background-color: rgb(220, 220, 220) !important;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }


  label.btn-outline-primary{
    color:white !important;
    background-color:rgb(0, 121, 116) !important;
    border-color:rgb(0, 121, 116) !important;
  }

  label.btn-outline-primary:hover,.btn-outline-primary.active{
    background-color:rgb(39, 142, 138) !important;
  }

  .tabla-inclindad th{
    width:10px;
  }
  
  th.rotado {
    white-space: nowrap !important;
    text-align: center !important;
    border-bottom: 0px !important;
    vertical-align: bottom !important;
    border-top: 0px !important;
  }
  
  

  .cabeceras-rotadas tr th:last-child div{
    width: 100%  !important;
    transform: 
    translate(-50px, -117px)
    rotate(316deg) !important;
    text-align: left;
  }

  .cabeceras-rotadas tr th:not(:last-child) div{
    width: 100px  !important;
    transform: 
    translate(-20px, -15px)
    rotate(316deg) !important;
    text-align: left;
  }


  th.rotado > div > span {
    border-bottom: 1px solid #ccc !important;
    padding: 5px 10px !important;
  }


  .actividad{
    height:25px;
    width:25px;
    border:1px solid grey;
    border-radius: 3px;
    text-align: center;
    padding:0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .actividad-marcada{
    font-size: 2em;
  }

  /*.table-responsive{
    max-width:1500px !important;
  }*/

  .cabecera-tabla{
    text-align: center;
    color:rgb(0, 121, 116) !important;
  }

  .progress{

    background-color: transparent !important;

  }

  .modal{
    z-index:9999999999 !important;
  }

  table thead th{
    color:white !important;
  }

  select{
    border:1px solid rgb(212, 212, 212) !important;
  }

  .actividad.completo{
    border: 1px solid grey !important;
  }
  i.completo{
    color:grey !important;
  }

  .actividad.aprobado{
    border: 1px solid green !important;
  }
  i.aprobado{
    color:green !important;
  }
  
  .actividad.suspenso{
    border: 1px solid red !important;
  }
  i.suspenso{
    color:red !important;
  }

  .progress-sm{
    border:1px solid #F18D24;
  }

  .active-color {
    color:#F18D24 !important;
  }

/* Estilos de la animación de carga */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6); /* Color de fondo semi-transparente */
  z-index: 999; /* Asegura que esté por encima del resto de los elementos */
  display: none; /* La capa estará oculta inicialmente */
}

.loader {
  position: fixed !important;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  display: none;
  transform: translate(-50%, -50%);
  z-index:9999999999999;
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.tabla-informe td,.tabla-informe th{
  border:1px solid rgb(0, 121, 116) !important;
  vertical-align: middle;
}

.tabla-inclinada td{
  border-top:1px solid #cecece !important;
  border-bottom:1px solid #cecece !important;
}

.select2-container--default .select2-selection--single,input{
  border:0px !important;
  height:25px !important;
}

.container-fluid{
  padding-right: 0px !important;
  padding-left: 0px !important;

}

.select2-selection__rendered{
  position:unset !important;
}

.description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px; /* Ajusta según sea necesario */
  cursor: pointer;

}


.description.expanded {
  white-space: normal !important;
  max-width: max-content; /* Ajusta según sea necesario */
}