/*** MENU TOPNAV ***/


/***OFFICIALES***/
.offi11 {
	position: relative;
	height: 164px;
	width: 47.5%;
	overflow: hidden;
	text-align: left;
	margin: 5px 0 0 9px;
	float: left;
	background: linear-gradient(to bottom, rgba(34, 56, 72, 0.8), rgba(10, 29, 45, 0.8)); 
	overflow: hidden;
  }
  

  
		  .offiTitle{
  text-align: center;
  display: flex;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  
  .build_submit_offi{
			  font-size: 1.3em;
	  background-color: rgba(0,190,230,0.20);
	  right: 0;
	  color: #01c5f7;
	  margin-left: 0;
	  position: absolute;
	  left: 0;
	  margin-right: 0;
	  bottom: 0;
	  margin-bottom: 0;
	  transition: 0.3s;
	  height: 26px;
		  }
  
		  .build_submit_offi:hover{
			  background-color: rgba(0,190,230,0.50); 
		  }

		  .offiOff{
			/*font-size: 1.3em;
			color:#F72E01;
			 background-color: rgba(230,0,0,0.20);
	right: 0;
	margin-left: 0;
	position: absolute;
	left: 0;
	margin-right: 0;
	bottom: 0;
	margin-bottom: 0;
	text-align: center;
	transition: 0.3s;
	height: 26px;*/
	display: none;
		}
  
		  .offiCost{
			  text-align: right;
	  font-size: 13px;
	  position: absolute;
	  right: 0;
	  font-family: monospace;
	  margin-right: 10px;
	  top: 30px;
  
		  }
  
  #tabse{
	  width:100%;
	  text-align: center;
  }
  .active{
	  background:green;
	  font-size: 1.2em;
	  font-weight: bold;
	  border:1px solid #000; 
	  font-size: 1.2em; 
	  padding:4px 5px; 
	  cursor:default; 
  }
  .inactive{
  cursor:pointer; 
  border:1px solid #000; 
  font-size: 1.2em; 
  padding:4px 5px; 
  background:rgba(13, 16, 20, 0.95);
  }
  .inactivetab{
	  display:none;
  }
  .activetab{
	  display:;
	  width:100%;
  }
  
  @media screen and (max-width: 850px) {
	  .offi11 {
		  width:100%;
		  height: 190px;
		  margin: 0 auto;
		  margin-bottom: 10px;
		  }
	  }
  
  @media screen and (max-width: 850px) {
	  .offi11{
		  width: ;
	  }
	  
  }

.menu-extra-button{
	cursor: pointer;
    background: #0d304f;
    border-radius: 3px;
    color: #00f1ff;
    padding: 5px;
    margin: 4px;
    border-radius: 100%;
}

#menut23{
	margin-left: 3px;
    margin-right: 3px;
    min-width: 240px;
}

.buttonMenu{
	width: 100px;
    padding: 2px;
    border: 1px solid #034f57;
    margin: 5px;
	border-radius: 4px;
}
.buttonMenu:hover{
	background-color: rgb(4, 27, 41);
}
.contenedorButton{
    margin-left: 3px;
    margin-right: 3px;
	min-width: 240px;
}
        .darkmattertop{
			float: right;
			color: #edff00;
		}


		select{

		    padding: 0 0;
    color: #fff;
    border: 1px solid rgba(5,190,230,0.20);
    background: rgba(0,0,0,0.20);
    cursor: pointer;
    height: 20px;
	margin: 5px;
		}

		#zalarm{
    text-align: center !important;
	padding: 5px;
	border-radius: 100%;
  
		}

		body {
            margin: 0; /* Elimina el margen predeterminado del cuerpo */
font-family: EurostileLTW01-Demi, cursive;
        }

        #bottom-menu {
  display: flex;
  justify-content: space-around; /* Distribuye elementos con espacio uniforme */
  background-color: #061823; /* Color de fondo del menú (ejemplo) */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  border-top: 1px solid #099393;
  border-radius: 5px 5px 0 0;
}

#bottom-menu ul {
  display: flex;
  justify-content: space-around; /* O la distribución que prefieras */
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%; 
}

#bottom-menu li {
  text-align: center;
  flex-grow: 1; /* Para que ocupen el espacio disponible */
  min-width: 20px; /* Ancho mínimo al que puede reducirse cada elemento */
}

#bottom-menu a { 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  transition: transform 0.2s ease; /* Añade una transición suave */

}

#bottom-menu svg {
  width: 100%; 
  height: auto;
  max-width: 24px; 
  fill: currentColor;
  color: #00f1ff;
}

#bottom-menu a:hover {
  transform: scale(1.2); /* Escala el SVG a 1.2 veces su tamaño original al pasar el ratón */
}


#bottom-menu span{
	color: #138895;
}
.icon-button{
	cursor: pointer;
}

		

		@media screen and (max-width: 850px){
			.top-menu-off{
				display: none;
			}
			#bottom-menu{
				display: block !important;
			}

			.button-menu-cell-off{
				display: none !important;
			}
			.button-menu-cell-on{
				display: block !important;
			}
			

  #bottom-menu svg {
    width: 20px; /* Reduce el tamaño de los iconos */
    height: 20px; 
  }
}


/** SHIPYARD **/

		.shipyardWoP {
  position: relative;
  height: 164px;
  width: 47.5%;
  overflow: hidden;
  text-align: left;
  margin: 5px 0 0 9px;
  float: left;
  background: linear-gradient(to bottom, rgba(34, 56, 72, 0.8), rgba(10, 29, 45, 0.8)); 
  overflow: hidden;
}

.shipyardWoP::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: radial-gradient(ellipse at center, rgba(0,255,255,0.3) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.8); 
  transition: all 0.5s ease-in-out;
  pointer-events: none; /* ¡Añade esta línea! */
}

.shipyardWoP:hover::before { 
  opacity: 1;
  transform: scale(1.1); 
}

/* Añadimos un borde sutil con profundidad */
.shipyardWoP::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent; /* Transparente para que no se vea inicialmente */
  box-sizing: border-box; /* Para que el borde no afecte al tamaño */
pointer-events: none;
}

