:root {
    --Colors-Primary-50: #EBFAF1;
    --Colors-Primary-100: #CFE7DA;
    --Colors-Primary-200: #A9D5BD;
    --Colors-Primary-300: #84C2A0;
    --Colors-Primary-400: #5EB083;
    --Colors-Primary-500: #399E66;
    --Colors-Primary-600: #2D7E51;
    --Colors-Primary-700: #225E3D;
    --Colors-Primary-800: #163F28;
    --Colors-Primary-900: #0B1F14;

    --Colors-Accent-50: #FEF7EF;
    --Colors-Accent-100: #FAEACF;
    --Colors-Accent-200: #F6DAA9;
    --Colors-Accent-300: #F3CA83;
    --Colors-Accent-400: #EFBA5D;
    --Colors-Accent-500: #ECAB38;
    --Colors-Accent-600: #BC882C;
    --Colors-Accent-700: #8D6621;
    --Colors-Accent-800: #5E4416;

    --Colors-Neutrals-50: #FFFFFF;
    --Colors-Neutrals-100: #F7F7F7;
    --Colors-Neutrals-200: #E6E6E6;
    --Colors-Neutrals-300: #CDCDCD;
    --Colors-Neutrals-400: #B8B8B8;
    --Colors-Neutrals-500: #9E9E9E;
    --Colors-Neutrals-600: #858585;
    --Colors-Neutrals-700: #717171;
    --Colors-Neutrals-800: #4E4E4E;
    --Colors-Neutrals-900: #242424;

    --Colors-Red-50: #FDE9E9;
    --Colors-Red-100: #FBCDCD;
    --Colors-Red-300: #F13738;
    --Colors-Red-400: #B32A2B;

    --Colors-Green-50: #EBFBEB;
    --Colors-Green-200: #9FE19D;
    --Colors-Green-300: #3CC33C;
    --Colors-Green-400: #2C912B;
    
    --Colors-Orange-50: #FDF9F5;
    --Colors-Orange-200: #F7C192;
    --Colors-Orange-300: #EA9249;
    --Colors-Orange-400: #BB743A;

    --Colors-Yellow-50: #FFF9E9;
    --Colors-Yellow-200: #F9DF8E;
    --Colors-Yellow-300: #F3BD1B;
    --Colors-Yellow-400: #B68B15;

    --Colors-Blue-50: #F1F6FE;
    --Colors-Blue-300: #326DF6;
    --Colors-Blue-400: #2149A4;

    --Home-why-Choose-Img-BG: #CFE7DA;

    --Buttons-Primary-Label-Active: var(--Colors-Neutrals-50);
    --Buttons-Primary-Background-Active: var(--Colors-Primary-500);
    --Buttons-Primary-Label-Hover-Pressed: var(--Colors-Neutrals-50);
    --Buttons-Primary-Background-Hover-Pressed: var(--Colors-Primary-600);
    --Buttons-Primary-Label-Disabled: var(--Colors-Primary-300);
    --Buttons-Primary-Background-Disabled: var(--Colors-Primary-200);
    --Buttons-Primary-Border-Focused: var(--Colors-Primary-600);

    --Buttons-Secondary-Label-Active: var(--Colors-Primary-500);
    --Buttons-Secondary-Border: var(--Colors-Primary-400);
    --Buttons-Secondary-Background-Active: var(--Colors-Neutrals-50);
    --Buttons-Secondary-Label-Hover-Pressed: var(--Colors-Primary-500);
    --Buttons-Secondary-Border-Hover-Pressed: var(--Colors-Primary-400);
    --Buttons-Secondary-Background-Hover-Pressed: var(--Colors-Primary-50);
    --Buttons-Secondary-Label-Disabled: var(--Colors-Primary-200);
    --Buttons-Secondary-Border-Disabled: var(--Colors-Primary-200);
    --Buttons-Secondary-Background-Disabled: var(--Colors-Primary-50);
    --Buttons-Secondary-Border-Focused: var(--Colors-Primary-200);
  
    --Buttons-Tertiary-Label-Active: var(--Colors-Accent-500);
    --Buttons-Tertiary-Background-Active: var(--Colors-Neutrals-50);
    --Buttons-Tertiary-Label-Hover-Pressed: var(--Colors-Accent-500);
    --Buttons-Tertiary-Background-Hover-Pressed: var(--Colors-Accent-50);
    --Buttons-Tertiary-Label-Disabled: var(--Colors-Accent-200);
    --Buttons-Tertiary-Background-Disabled: var(--Colors-Neutrals-50);
    --Buttons-Tertiary-Border-Focused: var(--Colors-Accent-300);

    --Buttons-Alert-Label-Active: var(--Colors-Red-300);
    --Buttons-Alert-Background-Active: var(--Colors-Red-50);
    --Buttons-Alert-Label-Hover-Pressed: var(--Colors-Red-300);
    --Buttons-Alert-Background-Hover-Pressed: var(--Colors-Red-100);
    --Buttons-Alert-Label-Disabled: var(--Colors-Red-100);
    --Buttons-Alert-Background-Disabled: var(--Colors-Red-50);
    --Buttons-Alert-Border-Focused: var(--Colors-Red-100);

    --Buttons-Loading: #72B991;

    --Icons-Accent: var(--Colors-Accent-600);
    --Icons-Interactive: var(--Colors-Primary-500);
    --Icons-Interactive-Alt: var(--Colors-Neutrals-700);
    --Icons-Accent-Dark: var(--Colors-Accent-800);
    --Icons-Heading: var(--Colors-Primary-700);
    --Icons-Error: var(--Colors-Red-300);
    --Icons-Accent-Light: var(--Colors-Accent-400);
    --Icons-Alert: var(--Colors-Yellow-400);
    --Icons-On-Inputs: var(--Colors-Neutrals-600);
    --Icons-Decorative: var(--Colors-Neutrals-500);
    --Icons-Low-Contrast: var(--Colors-Neutrals-400);
    --Icons-Warning: var(--Colors-Orange-300);
    --Icons-Warning-Alt: var(--Colors-Orange-400);
    --Icons-Success: var(--Colors-Green-400);
    --Icons-On-Dark: var(--Colors-Neutrals-50);
    --Icons-Info: var(--Colors-Blue-300);
    --Icons-Disabled: var(--Colors-Neutrals-400);
    --Icons-High-Contrast: var(--Colors-Neutrals-900);

    --Text-Body-Reverse-Secondary: var(--Colors-Neutrals-300);
    --Text-Body-Primary: var(--Colors-Neutrals-900);
    --Text-Body-Reverse-Primary: var(--Colors-Neutrals-50);
    --Text-Body-Secondary: var(--Colors-Neutrals-800);
    --Text-Body-Tertiary: var(--Colors-Neutrals-700);

    --Text-Heading-Secondary: var(--Colors-Neutrals-800);
    --Text-Heading-Tertiary: var(--Colors-Accent-800);
    --Text-Heading-Primary: var(--Colors-Primary-700);
    --Text-Heading-Alt: var(--Colors-Accent-400);
    --Text-Heading-Alt-2: var(--Colors-Primary-400);

    --Text-Semantic-Error: var(--Colors-Red-300);
    --Text-Semantic-Info: var(--Colors-Blue-300);
    --Text-Semantic-Disabled: var(--Colors-Neutrals-500);
    --Text-Semantic-Alert: var(--Colors-Yellow-400);
    --Text-Semantic-Success: var(--Colors-Green-400);
    --Text-Semantic-Warning: var(--Colors-Orange-300);

    --Borders-Brand-Low: var(--Colors-Primary-100);
    --Borders-Accent-High: var(--Colors-Accent-500);
    --Borders-Alert: var(--Colors-Yellow-300);
    --Borders-Muted: var(--Colors-Neutrals-300);
    --Borders-Brand-Mid: var(--Colors-Primary-300);
    --Borders-Error: var(--Colors-Red-300);
    --Borders-Success: var(--Colors-Green-300);
    --Borders-Accent-Mid: var(--Colors-Accent-300);
    --Borders-Subtle: var(--Colors-Neutrals-200);
    --Borders-Warning: var(--Colors-Orange-300);
    --Borders-Info: var(--Colors-Blue-300);
    --Borders-On-Dark: #4E4E4E;

    --Background-Accent-Low: var(--Colors-Accent-50);
    --Background-Accent-Mid: var(--Colors-Accent-100);
    --Background-Accent-High: var(--Colors-Accent-200);
    --Background-Accent-Ultra: var(--Colors-Accent-500);
    --Background-Reverse: var(--Colors-Neutrals-900);
    --Background-Reverse-Alt: var(--Colors-Primary-900);
    --Background-Warning-Alt: var(--Colors-Yellow-50);
    --Background-Warning-High: var(--Colors-Orange-200);
    --Background-Surface: var(--Colors-Neutrals-50);
    --Background-Surface-Alt: #E3F1EA;
    --Background-Elevated: var(--Colors-Neutrals-200);
    --Background-Soft: var(--Colors-Neutrals-100);
    --Background-Brand-High: var(--Colors-Primary-500);
    --Background-Brand-Mid: var(--Colors-Primary-200);
    --Background-Brand-Low: var(--Colors-Primary-50);
    --Background-Brand-Ultra: var(--Colors-Primary-800);
    --Background-Info: var(--Colors-Blue-50);
    --Background-Warning: var(--Colors-Orange-50);
    --Background-Success: var(--Colors-Green-50);
    --Background-Success-High: var(--Colors-Green-200);
    --Background-Alert: var(--Colors-Red-50);
    --Background-High-Contrast: #4E4E4E;
  
    --font-family-base: 'IRANSansX FD', Tahoma;
    --font-family-base-english: IRANSansX, Tahoma !important;

    --Header-Texts: var(--Colors-Neutrals-50);
    --Header-Texts-Active: var(--Colors-Primary-300);
    --Header-Icons: var(--Colors-Neutrals-50);
    --header-height: 60px;
    --Header-Background: var(--Colors-Neutrals-900);

    --Control-Input-Background-Default: var(--Background-Surface);
    --Control-Input-Background-Selected: var(--Background-Accent-Mid);
    --Control-Input-Icon-Check-Box: var(--Icons-Accent);
    
    --Typeface-Font-Size-2xs: 10px;
    --Typeface-Font-Size-s: 14px;
    --Typeface-Font-Size-md: 16px;
    --Typeface-Font-Size-2xl: 32px;

    --Trip-Cards-Opened-Header: var(--Background-Accent-Low);
    --Trip-Cards-Default-Container: var(--Background-Soft);
    --Trip-Cards-Default-Border: var(--Borders-Muted);
    --Trip-Cards-Default-Header: var(--Background-Elevated);
    --Trip-Cards-Opened-Border: var(--Borders-Accent-Mid);

    --Background-Iran-Plate: var(--Colors-Yellow-200);

    --Action-Status-Picker-Borders-Default: var(--Borders-Accent-High);
    --Action-Status-Picker-Icon-Default: var(--Icons-Interactive-Alt);
    --Action-Status-Picker-Icon-Selected: var(--Icons-Accent-Dark);
    --Action-Status-Picker-Label-Default: var(--Text-Heading-Secondary);
    --Action-Status-Picker-Label-Selected: var(--Text-Heading-Tertiary);
    --Action-Status-Picker-Background-Selected: var(--Background-Accent-High);

    --Input-Fields-Label-Placeholder-Default: var(--Text-Body-Secondary);
    --Input-Fields-Label-Placeholder-Floating: var(--Colors-Neutrals-600);
    --Input-Fields-Label-Error-Caption: var(--Text-Semantic-Error);
    --Input-Fields-Label-General-Caption: var(--Text-Body-Tertiary);
    --Input-Fields-Background-Default: var(--Background-Soft);
    --Input-Fields-Border-Focused: var(--Borders-Brand-Mid);
    --inputBox-height: 50px;

    --TextArea-Min-height: 112px;
    --TextArea-Max-height: 224px;

    --Spacing-0: 0px;
    --Spacing-2: 2px;
    --Spacing-4: 4px;
    --Spacing-8: 8px;
    --Spacing-12: 12px;
    --Spacing-16: 16px;
    --Spacing-20: 20px;
    --Spacing-24: 24px;
    --Spacing-28: 28px;
    --Spacing-32: 32px;
    --Spacing-36: 36px;
    --Spacing-40: 40px;
    --Spacing-48: 48px;
    --Spacing-56: 56px;
    --Spacing-64: 64px;
    --Spacing-72: 72px;
    --Spacing-80: 80px;
    --Spacing-88: 88px;
    --Spacing-96: 96px;

    --Margin-3xs: var(--Spacing-0);
    --Margin-2xs: var(--Spacing-2);
    --Margin-xs: var(--Spacing-4);
    --Margin-sm: var(--Spacing-8);
    --Margin-md: var(--Spacing-12);
    --Margin-lg: var(--Spacing-16);
    --Margin-xl: var(--Spacing-24);
    --Margin-2xl: var(--Spacing-32);
    --Margin-3xl: var(--Spacing-40);
    --Margin-4xl: var(--Spacing-48);
    --Margin-5xl: var(--Spacing-56);

    --Gap-3xs: 0px;
    --Gap-2xs: 2px;
    --Gap-xs: 4px;
    --Gap-sm: 8px;
    --Gap-md: 12px;
    --Gap-lg: 16px;
    --Gap-xl: 24px;
    --Gap-2xl: 32px;
    --Gap-3xl: 40px;
    --Gap-4xl: 48px;
    --Gap-5xl: 56px;

    --Padding-3xs: 0px;
    --Padding-2xs: 2px;
    --Padding-xs: 4px;
    --Padding-sm: 8px;
    --Padding-md: 12px;
    --Padding-lg: 16px;
    --Padding-xl: 24px;
    --Padding-2xl: 32px;
    --Padding-3xl: 40px;
    --Padding-4xl: 48px;
    --Padding-5xl: 65px;

    --Radius-2xs: 0px;
    --Radius-xs: 2px;
    --Radius-sm: 4px;
    --Radius-custom: 6px;
    --Radius-md: 8px;
    --Radius-lg: 12px;
    --Radius-xl: 16px;
    --Radius-full: 96px;

    --Divider-Accent-Low: var(--Colors-Accent-100);
    --Divider-Accent-Mid: var(--Colors-Accent-300);
    --Divider-Accent-High: var(--Colors-Accent-500);
    --Divider-Muted: var(--Colors-Neutrals-300);
    --Divider-On-Dark: var(--Colors-Primary-700);

    --Button-Width-xs: 64px;
    --Button-Width-sm: 100px;
    --Button-Width-md: 130px;
    --Button-Width-lg: 150px;
    --Button-Width-xl: 180px;

    /* Font Sizes */
    --font-size-xs: 12px;
    --font-size-md: 16px;

    /* Transitions ---------- */
    --transition-fast: 0.2s ease-out;
    --transition-medium: 0.4s ease-out;
    --transition-slow: 0.6s ease-out;
}

