:root {
  --primary-hover-rgb: 0,58,51;
  --bs-primary-rgb: 0, 79, 64; /* #004f40 */
  --bs-primary: rgb(var(--bs-primary-rgb));
  --bs-secondary-rgb: 174, 206, 203; /* #aececb */
  --bs-secondary: rgb(var(--bs-secondary-rgb));
  --bs-dark-rgb: 51, 51, 51; /* #333 */
  --bs-dark: rgb(var(--bs-dark-rgb));
  --bs-light-rgb: 251, 251, 251; /* #fbfbfb */
  --bs-light: rgb(var(--bs-light-rgb));
  --bs-danger-rgb: 241,95,90; /* #f15f5a */
  --bs-danger: rgb(var(--bs-danger-rgb));
  --bs-blue-300: #00a5f9;
  --bs-body-bg: #D9F6ED;
  --bs-gray-light: #7e7e7e;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--primary-hover-rgb);
  --bs-primary-shadow: #004f4066;
  --bs-hound-green-rgb: 67, 210, 164; /* #43D2A4 */
  --bs-hound-green: rgb(var(--bs-hound-green-rgb));
  --bs-navy-rgb: 5, 56, 84; /* #053854 */
  --bs-navy: rgb(var(--bs-navy-rgb));
  --select-height: 36px;
  --transition: all 0.2s ease-in-out;
  --topaz: #ffcc80;
  --crayola-rgb: 253, 174, 47; /* #fdae2f */
}

@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/LeagueSpartan-Bold.woff2) format("woff2"),
  url(/fonts/LeagueSpartan-Bold.woff) format("woff");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Poppins-Regular.woff2) format("woff2"),
  url(/fonts/Poppins-Regular.woff) format("woff");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url(/fonts/Poppins-Italic.woff2) format("woff2"),
  url(/fonts/Poppins-Italic.woff) format("woff");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/Poppins-Bold.woff2) format("woff2"),
  url(/fonts/Poppins-Bold.woff) format("woff");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: url(/fonts/Poppins-BoldItalic.woff2) format("woff2"),
  url(/fonts/Poppins-BoldItalic.woff) format("woff");
}

@font-face {
  font-family: "Qualy";
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/Qualy.otf) format("opentype"),
  url(/fonts/Qualy.ttf) format("truetype");
}

.bg-hound-green {
  background-color: var(--bs-hound-green);
}

.bg-navy {
  background-color: var(--bs-navy);
}

.text-hound-green {
  color: var(--bs-hound-green);
}

.text-navy {
  color: var(--bs-navy);
}

.btn-outline-navy {
  --bs-btn-color: var(--bs-navy);
  --bs-btn-border-color: var(--bs-navy);
  --bs-btn-hover-bg: var(--bs-navy);
  --bs-btn-hover-border-color: var(--bs-navy);
  --bs-btn-hover-color: white;
  --bs-btn-focus-shadow-rgb: var(--bs-navy-rgb);
  --bs-btn-active-bg: white;
  --bs-btn-active-border-color: white;
  --bs-btn-active-color: var(--bs-navy);
}

h2, h3 {
  color: var(--bs-primary);
  font-family: 'League Spartan', sans-serif;
}

h5 {
  font-size: 1.25em;
  font-family: 'League Spartan', sans-serif;
}

h6 {
  font-size: 1em;
  font-family: 'League Spartan', sans-serif;
  margin-bottom: 1.25rem;
}

.fs-4-sm {
  font-size: 1.375rem !important;
}

.fs-5-sm {
  font-size: 1.125rem !important;
}

.fs-7 {
  font-size: .875rem !important;
}

.fs-8 {
  font-size: .75rem !important;
}

.ff-league-spartan {
  font-family: 'League Spartan', sans-serif;
}

.ff-qualy {
  font-family: 'Qualy', sans-serif;
}

.text-topaz {
  color: var(--topaz);
}