.shipyardWoP:hover::after {
  border-color: rgba(0, 255, 255, 0.5); /* El borde se vuelve visible al pasar el cursor */.
border-bottom: none;
}

		.shipyardTitle{
    text-align: center;
    display: flex;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
		}

		.shipyardCost{
			text-align: right;
    font-size: 13px;
    position: absolute;
    right: 0;
    font-family: monospace;
    bottom: 80px;
	margin-right: 10px;

		}

		.shipyardButton{
			font-size: 1.3em;
    background-color: rgba(0,190,230,0.20);
    right: 0;
    color: #01c5f7;
    margin-left: 0;
    position: absolute;
    left: 0;
    margin-right: 0;
    bottom: 0;
    margin-bottom: 0;
    transition: 0.3s;
	height: 26px;
		}

		.shipyardButton:hover{
			background-color: rgba(0,190,230,0.50); 
		}

		.shipyardInputMax{
			
  display: inline-block;
  border: 1px solid #2980b9; /* Dark blue border */
  border-radius: 3px;
  font-size: 14px;
  background-color: #34495e; /* Dark blue background */
  color: #fff; /* White text */
  text-decoration: none;
  transition: background-color 0.2s ease;
  }

  .shipyardInputMax:focus {
  outline: none;
  border-color: #2196F3; /* Brighter blue focus border */
  box-shadow: 0 0 5px #2196F3; /* Brighter blue focus shadow */
}




.contenedor-principal {
	background-color: #061823; /* Fondo azul */
	padding: 20px; /* Espaciado interno */
  }

  .content_shipyard{
	margin: 10%;
    width: 713px;
    position: absolute !important;
    height: auto;
    border: 1px solid rgba(5, 195, 241, 0.40);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-sizing: border-box;
    padding: 5px;
    position: absolute;
    overflow: visible;
    margin-top: 10px;
    background: rgba(6, 5, 5, 0.9);
  }

  @media screen and (max-width: 1099px) {

	.content_shipyard{
		width: 590px;
		margin: 0 auto;
	}
    
		}
		



@media screen and (max-width: 850px) {
    .shipyardWoP {
        width:100%;
		height: 190px;
		margin: 0 auto;
		margin-bottom: 10px;
		}

		.inputShipyardContent{
			margin-top: 20px;
	   }
	   
		}

		/* Ajustes para pantallas pequeñas (móviles) */
	.contenedor-principal {
	  padding: 10px; /* Reduce el espaciado interno */
		}

		.contenedor-principal {
	        background-color: #061823;
        padding: 20px;
        width: 82%;
        margin-left: 5%;
  }
  
  /* Estilos adicionales para que el contenido se adapte */
  .contenedor-principal > div {
	text-align: center; /* Centra el contenido horizontalmente */
  }

  .content_shipyard{
	width: 100% !important;
  }


  
 
  }








/** Edit Color here **/






/*** TOP NAV NEW****/

.menu-extra-button{
	cursor: pointer;
    background: #0d304f;
    border-radius: 3px;
    color: #00f1ff;
    padding: 5px;
    margin: 4px;
    border-radius: 100%;
}

#menut23{
	margin-left: 3px;
    margin-right: 3px;
    min-width: 240px;
}

.buttonMenu{
	width: 100px;
    padding: 2px;
    border: 1px solid #034f57;
    margin: 5px;
	border-radius: 4px;
}
.buttonMenu:hover{
	background-color: rgb(4, 27, 41);
}
.contenedorButton{
    margin-left: 3px;
    margin-right: 3px;
	min-width: 240px;
}
        .darkmattertop{
			float: right;
			color: #edff00;
		}


		select{

		    padding: 0 0;
    color: #fff;
    border: 1px solid rgba(5,190,230,0.20);
    background: rgba(0,0,0,0.20);
    cursor: pointer;
    height: 20px;
	margin: 5px;
		}

		#zalarm{
    text-align: center !important;
	padding: 5px;
	border-radius: 100%;
  
		}

		body {
            margin: 0; /* Elimina el margen predeterminado del cuerpo */
        }

        #bottom-menu {
  display: flex;
  justify-content: space-around; /* Distribuye elementos con espacio uniforme */
  background-color: #061823; /* Color de fondo del menú (ejemplo) */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  border-top: 1px solid #099393;
  border-radius: 5px 5px 0 0;
}

#bottom-menu ul {
  display: flex;
  justify-content: space-around; /* O la distribución que prefieras */
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%; 
}

#bottom-menu li {
  text-align: center;
  flex-grow: 1; /* Para que ocupen el espacio disponible */
  min-width: 20px; /* Ancho mínimo al que puede reducirse cada elemento */
}

#bottom-menu a { 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  transition: transform 0.2s ease; /* Añade una transición suave */

}

#bottom-menu svg {
  width: 100%; 
  height: auto;
  max-width: 24px; 
  fill: currentColor;
  color: #00f1ff;
}

#bottom-menu a:hover {
  transform: scale(1.2); /* Escala el SVG a 1.2 veces su tamaño original al pasar el ratón */
}

#bottom-menu span{
	color: #138895;
}
.icon-button{
	cursor: pointer;
}

		

		@media screen and (max-width: 850px){
			.top-menu-off{
				display: none;
			}
			#bottom-menu{
				display: block !important;
			}

			.button-menu-cell-off{
				display: none !important;
			}
			.button-menu-cell-on{
				display: block !important;
			}
			

  #bottom-menu svg {
    width: 20px; /* Reduce el tamaño de los iconos */
    height: 20px; 
  }
		}

/*** TOP NAV NEW END ***/

/*.build11 {
	position: relative;
	height: 164px;
	width: 47.5%;
	overflow: hidden;
	text-align: left;
	margin: 5px 0 0 9px;
	float: left;
	background: #0a1d2d;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 5px 5px 0 0;
}*/

.build11 {
  position: relative;
  height: 164px;
  width: 47.5%;
  overflow: hidden;
  text-align: left;
border-radius: 5px;
  float: left;
  background: linear-gradient(to bottom, rgba(34, 56, 72, 0.8), rgba(10, 29, 45, 0.8)); 
  overflow: hidden;
  /* Nueva sombra con profundidad y brillo */
  /*box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8),
              inset 0px 0px 15px rgba(0, 255, 255, 0.3); /* Brillo interior */ 
margin: 5px;
}

.build11::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: radial-gradient(ellipse at center, rgba(0,255,255,0.3) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.8); 
  transition: all 0.5s ease-in-out;
  pointer-events: none; /* ¡Añade esta línea! */
}

.build11:hover::before { 
  opacity: 1;
  transform: scale(1.1); 
}

/* Añadimos un borde sutil con profundidad */
.build11::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid transparent; /* Transparente para que no se vea inicialmente */
  box-sizing: border-box; /* Para que el borde no afecte al tamaño */
pointer-events: none;
}

.build11:hover::after {
}

@media screen and (max-width: 875px) {
	.build11 {
		width: 100%;
		/*max-width: 580px;*/
margin: 0 auto;
margin-bottom: 10px;
	}

}

#img_build {
	background-size: 100% !important;
	background-position: bottom !important;
	width: 60px;
	height: 60px;
	margin-top: 12px;
}