* {
    font-size: 100%;
    font: inherit;
    box-sizing: border-box;
}

html, body, form {
    /* margin: 0px; */
    padding: 0px;
    height: 100%;
    font-family: var(--font-family-base);
    font-size: 14px;
}

.svg24 {
    width: 24px;
    height: 24px;
}
svg.notStarted {
    stroke: var(--Icons-Decorative);
}
svg.started {
    stroke: var(--Icons-Success);
}
svg.finished {
    stroke: var(--Icons-Warning-Alt);
}
svg.archived {
    stroke: var(--Icons-Decorative);
}
svg.alert {
    stroke: var(--Icons-Alert);
}
svg.decorative {
    stroke: var(--Icons-Decorative);
}
svg.accent {
    stroke: var(--Icons-Accent);
}

.english {
    display: none;
}

.rtl {
    direction: rtl;
}
.ltr {
    direction: ltr;
}

.hide {
    display: none;
}
.hidden {
    display: none !important;
}

.btn {
    width: 100%;
    padding: 0px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: black;
    border-radius: var(--Radius-full);
    transition: background-color var(--transition-fast);
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    outline-offset: 1px;
}
    .btn:hover {
        background-color: var(--Colors-Primary-400);
    }

    .btn svg {
        width: 24px;
        min-width: 24px;
        height: 24px;
        transition: transform 0.4s ease-out;
    }

