#footer p.legal {
  margin-bottom: 0;
  font-size: 14px;
  padding-bottom: 3px;
}

/* html {
zoom: 75%;
} */

html,
body {
  margin: 0px;
  padding: 0px;

}

.text-center {
  text-align: center !important;
}


#wrapper {
  padding-bottom: 140px;


}

header {
  color: white;
  padding: 10px;
}

footer {

  width: 100%;
  height: auto;
  position: relative;
  bottom: 0;

}

.container {
  padding: 12px;
}

.custom-combobox {
  position: relative;
  display: inline-block;
}



.custom-combobox-toggle {

  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  padding: 0;



}

.custom-combobox-input {
  margin: 0;
  background-color: white;
  padding-right: 80px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 20px;

}

.custom-combobox-input[disabled] {
  margin: 0;
  background-color: #17a2b8;
  padding-right: 80px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 20px;
}

.not-active {
  pointer-events: none;
  cursor: default;
  background-color: #3695a8;
}

::-webkit-input-placeholder {
  color: LightGray;
}

h4 {
  font-family: "Arial", sans-serif;

  color: #ce7e50;
  font-size: 16;
  text-align: center;

}

#criterios {
  float: left;
}



.ui-icon {
  background-image: url("https://download.jqueryui.com/themeroller/images/ui-icons_D3D3D3_256x240.png");
}

.caja {
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 100;


  color: #ffffff;
  background: #3596A9;
  margin: 0px 0px 4px;
  overflow: hidden;
  padding-left: 10px;
  padding-top: 4px;
  border-radius: 25px 0px 25px 0px;
  -moz-border-radius: 25px 0px 25px 0px;
  -webkit-border-radius: 25px 0px 25px 0px;
  border: 2px solid #ce7e50;
}


.botones {
  width: 100%;
}

.boton {
  display: inline;
}


.link {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 55%;

  text-align: center;
  line-height: 3;
  color: white;
}

.linkDisabled {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 55%;
  margin-right: 0%;
  margin-bottom: 3%;
  text-align: center;
  line-height: 3;
  color: white;
}

li:last-child {
  margin-right: 0;
}

.link,
a:visited,
a:focus {
  background: #3596A9;

}

.linkDisabled {
  background: #1c4750;
}

.link:hover {
  background: #ce7e50;
}


a:active {
  background: #1F5762;
  color: white;
}

label {
  white-space: pre-wrap;
}

/* ------------------------------------------------------------------------------- funcionamiento básico del sistema de pestañas ------------------------------------------------------------------ */
.tab-content {

  display: none;
}

.tab:target .tab-content,
.tab:last-of-type .tab-content {
  display: block;
}

.tab:target~.tab:last-of-type .tab-content {
  display: none;
}

/* parámetros para configurar las pestañas */
:root {
  --tabs-border-color: #ce7e50;
  --tabs-border-size: 2px;
  --tabs-text-color: white;
  --tabs-dark-color: #2c7786;
  --tabs-lite-color: #3596A9;
  --tabs-width: 150px;
  --tabs-height: 50px;
}

/* aspecto básico */
/*body {
  font-family: sans-serif;
  line-height: 1.2;
}
*/


a {
  color: inherit;
  text-decoration: none;
}

.tabs * {
  box-sizing: border-box;
}


/* esto es para posicionar las pestañas correctamente */
.tab-container {
  position: relative;
  padding-top: var(--tabs-height);
  /* en esta zona colocaremos las pestañas */
}

#tab1>a {
  --tabs-position: 0;
}

#tab2>a {
  --tabs-position: 1;
}

.tab>a {
  text-align: center;
  position: absolute;
  width: calc(var(--tabs-width));
  height: calc(var(--tabs-height) + var(--tabs-border-size));
  top: 0;
  left: calc(var(--tabs-width) * var(--tabs-position));
  /* posición de cada pestaña */
}

/* ------------------------------------------------------------------------- más aspecto ----------------------------------------------------------------*/
.tabs {
  padding: 10px;
  color: var(--tabs-text-color);
}

.tab-content {
  background-color: var(--tabs-text-color);
  padding: 20px;
  border: var(--tabs-border-size) solid var(--tabs-border-color);
  border-radius: 0 0 10px 10px;
  position: relative;
  z-index: 100;
}

.tab>a {
  background-color: var(--tabs-dark-color);
  padding: 10px;
  border: var(--tabs-border-size) solid var(--tabs-border-color);
  border-radius: 10px 10px 0 0;
  border-bottom: 0;
}

.tab:target>a,
.tab:last-of-type>a {
  background-color: var(--tabs-lite-color);
  z-index: 200;
}

.tab:target~.tab:last-of-type>a {
  background-color: var(--tabs-dark-color);
  z-index: 0;
}


.box img {
  width: 100%;
  height: auto;
}

@supports(object-fit: cover) {
  .box img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}