a.text-secondary:hover,
a.text-secondary:focus,
a.text-secondary:focus-visible {
  color: var(--bs-primary)!important;
  outline: none;
}

.cursor-pointer {
  cursor: pointer;
}

.btn {
  --bs-btn-padding-x: 1.46rem;
  --bs-btn-padding-y: .406rem;
  --bs-btn-border-radius: 1.5rem;
}

.btn-lg {
  --bs-btn-padding-x: 2.3rem;
  --bs-btn-padding-y: 0.66rem;
}

.btn-lg.btn-with-icon {
  --bs-btn-padding-x: 1.5rem;
}

.btn.btn-lg:not(:focus, :focus-visible) {
  --bs-btn-box-shadow: 0 2px 10px 4px rgb(0, 72, 64, .15);
  box-shadow: var(--bs-btn-box-shadow);
}

.btn-primary,
.btn-secondary,
.btn-white {
  --bs-btn-bg: rgb(var(--btn-color-rgb));
  --bs-btn-active-bg: rgb(var(--btn-second-color-rgb));
  --bs-btn-disabled-color: rgb(var(--btn-color-rgb));
  --bs-btn-border-color: rgb(var(--btn-color-rgb));
  --bs-btn-active-border-color: rgb(var(--btn-second-color-rgb));
  --bs-btn-disabled-border-color: rgb(var(--btn-color-rgb));
  --bs-btn-hover-bg: rgb(var(--btn-second-color-rgb));
  --bs-btn-hover-border-color: rgb(var(--btn-color-rgb));
  --bs-btn-focus-shadow-rgb: var(--btn-color-rgb);
}

.btn-primary {
  --btn-color-rgb: var(--bs-primary-rgb);
  --btn-second-color-rgb: var(--primary-hover-rgb);
  --bs-btn-color: var(--bs-white);
}

.btn-secondary {
  --btn-color-rgb: var(--bs-secondary-rgb);
  --btn-second-color-rgb: var(--bs-primary-rgb);
  --bs-btn-color: rgb(var(--btn-second-color-rgb));
}

.btn-white {
  --btn-color-rgb: var(--bs-white-rgb);
  --btn-second-color-rgb: var(--bs-white-rgb);
  --bs-btn-color: var(--bs-dark);
}

.btn-outline-primary,
.btn-outline-white,
.btn-outline-crayola {
  --bs-btn-color: rgb(var(--btn-outline-color-rgb));
  --bs-btn-active-bg: rgb(var(--btn-outline-color-rgb));
  --bs-btn-disabled-color: rgb(var(--btn-outline-color-rgb));
  --bs-btn-border-color: rgb(var(--btn-outline-color-rgb));
  --bs-btn-active-border-color: rgb(var(--btn-outline-color-rgb));
  --bs-btn-disabled-border-color: rgb(var(--btn-outline-color-rgb));
  --bs-btn-hover-bg: rgb(var(--btn-outline-color-rgb));
  --bs-btn-hover-border-color: rgb(var(--btn-outline-color-rgb));
  --bs-btn-focus-shadow-rgb: var(--btn-outline-color-rgb);
}

.btn-outline-primary {
  --btn-outline-color-rgb: var(--bs-primary-rgb);
}

.btn-outline-white {
  --btn-outline-color-rgb: var(--bs-white-rgb);
  --bs-btn-hover-color: var(--bs-primary);
}

.btn-outline-crayola {
  --btn-outline-color-rgb: var(--crayola-rgb);
}

.btn svg {
  width: 1em;
  height: 1em;
  font-size: 1em;
}

body {
  font-family: "Poppins", sans-serif;
  color: var(--bs-dark);
  min-height: 100%;
  min-width: 320px;
}

.centered-card {
  border-radius: 2rem;
  box-shadow: 0 4px 20px 5px rgb(0, 72, 64, .15);
  border: 2px solid var(--bs-secondary);
  max-width: 650px;
}