.btn-large {
    height: 48px;
    min-height: 48px;
    font-size: 16px !important;
    line-height: 26px;
    font-weight: 700;
}

.btn-medium {
    height: 40px;
    min-height: 40px;
    font-size: 14px !important;
    line-height: 22px;
    font-weight: 700;
}
.btn-small {
    height: 32px;
    min-height: 32px;
    font-size: 14px !important;
    line-height: 22px;
    font-weight: 700;
}

.btn-primary {
    color: var(--Buttons-Primary-Label-Active);
    background-color: var(--Buttons-Primary-Background-Active);
}
    .btn-primary svg {
        stroke: var(--Buttons-Primary-Label-Active);
    }
    .btn-primary:hover {
        color: var(--Buttons-Primary-Label-Hover-Pressed);
        background-color: var(--Buttons-Primary-Background-Hover-Pressed);
    }
    .btn-primary:disabled {
        color: var(--Buttons-Primary-Label-Disabled);
        background-color: var(--Buttons-Primary-Background-Disabled);
    }
        .btn-primary:disabled svg {
            stroke: var(--Buttons-Primary-Label-Disabled);
        }
        .btn-primary:disabled .btn-content {
            color: var(--Buttons-Primary-Label-Disabled);
        }
    .btn-primary:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--Buttons-Primary-Border-Focused);

    }

