body{color: rgb(75, 75, 75) !important;}



.log-reg-container{

  height: 100%;

  width: 100%;

  display: flex;

}



.log-reg-side{

  height: 100%;

  position: relative;

}



.log-reg-side:first-child{

  width: 60%;

  height: 100vh;

}



.representative-picture{

  position: fixed;

  width: 100%;

  height: 100%;

  background-repeat: no-repeat;

  background-size: cover;

  background-attachment: fixed;

}



.log-reg-side:last-child{

  padding: 1em 1.5em 2em;

  width: 40%;

  background-color: #f6f8fc;

  min-height: 100vh;

  height: 100%;

}



.back-btn {

  font-weight: bold;

  display: flex;

  flex-direction: row;

  height: 50px;

  align-items: center;

  gap: 10px;

  color: #303f90;

}



.back-btn svg{

  width: 60px;

  height: 50px;

}



.form-intro {

  color: rgb(75, 75, 75);

  display: flex;

  margin-top: 90px;

  flex-direction: column;

  align-items: center;

}



.form-intro p{text-align: center;}



.logo {

  width: 100%;

  margin: 0 auto;

  display: contents;

}



.logo img {

  max-width: 500px;

  width: 60%;

  margin-bottom: 30px;

}



form{

  display: flex;

  gap: 5px;

  flex-direction: column;

  max-width: 90%;

  margin: 0 auto;

}



label{

  /* color: rgb(75, 75, 75); */

  display: block;

  margin: 10px 0;

}



input, select{

  box-sizing: border-box;

  display: block;

  width: 100%;

  min-height: 40px;

  padding: .375rem .75rem;

  font-size: 1rem;

  line-height: 1.5;

  color: rgb(75, 75, 75);

  background-color: white !important;

  background-clip: padding-box;

  border: 1px solid #bcbcbc;

  border-radius: 8px;

  font-size: 14px;

  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

}



input::placeholder, select::placeholder{color: #a5a5a5;}



.form-divided {

  display: flex;

  flex-direction: row;

  gap: 3em;

}



.form-divided .side:first-child {width: 25%;}

.form-divided .side:last-child {width: 75%;}



form p {

  font-size: 15px;

  margin-bottom: 0;

  color: rgb(75, 75, 75);

}



.forgot{

  margin: 15px 0;

  color: #303f90;

}



form ul{padding: 0 0 0 20px;}

form ul li{color: #fcb638;}

form ul li span{color: rgb(75, 75, 75);}

.accept{margin: 0.6em 0;}



.accept, .remember{

  display: flex;

  gap: 10px;

  flex-direction: row;

  justify-content: flex-start;

  align-items: center;

}



input[type="checkbox"]{

  width: 15px;

  height: 15px;

}



.accept a, .remember a{

  font-weight: bold;

  color: #303f90;

  text-decoration: underline;

}



button{

  cursor: pointer;

  max-width: 100%;

  width: 100%;

  font-size: 16px;

  display: flex;

  text-align: center;

  background-color: #303f90;

  color: white;

  align-items: center;

  margin: 0 0 10px;

  justify-content: center;

  padding: 0 1em;

  height: 40px;

  border-radius: 8px;

  gap: 0.4em;

  transition: .4s ease-in-out;

  border: 1px solid #303f90;

}



button:hover {

  color: #303f90;

  font-weight: bold;

  background-color: white;

}



.question {

  gap: 20px;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  font-weight: bold;

}



.question a{color: #303f90;}



/* Custom Login Page */

.login-form form{max-width: 80%;}

/* End */



/* Responsive Mode */

@media (max-width: 1920px){

  .form-intro {margin-top: 50px;}

}



@media (max-width: 1600px){

  .form-intro {margin-top: 30px;}

}



@media (max-width: 1300px){

  .log-reg-side:first-child {width: 40%;}

  .log-reg-side:last-child {width: 60%;}

}



@media (max-width: 1100px){

  .log-reg-side:first-child {width: 40%;}

  .log-reg-side:last-child {width: 60%;}

  .login-form .form-intro img {max-width: 400px;}

}



@media (max-width: 700px){

  .form-intro {margin-top: 20px;}



  .log-reg-side:first-child{

    display: none;

    width: 0;

  }



  .log-reg-side:last-child {width: 100%;}



  .back-btn svg {

    width: 30px;

    height: 30px;

  }



  .logo img {

    width: 80%;

    margin-bottom: 20px;

  }



  .login-form form {max-width: 90%;}

  .register form {max-width: 100%;}

  .form-divided {gap: 1em;}

  .accept {font-size: 14px;}



  /* .appn-item {width: 100% !important;} */

}