.card {
  border-radius: 2rem;
  position: relative;
}

.body-bg{
  background: var(--bs-body-bg);
}

.btn-gray{
  color: var(--bs-gray-light);
  border-color: var(--bs-gray-light);
}

.flipper {
  position: relative;
  perspective: 1000px;
  margin-bottom: -3rem;
  min-height: 100%;
  display: flex;
  max-width: 650px;
}

.flipper .card {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 4px 20px 5px rgb(0, 72, 64, .15);
  transition: all .5s ease-in-out;
  transform-style: preserve-3d;
  border: 2px solid var(--bs-secondary);
  width: 100%;
}

.flipper .card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.flipper .card:nth-child(1) {
  transform: rotateY(0deg);
  visibility: visible;
}

.flipper .card:nth-child(2) {
  transform: rotateY(180deg);
  visibility: hidden;
  margin-left: -100%;
}

.flipped .flipper .card:nth-child(1) {
  transform: rotateY(180deg);
  visibility: hidden;
}

.flipped .flipper .card:nth-child(2) {
  transform: rotateY(360deg);
  visibility: visible;
}

.card.bg-hound-green {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: relative;
  max-width: 650px;
  border: none;
  display: flex;
  flex-direction: row;
  align-self: stretch;
  align-items: center;
  text-align: center;
  color: var(--bs-navy);
}

.card.bg-hound-green .card-body {
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: var(--transition);
}

.card.bg-hound-green .card-body:nth-child(2) {
  margin-left: -100%;
}

.card.bg-hound-green .card-body:nth-child(2),
.flipped .card.bg-hound-green .card-body:nth-child(1) {
  pointer-events: none;
  opacity: 0;
}

.card.bg-hound-green .card-body:nth-child(1),
.flipped .card.bg-hound-green .card-body:nth-child(2) {
  pointer-events: all;
  opacity: 1;
}

.card .close {
  position: absolute;
  right: -.25rem;
  top: -.25rem;
  font-size: 1.75rem;
  width: 1em;
  height: 1em;
  z-index: 1;
}

.card .close img {
  width: 1em;
  height: 1em;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: var(--transition);
}

.card .close:focus {
  outline: none;
}

.card .close:hover img,
.card .close:focus img {
  font-size: 1.3em;
}

.card-body {
  padding: 2rem 1rem;
  height: 100%;
  z-index: 0;
}

.form-field {
  position: relative;
}

.form-control {
  border-radius: 1.5rem;
  border-color: var(--bs-secondary);
  padding: .5rem .75rem .5rem 3em;
}

.form-control::placeholder {
  color: var(--bs-secondary);
}

.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgb(var(--bs-secondary-rgb), .5);
  border-color: var(--bs-secondary);
}

.form-control.input-validation-error {
  border-color: var(--bs-danger);
}

.form-control.input-validation-error:focus {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 0.25rem rgb(var(--bs-danger-rgb), .3);
}

.form-field label {
  position: absolute;
  left: .3rem;
  top: 0;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-field label svg {
  width: 1em;
  height: 1em;
  font-size: 1.7em;
}

.form-field.form-field-password .expose {
  position: absolute;
  background: url(/images/icons/eye-closed.svg) no-repeat center;
  background-size: contain;
  font-size: 1.5em;
  right: 0.6em;
  top: 0;
  bottom: 0;
  width: 1em;
  cursor: pointer;
}

.form-field.form-field-password.exposed .expose {
  background-image: url(/images/icons/eye-opened.svg);
}

.form-field.form-field-password .form-control {
  padding-right: 3em;
}

.form-field.form-field-tac {
  font-size: 0.6em;
}

.form-field.form-field-tac label {
  position: relative;
  left: 0;
  top: 0;
  color: var(--bs-dark);
}

.form-field.form-field-tac label a {
  color: var(--bs-navy);
  font-weight: bold;
}

.form-field.form-field-tac input {
  position: relative;
  top: 3px;
  margin-right: 5px;
}

.validation-summary-errors {
  max-width: 600px;
  margin: auto;
  font-size: .75rem;
}

.validation-summary-errors ul {
  border: 1px solid var(--bs-danger);
  border-radius: 1rem;
  background-color: rgb(var(--bs-danger-rgb), .3);
  margin-top: 1rem;
  margin-bottom: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--bs-dark);
  text-align: left;
  padding-right: 1rem;
}

