/* $color-dark--op75: rgba(0, 0, 0, 0.75);
$color-dark--op70: rgba(0, 0, 0, 0.7);
$color-dark--op50: rgba(0, 0, 0, 0.5);
$color-dark--op30: rgba(0, 0, 0, 0.3);
$color-dark--op20: rgba(0, 0, 0, 0.2);

$color-form-border: rgba(0, 0, 0, 0.15);*/
/* $text-color: #C3D4D2; */
.login-body {
  font-family: "Source Sans Pro", sans-serif;
  letter-spacing: 0.3px;
  background-color: #11332e;
  color: #ffffff;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  grid-template-rows: auto;
}
@media screen and (max-width: 1024px) {
  .login-body {
    display: block;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .login-body {
    grid-template-columns: 1fr 2fr;
  }
}
@media (min-width: 2560px) {
  .login-body {
    grid-template-columns: 1.5fr 2fr;
  }
}
.login-body a {
  color: #ffffff;
}

.image-section {
  /*     &::before {

          content: ' ';
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;

          background-image: url(/assets/no_auth/archive_page.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: right bottom;
          opacity: 0.08;
      } */
  display: grid;
  grid-template-columns: minmax(30px, 0.45fr) minmax(0, 1fr) minmax(30px, 0.45fr);
  grid-template-rows: minmax(30px, 0.4fr) auto minmax(30px, 0.4fr);
  grid-template-areas: ". . ." ". img ." ". . .";
}
@media screen and (max-width: 1024px) {
  .image-section {
    display: none;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .image-section {
    grid-template-columns: minmax(30px, 0.15fr) minmax(0, 1fr) minmax(30px, 0.15fr);
  }
}
@media (min-width: 2560px) {
  .image-section {
    grid-template-columns: minmax(50px, 0.7fr) minmax(0, 1fr) minmax(50px, 0.7fr);
  }
}
.image-section .archive-page-bg {
  grid-column: -1/1;
  grid-row: 1/4;
  z-index: 0;
  background-image: url(/assets/no_auth/archive_page.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right bottom;
  opacity: 0.05;
}
.image-section .figurine-image {
  z-index: 1;
  grid-area: img;
  align-self: center;
}
.image-section .figurine-image img {
  width: 100%;
  object-fit: contain;
}

.login-section {
  display: grid;
  grid-template-columns: minmax(80px, 0.4fr) minmax(0, 1.2fr) minmax(80px, 0.4fr);
  grid-template-rows: minmax(50px, 0.3fr) auto minmax(50px, 0.3fr);
  grid-template-areas: ". . ." ". content ." ". . .";
}
@media screen and (max-width: 1024px) {
  .login-section {
    grid-template-columns: minmax(0, 10vw) auto minmax(0, 10vw);
    grid-template-rows: minmax(0, 10vh) auto minmax(0, 10vh);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .login-section {
    grid-template-columns: minmax(80px, 0.4fr) minmax(0, 1.4fr) minmax(80px, 0.4fr);
  }
}
@media (min-width: 2560px) {
  .login-section {
    grid-template-columns: minmax(80px, 1fr) minmax(0, 1.5fr) minmax(80px, 1fr);
  }
}
.login-section .login-content {
  grid-area: content;
  height: 100%;
}
.login-section .login-content img {
  width: 110px;
  margin-bottom: 10vh;
}
@media screen and (max-width: 1024px) {
  .login-section .login-content img {
    width: 100px;
    margin-bottom: 8vh;
  }
}
.login-section .login-content .login-title {
  font-size: 31px;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
  white-space: nowrap;
  font-family: "PT Serif", serif;
  letter-spacing: 0.5px;
}
@media (max-width: 1440px) {
  .login-section .login-content .login-title {
    font-size: 28px;
    white-space: normal;
  }
}
.login-section .login-content .login-description {
  font-size: 15px;
  color: #ffffff9c;
  margin-top: 20px;
}

.login-form {
  margin: 5vh 0;
  color: #ffffff9c;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  margin-bottom: 6px;
  font-weight: 600;
  color: #ffffff;
}

.form-control {
  background: #11332e;
  border: 1px solid #909695;
  color: #ffffff;
}
.form-control::placeholder {
  font-size: 14px;
  color: #ffffff9c;
}
.form-control:focus {
  border: 1px solid #ffffff9c;
}

.btn-success {
  color: #ffffff;
  background-color: #36756d;
  border-color: #366f67;
  height: 45px;
  letter-spacing: 0.3px;
  font-size: 15px;
  margin-top: 25px;
}
.btn-success:hover, .btn-success:focus-within, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus {
  background-color: #347a71;
  border-color: #35776e;
}

.login-credits {
  text-align: center;
  color: #ffffff9c;
}
.login-credits a {
  color: #ffffff9c;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #909695;
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0px 1000px #11332e inset;
  transition: background-color 5000s ease-in-out 0s;
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
textarea:autofill,
textarea:autofill:hover,
textarea:autofill:focus,
select:autofill,
select:autofill:hover,
select:autofill:focus {
  border: 1px solid #909695;
  color: white !important;
  box-shadow: none;
  transition: none;
  background: transparent;
}

.alert-danger {
  background-color: #f4364ec2;
  border: none;
}

.alert {
  padding: 15px 15px;
  border-radius: 3px;
  margin-bottom: 30px;
}