@layer base, components, layout;
@layer base {
    :root {
        --bg: #f7f7f7;
        --text: #1a1a1a;
        --primary: #8c5df6;
        --secondary: #bf5f0d;
        --done: #30a46c;
        --info: #2f6fed;
        --warn: #e5a02f;
        --error: #e5484d;
        --white: #ffffff;
        --dark: #1a1a1a;
        --gray: #8a8a8a;
        --sub: #6b6b6b;
        --desc: #9a9a9a;
        --box: #fff;
        --radius: 8px;
        --shadow: rgba(0, 0, 0, .15);
        --border: #e2e2e2;
        --box-bg: #fff
    }

    [data-theme="dark"] {
        --bg: #1a1a1a;
        --text: #f2f2f2;
        --box: #242424;
        --border: #333333;
        --shadow: rgba(0, 0, 0, .4);
        --gray: #a0a0a0;
        --sub: #b5b5b5;
        --desc: #8a8a8a;
        --box-bg: #222
    }

    *, *::before, *::after {
        box-sizing: border-box;
        font-size: inherit
    }

    html, body {
        width: 100vw;
        min-height: 100vh;
        margin: 0;
        padding: 0
    }

    body {
        min-width: 360px;
        font-family: "dana", 'tahoma', sans-serif;
        font-size: .9rem;
        font-weight: 500;
        text-align: right;
        direction: rtl;
        overflow-x: hidden;
        background-color: var(--bg);
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    body.fixed {
        overflow-y: hidden
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--gray) var(--box)
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }

    ::-webkit-scrollbar-track {
        background: var(--box)
    }

    ::-webkit-scrollbar-thumb {
        background: var(--gray);
        border-radius: 999px
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--sub)
    }

    hr {
        margin: 16px 0;
        color: inherit;
        border: 0;
        border-top: 1px solid
    }

    h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, .title {
        color: var(--text);
        margin: 0 auto 10px;
        font-weight: 700
    }

    h1, .h1 {
        font-size: 24px
    }

    h2, .h2 {
        font-size: 20px
    }

    h3, .h3 {
        font-size: 18px
    }

    h4, .h4 {
        font-size: 18px
    }

    h5, .h5 {
        font-size: 16px
    }

    h6, .h6 {
        font-size: 14px
    }

    i {
        color: inherit
    }

    p {
        color: var(--text);
        line-height: 1.8;
        margin-top: 0;
        margin-bottom: 16px
    }

    span {
        color: var(--text)
    }

    address {
        margin-bottom: 16px;
        font-style: normal;
        line-height: inherit
    }

    ol, ul {
        list-style: none;
        margin: 0;
        padding: 0
    }

    ul.pure {
        list-style: disc;
        padding-right: 15px
    }

    ol.pure {
        list-style: persian;
        padding-right: 15px
    }

    ol, ul, dl {
        margin-top: 0
    }

    ol ol, ul ul, ol ul, ul ol {
        margin-bottom: 0
    }

    dt {
        font-weight: 700
    }

    dd {
        margin-bottom: 8px;
        margin-left: 0
    }

    blockquote {
        margin: 0 0 16px
    }

    b, strong {
        font-weight: bolder
    }

    small, .small {
        font-size: 0.875em
    }

    mark, .mark {
        padding: 0.1875em;
        color: var(--text);
        background-color: #fff3cd
    }

    sub, sup {
        position: relative;
        font-size: 0.75em;
        line-height: 0;
        vertical-align: baseline
    }

    sub {
        bottom: -0.25em
    }

    sup {
        top: -0.5em
    }

    a, .link {
        --text: var(--primary);
        color: var(--text);
        display: inline-block;
        text-decoration: none !important;
        outline: none !important
    }

    .link:hover, a:hover {
        color: hsl(from var(--primary) h s calc(l - 20))
    }

    a:not([href]):not([class]), a:not([href]):not([class]):hover {
        color: inherit;
        text-decoration: none
    }

    pre, code, kbd, samp {
        font-size: 1em
    }

    pre {
        display: block;
        margin-top: 0;
        margin-bottom: 16px;
        overflow: auto;
        font-size: 0.875em
    }

    pre code {
        font-size: inherit;
        color: inherit;
        word-break: normal
    }

    code {
        font-size: 0.875em;
        color: var(--text);
        word-wrap: break-word
    }

    a > code {
        color: inherit
    }

    kbd kbd {
        padding: 0;
        font-size: 1em
    }

    figure {
        margin: 0 0 16px
    }

    figure > img {
        display: block
    }

    figcaption {
        color: var(--desc);
        font-size: 0.875em
    }

    img {
        max-width: 100%;
        height: auto
    }

    img, svg {
        vertical-align: middle
    }

    caption {
        padding-top: 8px;
        padding-bottom: 8px;
        color: var(--desc);
        text-align: left
    }

    th {
        text-align: inherit;
        text-align: -webkit-match-parent
    }

    thead, tbody, tfoot, tr, td, th {
        border-color: inherit;
        border-style: solid;
        border-width: 0
    }

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

    td, th {
        padding: 8px;
        text-align: right
    }

    iframe {
        border: 0
    }

    label, .label {
        display: block;
        color: var(--sub);
        margin-bottom: 5px
    }

    button {
        border-radius: 0
    }

    button:focus:not(:focus-visible) {
        outline: 0
    }

    button, select {
        text-transform: none
    }

    [role=button] {
        cursor: pointer
    }

    select {
        word-wrap: normal
    }

    textarea {
        resize: vertical
    }

    fieldset {
        min-width: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px
    }

    legend {
        color: var(--sub);
        width: auto;
        padding: 0 8px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: inherit
    }

    summary {
        display: list-item;
        cursor: pointer
    }

    summary::-webkit-details-marker, summary::marker {
        display: none
    }

    details {
        display: grid;
        grid-template-rows:auto 0fr;
        transition: grid-template-rows .25s ease
    }

    details[open] {
        grid-template-rows:auto 1fr
    }

    details > summary ~ * {
        overflow: hidden;
        min-height: 0
    }

    progress {
        vertical-align: baseline
    }

    [hidden] {
        display: none !important
    }

    svg {
        overflow: hidden
    }

    ::-moz-focus-inner {
        padding: 0;
        border-style: none
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-color-swatch-wrapper {
        padding: 0
    }

    ::-webkit-file-upload-button {
        font: inherit;
        -webkit-appearance: button
    }

    .btn {
        --btn-c: var(--white);
        --btn-bg: var(--primary);
        --btn-bd: var(--primary);
        --btn-hc: var(--white);
        --btn-sh: none;
        display: inline-block;
        padding: 7px 15px;
        color: var(--btn-c);
        background-color: var(--btn-bg);
        border: 1px solid var(--btn-bd);
        border-radius: var(--radius);
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        transition: filter 0.15s ease-in-out
    }

    body .btn:disabled, body .btn.disabled, body fieldset:disabled .btn {
        --btn-bg: var(--gray);
        --btn-bd: var(--btn-bg);
        pointer-events: none !important;
        cursor: no-drop !important
    }

    .btn:hover, .btn:focus-visible {
        color: var(--btn-hc);
        filter: brightness(0.92);
        outline: 0;
        background: color-mix(in srgb, var(--btn-bg) 80%, transparent);
        box-shadow: var(--btn-sh)
    }

    .btn.secondary {
        --btn-bg: var(--secondary)
    }

    .btn.outline {
        --btn-bg: transparent;
        --btn-c: var(--btn-bd)
    }

    .btn.outline:hover, .btn.outline:focus {
        --btn-bg: var(--btn-bd);
        --btn-hc: var(--white);
        filter: none
    }

    .btn.link {
        --btn-bg: transparent;
        --btn-bd: transparent;
        --btn-c: var(--primary);
        --btn-hc: var(--primary);
        padding: 0
    }
    button.link {
        background: transparent;
        border: none;
        cursor: pointer;
    }
    @media (prefers-reduced-motion: reduce) {
        .btn {
            transition: none
        }
    }.locked {
         position: relative;
         pointer-events: none
     }

    .locked::before {
        content: 'در حال پردازش ...';
        position: absolute;
        inset: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 26px;
        background: var(--bg);
        opacity: .3;
        color: var(--text);
        font-size: .875em
    }

    .locked::after {
        content: '';
        position: absolute;
        top: calc(50% - 22px);
        right: calc(50% - 8px);
        z-index: 11;
        width: 16px;
        height: 16px;
        border: 2px solid var(--border);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: lockSpin .6s linear infinite
    }

    .dropdown {
        position: relative;
        display: inline-block
    }

    .dropdown > .menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 50;
        min-width: 160px;
        margin-top: 4px;
        padding: 4px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 2px 8px var(--shadow)
    }

    .dropdown.open > .menu {
        display: block
    }

    .dropdown > .menu > a {
        display: block;
        padding: 8px 10px;
        border-radius: var(--radius);
        color: var(--text)
    }

    .dropdown > .menu > a:hover {
        background: var(--box)
    }

    .badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: .75em;
        line-height: 1.6;
        background: var(--primary);
        color: var(--white)
    }

    .badge.secondary {
        background: var(--secondary)
    }

    .badge.info {
        background: var(--info)
    }

    .badge.error {
        background: var(--error)
    }

    .badge.warn {
        background: var(--warn)
    }

    .badge.done {
        background: var(--done)
    }

    .badge.outline {
        background: transparent;
        border: 1px solid currentColor;
        color: var(--text)
    }

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

    .ellipsis {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .ellipsis.lines {
        --lines: 2;
        display: -webkit-box;
        -webkit-line-clamp: var(--lines);
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal
    }

    .formControl, input.text-control {
        background: var(--box-bg);
        border: 1px solid var(--border);
        border-right: 2px solid var(--border);
        color: var(--text);
        border-radius: var(--radius);
        display: block;
        width: 100%;
        height: auto;
        padding: 10px
    }

    .formControl::placeholder {
        color: var(--gray);
        font-size: 12px
    }

    .formControl:focus {
        border-color: var(--primary) !important;
        box-shadow: none !important;
        outline: none
    }

    .formControl.tag-error {
        border-color: var(--error) !important;
        background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
        color: var(--error)
    }
    .formControl.tag-done {
        border-color: var(--done) !important;
        background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
        color: var(--done)
    }
    .formControl.tag-warn {
        border-color: var(--warn) !important;
        background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
        color: var(--warn)
    }
    .formControl.tag-info {
        border-color: var(--info) !important;
        background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
        color: var(--info)
    }

    input.text {
        -moz-appearance: textfield
    }

    .bar {
        background: var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        height: 8px
    }

    .bar > span {
        display: block;
        height: 100%;
        background: var(--primary);
        position: relative;
        overflow: hidden
    }

    .bar > span::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
        animation: barShine 1.6s infinite
    }

    .close {

        background: none;
        border: 0;
        padding: 0;
        font-size: 1.5em;
        line-height: 1;
        color: var(--text);
        cursor: pointer
    }

    .modal .close{
        position: absolute;
        top: 10px;
        left: 10px;
    }
    #modal_wrap {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: none
    }

    #modal_wrap.show {
        display: block
    }

    #modal_wrap > .overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5)
    }

    .modal {
        --mw: 640px;
        position: fixed;
        inset: 0;
        display: none;
        overflow: hidden;
        outline: 0
    }

    .modal.show {
        display: block;
        overflow-x: hidden;
        overflow-y: auto
    }

    .modal > .overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5)
    }

    .modal.small {
        --mw: 400px
    }

    .modal.medium {
        --mw: 640px
    }

    .modal.large {
        --mw: 960px
    }

    .modal .dialog {
        position: relative;
        width: 100%;
        max-width: var(--mw);
        margin: 0 auto;
        height: 100vh;
        display: flex;
        align-items: center;
        padding: 0 20px
    }

    .modal .wrap {
        width: 100%;
        min-height: 150px;
        background: var(--box);
        border-radius: var(--radius);
        max-height: 90vh;
        overflow: hidden
    }

    .modal.locked .wrap::after {
        content: 'در حال بررسی ...';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
        border-radius: var(--radius);
        background: #ffffffdb
    }

    .modal .header {
        padding: 10px
    }

    .modal .body {
        max-height: 90vh;
        overflow: hidden auto;
        padding: 10px
    }

    #toast {
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 201;
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .alert {
        position: relative;
        min-width: 240px;
        padding: 16px;
        border-radius: var(--radius);
        background: var(--box);
        color: var(--text);
        box-shadow: 0 2px 8px var(--shadow);
        overflow: hidden
    }

    .alert.info {
        border-inline-start: 4px solid var(--info)
    }

    .alert.error {
        border-inline-start: 4px solid var(--error)
    }

    .alert.warn {
        border-inline-start: 4px solid var(--warn)
    }

    .alert.done, .alert.success {
        border-inline-start: 4px solid var(--done)
    }

    .alert .title {
        font-weight: bold;
        margin-bottom: 4px
    }

    .alert .close {
        position: absolute;
        top: 8px;
        left: 8px;
        cursor: pointer
    }

    .alert .progress {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 3px;
        width: 0;
        background: currentColor
    }

    #toast .progress {
        animation: toastProgress var(--duration) linear forwards
    }

    #toast .alert:hover .progress, #toast .alert.pause .progress {
        animation-play-state: paused
    }

    @keyframes toastProgress {
        from {
            width: 0
        }
        to {
            width: 100%
        }
    }.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
         width: 100%;
         padding-right: 15px;
         padding-left: 15px;
         margin-right: auto;
         margin-left: auto;
         max-width: 1440px
     }

    .flex {
        display: flex
    }

    .inlineFlex {
        display: inline-flex
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        --gap: 1%;
        gap: var(--gap)
    }

    .col {
        flex: 1 0 0;
        width: auto
    }

    [class*="col-"] {
        flex: 0 0 auto;
        width: calc((100% / var(--w)) - (var(--gap) * (var(--w) - 1)) / var(--w));
        margin-bottom: 12px
    }

    .colAuto {
        flex: 0 0 auto;
        width: auto
    }

    .col-1 {
        --w: 12
    }

    .col-2 {
        --w: 6
    }

    .col-3 {
        --w: 4
    }

    .col-4 {
        --w: 3
    }

    .col-5 {
        --w: 2.4
    }

    .col-6 {
        --w: 2
    }

    .col-7 {
        --w: 1.716
    }

    .col-8 {
        --w: 1.5
    }

    .col-9 {
        --w: 1.334
    }

    .col-10 {
        --w: 1.2
    }

    .col-11 {
        --w: 1.091
    }

    .col-12 {
        --w: 1
    }

    .col-20 {
        --w: 5
    }

    .flexRow {
        flex-direction: row
    }

    .flexCol {
        flex-direction: column
    }

    .flexRowReverse {
        flex-direction: row-reverse
    }

    .flexColReverse {
        flex-direction: column-reverse
    }

    .wrapNone {
        flex-wrap: nowrap
    }

    .wrapReverse {
        flex-wrap: wrap-reverse
    }

    .justifyStart {
        justify-content: flex-start
    }

    .justifyEnd {
        justify-content: flex-end
    }

    .justifyCenter {
        justify-content: center
    }

    .justifyBetween {
        justify-content: space-between
    }

    .justifyAround {
        justify-content: space-around
    }

    .justifyEvenly {
        justify-content: space-evenly
    }

    .itemStart {
        align-items: flex-start
    }

    .itemEnd {
        align-items: flex-end
    }

    .itemCenter {
        align-items: center
    }

    .itemBaseline {
        align-items: baseline
    }

    .itemStretch {
        align-items: stretch
    }

    .contentStart {
        align-content: flex-start
    }

    .contentEnd {
        align-content: flex-end
    }

    .contentCenter {
        align-content: center
    }

    .contentBetween {
        align-content: space-between
    }

    .contentAround {
        align-content: space-around
    }

    .contentStretch {
        align-content: stretch
    }

    .selfStart {
        align-self: flex-start
    }

    .selfEnd {
        align-self: flex-end
    }

    .selfCenter {
        align-self: center
    }

    .selfBaseline {
        align-self: baseline
    }

    .selfStretch {
        align-self: stretch
    }

    .placeCenter {
        place-items: center;
        place-content: center
    }

    .flexFill {
        flex: 1 1 auto
    }

    .flexNone {
        flex: none
    }

    .gap-0 {
        gap: 0
    }

    .gap-1 {
        gap: 5px
    }

    .gap-2 {
        gap: 10px
    }

    .gap-3 {
        gap: 15px
    }

    .gap-4 {
        gap: 20px
    }

    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    .order-3 {
        order: 3
    }

    .order-4 {
        order: 4
    }

    .box {
        background-color: var(--box-bg);
        color: var(--text);
        position: relative;
        line-height: 1.8;
        padding: 15px;
        text-align: justify;
        box-shadow: 0 3px 4px -2px hsl(from var(--box-bg) h s calc(l - 20));
        border-radius: 15px;
        border: 1px solid color-mix(in srgb, var(--box-bg), #000 12%)
    }

    .box.glass {
        background-color: #ffffff70;
        border: none
    }

    .box .title {
        font-size: 1.5em;
        color: var(--text);
        font-weight: 700
    }

    @media (prefers-reduced-motion: reduce) {
        *:not(.progress), ::before, ::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
            scroll-behavior: auto !important
        }
    }.modal.locked .body {
         min-height: 80px
     }

    .modal.locked .wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 40px;
        height: 40px;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-dasharray='90 150'/%3E%3C/svg%3E") center/contain no-repeat;
        animation: spin 1s linear infinite
    }

    #modal_confirm{z-index: 202}
    .modal.confirm .wrap {
        text-align: center
    }

    #modal_confirm .buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin: 15px 0
    }

    body:has(.modal.show) {
        overflow: hidden
    }

    @keyframes spin {
        to {
            transform: rotate(360deg)
        }
    }
}
/* Append to core.css. The layer order is declared at the top of core.css, so placement does not matter */
@layer base {
    .btn.small {
        padding: 4px 10px;
        font-size: .85em
    }

    .note {
        display: block;
        margin: 0;
        color: var(--desc);
        font-size: .8em;
        line-height: 1.6
    }

    .note.error {
        color: var(--error);
        white-space: pre-line
    }

    /* Drop zone: the file input covers it, so a click anywhere opens the file picker */
    .drop {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 32px 16px;
        text-align: center;
        border: 1.5px dashed color-mix(in srgb, var(--primary) 55%, transparent);
        border-radius: var(--radius);
        background: color-mix(in srgb, var(--primary) 6%, transparent);
        transition: background-color .15s, border-color .15s
    }

    .drop.over {
        border-style: solid;
        border-color: var(--primary);
        background: color-mix(in srgb, var(--primary) 14%, transparent)
    }

    .drop:has(input:focus-visible) {
        outline: 2px solid var(--primary);
        outline-offset: 2px
    }

    .drop > input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer
    }

    .drop > i {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin-bottom: 4px;
        border-radius: var(--radius);
        background: color-mix(in srgb, var(--primary) 14%, transparent);
        color: var(--primary);
        font-size: 24px
    }

    .drop b {
        color: var(--text)
    }

    .drop u {
        color: var(--primary);
        text-underline-offset: 5px
    }

    /* File list */
    .files {
        display: grid;
        gap: 8px
    }

    .files:empty {
        display: none
    }

    .file {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--box)
    }

    .file .thumb {
        flex: none;
        display: grid;
        place-items: center;
        width: 96px;
        height: 72px;
        overflow: hidden;
        border-radius: var(--radius);
        background: color-mix(in srgb, var(--primary) 10%, transparent);
        color: var(--primary);
        font-size: 22px
    }

    .file .thumb > img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .file .info {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    /* File names are often Latin: plaintext keeps their own direction inside the RTL row */
    .file .name {
        color: var(--text);
        font-weight: 700;
        text-align: right;
        unicode-bidi: plaintext;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .file .status {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--sub);
        font-size: .85em
    }

    .file .bar {
        height: 6px
    }

    .file .bar > span {
        transition: width .2s linear
    }

    .file .bar > span::after {
        content: none
    }

    .file.send .bar > span {
        background: repeating-linear-gradient(-45deg, var(--primary) 0 8px, color-mix(in srgb, var(--primary) 70%, var(--white)) 8px 16px);
        background-size: 22.63px 100%;
        animation: uploadStripe .8s linear infinite
    }

    .file.done .status {
        color: hsl(from var(--primary) h s calc(l - 15))
    }

    .file.error {
        border-color: color-mix(in srgb, var(--error) 45%, var(--border))
    }

    .file.error .status {
        color: var(--error)
    }

    .file .actions {
        flex: none;
        display: flex;
        align-items: center;
        gap: 8px
    }

    .file .actions .btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0
    }

    @media (max-width: 480px) {
        .file {
            flex-wrap: wrap
        }

        .file .thumb {
            width: 64px;
            height: 48px
        }

        .file .actions {
            width: 100%;
            justify-content: flex-end
        }
    }

    @keyframes uploadStripe {
        to {
            background-position: 22.63px 0
        }
    }
}
@layer layout {
    .mt-0, .my-0, .m-0 {
        margin-top: 0
    }

    .mt-1, .my-1, .m-1 {
        margin-top: 5px
    }

    .mt-2, .my-2, .m-2 {
        margin-top: 10px
    }

    .mt-3, .my-3, .m-3 {
        margin-top: 15px
    }

    .mt-4, .my-4, .m-4 {
        margin-top: 20px
    }

    .ms-0, .mx-0, .m-0 {
        margin-right: 0
    }

    .ms-1, .mx-1, .m-1 {
        margin-right: 5px
    }

    .ms-2, .mx-2, .m-2 {
        margin-right: 10px
    }

    .ms-3, .mx-3, .m-3 {
        margin-right: 15px
    }

    .ms-4, .mx-4, .m-4 {
        margin-right: 20px
    }

    .mb-0, .my-0, .m-0 {
        margin-bottom: 0
    }

    .mb-1, .my-1, .m-1 {
        margin-bottom: 5px
    }

    .mb-2, .my-2, .m-2 {
        margin-bottom: 10px
    }

    .mb-3, .my-3, .m-3 {
        margin-bottom: 15px
    }

    .mb-4, .my-4, .m-4 {
        margin-bottom: 20px
    }

    .me-0, .mx-0, .m-0 {
        margin-left: 0
    }

    .me-1, .mx-1, .m-1 {
        margin-left: 5px
    }

    .me-2, .mx-2, .m-2 {
        margin-left: 10px
    }

    .me-3, .mx-3, .m-3 {
        margin-left: 15px
    }

    .me-4, .mx-4, .m-4 {
        margin-left: 20px
    }

    .pt-0, .py-0, .p-0 {
        padding-top: 0
    }

    .pt-1, .py-1, .p-1 {
        padding-top: 5px
    }

    .pt-2, .py-2, .p-2 {
        padding-top: 10px
    }

    .pt-3, .py-3, .p-3 {
        padding-top: 15px
    }

    .pt-4, .py-4, .p-4 {
        padding-top: 20px
    }

    .ps-0, .px-0, .p-0 {
        padding-right: 0
    }

    .ps-1, .px-1, .p-1 {
        padding-right: 5px
    }

    .ps-2, .px-2, .p-2 {
        padding-right: 10px
    }

    .ps-3, .px-3, .p-3 {
        padding-right: 15px
    }

    .ps-4, .px-4, .p-4 {
        padding-right: 20px
    }

    .pb-0, .py-0, .p-0 {
        padding-bottom: 0
    }

    .pb-1, .py-1, .p-1 {
        padding-bottom: 5px
    }

    .pb-2, .py-2, .p-2 {
        padding-bottom: 10px
    }

    .pb-3, .py-3, .p-3 {
        padding-bottom: 15px
    }

    .pb-4, .py-4, .p-4 {
        padding-bottom: 20px
    }

    .pe-0, .px-0, .p-0 {
        padding-left: 0
    }

    .pe-1, .px-1, .p-1 {
        padding-left: 5px
    }

    .pe-2, .px-2, .p-2 {
        padding-left: 10px
    }

    .pe-3, .px-3, .p-3 {
        padding-left: 15px
    }

    .pe-4, .px-4, .p-4 {
        padding-left: 20px
    }

    .mt-auto, .my-auto {
        margin-top: auto
    }

    .ms-auto, .mx-auto {
        margin-right: auto
    }

    .mb-auto, .my-auto {
        margin-bottom: auto
    }

    .me-auto, .mx-auto {
        margin-left: auto
    }

    .ltr {
        direction: ltr
    }

    .rtl {
        direction: rtl
    }

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

    .txt-black {
        color: var(--dark)
    }

    .txt-white {
        color: var(--white)
    }

    .txt-sub {
        color: var(--sub)
    }

    .txt-desc {
        color: var(--desc)
    }

    .txt-title {
        color: var(--text)
    }

    .txt-lg {
        font-size: 1.25em
    }

    .txt-md {
        font-size: 1em
    }

    .txt-sm {
        font-size: .8em
    }

    .txt-start {
        text-align: right
    }

    .txt-end {
        text-align: left
    }

    .txt-center {
        text-align: center
    }

    .w-100 {
        width: 100%
    }

    .w-75 {
        width: 75%
    }

    .w-50 {
        width: 50%
    }

    .w-25 {
        width: 25%
    }

    .vw {
        width: 100vw
    }

    .w-lg {
        max-width: 960px
    }

    .w-md {
        max-width: 640px
    }

    .w-sm {
        max-width: 400px
    }

    .vh {
        height: 100vh
    }

    .block {
        display: block
    }

    .relative {
        position: relative
    }

    .absolute {
        position: absolute
    }

    .wrap {
        position: relative
    }

    .inlineBlock {
        display: inline-block
    }

    .sticky {
        --top: 0;
        position: sticky;
        top: var(--top)
    }
} @keyframes lockSpin {
      to {
          transform: rotate(360deg)
      }
  }

@keyframes barShine {
    from {
        transform: translateX(-150%)
    }
    to {
        transform: translateX(150%)
    }
}