@layer reset, tokens, base, layout, components, utilities;
@layer reset {
    *, *:before, *:after, ::backdrop {
        box-sizing: border-box
    }

    * {
        outline-width: 0;
        font: inherit
    }

    *:not(:is(ul,ol,li)) {
        margin: 0;
        padding: 0
    }

    html {
        color-scheme: light;
        hanging-punctuation: first last
    }

    body {
        min-height: 100vh
    }

    img, picture, svg, video {
        display: block;
        max-width: 100%
    }

    h1, h2, h3, h4, h5, h6 {
        text-wrap: balance
    }

    p {
        max-width: 95ch;
        text-wrap: pretty
    }

    @media (prefers-reduced-motion: no-preference) {
        :has(:target) {
            scroll-behavior: smooth;
            scroll-padding-top: 3rem
        }
    }
}
@layer tokens {
    :root {
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-bold: 600;
        --font-wdth-normal: 100;
        --font-weight: var(--font-weight-normal);
        --font-wdth: var(--font-wdth-normal);
        --line-height: 1;
        --line-height-tight: 1.2;
        --line-height-text: 1.6;
        --font-size-xs: clamp(.7292rem, .7056rem + .1181vw, .8rem);
        --font-size-base: clamp(.875rem, .8333rem + .2083vw, 1rem);
        --font-size-sm: clamp(1.05rem, .9833rem + .3333vw, 1.25rem);
        --font-size-md: clamp(1.26rem, 1.1592rem + .5042vw, 1.5625rem);
        --font-size-lg: clamp(1.512rem, 1.365rem + .7352vw, 1.9531rem);
        --font-size-xl: clamp(1.8144rem, 1.6054rem + 1.045vw, 2.4414rem);
        --font-size-2xl: clamp(2.1773rem, 1.8858rem + 1.4575vw, 3.0518rem);
        --font-size--2: clamp(.7813rem, .7483rem + .1646cqi, .88rem);
        --font-size--1: clamp(.9375rem, .8833rem + .2708cqi, 1.1rem);
        --font-size-0: clamp(1.125rem, 1.0417rem + .4167cqi, 1.375rem);
        --font-size-1: clamp(1.35rem, 1.2271rem + .6146cqi, 1.7188rem);
        --font-size-2: clamp(1.62rem, 1.4439rem + .8807cqi, 2.1484rem);
        --font-size-3: clamp(1.944rem, 1.6968rem + 1.2359cqi, 2.6855rem);
        --font-size-4: clamp(2.3328rem, 1.9914rem + 1.7069cqi, 3.3569rem);
        --font-size-5: clamp(2.7994rem, 2.3338rem + 2.328cqi, 4.1962rem);
        --font-size-h1: var(--font-size-5);
        --font-size-h2: var(--font-size-4);
        --font-size-h3: var(--font-size-3);
        --font-size-h4: var(--font-size-2);
        --font-size-h5: var(--font-size-1);
        --font-size-h6: var(--font-size-0)
    }
}
@layer base {
    * {
        color: var(--color-for-text, var(--text-color));
        font-family: Noto Sans, sans-serif;
        font-optical-sizing: auto;
        font-weight: var(--font-weight);
        font-style: normal;
        font-variation-settings: "wdth" var(--font-wdth);
        font-size: var(--font-size, initial);
        line-height: var(--line-height, 1)
    }

    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, strong, b {
        --font-weight: var(--font-weight-bold)
    }

    h1, .h1 {
        --font-size: var(--font-size-h1);
        --line-height: var(--line-height-tight)
    }

    h2, .h2 {
        --font-size: var(--font-size-h2);
        --line-height: var(--line-height-tight)
    }

    h3, .h3 {
        --font-size: var(--font-size-h3);
        --line-height: var(--line-height-tight)
    }

    h4, .h4 {
        --font-size: var(--font-size-h4);
        --line-height: 1.3
    }

    h5, .h5 {
        --font-size: var(--font-size-h5);
        --line-height: 1.3;
        margin-block-end: .5em
    }

    h6, .h6 {
        --font-size: var(--font-size-h6);
        --line-height: 1.3;
        margin-block-end: .5em
    }

    p {
        --font-size: var(--font-size-0)
    }

    p, span, li, blockquote {
        --line-height: var(--line-height-text)
    }

    h1, .h1, h2, .h2, h3, .h3, h4, .h4, p {
        margin-block-end: .75em
    }
}

