@charset "utf-8";
/* CSS Document */
html, body {
  height: 100%;
  margin: 0;
}
body {
    background-color: #000000;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    color: #101010;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
header {
    background-image: url(./img/fondo_amarillo.webp);
    background-position: top center;
    min-height: 100px;
}
main {
    background-color: #ffffff;
    padding: 20px;
    flex: 1;
}
p {
    margin: 10px 0px 0px 0px;
    font-size: 1.1rem;
}
h1 {
    font-size: 1.4rem;
    text-align: center;
    margin: 0px 0px 0px 0px;
    color: #000000;
}
h2 {
    font-size: 1.3rem;
    text-align: center;
    margin: 0px 5px 0px 5px;
    color: #000000;
}
h3 {
    font-size: 1.2rem;
    text-align: center;
    margin: 0px;
    font-weight: normal;
}
h4 {
    font-size: 1.1rem;
    text-align: center;
    margin: 0px;
    font-weight: normal;
}
h5 {
    font-size: .8rem;
    text-align: center;
    padding-top: 0px;
    margin-top: 15px;
}
a {
    color:#000000;
    text-decoration: none;
}
form {
    margin-block-end: 0em;
}
input {
    padding: 5px;
    font-size: 18px;
    background-color: #ffffff;
    border-width: medium;
    border-color: #ffc300;
    margin-left: auto;
    margin-right: auto;
}
.input_simulado {
    padding: 5px;
    font-size: 18px;
    font-weight: normal !important;
    background-color: #eeeeee;
    border-width: 2px;
    border-style: inset;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
}
textarea {
    padding: 5px;
    background-color: #eeeeee;
    font-size: 16px;
}
input[type='radio'] {
    transform: scale(1.5);
    accent-color: #ffc800;
    margin: 10px 5px 10px 0px;
}
input[type='file'] {
    font-size: 12px;
}
label {
    font-size: 1em;
    color: #947000;
    font-weight: bold;
}
select {
    padding: 5px;
    font-size: 18px;
    background-color: #eeeeee;
}
#buscaNombre {
    background-image: url('./img/busqueda.webp');
    background-size: contain;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: 280px;
    font-size: 16px;
    padding: 12px 10px 12px 40px;
    border: 1px solid #000000;
}
#myUL {
  list-style-type: disclosure-closed;
  padding: 0;
  margin: 10px;
}
#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 8px;
  width: 290px;
  max-width: 340px;
  font-weight: bold!important;
  text-decoration: none;
  font-size: 14px;
  color: black;
  display: block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#myUL_consulta {
  list-style-type: none;
  padding: 0px;
  margin: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}
