/* CSS Document */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-WYi1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4i1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-NYi1UA.ttf) format('truetype');
}
:root {
  --font-family-rubik: 'Rubik', sans-serif;
  --font-size-md: 14pt;
  --font-size: 10pt;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --color-black: #707070;
  --color-white: #fff;
  --color-blue: #3B4859;
  --color-red: #F67776;
  --color-red-2: #f75e5d;
}
* {
  box-sizing: border-box;
  outline: none !important;
}
.tran,
.tran * {
  transition: all 0.3s ease-in-out;
}
.input-text {
  font-family: var(--font-family-rubik);
  font-size: var(--font-size);
  line-height: var(--font-size-md);
  color: var(--color-black);
  padding: 20px 40px;
  border-radius: 100px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
body {
  font-family: var(--font-family-rubik);
  font-size: var(--font-size);
  line-height: var(--font-size-md);
  color: var(--color-black);
  padding: 20px 40px;
  border-radius: 100px;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-weight: var(--font-weight-regular);
}
.login {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: url() no-repeat top left transparent;
  background-size: auto 100%;
  display: flex;
}
.login::before {
  content: '';
  width: 60%;
  background: url("/images/login-background.webp") no-repeat right center transparent;
  background-size: cover;
}
.login .login-box {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.login .login-box .logo {
  width: 120px;
  margin-bottom: 80px;
}
.login .login-box > div {
  width: 350px;
  max-width: 90%;
}
.login .login-box > div > div {
  margin-bottom: 25px;
  position: relative;
}
.login .login-box > div > div > label {
  position: absolute;
  bottom: -25px;
  left: 0px;
  width: 100%;
  font-weight: var(--font-weight-medium);
  color: var(--color-red);
}
.login .login-box > div > span {
  font-weight: var(--font-weight-light);
  display: block;
  margin-top: 100px;
}
.login .login-box input[type="text"],
.login .login-box input[type="password"] {
  font-family: var(--font-family-rubik);
  font-size: var(--font-size);
  line-height: var(--font-size-md);
  color: var(--color-black);
  padding: 20px 40px;
  border-radius: 100px;
  width: 100%;
  transition: all 0.3s ease-in-out;
  border: solid 1px var(--color-blue);
}
.login .login-box input[type="text"]:focus,
.login .login-box input[type="password"]:focus {
  border-color: var(--color-red);
}
.login .login-box input[type="submit"],
.login .login-box button {
  font-family: var(--font-family-rubik);
  font-size: var(--font-size);
  line-height: var(--font-size-md);
  color: var(--color-black);
  padding: 20px 40px;
  border-radius: 100px;
  width: 100%;
  transition: all 0.3s ease-in-out;
  border: none;
  background-color: var(--color-red);
  color: var(--color-white);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  position: relative;
}
.login .login-box input[type="submit"]:hover,
.login .login-box button:hover {
  background-color: var(--color-red-2);
}
.login .login-box.loading input[type="text"],
.login .login-box.loading input[type="password"] {
  opacity: 0.3;
}
.login .login-box.loading input[type="submit"],
.login .login-box.loading button {
  color: var(--color-red);
  background-color: var(--color-red) !important;
  cursor: default;
}
.login .login-box.loading input[type="submit"]::after,
.login .login-box.loading button::after {
  content: url("/images/loader.svg");
  width: 34px;
  height: 34px;
  position: absolute;
  top: calc(50% - 17px);
  left: calc(50% - 17px);
}
.login .login-box.loading[disabled] {
  background-color: var(--color-red) !important;
  cursor: default;
}
@media (max-width: 992px) {
  .login::before {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: auto 80%;
    background-position: -40vw top;
  }
  .login .login-box {
    position: relative;
    z-index: 2;
    width: 100%;
  }
  .login .login-box > div {
    width: 300px;
  }
  .login .login-box > div > div {
    margin-bottom: 15px;
  }
  .login .login-box > div > span {
    margin-top: 40px;
  }
  .login .login-box .logo {
    width: 90px;
    margin-bottom: 40px;
  }
  .login .login-box input[type="text"],
  .login .login-box input[type="password"],
  .login .login-box input[type="submit"],
  .login .login-box button {
    padding: 15px 25px;
  }
}
@media (max-width: 768px) {
  .login::before {
    background-size: auto 400px;
    background-position: -35vw top;
    opacity: 0.4;
  }
  .login .login-box > div {
    max-width: 80%;
  }
}