@property --color-for-text {
    syntax: "<color>";
    inherits: true;
    initial-value: unset;
}

@layer tokens {
    :root {
        --primary-color: hsla(187, 73%, 41%);
        --primary-color-dark: hsl(187, 72%, 33%);
        --primary-color-light: hsl(175, 44%, 65%);
        --primary-color-disabled: hsl(190, 19%, 59%);
        --secondary-color: hsl(218, 17%, 35%);
        --secondary-color-dark: hsl(218, 16%, 27%);
        --secondary-color-light: hsl(206, 38%, 80%);
        --secondary-color-disabled: hsl(240, 4%, 44%);
        --text-color: hsl(215, 28%, 17%);
        --text-color-light: hsl(215, 14%, 34%);
        --bg-color: hsl(210, 20%, 98%);
        --bg-alt-color: hsl(0, 0%, 100%);
        --border-color: hsl(220, 13%, 91%);
        --danger-color: hsl(0, 72%, 51%);
        --danger-color-dark: hsl(0, 71%, 43%);
        --danger-color-light: hsl(0, 93%, 94%);
        --danger-color-disabled: hsl(0, 31%, 49%);
        --success-color: hsl(142, 76%, 36%);
        --success-color-light: hsl(141, 84%, 93%);
        --success-color-disabled: hsl(152, 76%, 80%);
        --warning-color: hsl(38, 92%, 50%);
        --warning-color-light: hsl(48, 96%, 89%);
        --info-color: hsl(221, 83%, 53%);
        --info-color-light: hsl(214, 95%, 93%);
        --info-color-disabled: hsl(213, 97%, 87%)
    }
}

:root {
    --gap-3xs: clamp(.3125rem, .2917rem + .1042cqi, .375rem);
    --gap-2xs: clamp(.5625rem, .5208rem + .2083cqi, .6875rem);
    --gap-xs: clamp(.875rem, .8125rem + .3125cqi, 1.0625rem);
    --gap-s: clamp(1.125rem, 1.0417rem + .4167cqi, 1.375rem);
    --gap-m: clamp(1.6875rem, 1.5625rem + .625cqi, 2.0625rem);
    --gap-l: clamp(2.25rem, 2.0833rem + .8333cqi, 2.75rem);
    --gap-xl: clamp(3.375rem, 3.125rem + 1.25cqi, 4.125rem);
    --gap-2xl: clamp(4.5rem, 4.1667rem + 1.6667cqi, 5.5rem);
    --gap-3xl: clamp(6.75rem, 6.25rem + 2.5cqi, 8.25rem);
    --gap-3xs-2xs: clamp(.3125rem, .1875rem + .625cqi, .6875rem);
    --gap-2xs-xs: clamp(.5625rem, .3958rem + .8333cqi, 1.0625rem);
    --gap-xs-s: clamp(.875rem, .7083rem + .8333cqi, 1.375rem);
    --gap-s-m: clamp(1.125rem, .8125rem + 1.5625cqi, 2.0625rem);
    --gap-m-l: clamp(1.6875rem, 1.3333rem + 1.7708cqi, 2.75rem);
    --gap-l-xl: clamp(2.25rem, 1.625rem + 3.125cqi, 4.125rem);
    --gap-xl-2xl: clamp(3.375rem, 2.6667rem + 3.5417cqi, 5.5rem);
    --gap-2xl-3xl: clamp(4.5rem, 3.25rem + 6.25cqi, 8.25rem)
}

