/*
----------------------------------------------------------------------------------------------------------
                                                GENERAL
----------------------------------------------------------------------------------------------------------
*/
html {
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #FFFDEF;
}

#login {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#login .medio {
    flex: 80%;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* height: 50%; */
    max-height: 85%;
    /* position: sticky; */
    /* width: 111px; */
}

#login .login-container {
    flex: 1;
    background-color: #FFFDEF;
    width: 50%;
    height: 77%;
    /* margin: 5% auto; */
    /* top: 14%; */
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    /* position: fixed; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#login .login-container .login-form {
    width: 55%;
    text-align: left;
    /* margin-bottom: 50px; */
    /* margin-top: 10px; */
    display: flex;
    /* position: absolute; */
    /* top: 25%; */
    /* left: 10%; */
    transform: translate(0%,0%);
    transition: all .4s ease;
    flex-direction: column;
    flex-wrap: wrap;
}

#login .login-container .login-form .image-content {
    max-width: 100%; /* Asegúrate de que la imagen no sobrepase el ancho de su contenedor */
    height: auto; /* Esto mantendrá la proporción de la imagen */
    flex: 1;
}

#login .login-container .login-form .image-content img {
    max-width: 75%
}

#login .login-container .login-form .input-group {
    flex: 1;
    /* border: 14px; */
    display: flex;
    flex-direction: column;
    padding-bottom: 2%;
}

#login .login-container .login-form .input-group label {
    /* display: block; */
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 100%;
}

#login .login-container .login-form .input-group input {
    /* width: calc(100% - 20px); */
    padding: 2%;
    /*border: 1px solid #000;
    border-radius: 23px;*/
    /* height: 39%; */
}

#login .login-container .login-form .input-group button {
    background-color: #c69c6d;
    color: rgb(0, 0, 0);
    /* padding: 2%; */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: medium;
    width: 98%;
    outline: none;
    padding: 10px 30px;
    margin: 10px;
   /* font-family: camel;*/
    text-transform: uppercase;
    transition: all .4s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

#login .login-container .login-form .input-group button::after {
    content: "";
    background: rgb(240,240,240,.8);
    left: 0;
    top: 100%;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .4s cubic-bezier(0.19, 1, 0.22, 1);
}

#login .login-container .login-form .input-group button:hover {
    background-color: #b88a65;
}

#login .container {
    flex: 1;
    /* top: 14%; */
    /* position: absolute; */
    width: 50%;
    /* left: 55%; */
    height: 77%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

#login .container .login-content {
     width: 10%; 
}

#login .container .image-content {
    flex: 1;
    /* width: 40%; */
    text-align: right;
    /* position: absolute; */
    /* top: 12%; */
    /* left: 60%; */
    transform: translate(0%,0%);
    transition: all .4s ease;
    display: contents;
}

#login .container .image-content img {
    max-width: 75%;
    max-height: 100%;
}

.header {
    background-color: #004236;
    color: white;
    text-align: center;
    padding: 20px 0;
}

h1, h2, h3 {
    margin: 0;
    line-height: 1.2;
}

h2, h3 {
    font-size: 0.9rem;
}

.top-rectangle {
    flex: 10%;
    /* position: fixed; */
    /* top: 0; */
    display: flex;
    height: 10%;
    width: 100%;
    background-color: #004236;
    /* padding: 10px; */
    text-align: left;
    flex-direction: row;
    flex-wrap: nowrap;
    /* align-content: center; */
    justify-content: flex-start;
    align-items: center;
}

.bottom-rectangle {
    flex: 10%;
    /* position: fixed; */
    /* bottom: 0; */
    height: 10%;
    width: 100%;
    background-color: #004236;
    /* padding: 10px; */
    text-align: center;
    /* position: fixed; */
    bottom: 0;
}

.left-rectangle{
    position: fixed;
    height: 100%; 
    width: 200px;
    background-color: #005344;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 20px;
    text-align: left;
  }

