html, body {
  padding: 0px;
  margin: 0px !important;
  overflow: hidden;
  font-size: 13px;
  font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
}

body {
  background: #fafafa;
  overflow: auto;

}


.main-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 7% 1fr 7%;
  height: 100vh;
}

.top-bar {
  background: black;
}

.bottom-bar {
  background: black;
  color: white;
  font-weight: bold;

  display: grid;
}

.bottom-bar div {
  padding-right: 10px;
  justify-self: right;
  align-self: center;
  color: #ff9800;

}


.middle {
  display: grid;
  grid-template-columns: 1fr 0.25fr 1fr;
  grid-template-rows: 1fr;
  /*background: #f3f3f3;*/
  background: url("../../images/login/fondo-aira.jpeg");
  background-size: cover;
}

.middle > div.left {
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: repeat(1, 1fr);
  align-self: center;
  justify-self: right;
  font-weight: bold;
  font-size: 25px;
}

.middle .logo {
  justify-self: right;
  width: 45%;
}

.middle .systemName {
  justify-self: left;
}


.middle > div.right {
  align-self: center;
  justify-self: left;
}


.login {
  font-family: Arial;
  font-size: 14px;
  color: #868583;

  border: 1px solid #c0c0c0;
  background: #fffdf9;
  width: 200px;
  /*height: 210px;*/

  padding: 5px;

  box-shadow: 2px 2px 7px 1px #bdbdbd;
}

.submitButton {
  margin-top: 15px;
  padding: 5px;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 14px;
  font-weight: bold;
  width: 100%;
  cursor: pointer;
}

.input_elements {
  width: 180px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #e38549;
}

.required-field {
  font-size: 0.8em; 
  color:#b71c1c;
  font-weight: bold;
  font-style: italic;
}