@layer base {
    * {
        transition-behavior: allow-discrete
    }

    :root {
        --default-border-radius: .5rem;
        --img-aspect-ratio: initial;
        --wrap-max-inline-size: 1240px;
        --wrap-padding-inline-size: var(--gap-xs);
        --input-padding-inline: var(--gap-2xs);
        --input-border-width: 1px;
        --input-border-color: var(--border-color)
    }

    .wrap {
        padding-inline: var(--wrap-padding-inline-size);
        margin-inline: auto;
        max-width: var(--wrap-max-inline-size);
        width: 100%
    }

    .wrap-fluid {
        padding-inline: var(--wrap-padding-inline-size)
    }

    .show-dialog-btn, .link, a, button, .btn, input, textarea, select {
        -webkit-tap-highlight-color: transparent
    }

    textarea {
        padding-block: var(--gap-2xs);
        min-height: 10cap;
        resize: vertical;
        display: block;
        field-sizing: content
    }

    input:not([type=checkbox],[type=radio]) {
        width: 100%
    }

    input:not([type=checkbox],input[type=radio]), select {
        min-height: var(--gap-l)
    }

    a {
        --text-color: var(--primary-color);
        text-decoration-color: hsl(from currentColor h s l / 50%);
        text-underline-offset: .1em
    }

    a:hover {
        text-decoration: none
    }

    table {
        width: 100%;
        border-collapse: collapse
    }

    table th, table td {
        padding: var(--gap-2xs)
    }

    table th {
        --font-weight: 600
    }

    img {
        aspect-ratio: var(--img-aspect-ratio)
    }

    ::-webkit-scrollbar {
        width: .5rem;
        height: .5rem
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: .6rem
    }

    ::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: .6rem
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #9ca3af
    }
}

@layer layout {
    body {
        background-color: var(--bg-color)
    }
}