#contenido_building {
	text-align: right;
	font-size: 13px;
	position: absolute;
	right: 0;
	font-family: monospace;
}

#contenido1_building {


	font-size: 13px;
	position: absolute;
	display: inline-table;
	justify-content: center;
	align-items: center;
	font-family: monospace;
	bottom: 0;
	margin-bottom: 33px;
	left: 5px;
}

.time_building {
	margin-top: 30px;
	position: absolute;
	right: 0;
	bottom: 33px;
	font-family: monospace;
	font-size: 13px;
}

/* Estilo del scroll start */
body::-webkit-scrollbar {
	width: 6px;
  }
  
  body::-webkit-scrollbar-track {
	background: rgb(0, 0, 0); 
  }
  
  body::-webkit-scrollbar-thumb {
	background-color: rgba(56, 233, 189, 0.9) !important;
	border-radius: 5px; 
	border: 1px solid rgb(43, 46, 46); 
  }

  @media screen and (max-width: 850px) {
	body::-webkit-scrollbar {
		width: 6px;               
	  }
	  
	  body::-webkit-scrollbar-track {
		background: rgb(0, 0, 0);       
	  }
	  
	  body::-webkit-scrollbar-thumb {
		background-color: rgba(56, 233, 189, 0.9) !important;   
		border-radius: 5px;
		border: 1px solid rgb(43, 46, 46);  
	  }
  }

  /*Estilo del scroll end*/

 * 
#.ui-widget-header{
	background-color:#D20000;
}
.res_name{
	color:#D20000;
}


body {
	background:url("img/bkd_page.jpg") no-repeat fixed center center #0d0d0d;
    /*background-size: 100% 100%;*/
	text-align: center;
	background-size: 100% 100%;
}

body,input,select,button,textarea,a,td,th,tr,table,a:visited{
	color:#DDD;
	text-align: center;
}

body.mceContentBody,input,button,select,option,textarea, .ui-widget-content{
	background: #0D1014;
}

input[type="radio"] {
	background:transparent;
	border:0 none;
}


#menu li:first-child, #menu li:last-child{
	background-color:transparent;
}

a:hover {
	color:rgb(102, 255, 0);
	text-decoration:none
}

table,td,th {
	font-weight:400
}

table table,img {
	border:0
}

input, select, textarea, #userpic, input, button{
	border:1px solid #1C1F23;
}

td, th input, .tip {
}

td, .tip{
	text-align: center;
  }



  

input,button {
	text-align:center
}

button{
    background: rgba(0, 190, 230, 0.20);
    color: #01c5f7;
}

button:hover{
	background-color: rgba(0,190,230,0.50); 
	text-decoration: none;
}

th, .ui-widget-header {
	text-align: center;
    background: linear-gradient(to bottom, rgb(23 41 54), rgb(3 11 18));
    padding: 5px;
    color: #01c5f7 ;
    font-weight: bold;
}

th a:hover, .ui-widget-header a:hover, #menu a:hover  {
	color:#FFF;
}

th a:hover, .ui-widget-header a:hover {
	text-decoration:underline;
}

textarea {
	background:transparent;
}

select {
	border:1px solid #212121
}

/*Global Messgae */

.admin {
	color:red;
}
.mod {
	color:yellow;
}
.ops {
	color:skyblue;
}

.messages_body .admin {
	font-weight:700;
	color:red;
}
.messages_body .mod {
	font-weight:700;
	color:yellow;
}
.messages_body .ops {
	font-weight:700;
	color:skyblue;
}

.res_max {
	color:#0F0
}

.res_name {
	color:red;
	font-weight:700
}

.galaxy-alliance-member {
	color:#99FF66;
}

.galaxy-alliance-friend {
	color:#99FFFF;
}

.galaxy-alliance-enemy {
	color:#FF0000;
}

.galaxy-short-noob,
.galaxy-username-noob{
	color:#a0ffa0
}

.galaxy-short-deleted,
.galaxy-username-deleted {
	color:#5a0909;
}

.galaxy-short-strong,
.galaxy-username-strong {
	color:#ff0000
}

.galaxy-short-vacation,
.galaxy-username-vacation {
	color:#659ec7
}

.galaxy-short-inactive,
.galaxy-username-inactive {
	color:#636262
}

.galaxy-short-longinactive,
.galaxy-username-longinactive {
	color:#999
}

.galaxy-short-banned {
	text-decoration:line-through
}

.ownattack {
	color:#6c3
}

.owncolony {
	color:#c1c1c1
}

.owndeploy {
	color:#666
}

.owndestroy {
	color:#ff9
}

.ownfederation {
	color:#c66
}

.ownharvest {
	color:#ceff68
}

.ownhold {
	color:#80a0c0
}

.destroy {
	color:#d4a017
}

.hold {
	color:#39c
}

.warning {
	color:#FF8040
}

.notice {
	color:#FF0
}

.return {
	color:#444
}

.allymember,.colony,.deploy,.harvest,.transport,.success {
	color:lime
}

.owntransport {
	color:#a0ffa0
}

.ownespionage,.ownmissile {
	color:#fc6
}

.espionage,.missile {
	color:#f60
}

/*.build_submit {
    background-color: green;
    border-radius: 4px;
	font-weight: bold;
	float: right;
}*/

/*.build_submit {
	font-size: 1.3em;
	background-color: rgba(0, 190, 230, 0.20);
	border-radius: 5px 5px 0 0;
	border: 1px solid #00334d;
	right: 0;
	margin-left: 0;
	position: absolute;
	left: 0;
	padding: 5px;
	font-family: "BicubikRegular", Arial, Geneva, sans-serif;
	margin-right: 0;
	bottom: 0;
	margin-bottom: 0;
	transition: 0.3s;
}*/

.build_submit { 
      font-size: 1.3em;
    background-color: rgba(0,190,230,0.20);
    border-radius: 5px 5px 0 0;
    right: 0;
    color: #01c5f7;
    margin-left: 0;
    position: absolute;
    left: 0;
	padding: 8px;
  /* // padding: 5px;
    //font-family: "BicubikRegular", Arial, Geneva, sans-serif;*/
    margin-right: 0;
    bottom: 0;
    margin-bottom: 0;
    transition: 0.3s;
}

.build_title {
	text-align: center;
	display: flex;
	height: 20px;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/**raton**/
.build_submit:hover {
	background-color: rgba(0,190,230,0.50); 
text-decoration: none;
}


.onlist{
    color: #DDD;
}

/** HEADER **/

#header {
	background: linear-gradient(to bottom, rgb(23 41 54), rgb(3 11 18));
	border: 1px solid #524d4d;
	border-radius: 0 0 10px 10px;
	border-top: none;
	box-shadow: inset 0 1px 1px rgb(87, 88, 89), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #040f1f;
}

