.login-form-window
{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background-color: #f1f7fc;
}

.login-form-container
{
  width: 350px;
  height: 515px;
  position: absolute;
  top:calc(50% - 257.5px);
  left: calc(50% - 175px);
  /*-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: 450px)
{
  .login-form-container
  {
    width: 100%;
    min-width: 350px;
    left: 0px;
    border-radius: 0px;
  }
}

@media screen and (max-height: 700px)
{
  .login-form-container
  {
    width: 100%;
    min-width: 350px;
    left: 0px;
    border-radius: 0px;
  }
}

.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/grisoft-automotive-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;
}