/***********************************************************
 Reset
 ***********************************************************/
body {
  font-style: normal;
  font-weight: 300;
}

a {
  text-decoration: none !important;
}

textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.form-control:focus {
  outline: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
}

.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  box-shadow: none;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  background-image: none !important;
  padding-right: 12px !important;
}

.font-12px {
  font-size: 12px !important;
}

.font-14px {
  font-size: 14px !important;
}

.font-16px {
  font-size: 16px !important;
}

.font-18px {
  font-size: 18px !important;
}

.font-20px {
  font-size: 20px !important;
}

.font-30px {
  font-size: 30px !important;
}

.tipee-blue {
  color: #0C6ECB;
}

.text-soft {
  color: #76838f;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-grab {
  cursor: grab;
}
.cursor-grab:active {
  cursor: grabbing;
}

.success {
  color: #198754 !important;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: start;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: end;
}

.shrink-none {
  flex-shrink: 0;
}

.gap-xs {
  gap: var(--spacing-v4);
}

.gap-s {
  gap: var(--spacing-v8);
}

.gap-m {
  gap: var(--spacing-v16);
}

.gap-l {
  gap: var(--spacing-v24);
}

.gap-xl {
  gap: var(--spacing-v32);
}

.w-auto {
  width: auto;
}

.h-m {
  height: var(--size-v40);
}

.h-l {
  height: var(--size-v40);
}

.w-full {
  width: 100%;
}

.mb-s {
  margin-bottom: var(--spacing-v8);
}

.mb-m {
  margin-bottom: var(--spacing-v16);
}

.mb-l {
  margin-bottom: var(--spacing-v24);
}

.mb-xl {
  margin-bottom: var(--spacing-v32);
}

.mt-s {
  margin-top: var(--spacing-v8);
}

.mt-m {
  margin-top: var(--spacing-v16);
}

.mt-l {
  margin-top: var(--spacing-v24);
}

.mt-xl {
  margin-top: var(--spacing-v32);
}

.label-m {
  font: var(--font-label-m);
}

.text-s {
  font: var(--font-text-s);
}

.text-m {
  font: var(--font-text-m);
}

.text-l {
  font: var(--font-text-l);
}

.textBold-l {
  font: var(--font-textBold-l);
}

.title-s {
  font: var(--font-title-s);
}

.title-m {
  font: var(--font-title-m);
}

.title-l {
  font: var(--font-title-l);
}

.rounded-full {
  border-radius: var(--radiuses-full);
}

/*
 * Layout
 */
html {
  width: 100%;
  height: 100%;
}

body {
  container-type: inline-size;
  background-color: var(--ly-level0);
  width: 100%;
  height: 100%;
  font-weight: 400;
  color: var(--fg-greyStrong-default);
}

main {
  height: 100%;
  display: flex;
  overflow: auto;
  align-items: center;
  flex-direction: column;
  padding: 0 var(--spacing-v24);
}

footer {
  display: flex;
  justify-content: center;
  padding-bottom: var(--spacing-v16);
}

