body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

::-webkit-input-placeholder {
  color: #a19eb4;
}
::-moz-placeholder {
  color: #a19eb4;
}
:-ms-input-placeholder {
  color: #a19eb4;
}
:-moz-placeholder {
  color: #a19eb4;
}

#auth {
  display: none;
}

#auth input {
  font-family: Arial, serif;
  position: fixed;
  background-color: #f2f2f2;
  border: 0;
  outline: none;
  color: #423965;
}

.m-input {
  font-size: 15px;
  padding: 7px;
}

.d-input {
  font-size: 18px;
  padding: 9px;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #cfe7f1;
}

.img {
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
}

#orientation, #min-width, #min-height, #min-size, #max-width, #unsupported-browser, #unsupported-device, #bad-internet-connection {
  display: none;
}

#min-height {
  z-index: 2;
}

#min-width {
  z-index: 3;
}


#min-size {
  z-index: 4;
}

#orientation {
  z-index: 5;
}

#max-width {
  z-index: 6;
}

#unsupported-browser {
  z-index: 7;
}

#unsupported-device {
  z-index: 8;
}

#bad-internet-connection {
  z-index: 9;
}

#unsupported-device .mes, #bad-internet-connection .mes, #offline .mes {
  color: #3c3360;
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0 10px 0 10px;
}

#unsupported-device .mes h1, #bad-internet-connection .mes h1, #offline .mes h1 {
  margin-bottom: .3em;
  font-weight: 600;
  display: block;
}

#unsupported-device .mes .text, #bad-internet-connection .mes .text, #offline .mes .text {
  font-weight: 600;
}

#unsupported-device .img, #bad-internet-connection .img, #offline .img {
  bottom: -2px;
  width: 305px;
  height: 57vh;
  background: url(../assets/img/message/unsupported-browser.svg) no-repeat bottom;
}

#unsupported-browser {
  min-height: 480px;
}

#unsupported-browser .mes {
  color: #3c3360;
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 14vh auto 0 auto;
  max-width: 40vw;
  min-width: 380px;
}

#unsupported-browser .mes h1 {
  font-size: 2.2em;
  font-weight: 600;
  display: block;
}

#unsupported-browser .mes .text {
  font-size: 1.1em;
  font-weight: 600;
}

.mes .text a {
  color: #3c3360;
}

#unsupported-browser .img {
  bottom: -2px;
  width: 305px;
  height: 247px;
  background: url(../assets/img/message/unsupported-browser.svg) no-repeat bottom;
}

#orientation .img {
  width: 70%;
  height: 100%;
  background: url(../assets/img/message/incorrect_orientation.svg) no-repeat center;
}

#min-height .img {
  bottom: -1px;
  width: 400px;
  height: 232px;
  background: url(../assets/img/message/min_height.svg) no-repeat bottom;
}

#min-width .img {
  bottom: -1px;
  width: 281px;
  height: 300px;
  background: url(../assets/img/message/min_width.svg) no-repeat bottom;
}

#min-size .img {
  bottom: -1px;
  width: 400px;
  height: 232px;
  background: url(../assets/img/message/min_size.svg) no-repeat bottom;
}

#max-width .img {
  bottom: -1px;
  width: 450px;
  height: 700px;
  background: url(../assets/img/message/max_width.svg) no-repeat bottom;
}

#bad-internet-connection .text a, #offline .text a {
  text-decoration: underline;
  cursor: pointer;
}

@media only screen and (min-width: 768px) and (min-height: 580px) {
  #unsupported-device .mes, #bad-internet-connection .mes, #offline .mes {
    margin-top: 200px;
  }

  #unsupported-device .mes h1, #bad-internet-connection .mes h1, #offline .mes h1 {
    font-size: 2.3em;
  }

  #unsupported-device .mes .text, #bad-internet-connection .mes .text, #offline .mes .text {
    font-size: 1.5em;
  }
}

@media only screen and (max-width: 700px) and (max-height: 400px) {
  #unsupported-device .mes h1, #bad-internet-connection .mes h1, #offline .mes h1 {
    margin-top: .2em;
    font-size: 1.9em;
  }
}