:root {
    --font: 'Montserrat', sans-serif;
    --font-fix: 'Roboto Mono', monospace;

    --base-size: 12px;
    --size-xs: calc(var(--base-size) * (11 / 12));
    --size-sm: calc(var(--base-size) * (12 / 12));
    --size-md: calc(var(--base-size) * (13 / 12));
    --size-md2: calc(var(--base-size) * (14 / 12));
    --size-lg: calc(var(--base-size) * (15 / 12));
    --size-lg2: calc(var(--base-size) * (16 / 12));
    --size-xl: calc(var(--base-size) * (17 / 12));
    --size-xl2: calc(var(--base-size) * (18 / 12));
    --size-xl3: calc(var(--base-size) * (19 / 12));
    --size-xl4: calc(var(--base-size) * (21 / 12));
    --size-xl5: calc(var(--base-size) * (22 / 12));
    --size-xl6: calc(var(--base-size) * (23 / 12));
    --size-xl7: calc(var(--base-size) * (24 / 12));
    --size-xl8: calc(var(--base-size) * (26 / 12));
    --size-xl9: calc(var(--base-size) * (27 / 12));
    --size-xl10: calc(var(--base-size) * (28 / 12));
    --size-xl11: calc(var(--base-size) * (29 / 12));
    --size-xl12: calc(var(--base-size) * (30 / 12));
    --size-xl13: calc(var(--base-size) * (32 / 12));
    --size-xl14: calc(var(--base-size) * (33 / 12));
    --size-xl15: calc(var(--base-size) * (34 / 12));
    --size-xl16: calc(var(--base-size) * (35 / 12));
    --size-xl17: calc(var(--base-size) * (36 / 12));
    --size-xl18: calc(var(--base-size) * (38 / 12));
    --size-xl19: calc(var(--base-size) * (39 / 12));
    --size-xl20: calc(var(--base-size) * (40 / 12));
    --size-xl21: calc(var(--base-size) * (42 / 12));

    --size-22: calc(var(--base-size) * (22 / 12));
    --size-28: calc(var(--base-size) * (28 / 12));
    --size-40: calc(var(--base-size) * (40 / 12));
    --size-50: calc(var(--base-size) * (50 / 12));
    --size-60: calc(var(--base-size) * (60 / 12));
    --size-70: calc(var(--base-size) * (70 / 12));
    --size-80: calc(var(--base-size) * (80 / 12));

    --size-160: calc(var(--base-size) * (160 / 12));

    --tabs_block_left_races_width: calc(var(--base-size) * (300 / 12));

    --chart_container-width: 350px;
    --chart_container-height: calc(var(--base-size) * (200 / 12));

    --white: #ffffff;
    --black: #131313;

}