@layer components {
    .table-wrapper {
        overflow-x: auto
    }

    .table-responsive {
        overflow-x: auto
    }

    .table-responsive table th, .table-responsive table td {
        min-width: min-content
    }

    .data-table th, .data-table td {
        padding: .75rem 1rem;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap
    }

    .data-table thead th {
        background-color: #f3f4f6;
        font-size: .75rem;
        font-weight: 600;
        color: var(--text-color-light);
        text-transform: uppercase;
        letter-spacing: .05em
    }

    .data-table tbody tr:hover {
        background-color: #f9fafb
    }

    .form-field-wrap {
        --input-ouline-color: var(--primary-color-light)
    }

    .form-field-wrap:not(:last-of-type) {
        margin-block-end: var(--gap-s)
    }

    .form-field-wrap:has(.is-invalid), .form-field-wrap.has-error {
        --input-border-color: var(--danger-color);
        --input-ouline-color: var(--danger-color-light)
    }

    .form-field-wrap:has(.is-invalid) label, .form-field-wrap.has-error label {
        color: var(--danger-color)
    }

    .form-field-wrap:has(.is-valid), .form-field-wrap.is-valid {
        --input-border-color: var(--success-color);
        --input-ouline-color: var(--success-color-light)
    }

    .form-field-wrap:has(.is-valid) label, .form-field-wrap.is-valid label {
        color: var(--success-color)
    }

    .form-field-wrap .invalid-feedback {
        color: var(--danger-color);
        --font-size: var(--font-size-xs);
        margin-inline-start: var(--input-padding-inline);
        margin-block-start: var(--gap-3xs)
    }

    .form-field-wrap .invalid-feedback:empty {
        display: none
    }

    .form-field-wrap:not(:has(input[type=checkbox],input[type=radio])) label {
        display: block;
        margin-block-end: var(--label-mbe, var(--gap-3xs));
        margin-inline-start: calc(var(--gap-2xs) + 1px)
    }

    .form-field-wrap label {
        --color-for-text: var(--text-color-light);
        --font-size: var(--font-size-xs)
    }

    .form-field-wrap input:not([type=checkbox],[type=radio]) {
        border: var(--input-border-width) solid var(--input-border-color);
        border-radius: var(--default-border-radius);
        outline-offset: 0;
        outline: transparent solid 2px;
        transition: outline-color 50ms linear;
        padding-inline: var(--gap-2xs);
        padding-block: var(--gap-3xs)
    }

    .form-field-wrap input:not([type=checkbox],[type=radio]):focus, .form-field-wrap input:not([type=checkbox],[type=radio]):focus-visible {
        outline-color: var(--input-ouline-color)
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]) input {
        position: absolute;
        opacity: 0;
        left: -5000px
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]) label {
        display: grid;
        gap: var(--gap-2xs);
        align-items: center;
        grid-template-columns:auto 1fr;
        cursor: pointer;
        --input-emulator-size: var(--font-size-md);
        position: relative
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]) label:before {
        border: var(--input-border-width) solid var(--input-border-color);
        content: "";
        display: block;
        aspect-ratio: 1;
        width: var(--input-emulator-size)
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]) label:after {
        content: "";
        display: block;
        position: absolute;
        grid-column: 1/2;
        aspect-ratio: 1;
        opacity: 0;
        width: calc(var(--input-emulator-size) * .5);
        background-color: hsl(from var(--primary-color) h s 40%);
        justify-self: center;
        transition: opacity 50ms linear
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]):has(input:focus-visible) label {
        outline: 1px solid var(--primary-color);
        outline-offset: 3px
    }

    .form-field-wrap:has(input[type=checkbox],input[type=radio]):has(input:checked) label:after {
        opacity: 1
    }

    .form-field-wrap:has(input[type=checkbox]) label:before {
        border-radius: var(--default-border-radius)
    }

    .form-field-wrap:has(input[type=checkbox]) label:after {
        border-radius: 2px
    }

    .form-field-wrap:has(input[type=radio]) label:before, .form-field-wrap:has(input[type=radio]) label:after {
        border-radius: 50%
    }

    .form-field-wrap input[type=datetime-local], .form-field-wrap input[type=date] {
        width: fit-content;
        max-width: 100%
    }

    .form-field-wrap.image-field-wrap {
        border: 1px solid var(--border-color);
        border-radius: var(--default-border-radius);
        padding: var(--gap-2xs);
        width: fit-content;
        max-width: 100%;
        --label-mbe: var(--gap-xs)
    }

    .form-field-wrap.image-field-wrap img {
        display: block;
        border-radius: var(--default-border-radius)
    }

    .form-field-wrap.image-field-wrap:not(:has(input[multiple])) label, .form-field-wrap.image-field-wrap:not(:has(input[multiple])) img {
        margin-block-end: var(--gap-xs)
    }

    .form-field-wrap.image-field-wrap .img-wrap {
        position: relative
    }

    .form-field-wrap.image-field-wrap .img-wrap:has(img[src*=no_image]) img {
        border: 1px solid var(--border-color)
    }

    .form-field-wrap.image-field-wrap .img-wrap:has(img[src*=no_image]) .delete-image-btn {
        display: none
    }

    .form-field-wrap.image-field-wrap .delete-image-btn {
        position: absolute;
        inset-block-start: var(--gap-2xs);
        inset-inline-end: var(--gap-2xs);
        z-index: 2;
        --text-color: var(--danger-color);
        padding: var(--gap-2xs);
        --font-size: var(--font-size-xs);
        background-color: hsl(from var(--bg-color) h s l / 50%);
        box-shadow: 0 1px 3px hsl(from var(--text-color) h s l / 80%)
    }

    .form-field-wrap.image-field-wrap .delete-image-btn:hover {
        background-color: var(--bg-alt-color)
    }

    .form-field-wrap.image-field-wrap:has(input[multiple]) {
        width: 100%;
        display: grid;
        --grid-max-col-count: 5;
        --grid-min-col-size: 200px;
        --grid-gap: var(--gap-m);
        --grid-col-size-calc: calc((100% - var(--grid-gap) * (var(--grid-max-col-count) - 1)) / var(--grid-max-col-count));
        --grid-min-col-size-calc: min(max(var(--grid-min-col-size), var(--grid-col-size-calc)), 100%);
        grid-gap: var(--grid-gap);
        grid-template-columns:repeat(auto-fill, minmax(var(--grid-min-col-size-calc), 1fr))
    }

    .form-field-wrap.image-field-wrap:has(input[multiple]) label {
        margin-block-end: 0
    }

    .form-field-wrap.image-field-wrap:has(input[multiple]) label, .form-field-wrap.image-field-wrap:has(input[multiple]) input {
        grid-column: 1/-1
    }

    .form-field-wrap.image-field-wrap input {
        display: block;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        color: var(--text-color-light);
        min-height: initial;
        background-color: var(--bg-color);
        cursor: pointer;
        border-radius: var(--default-border-radius);
        padding: var(--gap-3xs)
    }

    .form-field-wrap.image-field-wrap input::file-selector-button {
        border-radius: var(--default-border-radius);
        padding: var(--input-padding-inline);
        background-color: var(--bg-color);
        border: none;
        border-inline-end: 1px solid var(--border-color);
        color: var(--text-color-light);
        cursor: pointer;
        transition: background-color 125ms linear, border-inline-end-color 125ms linear
    }

    .form-field-wrap.image-field-wrap input span[aria-hidden=true] {
        color: var(--text-color-light)
    }

    .form-field-wrap.image-field-wrap input:not(:disabled,[readonly]):hover::file-selector-button {
        background-color: hsl(from var(--text-color-light) h s 90%);
        border-inline-end-color: hsl(from var(--text-color-light) h s 90%)
    }

    .form-field-wrap textarea {
        min-width: min(100%, 60ch);
        max-width: 100%;
        width: 100%;
        padding-inline: var(--gap-2xs);
        padding-block: var(--gap-3xs);
        border: var(--input-border-width) solid var(--input-border-color);
        border-radius: var(--default-border-radius);
        outline-offset: 0;
        outline: transparent solid 2px;
        transition: outline-color 50ms linear
    }

    .form-field-wrap textarea:focus, .form-field-wrap textarea:focus-visible {
        outline-color: var(--input-ouline-color)
    }

    .breadcrumbs {
        --font-size: var(--font-size-xs);
        margin-block-end: var(--gap-m)
    }

    .breadcrumbs ul {
        padding-inline: 0;
        margin: 0;
        list-style: none;
        display: flex;
        gap: var(--gap-2xs);
        overflow-x: auto;
        white-space: nowrap
    }

    .breadcrumbs ul li:not(:last-child):after {
        content: "/";
        margin-inline-start: var(--gap-2xs);
        color: var(--text-color-light)
    }

    .btn {
        display: flex;
        padding-block: var(--gap-xs);
        padding-inline: var(--gap-m);
        border: none;
        border-radius: var(--default-border-radius);
        --text-color: var(--bg-alt-color);
        cursor: pointer;
        transition: background-color .125s linear, box-shadow .2s ease;
        text-decoration: none;
        width: fit-content;
        max-width: 100%
    }

    .btn.btn-primary {
        background-color: var(--primary-color)
    }

    .btn.btn-primary:not(:disabled,.disabled):hover, .btn.btn-primary:not(:disabled,.disabled):focus-visible {
        background-color: var(--primary-color-dark)
    }

    .btn.btn-primary:disabled, .btn.btn-primary .disabled {
        background-color: var(--primary-color-disabled);
        cursor: not-allowed
    }

    .btn.btn-secondary {
        background-color: var(--secondary-color)
    }

    .btn.btn-secondary:not(:disabled,.disabled):hover, .btn.btn-secondary:not(:disabled,.disabled):focus-visible {
        background-color: var(--secondary-color-dark)
    }

    .btn.btn-secondary:disabled, .btn.btn-secondary .disabled {
        background-color: var(--secondary-color-disabled);
        cursor: not-allowed
    }

    .btn.btn-danger {
        background-color: var(--danger-color)
    }

    .btn.btn-danger:not(:disabled,.disabled):hover, .btn.btn-danger:not(:disabled,.disabled):focus-visible {
        background-color: var(--danger-color-dark)
    }

    .btn.btn-danger:disabled, .btn.btn-danger .disabled {
        background-color: var(--danger-color-light);
        cursor: not-allowed
    }
}