.code .form-control {
  width: 2em;
  height: 2em;
  line-height: 2em;
  font-size: 1rem;
  padding: 0;
  border-radius: 10px;
}

.logo a {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--bs-secondary);
  text-decoration: none;
}

.logo a > span {
  display: flex;
  font-size: calc(0.6rem + 0.2vw);
  align-items: center;
  flex-wrap: nowrap;
  gap: .25rem;
}

.logo svg {
  width: 1em;
  height: 1em;
}

.scout .logo {
  position: fixed;
  left: 1rem;
  top: 1rem;
  text-align: right;
}

.scout .logo h1 {
  margin-bottom: -0.1em;
  line-height: 1;
  font-size: 3.5rem;
}

a.sign-up-toggle {
  position: absolute;
  right: 0;
  top: -3.5rem;
  border-width: 2px;
  box-shadow: 0 4px 10px 2px rgb(255, 204, 128, .15);
}

.text-small {
  color: #707070;
}

.form-field .form-control[disabled],
.form-field .form-control[readonly] {
  background-color: rgb(198, 212, 212, .3);
}

.form-field .form-control[disabled]:focus,
.form-field .form-control[readonly]:focus {
  box-shadow: 0 0 0 .25rem rgb(174, 206, 203, .3);
}

.form-field .select2-container .select2-selection {
  padding-left: 3em;
  border-radius: 1.5rem !important;
  border-color: var(--bs-secondary);
  height: var(--select-height);
  outline: none;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: stretch;
}

.form-field .select2-container.select2-container--focus .select2-selection,
.form-field .select2-container.select2-container--open .select2-selection {
  box-shadow: 0 0 0 .25rem rgb(var(--bs-secondary-rgb), .5);
}

.form-field .input-validation-error + .select2-container .select2-selection {
  border-color: var(--bs-danger);
}

.form-field .input-validation-error + .select2-container.select2-container--focus .select2-selection {
  box-shadow: 0 0 0 .25rem rgb(var(--bs-danger-rgb), .3);
}

.form-field .select2-container .select2-selection__rendered {
  padding-left: 0;
  padding-right: 28px;
  width: 100%;
  color: var(--bs-dark);
}

.select2 {
  text-align: left;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  font-size: 1.25em;
  color: var(--bs-secondary);
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: var(--bs-primary);
}

.select2-dropdown.multiple li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--bs-dark) !important;
}

span.select2-container .select2-dropdown.multiple li[aria-selected=true] {
  background-color: white;
}

span.select2-container .select2-dropdown.multiple li.select2-results__option--highlighted {
  background-color: rgb(var(--bs-secondary-rgb), .5);
}

.select2-dropdown.multiple li::before {
  width: 1em;
  height: 1em;
  min-width: 1em;
  content: " ";
  border: 1px solid var(--bs-secondary);
  font-size: 1.31rem;
  box-shadow: 0 2px 10px #00484026;
  border-radius: 5px;
  display: block;
  background-color: white;
}

span.select2-container .select2-dropdown.multiple li[aria-selected=true]::before {
  background-color: var(--bs-primary);
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  gap: .25rem;
  align-items: center;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-secondary-rgb), .5);
  border: none;
  margin: 0;
  padding: 3px 10px;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove {
  display: none;
}

.select2-container .select2-selection--multiple .select2-search__field {
  margin-top: 0;
}