:root {
    /* HSL Hue definitions */
    --hue-gray: 220;
    --hue-blue: 217;
    --hue-yellow: 50;
    --hue-orange: 25;
    --hue-red: 0;
    --hue-green: 130;
    --hue-cyan: 196;
    --hue-teal: 170;
    --hue-purple: 260;

    /* HSL Saturation */
    --sat-gray: 4%;
    --sat-blue: 18%;
    --sat-yellow: 80%;
    --sat-orange: 60%;
    --sat-red: 60%;
    --sat-green: 60%;
    --sat-cyan: 60%;
    --sat-teal: 60%;
    --sat-purple: 60%;

    /* HSL Lightness scale */
    --l-lightest: 89%;
    --l-lighter: 78%;
    --l-light: 63%;
    --l-mid: 50%;
    --l-dark: 37%;
    --l-darker: 22%;
    --l-darkest: 15%;

    /* Gray colors */
    --gray-lightest: hsl(var(--hue-gray), var(--sat-gray), var(--l-lightest));
    --gray-lighter: hsl(var(--hue-gray), var(--sat-gray), var(--l-lighter));
    --gray-light: hsl(var(--hue-gray), var(--sat-gray), var(--l-light));
    --gray-mid: hsl(var(--hue-gray), var(--sat-gray), var(--l-mid));
    --gray-dark: hsl(var(--hue-gray), var(--sat-gray), var(--l-dark));
    --gray-darker: hsl(var(--hue-gray), var(--sat-gray), var(--l-darker));
    --gray-darkest: hsl(var(--hue-gray), var(--sat-gray), var(--l-darkest));

    /* Blue colors */
    --blue-lightest: hsl(var(--hue-blue), var(--sat-blue), var(--l-lightest));
    --blue-lighter: hsl(var(--hue-blue), var(--sat-blue), var(--l-lighter));
    --blue-light: hsl(var(--hue-blue), var(--sat-blue), var(--l-light));
    --blue-mid: hsl(var(--hue-blue), var(--sat-blue), var(--l-mid));
    --blue-dark: hsl(var(--hue-blue), var(--sat-blue), var(--l-dark));
    --blue-darker: hsl(var(--hue-blue), var(--sat-blue), var(--l-darker));
    --blue-darkest: hsl(var(--hue-blue), var(--sat-blue), var(--l-darkest));

    /* Yellow colors */
    --yellow-lightest: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-lightest));
    --yellow-lighter: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-lighter));
    --yellow-light: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-light));
    --yellow-mid: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-mid));
    --yellow-dark: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-dark));
    --yellow-darker: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-darker));
    --yellow-darkest: hsl(var(--hue-yellow), var(--sat-yellow), var(--l-darkest));

    /* Orange colors */
    --orange-lightest: hsl(var(--hue-orange), var(--sat-orange), var(--l-lightest));
    --orange-lighter: hsl(var(--hue-orange), var(--sat-orange), var(--l-lighter));
    --orange-light: hsl(var(--hue-orange), var(--sat-orange), var(--l-light));
    --orange-mid: hsl(var(--hue-orange), var(--sat-orange), var(--l-mid));
    --orange-dark: hsl(var(--hue-orange), var(--sat-orange), var(--l-dark));
    --orange-darker: hsl(var(--hue-orange), var(--sat-orange), var(--l-darker));
    --orange-darkest: hsl(var(--hue-orange), var(--sat-orange), var(--l-darkest));

    /* Red colors */
    --red-lightest: hsl(var(--hue-red), var(--sat-red), var(--l-lightest));
    --red-lighter: hsl(var(--hue-red), var(--sat-red), var(--l-lighter));
    --red-light: hsl(var(--hue-red), var(--sat-red), var(--l-light));
    --red-mid: hsl(var(--hue-red), var(--sat-red), var(--l-mid));
    --red-dark: hsl(var(--hue-red), var(--sat-red), var(--l-dark));
    --red-darker: hsl(var(--hue-red), var(--sat-red), var(--l-darker));
    --red-darkest: hsl(var(--hue-red), var(--sat-red), var(--l-darkest));

    /* Green colors */
    --green-lightest: hsl(var(--hue-green), var(--sat-green), var(--l-lightest));
    --green-lighter: hsl(var(--hue-green), var(--sat-green), var(--l-lighter));
    --green-light: hsl(var(--hue-green), var(--sat-green), var(--l-light));
    --green-mid: hsl(var(--hue-green), var(--sat-green), var(--l-mid));
    --green-dark: hsl(var(--hue-green), var(--sat-green), var(--l-dark));
    --green-darker: hsl(var(--hue-green), var(--sat-green), var(--l-darker));
    --green-darkest: hsl(var(--hue-green), var(--sat-green), var(--l-darkest));

    /* Cyan colors */
    --cyan-lightest: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-lightest));
    --cyan-lighter: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-lighter));
    --cyan-light: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-light));
    --cyan-mid: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-mid));
    --cyan-dark: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-dark));
    --cyan-darker: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-darker));
    --cyan-darkest: hsl(var(--hue-cyan), var(--sat-cyan), var(--l-darkest));

    /* Teal colors */
    --teal-lightest: hsl(var(--hue-teal), var(--sat-teal), var(--l-lightest));
    --teal-lighter: hsl(var(--hue-teal), var(--sat-teal), var(--l-lighter));
    --teal-light: hsl(var(--hue-teal), var(--sat-teal), var(--l-light));
    --teal-mid: hsl(var(--hue-teal), var(--sat-teal), var(--l-mid));
    --teal-dark: hsl(var(--hue-teal), var(--sat-teal), var(--l-dark));
    --teal-darker: hsl(var(--hue-teal), var(--sat-teal), var(--l-darker));
    --teal-darkest: hsl(var(--hue-teal), var(--sat-teal), var(--l-darkest));

    /* Purple colors */
    --purple-lightest: hsl(var(--hue-purple), var(--sat-purple), var(--l-lightest));
    --purple-lighter: hsl(var(--hue-purple), var(--sat-purple), var(--l-lighter));
    --purple-light: hsl(var(--hue-purple), var(--sat-purple), var(--l-light));
    --purple-mid: hsl(var(--hue-purple), var(--sat-purple), var(--l-mid));
    --purple-dark: hsl(var(--hue-purple), var(--sat-purple), var(--l-dark));
    --purple-darker: hsl(var(--hue-purple), var(--sat-purple), var(--l-darker));
    --purple-darkest: hsl(var(--hue-purple), var(--sat-purple), var(--l-darkest));
}