.btn-secondary {
    color: var(--Buttons-Secondary-Label-Active);
    background-color: var(--Buttons-Secondary-Background-Active);
    border: 1px solid var(--Colors-Primary-400);
}
    .btn-secondary svg {
        stroke: var(--Buttons-Secondary-Label-Active) !important;
    }
    .btn-secondary:hover {
        color: var(--Buttons-Secondary-Label-Hover-Pressed);
        background-color: var(--Buttons-Secondary-Background-Hover-Pressed);
        border: 1px solid var(--Buttons-Secondary-Border-Hover-Pressed);
    }
    .btn-secondary:disabled {
        color: var(--Buttons-Secondary-Label-Disabled);
        border-color: var(--Buttons-Secondary-Border);
        background-color: var(--Buttons-Secondary-Background-Disabled);
    }
    .btn-secondary:disabled svg {
        stroke: var(--Buttons-Secondary-Label-Disabled);
    }
    .btn-secondary:focus {
        outline: none;
        box-shadow: inset 0 0 0 1px var(--Buttons-Secondary-Border-Focused);
    }

.btn-tertiary {
    color: var(--Colors-Accent-500);
    background-color: transparent;
}
    .btn-tertiary svg {
        stroke: var(--Colors-Accent-500) !important;
    }
    .btn-tertiary:hover {
        background-color: var(--Buttons-Tertiary-Background-Hover-Pressed);
    }
    .btn-tertiary:disabled {
        color: var(--Buttons-Tertiary-Label-Disabled);
    }
    .btn-tertiary:disabled svg {
        stroke: var(--Buttons-Tertiary-Label-Disabled);
    }
    .btn-tertiary:focus {
        outline: none;
        box-shadow: inset 0 0 0 1px var(--Buttons-Tertiary-Border-Focused);
    }

.btn-alert {
    color: var(--Buttons-Alert-Label-Active);
    background-color: var(--Buttons-Alert-Background-Active);
}
    .btn-alert:hover {
        color: var(--Buttons-Alert-Label-Hover-Pressed);
        background-color: var(--Buttons-Alert-Background-Hover-Pressed);
    }
    .btn-alert:disabled {
        color: var(--Buttons-Alert-Label-Disabled);
        background-color: var(--Buttons-Alert-Background-Disabled);
    }
        .btn-alert:disabled .btn-content {
            color: var(--Buttons-Alert-Label-Disabled);
        }
    .btn-alert svg {
        stroke: var(--Buttons-Alert-Label-Active);
    }
    .btn-alert:focus {
        outline: none;
        box-shadow: inset 0 0 0 1px var(--Buttons-Alert-Border-Focused);
    }
    
