header{
    width: 960px;
    height: 100px;
    background-color: #cccccc;
    margin-right: auto;
    margin-left: auto;
}

.boton_subir_nivel{
    background-image: url('Subir de nivel.png');
    background-size: 100% 100%;
    background-repeat:no-repeat;
    height: 30px;
    width: 180px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.boton_subir_nivel:hover{
    transform: scale(1.1);
}

.no-hover:hover {
    transform: none;
}

.contenido {
    width: 960px;
    height: 1079px;
    /*background-color: olivedrab;*/
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    margin-top: -200px;
    /*background-image: url("fondo1.jpg");*/
    }

 #contenido_principal {
    width: 960px;
    height: 1079px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    box-sizing: border-box;
    }

#contenedor1{
    width: 480px;
    height: 100px;
    background-color: orangered;
    float: left;
}
h2{
    text-align: center;
}

h2 a{
    color: black;
    text-decoration: none;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
}

.botonera_general{
    margin-left: auto;
    margin-right: auto;
}

#contenedor2{
    width: 480px;
    height: 100px;
    background-color: black;
    float: right;
}

input, select {
    display: block;
    margin-bottom: 5px;
    width: 210px;
}

form{
    margin-left: auto;
    margin-right: auto;
    width: 210px;
}

/*-----------------Check_usuario----------- */
.center{
    margin-top: auto;
    margin-left: auto;
}


.body_ck{
    margin:0px;
    background-image: url('/img/fondo_principal.PNG');
    background-size: 100% 100%;
}
.header_ck{
    width: 1400px;
    height: 120px;
    background-color: #cccccc;
    margin-right: auto;
    margin-left: auto;
    background-image: url("fondo-top.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
}

#titulo_principal{
    text-align: center;
}
/*-----------------contenedores head----------- */
@font-face {
    font-family: 'TreasureMapDeadhand';
    src: url('fonts/Treamd.ttf') format('truetype');
  }

  @font-face {
    font-family: 'PirataOne-Regular';
    src: url('fonts/PirataOne-Regular.ttf') format('truetype');
  }

.color_letra_blanco_2{
    color:white;
    font-family: 'TreasureMapDeadhand', sans-serif;
    font-size: 20px;
}

.color_letra_blanco{
    color:white;
    font-family: 'PirataOne-Regular', sans-serif;
    font-size: 20px;
}

/* Borde top y derecha */
.gold-border {
    height: 30px;
    width: 200px;
    float: left;
    text-align: center;
    position: relative;
  }
  .gold-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 2px; /* Height for the top border */
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0) 0%, rgba(198, 149, 0, 1) 50%, rgba(255, 215, 0, 0) 100%);
    transform: translateX(-50%);
  }
  .gold-border::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 2px; /* Width for the right border */
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0) 0%, rgba(198, 149, 0, 1) 50%, rgba(255, 215, 0, 0) 100%);
    transform: translateY(-50%);
  }

/* Borde solo top */
.gold-border_top {
    height: 30px;
    width: 200px;
    float: left;
    text-align: center;
    position: relative;
}

.gold-border_top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 2px; /* Height for the top border */
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0) 0%, rgba(198, 149, 0, 1) 50%, rgba(255, 215, 0, 0) 100%);
}

.contenedor1_ck{
    width: 350px;
    height: 120px;
    /*background-color: orangered;*/
    float: left;
    margin: 0px;
}

.contenedor2_ck{
    width: 450px;
    height: 120px;
    /*background-color: black;*/
    float: left;
    margin: 0px;
   }

.contenedor2_ck_izq{
    width: 200px;
    height: 120px;
    float: left;
}

.contenedor2_ck_der{
    width: 250px;
    height: 120px;
    float: right;
}

.input_header{
    width: 150px;
    margin-bottom: 2px;
}

.input_header_mapa{
    background-image: url('mapa.png');
    background-size: 100% 100%;
    background-repeat:no-repeat;
    width: 150px;
    margin-bottom: 2px;
}

.input_header_mapa:hover{
    transform: scale(1.1);
}

