:root {
    --spacing: 0.25rem;
    --radius-xl: 0.75rem;
    --radius-sm: 0.375rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --font-weight-medium: 500;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --color-primary: var(--ms-cm-primary);
    --color-primary-text: var(--ms-cm-primary-text);
    --color-secondary: var(--ms-cm-secondary);
    --color-secondary-text: var(--ms-cm-secondary-text);
    --color-base-text: var(--ms-cm-base-text);
    --color-base-stroke: var(--ms-cm-base-stroke);
    --color-base: var(--ms-cm-base-default);
    --color-base-100: var(--ms-cm-base-100);
    --color-base-200: var(--ms-cm-base-200);
    --color-neutral-400: var(--ms-cm-base-400);
    --ms-form-default-min-height: calc(var(--spacing) * 10);
    --ms-form-default-padding-y: calc(var(--spacing) * 2);
    --ms-form-default-padding-x: calc(var(--spacing) * 3);
    --ms-form-default-radius: var(--radius-sm);
    --ms-form-default-border-width: 1px;
    --ms-form-default-border-color: var(--color-base-stroke);
    --ms-form-default-bg-color: var(--color-base);
    --ms-form-default-color: var(--color-base-text);
    --ms-form-default-font-size: var(--text-sm);
    --ms-form-default-font-weight: 400;
    --ms-form-default-placeholder-color: var(--ms-cm-base-400);
    --ms-form-focus-border-color: var(--color-primary);
    --ms-form-focus-ring-width: 3px;
    --ms-form-focus-ring-color: var(--color-primary);
    --ms-form-error-color: var(--ms-cm-error);
    --ms-form-error-border-color: var(--ms-cm-error);
    --ms-form-error-ring-color: var(--ms-cm-error);
    --ms-box-bg-color: var(--color-base);
    --ms-box-border-color: var(--color-base-stroke);
    --ms-layout-page-bg-color: var(--ms-cm-body);
    --ms-btn-padding-x: calc(var(--spacing) * 4);
    --ms-btn-padding-y: calc(var(--spacing) * 2);
    --ms-btn-radius: var(--radius-sm);
    --ms-btn-border-width: 1px;
    --ms-btn-font-size: var(--text-sm);
    --ms-btn-font-weight: 500;
    --ms-btn-icon-size: calc(var(--spacing) * 5);
}

:root:not(.dark) {
    --ms-cm-body: oklch(99.00% 0 0);
    --ms-cm-primary: #83b341;
    --ms-cm-primary-text: oklch(100.00% 0 0);
    --ms-cm-secondary: oklch(60.00% 0 0);
    --ms-cm-secondary-text: oklch(100.00% 0 0);
    --ms-cm-base-text: oklch(25.00% 0 0);
    --ms-cm-base-stroke: oklch(25.00% 0 0 / 20%);
    --ms-cm-base-default: oklch(100.00% 0 0);
    --ms-cm-base-50: oklch(98.50% 0 0);
    --ms-cm-base-100: oklch(97.00% 0 0);
    --ms-cm-base-200: oklch(95.50% 0 0);
    --ms-cm-base-300: oklch(94.00% 0 0);
    --ms-cm-base-400: oklch(92.50% 0 0);
    --ms-cm-base-500: oklch(91.00% 0 0);
    --ms-cm-base-600: oklch(88.00% 0 0);
    --ms-cm-base-700: oklch(85.00% 0 0);
    --ms-cm-base-800: oklch(80.00% 0 0);
    --ms-cm-base-900: oklch(75.00% 0 0);
    --ms-cm-success: oklch(64.00% 0.22 142.49);
    --ms-cm-success-text: oklch(46.00% 0.16 142.49);
    --ms-cm-warning: oklch(75.00% 0.17 75.35);
    --ms-cm-warning-text: oklch(50.00% 0.1 76.1);
    --ms-cm-error: oklch(58.00% 0.21 26.855);
    --ms-cm-error-text: oklch(37.00% 0.145 26.85);
    --ms-cm-info: oklch(60.00% 0.219 257.63);
    --ms-cm-info-text: oklch(35.00% 0.12 257.63);
}

