/**
  * Auth System CSS
  *
  * Note: On Debug build, Auth JS/CSS does not build automatically, use command: 'gulp auth' or 'npm run gulp auth'
  */
/*
 * Colours
 */
:root {
  --clr-eximia-pink: #E61F63;
  --clr-eximia-pink-rgb: 230,31,99;
  --clr-eximia-pink-60: #f078a0;
  --clr-eximia-pink-60-rgb: 240,120,160;
  --clr-eximia-orange: #EC6525;
  --clr-eximia-orange-rgb: 242,101,34;
  --clr-eximia-purple: #672E5F;
  --clr-eximia-purple-rgb: 103,46,95;
  --clr-eximia-lilac: #E2ADF2;
  --clr-eximia-lilac-rgb: 226,173,242;
  --clr-eximia-dkblue: #0200B1;
  --clr-eximia-dkblue-rgb: 2,0,177;
  --clr-eximia-ltblue:#8ee3ef;
  --clr-eximia-ltblue-rgb: 142,227,239;
  --clr-eximia-yellow: #FCDC4D;
  --clr-eximia-yellow-rgb: 252,220,77;
  --clr-white: #FFFFFF;
  --clr-black: #000000;
  --clr-black-05: #F2F2F2;
  --clr-black-20: #CCCCCC;
  --clr-black-40: #999999;
  --clr-black-60: #666666;
  --clr-black-80: #333333;
  --clr-success: #55CC55;
  --clr-error: #CC3333;
  --clr-focus-box-shadow: 0 0 0 0.25rem rgba(var(--clr-eximia-pink-rgb),0.25);
}

:root {
  --bs-font-sans-serif: var(--font-auth);
  --bs-body-color: var(--clr-black-80);
  --bs-body-font-size: 1.125rem;
  --bs-link-color: var(--clr-eximia-pink);
  --bs-link-color-rgb: var(--clr-eximia-pink-rgb);
  --bs-link-hover-color: var(--clr-eximia-pink-60);
  --bs-link-hover-color-rgb: var(--clr-eximia-pink-60-rgb);
}

.body-gradient {
  height: 100vh;
  background-color: rgba(var(--clr-eximia-pink-rgb), 1);
  background-attachment: fixed;
  background-image: linear-gradient(to bottom, transparent, rgba(var(--clr-eximia-pink-rgb), 1)), linear-gradient(to right, rgba(var(--clr-eximia-yellow-rgb), 1) 0%, rgba(var(--clr-eximia-yellow-rgb), 1) 12.666%, rgba(var(--clr-eximia-ltblue-rgb), 1) 20.666%, rgba(var(--clr-eximia-ltblue-rgb), 1) 46%, rgba(var(--clr-eximia-lilac-rgb), 1) 54%, rgba(var(--clr-eximia-lilac-rgb), 1) 79.333%, rgba(var(--clr-eximia-yellow-rgb), 1) 87.333%, rgba(var(--clr-eximia-yellow-rgb), 1) 100%);
  background-size: 1200% auto;
  animation: bg-animation 60s linear infinite;
  position: relative;
}

@keyframes bg-animation {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
/*
 * Auth Container
 */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%; /* keeps top of panel visible when window height < panel */
  padding-block: 0.75rem; /* matches container-fluid inline padding */
}

/*
 * Component: Auth Panel
 */
.auth-panel {
  width: 100%;
  max-width: 500px;
  background-color: var(--clr-white);
  border-radius: 1rem;
}

.auth-panel--wide {
  max-width: 992px;
}

/* Header */
.auth-panel__header {
  padding: 3rem 1rem;
}

.auth-panel__logo {
  max-width: 250px;
  margin-inline: auto;
}

.auth-panel__strapline {
  padding-block-start: 3rem;
  text-align: center;
  font-size: 1.375rem;
  color: var(--clr-eximia-pink);
}

/* Body */
.auth-panel__body {
  padding: 0 1rem;
}

/* Footer */
.auth-panel__footer {
  padding: 3rem 1rem 2rem;
}

.auth-panel__footer-text {
  text-align: center;
  font-size: 0.875rem;
  margin-block-end: 1rem;
}

.auth-panel__company-text {
  text-align: center;
  font-size: 0.625rem;
  color: var(--clr-black-40);
}

@media (min-width: 768px) {
  .auth-panel__header {
    padding-inline: 2rem;
  }
  .auth-panel__body {
    padding-inline: 3rem;
  }
  .auth-panel__footer {
    padding-inline: 2rem;
  }
}
/*
 * Typography
 */
.h2, h2 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-block-end: 0.5em;
}

/*
 * Button
 */
.btn-auth {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--clr-black-20);
  border-radius: 0.25rem;
  background-color: var(--clr-white);
  font-size: 1rem;
  line-height: 1.1em;
}
.btn-auth:hover, .btn-auth:active {
  border-color: var(--clr-black-40);
}

.btn-auth img {
  width: 21px;
}
/*# sourceMappingURL=auth.css.map */