* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*********************************************************/
.img-before-cuartel::before {
  background-image: url("img/iconos/cuartel.png");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-astillero::before {
  background-image: url("img/iconos/astillero.png");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
/***************************************************************/
.img-before-hondero::before {
  background-image: url("img/hondero.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-arquero::before {
  background-image: url("img/arquero.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-fusilero::before {
  background-image: url("img/fusilero.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-lancero::before {
  background-image: url("img/lancero.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-espadachin::before {
  background-image: url("img/espadachin.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-hoplita::before {
  background-image: url("img/hoplita.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-gigante::before {
  background-image: url("img/gigante.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-girocoptero::before {
  background-image: url("img/girocoptero.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-globo::before {
  background-image: url("img/globo.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-ariete::before {
  background-image: url("img/ariete.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-catapulta::before {
  background-image: url("img/catapulta.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-mortero::before {
  background-image: url("img/mortero.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-medico::before {
  background-image: url("img/medico.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-cocinero::before {
  background-image: url("img/cocinero.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-espartano::before {
  background-image: url("img/espartano.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
/********************************************************/
.img-before-espolon::before {
  background-image: url("img/espolon.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-ballesta::before {
  background-image: url("img/ballesta.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-lanzallamas::before {
  background-image: url("img/lanzallamas.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-vapor::before {
  background-image: url("img/vapor.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-barcoMortero::before {
  background-image: url("img/barco_mortero.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-barcoCatapulta::before {
  background-image: url("img/barco_catapulta.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-lanzamisiles::before {
  background-image: url("img/lanzamisiles.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-submarino::before {
  background-image: url("img/submarino.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-palas::before {
  background-image: url("img/palas.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-portaglobos::before {
  background-image: url("img/portaglobos.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
.img-before-mantenimiento::before {
  background-image: url("img/barco_de_mantenimiento.jpg");
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
}
body {
  background-image: url("../img/vintage-concrete1.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: rgb(91, 46, 2);
  font-size: 16px;
  transition: .3s;
}
header {
  height: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
header a {
  text-decoration: none;
  color: rgb(91, 46, 2);
  padding: 3px 8px;
  display: inline-block;
  font-size: 1.5em;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
}
header a:hover {
  transition: .3s;
  color: rgba(0, 26, 255, 0.9);
}
nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.war-flex-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.war-descripcion {
  max-width: 800px;
  /* padding: 30px; */
  /* font-size: 1.15em; */
}
.center {
  text-align: center;
}
.war-ajustes-generales {
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.war-210 {
  min-width: 210px;
}
.war-flex-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
label {
  display: flex;
  align-items: center; /* Alinea verticalmente el contenido de cada label */
  gap: 3px;
}
.celda-altura {
  height: 30px;
}
.width-celda {
  width: 30px;
}
.input-containers {
  display: flex;
}
.war-contenedor-general {
  padding: 10px;
}
.war-tablas-resultados {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.tabla-resultados-3 {
  background-color: rgb(255, 248, 222, 0.5);
  margin-left: 3px;
}
.order1 {
  order: 1;
}
.order2 {
  order: 2;
}
.order3 {
  order: 3;
}
.tabla-resultados-2, .tabla-resultados {
  /* background-color: rgb(255, 248, 222, 0.5); */
  margin-left: 3px;
}
.tabla-resultados table tr {
  padding: 30px;
}
.tabla-resultados-2 table tr {
  padding: 3px;
}
.top {
  margin-top: 30px;
}
.war-produccion-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 800px;
}
.war-produccion {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 30px;
  flex-wrap: wrap;
}
.ancho {
  width: 400px;
}
.derecha {
  text-align: right;
}
.izquierda {
  text-align: left;
}
.war-flex-row input {
  background-color: rgb(255, 248, 222, 0.5);
  border: none;
  outline: none;
  border-radius: 2px;
  padding: 0 2px;
}
.input-containers input {
  border: 1px solid rgb(223, 211, 171);
  width: 120px;
  height: 40px;
  line-height: 40px;
  padding-left: 7px;
  font-size: 1.1rem;
  background-color: rgb(255, 248, 222, 0.5);
}
.botones-configuraciones {
  max-width: 550px;
}
.botones-configuraciones h2 {
  margin-bottom: 5px;
}
.tabla-guardado tr td button {
  background-color: rgb(255, 248, 222, 0.5);
  border: none;
  /* border-radius: 5px; */
  /* padding: 2px 7px; */
  height: 20px;
}
.tabla-guardado input {
  background-color: rgb(255, 248, 222, 0.5);
  border-radius: 3px;
  border: none;
  height: 20px;
  padding: 2px 0 0 3px;
}
.fa-icon {
  width: 20px;
  height: 20px;
}
button {
  background: transparent;
  border: none;
}
.padding {
  padding-left: 3px;
}
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 100px 0;
}
footer p {
  text-align: center;
}
footer nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
} 
footer nav a {
  text-decoration: none;
  color: var(--colorDeLetra);
}
footer nav a:hover {
  transition: .5s;
  color: rgba(0, 26, 255, 0.9);
}
@media only screen and (min-width: 550px) {
  footer nav {
    flex-direction: row;
    gap: 20px;
  }
}
.altura0 {
  line-height: 0;
}
.botones-configuraciones input {
  background-color: rgb(255, 248, 222, 0.5);
  border: none;
  outline: none;
  border-radius: 2px;
  padding: 0 2px;
  height: 20px;
  width: 150px;
}
.war-ajustes-generales input {
  background-color: rgb(255, 248, 222, 0.5);
  border: none;
  outline: none;
  border-radius: 2px;
  padding: 0 2px;
  height: 20px;
  width: 50px;
  margin-bottom: 2px;
}
.war-gap2 {
  gap: 10px;
}
.war-gap3 {
  gap: 50px;
}
.war-ajustes-generales .derechaAlineacion {
  width: 20px;
  margin-right: 2px;
  margin-bottom: 2px;
}
.war-produccion-container input {
  background-color: rgb(255, 248, 222, 0.5);
  border: none;
  outline: none;
  border-radius: 2px;
  padding: 0 2px;
  height: 20px;
  width: 170px;
}
.iconoEdificios {
  width: 110px;
}
.taberna-consumo {
  height: 23px;
}
.alineacion-vertical {
  align-items: center;
}
.war-ajustes-generales .inp_edi {
  width: 80px;
}
.war-contenedor-titulo h2 {
  text-align: center;
  margin-top: 30px;
}
.war-contenedor-tablas {
  background-color: rgb(255, 248, 222, 0.5);
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: 7px;
}
.ocultar {
  display: none;
}
.totales-container {
  padding: 20px;
  /* min-width: 322px; */
  border-radius: 7px;
}
.center {
  text-align: center;
  margin-top: 10px;
}
.center-2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
.centrado {
  font-weight: bold;
}
.contenedor-resultados-adicionales table tr td:first-child {
  width: 28px;
}
.contenedor-produccion table tr td:first-child {
  width: 28px;
}
.war-ver {
  color: #f64504;
}
span[id^="division-"] {
  padding: 0 5px;
  line-height: 40px;
}

.reproductor {
  margin-bottom: 5px;
}
.astillero-cuartel {
  border: 1px solid rgb(223, 211, 171);
  width: 60px;
  height: 40px;
  line-height: 40px;
  padding-left: 7px;
  font-size: 1.1rem;
  background-color: rgb(255, 248, 222, 0.5);
}
.img-container {
  display: flex;
  align-items: center;
  gap: 5px;
  /* height: 100%; */
}
.selector {
  margin: 15px;
}
.selector select {
  background-color: rgb(255, 248, 222, 0.5);
  border: none;
  outline: none;
  border-radius: 2px;
  padding: 2px 6px;
  height: 20px;
}
.fa-check {
  color: rgb(28, 188, 28);
}
.alineacion-vertical2 {
  width: 120px;
  justify-content: space-between;
}
.alineacion-vertical3 {
  width: 120px;
  justify-content: space-between;
}
.contenedor-gobiernos {
  width: 420px;
}
.imagen-tiempo {
  width: 32px;
  padding-right: 3px;
}
/*Extra Grandes devices (large laptops and desktops, 1200px and up)*/
@media only screen and (max-width: 700px) {
  nav {
    flex-direction: column;
  }   
  header {
    flex-direction: column;
  }
}
@media only screen and (max-width: 1020px) {
  .war-tablas-resultados {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
@media only screen and (max-width: 1600px) {
  .margen-inferior {
    gap: 30px;
  }
  .war-gap {
    margin-bottom: 30px;
    gap: 0;
  }
}

hgroup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.imagen-izq-h1 {
  background-image: url("../img/iconosikariam.png");
  background-size: 16650px;
  background-position: 70% 0;
  width: 150px;
  height: 150px;        
}
h1 {
  text-align: center;
}
h2, h3 {
  margin: 3px 0;
}

.green {
  color: green;
}
.red {
  color: red;
}
.normal {
  color: rgb(91, 46, 2);
}