/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties;
body {
  font-family: 'Noto Sans Thai', sans-serif;
  color: #aaaaaa;
}
p {
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 300;
  font-style: normal;
}
.font-thin {
  font-weight: 100;
  font-style: normal;
}
.font-extralight {
  font-weight: 200;
  font-style: normal;
}
.font-regular {
  font-weight: 400;
  font-style: normal;
}
.font-medium {
  font-weight: 500;
  font-style: normal;
}
.font-bold {
  font-weight: 700;
  font-style: bold;
}
.text-header {
  font-size: var(--text-4xl, 2.25rem);
  line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));
  --tw-leading: var(--leading-tight, 1.25);
  line-height: var(--leading-tight, 1.25);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  @media (width >= 48rem) {
    font-size: var(--text-5xl, 3rem);
    line-height: var(--tw-leading, var(--text-5xl--line-height, 1));
  }
  color: #444;
}
.text-gray,
.text-custom-gray {
  color: #aaa;
}
.text-black,
.text-custom-black {
  color: #444;
}
.text-normal-gray {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-normal, 400);
  font-weight: var(--font-weight-normal, 400);
  color: #aaa;
}
.text-medium-gray {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: #aaa;
}
.text-semibold-gray {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: #aaa;
}
.text-bold-gray {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: #aaa;
}
.text-normal-black {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-normal, 400);
  font-weight: var(--font-weight-normal, 400);
  color: #444;
}
.text-medium-black {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: #444;
}
.text-semibold-black {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: #444;
}
.text-bold-black {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: #444;
}
.register-button-active {
  background-image: linear-gradient(to right, #00bcff, #3261d9);
}
.tab-button {
  flex: 1 1 0%;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #00bcff;
  border-radius: 8px;
  color: #00bcff;
}
.tab-login {
  z-index: 1;
  cursor: pointer;
}
.tab-signup {
  margin-left: -0.75rem;
  cursor: pointer;
}
.tab-button.active {
  background-image: linear-gradient(to right, #00bcff, #3261d9);
  color: #fff;
  border-radius: 8px;
  z-index: 10;
  position: relative;
  cursor: auto;
}
.form-grid-vertical {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing, 0.25rem) * 6);
  @media (width >= 48rem) {
    gap: calc(var(--spacing, 0.25rem) * 6);
  }
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing, 0.25rem) * 2);
}
.form-label {
  display: block;
  color: #444444;
  margin-bottom: calc(var(--spacing, 0.25rem) * 0);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-leading: var(--leading-normal, 1.5);
  line-height: var(--leading-normal, 1.5);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
.form-input {
  width: 100%;
  display: block;
  color: #000;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.625;
  border: solid 1px #aaaaaa;
  border-radius: 8px;
  box-shadow: none;
  padding: 0.625rem 0.75rem;
}
.form-input.border-none {
  border: none;
  border-style: none;
  box-shadow: none;
}
.form-error,
.error-message {
  display: block;
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-leading: var(--leading-normal, 1.5);
  line-height: var(--leading-normal, 1.5);
  --tw-font-weight: var(--font-weight-normal, 400);
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-red-500, oklch(63.7% 0.237 25.331));
}
.button-primary {
  flex: 1 1 0%;
  padding: 12px 24px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  z-index: 10;
  color: #fff;
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
}
.button-primary.disabled {
  background-color: #ccc;
  border: 1px solid #bbb;
  cursor: not-allowed;
  pointer-events: none;
}
.button-primary.active {
  background-image: linear-gradient(to right, #00bcff, #3261d9);
  border: 1px solid #00bcff;
}
.button-primary.disabled,
.disabled:disabled {
  cursor: not-allowed;
}
#register-type-container label {
  background-color: #fff;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
}
#register-type-container label.selected {
  border: 1px solid #00bcff;
  background-color: #00bcff;
}
i.hidden {
  display: none;
}
input.invalid-input {
  border-color: #ef4444;
  box-shadow: none;
}
input.valid-input {
  border-color: #22c55e;
  box-shadow: none;
}
.peer:invalid ~ .peer-invalid-text {
  display: block;
}
.peer:invalid {
  border-color: #ef4444;
  --tw-ring-color: #ef4444;
  box-shadow: 0 0 0 1px var(--tw-ring-color);
}
.custom-focus:focus-visible {
  outline: none;
  border: none;
  box-shadow: 0 0 0 1px transparent;
}
.custom-focus:focus {
  outline: none;
  border: 1px solid #0ea5e9;
  box-shadow: 0 0 0 1px #0ea5e9;
}
.success-message {
  color: #22c55e;
  margin-bottom: 0.5rem;
}
.code-input-box {
  width: 42px;
  height: 56px;
  font-size: 20px;
  color: #aaaaaa;
  font-weight: 700;
  border: 1px solid #aaaaaa;
  border-radius: 8px;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.2s ease-in-out;
  outline: none;
  box-shadow: none;
  @media (width >= 48rem) {
    width: 64px;
    height: 86px;
    font-size: 32px;
  }
}
.code-input-box:focus {
  border: 1px solid #0ea5e9;
  box-shadow: none;
  outline: none;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@-webkit-keyframes color {
  100%,
  0% {
    stroke-width: 4px;
    stroke: white;
  }
  40% {
    stroke: white;
  }
  66% {
    stroke: white;
  }
  80%,
  90% {
    stroke: white;
  }
}
@keyframes color {
  100%,
  0% {
    stroke-width: 4px;
    stroke: white;
  }
  40% {
    stroke: white;
  }
  66% {
    stroke: white;
  }
  80%,
  90% {
    stroke: white;
  }
}
@-webkit-keyframes color-secondary {
  100%,
  0% {
    stroke-width: 4px;
    stroke: #0766a8;
  }
  40% {
    stroke: #0766a8;
  }
  66% {
    stroke: #0766a8;
  }
  80%,
  90% {
    stroke: #0766a8;
  }
}
@keyframes color-secondary {
  100%,
  0% {
    stroke-width: 4px;
    stroke: #0766a8;
  }
  40% {
    stroke: #0766a8;
  }
  66% {
    stroke: #0766a8;
  }
  80%,
  90% {
    stroke: #0766a8;
  }
}
.loading-icon {
  display: inline-block;
  -webkit-animation: rotate 1.5s linear infinite;
  animation: rotate 1.5s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  width: 50%;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loading-icon.hidden {
  display: none !important;
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
  &.path-secondary {
    -webkit-animation: dash 1.5s ease-in-out infinite, color-secondary 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color-secondary 6s ease-in-out infinite;
  }
}
.toggle-password .mdi--eye,
.toggle-password .mdi--eye-off {
  color: #aaa;
}
.custom-checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  border-width: 1px;
  border-radius: 4px;
  border-color: #aaa;
  background-color: white;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.custom-checkbox::after {
  content: '';
  position: absolute;
  width: 0.4em;
  height: 0.8em;
  border: solid white;
  border-width: 0 3px 3px 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.peer:checked + .custom-checkbox::after {
  opacity: 1;
}
.custom-radio {
  position: relative;
  transition: all 0.3s ease;
  border-width: 2px;
  border-color: #aaa;
}
.custom-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.65em;
  height: 0.65em;
  border-radius: 9999px;
  background-color: white;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.peer:checked + .custom-radio::after {
  opacity: 1;
}
.peer:checked ~ .peer-checked {
  --tw-bg-opacity: 1;
  background-color: #00bcff;
  border-color: #ffffff;
}
.custom-control input[type='checkbox'],
.custom-control input[type='radio'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.custom-control .checkmark,
.custom-control .radio-dot {
  height: 20px;
  width: 20px;
  background-color: #ffffff;
  border: solid #aaa;
  border-width: 1px;
  border-radius: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.custom-control .radio-dot {
  border-radius: 50%;
}
.custom-control:hover .checkmark,
.custom-control:hover .radio-dot {
  background-color: #ffffff;
}
.custom-control input:checked ~ .checkmark,
.custom-control input:checked ~ .radio-dot {
  background-color: #00bcff;
  border-color: #00bcff;
}
.custom-control .checkmark:after {
  content: '';
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.custom-control input:checked ~ .checkmark:after {
  display: block;
}
.custom-control .radio-dot:after {
  content: '';
  position: absolute;
  display: none;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
}
.custom-control input:checked ~ .radio-dot:after {
  display: block;
}
.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 1rem 0;
  z-index: 10;
}
.footer-relative {
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 1rem 0;
  margin-top: auto;
  z-index: 10;
}
.page-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2rem;
  padding-bottom: 1rem;
}
.mdi--eye {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.mdi--eye-off {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.83 9L15 12.16V12a3 3 0 0 0-3-3zm-4.3.8l1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28l.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5c1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22L21 20.73L3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75c-1.73-4.39-6-7.5-11-7.5c-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.material-symbols--arrow-back-rounded {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
@property --tw-leading {
  syntax: '*';
  inherits: false;
}
@property --tw-font-weight {
  syntax: '*';
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    ::before,
    ::after,
    ::backdrop {
      --tw-leading: initial;
      --tw-font-weight: initial;
    }
  }
}