.auth{
	background-image: url(../img/Background-large.svg);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.auth .visual {
  	background: url(../img/Illustration-login.svg);
	display: block;
    background-repeat: no-repeat;
	background-position:  center;
	width: 805px;
	height: 579px;
}

.auth .ui.form {
   background-color: white;
   width: 20%;
   max-width: 374px;
   border-radius: 5px;
   padding: 5px 30px;
}

.pwa.auth .ui.form {
   margin-left: 0px;
   background: #f8f8f8;
}

.auth .ui.form .logo {
  margin: 40px auto;
  max-width: 239px;
  margin-bottom: 10px
}

.auth .ui.form .header.baseline {
  color: #7C7C7C;
  margin-bottom:40px
}

.auth .ui.form .header{
  text-align: center;
  margin-bottom: 20px
}

.auth .ui.form .header .title{
  font-size: 16px
}

.auth .ui.form .header p{
  font-size: 14px;
  color: #7C7C7C;
}

.auth .ui.form .field.password{
  font-size: 13px;
  color: #7BAFE5;
}

.auth .ui.form .field input,
.forgot-password .ui.form .field input,
.reset-password .ui.form .field input{
  background-color: rgba(189, 189, 189, 0.2);
  color: #000;
}

.auth .ui.form  button.submit.yellow{
  margin-top: 23px;
  margin-bottom: 50px;
}
  
@media screen and (max-width: 1920px) {
	.auth .visual {
	background-size: 95% 95%;
	}
}

@media screen and (max-width: 1600px) {
  .auth .ui.form {
    margin-left: 30px;
    width: 25%;
  }
  .auth .visual {
	width: 704px;
	height: 506px;
  }
}

@media screen and (max-width: 1280px) {
  .auth .ui.form {
    margin-left: 50px;
  }
  .auth .visual {
	width: 583px;
	height: 414px;
  }
  .auth .ui.form {
    width: 25%;
  }
}

@media screen and (max-width: 1100px) {
  .auth .visual {
	width: 483px;
	height: 347px;
  }
  .auth .ui.form {
    width: 25%;
  }
}

@media screen and (max-width: 1024px) {
  .auth {
    background-image: none;
  }
  .auth .ui.form {
    margin-right: 0px;
    width:100%;
  }
  .auth .visual {
  	background: none;
  	display: none;
  }
}

.forgot-password {
  max-width: 500px;
  margin: 0 auto;
}

.forgot-password .logo {
  max-width: 250px;
  margin: 0 auto;
  margin-top: 20px;
}

.forgot-password .success-icon {
  margin-top: 20px;
  text-align: center;
}

.forgot-password .header {
  margin: 30px 0;
  text-align: center;
}

.forgot-password .header .title {
  font-size: 16px
}

.forgot-password p.detail {
  font-size: 14px;
  color: #7C7C7C;
}


.reset-password {
  max-width: 500px;
  margin: 0 auto;
}

.reset-password .logo {
  max-width: 250px;
  margin: 0 auto;
}

.reset-password .header {
  margin: 30px auto;
}

.reset-password .header .title {
  text-align: center;
  font-size: 16px
}

.reset-password .ui.form .field.error .message {
  color: #9f3a38;
  font-size: 12px
}