.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: 700;
}
.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: var(--Typeface-Font-Size-2xs);
    line-height: 16px;
}
.font-body-1 {
    font-size: var(--Typeface-Font-Size-md);
    line-height: 26px;
}
.font-body-2 {
    font-size: 14px;
    line-height: 24px;
}
.font-heading-1 {
    font-size: var(--Typeface-Font-Size-2xl, 32px);
    font-size: var(Headings/Heading 1 - Bold);
    line-height: 38px;
}
.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: var(--Typeface-Font-Size-s);
    line-height: 22px;
}
.font-caption-error {
    font-size: 13px;
    line-height: 17px;
}

.english-digit {
    font-family: var(--font-family-base-english);
}

.loading2 {
    width: 24px;
    aspect-ratio: 2;
    --_g1: no-repeat radial-gradient(circle closest-side, var(--Colors-Primary-200) 90%, #0000);
    --_g2: no-repeat radial-gradient(circle closest-side, var(--Colors-Neutrals-50) 90%, #0000);
    --_g3: no-repeat radial-gradient(circle closest-side, var(--Colors-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% }
}

/* HTML: <div class="loader"></div> */
.loading {
    width: 24px;
    padding: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--Buttons-Loading);
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {to{transform: rotate(1turn)}}
  
  button .loadingArea .loading.button {
    width: 18px;
    padding: 3px;
    background: var(--Buttons-Loading) !important;
  }

.inputBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    zzzgap: var(--Gap-xs);
    gap: 3px;
    /* margin-right: 4px; */
    width: 100%;
}
    .inputBox .box {
        position: relative;
        flex: 1;
        display: flex;
        justify-content: end;
        align-items: self-start;
        gap: var(--Gap-md);
        min-height: 48px;
        border-radius: var(--Radius-custom);
        padding: 0px var(--Padding-lg) 0px var(--Padding-md);
        background-color: var(--Input-Fields-Background-Default);
        border: 1px solid transparent;
        cursor: text;
    }
        .inputBox .box:focus-within {
            border: 1px solid var(--Input-Fields-Border-Focused);
        }
        .inputBox .box input,  .inputBox .box .data, .inputBox .box textarea {
            height: var(--inputBox-height);
            line-height: 22px;
            padding-top: 15px;
            outline: none;
            text-align: right;
            font-size: 14px;
            font-weight: 500;
            zzzzzzdirection: rtl;
            color: var(--Colors-Neutrals-800);
            background: var(--Input-Fields-Background-Default);
            border: 1px;
            direction: rtl;
        }
        .inputBox .box .data {
            display: flex;
            justify-content: start;
            align-items: center;
        }
        .inputBox .box input:not(.datePicker input) {
            width: 100%;
        }
        .inputBox .box textarea {
            width: 100%;
            height: calc( 100% - 25px );
            min-height: var(--TextArea-Min-height);
            zmax-height: var(--TextArea-Max-height);
            margin-top: 25px;
            padding-top: 0px;
            resize: none;
        }
        .inputBox .box .placeHolder {
            position: absolute;
            top: 15px;
            right: 16px;
            color: var(--Input-Fields-Label-Placeholder-Default);
            font-size: 14px;
            transition: all 0.2s ease-in-out;
            pointer-events: none;
            line-height: 22px;
        }
            .inputBox .box .placeHolder.movedUp {
                top: 2px;
                font-size: 12px;
                color: var(--Input-Fields-Label-Placeholder-Default);
            }
            .inputBox .box input:focus + div,
            .inputBox .box input:valid + div {
                top: 2px;
                font-size: 12px;
                color: var(--Input-Fields-Label-Placeholder-Default);
            }
            .inputBox .box textarea:focus + div,
            .inputBox .box textarea:valid + div {
                top: 2px;
                font-size: 12px;
                color: var(--Input-Fields-Label-Placeholder-Default);
            }
.inputBox .box .placeHolder .english {
    margin-top: 2px;
}
.inputBox .box svg {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    stroke: var(--Icons-On-Inputs);
    cursor: pointer;
}
.inputBox .warning {
    min-height: 17px;
    margin-right: 4px;
    color: var(--Input-Fields-Label-Error-Caption);
}

.inputBox .dateHolder {
    width: calc( 100% - 48px );
    min-height: var(--inputBox-height);
}
    .inputBox .dateHolder .datePicker {
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--inputBox-height);
        line-height: 26px;
        padding: 0px;
        color: var(--Text-Body-Secondary) !important;
        background-color: var(--Input-Fields-Background-Default) !important;

    }
        .inputBox .dateHolder .datePicker input {
            height: 48px;
            line-height: 26px;
        }
        .inputBox .dateHolder .datePicker .txtYear {
            flex: 1;
        }
        .inputBox .dateHolder .datePicker span {
            padding-top: 15px;
        }

        .inputBox .flatpickr-input {
            direction: ltr !important;
        }

.inputBox ul.dropdown {
    display: none;
    position: absolute;
    right: 0px;
    left: 0px;
    top: calc( var(--inputBox-height) + 5px );
    max-height: 160px;

    padding: var(--Padding-lg) var(--Padding-md);
    border-radius: var(--Radius-custom);
    border: 1px solid var(--Borders-Brand-Low);
    background: var(--bottom-sheets-modals-background);

    z-index: 10;
}

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

/* container / text */
  label.checkBox {
    position: relative;
    padding-right: 20px;        /* space on the right for the box */
    cursor: pointer;
    user-select: none;
    display: inline-block;
    line-height: 1;
    font-size: 16px;
  }

  /* keep native checkbox accessible but visually hidden */
  label.checkBox input {
    position: absolute;
    inset: 0;                   /* fill label so clicks still hit input */
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;                 /* invisible but focusable/clickable */
    z-index: 1;                 /* above pseudo-elements for clicks */
    cursor: pointer;
  }

  /* custom box on the right */
  label.checkBox::before {
    content: "";
    position: absolute;
    right: 0;                   /* put box at right */
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 1px solid var(--Control-Input-Icon-Check-Box);
    border-radius: var(--Radius-xs);
    background-color: var(--Background-Surface);
    box-sizing: border-box;
    transition: background-color .15s ease, border-color .15s ease;
    z-index: 0;
  }

  /* checked state (modern browsers with :has) */
  label.checkBox:has(input:checked)::before {
    background-color: var(--Control-Input-Icon-Check-Box);
    border-color: var(--Control-Input-Icon-Check-Box);
  }

  /* checkmark centered inside the box */
  label.checkBox:has(input:checked)::after {
    content: "✔";
    position: absolute;
    right: 3px;                 /* inside the 16px box */
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;           /* fits inside 16px box */
    line-height: 1;
    color: var(--Background-Surface);
    z-index: 1;
    pointer-events: none;
  }

  /* Optional: hover/focus styling */
  label.checkBox:hover::before,
  label.checkBox input:focus + .checkBox, /* safe no-op if not used; keyboard focus will be visible via :focus-visible on input if needed */ {
    outline: none;
  }

  /* JS fallback: when :has() unsupported, use .is-checked class */
  label.checkBox.is-checked::before {
    background-color: var(--Control-Input-Icon-Check-Box);
    border-color: var(--Control-Input-Icon-Check-Box);
  }
  label.checkBox.is-checked::after {
    content: "✔";
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--Background-Surface);
    pointer-events: none;
  }


