@charset "utf-8";

/*
  body {
    background: #1e1e1e;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }*/
  
.panel-logs-container {
	position: absolute;
	top: 24%;
	bottom: 10%;
	left: 15%;
	z-index: 1;
	width: 30%;
	height: 40%;
}

.panel-logs-monitor {
	  width: 100%;
	  height: 100%;
	  background: #333;
	  border: 15px solid #505050;
	  border-radius: 10px;
	  position: relative;
	  box-shadow: 0 0 30px rgba(0,0,0,0.5);
	  overflow: hidden;
}

.panel-logs-screen {
	  width: 100%;
	  height: 100%;
	  background: #F4F4F4;
	  padding: 20px;
	  box-sizing: border-box;
	  position: relative;
	  font-family: Arial, sans-serif;
	  color: #FFFFFF;
}

.panel-logs-screen h3 {
	  text-align:left;
	  color:#000000;
	  position:absolute;
	  top:0%;
}

.panel-logs-list {
	  position: absolute;
	  top: 60px;
	  left: 20px;
	  right: 20px;
	  height: 200px;
	  overflow: hidden;
}

.panel-logs-list ul {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	  animation: panel-logs-scrollList 8s linear infinite;
}

.panel-logs-list li {
	padding: 10px;
	background: #FFFFFF;
	margin-bottom: 5px;
	border-radius: 4px;
	border: thin solid #D4D0C8;
	color: #000000;
	text-align: left;
	font-size: 1.5em;
}

@keyframes panel-logs-scrollList {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

.panel-logs-btn {
	  position: absolute;
	  bottom: 20px;
	  left: 20px;
	  padding: 10px 20px;
	  background: #28A745;
	  color: #FFFFFF;
	  border: none;
	  border-radius: 5px;
	  font-weight: bold;
	  animation: panel-logs-blink 0.5s infinite alternate;
}

@keyframes panel-logs-blink {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.5; transform: scale(1.05); }
}

.panel-logs-stand {
  width: 50px;
  height: 30px;
  background: #555;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

.panel-logs-base {
  width: 120px;
  height: 15px;
  background: #878787;
  margin: 5px auto 0 auto;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}

.panel-logs-list li.log-success {
	background-color: #28A745; /* azul */
	color: #FFFFFF;
}

.panel-logs-list li.log-warning {
	background-color: #FFC107; /* gris claro */
	color: #000000;
}

.panel-logs-list li.log-error {
	background-color: #D2D6DE; /* azul */
	color: #262626;
}