@layer utilities {
    .text-align-center {
        text-align: center
    }

    .text-align-right {
        text-align: right
    }

    .d-flex {
        display: flex
    }

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

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

    .no-list-style {
        list-style: none
    }

    .no-text-decoration {
        text-decoration: none
    }

    .text-color-primary {
        --text-color: var(--primary-color)
    }

    .w-100 {
        width: 100%
    }

    .mbe-3xs {
        margin-block-end: var(--gap-3xs)
    }

    .mbe-2xs {
        margin-block-end: var(--gap-2xs)
    }

    .mbe-xs {
        margin-block-end: var(--gap-xs)
    }

    .mbe-s {
        margin-block-end: var(--gap-s)
    }

    .mbe-m {
        margin-block-end: var(--gap-m)
    }

    .mbe-l {
        margin-block-end: var(--gap-l)
    }

    .mbe-xl {
        margin-block-end: var(--gap-xl)
    }

    .mbe-2xl {
        margin-block-end: var(--gap-2xl)
    }

    .mbe-3xl {
        margin-block-end: var(--gap-3xl)
    }

    .gap-3xs {
        gap: var(--gap-3xs)
    }

    .gap-2xs {
        gap: var(--gap-2xs)
    }

    .gap-xs {
        gap: var(--gap-xs)
    }

    .gap-s {
        gap: var(--gap-s)
    }

    .gap-m {
        gap: var(--gap-m)
    }

    .gap-l {
        gap: var(--gap-l)
    }

    .gap-xl {
        gap: var(--gap-xl)
    }

    .gap-2xl {
        gap: var(--gap-2xl)
    }

    .gap-3xl {
        gap: var(--gap-3xl)
    }

    .gap-3xs-2xs {
        gap: var(--gap-3xs-2xs)
    }

    .gap-2xs-xs {
        gap: var(--gap-2xs-xs)
    }

    .gap-xs-s {
        gap: var(--gap-xs-s)
    }

    .gap-s-m {
        gap: var(--gap-s-m)
    }

    .gap-m-l {
        gap: var(--gap-m-l)
    }

    .gap-l-xl {
        gap: var(--gap-l-xl)
    }

    .gap-xl-2xl {
        gap: var(--gap-xl-2xl)
    }

    .gap-2xl-3xl {
        gap: var(--gap-2xl-3xl)
    }
}