.select2-container .select2-selection--multiple li + li .select2-search__field {
  display: none;
}

.form-field .select2-container .select2-selection__arrow {
  right: .5rem;
  top: 0;
  height: 100%;
}

.form-field .select2-container .select2-selection__arrow b {
  border-width: 6px 6px 0 6px;
  display: flex;
  align-items: center;
}

.form-field .select2-container--default.select2-container--open .select2-selection__arrow b {
  border-width: 0 6px 6px 6px;
}

.form-field .select2-container .select2-selection__placeholder, .select2-search__field::placeholder {
 color: var(--bs-secondary)
}

span.select2-container .select2-dropdown {
  border-color: var(--bs-secondary);
  border-radius: 1.5em;
  margin-top: .1rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem #00000026;
  font-size: .75rem;
}

span.select2-container .select2-results__option {
  border-radius: 1.5rem;
  line-height: 1.5rem;
}

span.select2-container .select2-results__option[aria-selected=true] {
  background-color: var(--bs-primary);
  color: white;
}

span.select2-container .select2-results__option--highlighted[aria-selected=true] {
  background-color: rgb(var(--bs-primary-rgb), .9);
}

span.select2-container .select2-results__option--highlighted[aria-selected=false] {
  background-color: rgb(var(--bs-secondary-rgb), .5);
  color: var(--bs-dark);
}

span.select2-container .select2-search--dropdown .select2-search__field {
  outline: none;
  border: none;
  border-bottom: 1px solid var(--bs-secondary);
  margin-bottom: 3px;
}

.type-selection a {
  color: var(--bs-dark);
  border: 1px solid var(--bs-secondary);
  box-shadow: 0 2px 10px 4px rgb(0, 79, 64, .15);
  border-radius: 2rem;
  width: 1em;
  height: 1em;
  font-size: 13.5rem;
  text-decoration: none;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.type-selection a:hover,
.type-selection a:focus {
  border-color: var(--bs-primary);
  border-width: 3px;
  box-shadow: 0 0.3rem 1rem 0.2rem rgb(0, 0, 0, .2);
  outline: none;
}

.type-selection a img {
  height: .5em;
}


@media (min-width: 768px) {
  .card {
    width: 100%;
  }

  .flipper {
    margin-left: -3rem;
    margin-bottom: 0;
  }

  .card.bg-hound-green {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 2rem;
    width: 60%;
    min-height: 320px;
    max-width: 320px;
  }

  .card.bg-hound-green .card-body {
    padding-right: 4em;
    padding-top: 1rem;
  }

  .registration .btn {
    flex-basis: 35%;
  }
}

@media (min-width: 768px) {
  .card.bg-hound-green {
    min-height: 300px;
  }

  .confirmation .form-control {
    width: 3rem;
  }

  .confirmation .btn {
    flex-basis: 22%;
  }

  .blob-holder.confirmation::after {
    height: 95%;
  }
}

@media (min-width: 992px) {
  .blob-holder::after {
    background-size: contain;
  }

  .blob-holder.confirmation::after {
    height: 88%;
  }
}

.text-blue-300 {
  color: var(--bs-blue-300)
}

.text-danger {
  color: var(--bs-danger) !important;
}

.text-hint,
.text-hint a {
  color: #767676;
  font-size: .75rem;
}

.text-hint a:hover {
  text-decoration: none;
}

.scout form {
  max-width: 400px;
}

/** Others **/

.initials,
.company-logo {
  width: 3em;
  height: 3em;
  font-size: 4rem;
  border: 1px solid var(--bs-secondary);
  color: var(--bs-secondary);
  box-shadow: 0 4px 4px 1px rgb(0, 72, 64, .15);
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  border-radius: 50%;
}

.company-logo {
  font-size: 2.4rem;
  box-shadow: none;
}

.company-logo img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

form.reset-password {
  max-width: 580px;
}

form.reset-password .form-field {
  width: 100%;
}