#resourcesdiv{
	text-align:center;
}

/** new 2colum menu **/
#page {
    

}

#menu div{
	
}
#menu td{
	vertical-align:top;
}
#menu a{
    font-size: 1.1em;
	padding: 4px 10px;
}

.menu-footer {
    background-size: 100%;
}
.menu-head {
    background-size: 100% 129% !important;
}
#leftmenu{
	width: 250px;
    float: left;
    overflow: visible;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
    overflow: visible;
	margin-top: 20px;
	
}
}

	#leftmenu table{
    width: 258px;
}

#leftmenu1{
	width: 240px;
    float: left;
    overflow: visible;
    border: 1px solid #524d4d;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: rgb(0, 0, 0);
    padding: 5px;
    overflow: visible;
	z-index: 999;
	
}
}

	#leftmenu1 table{
    width: 258px;
}

#alarm {
    background: green;
    
}

.atta {
    -webkit-animation-name: atta; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-name: atta;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
/** new 2colum menu end**/

/** MENU **/

#menu a {
	
}

#menu a:hover {
	
}

.menu-head a{
	height:78px;
	background:none !important;
	padding:0 !important;
	text-indent: -1000em;
}

.menu-head {
	background: url('./img/menu-top.png') no-repeat scroll 0 -22px transparent;
	border-radius: 15px 15px 0px 0px;
	margin-left: 5%;
	margin-right: 5%;
}

.menucat1-head {
	background-image: url('./img/menu_wirt.png');
}

.menucat2-head {
	background-image: url('./img/menu_com.png');
}

.menucat3-head {
	background-image: url('./img/menu_acc.png');
}

.menu-footer{
	background-image: url('./img/menu-foot.png');
}

/* PLANETMENU */

#planet_menu_link{
	font-weight:700;
}

#planet_menu_header{
	text-align:right;
}

#planet_menu_content li {
	text-align:center;
}


/* CONTENT */

.tip th{
	text-align:center
}

.top {
	vertical-align:top
}

.transparent,#header td, .tip td, .tip th, .raportMessage td {
	background: transparent;
	border:none;
	filter: none !important;
}

.mes_unread td {
	font-weight:700;
}

a {
	text-decoration:none
}

th a,.res_current{
	color:#FFF
}

.res_current_max,.attack,.federation,.error {
	color:red
}

#fleetstatustable td{
	background: transparent;
	background-image: none;
	border: 0 none
}

.raportWin {
	color:lime;
}

.raportLose {
	color:red;
}

.ui-progressbar-value {
	background-image: url(img/processbar.gif);
	background-position:top left;
	border-color:#000;
}

.spyRaportContainerHead {
	background: #212428;
	color: white;
	font-weight: 700;
	text-align: left;
	margin: 3px 0;
	padding: 3px;
}

.spyRaportContainerRow {
	border-top:1px solid #DDD;
}
.spyRaportContainerHead + .spyRaportContainerRow {
	border-top:0 none;
}

.ui-autocomplete, .ui-state-hover, .ui-state-default, .ui-tabs-nav, .ui-tabs, .ui-progressbar, .ui-progressbar-value {
	-webkit-border-radius:0;
	-khtml-border-radius:0;
	border-radius:0;
}

.ui-state-default{
	border:1px solid #000 !important;
	background: #0D1014 !important;
}
.ui-state-default > a{
	cursor:pointer !important;
}

.ui-state-hover, .ui-progressbar{
	border:1px solid #000 !important;
	background: #212428 !important;
}

.ui-tabs-nav {
	padding: 0;
}

.ui-tabs {
	border:1px solid #000;
	background:transaprent;
}

/* TUTORIAL */
#aufgabe_liste{
	width: 90%;
	list-style-type: none;
}

.aufzaehlungszeichen  {
   background:url(images/arrow_right.png) no-repeat left 0.2em;
   padding:0.1em 0 0 1.8em;   
   margin:1em 0 0.4em 5em;
}

/***************
System Container
****************/
.container {
 width: 100%;
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

@media (min-width: 576px) {
 .container {
   max-width: 540px;
 }
}

@media (min-width: 768px) {
 .container {
   max-width: 720px;
 }
}

@media (min-width: 992px) {
 .container {
   max-width: 960px;
 }
}

@media (min-width: 1200px) {
 .container {
   max-width: 1140px;
 }
}

.container-page {
 border: 1px solid #524d4d;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 background: rgba(6, 5, 5, 0.8);
 padding: 5px;
 overflow: visible;
}

/*Code Opacity*/

.blinking {
    -webkit-animation: 1s blink ease infinite;
    -moz-animation: 1s blink ease infinite;
    -ms-animation: 1s blink ease infinite;
    -o-animation: 1s blink ease infinite;
    animation: 1s blink ease infinite;
  }

  @keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-moz-keyframes blink {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-webkit-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-ms-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-o-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  /*Code opacity end*/

  @font-face {
    font-family: "BicubikRegular";
    src: url("fonts/BicubikRegular.eot");
    src: url("fonts/BicubikRegular.eot?#iefix")format("embedded-opentype"),
    url("/styles/resource/fonts/BicubikRegular.woff") format("woff"),
    url("/styles/resource/fonts/BicubikRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
	font-family: "EurostileLTW01-Demi"; /* Nombre que le darás a la fuente */
	src:  url('/styles/resource/fonts/EurostileLTW01-Demi.woff') format('woff'), /* Ruta al archivo WOFF (opcional, para navegadores antiguos) */
		 url('/styles/resource/fonts/EurostileLTW01-Demi.ttf') format('truetype'); /* Ruta al archivo TTF (opcional, para navegadores muy antiguos) */
	font-weight: normal; /* Peso de la fuente (normal, bold, etc.) */
	font-style: normal; /* Estilo de la fuente (normal, italic, etc.) */
  }

/*css tourney*/

#achivment{
	margin: 0 auto;
	width: 706px;
}
#achivment .ach_main_block{
	border: 1px solid #000;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	width: 714px;
	background:rgba(0, 0, 0, 0.8);
	overflow:hidden;
	box-shadow: inset 0 1px 1px rgb(87, 88, 89), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #040f1f;
}

#achivment .messaggi_main_block{
	border: 1px solid #000000;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	width: 714px;
	background:rgba(0, 0, 0, 0.3);
	overflow:hidden;
}
.ach_main_content{
}
#achivment .ach_head{
	background-color: #28292a;
	border-bottom: 1px solid #000000;
	border-top-left-radius: 4px;
	border-top-right-radius:4px;
	width: 100%;
	height:27px;
	line-height:27px;	
}