@layer components {
    .site-dialog {
        border: none;
        border-radius: calc(var(--default-border-radius) * 2);
        box-shadow: 0 10px 30px #0003;
        max-width: 95dvw;
        width: min(500px, 45dvw);
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
        visibility: visible;
        transition-property: opacity, transform, visibility, overlay, display;
        transition-duration: .3s;
        transition-timing-function: ease-in-out;
        transition-behavior: allow-discrete
    }

    .site-dialog .dialog-content-section {
        padding-block: var(--gap-m);
        padding-inline: var(--gap-l);
        text-align: center;
        position: relative
    }

    .site-dialog .close-dialog-btn {
        aspect-ratio: 1;
        --font-size: var(--font-size-lg);
        width: var(--font-size);
        height: var(--font-size);
        position: absolute;
        top: calc(var(--gap-m) / 2);
        right: calc(var(--gap-l) / 2);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        --color-for-text: var(--text-color);
        color: var(--color-for-text)
    }

    .site-dialog .close-dialog-btn svg {
        width: 100%;
        height: 100%;
        display: block
    }

    @starting-style {
        .site-dialog[open] {
            opacity: 0;
            transform: translate(-50%, -45%) scale(.95);
            visibility: hidden
        }
    }.site-dialog:not([open]) {
         opacity: 0;
         transform: translate(-50%, -45%) scale(.95);
         visibility: hidden
     }

    .site-dialog::backdrop {
        background-color: #0003;
        transition-property: background-color, overlay, display;
        transition-duration: .3s;
        transition-timing-function: ease-in-out;
        transition-behavior: allow-discrete
    }

    @starting-style {
        .site-dialog[open]::backdrop {
            background-color: #0000
        }
    }.site-dialog:not([open])::backdrop {
         background-color: #0000
     }
}