.width-64 {
    width: 64px;
}
.width-100 {
    width: 100px;
}
.width-130 {
    width: 130px;
}
.width-full {
    width: 100%;
}

.pointer {
    cursor:pointer;
}

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

*[pagecontent] {
    display: none;
}

.layoutLoading {
    position: absolute;
    inset: 0px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
    .layoutLoading header {
        width: 100%;
        height: 50px;
        background-color: var(--Colors-Primary-800);
    }
    .layoutLoading main {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

.center {
    text-align: center;
}

.dummyInput {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    padding: 0px;
    margin:0px;
    border: 0px;
    line-height:0px;
    outline: hidden;
    pointer-events: none;
}
.inputBox .box input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px var(--Background-Soft) inset;
}

    .inputBox .box input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 50px var(--Background-Soft) inset;
    }
::-webkit-input-placeholder { /* Chrome */
    color: var(--Input-Fields-Label-Placeholder-Floating);
    font-size: 14px;
    line-height: 22px;
}

:-ms-input-placeholder { /* IE 10+ */
    color: var(--Input-Fields-Label-Placeholder-Floating);
    font-size: 14px;
    line-height: 22px;
}

::-moz-placeholder { /* Firefox 19+ */
    color: var(--Input-Fields-Label-Placeholder-Floating);
    opacity: 1;
    font-size: 14px;
    line-height: 22px;
}

:-moz-placeholder { /* Firefox 4 - 18 */
    color: var(--Input-Fields-Label-Placeholder-Floating);
    opacity: 1;
    font-size: 14px;
    line-height: 22px;
}
.flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.showFlex {
    display: flex !important;
}
.column {
     flex-direction: column;
 }
.flex1 {
    flex: 1;
}

.gap-2xs {gap: var(--Gap-2xs)}
.gap-xs {gap: var(--Gap-xs)}
.gap-sm {gap: var(--Gap-sm)}
.gap-md {gap: var(--Gap-md)}
.gap-lg {gap: var(--Gap-lg)}
.gap-xl {gap: var(--Gap-xl)}
.gap-2xl {gap: var(--Gap-2xl)}
.gap-3xl {gap: var(--Gap-3xl)}
.gap-4xl {gap: var(--Gap-4xl)}
.gap-5xl {gap: var(--Gap-5xl)}

.pad-sm {padding: var(--Padding-sm)}

.searchBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 500px;
    height: 40px;
    padding-right: var(--Padding-sm);
    background-color: var(--Input-Fields-Background-Default);
    border: 1px solid transparent;
    border-radius: var(--Radius-custom);
}
    .searchBox .clear {
        display:none;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-right: 1px solid var(--Borders-Muted);
        opacity: 0;
        transition: opacity 0.2s ease-in;
    }
    .searchBox .clear svg {
        width: 24px;
        height: 24px;
        stroke: var(--Icons-Interactive-Alt);
    }

    .searchBox .main {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: var(--Padding-xs);
        padding-right: var(--Padding-sm);
        direction: rtl;
    }

    .searchBox .main button {
            display:none;
            opacity: 0;
            transition: opacity 0.2s ease-in;
        }
        .searchBox .main .keyword {
            flex: 1;
            width: 100%;
            margin-right: var(--Gap-sm);
            background-color: var(--Input-Fields-Background-Default);
            border: 0px;
            outline: none;
        }
        .searchBox .main svg {
            width: 16PX;
            height: 16PX;
            stroke: var(--Icons-Decorative);
        }
        .searchBox.focused {
            border: 1px solid var(--Input-Fields-Border-Focused);
        }
        .searchBox.filled {
            border: 1px solid var(--Borders-Muted);
        }

.Button-Width-xs {
    max-width: var(--Button-Width-xs);
}
.Button-Width-sm {
    max-width: var(--Button-Width-sm);
}
.Button-Width-md {
    max-width: var(--Button-Width-md);
}
.Button-Width-lg {
    max-width: var(--Button-Width-lg);
}
.Button-Width-xl {
    max-width: var(--Button-Width-xl);
}
.Button-Width-full {
    flex: 1;
}

.attachementsBox {
    display: flex;
    justify-content: center;
    align-content: end;
    width: 100%;
}
    .attachementsBox .box {
        position: relative;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 40px;
    }
    .attachementsBox .box .data {
        gap: var(--Gap-sm);
        margin-right: auto;
    }
    .attachementsBox .box .data .fileCount {
        direction: rtl;
    }
        
    .attachementsBox .box .title {
        padding: 0px var(--Padding-xs);
    }
.segmentedButtons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--Gap-sm);
    width: 100%;
    padding-bottom: var(--Padding-xl);
}
    .segmentedButtons .buttons {
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        border: 1px solid var(--Action-Status-Picker-Borders-Default);
        border-radius: var(--Radius-full);
    }
    .segmentedButtons .buttons .button {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--Gap-xs);
        align-self: normal;
        width: 100%;
        border-radius: var(--Radius-2xs);
        border-right: 1px solid var(--Action-Status-Picker-Borders-Default);
        cursor: pointer;
        direction: rtl;
        color: var(--Action-Status-Picker-Label-Default);
    }
    .segmentedButtons .buttons .button:first-child {
        border-radius: var(--Radius-full) 0px 0px var(--Radius-full);
    }
    .segmentedButtons .buttons .button:last-child {
        border: unset;
        border-radius: 0px var(--Radius-full) var(--Radius-full) 0px;
    }
    .segmentedButtons .buttons .button svg {
        stroke: var(--Action-Status-Picker-Icon-Default);
    }
    .segmentedButtons .buttons .button img {
        width: 24px;
        height: 24px;
    }
    .segmentedButtons .buttons .button.selected {
        background-color: var(--Action-Status-Picker-Background-Selected);
        color: var(--Action-Status-Picker-Label-Selected);
    }
    .segmentedButtons .buttons .button.selected svg {
        stroke: var(--Action-Status-Picker-Icon-Selected);
    }

.flatpickr-calendar.custom-position {
    position: fixed !important;
    top: 5px !important; /* Adjust this for Y position */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: var(--zIndex-flatpickr-calendar-custom-position);
}

.fileUpload {
    position: relative;
}
.fileUpload > * {
    width: 100%;
}
.fileUpload input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}


.btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    border-radius: var(--Radius-full);
    transition: background-color var(--transition-fast);
    cursor: pointer;
    outline-offset: 1px;
}
    .btn-icon:hover {
        background-color: var(--Colors-Primary-400);
    }

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

.btn-icon-medium {
    width: 40px;
    min-width: 40px;
    height: 40px;
}
.btn-icon-large {
    width: 48px;
    height: 48px;
}

.btn-icon-primary {
    border: 1px solid var(--Borders-Subtle);
    background-color: var(--Background-Soft);
}
    .btn-icon-primary svg {
        stroke: var(--Icons-Interactive-Alt);
    }
    .btn-icon-primary:hover {
        border: 1px solid var(--Borders-Brand-Low);
        background-color: var(--Background-Brand-Low);
    }
        .btn-icon-primary:hover svg {
            stroke: var(--Icons-Interactive);
        }
    .btn-icon-primary:disabled {
        border: 1px solid var(--Borders-Subtle);
        background-color: var(--Background-Soft);
    }
        .btn-icon-primary:disabled svg {
            stroke: var(--Icons-Disabled);
        }
    .btn-icon-primary:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--Buttons-Primary-Border-Focused);
    }

.rotate {
    transform: rotate(180deg);
}

.svgIcon {
    --stroke: #000000;
    --rotate: 0deg;
    stroke: var(--stroke);
    transform: rotate(var(--rotate));
}

.alignRight {
    text-align: right !important;
}
.alignLeft {
    text-align: left !important;
}