.banner {
  background-image: url("../../images/login-tipee-blank-XPdRGAu.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  width: 100%;
  border-radius: 0 0 var(--radiuses-v24) var(--radiuses-v24);
}

.wrapper {
  min-height: 100%;
  width: 1600px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-v24);
}
.wrapper .content {
  width: 100%;
  display: flex;
  padding: 0 var(--spacing-v24);
  flex-direction: column;
  align-items: center;
  margin: auto;
}
.wrapper .card {
  width: var(--overlay-s);
  max-width: 100%;
  padding: var(--spacing-v40);
  background-color: var(--bg-white-default);
  border-radius: var(--radiuses-v24);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-layerLevel1);
}
.wrapper .card.lifted {
  margin-top: -150px;
}
.wrapper .client-logo {
  width: 110px;
  height: 110px;
  border-radius: var(--radiuses-v16);
  background-color: var(--bg-grey-light-default);
  color: var(--fg-greyMedium-default);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .client-logo img {
  max-height: 100%;
  max-width: 100%;
  pointer-events: none;
}
.wrapper .client-logo.blank {
  height: auto;
  width: 90px;
  border-radius: 0;
  background-color: transparent;
}

/*
 * Typography
*/
h1 {
  margin: 0;
}

a {
  color: var(--fg-blue-default);
  text-decoration: none;
  font-weight: 500;
  transition: color 150ms ease-in-out;
  cursor: pointer;
}
a:hover {
  color: var(--fg-blue-hover);
}

p {
  font: var(--font-text-m);
  margin: 0;
}

/*
 * Inputs
 */
form {
  width: 100%;
}
form .error-label {
  color: var(--fg-error-default);
}

input, input:hover, input:focus, input:focus-visible,
select,
select:hover,
select:focus,
select:focus-visible {
  border: none;
  padding: 0;
  background: transparent;
}

/* input containers expects to have only one direct div child */
.input-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--size-v40);
  outline: 1px solid var(--br-grey-medium);
  border-radius: var(--radiuses-full);
  background-color: var(--bg-white-default);
  overflow: hidden;
  /* to avoid weird animation, "outline-offset -1px" isn't animated on focus */
  transition-property: outline-color, outline-width, outline-offset;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
}
.input-container * {
  transition: color 150ms ease-in-out;
}
.input-container ~ .error-label {
  margin: var(--spacing-v4) 0 0 var(--spacing-v16);
}
.input-container input[type=text],
.input-container input[type=password] {
  height: 100%;
  width: 100%;
  color: var(--fg-greyStrong-default);
  outline: none;
}
.input-container input[type=text],
.input-container input[type=password] {
  padding: 0 var(--spacing-v16) 0 var(--spacing-v40);
}
.input-container input[type=text]:only-child,
.input-container input[type=password]:only-child {
  padding: 0 var(--spacing-v16);
}
.input-container i {
  color: var(--fg-greyMedium-default);
}
.input-container.error {
  outline-color: var(--fg-error-default);
}
.input-container.error i:not(.clickable) {
  color: var(--fg-error-default);
}
.input-container.disabled {
  background-color: var(--bg-grey-light-default);
  outline: none;
}
.input-container.disabled input, .input-container.disabled i {
  color: var(--fg-greyStrong-disabled);
}
.input-container:not(.error):not(.disabled):hover {
  outline-color: var(--br-grey-strong);
}
.input-container:not(.error):not(.disabled):focus, .input-container:not(.error):not(.disabled):focus-within {
  outline-color: var(--br-blue-strong);
  outline-width: 2px;
  /*outline-offset: -1px;*/
}
.input-container:not(.error):not(.disabled):focus i:not(.clickable), .input-container:not(.error):not(.disabled):focus-within i:not(.clickable) {
  color: var(--br-blue-strong);
}
.input-container > *:first-child {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-v8);
  width: 100%;
  height: 100%;
}
.input-container > *:first-child i:nth-child(n+2) {
  right: 0;
}
.input-container i {
  position: absolute;
  margin: 0 var(--spacing-v16) 0 var(--spacing-v16);
}
.input-container i.clickable:hover {
  cursor: pointer;
  color: var(--br-blue-strong);
}
.input-container i:not(.clickable) {
  pointer-events: none;
}
.input-container input::placeholder {
  color: var(--fg-greyLight-default);
}

.select-container, button.outlined {
  height: var(--size-v40);
  display: flex;
  align-items: center;
  border: 1px solid var(--br-grey-medium);
  border-radius: var(--radiuses-full);
  background-color: var(--bg-white-default);
  overflow: hidden;
  color: var(--fg-greyStrong-default);
  transition-property: background-color;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
}
.select-container > *:first-child, button.outlined > *:first-child {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-v8);
  width: 100%;
  height: 100%;
}
.select-container > *:first-child i:nth-child(n+2), button.outlined > *:first-child i:nth-child(n+2) {
  right: 0;
}
.select-container:hover, button.outlined:hover {
  background-color: var(--bg-grey-light-default);
}
.select-container select, button.outlined select {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  height: 100%;
  padding: 0 var(--spacing-v40) 0 var(--spacing-v16);
  cursor: pointer;
}
.select-container select:only-child, button.outlined select:only-child {
  padding: 0 var(--spacing-v16);
}
.select-container select::placeholder, button.outlined select::placeholder {
  color: var(--fg-greyLight-default);
}

