body {
  font-family: "Roboto Condensed", "Helvetica", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f6f3f0;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50.41' height='87' patternTransform='scale(2) rotate(90)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(30, 25%, 95%, 1)'/><path d='M25.3 87L12.74 65.25m0 14.5h-25.12m75.18 0H37.68M33.5 87l25.28-43.5m-50.23 29l4.19 7.25L16.92 87h-33.48m33.48 0h16.75-8.37zM8.55 72.5L16.92 58m50.06 29h-83.54m79.53-50.75L50.4 14.5M37.85 65.24L50.41 43.5m0 29l12.56-21.75m-50.24-14.5h25.12zM33.66 29l4.2 7.25 4.18 7.25M33.67 58H16.92l-4.18-7.25M-8.2 72.5l20.92-36.25L33.66 0m25.12 72.5H42.04l-4.19-7.26L33.67 58l4.18-7.24 4.19-7.25M33.67 29l8.37-14.5h16.74m0 29H8.38m29.47 7.25H12.74M50.4 43.5L37.85 21.75m-.17 58L25.12 58M12.73 36.25L.18 14.5M0 43.5l-12.55-21.75M24.95 29l12.9-21.75M12.4 21.75L25.2 0M12.56 7.25h-25.12m75.53 0H37.85M58.78 43.5L33.66 0h33.5m-83.9 0h83.89M33.32 29H16.57l-4.18-7.25-4.2-7.25m.18 29H-8.37M-16.74 0h33.48l-4.18 7.25-4.18 7.25H-8.37m8.38 58l12.73-21.75m-25.3 14.5L0 43.5m-8.37-29l21.1 36.25 20.94 36.24M8.37 72.5H-8.36'  stroke-width='1' stroke='hsla(259, 0%, 92%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  position: relative;
}
html, body {
  min-height: 100vh;
}
* {
  box-sizing: border-box;
  outline: none;
}
.serif {
  font-family: 'DM Serif Display', serif;
}
.text-center {
  text-align: center;
}
.login-wrapper,
.illustration {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.illustration img {
  width: 65%;
  max-width: 540px;
}
.bg-white {
  background-color: white;
}
#login_form {
  position: relative;
  z-index: 10;
  overflow: auto;
  max-width: 700px;
}


.login21 {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
}
.cursor-pointer {
  cursor: pointer;
}
.login-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 117px;
}

.login21 input[type="text"],
.login21 input[type="password"],
.login21 input[type="email"],
.login21 input[type="number"]{
  width: 350px;
  padding: 15px;
  border: 1px solid var(--grey-300);
  transition: border 320ms;
}
.login21 input:focus {
  border: 1px solid var(--orange-200);
}

#login_form dd {
  margin: 0;
  margin-bottom: 5px;
}

#login_form dt {
  display: none;
}
.mb-5 {
  margin-bottom: 5px;
}
.login21 input[type="submit"],
.login21 button[type="submit"],
.login21 button[type="button"]{
  background-color: var(--orange-200);
  color: #ffffff;
  padding: 15px;
  text-transform: uppercase;
  width: 350px;
  outline: none;
  cursor: pointer;
  border: none;
}
.justify-center {
  justify-content: center;
}
button[disabled="disabled"],button[disabled], input[disabled="disabled"] {
  opacity: .5;
  cursor: not-allowed !important;
}

#footer {
  background-color: #fff;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 5;text-align: center;
  padding: 25px;
  border-top:1px solid var(--grey-300);
}

#footer img { height: 25px;}

#form-section {
  margin: 0 auto;
  overflow: auto;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.warning, .success, .error, .info, ul.errors {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid;
}

.warning p, .success p, .error p, .info p, ul.errors li {
  font-size: .9em;
  margin: 0;
  padding: 0;
}

.info, .index_info {
  color: #00529b;
  background: #bde5f8;
  border: 1px solid;
}

.warning {
  color: #9f6000;
  background: #feefb3;
}

.success, #flasher {
  color: #4f8a10;
  background: #dff2bf;
  border: 0px solid;
}

.error, .errors, #errorflasher {
  color: #d8000c;
  background: #ffbaba;
  border: 1px solid red;
}

.grid {
  display: grid;
}
.grid-two-col {
  grid-template-columns: 1fr 1fr;
}
h2 {
  font-weight: normal;
}

a {
  text-decoration: none;
  color: #DC6413;
}
.fg-orange {
  color: #DC6413;
}

.flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}

.mb-25 {
  margin-bottom: 25px;
}
.login-errors ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #f44336;
}
[v-cloak] {
  display: none !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
.gradient-btn {
  background: linear-gradient(90deg,#ee5d31 0,#FF9E2F 109.15%);
  transition: opacity 320ms;
}
.custom-loader {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side,#DC6413 94%,#0000) top/4px 4px no-repeat,
    conic-gradient(#0000 30%,#DC6413);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);
  animation:s3 1s infinite linear;
}
.login-errors p {
  max-width: 331px;
}
.service-message {
  max-width: 350px;
  background-color:#df552e24;
}
@keyframes s3{
  100%{transform: rotate(1turn)}
}

@media (max-width: 768px) {
  .login-wrapper {
    position: absolute;
    height: auto;
    padding: 20px;
    left: 50%;
    transform: translate(-50%);
    top: 100px;
    width: calc(100vw - 40px);
  }
  .login21 .login-wrapper input,
  .login21 .login-wrapper button {
    width: 100%;
  }
  .login21 .login-wrapper input {
    font-size: 16px;
    padding: 6px;
    margin-bottom: 8px;
  }
  .login21 .login-wrapper input[type="number"]::placeholder {
    font-size: 13px;
  }
  #login_form {
    width: 100%
  }
  .illustration {
    min-width: 100vw;
  }
  .illustration img {
    position: fixed;
    bottom: 0;
  }
}