.ach_head .ach_head_p{
	margin-left:20px;
	float:left;	
}

.ach_head_right{
	float:right;
	line-height:25px;
	height:25px;
	padding-top:2px;
	padding-right:5px;
	margin-right:5px;
}

.ach_head_right span{
	color:#fff;	
	margin-left:4px;
}

.ach_menu {
    width: 176px;
	float:left;
}
 
.ach_menu ul{
	padding:0px;
	margin:0;
}
 
.ach_menu li {
    height: 38px;	
	list-style-type:none;
	cursor:pointer;
	width:176px;
}  
.ach_menu li a {
    line-height: 36px;
	height:36px;
    text-decoration: none;
	padding-left:20px;
	color:#666666;
	display:block;
	width:155px;
	/*border-bottom:1px #000 solid;
	border-top:1px #020c18 solid;*/
}  
.ach_menu li:hover a{
    color: #FFFFFF;
} 
/*.ach_menu li.enable {   
	background:rgba(0, 0, 0, 0.1);
	padding-right:10px;
}*/
.ach_menu li.enable a {
    color: #FFFFFF;
	cursor:default;
	border-top:0;
	padding-top:1px;
	font-size: 1.2em;
	font-weight: bold;
	background:rgba(0, 0, 0, 0.3);
}
.ach_content{
	margin:0 14px 7px 14px;
	border:1px #000 solid;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background:rgba(0, 0, 0, 0.3);
	padding-bottom:10px;
	position:relative;
	overflow:hidden;
}
.ach_content_box{
	margin-left:177px;
	padding-top:14px;
}
.ach_content .ach_img{
	float:left;
	margin-left:10px;
	margin-top:10px;
	width:100px;
	overflow:hidden;
	text-align:center;
}
.ach_content .ach_img img{
	max-width:100%;
}
.ach_content .ach_content_text{
	margin-left:120px;
	margin-right: 10px;
}

.ach_content_text .ach_text_head{
	color:#FFF;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:10px;
}
.ach_content_box .stars_2{
	position:absolute;
	right:10px;
	top:7px;
	padding-left:17px;
	padding-top:2px;
	line-height:14px;
	color:#fff;
}
.ach_content_text .ach_text_boby{
	color:red;
	line-height:15px;
	
}
.ach_content_text .ach_text_need{
	color:#666666;
	line-height:20px;
	margin-top:7px;
}
.ach_attr{
	float:left;
	margin-left:-10px;	
}

.ach_attr_achiv {
	float:left;
	margin-left:10px;
	margin-top:10px;
}

.ach_attr_achiv img{
	height:55px;
	width:auto;
}

.ach_attr_achiv span{
	color:#FFF;
	position:absolute;
	margin-left: 63px;
	margin-top: 35px;	
}

.ach_attr_build {
	float:left;
	margin-left:10px;
	margin-top:10px;
}

.ach_attr_build img{
	height:55px;
	width:auto;
}

.ach_attr_build span{
	color:#FFF;
	position:absolute;
	margin-left: 37px;
	margin-top: 35px;
}
span.achiev_mes_head{
	font-weight:bold;
	color:#846728;
}
.ach_next_info{
	position:absolute;
	right:0;
	bottom:0;
	font-size:10px;
	padding:3px 6px;
	color:#fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background:#28292a;
	cursor:help !important;
	z-index:2;
}
.ach_next_info_line{
	position:absolute;
	left:0;
	bottom:0;
	height:4px;
	color:#666;
	-moz-border-radius: 0px 0px 2px 0px;
	-webkit-border-radius: 0px 0px 0px 2px;
	border-radius: 0px 0px 0px 2px;
	background:#28292a;
	z-index:1;
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


/*tourney*/


.gray_stripe{
	background: #000000;
    line-height: 27px;
    border-bottom: 1px solid #00dfcb;
    position: unset;
    color: #fff;
    padding: 0 10px;
    text-align: left;
}



#build_elements{
	margin:0px 5px;
	padding-top: 10px;
}
.officier_elements .build_box {
    float: left !important;
    height: 143px !important;
    margin: 4px !important;
	margin-bottom: 4px !important;
}
.prem_shop{
	margin:0px !important;
	padding:0;
}

.record_rows{
	margin: 0 4px 4px 4px;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.5) !important;
    -webkit-box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.5) !important;
    -moz-box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.5) !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.record_rows:hover{
	background: rgba(0, 0, 0, 0.5);
}

.record_rows .record_img_utits{
	width:30px;
	height:30px; 
	float:left;
	margin-right:5px;	
}
.record_rows .record_img_utits img{
	width:100%;
	max-width:100%;
}
.record_rows .record_name_utits{
	line-height:30px;
	height:30px;
	width:270px;
	margin-left:2px;
	float:left;
}
.record_rows .record_name_utits a {
	font-size:13px;
	color:#e6e6e6;
}

.record_rows .required_blocks{
	float:left;
	margin-left:5px;
}
.record_rows .required_blocks .required_block{
	width:30px;
	height:30px;
}
.record_rows .required_blocks .required_block .text{
	padding:2px 3px;
}

.position-new{
	float:right;
	margin-right: 10px;
}


.ticket_row_linck{
	display:block;
	background: #000813;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border:1px solid #000;
	margin:2px 2px 0px 2px;
	padding:2px 0px 3px 0px;
}




.ticket_row_linck span{
	display:block;
	float:left;
	padding-right:5px;
	padding-left:5px;
}


.ticket_row_linck .clear{
	float:none;
}

/*tourney end*/


#newmesnum {
    color: #fff;
    background-color: #dc3545;
    padding: 1px 5px 1px 5px;
}

#newmes {
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    position: relative;
    margin: 0 0 0 -10px;
}


#market .market_element{
	display:block;
	position:relative;
	float:left;
	width: -webkit-fill-available;
	height:135px;
	overflow:hidden;
	background-color:transparent;
	background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	-webkit-background-size:cover;
	-khtml-background-size:cover
}
#market .market_title{
	width:100%;
	text-align:center;
	height:50px;
	line-height:50px;
	font-size:25px;
	font-family:Roboto;
	display:block;
	position:absolute;
	bottom:0;
	float:left;
	background:#28292a;
}
#market .market_title:hover{background:rgba(0,0,0,.5)}
#market .market_element a:hover{color:#fff}

.locus .img_trader{background:url(./img/content/mercado.jpg) center}
.locus .img_fleettrader{background:url(./img/content/fleettrader.jpg) center}

