html,
body {
  height: auto;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

* {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.login-form-window
{
  width: 100%;
  min-height: 100vh;
  height: auto;
  position: absolute;
  top:0px;
  left: 0px;
  background-color: #f1f7fc;
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  background-image: url("/includes/image/?get=system/circuits");
}

.login-form-container
{
  width: min(350px, calc(100vw - 24px));
  max-width: 100%;
  height: auto;
  min-height: 480px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*-webkit-box-shadow: 0px 0px 0px 2px #d4d4d4;
  -moz-box-shadow: 0px 0px 0px 2px #d4d4d4;
  box-shadow: 0px 0px 0px 2px #d4d4d4;*/
  border-radius: 5px;
  background-color: #ffffff;
  transition: .3s ease;
  overflow: hidden;
  box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15) !important;
}


@media screen and (max-width: 480px)
{
  .login-form-window {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding:
      env(safe-area-inset-top, 0px)
      env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 0px);
  }

  .login-form-container
  {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none !important;
  }

  .login-form-input-container,
  .login-form-box,
  .login-form-action {
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
  }

  .login-form-or {
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
  }

  .login-form-button {
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
    box-sizing: border-box;
    min-height: 48px;
    line-height: 48px;
  }

  .login-form-title {
    font-size: 24px;
    line-height: 1.2;
    height: auto;
    padding: 0 16px;
    margin-top: 24px;
  }
}

@media screen and (max-height: 700px) and (min-width: 481px)
{
  .login-form-container
  {
    top: 24px;
    transform: translate(-50%, 0);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.login-form-logo
{
  width: 120px;
  height: 80px;
  position: relative;
  float: left;
  margin-top: 17px;
  margin-left: calc(50% - 60px);
  margin-right: calc(50% - 60px);
  border-radius: 50%;
  background-color: #ffffff;
}

.login-form-logo-image
{
  width: 120px;
  height: 80px;
  position: absolute;
  left: 0px;
  background-repeat:no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position: center;
  background-image: url("/includes/image/?get=system/logo");
}

.login-form-input
{
  width: calc(100% - 10px);
  position: relative;
  float: left;
  border: 1px solid lightgray;
  height: 40px;
  font-size: 16px;
  border-radius: 3px;
  background-color: #ffffff;
  padding-left: 10px;
}

.login-form-input-container
{
  width: 300px;
  margin-left: 25px;
  margin-right: 25px;
  background-color: #ffffff;
  position: relative;
  float: left;
  margin-top: 20px;
  margin-bottom: 5px;
  height: 40px;
}

.login-form-input-text-save
{
  width: calc(100% - 50px);
  position: relative;
  float: left;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  margin-left: 10px;
  z-index: 130;
  color: gray;
}

.login-form-input-text
{
  width: auto;
  position: absolute;
  top:0px;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  background-color: transparent;
  transition: .3s ease;
  pointer-events: none;
  margin-left: 10px;
  margin-right: 1px;
  z-index: 130;
  color: gray;
}

.login-form-input-container input:valid ~ .login-form-input-text
{
  top:-8px;
  height: 15px;
  font-size: 12px;
  margin-left: 10px;
  line-height: 15px;
  background-color: #ffffff;
  color: darkgreen;
}

.login-form-input:focus
{
  border-color: darkgreen;
}

.login-form-input-container input:focus ~ .login-form-input-text
{
  top:-8px;
  height: 15px;
  font-size: 12px;
  margin-left: 10px;
  line-height: 15px;
  background-color: #ffffff;
  color: black;
}

.login-form-title
{
  width: 100%;
  height: 50px;
  position: relative;
  float: left;
  margin-top: 30px;
  font-size: 30px;
  line-height: 50px;
  text-align:center;
  background-color: #ffffff;
}

.login-form-button
{
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  float: left;
  margin: 5px;
  height: 40px;
  text-align: center;
  line-height: 40px;
	border-radius:3px;
	display:inline-block;
	cursor:pointer;
	font-size:16px;
	text-decoration:none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-repeat: no-repeat;
  -webkit-background-size: 18px;
  -moz-background-size: 18px;
  -o-background-size: 18px;
  background-size: 18px;
  background-position: center;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #0747a6;
  background-color:#006ce0;
  color:#ffffff;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 16px;
}

.login-form-button:active
{
    margin-top: 18px;
  border-bottom-width: 0px;
}

.login-form-or
{
  width: calc(100% - 50px);
  margin-left: 25px;
  margin-right: 25px;
  height: 2px;
  background-color: #d4d4d4;
  color: #d4d4d4;
  font-size: 14px;
  position: relative;
  float: left;
  margin-top: 20px;
  margin-bottom: 10px;
}

.login-form-box
{
  width: 350px;
  margin-left: calc(50% - 175px);
  margin-right: calc(50% - 175px);
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  float: left;
}

.login-form-or::after
{
  content: attr(or-text);
  position: absolute;
  width: 50px;
  font-size: 14px;
  color: #4f4f4f;
  left: calc(50% - 25px);
  background-color: white;
  text-align: center;
  height: 14px;
  line-height: 14px;
  top: -7px;
}

.login-form-action
{
  width: 350px;
  margin-left: calc(50% - 175px);
  margin-right: calc(50% - 175px);
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  float:left;
}

.login-form-log-in
{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  z-index: 500;
  display: none;
}

.login-form-log-in-back
{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background-color: black;
  opacity: 0.3;
  z-index: 200;
}

.login-form-log-in-load
{
  position: absolute;
  height: 30px;
  width: 30px;
  background-color: transparent;
  border-radius: 30px;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
  animation: loader 1.5s infinite; /*linear*/
  border: 10px solid #000000;
  border-left-color: transparent;
  border-right-color: transparent;
}

@keyframes loader
{
  from{ transform: rotateZ(0deg);}
  to{ transform: rotateZ(360deg);}
}


.login-form-qr-container
{
  width: 150px;
  height: 150px;
  position: relative;
  float: left;
  background-repeat: no-repeat;
  -webkit-background-size: 150px;
  -moz-background-size: 150px;
  -o-background-size: 150px;
  background-size: 150px;
  background-position: center;
  margin-left: 100px;
  margin-right: 100px;
}

.login-form-text-container
{
  width: 300px;
  margin-left: 25px;
  margin-right: 25px;
  position: relative;
  float: left;
  height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
  user-select: text;
}

.login-form-input-checkbox
{
  position: relative;
  float: left;
  height: 20px;
  width: 20px;
  margin: 10px;
}