/* CSS Document */

html * {
	font-family: 'Dosis', sans-serif;
	font-size: 1em;
} 

#page-container {
  position: relative;
  min-height: 100vh;
}

.hero-image {
  background-image: url("https://dashboard.mladmins.es/RESOURCES/IMAGES/beautiful-blue-sky.jpg");
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

#logout {
  padding: 30px;
  float: right;
  color: grey;
}

#logout a {
    color: grey;
}


.red_dot {
  height: 25px;
  width: 25px;
  background-color: firebrick;
  border-radius: 50%;
  display: inline-block;
}

.green_dot {
  height: 25px;
  width: 25px;
  background-color:green;
  border-radius: 50%;
  display: inline-block;
}

.sstatus {
	width: 130px;
	height: 130px;
	border: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: #001F4A;
	text-align: center;
	margin: 0 auto;
	margin-top: 20px;
	padding: 9px;
	font-size: 1.1em;
	background-color: rgba(239,248,255,1.00);
}

.services_status {
	width: 130px;
	height: 130px;
	border: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: #001F4A;
	text-align: center;
	margin: 0 auto;
	margin-top: 20px;
	padding: 9px;
	font-size: 1.1em;
	background-color: rgba(239,248,255,1.00);
}

.services_status:hover #services_executed{
	display: block;
}

.services_status #services_executed{
	display: none;
	position: fixed;
	color: darkblue;
 	background-color: rgba(227,242,255,0.80);
	border-radius: 5px;
	text-align: left;
	padding: 5px;
	border: solid;
	border-width: 1px; 
	border-color: gray;
 	width: 350px;
 	max-height: auto;
 	right: 30px;
 	top: 30px;
}

#tabla {
	display: grid;
   	grid-template-columns: repeat(auto-fill, 100px);
   	grid-gap: 1rem;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: solid;
	border-width: 0.5px;
	border-color: lightgrey;
}

#tabla_space {
	display: grid;
   	grid-template-columns: repeat(auto-fill, 100px);
   	grid-gap: 1rem 6rem;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: solid;
	border-width: 0.5px;
	border-color: lightgrey;
}

.servidor {
	width: 100px;
	height: 100px;
	border: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: gray;
	text-align: center;
	margin-right: 5px;
	margin-bottom: 5px;
	padding: 5px;
}

.servidor_space {
	width: 150px;
	height: 200px;
	border: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: gray;
	text-align: center;
	margin-right: 5px;
	margin-bottom: 5px;
	padding: 5px;
}

.servidor:hover #details{
	display: block;
}

.servidor #details{
	display: none;
	position: fixed;
	color: darkblue;
 	background-color: rgba(227,242,255,0.80);
	border-radius: 5px;
	text-align: left;
	padding: 5px;
	border: solid;
	border-width: 1px; 
	border-color: gray;
 	width: 350px;
 	max-height: auto;
 	right: 30px;
 	top: 30px;
}

.servers {
	padding-top: 20px;
	margin-left: 7%;
	margin-right: 7%;
	font-size: 1.2em;
}

.green {
	color:rgba(0,255,154,0.50);
}

.red {
	color: rgba(255,0,0,0.50);
}

.orange {
	color: darkorange;
}


#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

#header img {
	margin-left: 30px;
  	margin-right: auto;
  	display: block;
	width: 20%;
	padding-top: 30px;
	margin-bottom: 30px;
	min-width: 150px;
	max-width: 200px;
}

.title {
	font-size: 2em;
	margin-left: 3%;
	padding-top: 40px;
	margin-bottom: 20px;
	color: dimgrey;
}

.subtitle {
	font-size: 1.5em;
	margin-left: 5%;
	color: slategray;
}

#credentials input[type=submit]{
	background-color: #001F4A;
	padding: 5px;
	color: white;
	border: none;
	margin: 5px;
	cursor: pointer;
}

#credentials input[type=text], input[type=password]{
	color: #001F4A;
	padding: 5px;
}


.footer {
	margin-bottom: 0px;
	margin-top: 0px;
	background-color: #001F4A;
	min-height: 80px;
	width: 100%;
    font-weight: 200;
	padding-top: 60px;
	padding-bottom: 40px;
	text-align: left;
	color: white;
}

.logo_footer {
	margin: 0 auto;
	text-align: center;
	margin-bottom: 20px;
}

.logo_footer img {
	width: 200px!important;
	
}