:root {
  --itacih-blue: #3d64a1;
  --itacih-green: #7bc69f;
}
* {
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
}
#left, #center, #right {
  flex-direction: column;
  height: 100%;
  display: flex;
}
#left, #right {
  width: 250px;
}

#center {
  width: calc(100% - 400px);
  justify-content: center;
}
#center .welcome {
  margin-bottom: 90px;
}
#left .top,
#left .bottom,
#right .top,
#right .bottom {
  height: 250px;
}
#left .middle,
#right .middle {
  height: calc(100% - 500px);
}
#left .top {
  padding-left: 40px;
  padding-top: 30px;
}
#left .top img {
  height: 75px;
}
#right .bottom{
  padding-right: 10px;
  padding-bottom: 30px;
}
#right .bottom #contact-info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--itacih-blue);
  font-size: 16px;
}
#center {
  flex-direction: column;
}
#center .top {
  height: 125px;
}
#center .top #status-info {
  text-align: center;
  color: #225971;
}
#center .middle {
  height: calc(100% - 250px);
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#center .middle .icons {
  margin-bottom: 15px;
  text-align: center;
}
#center .middle #qr {
  margin-top: 10px;
}
#center .middle .buttons .button {
  width: 330px;
  padding: 7px 5px 5px 5px;
  background: #469cbe;
  color: #f8f8f2;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  margin-bottom: 15px;
}
#center .middle .buttons #button-bank-id-same-device {
  display: none;
}
#center .middle .buttons .button:hover {
  background: #225971;
}
#center .middle .buttons #cancel-login {
  display: none;
}
#center .middle .buttons #select-auth {
  color: var(--itacih-blue);
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  font-weight: normal;
  margin-top: 20px;
  display: none;
}
#center .middle .buttons .link {
  color: #475f8c;
  cursor: pointer;
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
}
#center .middle .welcome {
  display: flex;
  flex-direction: column;
  text-align: center;
}
#center .middle .welcome h3 {
  color:#225971;
  margin-bottom: 5px;
}
#center .middle .welcome p {
  color:#469cbe; margin-top: 0px;
}
#center .waiting {
  display: none;
}

@media (max-width: 800px) {
  #left, #right {
    display: none;
  }
  #center {
    width: 100%;
  }
}

@media (max-width: 1000px) {
  #center .middle .welcome {
    max-width: 300px;
  }
}