.locus{
    display:block;
    position:relative;
    padding:0;
    height:auto;
    /*width:680px;*/
    overflow:hidden
}

.conteiner{
	/*background: rgba(0, 0, 0, 0.3);*/
	background: rgba(0, 0, 0, 0.8);
	border:1px solid #000;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
    box-shadow: inset 0 1px 1px rgb(87, 88, 89), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #040f1f;
	padding:10px;
	height:auto;
}

.manual{
	position:absolute; 
	z-index:5; 
	top:5px; 
	right:5px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	width:15px;
	height:15px;
	line-height:15px;
	color:#fff;
	font-weight:bold;
	font-size:13px;
}

.interrogation{
	display:block;
	float:right;
	/*background:#005a87;
	border:1px solid #006b9c;*/
	background:#005a87;
	border:1px solid #B2D2FF;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	width:14px;
	height:14px;
	line-height:14px;
	color:#fff;
	font-size:11px;
	text-align:center;
	cursor:pointer;
	overflow:hidden;
	position:relative;
	font-weight:bold;
}
.interrogation:hover{
	-moz-box-shadow: 0px 0px 2px #fff;
	-webkit-box-shadow: 0px 0px 2px #fff;
	box-shadow: 0px 0px 2px #fff;
	color:#fff;
}

.ir-arriba {
	display:none;
	padding:20px;
	background:#024959;
	font-size:20px;
	color:#fff;
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;
	border:2px solid gray !important;
	border-radius: 50%;
}

.pvp1:hover {
	background-color: rgba(0,190,230,0.20);
	border-radius: 3px 3px 3px 3px;
	margin: 2px;
}

.votar1:hover {
	background-color: rgba(57,29,70,0.60);
	border-radius: 3px 3px 3px 3px;
	margin: 2px;
}

.store1:hover {
	background-color: rgba(0,230,0,0.20);
	border-radius: 3px 3px 3px 3px;
	margin: 2px;
}
.ruleta1:hover {
	background-color: rgba(226, 230, 0, 0.2);
	border-radius: 3px 3px 3px 3px;
	margin: 2px;
}

.menulat1 {
	background-color: rgb(40 46 48 / 0%);
	

}

.menulat2 {
	background-color: rgb(40 46 48 / 0%);
	

}

.title {
	margin: -5px -5px 0 -5px;
    text-align: center;
    background: linear-gradient(to bottom, rgb(23 41 54), rgb(3 11 18));
    padding: 5px;
font-family: BicubikRegular, Arial, Geneva, sans-serif;
    font-size: 12px;
	color: #01c5f7;

}



/*.content_page {
	display: inline-block;
	margin: 0 auto;
	height: auto;
	border: 1px solid rgba(5, 195, 241, 0.40);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-sizing: border-box;
	padding: 5px;
	position: relative;
	overflow: visible;
	background: linear-gradient(180deg, #061823 0%, #0a2636 100%);
	max-width: 713px;
}*/

.content_page {
	max-width: 713px;
	margin: 0 auto;
    background: linear-gradient(180deg, #061823 0%, #0a2636 100%);
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    padding: 10px;
    width: calc(100% - 250px);
	border: 1px solid rgba(5,195,241,0.40);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-sizing: border-box;
	padding: 5px;
}

@media screen and (max-width: 850px) {
	.content_page {
		width: 100% !important;
		margin-bottom: 50px;
		display: inline-block;
		/*overflow: auto;*/

	}
  }

  .offbutton {
	/*font-size: 1.3em;
	border-radius: 5px 5px 0 0;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	padding: 6px;
      color: #F72E01;
	margin-right: 0;
	background-color: rgba(230,0,0,0.20);
	border: 1px solid #280a09;
	text-align: center;*/
display: none;
}


#build_process {
	border: 1px solid #000;
	background: #030c1b;
	height: 75px;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
	margin: 0;
	-webkit-box-shadow: inset 0 1px 1px rgb(13, 33, 66), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #040f1f;
	-moz-box-shadow: inset 0 1px 1px rgb(13, 33, 66) inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #040f1f;
	box-shadow: inset 0 1px 1px rgb(13, 33, 66), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #040f1f;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	margin-bottom: 7px;
}

#build_process .element_row {
	flex-shrink: 0;
	border: 1px solid #000;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	text-align: center;
	padding: 5px;
	box-shadow: inset 0 1px 2px rgb(9, 29, 46), 0 1px rgb(9, 29, 46);
	width: 53px;
	height: 53px;
	position: relative;
	float: left;
	margin-left: 5px;
	margin-right: 5px;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-color: rgba(0, 0, 0, 0.30) !important;
	z-index: 2;

}

#build_process .element_row .right_hand {
	float: right;
	color: #999;
	font-size: 13px;
	line-height: 17px;
	overflow: hidden;
	width: 17px;
}

#build_process .active_row .band_process {
	border: 1px solid #000;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	background: #0b456278;
	font-size: 12px;
	height: 8px;
	line-height: 19px;
	position: absolute;
	bottom: 17px;
	width: 172px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
	left: 67px;
}

#build_process .ui-progressbar .ui-progressbar-value {
	position: absolute;
	height: 5px;
	border: 1px solid #00699c;
	background: #62cbff url(../modernwop/imgs/general/bg_performed.gif);
	line-height: 17px;
	z-index: 1;
	padding: 0;
	margin: 0;
	bottom: 0;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

#build_process .element_row {
	flex-shrink: 0;
	border: 1px solid #000;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	text-align: center;
	padding: 5px;
	box-shadow: inset 0 1px 2px rgb(9, 29, 46), 0 1px rgb(9, 29, 46);
	width: 53px;
	height: 53px;
	position: relative;
	float: left;
	margin-left: 5px;
	margin-right: 5px;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-color: rgba(0, 0, 0, 0.30) !important;
	z-index: 2;
}

#build_process .active_row {
	width: 235px;
	background-repeat: no-repeat;
	background-color: #000813 !important;
}

.onlistretit {
	position: absolute;
	margin-left: 67px;
	left: 0;
	color: #ccc !important;
	width: 155px;
	text-align: left;
	height: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	top: 3px;
}

#build_process .element_row .right_hand #time {
	float: right;
	margin-right: 14px;
	position: absolute;
	left: 67px;
	top: 18px;
	font-weight: bold;
}

.data_scad {
	position: absolute;
	margin-left: 67px;
	left: 0;
	color: #ccc !important;
	width: 155px;
	text-align: left;
	height: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	bottom: 1px;
}

.onlistrenum {
	position: absolute;
	left: 4px;
	top: 0px;
	color: rgba(170, 170, 170, 1) !important;
	text-shadow: 1px 1px 1px rgb(0, 0, 0);
	font-size: 11px;
}