#reseta .login-container {
    background-color: rgba(255, 255, 255, 0);
    width: 20px;
    margin-left: 5%; /* Alineado a la izquierda con un margen */
    padding: 20px;
    top: 100;
    box-shadow: 0 0 10px rgba(131, 94, 94, 0);
}
/*.container {
}

.login-content {
   
}

.image-content {
    
}
*/
.image-content img {
    max-width: 100%; /* Asegúrate de que la imagen no sobrepase el ancho de su contenedor */
    height: auto; /* Esto mantendrá la proporción de la imagen */
}

.image-content2 {
    width: 100%; /* O el ancho que prefieras para tu imagen */
    text-align: right; /* Alinea tu imagen a la derecha */
    transform: translate(0%,0%);
    transition: all .4s ease;
}

.image-content2 img {
    max-width: 100%; /* Asegúrate de que la imagen no sobrepase el ancho de su contenedor */
    height: auto; /* Esto mantendrá la proporción de la imagen */
}

.contact-form{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: camel;
    font-size: 20px;
    width: 55%;
}

/*form{
    width: 30%; /* O el ancho que prefieras para tu imagen *//*
    text-align: left; /* Alinea tu imagen a la derecha *//*
    margin-bottom: 50px;
    margin-top: 10px;
    display: flex;
    position: absolute;
    top: 25%;
    left: 20%;
    transform: translate(0%,0%);
    transition: all .4s ease;
}
*/

.login-form {
}

button{
    outline: none;
    color: rgb(0, 0, 0);
    padding: 10px 30px;
    font-size: 10px;
    margin: 10px;
    /*font-family: camel;*/
    text-transform: uppercase;
    cursor: pointer;
    transition: all .4s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
button::after{
    content: "";
    background: rgb(240,240,240,.8);
    left: 0;
    top: 100%;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .4s cubic-bezier(0.19, 1, 0.22, 1);
}
button:hover::after{
    top: 0%;
}
button:hover{
    color: #000f11;
}

input[type="text"],
input[type="password"]{
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ced4da;
  border-radius: 1px;
  align-items: center;
  left: 20%;
}

img[alt="SIEBIMSS2"]{
    margin-bottom: 60px;
}

form[id="escan"]{
    left: 35%;
}

.login-form.MATRICULA{
    height: 50%;
}

.container2 {
    padding-top: 225px;
    margin-bottom: auto;
  }


 .container2 .navbar-nav {
    text-align: left;
    left: -40px
  }

.navbar-nav .menu{
    line-height: 20px;
    font-size: 17px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.navbar-nav .menusuario{
    line-height: 20px;
    font-size: 20px;
    box-sizing: border-box;
    margin-bottom: 30px;
    padding-right: 120px;
    padding-left: 10px;
}

.navbar-nav .menu > a,
.navbar-nav .menusuario > a{
    text-decoration: none;
    color: #FFFFFF;
}

.active{
    background-color: #004236;
    border-radius: 0px 20px 20px 0px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/*
----------------------------------------------------------------------------------------------------------
                                                GENERAL
----------------------------------------------------------------------------------------------------------
*/

/*
----------------------------------------------------------------------------------------------------------
                                                USUARIO
----------------------------------------------------------------------------------------------------------
*/

 /* Estilos para la ventana emergente de confirmación */
#usuario {
    z-index: 1;
    display: flex;
    position: absolute;
    height: 100%;
    width: -webkit-fill-available;
    /* top: 11%; */
    /* margin-left: 0%; */
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
}

#usuario .medio {
    flex: 90%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#usuario .medio .contenedor {
    display: flex;
    width: 90%;
    height: 90%;
    /* top: 5%; */
    /* left: 10%; */
    background-color: white;
    border-radius: 20px;
    margin-bottom: 10px;
    border: 4px solid black;
    position: relative;
    overflow: scroll;
}

#usuario .medio .contenedor .elemento1 .formular .input-group {
    flex: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#usuario .medio .contenedor .elemento1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#usuario .contenedor .elemento1 #registrarEquipoForm .formular .medio .elemento2,
#usuario .contenedor .elemento1 #modificarEquipoForm .formular .medio .elemento2{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#usuario .contenedor .elemento1 #registrarEquipoForm .formular .medio .input-group,
#usuario .contenedor .elemento1 #modificarEquipoForm .formular .medio .input-group{
    flex: 1;
    display: flex;
    align-items: center;
    width: 80%;
    justify-content: space-between;
}