html.dark, :root.dark {
    --ms-cm-body: oklch(20.00% 0 0);
    --ms-cm-primary: #83b341;
    --ms-cm-primary-text: oklch(100.00% 0 0);
    --ms-cm-secondary: oklch(80.00% 0 0);
    --ms-cm-secondary-text: oklch(20.00% 0 0);
    --ms-cm-base-text: oklch(90.00% 0 0);
    --ms-cm-base-stroke: oklch(85.00% 0 0 / 20%);
    --ms-cm-base-default: oklch(24.00% 0 0);
    --ms-cm-base-50: oklch(26.00% 0 0);
    --ms-cm-base-100: oklch(28.00% 0 0);
    --ms-cm-base-200: oklch(32.00% 0 0);
    --ms-cm-base-300: oklch(38.00% 0 0);
    --ms-cm-base-400: oklch(45.00% 0 0);
    --ms-cm-base-500: oklch(52.00% 0 0);
    --ms-cm-base-600: oklch(60.00% 0 0);
    --ms-cm-base-700: oklch(70.00% 0 0);
    --ms-cm-base-800: oklch(80.00% 0 0);
    --ms-cm-base-900: oklch(88.00% 0 0);
    --ms-cm-success: oklch(64.00% 0.22 142.495);
    --ms-cm-success-text: oklch(93.00% 0.12 144.46);
    --ms-cm-warning: oklch(90.00% 0.22 92.72);
    --ms-cm-warning-text: oklch(99.00% 0.072 107.64);
    --ms-cm-error: oklch(58.90% 0.214 26.855);
    --ms-cm-error-text: oklch(71.00% 0.24 25.96);
    --ms-cm-info: oklch(60.00% 0.22 257.63);
    --ms-cm-info-text: oklch(88.00% 0.065 244.38);
}

