@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1,350 lines (1,202 loc) • 229 kB
CSS
@layer mantine {/* ----- CSS reset ----- */
*,
*::before,
*::after {
box-sizing: border-box;
}
input,
button,
textarea,
select {
font: inherit;
}
button,
select {
text-transform: none;
}
/* ----- Global styles ----- */
body {
margin: 0;
font-family: var(--mantine-font-family);
font-size: var(--mantine-font-size-md);
line-height: var(--mantine-line-height);
background-color: var(--mantine-color-body);
color: var(--mantine-color-text);
-webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
-moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
}
@media screen and (max-device-width: 31.25em) {
body {
-webkit-text-size-adjust: 100%
}
}
@media (prefers-reduced-motion: reduce) {
[data-respect-reduced-motion] [data-reduce-motion] {
transition: none;
animation: none;
}
}
[data-mantine-color-scheme='light'] .mantine-light-hidden {
display: none;
}
[data-mantine-color-scheme='dark'] .mantine-dark-hidden {
display: none;
}
.mantine-focus-auto:focus-visible {
outline: 2px solid var(--mantine-primary-color-filled);
outline-offset: calc(0.125rem * var(--mantine-scale));
}
.mantine-focus-always:focus {
outline: 2px solid var(--mantine-primary-color-filled);
outline-offset: calc(0.125rem * var(--mantine-scale));
}
.mantine-focus-never:focus {
outline: none;
}
.mantine-active:active {
transform: translateY(calc(0.0625rem * var(--mantine-scale)));
}
fieldset:disabled .mantine-active:active {
transform: none;
}
:where([dir="rtl"]) .mantine-rotate-rtl {
transform: rotate(180deg);
}
/* ----- Default CSS variables ----- */
:root {
color-scheme: var(--mantine-color-scheme);
--mantine-z-index-app: 100;
--mantine-z-index-modal: 200;
--mantine-z-index-popover: 300;
--mantine-z-index-overlay: 400;
--mantine-z-index-max: 9999;
--mantine-scale: 1;
--mantine-cursor-type: default;
--mantine-webkit-font-smoothing: antialiased;
--mantine-color-scheme: light dark;
--mantine-moz-font-smoothing: grayscale;
--mantine-color-white: #fff;
--mantine-color-black: #000;
--mantine-line-height: 1.55;
--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji;
--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
Liberation Mono, Courier New, monospace;
--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
--mantine-heading-font-weight: 700;
--mantine-radius-default: calc(0.25rem * var(--mantine-scale));
--mantine-primary-color-0: var(--mantine-color-blue-0);
--mantine-primary-color-1: var(--mantine-color-blue-1);
--mantine-primary-color-2: var(--mantine-color-blue-2);
--mantine-primary-color-3: var(--mantine-color-blue-3);
--mantine-primary-color-4: var(--mantine-color-blue-4);
--mantine-primary-color-5: var(--mantine-color-blue-5);
--mantine-primary-color-6: var(--mantine-color-blue-6);
--mantine-primary-color-7: var(--mantine-color-blue-7);
--mantine-primary-color-8: var(--mantine-color-blue-8);
--mantine-primary-color-9: var(--mantine-color-blue-9);
--mantine-primary-color-filled: var(--mantine-color-blue-filled);
--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);
--mantine-primary-color-light: var(--mantine-color-blue-light);
--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);
--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);
--mantine-breakpoint-xs: 36em;
--mantine-breakpoint-sm: 48em;
--mantine-breakpoint-md: 62em;
--mantine-breakpoint-lg: 75em;
--mantine-breakpoint-xl: 88em;
--mantine-spacing-xs: calc(0.625rem * var(--mantine-scale));
--mantine-spacing-sm: calc(0.75rem * var(--mantine-scale));
--mantine-spacing-md: calc(1rem * var(--mantine-scale));
--mantine-spacing-lg: calc(1.25rem * var(--mantine-scale));
--mantine-spacing-xl: calc(2rem * var(--mantine-scale));
--mantine-font-size-xs: calc(0.75rem * var(--mantine-scale));
--mantine-font-size-sm: calc(0.875rem * var(--mantine-scale));
--mantine-font-size-md: calc(1rem * var(--mantine-scale));
--mantine-font-size-lg: calc(1.125rem * var(--mantine-scale));
--mantine-font-size-xl: calc(1.25rem * var(--mantine-scale));
--mantine-line-height-xs: 1.4;
--mantine-line-height-sm: 1.45;
--mantine-line-height-md: 1.55;
--mantine-line-height-lg: 1.6;
--mantine-line-height-xl: 1.65;
--mantine-shadow-xs: 0 calc(0.0625rem * var(--mantine-scale))
calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale))
rgba(0, 0, 0, 0.1);
--mantine-shadow-sm: 0 calc(0.0625rem * var(--mantine-scale))
calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale))
calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)),
rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale))
calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
--mantine-shadow-md: 0 calc(0.0625rem * var(--mantine-scale))
calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale))
calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)),
rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale))
calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
--mantine-shadow-lg: 0 calc(0.0625rem * var(--mantine-scale))
calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale))
calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)),
rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale))
calc(-0.4375rem * var(--mantine-scale));
--mantine-shadow-xl: 0 calc(0.0625rem * var(--mantine-scale))
calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale))
calc(-0.4375rem * var(--mantine-scale)),
rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale))
calc(1.0625rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale));
--mantine-radius-xs: calc(0.125rem * var(--mantine-scale));
--mantine-radius-sm: calc(0.25rem * var(--mantine-scale));
--mantine-radius-md: calc(0.5rem * var(--mantine-scale));
--mantine-radius-lg: calc(1rem * var(--mantine-scale));
--mantine-radius-xl: calc(2rem * var(--mantine-scale));
--mantine-color-dark-0: #c9c9c9;
--mantine-color-dark-1: #b8b8b8;
--mantine-color-dark-2: #828282;
--mantine-color-dark-3: #696969;
--mantine-color-dark-4: #424242;
--mantine-color-dark-5: #3b3b3b;
--mantine-color-dark-6: #2e2e2e;
--mantine-color-dark-7: #242424;
--mantine-color-dark-8: #1f1f1f;
--mantine-color-dark-9: #141414;
--mantine-color-gray-0: #f8f9fa;
--mantine-color-gray-1: #f1f3f5;
--mantine-color-gray-2: #e9ecef;
--mantine-color-gray-3: #dee2e6;
--mantine-color-gray-4: #ced4da;
--mantine-color-gray-5: #adb5bd;
--mantine-color-gray-6: #868e96;
--mantine-color-gray-7: #495057;
--mantine-color-gray-8: #343a40;
--mantine-color-gray-9: #212529;
--mantine-color-red-0: #fff5f5;
--mantine-color-red-1: #ffe3e3;
--mantine-color-red-2: #ffc9c9;
--mantine-color-red-3: #ffa8a8;
--mantine-color-red-4: #ff8787;
--mantine-color-red-5: #ff6b6b;
--mantine-color-red-6: #fa5252;
--mantine-color-red-7: #f03e3e;
--mantine-color-red-8: #e03131;
--mantine-color-red-9: #c92a2a;
--mantine-color-pink-0: #fff0f6;
--mantine-color-pink-1: #ffdeeb;
--mantine-color-pink-2: #fcc2d7;
--mantine-color-pink-3: #faa2c1;
--mantine-color-pink-4: #f783ac;
--mantine-color-pink-5: #f06595;
--mantine-color-pink-6: #e64980;
--mantine-color-pink-7: #d6336c;
--mantine-color-pink-8: #c2255c;
--mantine-color-pink-9: #a61e4d;
--mantine-color-grape-0: #f8f0fc;
--mantine-color-grape-1: #f3d9fa;
--mantine-color-grape-2: #eebefa;
--mantine-color-grape-3: #e599f7;
--mantine-color-grape-4: #da77f2;
--mantine-color-grape-5: #cc5de8;
--mantine-color-grape-6: #be4bdb;
--mantine-color-grape-7: #ae3ec9;
--mantine-color-grape-8: #9c36b5;
--mantine-color-grape-9: #862e9c;
--mantine-color-violet-0: #f3f0ff;
--mantine-color-violet-1: #e5dbff;
--mantine-color-violet-2: #d0bfff;
--mantine-color-violet-3: #b197fc;
--mantine-color-violet-4: #9775fa;
--mantine-color-violet-5: #845ef7;
--mantine-color-violet-6: #7950f2;
--mantine-color-violet-7: #7048e8;
--mantine-color-violet-8: #6741d9;
--mantine-color-violet-9: #5f3dc4;
--mantine-color-indigo-0: #edf2ff;
--mantine-color-indigo-1: #dbe4ff;
--mantine-color-indigo-2: #bac8ff;
--mantine-color-indigo-3: #91a7ff;
--mantine-color-indigo-4: #748ffc;
--mantine-color-indigo-5: #5c7cfa;
--mantine-color-indigo-6: #4c6ef5;
--mantine-color-indigo-7: #4263eb;
--mantine-color-indigo-8: #3b5bdb;
--mantine-color-indigo-9: #364fc7;
--mantine-color-blue-0: #e7f5ff;
--mantine-color-blue-1: #d0ebff;
--mantine-color-blue-2: #a5d8ff;
--mantine-color-blue-3: #74c0fc;
--mantine-color-blue-4: #4dabf7;
--mantine-color-blue-5: #339af0;
--mantine-color-blue-6: #228be6;
--mantine-color-blue-7: #1c7ed6;
--mantine-color-blue-8: #1971c2;
--mantine-color-blue-9: #1864ab;
--mantine-color-cyan-0: #e3fafc;
--mantine-color-cyan-1: #c5f6fa;
--mantine-color-cyan-2: #99e9f2;
--mantine-color-cyan-3: #66d9e8;
--mantine-color-cyan-4: #3bc9db;
--mantine-color-cyan-5: #22b8cf;
--mantine-color-cyan-6: #15aabf;
--mantine-color-cyan-7: #1098ad;
--mantine-color-cyan-8: #0c8599;
--mantine-color-cyan-9: #0b7285;
--mantine-color-teal-0: #e6fcf5;
--mantine-color-teal-1: #c3fae8;
--mantine-color-teal-2: #96f2d7;
--mantine-color-teal-3: #63e6be;
--mantine-color-teal-4: #38d9a9;
--mantine-color-teal-5: #20c997;
--mantine-color-teal-6: #12b886;
--mantine-color-teal-7: #0ca678;
--mantine-color-teal-8: #099268;
--mantine-color-teal-9: #087f5b;
--mantine-color-green-0: #ebfbee;
--mantine-color-green-1: #d3f9d8;
--mantine-color-green-2: #b2f2bb;
--mantine-color-green-3: #8ce99a;
--mantine-color-green-4: #69db7c;
--mantine-color-green-5: #51cf66;
--mantine-color-green-6: #40c057;
--mantine-color-green-7: #37b24d;
--mantine-color-green-8: #2f9e44;
--mantine-color-green-9: #2b8a3e;
--mantine-color-lime-0: #f4fce3;
--mantine-color-lime-1: #e9fac8;
--mantine-color-lime-2: #d8f5a2;
--mantine-color-lime-3: #c0eb75;
--mantine-color-lime-4: #a9e34b;
--mantine-color-lime-5: #94d82d;
--mantine-color-lime-6: #82c91e;
--mantine-color-lime-7: #74b816;
--mantine-color-lime-8: #66a80f;
--mantine-color-lime-9: #5c940d;
--mantine-color-yellow-0: #fff9db;
--mantine-color-yellow-1: #fff3bf;
--mantine-color-yellow-2: #ffec99;
--mantine-color-yellow-3: #ffe066;
--mantine-color-yellow-4: #ffd43b;
--mantine-color-yellow-5: #fcc419;
--mantine-color-yellow-6: #fab005;
--mantine-color-yellow-7: #f59f00;
--mantine-color-yellow-8: #f08c00;
--mantine-color-yellow-9: #e67700;
--mantine-color-orange-0: #fff4e6;
--mantine-color-orange-1: #ffe8cc;
--mantine-color-orange-2: #ffd8a8;
--mantine-color-orange-3: #ffc078;
--mantine-color-orange-4: #ffa94d;
--mantine-color-orange-5: #ff922b;
--mantine-color-orange-6: #fd7e14;
--mantine-color-orange-7: #f76707;
--mantine-color-orange-8: #e8590c;
--mantine-color-orange-9: #d9480f;
--mantine-h1-font-size: calc(2.125rem * var(--mantine-scale));
--mantine-h1-line-height: 1.3;
--mantine-h1-font-weight: 700;
--mantine-h2-font-size: calc(1.625rem * var(--mantine-scale));
--mantine-h2-line-height: 1.35;
--mantine-h2-font-weight: 700;
--mantine-h3-font-size: calc(1.375rem * var(--mantine-scale));
--mantine-h3-line-height: 1.4;
--mantine-h3-font-weight: 700;
--mantine-h4-font-size: calc(1.125rem * var(--mantine-scale));
--mantine-h4-line-height: 1.45;
--mantine-h4-font-weight: 700;
--mantine-h5-font-size: calc(1rem * var(--mantine-scale));
--mantine-h5-line-height: 1.5;
--mantine-h5-font-weight: 700;
--mantine-h6-font-size: calc(0.875rem * var(--mantine-scale));
--mantine-h6-line-height: 1.5;
--mantine-h6-font-weight: 700;
}
:root[data-mantine-color-scheme='dark'] {
--mantine-color-scheme: dark;
--mantine-primary-color-contrast: var(--mantine-color-white);
--mantine-color-bright: var(--mantine-color-white);
--mantine-color-text: var(--mantine-color-dark-0);
--mantine-color-body: var(--mantine-color-dark-7);
--mantine-color-error: var(--mantine-color-red-8);
--mantine-color-placeholder: var(--mantine-color-dark-3);
--mantine-color-anchor: var(--mantine-color-blue-4);
--mantine-color-default: var(--mantine-color-dark-6);
--mantine-color-default-hover: var(--mantine-color-dark-5);
--mantine-color-default-color: var(--mantine-color-white);
--mantine-color-default-border: var(--mantine-color-dark-4);
--mantine-color-dimmed: var(--mantine-color-dark-2);
--mantine-color-dark-text: var(--mantine-color-dark-4);
--mantine-color-dark-filled: var(--mantine-color-dark-8);
--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);
--mantine-color-dark-light: rgba(36, 36, 36, 0.15);
--mantine-color-dark-light-hover: rgba(36, 36, 36, 0.2);
--mantine-color-dark-light-color: var(--mantine-color-dark-3);
--mantine-color-dark-outline: var(--mantine-color-dark-4);
--mantine-color-dark-outline-hover: rgba(36, 36, 36, 0.05);
--mantine-color-gray-text: var(--mantine-color-gray-4);
--mantine-color-gray-filled: var(--mantine-color-gray-8);
--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);
--mantine-color-gray-light: rgba(134, 142, 150, 0.15);
--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);
--mantine-color-gray-light-color: var(--mantine-color-gray-3);
--mantine-color-gray-outline: var(--mantine-color-gray-4);
--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);
--mantine-color-red-text: var(--mantine-color-red-4);
--mantine-color-red-filled: var(--mantine-color-red-8);
--mantine-color-red-filled-hover: var(--mantine-color-red-9);
--mantine-color-red-light: rgba(250, 82, 82, 0.15);
--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);
--mantine-color-red-light-color: var(--mantine-color-red-3);
--mantine-color-red-outline: var(--mantine-color-red-4);
--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);
--mantine-color-pink-text: var(--mantine-color-pink-4);
--mantine-color-pink-filled: var(--mantine-color-pink-8);
--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);
--mantine-color-pink-light: rgba(230, 73, 128, 0.15);
--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);
--mantine-color-pink-light-color: var(--mantine-color-pink-3);
--mantine-color-pink-outline: var(--mantine-color-pink-4);
--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);
--mantine-color-grape-text: var(--mantine-color-grape-4);
--mantine-color-grape-filled: var(--mantine-color-grape-8);
--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);
--mantine-color-grape-light: rgba(190, 75, 219, 0.15);
--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);
--mantine-color-grape-light-color: var(--mantine-color-grape-3);
--mantine-color-grape-outline: var(--mantine-color-grape-4);
--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);
--mantine-color-violet-text: var(--mantine-color-violet-4);
--mantine-color-violet-filled: var(--mantine-color-violet-8);
--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);
--mantine-color-violet-light: rgba(121, 80, 242, 0.15);
--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);
--mantine-color-violet-light-color: var(--mantine-color-violet-3);
--mantine-color-violet-outline: var(--mantine-color-violet-4);
--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);
--mantine-color-indigo-text: var(--mantine-color-indigo-4);
--mantine-color-indigo-filled: var(--mantine-color-indigo-8);
--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);
--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);
--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);
--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);
--mantine-color-indigo-outline: var(--mantine-color-indigo-4);
--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);
--mantine-color-blue-text: var(--mantine-color-blue-4);
--mantine-color-blue-filled: var(--mantine-color-blue-8);
--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);
--mantine-color-blue-light: rgba(34, 139, 230, 0.15);
--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);
--mantine-color-blue-light-color: var(--mantine-color-blue-3);
--mantine-color-blue-outline: var(--mantine-color-blue-4);
--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);
--mantine-color-cyan-text: var(--mantine-color-cyan-4);
--mantine-color-cyan-filled: var(--mantine-color-cyan-8);
--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);
--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);
--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);
--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);
--mantine-color-cyan-outline: var(--mantine-color-cyan-4);
--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);
--mantine-color-teal-text: var(--mantine-color-teal-4);
--mantine-color-teal-filled: var(--mantine-color-teal-8);
--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);
--mantine-color-teal-light: rgba(18, 184, 134, 0.15);
--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);
--mantine-color-teal-light-color: var(--mantine-color-teal-3);
--mantine-color-teal-outline: var(--mantine-color-teal-4);
--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);
--mantine-color-green-text: var(--mantine-color-green-4);
--mantine-color-green-filled: var(--mantine-color-green-8);
--mantine-color-green-filled-hover: var(--mantine-color-green-9);
--mantine-color-green-light: rgba(64, 192, 87, 0.15);
--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);
--mantine-color-green-light-color: var(--mantine-color-green-3);
--mantine-color-green-outline: var(--mantine-color-green-4);
--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);
--mantine-color-lime-text: var(--mantine-color-lime-4);
--mantine-color-lime-filled: var(--mantine-color-lime-8);
--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);
--mantine-color-lime-light: rgba(130, 201, 30, 0.15);
--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);
--mantine-color-lime-light-color: var(--mantine-color-lime-3);
--mantine-color-lime-outline: var(--mantine-color-lime-4);
--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);
--mantine-color-yellow-text: var(--mantine-color-yellow-4);
--mantine-color-yellow-filled: var(--mantine-color-yellow-8);
--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);
--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);
--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);
--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);
--mantine-color-yellow-outline: var(--mantine-color-yellow-4);
--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);
--mantine-color-orange-text: var(--mantine-color-orange-4);
--mantine-color-orange-filled: var(--mantine-color-orange-8);
--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);
--mantine-color-orange-light: rgba(253, 126, 20, 0.15);
--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);
--mantine-color-orange-light-color: var(--mantine-color-orange-3);
--mantine-color-orange-outline: var(--mantine-color-orange-4);
--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);
}
:root[data-mantine-color-scheme='light'] {
--mantine-color-scheme: light;
--mantine-color-bright: var(--mantine-color-black);
--mantine-color-text: var(--mantine-color-black);
--mantine-color-body: var(--mantine-color-white);
--mantine-primary-color-contrast: var(--mantine-color-white);
--mantine-color-error: var(--mantine-color-red-6);
--mantine-color-placeholder: var(--mantine-color-gray-5);
--mantine-color-anchor: var(--mantine-primary-color-filled);
--mantine-color-default: var(--mantine-color-white);
--mantine-color-default-hover: var(--mantine-color-gray-0);
--mantine-color-default-color: var(--mantine-color-gray-9);
--mantine-color-default-border: var(--mantine-color-gray-4);
--mantine-color-dimmed: var(--mantine-color-gray-6);
--mantine-color-dark-text: var(--mantine-color-dark-filled);
--mantine-color-dark-filled: var(--mantine-color-dark-6);
--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);
--mantine-color-dark-light: rgba(56, 56, 56, 0.1);
--mantine-color-dark-light-hover: rgba(56, 56, 56, 0.12);
--mantine-color-dark-light-color: var(--mantine-color-dark-6);
--mantine-color-dark-outline: var(--mantine-color-dark-6);
--mantine-color-dark-outline-hover: rgba(56, 56, 56, 0.05);
--mantine-color-gray-text: var(--mantine-color-gray-filled);
--mantine-color-gray-filled: var(--mantine-color-gray-6);
--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);
--mantine-color-gray-light: rgba(134, 142, 150, 0.1);
--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);
--mantine-color-gray-light-color: var(--mantine-color-gray-6);
--mantine-color-gray-outline: var(--mantine-color-gray-6);
--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);
--mantine-color-red-text: var(--mantine-color-red-filled);
--mantine-color-red-filled: var(--mantine-color-red-6);
--mantine-color-red-filled-hover: var(--mantine-color-red-7);
--mantine-color-red-light: rgba(250, 82, 82, 0.1);
--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);
--mantine-color-red-light-color: var(--mantine-color-red-6);
--mantine-color-red-outline: var(--mantine-color-red-6);
--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);
--mantine-color-pink-text: var(--mantine-color-pink-filled);
--mantine-color-pink-filled: var(--mantine-color-pink-6);
--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);
--mantine-color-pink-light: rgba(230, 73, 128, 0.1);
--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);
--mantine-color-pink-light-color: var(--mantine-color-pink-6);
--mantine-color-pink-outline: var(--mantine-color-pink-6);
--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);
--mantine-color-grape-text: var(--mantine-color-grape-filled);
--mantine-color-grape-filled: var(--mantine-color-grape-6);
--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);
--mantine-color-grape-light: rgba(190, 75, 219, 0.1);
--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);
--mantine-color-grape-light-color: var(--mantine-color-grape-6);
--mantine-color-grape-outline: var(--mantine-color-grape-6);
--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);
--mantine-color-violet-text: var(--mantine-color-violet-filled);
--mantine-color-violet-filled: var(--mantine-color-violet-6);
--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);
--mantine-color-violet-light: rgba(121, 80, 242, 0.1);
--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);
--mantine-color-violet-light-color: var(--mantine-color-violet-6);
--mantine-color-violet-outline: var(--mantine-color-violet-6);
--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);
--mantine-color-indigo-text: var(--mantine-color-indigo-filled);
--mantine-color-indigo-filled: var(--mantine-color-indigo-6);
--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);
--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);
--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);
--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);
--mantine-color-indigo-outline: var(--mantine-color-indigo-6);
--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);
--mantine-color-blue-text: var(--mantine-color-blue-filled);
--mantine-color-blue-filled: var(--mantine-color-blue-6);
--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);
--mantine-color-blue-light: rgba(34, 139, 230, 0.1);
--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);
--mantine-color-blue-light-color: var(--mantine-color-blue-6);
--mantine-color-blue-outline: var(--mantine-color-blue-6);
--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);
--mantine-color-cyan-text: var(--mantine-color-cyan-filled);
--mantine-color-cyan-filled: var(--mantine-color-cyan-6);
--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);
--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);
--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);
--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);
--mantine-color-cyan-outline: var(--mantine-color-cyan-6);
--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);
--mantine-color-teal-text: var(--mantine-color-teal-filled);
--mantine-color-teal-filled: var(--mantine-color-teal-6);
--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);
--mantine-color-teal-light: rgba(18, 184, 134, 0.1);
--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);
--mantine-color-teal-light-color: var(--mantine-color-teal-6);
--mantine-color-teal-outline: var(--mantine-color-teal-6);
--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);
--mantine-color-green-text: var(--mantine-color-green-filled);
--mantine-color-green-filled: var(--mantine-color-green-6);
--mantine-color-green-filled-hover: var(--mantine-color-green-7);
--mantine-color-green-light: rgba(64, 192, 87, 0.1);
--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);
--mantine-color-green-light-color: var(--mantine-color-green-6);
--mantine-color-green-outline: var(--mantine-color-green-6);
--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);
--mantine-color-lime-text: var(--mantine-color-lime-filled);
--mantine-color-lime-filled: var(--mantine-color-lime-6);
--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);
--mantine-color-lime-light: rgba(130, 201, 30, 0.1);
--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);
--mantine-color-lime-light-color: var(--mantine-color-lime-6);
--mantine-color-lime-outline: var(--mantine-color-lime-6);
--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);
--mantine-color-yellow-text: var(--mantine-color-yellow-filled);
--mantine-color-yellow-filled: var(--mantine-color-yellow-6);
--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);
--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);
--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);
--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);
--mantine-color-yellow-outline: var(--mantine-color-yellow-6);
--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);
--mantine-color-orange-text: var(--mantine-color-orange-filled);
--mantine-color-orange-filled: var(--mantine-color-orange-6);
--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);
--mantine-color-orange-light: rgba(253, 126, 20, 0.1);
--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);
--mantine-color-orange-light-color: var(--mantine-color-orange-6);
--mantine-color-orange-outline: var(--mantine-color-orange-6);
--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);
}
.m_d57069b5 {
--scrollarea-scrollbar-size: calc(0.75rem * var(--mantine-scale));
position: relative;
overflow: hidden;
}
.m_c0783ff9 {
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
}
.m_c0783ff9::-webkit-scrollbar {
display: none;
}
.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
padding-inline-end: var(--scrollarea-scrollbar-size);
padding-inline-start: unset;
}
.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
padding-bottom: var(--scrollarea-scrollbar-size);
}
.m_f8f631dd {
min-width: 100%;
display: table;
}
.m_c44ba933 {
user-select: none;
touch-action: none;
box-sizing: border-box;
transition:
background-color 150ms ease,
opacity 150ms ease;
padding: calc(var(--scrollarea-scrollbar-size) / 5);
display: flex;
background-color: transparent;
flex-direction: row;
}
@media (hover: hover) {
:where([data-mantine-color-scheme='light']) .m_c44ba933:hover {
background-color: var(--mantine-color-gray-0);
}
:where([data-mantine-color-scheme='light']) .m_c44ba933:hover > .m_d8b5e363 {
background-color: rgba(0, 0, 0, 0.5);
}
:where([data-mantine-color-scheme='dark']) .m_c44ba933:hover {
background-color: var(--mantine-color-dark-8);
}
:where([data-mantine-color-scheme='dark']) .m_c44ba933:hover > .m_d8b5e363 {
background-color: rgba(255, 255, 255, 0.5);
}
}
@media (hover: none) {
:where([data-mantine-color-scheme='light']) .m_c44ba933:active {
background-color: var(--mantine-color-gray-0);
}
:where([data-mantine-color-scheme='light']) .m_c44ba933:active > .m_d8b5e363 {
background-color: rgba(0, 0, 0, 0.5);
}
:where([data-mantine-color-scheme='dark']) .m_c44ba933:active {
background-color: var(--mantine-color-dark-8);
}
:where([data-mantine-color-scheme='dark']) .m_c44ba933:active > .m_d8b5e363 {
background-color: rgba(255, 255, 255, 0.5);
}
}
.m_c44ba933:where([data-hidden], [data-state='hidden']) {
display: none;
}
.m_c44ba933:where([data-orientation='vertical']) {
width: var(--scrollarea-scrollbar-size);
top: 0;
bottom: var(--sa-corner-width);
inset-inline-end: 0;
}
.m_c44ba933:where([data-orientation='horizontal']) {
height: var(--scrollarea-scrollbar-size);
flex-direction: column;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: var(--sa-corner-width);
}
.m_d8b5e363 {
flex: 1;
border-radius: var(--scrollarea-scrollbar-size);
position: relative;
transition: background-color 150ms ease;
overflow: hidden;
opacity: var(--thumb-opacity);
}
.m_d8b5e363::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
min-width: calc(2.75rem * var(--mantine-scale));
min-height: calc(2.75rem * var(--mantine-scale));
}
:where([data-mantine-color-scheme='light']) .m_d8b5e363 {
background-color: rgba(0, 0, 0, 0.4);
}
:where([data-mantine-color-scheme='dark']) .m_d8b5e363 {
background-color: rgba(255, 255, 255, 0.4);
}
.m_21657268 {
position: absolute;
opacity: 0;
transition: opacity 150ms ease;
display: block;
inset-inline-end: 0;
bottom: 0;
}
:where([data-mantine-color-scheme='light']) .m_21657268 {
background-color: var(--mantine-color-gray-0);
}
:where([data-mantine-color-scheme='dark']) .m_21657268 {
background-color: var(--mantine-color-dark-8);
}
.m_21657268:where([data-hovered]) {
opacity: 1;
}
.m_21657268:where([data-hidden]) {
display: none;
}
.m_87cf2631 {
background-color: transparent;
cursor: pointer;
border: 0;
padding: 0;
appearance: none;
font-size: var(--mantine-font-size-md);
text-align: left;
text-decoration: none;
color: inherit;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
:where([dir="rtl"]) .m_87cf2631 {
text-align: right;
}
.m_515a97f8 {
border: 0;
clip: rect(0 0 0 0);
height: calc(0.0625rem * var(--mantine-scale));
width: calc(0.0625rem * var(--mantine-scale));
margin: calc(-0.0625rem * var(--mantine-scale));
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}
.m_1b7284a3 {
--paper-radius: var(--mantine-radius-default);
outline: 0;
-webkit-tap-highlight-color: transparent;
display: block;
touch-action: manipulation;
text-decoration: none;
border-radius: var(--paper-radius);
box-shadow: var(--paper-shadow);
background-color: var(--mantine-color-body);
}
:where([data-mantine-color-scheme='light']) .m_1b7284a3:where([data-with-border]) {
border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
}
:where([data-mantine-color-scheme='dark']) .m_1b7284a3:where([data-with-border]) {
border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
}
.m_38a85659 {
position: absolute;
border: 1px solid var(--popover-border-color);
padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
box-shadow: var(--popover-shadow, none);
border-radius: var(--popover-radius, var(--mantine-radius-default));
}
.m_38a85659:where([data-fixed]) {
position: fixed;
}
.m_38a85659:focus {
outline: none;
}
:where([data-mantine-color-scheme='light']) .m_38a85659 {
--popover-border-color: var(--mantine-color-gray-2);
background-color: var(--mantine-color-white);
}
:where([data-mantine-color-scheme='dark']) .m_38a85659 {
--popover-border-color: var(--mantine-color-dark-4);
background-color: var(--mantine-color-dark-6);
}
.m_a31dc6c1 {
background-color: inherit;
border: 1px solid var(--popover-border-color);
z-index: 1;
}
.m_5ae2e3c {
--loader-size-xs: calc(1.125rem * var(--mantine-scale));
--loader-size-sm: calc(1.375rem * var(--mantine-scale));
--loader-size-md: calc(2.25rem * var(--mantine-scale));
--loader-size-lg: calc(2.75rem * var(--mantine-scale));
--loader-size-xl: calc(3.625rem * var(--mantine-scale));
--loader-size: var(--loader-size-md);
--loader-color: var(--mantine-primary-color-filled);
}
/* ----- Bars loader ----- */
@keyframes m_5d2b3b9d {
0% {
transform: scale(0.6);
opacity: 0;
}
50%,
100% {
transform: scale(1);
}
}
.m_7a2bd4cd {
position: relative;
width: var(--loader-size);
height: var(--loader-size);
display: flex;
gap: calc(var(--loader-size) / 5);
}
.m_870bb79 {
flex: 1;
background: var(--loader-color);
animation: m_5d2b3b9d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
border-radius: calc(0.125rem * var(--mantine-scale));
}
.m_870bb79:nth-of-type(1) {
animation-delay: -240ms;
}
.m_870bb79:nth-of-type(2) {
animation-delay: -120ms;
}
.m_870bb79:nth-of-type(3) {
animation-delay: 0;
}
/* ----- Dots loader ----- */
@keyframes m_aac34a1 {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.6);
opacity: 0.5;
}
}
.m_4e3f22d7 {
display: flex;
justify-content: center;
align-items: center;
gap: calc(var(--loader-size) / 10);
position: relative;
width: var(--loader-size);
height: var(--loader-size);
}
.m_870c4af {
width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
border-radius: 50%;
background: var(--loader-color);
animation: m_aac34a1 0.8s infinite linear;
}
.m_870c4af:nth-child(2) {
animation-delay: 0.4s;
}
/* ----- Oval loader ----- */
@keyframes m_f8e89c4b {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.m_b34414df {
display: inline-block;
width: var(--loader-size);
height: var(--loader-size);
}
.m_b34414df::after {
content: '';
display: block;
width: var(--loader-size);
height: var(--loader-size);
border-radius: calc(625rem * var(--mantine-scale));
border-width: calc(var(--loader-size) / 8);
border-style: solid;
border-color: var(--loader-color) var(--loader-color) var(--loader-color) transparent;
animation: m_f8e89c4b 1.2s linear infinite;
}
.m_8d3f4000 {
--ai-size-xs: calc(1.125rem * var(--mantine-scale));
--ai-size-sm: calc(1.375rem * var(--mantine-scale));
--ai-size-md: calc(1.75rem * var(--mantine-scale));
--ai-size-lg: calc(2.125rem * var(--mantine-scale));
--ai-size-xl: calc(2.75rem * var(--mantine-scale));
--ai-size-input-xs: calc(1.875rem * var(--mantine-scale));
--ai-size-input-sm: calc(2.25rem * var(--mantine-scale));
--ai-size-input-md: calc(2.625rem * var(--mantine-scale));
--ai-size-input-lg: calc(3.125rem * var(--mantine-scale));
--ai-size-input-xl: calc(3.75rem * var(--mantine-scale));
--ai-size: var(--ai-size-md);
--ai-color: var(--mantine-color-white);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
user-select: none;
overflow: hidden;
width: var(--ai-size);
height: var(--ai-size);
min-width: var(--ai-size);
min-height: var(--ai-size);
border-radius: var(--ai-radius, var(--mantine-radius-default));
background: var(--ai-bg, var(--mantine-primary-color-filled));
color: var(--ai-color, var(--mantine-color-white));
border: var(--ai-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
cursor: pointer;
}
@media (hover: hover) {
.m_8d3f4000:hover:where(:not([data-loading], :disabled, [data-disabled])) {
background-color: var(--ai-hover, var(--mantine-primary-color-filled-hover));
color: var(--ai-hover-color, var(--ai-color));
}
}
@media (hover: none) {
.m_8d3f4000:active:where(:not([data-loading], :disabled, [data-disabled])) {
background-color: var(--ai-hover, var(--mantine-primary-color-filled-hover));
color: var(--ai-hover-color, var(--ai-color));
}
}
.m_8d3f4000[data-loading] {
cursor: not-allowed;
}
.m_8d3f4000[data-loading] .m_8d3afb97 {
opacity: 0;
transform: translateY(100%);
}
.m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
cursor: not-allowed;
border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
}
:where([data-mantine-color-scheme='light']) .m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
background-color: var(--mantine-color-gray-1);
color: var(--mantine-color-gray-5);
}
:where([data-mantine-color-scheme='dark']) .m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
background-color: var(--mantine-color-dark-6);
color: var(--mantine-color-dark-3);
}
.m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])):active {
transform: none;
}
.m_302b9fb1 {
inset: calc(-0.0625rem * var(--mantine-scale));
position: absolute;
border-radius: var(--ai-radius, var(--mantine-radius-default));
display: flex;
align-items: center;
justify-content: center;
}
:where([data-mantine-color-scheme='light']) .m_302b9fb1 {
background-color: rgba(255, 255, 255, 0.15);
}
:where([data-mantine-color-scheme='dark']) .m_302b9fb1 {
background-color: rgba(0, 0, 0, 0.15);
}
.m_1a0f1b21 {
--ai-border-width: calc(0.0625rem * var(--mantine-scale));
display: flex;
}
.m_1a0f1b21 :where(*):focus {
position: relative;
z-index: 1;
}
.m_1a0f1b21[data-orientation='horizontal'] {
flex-direction: row;
}
.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):first-child {
border-end-end-radius: 0;
border-start-end-radius: 0;
border-inline-end-width: calc(var(--ai-border-width) / 2);
}
.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):last-child {
border-end-start-radius: 0;
border-start-start-radius: 0;
border-inline-start-width: calc(var(--ai-border-width) / 2);
}
.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
border-radius: 0;
border-inline-width: calc(var(--ai-border-width) / 2);
}
.m_1a0f1b21[data-orientation='vertical'] {
flex-direction: column;
}
.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):first-child {
border-end-start-radius: 0;
border-end-end-radius: 0;
border-bottom-width: calc(var(--ai-border-width) / 2);
}
.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):last-child {
border-start-start-radius: 0;
border-start-end-radius: 0;
border-top-width: calc(var(--ai-border-width) / 2);
}
.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
border-radius: 0;
border-bottom-width: calc(var(--ai-border-width) / 2);
border-top-width: calc(var(--ai-border-width) / 2);
}
.m_8d3afb97 {
display: flex;
align-items: center;
justify-content: center;
transition:
transform 150ms ease,
opacity 100ms ease;
width: 100%;
height: 100%;
}
.m_437b6484 {
--section-height-xs: calc(1.125rem * var(--mantine-scale));
--section-height-sm: calc(1.375rem * var(--mantine-scale));
--section-height-md: calc(1.75rem * var(--mantine-scale));
--section-height-lg: calc(2.125rem * var(--mantine-scale));
--section-height-xl: calc(2.75rem * var(--mantine-scale));
--section-height-input-xs: calc(1.875rem * var(--mantine-scale));
--section-height-input-sm: calc(2.25rem * var(--mantine-scale));
--section-height-input-md: calc(2.625rem * var(--mantine-scale));
--section-height-input-lg: calc(3.125rem * var(--mantine-scale));
--section-height-input-xl: calc(3.75rem * var(--mantine-scale));
--section-padding-x-xs: calc(0.375rem * var(--mantine-scale));
--section-padding-x-sm: calc(0.5rem * var(--mantine-scale));
--section-padding-x-md: calc(0.625rem * var(--mantine-scale));
--section-padding-x-lg: calc(0.75rem * var(--mantine-scale));
--section-padding-x-xl: calc(1rem * var(--mantine-scale));
--section-height: var(--section-height-sm);
--section-padding-x: var(--section-padding-x-sm);
--section-color: var(--mantine-color-white);
font-weight: 600;
width: auto;
border-radius: var(--section-radius, var(--mantine-radius-default));
font-size: var(--section-fz, var(--mantine-font-size-sm));
background: var(--section-bg, var(--mantine-primary-color-filled));
border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
color: var(--section-color, var(--mantine-color-white));
height: var(--section-height, var(--section-height-sm));
padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
vertical-align: middle;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.m_86a44da5 {
--cb-size-xs: calc(1.125rem * var(--mantine-scale));
--cb-size-sm: calc(1.375rem * var(--mantine-scale));
--cb-size-md: calc(1.75rem * var(--mantine-scale));
--cb-size-lg: calc(2.125rem * var(--mantine-scale));
--cb-size-xl: calc(2.75rem * var(--mantine-scale));
--cb-size: var(--cb-size-md);
--cb-icon-size: 70%;
--cb-radius: var(--mantine-radius-default);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
user-select: none;
width: var(--cb-size);
height: var(--cb-size);
min-width: var(--cb-size);
min-height: var(--cb-size);
border-radius: var(--cb-radius);
}
:where([data-mantine-color-scheme='light']) .m_86a44da5 {
color: var(--mantine-color-gray-7);
}
:where([data-mantine-color-scheme='dark']) .m_86a44da5 {
color: var(--mantine-color-dark-1);
}
.m_86a44da5[data-disabled],
.m_86a44da5:disabled {
cursor: not-allowed;
opacity: 0.6;
}
@media (hover: hover) {
:where([data-mantine-color-scheme='light']) .m_220c80f2:where(:not([data-disabled], :disabled)):hover {
background-color: var(--mantine-color-gray-0);
}
:where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):hover {
background-color: var(--mantine-color-dark-6);
}
}
@media (hover: none) {
:where([data-mantine-color-scheme='light']) .m_220c80f2:where(:not([data-disabled], :disabled)):active {
background-color: var(--mantine-color-gray-0);
}
:where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):active {
background-color: var(--mantine-color-dark-6);
}
}
.m_4081bf90 {
display: flex;
flex-direction: row;
flex-wrap: var(--group-wrap, wrap);
justify-content: var(--group-justify, flex-start);
align-items: var(--group-align, center);
gap: var(--group-gap, var(--mantine-spacing-md));
}
.m_4081bf90:where([data-grow]) > * {
flex-grow: 1;
max-width: var(--group-child-width);
}
.m_9814e45f {
inset: 0;
position: absolute;
background: var(--overlay-bg, rgba(0, 0, 0, 0.6));
backdrop-filter: var(--overlay-filter);
-webkit-backdrop-filter: var(--overlay-filter);
border-radius: var(--overlay-radius, 0);
z-index: var(--overlay-z-index);
}
.m_9814e45f:where([data-fixed]) {
position: fixed;
}
.m_9814e45f:where([data-center]) {
display: flex;
align-items: center;
justify-content: center;
}
.m_615af6c9 {
line-height: 1;
padding: 0;
margin: 0;
font-weight: 400;
font-size: var(--mantine-font-size-md);
}
.m_b5489c3c {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--mb-padding, var(--mantine-spacing-md));
padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) - calc(0.3125rem * var(--mantine-scale)));
position: sticky;
top: 0;
background-color: var(--mantine-color-body);
z-index: 1000;
min-height: calc(3.75rem * var(--mantine-scale));
transition: padding-inline-end 100ms;
}
.m_60c222c7 {
position: fixed;
width: 100%;
top: 0;
bottom: 0;
z-index: var(--mb-z-index);
pointer-events: none;
}
.m_fd1ab0aa {
pointer-events: all;
box-shadow: var(--mb-shadow, var(--mantine-shadow-xl));
}
.m_fd1ab0aa [data-mantine-scrollbar] {
z-index: 1001;
}
.m_fd1ab0aa:has([data-mantine-scrollbar][data-state='visible']) .m_b5489c3c {
padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) + calc(0.3125rem * var(--mantine-scale)));
}
.m_606cb269 {
margin-inline-start: auto;
}
.m_5df29311 {
padding: var(--mb-padding, var(--mantine-spacing-md));
padding-top: var(--mb-padding, var(--mantine-spacing-md));
}
.m_5df29311:where(:not(:only-child)) {
padding-top: 0;
}
.m_6c018570 {
position: relative;
margin-top: var(--input-margin-top, 0rem);
margin-bottom: var(--input-margin-bottom, 0rem);
--input-height-xs: calc(1.875rem * var(--mantine-scale));
--input-height-sm: calc(2.25rem * var(--mantine-scale));
--input-height-md: calc(2.625rem * var(--mantine-scale));
--input-height-lg: calc(3.125rem * var(--mantine-scale));
--input-height-xl: calc(3.75rem * var(--mantine-scale));
--input-padding-y-xs: calc(0.3125rem * var(--mantine-scale));
--input-padding-y-sm: calc(0.375rem * var(--mantine-scale));
--input-padding-y-md: calc(0.5rem * var(--mantine-scale));
--input-padding-y-lg: calc(0.625rem * var(--mantine-scale));
--input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));
--input-height: var(--input-height-sm);
--input-radius: var(--mantine-radius-default);
--input-cursor: text;
--input-text-align: left;
--input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
--input-padding: calc(var(--input-height) / 3);
--input-padding-inline-start: var(--input-padding);
--input-padding-inline-end: var(--input-padding);
--input-placeholder-color: var(--mantine-color-placeholder);
--input-color: var(--mantine-color-text);
--input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))));
--input-right-section-size: var(
--input-right-section-width,
calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)))
);
--input-size: var(--input-height);
--section-y: calc(0.0625rem * var(--mantine-scale));
--left-section-start: calc(0.0625rem * var(--mantine-scale));
--left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
--right-section-end: calc(0.0625rem * var(--mantine-scale));
--right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
}
.m_6c018570[data-variant='unstyled'] {
--input-padding: 0;
--input-padding-y: 0;
--input-padding-inline-start: 0;
--input-padding-inline-end: 0;
}
.m_6c018570[data-pointer] {
--input-cursor: pointer;
}
.m_6c018570[data-multiline] {
--input-padding-y-xs: calc(0.28125rem * var(--mantine-scale));
--input-padding-y-sm: calc(0.34375rem * var(--man