@import url(fontiran2.css);
* {
    zzzzzzzzborder: 0;
    font-size: 100%;
    font: inherit;
    box-sizing: border-box;
}
:root {
    /* Padding */
    --padding-xs: 4px;
    --padding-sm: 8px;
    --padding-md: 12px;
    --padding-lg: 16px;
    --padding-xl: 24px;
    --padding-2xl: 32px;
    --padding-3xl: 40px;
    /* Margin */
    --margin-3xs: 2px;
    --margin-2xs: 4px;
    --margin-xs: 8px;
    --margin-sm: 12px;
    --margin-md: 16px;
    --margin-lg: 24px;
    --margin-xl: 32px;
    --margin-2xl: 40px;
    --margin-3xl: 48px;
    /* Spacing */
    --spacing-0: 0px;
    --spacing-2: 2:0px;
    --spacing-4: 4:0px;
    --spacing-8: 8:0px;
    --spacing-12: 12:0px;
    --spacing-16: 16:0px;
    --spacing-20: 20:0px;
    --spacing-24: 24:0px;
    --spacing-28: 28:0px;
    --spacing-32: 32:0px;
    --spacing-36: 36:0px;
    --spacing-40: 40:0px;
    --spacing-48: 48:0px;
    --spacing-56: 56:0px;
    --spacing-64: 64:0px;
    --spacing-72: 72:0px;
    --spacing-80: 80:0px;
    --spacing-88: 88:0px;
    --spacing-96: 96:0px;
    /* Font Weight */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    /* Font Sizes */
    --font-size-2xs: 10px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    /* Gaps */
    --gap-2xs: 0px;
    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap-md: 12px;
    --gap-lg: 16px;
    --gap-xl: 24px;
    --gap-2xl: 32px;
    --gap-3xl: 40px;
    --gap-4xl: 48px;
    /* Radius ----- */
    --radius-2xs: 0px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 96px;
    /* ----- ----- ----- */
    /* Neutral Colors */
    --color-text: #1d3557;
    --color-background: #f8f9fa;
    --color-border: #ced4da;
    --color-neutral-gray-100: #f0f0f0;
    --color-neutral-gray-200: #d6d6d6;
    --color-neutral-gray-300: #a5a5a5;
    --color-neutral-gray-400: #828282;
    --color-neutral-gray-500: #4e4e4e;
    --color-neutral-gray-600: #2b2b2b;
    /* Base Color Palette ---------- */
    --color-base-100: #47606C;
    --color-base-200: #263238;
    --color-base-300: #18242A;
    --color-base-white: #ffffff;
    /* Background ---------- */
    --background-color-light: var(--color-base-100);
    --background-color-medium: var(--color-base-200);
    --background-color-dark: var(--color-base-300);
    --background-color-100: #47606C;
    --background-color-200: #263238;
    --background-color-300: #18242A;
    /* Text ---------- */
    --text-color-primary: var(--color-base-white);
    --text-color-secondary: var(--color-neutral-gray-200);
    --text-color-tertiary: var(--color-neutral-gray-300);
    --text-color-body-secondary: #D6D6D6;
    /* Primary Color Palette ---------- */
    --color-primary-100: #E6FFFD;
    --color-primary-200: #B6EEEE;
    --color-primary-300: #18BAAC;
    --color-primary-400: #498A8A;
    --color-primary-500: #345758;
    --color-secondary: #9b2226;
    --color-accent: #ffb703;
    /* Accent Color Palette ---------- */
    --color-accent-100: #FCE0D8;
    --color-accent-200: #F8B29D;
    --color-accent-300: #F0653B;
    --color-accent-400: #B24B2C;
    --color-accent-500: #5D2E20;
    /* Static Red */
    --color-red-100: #FFEBEC;
    --color-red-200: #FFA8A8;
    --color-red-300: #E63946;
    --color-red-400: #A40D12;
    --color-red-500: #73090D;
    /* Static Green */
    --color-green-100: #F5FFEA;
    --color-green-200: #D3FAAC;
    --color-green-300: #71CC16;
    --color-green-400: #447A0D;
    --color-green-500: #264507;
    /* Static Orange */
    --color-orange-100: #FFF3E0;
    --color-orange-200: #FFD180;
    --color-orange-300: #FFAB40;
    --color-orange-400: #F26700;
    --color-orange-500: #CA5600;
    /* Static Blue */
    --color-blue-100: #DEEAFD;
    --color-blue-200: #95BEFF;
    --color-blue-300: #326DF6;
    --color-blue-400: #2149A4;
    --color-blue-500: #112452;
    /* Background*/
    --color-bg-100: #47606C;
    --color-bg-200: #263238;
    --color-bg-300: #31393c;
    /* Font Family */
    --font-family-base: IRANSansX;
    /* Layout Dimensions ---------- */
    --header-height: 60px;
    --footer-height: 50px;
    /* Buttons */
    --button-height: 60px;
    --button-border-width: 0px;
    --button-color: var(--color-base-white);
    --button-border-color: var(--color-border);
    --button-background-color: var(--color-primary-300);
    --button-border-radius: 4px;
    /* Links */
    --link-height: 40px;
    --link-color: var(--color-primary-300);
    /* Transitions ---------- */
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    /* Borders ---------- */
    --border-width: 1px;
    --border-radius: 5px;
    --border-color: var(--color-border);
    /* Radius ---------- */
    --radius-sm: 4px;
    /* text Input */
    --input-height: 40px;
    --input-text-background-color: var(--background-color-dark);
    --input-text-color: var(--text-color-primary);
    /* BottomSheet ----- */
    --bottomSheet--bg: var(--background-color-dark);
    --bottomSheet-border-radius: var(--radius-xl) var(--radius-xl) 0px 0px;
    --bottomSheet-background-color: var(--background-color-dark);
    /* ---- */
    --color-caption-error: var(--color-red-300);
    --color-base-white-rgb: 255, 255, 255;
}