.input_header_mensajes{
    background-image: url('mensajes.png');
    background-size: 100% 100%;
    background-repeat:no-repeat;
    width: 150px;
    margin-bottom: 2px;
}

.input_header_mensajes:hover{
    transform: scale(1.1);
}

.input_header_reportes{
    background-image: url('reportes.png');
    background-size: 100% 100%;
    background-repeat:no-repeat;
    width: 150px;
    margin-bottom: 2px;
}

.input_header_reportes:hover{
    transform: scale(1.1);
}

.input_header_ciudad{
    background-image: url('seleccioanr_ciudad.png');
    background-size: 100% 100%;
    background-repeat:no-repeat;
    width: 150px;
    margin-bottom: 2px;
}

.input_header_ciudad:hover{
    transform: scale(1.1);
}

.input_header_salir{
    background-image: url('salir.png');
    background-size: 100% 100%;
    background-repeat:no-repeat;
    width: 80px;
    margin-bottom: 2px;
    float: right;
}

.input_header_salir:hover{
    transform: scale(1.1);
}

.input_header_opciones{
    background-image: url('opciones.png');
    background-size: 100% 100%;
    background-repeat:no-repeat;
    width: 80px;
    margin-bottom: 2px;
    float: right;
}

.input_header_opciones:hover{
    transform: scale(1.1);
}

.boton_ir_edificio{
    background-image: url('ir_edificio.png');
    background-size: 100% 100%;
    background-repeat:no-repeat;
    height: 30px;
    width: 180px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
}

.boton_ir_edificio:hover{
    transform: scale(1.1);
}


.form_header{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    margin-bottom: 0px;
}

.contenedor3_ck{
    width: 480px;
    height: 120px;
    /*background-color: black;*/
    float: right;
    margin: 0px;
    }

.contenedor_principal_ck{
    width: 1400px;
    height: 1500px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}

.cont-top-der-top{
    width: 480px;
    height: 120px;
}

.img_avatar{
    float: right;
}
.cont-top-der-bot{
    width: 480px;
    height: 30px;
}

.cont-top-der-1{
    width: 300px;
    height: 30px;
    float: left;
}

.cont-top-der-1-izq{
    width: 180px;
    height: 120px;
    float: left;
}

.cont-top-der-1-der{
    width: 120px;
    height: 120px;
    float: right;
}

.h2-cont-top-der-1{
    text-align: center;
    margin: 0px;
    font-size: 70%;
}

.h2-cont-top-der-2{
    text-align: center;
    margin: 0px;
}


.cont-top-der-2{
    width: 180px;
    height: 120px;
    float: right;
}

.cont-top-derecha-sub-1{
    width: 180px;
    height: 25px;
    margin-top: 9px;
}

.cont-top-derecha-sub-2{
    width: 180px;
    height: 25px;
    margin-top: 2px;
}

/*-----------------contenedores izq----------- */

.contenedor_izq_ck{
    width: 240px;
    height: 1500px;
    background-color: #E8E497;
    float: left;
    margin: 0px;
    background-image: url("bordes-laterales.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
}

/*-----------------contenedores centrales----------- */
#index_body{
    background-image: url("Fondo index .jpg");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    height: 1536px;
    width: auto;
}


.contenedor_cent_ck{
    width: 920px;
    height: 1430px;
    float: left;
}

.contenedor_cent_mapa_top_datos{
    width: 920px;
    height: 200px;
    float: left;
    margin: 0px;
}
.contenedor_cent_mapa_top_datos_fila_nombres_col{
    width: 920px;
    height: 30px;
    float: left;
    margin: 0px;
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    align-items: center; /* Centra los elementos verticalmente */
}

.contenedor_cent_mapa_top_datos_izq{
    width: 200px;
    height: 100px;
    float: left;
    margin: 0px;
}