#myUL_consulta li a {
  border: 1px solid #929292;
  margin: 5px;
  border-radius: 8px;
  background-color: #f6f6f6;
  padding: 8px;
  width: 280px;
  max-width: 280px;
  font-weight: normal!important;
  text-decoration: none;
  font-size: 16px;
  color: black;
  display: block;
  white-space: normal;
  box-shadow: 0px 5px 10px 0px #0000004d;
}
#myUL li a:hover:not(.header) {
  background-color: #eee;
}
/* Dropdown Button */
.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #ababab;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #434343;
    color: #ffffff;
}
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {background-color: #3e8e41;}
.center {
    text-align: center;
    display: table;
    margin-left: auto!important;
    margin-right: auto!important;
}
.separador {
    border-top: 1px solid #000000;
    margin: 20px 0px 20px 0px;
}
.separador_corto {
    max-width: 50%;
    border-top: 1px solid #000000;
    margin: 5px auto 5px auto;
}
.oculto {
    display: none;
}
.cortarTexto {
    width: 260px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1.1em;
}
.logo {
    max-height: 50px;
    height: 120px;
    width: auto;
    padding-top: 25px;
}
button {
    padding: 2px;
    color: #ffffff;
    padding: 5px 10px 5px 10px;
    margin: 0px 0px 5px 0px;
    border-color: #000000;
    border-style: groove;
    font-size: 1rem;
    font-weight: bold;
}
.boton {
    box-sizing: border-box;
    padding: 2px;
    color: #ffffff;
    padding: 10px 15px 10px 15px;
    margin: 0px 0px 5px 0px;
    border-color: #000000;
    border-style: groove;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
}
.bt_rojo {
    background: linear-gradient(180deg, #ff3c3c 0%, rgb(132, 21, 21) 100%);
    color: #ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.bt_rojo:hover {
    background: linear-gradient(180deg, rgb(255, 159, 159) 0%, rgb(193, 74, 74) 100%);
    color:#ffffff;
}
.bt_verde {
    background: linear-gradient(180deg, #42ff3c 0%, #15841e 100%);
    color: #ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.bt_verde:hover {
    background: linear-gradient(180deg, rgb(159, 255, 178) 0%, #4ac174 100%);
    color:#ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.bt_azul {
    background: linear-gradient(180deg, #3c9aff 0%, #154784 100%);
    color: #ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.bt_azul:hover {
    background: linear-gradient(180deg, #9fc9ff 0%, #4a7ec1 100%);
    color:#ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.bt_morado {
    background: linear-gradient(180deg, #a13cff 0%, #471584 100%);
    color: #ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.bt_morado:hover {
    background: linear-gradient(180deg, #c99fff 0%, #804ac1 100%);
    color:#ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.boton_menu {
    background: linear-gradient(180deg, #212121 0%, #000000 100%);
    padding: 5px;
    margin: 15px 0px 15px 0px;
    border-radius: 10px;
    border-color: #000000;
    border-style: groove;
    font-size: 1rem;
    color: #ffffff;
    font-weight: bold;
    cursor:pointer;
    max-width: 120px;
    text-decoration: none;
    display:inline-flex;
}
.boton_menu:hover {
    background: linear-gradient(180deg, rgb(239, 239, 239) 0%, rgb(100, 100, 100) 100%);
    color:#FFFFFF;
}
.boton_menu_active {
    background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(255, 44, 44) 100%);
    padding: 5px;
    margin: 15px 0px 15px 0px;
    border-radius: 10px;
    border-color: #000000;
    border-style: groove;
    font-size: 1rem;
    color: #ffffff;
    font-weight: bold;
    cursor:pointer;
    max-width: 120px;
    text-decoration: none;
    display:inline-flex;
}
.inputNumber {
    width: 50px;
}
.cajaFormulario {
    width: 360px;
    max-width: max-content;
    border: 3px solid #4e4e4e;
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    background-color: #dfdfdf;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    box-shadow: 0px 3px 5px 0px #000000ba;
}
.cajaFormulario select {
    width: 200px;
    text-overflow: ellipsis;
}
.tabla_datos {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    background-color: #e5e5e5;
    max-width: 95%;
    min-width: 95%;
    box-shadow: 0px 3px 5px 0px #000000ba;
}
.tabla_datos td {
    border: 1px solid #161616;
    padding: 10px 5px 10px 5px;
    text-align: center;
}
.tabla_datos th {
    border: 1px solid #161616;
    padding: 5px 15px 5px 15px;
    text-align: center;
    background-color: #e0e0e0;
    color:#3a3a3a;
    font-size: 1.1em;
}
.tabla_datos tr:nth-of-type(odd) {
    background-color: #f9f9f9;
    }
.tabla_datos tr:nth-of-type(even) {
    background-color: #ececec;
    }
.tabla_datos tr:hover{
    background-color: #d0d0d0;
    }
.tabla_datos input {
    min-width: 260px;
    padding: 5px;
}
title {
    font-size: 1.2rem;
}
.emoji {
    font-size: 32px;
    margin-top: -10px;
    margin-left: -5px;
    position: absolute;
}
.contenedor_video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  /*  padding-top: 75%;  4:3 Aspect Ratio */
  /*  padding-top: 66.66%;  3:2 Aspect Ratio */
}
/* Then style the iframe to fit in the container div with full height and width */
.video_responsivo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.superIndianaFondo_registro {
background-image: url(./img/superIndiana_muestra_celular.webp);
    background-size: 280px;
    background-position-x: right 0px;
    background-position-y: top;
    background-repeat: no-repeat;
    margin: -20px -20px -20px 0px;
    height: 550px;
}
.superIndianaFondo_login {
background-image: url(./img/superIndiana_login.webp);
    background-size: contain;
    background-repeat: no-repeat;
    margin: -20px -20px -20px -20px;
    height: 85vh;
}
.superIndianaFondo_saluda {
background-image: url(./img/superIndiana_saluda.webp);
    background-size: contain;
    background-repeat: no-repeat;
    margin: -20px -20px -20px -20px;
    height: 85vh;
}
.footer {
    background-image: url(./img/fondo_amarillo.webp);
    background-position: bottom center;
    position: relative;
    bottom: 0%;
    width: 100%;
    min-height: 50px;
    color: #000000;
    text-align: center;
    padding: 5px;
    font-size: 14px;
}
.caja {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 10px;
background-color: #e5e5e5;
background: linear-gradient(180deg,rgba(224, 224, 224, 1) 0%, rgba(184, 184, 184, 1) 100%);
display: table;
font-weight: bold;
text-align: center;
max-width: 85%;
padding: 10px;
box-shadow: 0px 3px 5px 0px #000000ba;
}
.zoom {
transition: transform .2s;
}
.zoom:hover {
transform: scale(2);
}
.campos {
    padding: 10px 5px 0px 5px;
    display: inline-grid;
    font-size: 1.1em;
    color: #000000;
    font-weight: bold;
}
input[type='checkbox'] {
    width:20px;
    height:20px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: rgb(255, 255, 255);
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #ffdc00;
  color: #363636;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ffc100;
}
.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #4e4e4e;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  color: #5d5d5d;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
ul.menu {
    margin: 0px;
}
.menu {
        list-style: none;
        padding: 0px 0px 0px 0px;
        font-size: 1.1rem;
        width: 100%;
        text-align: center;
        display: flow-root;
        margin-left: auto;
        margin-right: auto;
    }
.menu li a {
    text-decoration: none;
    color: #000000;
    padding: 10px;
    display: inline-flex;
    background-color: #e6e6e6;
    }
.menu img {
        margin: 5px 15px 0px 15px;
        text-align: center;
    }
.menu li{
        display: inline-block;
        text-align: center;
        border-color: #3a3a3a;
        border-width: 1px;
        border-style:solid;
    }
.menu li a:hover {
    background-color: #ffc400;
    color: #000000;
    }
@media (max-width: 435px) {
.show_orNot {
        display: block !important;
        font-weight: bold;
    }
.cortarTexto {
    width: 180px;
    font-size: 1em!important;
    }
.tabla_datos td {
    padding: 5px 5px 5px 5px;
}
ul.menu {
    margin: 0px;
}
.menu {
        list-style: none;
        padding: 0px 0px 0px 0px;
        font-size: 1.1rem;
        width: 100%;
        text-align: center;
        display: flow-root;
        margin-left: auto;
        margin-right: auto;
    }
.menu li a {
    text-decoration: none;
    color: #000000;
    padding: 10px;
    display: inline-flex;
    background-color: #e6e6e6;
    }
.menu img {
        margin: 5px 15px 0px 15px;
        text-align: center;
    }
.menu li{
        display: inline-block;
        text-align: center;
        border-color: #3a3a3a;
        border-width: 1px;
        border-style:solid;
    }
.menu li a:hover {
    background-color: #ffc400;
    color: #000000;
    }
.activo {
    background-color: #ffbb00!important;;
    color: #000000!important;
    }
}