.build_submitss {
	background: none repeat scroll 0 0 transparent;
	border: 0 none;
	color: lime;
	max-width: 100px;
	padding: 0;
	word-wrap: break-word;
	white-space: normal;
}

.onlistremov {
	position: absolute;
	left: 0px;
	font-size: 11px;
	width: 57px;
	text-align: center;
	top: 45px;
	height: 8px;
	line-height: 8px;
	padding: 2px;
	background: rgba(0, 0, 0, 0.65);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px rgba(255, 255, 255, 0.03);
	border: 1px solid black;
}

.onlistss {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

#build_process .element_row .right_hand .del {
	display: block;
	float: right;
	background: url(../gow/img/iconav/del_build.jpg) no-repeat;
	height: 16px;
	width: 16px;
	border: 0;
	margin-top: 0px;
	cursor: pointer;
	background-size: contain;
	position: absolute;
	top: 4px;
	right: 4px;
}

.bui4era {
	background: #030c1b url(../modernwop/img/content/sfondobui.png) no-repeat !important;
	background-size: 35% !important;
	background-position: right !important;
}

.pluscos {
	font-size: 55px;
	font-family: "BicubikRegular", Arial, Geneva, sans-serif;
	line-height: 60px;
	text-shadow: 1px 2px rgba(0, 0, 0, 0.55);
	color: #091d2e;
	cursor: pointer;
}

/*.content_page{
	margin: 0 auto;
	width: 713px;
	height: auto;
	border: 1px solid rgba(5,195,241,0.40);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-sizing: border-box;
	padding: 5px;
	position: relative;
	overflow: visible;
	margin-top: 10px;
	background: linear-gradient(180deg, #061823 0%, #0a2636 100%); 
  }*/


/*CSS WAR OF ALLIANCE*/

.container-war {
	height: 172px;
	position:relative;
	-moz-border-radius:0 0 3px 3px;
	-webkit-border-radius:0 0 3px 3px;
	border-radius:0 0 3px 3px;
	overflow:visible;
	border-bottom: 1px solid rgba(5,195,241,0.40);
	border-radius: 0 0 20px 20px;
	z-index:100;
	margin-top: 12px;
	margin-bottom: 12px;
	width: 100%;
}

.container-war .war-number {
	width: 40%;
	margin: 0 auto;
	border-bottom: 2px solid rgba(5,195,241,0.40);
	border-radius: 0 0 50px 50px;
	text-align: center;
	height: 20px;
	line-height: 20px;
	font-weight: inherit;
}

.war-ally-name {
	font-weight: bold;
	text-align: center;
	line-height: 20px;
	border-bottom: 2px solid rgba(184,255,233,0.40);
	border-radius: 0 0 10px 10px;
}

.war-part-left {
	width: 40%;
	height: auto;
	overflow:hidden;
	float: left;
}

.war-part-right {
	width: 40%;
	height: auto;
	overflow:hidden;
	float: right;
}

.war-vs {
	text-align: center;
	max-width: 20%;
	position: relative;
	margin: 0 auto;
	height: 60px;
}

.war-vs span {
	line-height: 40px;
	font-size: 40px;
	color: #BBFF78;
}

.war-u-d {
	overflow:hidden;
	width: 70%;
	border-bottom: 2px solid rgba(255,96,117,0.60);
	border-radius: 0 0 20px 20px;
	margin: 0 auto;
	height: 20px;
	line-height: 20px;
	text-align: center;
}

.war-u-d-n {
	width: 100%;
	border-bottom: 2px solid rgba(184,255,233,0.40);
	border-radius: 0 0 10px 10px;
	height: 20px;
	line-height: 20px;
	text-align: center;
}

.war-integrant {
	overflow:hidden;
	width: 70%;
	border-bottom: 2px solid rgba(83,255,189,0.60);
	border-radius: 0 0 20px 20px;
	margin: 0 auto;
	height: 20px;
	line-height: 20px;
	text-align: center;
}

.war-integrant-name {
	width: 100%;
	text-align: center;
}

.war-integrant-name img {
	float: left;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin-left: 20px;
}

@media screen and (max-width: 699px) {

.war-integrant-name img {
	float: left;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin-left: 5px;
}

}

.war-coef {
	background: rgba(5,195,241,0.40);
	overflow:hidden;
	width: 90%;
	border-radius: 10px;
	margin: 0 auto;
	height: 15px;
	line-height: 15px;
	text-align: center;
}

.war-coef-send {
	background: rgba(255,96,117,0.60);
	overflow:hidden;
	border-radius:10px 0  0 10px;
	float: left;
	height: 15px;
	line-height: 15px;
	text-align: left;
}

.war-coef-left {
	position: absolute;
	left: 15px;
	font-size: 10px;
}

.war-coef-right {
	position: absolute;
	right: 15px;
	font-size: 10px;
}

.war-botin-contenier {
	width: 33.3%;
	margin-top: 5px;
	text-align: center;
	float: left;
}


/*OVERVIEW*/

.ref-links-container {    display: flex
;
    flex-direction: column;
    padding: 5px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 15px;
    color: aqua;
}

.ref-links-container a{
    color: aqua;
}
.ref-link {
  display: flex;
  align-items: center;
  padding: 10px 0;
  box-sizing: border-box;
}

.ref-user {
  /* Eliminamos flex: 1 */
}

.ref-points {
  margin-left: auto; /* esto empuja .ref-points a la derecha */
  text-align: right;
}

/* Estilos responsivos para pantallas pequeñas */


.no-ref-links {
  text-align: center;
  padding: 10px;
}







	

	@media screen and (max-width: 570px) {
		.events{
		}

		.title1{
			font-size: 10px !important;
		}

		#general12{
			width: 100% !important;
		}

		.listBat, .listRech, .listFleet, .listFleetdef {
	float: none !important;
	width: auto !important;
}

		
		
	}

    .ref{
        height: 25px;
        background: url('../gow/images/lines-blue.png');
        color: lime;
        border-radius: 4px;
        margin-bottom: 10px;
        border: 1px solid aqua;
    }

	

	.title12{
		border-radius: 4px;
    background: rgba(6, 5, 5, 0.8);
    /*box-shadow: inset 0 1px 1px rgb(87, 88, 89), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #040f1f;*/
    font-size: 10px;
    color: lime;
    margin: auto;
	padding: 5px 0px 5px 0px;
	}

	#general12{
			margin: 0 auto;
    width: 550px;
    /*border: 1px solid #524d4d;*/
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: rgba(6, 5, 5, 0.8);
    overflow: visible;
		}

		              .title2{
						background: green;
					  }

					 
						#contentPlanet {
    overflow: hidden;
    height: 220px;
    position: relative;
    border: 1px solid #000;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-size: cover;
	width: 100%;
					  }

					  #caracteristicas{
						background: #000000a6;
                       padding: 5px;
                     border-radius: 0 0 5px 0;
                     position: absolute;
                      right: 0;
                       bottom: 0;
					   border-radius: 5px 0 0 0;