.c-gray-600 {
    color: var(--color-neutral-gray-600);
}

.border-radius-sm {
    border-radius: var(--radius-sm)
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: var(--button-height);
    color: black;
    background-color: var(--button-background-color);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    transition: background-color var(--transition-medium);
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    cursor: pointer;
    stroke: var(--color-base-white);
}
    .btn:hover {
        background-color: var(--color-primary-400);
    }

    .btn svg {
        width: 24px;
        height: 24px;
    }

.btn-large {
    height: 48px;
    font-size: 16px !important;
}

.btn-medium {
    height: 40px;
    font-size: 14px !important;
}

.btn-small {
    height: 32px;
    font-size: 14px !important;
}

.btn-primary {
    color: var(--color-base-white);
    background-color: var(--color-primary-300);
}
    .btn-primary:hover {
        background-color: var(--color-primary-400);
    }
    .btn-primary:disabled {
        color: var(--color-base-white);
        opacity: 0.25;
        background-color: var(--color-primary-500);
    }
    .btn-primary svg {
        stroke: var(--color-base-white);
    }

.btn-secondary {
    color: var(--color-primary-300);
    background-color: transparent;
    border: 1px solid var(--color-primary-300);
}
    .btn-secondary:hover {
        background-color: var(--color-primary-500);
    }
    .btn-secondary:disabled {
        color: var(--color-primary-500);
        border-color: var(--color-primary-400);
    }
    .btn-secondary svg {
        stroke: var(--color-primary-300);
    }

.btn-tertiary {
    color: var(--color-primary-300);
    background-color: transparent;
}
    .btn-tertiary:hover {
        background-color: var(--color-primary-500);
    }
    .btn-tertiary:disabled {
        color: green;
    }
    .btn-tertiary svg {
        stroke: var(--color-primary-300);
    }

.btn-alert {
    color: var(--color-red-200);
    background-color: transparent;
}
    .btn-alert:hover {
        background-color: var(--color-neutral-gray-500);
    }
    .btn-alert:disabled {
        color: var(--color-neutral-gray-300);
    }
    .btn-alert svg {
        stroke: var(--color-red-200);
    }

.btn-tertiary-reverse {
    color: var(--color-neutral-gray-400);
    background-color: transparent;
    stroke: var(--color-neutral-gray-400);
}

    .btn-tertiary-reverse:hover {
        color: var(--color-neutral-gray-400);
        background-color: var(--color-neutral-gray-100);
    }

    .btn-tertiary-reverse:disabled {
        color: var(--color-neutral-gray-200);
    }