.contenedor_cent_mapa_top_datos_izq_caja1{
    width: 200px;
    height: 30px;
    float: left;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.contenedor_cent_mapa_top_datos_izq_caja1_1{
    /* Ajusta el contenido según sea necesario */
    width: 100px;
    height: 20px;
}


.contenedor_cent_mapa_top_datos_izq_caja2{
    width: 200px;
    height: 35px;
    float: left;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.contenedor_cent_mapa_top_datos_izq_caja3{
    width: 200px;
    height: 35px;
    float: left;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.contenedor_cent_mapa_top_datos_cen{
    width: 620px;
    height: 100px;
    float: left;
    margin: 0px;
}

.contenedor_cent_mapa_top_datos_cen_caja1{
    width: 310px;
    height: 100px;
    float: left;
}

.contenedor_cent_mapa_top_datos_cen_caja1_1{
    width: 310px;
    height: 35px;
    float: left;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.contenedor_cent_mapa_top_datos_der{
    width: 100px;
    height: 100px;
    float: left;
    margin: 0px;
}
.contenedor_cent_mapa{
    width: 920px;
    height: 600px;
    background-color: red;
    float: left;
    margin: 0px;
    background-image: url("base0.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
}

.contenedor_cent_bottom{
    width: 920px;
    height: 300px;
    float: left;
    background-color: #a94e2d;
    margin: 0px;
    background-image: url("fondo-contenedor-bot.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    color: white;
}

.contenedor_cent_bottom_parciales{
    width: 920px;
    height: 20px;
    margin-left: 10px;
}
.contenedor_cent_bottom_parciales2{
    width: 920px;
    height: 100px;
}

.datos_usuario1{
    padding: 0px;
    margin: 0px;
    margin-top: 25px;
}
.datos_usuario{
    padding: 0px;
    margin: 0px;
    margin-top: 3px;
}

#div_ciudad_actual{
    margin-top: 15px;
}

.dt_us_div{
    width: 350px;
    height: 25px;
    margin-top: 95px;
}

.p-ataque{
    color: red;
    text-align: center;
}

/*-----------------contenedores der----------- */

.header_grid{
    width: 1590px;
    height: 100px;
    background-image: url("foto_top_1500.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;

}


.contenedor_der_ck{
    width: 240px;
    height: 1500px;
    background-color: #E8E497;
    float: right;
    margin: 0px;
    background-image: url("bordes-laterales.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
}
.aserradero{
    width: 50px;
    position: relative;
    top: 340px;
    left: 650px;
}

.almacen{
    width: 50px;
    position: relative;
    top: 245px;
    left: 495px;
}

.barracones{
    width: 50px;
    position: relative;
    top: 35px;
    left: 480px;
}

.mercado{
    width: 50px;
    position: relative;
    top: 110px;
    left: 570px;
}

.academia{
    width: 50px;
    position: relative;
    top: 70px;
    left: 20px;
}
/*-----------------Grilla----------- */
.body_grilla{
    margin: 0px;
}

.grilla_superior{
    width: 960px;
    height: 960px;
    /*background-color: black;*/
    margin-left: auto;
    margin-right: auto;
}
.grilla_intermedia{
    width: 960px;
    height: 192px;
    /*background-color: red;*/
    margin-left: auto;
    margin-right: auto;
    /*border-bottom: black 1px solid;*/
}
.grilla_inferior{
    width: 191px;
    height: 192px;
    /*background-color: rgb(1, 160, 14);*/
    margin-left: auto;
    margin-right: auto;
    /*border-bottom: black 1px solid;*/
    /*border-left: black 1px solid;*/
    float: left;
}

.imagen_grilla{
    margin-top: 0px;
    width: 136px;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
}


.section_fondo_ciudad {
    width: 960px;
    height: 1079px;
    background-color: olivedrab;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    background-image: url("tribal-wars-2-fondo2.jpg");
}

#div_nombre_ciudad{
    margin-left: auto;
    margin-right: auto;
    width: 180px;
    height: 18.4px;
}
#div_nombre_ciudad h4{
    text-align: center;
    padding: 0px;
    margin: 0px;
    color: brown;
}

#botonera_grid{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    height: 30px;
    }

    .botonera_grid1{
        border: none;
        border-radius: 40%;
        width: 150px;
        background-image: url("ir_ciudad_130.png");
        background-size: 100% 100%;
        background-repeat:no-repeat;
        margin-left: auto;
        margin-right: auto;
    }
    .botonera_grid1:hover{
        cursor: pointer;
        transform: scale(1.1);
    }



.botonera_grid{
    border: none;
    border-radius: 40%;
    width: 150px;
    color: white;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
}
.botonera_grid:hover{
    background-color: goldenrod;
    cursor: pointer;
}

.fondo_mapa{
    width: 1590px;
    height: 1350px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("otro_rumbo_fondo_escalado.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    padding-top: 190px;
}
.form_flechas_grid{
    width: 200px;
    display: inline-block;
    
}

.form_botonera_grid{
    display: inline;
    margin-left: auto;
    margin-right: auto;
    }
.flecha_izq_grid{
    width: 100px;
    height: 75px;
    position: relative;
    top: 390px;
    left: 130px;
}

#botonera_grid_flecha_izq{
    background-image: url("fecha_izq.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    border: 0;
    height: 75px;
    background-color: transparent;
}

.flecha_der_grid{
    width: 100px;
    height: 75px;
    position: relative;
    top: 360px;
    left: 1250px;
}

#botonera_grid_flecha_der{
    background-image: url("fecha_der.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    border: 0;
    height: 75px;
    background-color: transparent;
}

.flecha_bottom_grid{
    width: 100px;
    height: 75px;
    position: relative;
    top: 920px;
    left: 550px;
}

#botonera_grid_flecha_bottom{
    background-image: url("fecha_bottom.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    border: 0;
    height: 75px;
    background-color: transparent;
}

.flecha_top_grid{
    width: 100px;
    height: 75px;
    position: relative;
    top: -250px;
    left: 670px;
}

#botonera_grid_flecha_top{
    background-image: url("fecha_top.png");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    border: 0;
    height: 75px;
    background-color: transparent;
}
/*-----------------Mensajes----------- */

.contenido_mensaje{
    width: 1290px;
    margin-left: auto;
    margin-right: auto;
}
.p_mensaje{
    text-align: justify;
}
.h2_mensaje{
    text-align: left;
}

.p_msn{
    margin: 0px;
    text-align: center;
    color: red;
}
/*-----------------Texto imagen para recursos----------- */

.recursos_general{
    width: 180px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
}

.recursos_texto{
    width: 55px;
    height: 25px;
    float: left;
}

.p_recursos{
    margin: 0px;
    margin-top: 3px;
    text-align: center;
}

.recursos_img{
    width: 25px;
    height: 25px;
    float: left;
}

.h3_costo{
    margin: 0px;
    margin-bottom: 5px;
    text-align: center;
}

.h3_nivel_actual{
    margin: 0px;
    float: left;
    margin-left: 37px;
}

.h3_nivel{
    color: red;
    margin: 0px;
}

.titulo_edificio{
    margin: 0px;
}

.div_lvl{
    width: 165;
    margin-left: auto;
    margin-right: auto;
}

.limite_recursos_h4{
    margin: 0px;
    text-align: center;
}

#lvlo_pozo_arcilla{
    margin: 0px;
}

#lvlo_aserradero{
    margin: 0px;
}

#lvlo_mina_hierro{
    margin: 0px;
}

#lvlo_granja{
    margin: 0px;
}

#lvlo_almacen{
    margin: 0px;
}

#lvlo_muralla{
    margin: 0px;
}

#lvlo_barracones{
    margin: 0px;
}

#lvlo_cuartel_general{
    margin: 0px;
}

#lvlo_academia{
    margin: 0px;
}

/*-----------------Footer----------- */

.footer{
    width: 1400px;
    height: 50px;
    background-color: red;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

/*-----------------Fuentes----------- */
@font-face {
    font-family: 'MeteoconsRegular';
    src: url('fonts/meteocons-webfont.ttf') format('truetype');
  }

.icon:before {
	font-family: 'MeteoconsRegular';
	content: attr(data-icon);
}


/*-----------------Hover personalizado para input crear barcos----------- */

.hover_inter {
    display: none;
    position: absolute;
    background-color: #f44336;
    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    z-index: 1;
}