#usuario .contenedor .elemento1 #registrarEquipoForm .formular .input-group  button[type="submit"],
#usuario .contenedor .elemento1 #modificarEquipoForm .formular .medio .input-group button[type="submit"]{
    flex: 0.20;
    left: 0%;
    background-color: #c69c6d;
    border: none;
    cursor: pointer;
    border-radius: 40px;
    outline: none;
    color: rgb(0, 0, 0);
    padding: 10px 30px;
    font-size: 10px;
    margin: 10px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#usuario .contenedor .elemento1 #registrarEquipoForm .formular .input-group  button::after,
#usuario .contenedor .elemento1 #modificarEquipoForm .formular .input-group  button::after {
    content: "";
    background: rgb(240,240,240,.8);
    left: 0;
    top: 100%;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .4s cubic-bezier(0.19, 1, 0.22, 1);
}

#usuario .medio .contenedor .elemento2 .tabla .botones .input-group .input-group .Agrega {
    font: inherit;
    outline: none;
    color: rgb(0, 0, 0);
    padding: 10px 30px;
    font-size: 10px;
    border: none;
    margin: 10px;
    /* font-family: camel; */
    text-transform: uppercase;
    cursor: pointer;
    transition: all .4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    background-color: #c69c6d;
}

#usuario .medio .contenedor .elemento1 .tabla .botones .input-group .input-group button::after{
    content: "";
    background: rgb(240,240,240,.8);
    left: 0;
    top: 100%;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .4s cubic-bezier(0.19, 1, 0.22, 1);
}
#usuario .medio .contenedor .elemento1 .tabla .botones .input-group .input-group button:hover::after{
    top: 0%;
}
#usuario .medio .contenedor .elemento1 .tabla .botones .input-group .input-group button:hover{
    color: #000f11;
}

#usuario .medio .contenedor .elemento2 .tabla {
    height: -webkit-fill-available;
    width: -webkit-fill-available;
}

.table-green .th-green {
            position: sticky;
            top: 0;
            color: #fff;
            z-index: 100; /* Asegurar que el encabezado esté encima */
        }
        

.modalH .modal-contentH .modal-footerH button .btnh,
.modalH .modal-contentH .modal-bodyH .input-groupH button .btnh{
    outline: none;
    /* color: rgb(0, 0, 0); */
    padding: 10px 30px;
    /* font-size: 10px; */
    /* margin: 10px; */
    font-family: camel;
    /* text-transform: uppercase; */
    cursor: pointer;
    /* transition: all .4s ease; */
    position: relative;
    overflow: hidden;
    z-index: 2;
}

  .elemento1{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra horizontalmente los divs hijos */
    max-width: 50%;
  }

  .elemento1 .formular{
    flex: 1;
    display: flex; /* Aplica el modelo de caja flexible */
    flex-direction: column;
    justify-content: center; /* Centra horizontalmente los divs hijos */
    align-items: center; /* Centra verticalmente los divs hijos */
    position: relative;
    top: 3%;
  }

.elemento1 .formular a{
    flex: 1;
    color: black;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 30px;
}

.elemento1 .formular .input-group{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
  }
  
  .elemento1 .formular .input-group > label[id="texto"] {
    margin-right: 10px; /* Añade espacio entre los contenedores de texto y los elementos de la lista */
    padding: 5px;
    margin-bottom: 10px;
  }
  