.select-container i {
  position: absolute;
  margin: 0 var(--spacing-v16) 0 var(--spacing-v16);
  cursor: pointer;
  pointer-events: none;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-v8);
  height: var(--size-v40);
  padding: 0 var(--spacing-v16) 0 var(--spacing-v16);
  background-color: var(--bg-pink-strong-default);
  border-radius: var(--radiuses-full);
  border: none;
  color: var(--fg-white-default);
  font-weight: 500;
  transition: background-color 150ms ease-in-out;
}
button:hover {
  background-color: var(--bg-pink-strong-hover);
}

.icon-square-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-v16);
  cursor: pointer;
  transition-property: color, background-color;
  transition-timing-function: ease-in-out;
  transition-duration: 150ms;
}
.icon-square-link.active {
  background-color: var(--bg-grey-light-default);
  border-radius: var(--radiuses-v8);
  padding: var(--spacing-v8);
}
.icon-square-link .subtext {
  font: var(--font-text-s);
  color: var(--fg-greyMedium-default);
}
.icon-square-link:hover {
  color: var(--fg-blue-default);
}
.icon-square-link:hover .icon-square {
  color: var(--fg-blue-default);
  background-color: var(--bg-grey-light-hover);
}
.icon-square-link .icon-square {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--size-v32);
  width: var(--size-v32);
  color: var(--fg-greyMedium-default);
  border-radius: var(--radiuses-v8);
  background-color: var(--bg-grey-light-default);
}
.icon-square-link .icon-square.size-l {
  height: var(--size-v40);
  width: var(--size-v40);
}
.icon-square-link input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
}

.avatar {
  height: 100px;
  width: 100px;
  overflow: hidden;
  border-radius: var(--radiuses-full);
}

input[type=checkbox].custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  --size: 1.1em;
  height: var(--size);
  width: var(--size);
  min-width: var(--size);
  min-height: var(--size);
  border: 1px solid var(--br-grey-medium);
  border-radius: var(--radiuses-v4);
  background-color: var(--bg-white-default);
  transform: translateY(0.2em);
  position: relative;
  cursor: pointer;
  transition: all 150ms ease;
  transition-property: background-color, border-color;
}
input[type=checkbox].custom-checkbox + label {
  cursor: pointer;
  margin-left: var(--spacing-v8);
  user-select: none;
  -webkit-user-select: none;
}
input[type=checkbox].custom-checkbox::after {
  font-family: "Font Awesome 7 Pro";
  content: "\f00c";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75em;
  color: var(--fg-white-default);
  transition: color 150ms ease;
}
input[type=checkbox].custom-checkbox:not(:checked):hover::after {
  color: var(--br-grey-medium);
}
input[type=checkbox].custom-checkbox:checked {
  background-color: var(--bg-blue-strong-default);
  border-color: var(--bg-blue-strong-default);
}
input[type=checkbox].custom-checkbox:checked:hover {
  background-color: var(--bg-blue-strong-hover);
  border-color: var(--bg-blue-strong-hover);
}

/*
 * Alerts
 */
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

/*
 * Container queries
*/
@container (width < 600px) {
  main {
    padding: 0;
  }
  .banner {
    height: 170px;
    border-radius: 0;
  }
  .wrapper .content {
    padding: 0 var(--spacing-v24);
  }
  .wrapper .card {
    padding: var(--spacing-v24);
  }
  .wrapper .card.lifted {
    margin-top: -50px;
  }
}

/*# sourceMappingURL=base_login.output.css.map */