*,
::after,
::before {
    box-sizing: border-box
}

/* disable text selection */
html,
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#app {
    font-family: var(--font);
    font-size: var(--size-md);
    font-weight: 500;
    color: var(--black);
}

/* Base icon styles */
#main .fa,
.dialog .fa {
    font-size: var(--size-xl);
    cursor: pointer;
    /* color: var(--gray-dark); */
    margin-left: 0;
}

/* background for dialogs */
::backdrop {
    background-image: linear-gradient(45deg,
            var(--blue-light),
            var(--blue-mid),
            var(--blue-light),
            var(--purple-mid));
    opacity: 0.75;
}

/* select box */
.select option,
.select option[on='0'] {
    background: var(--white);
    color: #000000;
    height: 15px;
    line-height: 15px;
}

.select option[on='1'] {
    background: var(--blue-mid);
    color: var(--white);
}

.select option:hover {
    background: var(--gray-mid);
}

/* ==========================================================================
   HedgerPro Unified Modal & Dialog System Tokens
   ========================================================================== */
:root {
    /* Modal Layout & Geometry */
    --hp-modal-top-offset: 35px;
    --hp-modal-bottom-offset: 35px;
    --hp-modal-width: 740px;
    --hp-modal-width-wide: 880px;
    --hp-modal-width-narrow: 520px;
    --hp-modal-max-width: 92vw;
    --hp-modal-max-height: calc(100vh - var(--hp-modal-top-offset, 35px) - var(--hp-modal-bottom-offset, 35px));
    --hp-modal-border-radius: 8px;
    --hp-modal-border: 1px solid #334155;
    --hp-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    --hp-modal-backdrop-bg: rgba(15, 23, 42, 0.65);
    --hp-modal-backdrop-blur: 2px;

    /* Modal Frame Colors */
    --hp-modal-bg: #ffffff;
    --hp-modal-border-color: #334155;
    --hp-modal-text-color: #1e293b;
    --hp-modal-body-bg: #f8fafc;
    --hp-modal-body-padding: 16px 20px;
    --hp-modal-body-gap: 16px;

    /* Modal Header */
    --hp-modal-header-bg: var(--blue-darker);
    --hp-modal-header-color: #f8fafc;
    --hp-modal-header-border: #1e293b;
    --hp-modal-header-padding: 10px 10px;
    --hp-modal-header-font-size: 14px;
    --hp-modal-header-font-weight: 700;
    --hp-modal-header-subtitle-color: #94a3b8;
    --hp-modal-header-subtitle-size: 13px;
    --hp-modal-header-icon-color: #38bdf8;

    /* Modal Footer */
    --hp-modal-footer-bg: #f1f5f9;
    --hp-modal-footer-border: #e2e8f0;
    --hp-modal-footer-padding: 10px 18px;

    /* Modal Close Button */
    --hp-modal-close-color: #ffffff;
    --hp-modal-close-bg: rgba(255, 255, 255, 0.12);
    --hp-modal-close-hover-color: #ffffff;
    --hp-modal-close-hover-bg: rgba(255, 255, 255, 0.24);
    --hp-modal-close-size: 14px;

    /* Modal Tabs Navigation */
    --hp-modal-tabs-bg: #0f172a;
    --hp-modal-tabs-border: #1e293b;
    --hp-modal-tabs-padding: 0 16px;
    --hp-modal-tabs-gap: 4px;
    --hp-modal-tab-color: #94a3b8;
    --hp-modal-tab-hover-color: #f1f5f9;
    --hp-modal-tab-active-color: #38bdf8;
    --hp-modal-tab-active-border: #38bdf8;
    --hp-modal-tab-font-size: 13px;
    --hp-modal-tab-font-weight: 600;
    --hp-modal-tab-padding: 9px 14px;

    /* Modal Badges */
    --hp-modal-badge-bg: #334155;
    --hp-modal-badge-color: #e2e8f0;
    --hp-modal-badge-active-bg: #0284c7;
    --hp-modal-badge-active-color: #ffffff;
    --hp-modal-badge-green-bg: #065f46;
    --hp-modal-badge-green-color: #a7f3d0;
    --hp-modal-badge-green-active-bg: #059669;

    /* Modal Cards */
    --hp-modal-card-bg: #ffffff;
    --hp-modal-card-border: #e2e8f0;
    --hp-modal-card-radius: 8px;
    --hp-modal-card-padding: 16px 20px;
    --hp-modal-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --hp-modal-card-title-color: #1e293b;
    --hp-modal-card-desc-color: #334155;
    --hp-modal-card-muted-color: #64748b;

    /* Modal Status Accents */
    --hp-modal-color-success: #10b981;
    --hp-modal-color-success-bg: #d1fae5;
    --hp-modal-color-success-text: #047857;
    --hp-modal-color-success-border: #6ee7b7;
    --hp-modal-color-warning: #f59e0b;
    --hp-modal-color-warning-bg: #fef3c7;
    --hp-modal-color-warning-text: #b45309;
    --hp-modal-color-warning-border: #fcd34d;
    --hp-modal-color-danger: #ef4444;
    --hp-modal-color-danger-bg: #fee2e2;
    --hp-modal-color-danger-text: #b91c1c;
    --hp-modal-color-danger-border: #fca5a5;
    --hp-modal-color-info: #38bdf8;
    --hp-modal-color-purple: #8b5cf6;
    --hp-modal-color-purple-bg: #f3e8ff;
    --hp-modal-color-purple-text: #6b21a8;
    --hp-modal-color-purple-border: #e9d5ff;

    /* Modal Chips & Tags */
    --hp-modal-chip-bg: #e2e8f0;
    --hp-modal-chip-color: #1e293b;
    --hp-modal-chip-radius: 6px;
    --hp-modal-chip-padding: 3px 9px;
    --hp-modal-chip-font-size: 11px;

    /* Modal Action Buttons */
    --hp-modal-btn-primary-bg: #0284c7;
    --hp-modal-btn-primary-hover: #0369a1;
    --hp-modal-btn-primary-color: #ffffff;
    --hp-modal-btn-radius: 6px;
    --hp-modal-btn-padding: 8px 16px;
    --hp-modal-btn-font-size: 13px;
    --hp-modal-btn-font-weight: 600;
}