.elemento1 .input-group > label[id="contenedor-texto"] {
    width: 57%;
    padding: 6px;
    border: 2px solid #000000;
    border-radius: 15px;
    /* margin-bottom: 15px; */
    background-color: white;
    overflow: hidden;
    min-height: 85%;
}

  .elemento1 .tabla{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 20px;
    padding-right: 20px;
  }

.elemento1 .tabla .tablas{
    flex: 1;
    overflow-y: scroll;
    max-height: 150px;
}

  .elemento1 .tabla .tablas table{
    flex: 1;
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse; /* Combina los bordes de las celdas para un aspecto más limpio */
    
  }

  .elemento1 .tabla table th,
  .elemento1 .tabla table td{
        padding: 8px;
        text-align: center; /* Alinea el texto al centro en todas las celdas */
  }

  .elemento1 .tabla table td {
        border-bottom: 1px solid #000000; /* Elimina el borde inferior de todas las celdas, excepto las de la última fila */
    }
    .elemento1 .tabla table th {
        border-bottom: 3px solid #000000; /* Elimina el borde inferior de todas las celdas, excepto las de la última fila */
    }

    .elemento1 .tabla table th::before, .elemento1 .tabla table th::after {
        content: '';
        width: 10px; /* Ancho del círculo */
        height: 10px; /* Altura del círculo */
        background-color: black; /* Color del círculo */
        border-radius: 50%; /* Establece la forma del círculo */
        position: absolute; /* Permite posicionar los círculos */
        bottom: -5px; /* Posiciona los círculos en la parte inferior */
      }
      .elemento1 .tabla table th::before {
        left: -5px; /* Posiciona el círculo izquierdo */
      }
      .elemento1 .tabla table th::after {
        right: -5px; /* Posiciona el círculo derecho */
      }

  .elemento1 .tabla .botones .input-group{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .elemento1 .tabla .botones .input-group > button[type="submit"]{
    width: 200px;
  }

  

.elemento2 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 50%;
}

  .elemento2 .marco {
    width: 75%; /* Ancho del marco */
    height: 65%; /* Altura del marco */
    border-radius: 50%;
    overflow: hidden; /* Oculta el contenido que se desborda del marco */
    border: 4px solid black; /* Añade un borde al marco */
    display: flex; /* Utiliza flexbox para centrar la imagen */
    justify-content: center; /* Centra horizontalmente la imagen */
    align-items: center; /* Centra verticalmente la imagen */
  }

  .elemento2 .marco .image-content2 img{
    max-width: 100%; /* La imagen se ajustará al 100% del ancho del marco */
    max-height: 100%; /* La imagen se ajustará al 100% de la altura del marco */
    display: block; /* Elimina el espacio en blanco debajo de la imagen */
  }
/*
----------------------------------------------------------------------------------------------------------
                                            USUARIO
----------------------------------------------------------------------------------------------------------
*/
/*
----------------------------------------------------------------------------------------------------------
                                            EQUIPOS BIOM
----------------------------------------------------------------------------------------------------------
*/

#class {
    z-index: 1;
    display: flex;
    position: absolute;
    height: 100%;
    width: -webkit-fill-available;
    /* top: 11%; */
    /* margin-left: 0%; */
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
}

#class .medio {
    flex: 90%;
    width: 100%;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
}

#class .contenedorEBM {
    display: flex;
    width: 86%;
    height: 76%;
    top: 12%;
    left: 10%;
    background-color: white;
    border-radius: 20px;
    margin-bottom: 10px;
    border: 4px solid black;
    position: absolute;
    overflow: hidden;
}

#class .contenedorEBM .tabla{
    overflow-y: scroll;
    width: 100%;
  }

#class .contenedorEBM .tabla table{
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse; /* Combina los bordes de las celdas para un aspecto más limpio */
  }