/* -------------------- */
.plate-iran-entezami {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--Gap-xs);
    width: 121px;
    height: 28px;
    padding-right: var(--Padding-xs);
    border-radius: var(--Radius-sm);
    border: 1px solid var(--Colors-Neutrals-800);
    background-color: var(--Background-Iran-Plate);
}
.plate-iran-entezami .blueBox img {
    width: 15px;
    height: 26px;
}
.plate-iran-entezami .plateAllDigits {
    flex: 1;
}
.plate-iran-entezami .plateAllDigits .plateLetter {
    margin: 0px 2px 0px 4px ;
}
.plate-iran-entezami .v-line {
    width: 1px;
    height: 100%;
    background-color: var(--Colors-Neutrals-800);
}
.plate-iran-entezami .iran {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.plate-iran-entezami .iran .text {
    line-height: 10px !important;
    height: 12px;
}
.plate-iran-entezami .iran .code {
    line-height: 13px !important;
    height: 12px;
}
/* -------------------- */
.plate-iran-transit {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--Gap-xs);
    width: 104px;
    height: 28px;
    padding-right: var(--Padding-xs);
    
    border-radius: var(--Radius-sm);
    border: 1px solid var(--Colors-Neutrals-800);
    background-color: var(--Background-Soft);
}
.plate-iran-transit .plateAllDigits {
    flex: 1;
}
/* -------------------- */
.plate-other-transit {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 28px;
    padding: 0px var(--Padding-sm);
    
    border-radius: var(--Radius-sm);
    border: 1px solid var(--Colors-Neutrals-800);
    background-color: var(--Background-Soft);
}
.plate-other-transit .plateAllDigits {
    flex: 1;
}
/* -------------------- */
.Divider-Accent-Low-BG {
    background-color: var(--Divider-Accent-Low);
}
.Divider-Accent-Mid-BG {
    background-color: var(--Divider-Accent-Mid);
}
.Divider-Accent-High-BG {
    background-color: var(--Divider-Accent-High);
}
.Divider-Muted-BG {
    background-color: var(--Divider-Muted);
}
.Divider-On-Dark-BG {
    background-color: var(--Divider-On-Dark);
}
/* -------------------- */


.dataInfoBox {
    width: 100%;
    align-items: center;
    gap: var(--Gap-lg);
}
.dataInfoBox .loading {
    display: none;
}
.dataInfoBox header {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--Gap-sm);
    white-space: nowrap;
    overflow: hidden;
}
.dataInfoBox header .title {
    color: var(--Text-Heading-Primary);
    gap: var(--Gap-xs);
    white-space: nowrap;
    flex-shrink: 0;    
}
.dataInfoBox header .title svg {
    width: 24px;
    height: 24px;
    stroke: var(--Icons-Heading);
}
.dataInfoBox header .data {
    color: var(--Text-Body-Secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}
.dataInfoBox main {
    justify-content: center;
    gap: var(--Gap-sm);
    width: 100%;
}
.dataInfoBox main .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--Gap-md);
    width: 100%;
    height: 30px;
    padding: 0px var(--Padding-xs, 4px);
}
.dataInfoBox main .row .title {
    white-space: nowrap;
}
/* -------------------- */
.dataInfoPopup .box {
    overflow-y: auto;
    display: flex;
    max-width: 480px !important;
}
/* -------------------- */
.statusBadge {  /* Default: Success */
    display: inline-flex;
    padding: var(--Padding-xs) var(--Padding-sm);
    align-items: center;
    gap: var(--Gap-2xs);

    color: var(--Text-Semantic-Success);
    border-radius: var(--Radius-sm, 4px);
    border: 1px solid var(--Borders-Success);
    background: var(--Background-Success);
}
.statusBadge svg {
    width: 16px;
    height: 16px;
    stroke: var(--Icons-Success);
}
.statusBadge.Error {
    color: var(--Text-Semantic-Error);
    border: 1px solid var(--Borders-Error);
    background: var(--Background-Alert);
}
.statusBadge.Error svg { stroke: var(--Icons-Error);}
.statusBadge.Alert {
    color: var(--Text-Semantic-Warning);
    border: 1px solid var(--Borders-Warning);
    background: var(--Background-Warning-Alt);
}
.statusBadge.Alert svg { stroke: var(--Icons-Warning);}
.statusBadge.Informative {
    color: var(--Text-Semantic-Info);
    border: 1px solid var(--Borders-Info);
    background: var(--Background-Info);
}
.statusBadge.Alert svg { stroke: var(--Icons-Info);}
.statusBadge.Inactive {
    color: var(--Text-Semantic-Disabled);
    border: 1px solid var(--Borders-Subtle);
    background: var(--Background-Soft);
}
.statusBadge.Inactive svg { stroke: var(--Icons-Disabled);}
.statusBadge.Simple {
    border: 0px;
    background: unset;
}
/* -------------------- */

.justifyStart {
    justify-content: start !important;
}
.justifyEnd {
    justify-content: end;
}
.overflowAuto {
    overflow:auto;
}
.overflowYAuto {
    overflow-y:auto;
}
.overflowXAuto {
    overflow-x:auto;
}


@media only screen and (min-width: 960px) {
    .searchBox {
        max-width: 300px;
    }
}