.font-thin {
    font-weight: 100;
}
.font-ultraLight {
    font-weight: 200;
}
.font-light {
    font-weight: 300;
}
.font-regular {
    font-weight: 400;
}
.font-medium {
    font-weight: 500;
}
.font-demiBold {
    font-weight: 600;
}
.font-bold {
    font-weight: var(--font-weight-bold);
}
.font-extraBold {
    font-weight: 800;
}
.font-black {
    font-weight: 900;
}

.font-caption-1 {
    font-size: var(--font-size-xs);
    line-height: 18px;
}
.font-caption-2 {
    font-size: 10px;
    line-height: 16px;
}
.font-body-1 {
    font-size: var(--font-size-xs);
    line-height: 18px;
}
.font-body-2 {
    font-size: 14px;
    line-height: 22px;
}
.font-heading-1 {
    font-size: 32px;
    line-height: 50px;
}
.font-heading-2 {
    font-size: 24px;
    line-height: 38px;
}
.font-heading-3 {
    font-size: 18px;
    line-height: 30px;
}
.font-heading-4 {
    font-size: var(--font-size-md);
    line-height: 26px;
}
.font-heading-5 {
    font-size: 14px;
    line-height: 22px;
}
.font-caption-error {
    font-size: 13px;
    line-height: 17px;
}

.farsi-digit {
    font-family: 'IRANSansX FD';
}

.padding-medium {
    padding: var(--spacing-4);
}

.margin-medium {
    padding: var(--spacing-12);
}