#class .contenedorEBM .tabla table td{
        padding: 8px;
        text-align: left; /* Alinea el texto al centro en todas las celdas */
  }

#class .contenedorEBM .tabla table td[class="equipo"]{
    width: 86%;
    }

#class .contenedorEBM .tabla table td button[type="submit"]{
    width: 100px;
    background-color: #c69c6d;
    color: rgb(0, 0, 0);
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    }

#class .contenedorEBM .tabla table td {
        border-bottom: 3px solid #000000; /* Elimina el borde inferior de todas las celdas, excepto las de la última fila */
    }

#class .contenedorEBM .tabla table th::after {
        content: '';
        width: 10px; /* Ancho del círculo */
        height: 10px; /* Altura del círculo */
        background-color: black; /* Color del círculo */
        border-radius: 50%; /* Establece la forma del círculo */
        position: absolute; /* Permite posicionar los círculos */
        bottom: -5px; /* Posiciona los círculos en la parte inferior */
      }
#class  .contenedorEBM .tabla table th::before {
        left: -5px; /* Posiciona el círculo izquierdo */
      }
#class  .contenedorEBM .tabla table th::after {
        right: -5px; /* Posiciona el círculo derecho */
      }

#class .ima {
    top: 1%;
    left: 20%;
    position: absolute;
}

#class .ElBotones {
    display: flex;
    position: absolute;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: stretch;
    flex-direction: row;
    align-items: flex-end;
    width: 80%;
    /* height: fit-content; */
    top: 90%;
    left: 20%;
}

#class .ElBotones button[type="submit"] {
    flex: 0.20;
    left: 0%;
    background-color: #c69c6d;
    border: none;
    cursor: pointer;
    border-radius: 40px;
    outline: none;
    color: rgb(0, 0, 0);
    padding: 10px 30px;
    font-size: 10px;
    margin: 10px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#class .Elbotones button::after {
    content: "";
    background: rgb(240,240,240,.8);
    left: 0;
    top: 100%;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .4s cubic-bezier(0.19, 1, 0.22, 1);
}
/*
----------------------------------------------------------------------------------------------------------
                                            EQUIPOS BIOM
----------------------------------------------------------------------------------------------------------
*/
#Equipos {
    z-index: 1;
    display: flex;
    position: absolute;
    height: 100%;
    width: -webkit-fill-available;
    /* top: 11%; */
    /* margin-left: 0%; */
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
}

#Equipos .medio {
    flex: 90%;
    max-height: 90%;
    width: 100%;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#Equipos .medio .Arriba {
    flex: 10%;
    width: 80%;
    display: flex;
    align-items: center;
    align-content: center;
    max-height: 10%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#Equipos .medio .Arriba .imaTE {
    flex: 1;
    /* top: 1%; */
    /* left: 20%; */
    /* position: absolute; */
}

#mitabla .tablas1 {
    flex: 50%;
    overflow-y: scroll;
    height: 50%;
}

#mitabla .tablas2 {
    flex: 50%;
    overflow-y: scroll;
}

#Equipos .medio .Arriba input[id="buscador"] {
    flex: 1;
    /* width: 28%; */
    max-width: 35%;
    min-height: 35%;
    /* max-height: 35%; */
    /* top: 3%; */
    /* left: 75%; */
    background-color: white;
    border-radius: 40px;
    /* margin-bottom: 10px; */
    border: 2px solid black;
    position: unset;
}

#Equipos .medio .contenedor {
    display: flex;
    width: 90%;
    height: 80%;
    /* top: 11%; */
    /* left: 4%; */
    background-color: white;
    border-radius: 20px;
    /* margin-bottom: 10px; */
    border: 3px solid black;
    /* position: relative; */
    overflow: auto;
    flex: 80%;
}

#Equipos .medio .contenedor #mitabla {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#Equipos .medio .contenedor .tabla {
    width: 100%; /* Ancho fijo para todas las celdas */
}