/* Reset global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: var(--ms-cm-body);
    color: var(--color-base-text);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

[x-cloak] { 
    display: none !important; 
}


.authentication {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 6);
    min-height: 100vh;
    padding-block: calc(var(--spacing) * 8);
    padding-inline: calc(var(--spacing) * 4);
    background-color: var(--ms-layout-page-bg-color);
    color: var(--color-base-text);
    flex-direction: column;
    display: flex;
    position: relative;
}

.authentication-logo {
    margin-bottom: calc(var(--spacing) * 6);
    text-align: center;
}

.logo {
    display: inline-block;
    text-decoration: none;
    color: var(--color-base-text);
    font-size: 1.5rem;
    font-weight: 700;
}


.authentication-content {
    width: 100%;
    max-width: 420px;
    background-color: var(--ms-box-bg-color);
    border-width: calc(var(--spacing) * 0.5);
    border-style: solid;
    border-color: var(--ms-box-border-color);
    border-radius: var(--radius-xl);
    padding-block: calc(var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 6);
    position: relative;
    overflow: clip;
}

.authentication-content:before {
    content: "";
    width: 17%;
    height: calc(var(--spacing) * 1);
    border-radius: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 1);
    background-color: var(--color-primary);
    box-shadow: 0 0 calc(var(--spacing) * 10) calc(var(--spacing) * 10) var(--color-primary);
    inset-inline: 0;
    margin-inline: auto;
    display: block;
    position: absolute;
    top: 0;
}

@supports (color: color-mix(in lab,red,red)) {
    .authentication-content:before {
        box-shadow: 0 0 calc(var(--spacing) * 10) calc(var(--spacing) * 10) color-mix(in oklab, var(--color-primary) 5%, transparent);
    }
}


.authentication-header {
    padding-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 6);
    text-align: center;
}

.authentication-header .heading h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: calc(var(--spacing) * 2);
    color: var(--color-base-text);
}

.authentication-header .description {
    color: var(--color-base-text);
    font-size: var(--text-sm);
}


.form {
    width: 100%;
}

.space-elements > * + * {
    margin-top: calc(var(--spacing) * 5);
}

.authentication-form {
    margin-top: 0;
}

.form-group {
    margin-bottom: calc(var(--spacing) * 4);
}

.form-group.moonshine-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
}

.form-group-inline {
    flex-direction: row !important;
    align-items: center;
    gap: calc(var(--spacing) * 3) !important;
}

.form-group-inline .form-label {
    margin-bottom: 0;
    line-height: calc(var(--spacing) * 6);
}

.form-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    word-break: break-word;
    color: var(--color-base-text);
    display: block;
}

.form-label[for] {
    cursor: pointer;
}

.form-label > .required {
    color: var(--ms-form-error-color);
}


.form-input,
.form-textarea,
.form-select {
    width: 100%;
    min-height: var(--ms-form-default-min-height);
    padding-block: var(--ms-form-default-padding-y);
    padding-inline: var(--ms-form-default-padding-x);
    border-radius: var(--ms-form-default-radius);
    border: var(--ms-form-default-border-width) solid var(--ms-form-default-border-color);
    background-color: var(--ms-form-default-bg-color);
    color: var(--ms-form-default-color);
    font-size: var(--ms-form-default-font-size);
    font-weight: var(--ms-form-default-font-weight);
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);
    display: block;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--ms-form-default-placeholder-color);
    font-size: 0.9375em;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--ms-form-focus-border-color);
    outline: none;
}

@supports (color: color-mix(in lab,red,red)) {
    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
        box-shadow: 0 0 0 var(--ms-form-focus-ring-width) color-mix(in oklab, var(--ms-form-focus-ring-color) 10%, transparent);
    }
}

.form-error {
    margin-top: 0px;
    color: var(--ms-form-error-color);
    font-size: var(--text-xs);
    grid-column: span 12 / span 12;
}

.form-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


.form-checkbox {
    appearance: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    -webkit-user-select: none;
    user-select: none;
    border-width: var(--ms-form-default-border-width);
    border-style: solid;
    border-color: var(--ms-form-default-border-color);
    border-radius: var(--radius-sm);
    background-origin: border-box;
    background-color: var(--ms-form-default-bg-color);
    color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
    place-content: center;
    margin: 0;
    padding: 0;
    transition-property: border-color, box-shadow;
    transition-duration: 0.125s;
    transition-timing-function: ease-in-out;
    display: grid;
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
}

.form-checkbox:before {
    content: "";
    transform-origin: 50%;
    border-top: none;
    border-bottom: 0.125em solid;
    border-left: 0.125em solid;
    border-right: none;
    width: 0.65em;
    height: 0.35em;
    transform: scale(0) rotate(-45deg);
    will-change: transform;
    transition-property: transform, color;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);
}

.form-checkbox:checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-primary-text);
}

.form-checkbox:checked:before {
    transform: scale(1) rotate(-45deg);
}

.form-checkbox:focus {
    border-color: var(--ms-form-focus-border-color);
    outline: none;
}

@supports (color: color-mix(in lab,red,red)) {
    .form-checkbox:focus {
        box-shadow: 0 0 0 var(--ms-form-focus-ring-width) color-mix(in oklab, var(--ms-form-focus-ring-color) 10%, transparent);
    }
}


.form-switcher {
    cursor: pointer;
    align-items: center;
    display: flex;
    position: relative;
}

.form-switcher-toggler {
    width: calc(var(--spacing) * 10.5);
    height: calc(var(--spacing) * 6);
    border-width: var(--ms-form-default-border-width);
    border-style: solid;
    border-color: var(--ms-form-default-border-color);
    background-color: var(--ms-form-default-bg-color);
    transition-property: background-color;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);
    border-radius: 9999px;
    position: relative;
}

.form-switcher-toggler:after {
    content: "";
    top: 50%;
    left: calc(var(--spacing) * 0.75);
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
    background-color: var(--color-primary);
    transition-property: transform, border-color;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);
    border-radius: 50%;
    position: absolute;
    transform: translateY(-50%);
}

.form-switcher-control:checked + .form-switcher-toggler {
    background-color: var(--color-primary);
}

.form-switcher-control:checked + .form-switcher-toggler:after {
    background-color: var(--color-primary-text);
    transform: translateY(-50%) translateX(100%);
}

.form-switcher-control:focus + .form-switcher-toggler {
    border-color: var(--ms-form-focus-border-color);
    outline: none;
}

@supports (color: color-mix(in lab,red,red)) {
    .form-switcher-control:focus + .form-switcher-toggler {
        box-shadow: 0 0 0 var(--ms-form-focus-ring-width) color-mix(in oklab, var(--ms-form-focus-ring-color) 10%, transparent);
    }
}


.btn {
    vertical-align: top;
    align-items: center;
    justify-content: center;
    column-gap: var(--ms-btn-icon-size);
    min-height: auto;
    padding-block: var(--ms-btn-padding-y);
    padding-inline: var(--ms-btn-padding-x);
    border-radius: var(--ms-btn-radius);
    border: var(--ms-btn-border-width) solid var(--ms-btn-border-color, transparent);
    background-color: var(--ms-btn-bg-color);
    color: var(--ms-btn-color);
    font-size: var(--ms-btn-font-size);
    font-weight: var(--ms-btn-font-weight);
    cursor: pointer;
    transition-property: color, background-color, border-color, text-decoration-color, box-shadow, opacity, fill, stroke, translate;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);
    display: inline-flex;
    text-decoration: none;
}

@media (hover: hover) {
    .btn:hover:not(:disabled) {
        border-color: var(--ms-btn-hover-border-color);
        background-color: var(--ms-btn-hover-bg-color);
        color: var(--ms-btn-hover-color);
    }
}

.btn:active {
    translate: 0 1px;
}

.btn:disabled {
    border-color: var(--color-base-200);
    background-color: var(--color-base-200);
    color: var(--color-base-text);
    cursor: not-allowed;
}

.btn-lg {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
}


.btn-primary {
    --ms-btn-border-color: var(--color-primary);
    --ms-btn-bg-color: var(--color-primary);
    --ms-btn-color: var(--color-primary-text);
    --ms-btn-hover-border-color: var(--color-primary);
    --ms-btn-hover-color: var(--color-primary-text);
}

@supports (color: color-mix(in lab,red,red)) {
    .btn-primary {
        --ms-btn-hover-bg-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
    }
}

.w-full {
    width: 100%;
}


.grid {
    display: grid;
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gap-6 {
    gap: calc(var(--spacing) * 6);
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

@media (min-width: 1280px) {
    .xl\:col-span-12 {
        grid-column: span 12 / span 12;
    }
}


.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-start {
    justify-content: flex-start;
}

.gap-2 {
    gap: calc(var(--spacing) * 2);
}

.mt-3 {
    margin-top: calc(var(--spacing) * 3);
}


.spinner {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    border: calc(var(--spacing) * 1) solid var(--color-base-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spinner 0.6s linear infinite;
    display: inline-block;
}

.spinner-sm {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    border-width: calc(var(--spacing) * 0.5);
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.js-form-submit-button-loader {
    margin-right: calc(var(--spacing) * 2);
}


.block {
    display: block;
}

.hidden {
    display: none;
}

.h-8 {
    height: 2rem;
}

.h-10 {
    height: 2.5rem;
}

.h-14 {
    height: 3.5rem;
}

@media (min-width: 1024px) {
    .lg\:h-10 {
        height: 2.5rem;
    }
}

@media (min-width: 1280px) {
    .xl\:block {
        display: block;
    }
    
    .xl\:hidden {
        display: none;
    }
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.peer {
   
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Data Attributes */
[data-validation-wrapper] {
    position: relative;
}

[data-field-selector] {
    position: relative;
}