.loader {
    width: 24px;
    aspect-ratio: 2;
    --_g1: no-repeat radial-gradient(circle closest-side, var(--color-accent-300) 90%, #0000);
    --_g2: no-repeat radial-gradient(circle closest-side, var(--color-accent-200) 90%, #0000);
    --_g3: no-repeat radial-gradient(circle closest-side, var(--color-accent-300) 90%, #0000);
    background: var(--_g1) 0% 50%, var(--_g2) 50% 50%, var(--_g3) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    20% {
        background-position: 0% 0%, 50% 50%,100% 50%
    }

    40% {
        background-position: 0% 100%, 50% 0%,100% 50%
    }

    60% {
        background-position: 0% 50%, 50% 100%,100% 0%
    }

    80% {
        background-position: 0% 50%, 50% 50%,100% 100%
    }
}
button .loading {
    width: 24px;
    aspect-ratio: 2;
    --_g1: no-repeat radial-gradient(circle closest-side, var(--color-primary-200) 90%, #0000);
    --_g2: no-repeat radial-gradient(circle closest-side, var(--color-base-white) 90%, #0000);
    --_g3: no-repeat radial-gradient(circle closest-side, var(--color-primary-200) 90%, #0000);
    background: var(--_g1) 0% 50%, var(--_g2) 50% 50%, var(--_g3) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
}
@keyframes l3 {
    20% { background-position: 0% 0%, 50% 50%,100% 50% }
    40% { background-position: 0% 100%, 50% 0%,100% 50% }
    60% { background-position: 0% 50%, 50% 100%,100% 0% }
    80% { background-position: 0% 50%, 50% 50%,100% 100% }
}


.link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: var(--link-height);
    color: var(--link-color);
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    cursor: pointer;
    stroke: var(--color-primary-300);
    align-self: flex-start;
}
    .link:hover {
        text-decoration: underline;
    }
    .link.disabled {
        color: var(--color-primary-500);
        text-decoration: none;
        pointer-events: none;
    }
.link-large {
    font-size: 16px;
    line-height: 26px;
}
.link-medium {
    font-size: 14px;
    line-height: 22px;
}
.link-small {
    font-size: 14px;
    line-height: 22px;
}

.input-text {
 
}
    .input-text input {
        color: var(--input-text-color);
        background-color: var(--input-text-background-color);
    }

.inputBox {
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: var(--gap-xs);
    margin-right: 4px;
}
.inputBox .box {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: end;
    align-items: self-start;
    height: 48px;
    border: 1px solid var(--color-primary-500);
    border-radius: 0px 4px 4px 0px;
    padding-right: 15px;
    padding-top: 20px;
    background-color: var(--input-text-background-color);
    cursor: text;
    gap: var(--gap-md);
}

.allPanel.english .inputBox .box {
    justify-content: start;
    border-radius: 4px 0px 0px 4px;
    padding-right: 0px;
    padding-left: 15px;
}
.inputBox .box:focus-within {
    border: 1px solid var(--color-primary-300);
    box-shadow: 0px 0px 6px 0px #59C5B9;
    zzzpadding-top: 19px;
    zzpadding-right: 14px;
}
.allPanel.english .inputBox .box:focus-within {
    zzzpadding-right: 0px;
    zzzpadding-left: 14px;
}
.inputBox .box input {
    height: 26px;
    line-height: 26px;
    outline: none;
    text-align: right;
    font-size: 16px;
    direction: rtl;
    color: var(--input-text-color);
    background-color: var(--input-text-background-color);
    border: 0px;
}
    .inputBox .box input:not(.datePicker input) {
        width: 100%;
    }
.allPanel.english .inputBox .box input {
    text-align: left;
    direction: ltr;
}
.inputBox .box .placeHolder {
    position: absolute;
    top: 17px;
    right: 16px;
    color: var(--text-color-tertiary);
    font-size: 14px;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    line-height: 1;
}
    .inputBox .box .placeHolder.movedUp {
        top: 4px;
        font-size: 12px;
    }
.allPanel.english .inputBox .box .placeHolder {
    right: unset;
    left: 16px;
}
.inputBox .box input:focus + div,
.inputBox .box input:valid + div {
    top: 4px;
    font-size: 12px;
}
.inputBox .box .placeHolder .english {
    margin-top: 2px;
}
.inputBox .box svg {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    stroke: var(--color-neutral-gray-300);
    cursor: pointer;
}
.inputBox .warning {
    height: 24px;
    margin-right: 4px;
    color: var(--color-caption-error);
}

.inputBox .dateHolder {
    width: calc( 100% - 48px );
}
    .inputBox .dateHolder .datePicker {
        display: block;
        height: 26px;
        line-height: 26px;
        padding: 0px;
        color: var(--input-text-color) !important;
        background-color: var(--input-text-background-color) !important;
    }
        .inputBox .dateHolder .datePicker input {
            width: 20px;
            height: 26px;
            line-height: 26px;
        }
        .inputBox .dateHolder .datePicker .txtYear {
            width: calc( 100% - 52px );
        }

label.radioButton {
    display: inline-flex;
    justify-content: end;
    align-items: center;
    cursor: pointer;
}
    label.radioButton input[type=radio] {
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-clip: content-box;
        border: 1px solid var(--color-accent-300);
        cursor: pointer;
    }
        label.radioButton input[type=radio]:checked {
            background-color: var(--color-accent-300);
            padding: 3px;
            border: 1px solid var(--color-accent-300);
        }
    label.radioButton.disabled input[type=radio] {
        border: 1px solid var(--color-neutral-gray-300);
        cursor: default;
    }
        label.radioButton.disabled input[type=radio]:checked {
            background-color: var(--color-neutral-gray-300);
            border: 1px solid var(--color-neutral-gray-300);
            cursor: default;
        }
    label.radioButton.disabled {
        cursor: default;
    }

.hide {
    display: none;
}

.btn-width-96 {
    width: 96px;
}
.btn-width-150 {
    width: 150px;
}
.btn-width-180 {
    width: 180px;
}
.width-full {
    width: 100%;
}

.flex1 {
    flex: 1;
}

.color-heading-primary {
    color: var(--color-primary-200);
}
.color-body-primary {
    color: var(--color-base-white);
}
.color-error-default {
    stroke: var(--color-red-200);
}
.pointer {
    cursor:pointer;
}
.svg16 {
    width: 16px;
    height: 16px;
}
.svg24 {
    width: 24px;
    height: 24px;
}
.icon24 {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.btn-padding-lg {
    padding-left: var(--padding-lg);
    padding-right: var(--padding-lg);
}

.btn-padding-2xl {
    padding-left: var(--padding-2xl);
    padding-right: var(--padding-2xl);
}