font-family: EurostileLTW01-Demi, cursive;
					  }

					  .desc{
						text-align: left;
						background: none;
						border: none;

					  }
					  .data{
						text-align: right;
						padding: 2px 5px;
						background: none;
						border: none;

					  }

					  .table1{
						width: auto !important;
					  }

					  #prin{
						position: absolute;
						left: 0;
						background: #000000a6;
						padding: 5px;
						border-radius: 0 0 5px 0;
						font-size: 12px;
						font-weight: bold;
					  }

					  #prin a{
					  }

					  /*CSS de CONSTRUCCIONES*/

					  .listBat, .listRech, .listFleet, .listFleetdef {
	background: rgba(0, 0, 0, 0.3);
	padding: 5px;
	float: left;
	width: 23.16%;
	border-radius: 0 0 5px 5px;
    text-align: center;
}

.listBat .timer, .listRech .timer, .listFleet .timer, .listFleetdef .timer {
	color: lime;
	font-weight: bold;
}

.listBat .level, .listRech .level, .listFleet .level, .listFleetdef .level {
	color: orange;
	font-weight: bold;
}

.title-const {
    text-align: center;
    background-image: url(../gow/images/misiones_header.png); /* Usa background-image en lugar de background */
    background-color: rgba(0, 0, 0, 0.8);
    background-repeat: no-repeat; /* Evita la repetición de la imagen */
    background-position: center; /* Centra la imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para que se vea completamente, manteniendo la relación de aspecto */
    padding: 10px;
    font-size: 13px;
    font-family: EurostileLTW01-Demi, cursive;
    color: aqua;
}








.container-const {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
  justify-content: space-around; /* Distribuye el espacio entre los items */
  gap: 20px;
}

.listBat1, .listRech1, .listFleet1 {
  border-radius: 5px;
  flex-basis: calc(33.33% - 13.33px); /* Divide el espacio en tercios, considerando el gap */
  box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho */
  background:-webkit-linear-gradient(top,#171d23 0,#101419 100%);

}

.listBat1 img, .listRech1 img, .listFleet1 img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.listBat1 span.level, .listRech1 span.level, .listFleet1 span.level {
    font-weight: bold;
}


/* Media Query para pantallas pequeñas */
@media (max-width: 768px) { /* Ajusta el ancho según tu necesidad */
  .container-const {
    flex-direction: column; /* Apila los elementos verticalmente */
  }

  .listBat1, .listRech1, .listFleet1 {
    flex-basis: 100%; /* Ocupa todo el ancho disponible */
  }
}
/*OVERVIEW*/




	



/****** ACTUALIZACION ********/


 /* Estilos para los recursos */
 .resource-901 { 
	background-color: rgba(194, 200, 182, 1.00);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
	border-radius: 50%;
}
.resource-902 { 
	background-color: rgba(5, 195, 241, 1.00);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
	border-radius: 50%;
}
.resource-903 { 
	background-color: rgba(175, 255, 0, 1.00);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
	border-radius: 50%;
}
.resource-911 { 
	background-color: rgba(225, 155, 60, 1.00);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
	border-radius: 50%;
}
.resource-darkmatter { 
	background-color: rgba(231, 112, 255, 1.00);
    border-radius: 50%;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
}


/* Estilos para los recursos */
.resource-metal { 
	background-color: rgba(194, 200, 182, 1.00);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
	border-radius: 50%;
}
.resource-crystal { 
	background-color: rgba(5, 195, 241, 1.00);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
	border-radius: 50%;
}
.resource-deuterium { 
	background-color: rgba(175, 255, 0, 1.00);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
	border-radius: 50%;
}
.resource-energy { 
	background-color: rgba(225, 155, 60, 1.00);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
	border-radius: 50%;
}
.resource-materiaoscura { 
	background-color: rgba(231, 112, 255, 1.00);
    border-radius: 50%;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
}


/* Estilo para tecnologías con requisitos no cumplidos */
.build11:not(.requirements-met) {
	-webkit-filter:blur(2px);
	transition: opacity 0.3s ease;
}

.build11:not(.requirements-met):hover {
	-webkit-filter:none;
}

/* Estilo específico para la imagen de la tecnología */
#img_build {
	background-size: 100% 100%;
	width: 80px;
	height: 75px;
	cursor: pointer;
}

.build11_viejo{
position: relative;
height: 164px;
width: 47.5%;
overflow: hidden;
text-align: left;
border-radius: 5px;
float: left;
background: linear-gradient(to bottom, rgba(34, 56, 72, 0.8), rgba(10, 29, 45, 0.8));
overflow: hidden;
margin: 5px;
}



.darkmatter{
	background-color: rgba(231, 112, 255, 1.00);
    border-radius: 50%;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.50);
}




/* BUTTON PASS WOP */


/* Estilos para el contenedor del enlace */
.pass-wop {
	display: inline-block;
	margin: 2px;
	text-align: center;
	cursor: pointer;
}

.pass-wop a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background-color: rgba(0, 60, 80, 0.60);
	color: #00e5ff;
	font-family: BicubikRegular, Arial, Geneva, sans-serif;
	font-size: 13px;
	font-weight: 500;
	padding: 12px 20px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 1);
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.pass-wop a:hover {
	background-color: rgba(0, 80, 100, 0.80);
	color: #00bcd4;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
	transform: translateY(-2px);
}

.pass-wop svg {
	width: 16px;
	height: 16px;
	fill: #00e5ff; /* Azul fuerte, mismo que el texto */
}

.pass-wop span {
	display: flex;
	align-items: center;
	gap: 6px;
	text-transform: uppercase;
}

/* Animación blinking */
.blinking {
	animation: blinking 1.5s infinite;
}

@keyframes blinking {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}

/* Responsividad */
@media (max-width: 600px) {
	.pass-wop a {
		padding: 10px 15px;
		font-size: 12px;
	}

	.pass-wop svg {
		width: 14px;
		height: 14px;
	}
}

/* BUTTON PASS WOP */






/* Asegurar suavidad en elementos con overflow */
/*div[style*="overflow"],
div[style*="overflow-x"],
div[style*="overflow-y"],
.content_page,
.ranking-container,
.fleet-table {
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}*/