#Equipos .medio .contenedor table{
  table-layout: fixed;
  width: 100%;
  margin-bottom: 10px;
  border-collapse: collapse; /* Combina los bordes de las celdas para un aspecto más limpio */
  height: fit-content;
}

#Equipos .medio .contenedor  table td,
#Equipos .medio .contenedor  table th{
      padding: 2px;
      text-align: center; /* Alinea el texto al centro en todas las celdas */
      flex: 1;
       width: 100px; /* Ancho fijo para todas las celdas */

}

#Equipos .medio .contenedor table td button[type="submit"]{
  width: 100px;
  background-color: #c69c6d;
  color: rgb(0, 0, 0);
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  }

#Equipos .medio .contenedor table td,
#Equipos .medio .contenedor table th {
    width: 140px;
    text-align: center;
    border-bottom: 3px solid #000000;
}

#Equipos .medio .contenedor table th {
            position: sticky;
            top: 0;
            z-index: 100; /* Asegurar que el encabezado esté encima */
        }

#Equipos .medio .ElBotones {
    flex: 10%;
    display: flex;
    position: unset;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: stretch;
    flex-direction: row;
    align-items: flex-end;
    width: 80%;
    max-height: 10%;
    /* height: 50px; */
    /* top: 720px; */
    /* left: 250px; */
}

#Equipos .medio .ElBotones button[type="submit"],
#Equipos .medio .ElBotones form button[type="submit"]{
    flex: 1;
    width: 100%;
    left: 0%;
    background-color: #c69c6d;
    border: none;
    cursor: pointer;
    border-radius: 40px;
    outline: none;
    color: rgb(0, 0, 0);
    padding: 10px 30px;
    font-size: 10px;
    margin: 10px;
    text-transform: uppercase;
    transition: all .4s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

#modi {
    z-index: 1;
    display: flex;
    position: absolute;
    height: 100%;
    width: -webkit-fill-available;
    /* top: 11%; */
    /* margin-left: 0%; */
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
}

#modi .medio {
    flex: 90%;
    width: 100%;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
}

#modi .medio .contenedor {
    display: flex;
    width: 90%;
    height: 90%;
    /* top: 5%; */
    /* left: 10%; */
    background-color: white;
    border-radius: 20px;
    margin-bottom: 10px;
    border: 4px solid black;
    position: relative;
    overflow: scroll;
}

#modi .medio .contenedor .elemento1 {
    font: inherit;
    outline: none;
    color: rgb(0, 0, 0);
    padding: 10px 30px;
    font-size: 10px;
    margin: 10px;
    font-family: camel;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    background-color: #c69c6d;
}


----------------------------------------------------------------------------------------------------------
                                            BARRA DESPLAZAMIENTO
----------------------------------------------------------------------------------------------------------
*/
/* Estilos para la barra de desplazamiento */
/* Anchura de la barra de desplazamiento */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  
  /* Fondo de la barra de desplazamiento */
  ::-webkit-scrollbar-track {
    background: #f1f1f100;
    border-radius: 15px;
  }
  
  /* Color de la barra de desplazamiento */
  ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 15px;
  }
  
  /* Al acercar el cursor a la barra de desplazamiento */
  ::-webkit-scrollbar-thumb:hover {
    background: #000000;
  }

/*
----------------------------------------------------------------------------------------------------------
                                            BARRA DESPLAZAMIENTO
----------------------------------------------------------------------------------------------------------
*/
 .form .formular .input-group{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
}

.form  .formular .input-group > label[id="texto"] {
  margin-right: 10px; /* Añade espacio entre los contenedores de texto y los elementos de la lista */
  padding: 5px;
  margin-bottom: 10px;
}
.form .input-group > label[id="contenedor-texto"] {
  width: 200px;
  padding: 6px;
  border: 2px solid #000000;
  border-radius: 15px; /* Establece un valor adecuado para la curvatura */
  margin-bottom: 15px;
  background-color: white;
}