{"version":3,"sources":["_fonts.scss","_spacing.scss","main.css","ui_components/_typography.scss","ui_components/_palette.scss","ui_components/_loader.scss","ui_components/_buttons.scss","ui_components/_forms.scss","ui_components/_lists.scss","ui_components/_badges.scss","ui_components/_tables.scss","ui_components/_toasts.scss","ui_components/_cards.scss","ui_components/_modals.scss","ui_components/_alerts.scss","_utils.scss","_ui.scss","_app.scss","app/_hud.scss","app/_load-screen.scss","app/_error-screen.scss"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf\") format(\"truetype\");\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf\") format(\"truetype\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n","/* =========================\n\t SPACING SCALE\n========================= */\n\n$space-0: 0;\n$space-1: 5px;\n$space-2: 8px;\n$space-3: 12px;\n$space-4: 15px;\n$space-5: 18px;\n$space-6: 22px;\n$space-7: 26px;\n$space-8: 34px;\n$space-9: 42px;\n$space-10: 48px;\n$space-11: 64px;\n$space-12: 80px;\n\n/* aliases for readability */\n$space-xs: $space-1;\n$space-sm: $space-2;\n$space-md: $space-4;\n$space-lg: $space-6;\n$space-xl: $space-8;\n$space-xxl: $space-10;\n\n/* map — for utilities generation */\n$spaces: (\n\t0: $space-0,\n\t1: $space-1,\n\t2: $space-2,\n\t3: $space-3,\n\t4: $space-4,\n\t5: $space-5,\n\t6: $space-6,\n\t7: $space-7,\n\t8: $space-8,\n\t9: $space-9,\n\t10: $space-10\n);\n\n/* =========================\n\t BASE LAYOUT\n========================= */\n\n.container {\n\tpadding: $space-5;\n}\n\n.section {\n\tmargin-bottom: $space-xxl;\n}\n\n.section-title {\n\tmargin-bottom: $space-xl;\n}\n\n.block {\n\tmargin-bottom: $space-xl;\n}\n\n.block-title {\n\tmargin-bottom: $space-lg;\n}\n\n/* =========================\n\t TEXT & CONTENT\n========================= */\n\np,\n.text {\n\tmargin-bottom: $space-md;\n}\n\n.hint {\n\tmargin-top: $space-sm;\n}\n\n/* =========================\n\t LISTS\n========================= */\n\n.list {\n\tpadding-left: $space-lg;\n\tmargin-bottom: $space-md;\n}\n\n.list-item {\n\tmargin-bottom: $space-sm;\n}\n\n.list-nested {\n\tmargin-top: $space-sm;\n}\n\n/* =========================\n\t TABLES\n========================= */\n\n.table {\n\tmargin-bottom: $space-lg;\n}\n\n.table-caption {\n\tmargin-bottom: $space-sm;\n}\n\n/* =========================\n\t FORMS\n========================= */\n\n.form-group {\n\tmargin-bottom: $space-md;\n}\n\n.label {\n\tmargin-bottom: $space-xs;\n\tdisplay: block;\n}\n\n.input,\n.textarea,\n.select {\n\tmargin-top: $space-xs;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n\n.toast {\n\tpadding: $space-md;\n}\n\n.toast-stack {\n\tgap: $space-sm;\n}\n","@charset \"UTF-8\";\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf\") format(\"truetype\");\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf\") format(\"truetype\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n/* =========================\n\t SPACING SCALE\n========================= */\n/* aliases for readability */\n/* map — for utilities generation */\n/* =========================\n\t BASE LAYOUT\n========================= */\n.container {\n padding: 18px;\n}\n\n.section {\n margin-bottom: 48px;\n}\n\n.section-title {\n margin-bottom: 34px;\n}\n\n.block {\n margin-bottom: 34px;\n}\n\n.block-title {\n margin-bottom: 22px;\n}\n\n/* =========================\n\t TEXT & CONTENT\n========================= */\np,\n.text {\n margin-bottom: 15px;\n}\n\n.hint {\n margin-top: 8px;\n}\n\n/* =========================\n\t LISTS\n========================= */\n.list {\n padding-left: 22px;\n margin-bottom: 15px;\n}\n\n.list-item {\n margin-bottom: 8px;\n}\n\n.list-nested {\n margin-top: 8px;\n}\n\n/* =========================\n\t TABLES\n========================= */\n.table {\n margin-bottom: 22px;\n}\n\n.table-caption {\n margin-bottom: 8px;\n}\n\n/* =========================\n\t FORMS\n========================= */\n.form-group {\n margin-bottom: 15px;\n}\n\n.label {\n margin-bottom: 5px;\n display: block;\n}\n\n.input,\n.textarea,\n.select {\n margin-top: 5px;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n.toast {\n padding: 15px;\n}\n\n.toast-stack {\n gap: 8px;\n}\n\n/* =========================\n\t FONT FAMILIES\n========================= */\n/* =========================\n\t FONT WEIGHTS\n========================= */\n/* =========================\n\t FONT SIZES (scale)\n========================= */\n/* =========================\n\t LINE HEIGHTS\n========================= */\n/* =========================\n\t LETTER SPACING\n========================= */\n/* =========================\n\t BASE TYPOGRAPHY\n========================= */\nhtml {\n font-size: 100%;\n}\n\nbody {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.6;\n letter-spacing: 0;\n}\n\n/* =========================\n\t HEADINGS\n========================= */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-family: \"IBM Plex Mono\", monospace;\n font-weight: 600;\n line-height: 1.25;\n margin: 0;\n}\nh1.contrast,\nh2.contrast,\nh3.contrast,\nh4.contrast,\nh5.contrast,\nh6.contrast {\n background: #F8F8F8;\n color: #0A0A0D;\n}\n\nh1 {\n font-size: 36px;\n letter-spacing: -0.01em;\n}\n\nh2 {\n font-size: 28px;\n}\n\nh3 {\n font-size: 24px;\n}\n\nh4 {\n font-size: 20px;\n}\n\nh5 {\n font-size: 18px;\n}\n\nh6 {\n font-size: 16px;\n font-weight: 500;\n}\n\n/* =========================\n\t TEXT VARIANTS\n========================= */\n.text,\np {\n font-size: 16px;\n line-height: 1.6;\n}\n\n.text-sm {\n font-size: 13px;\n line-height: 1.4;\n}\n\n.text-lg {\n font-size: 17px;\n line-height: 1.6;\n}\n\n.text-muted {\n font-size: 13px;\n color: #AAAEB2;\n}\n\n.text-strong,\nstrong {\n font-weight: 600;\n}\n\n.text-bold {\n font-weight: 700;\n}\n\n.text-italic,\nem {\n font-style: italic;\n}\n\n/* =========================\n\t CODE / MONO\n========================= */\ncode,\npre,\n.code {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 16px;\n line-height: 1.4;\n background-color: #1A1A23;\n}\n\npre {\n font-size: 16px;\n line-height: 1.6;\n white-space: pre-wrap;\n}\n\n/* =========================\n\t LINKS\n========================= */\na {\n font-weight: 500;\n text-decoration: none;\n}\n\n.link {\n font-size: inherit;\n font-weight: 500;\n}\n\n/* =========================\n\t LABELS / META\n========================= */\n.label {\n font-size: 13px;\n font-weight: 500;\n line-height: 1.4;\n}\n\n.hint,\n.meta {\n font-size: 12px;\n line-height: 1.4;\n}\n\n/* =========================\n\t TABLE TEXT\n========================= */\n.table {\n font-size: 13px;\n line-height: 1.4;\n}\n.table th {\n font-weight: 600;\n}\n.table td {\n font-weight: 400;\n}\n\n/* =========================\n\t LISTS\n========================= */\n.list {\n font-size: 16px;\n line-height: 1.6;\n}\n\n.list-item {\n font-size: inherit;\n}\n\n/* =========================\n\t MODALS\n========================= */\n.modal-title {\n font-size: 20px;\n font-weight: 600;\n}\n\n.modal-body {\n font-size: 16px;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n.toast-title {\n font-size: 14px;\n font-weight: 600;\n}\n\n.toast-text {\n font-size: 13px;\n line-height: 1.4;\n}\n\n.palette {\n display: flex;\n flex-direction: row;\n gap: 8px;\n}\n.palette .color .color-box {\n width: 100px;\n height: 80px;\n}\n\n/* BACKGROUND COLORS */\nbody .bg-primary {\n background: #F8F8F8;\n}\nbody .bg-secondary {\n background: #00B3FF;\n}\nbody .bg-success {\n background: #00FFAA;\n}\nbody .bg-accent {\n background: #ff6f30;\n}\nbody .bg-info {\n background: #8A2CE2;\n}\nbody .bg-warning {\n background: #FFD900;\n}\nbody .bg-error {\n background: #FF3C00;\n}\nbody {\n /* TEXT COLORS */\n}\nbody .text-color-primary {\n color: #F8F8F8;\n}\nbody .text-color-secondary {\n color: #00B3FF;\n}\nbody .text-color-success {\n color: #00FFAA;\n}\nbody .text-color-accent {\n color: #ff6f30;\n}\nbody .text-color-info {\n color: #8A2CE2;\n}\nbody .text-color-warning {\n color: #FFD900;\n}\nbody .text-color-error {\n color: #FF3C00;\n}\n\n/* HTML: <div class=\"loader\"></div> */\n.loader {\n width: 45px;\n aspect-ratio: 1;\n --c:no-repeat linear-gradient(#FF3C00 0 0);\n background: var(--c) 0 0, var(--c) 0 100%, var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 0, var(--c) 100% 100%;\n animation: l12 1s infinite;\n}\n\n@keyframes l12 {\n 0%, 100% {\n background-size: 20% 50%;\n }\n 16.67% {\n background-size: 20% 30%, 20% 30%, 20% 50%, 20% 50%, 20% 50%, 20% 50%;\n }\n 33.33% {\n background-size: 20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 50%, 20% 50%;\n }\n 50% {\n background-size: 20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%;\n }\n 66.67% {\n background-size: 20% 50%, 20% 50%, 20% 30%, 20% 30%, 20% 30%, 20% 30%;\n }\n 83.33% {\n background-size: 20% 50%, 20% 50%, 20% 50%, 20% 50%, 20% 30%, 20% 30%;\n }\n}\n@keyframes icon_spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n.btn {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 17px;\n font-weight: 600;\n line-height: 1;\n letter-spacing: 0.04em;\n padding: 12px 22px;\n border-radius: 0;\n border-width: 2px;\n border-left-width: 6px;\n border-style: solid;\n border-color: #F8F8F8;\n text-transform: uppercase;\n background-color: transparent;\n transition-duration: 0.2s;\n transition-property: background-color, border-color, color;\n}\n.btn.with-icon {\n border-left-width: 48px;\n position: relative;\n}\n.btn.with-icon .ph,\n.btn.with-icon .ph-bold {\n position: absolute;\n color: #0a0a0d;\n left: -48px;\n top: 0;\n font-size: 28px;\n height: 100%;\n display: inline-flex;\n align-items: center;\n width: 48px;\n justify-content: center;\n transition-duration: 0.2s;\n transition-property: color, left;\n}\n.btn:hover.with-icon:not(.loading-state) .ph,\n.btn:hover.with-icon:not(.loading-state) .ph-bold {\n left: -28px;\n}\n.btn.btn-primary {\n color: #F8F8F8;\n border-color: #F8F8F8;\n}\n.btn.btn-primary:hover {\n background-color: #F8F8F8;\n color: #0A0A0D;\n}\n.btn.btn-secondary {\n color: #00B3FF;\n border-color: #00B3FF;\n}\n.btn.btn-secondary:hover {\n background-color: #00B3FF;\n color: #F8F8F8;\n}\n.btn.btn-secondary:hover.with-icon .ph,\n.btn.btn-secondary:hover.with-icon .ph-bold {\n color: #F8F8F8;\n}\n.btn.btn-accent {\n color: #ff6f30;\n border-color: #ff6f30;\n}\n.btn.btn-accent:hover {\n background-color: #ff6f30;\n color: #F8F8F8;\n}\n.btn.btn-accent:hover.with-icon .ph,\n.btn.btn-accent:hover.with-icon .ph-bold {\n color: #F8F8F8;\n}\n.btn.btn-danger {\n color: #FF3C00;\n border-color: #FF3C00;\n}\n.btn.btn-danger:hover {\n background-color: #FF3C00;\n color: #0A0A0D;\n}\n.btn.btn-warning {\n color: #FFD900;\n border-color: #FFD900;\n}\n.btn.btn-warning:hover {\n background-color: #FFD900;\n color: #0A0A0D;\n}\n.btn.btn-success {\n color: #00FFAA;\n border-color: #00FFAA;\n}\n.btn.btn-success:hover {\n background-color: #00FFAA;\n color: #0A0A0D;\n}\n.btn.btn-info {\n color: #8A2CE2;\n border-color: #8A2CE2;\n}\n.btn.btn-info:hover {\n background-color: #8A2CE2;\n color: #F8F8F8;\n}\n.btn.btn-info:hover.with-icon .ph,\n.btn.btn-info:hover.with-icon .ph-bold {\n color: #F8F8F8;\n}\n.btn[disabled]:not(.loading-state) {\n color: #AAAEB2;\n border-color: #1A1A23;\n background-color: #1A1A23;\n}\n.btn[disabled]:not(.loading-state).with-icon .ph,\n.btn[disabled]:not(.loading-state).with-icon .ph-bold {\n color: #AAAEB2;\n}\n.btn[disabled]:not(.loading-state):hover {\n background-color: #1A1A23;\n color: #AAAEB2;\n}\n.btn[disabled]:not(.loading-state):hover.with-icon .ph,\n.btn[disabled]:not(.loading-state):hover.with-icon .ph-bold {\n color: #AAAEB2;\n}\n.btn[disabled]:not(.loading-state).with-icon .ph,\n.btn[disabled]:not(.loading-state).with-icon .ph-bold {\n left: -28px;\n}\n.btn.btn-small {\n font-size: 14px;\n font-weight: 500;\n padding: 8px 8px;\n}\n.btn.btn-small.with-icon {\n border-left-width: 32px;\n}\n.btn.btn-small.with-icon .ph,\n.btn.btn-small.with-icon .ph-bold {\n left: -40px;\n font-size: 23px;\n}\n.btn.btn-small.with-icon.loading-state .ph, .btn.btn-small.with-icon.loading-state .ph-bold {\n font-size: 30px;\n}\n.btn.btn-large {\n font-size: 20px;\n font-weight: 700;\n padding: 15px 48px;\n}\n.btn.loading-state {\n color: #0A0A0D !important;\n border-color: #F8F8F8 !important;\n background-color: #F8F8F8 !important;\n}\n.btn.loading-state .ph, .btn.loading-state .ph-bold {\n font-size: 31px;\n transform-origin: 50% 50%;\n animation: icon_spin 1.2s linear infinite;\n}\n\n.btn-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 30px;\n height: 30px;\n background: transparent;\n color: #F8F8F8;\n font-size: 20px;\n border: 0;\n transition-duration: 0.2s;\n transition-property: color;\n}\n.btn-icon .ph {\n transform: rotate(0);\n transition-duration: 0.2s;\n transition-property: transform;\n}\n.btn-icon:hover {\n color: #AAAEB2;\n}\n.btn-icon:hover .ph {\n transform: rotate(90deg);\n}\n\n.form-group .label {\n display: flex;\n flex-direction: column;\n font-size: 17px;\n width: 100%;\n max-width: 600px;\n position: relative;\n}\n.form-group .label > .ph {\n position: absolute;\n color: #F8F8F8;\n left: 0;\n bottom: 2px;\n font-size: 28px;\n height: 56px;\n display: inline-flex;\n align-items: center;\n width: 48px;\n justify-content: center;\n transition-duration: 0.2s;\n transition-property: color, left;\n}\n.form-group .label .input {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 16px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: 0.04em;\n padding: 12px 22px;\n margin-top: 8px;\n border-radius: 0;\n border-width: 2px;\n border-bottom-width: 6px;\n border-style: solid;\n border-color: #F8F8F8;\n color: #F8F8F8;\n background-color: transparent;\n transition-duration: 0.2s;\n transition-property: background-color, border-color, color;\n}\n.form-group .label .input:hover {\n border-bottom-color: #AAAEB2;\n}\n.form-group .label .input:focus {\n outline: none;\n border-color: #00B3FF;\n}\n.form-group .label .input::placeholder {\n color: #AAAEB2;\n}\n.form-group .label textarea.input {\n height: 120px;\n line-height: 1.25;\n resize: none;\n}\n.form-group .label .ph + .input,\n.form-group .label .ph + .select-wrap .select {\n padding-left: 42px;\n}\n.form-group .label .select-wrap {\n margin-top: 8px;\n}\n.form-group .label .select {\n width: 100%;\n height: 56px;\n margin-top: 0;\n /* убрать нативную стрелку */\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n.form-group .label .select:focus {\n outline: none;\n}\n.form-group .label .select option {\n color: #F8F8F8;\n background: #1A1A23;\n}\n.form-group .label .select-wrap::after {\n content: \"\";\n position: absolute;\n right: 22px;\n bottom: 18px;\n transform: translateY(-50%);\n width: 0;\n height: 0;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-top: 10px solid #F8F8F8;\n pointer-events: none;\n}\n.form-group .label.error .input:not(:focus) {\n border-color: #FF3C00;\n}\n.form-group .label.error + .input-info {\n color: #FFD900;\n}\n.form-group .input-info {\n font-size: 14px;\n margin-top: 8px;\n}\n.form-group .input-info .ph {\n position: relative;\n top: 1px;\n}\n\n.radio {\n display: inline-flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n}\n.radio input[type=radio] {\n display: none;\n}\n.radio .radio-control {\n display: inline-block;\n border-radius: 100%;\n border: 2px solid #F8F8F8;\n width: 20px;\n height: 20px;\n background: transparent;\n transition-duration: 0.2s;\n transition-property: background, border-color;\n}\n.radio:hover .radio-control {\n background: #4A4A57;\n}\n.radio input[type=radio]:checked + .radio-control {\n background: #F8F8F8;\n}\n.radio input[type=radio]:disabled + .radio-control {\n background: #4A4A57;\n border-color: #4A4A57;\n}\n.radio .radio-label {\n font-size: 17px;\n}\n\n.checkbox {\n display: inline-flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n}\n.checkbox input[type=checkbox] {\n display: none;\n}\n.checkbox .checkbox-control {\n height: 16px;\n width: 30px;\n border: 2px solid #F8F8F8;\n position: relative;\n background: transparent;\n transition-duration: 0.2s;\n transition-property: border-color, background;\n display: block;\n}\n.checkbox .checkbox-control:before {\n content: \"\";\n display: block;\n height: 20px;\n width: 20px;\n background: #F8F8F8;\n position: absolute;\n left: -6px;\n top: -4px;\n transition-duration: 0.2s;\n transition-property: left, background;\n}\n.checkbox:hover .checkbox-control {\n background: #4A4A57;\n}\n.checkbox input[type=checkbox]:checked:not(:disabled) + .checkbox-control {\n background: #00B3FF;\n border-color: #00B3FF;\n}\n.checkbox input[type=checkbox]:checked + .checkbox-control:before {\n left: 12px;\n}\n.checkbox input[type=checkbox]:disabled + .checkbox-control {\n border-color: #4A4A57;\n}\n.checkbox input[type=checkbox]:disabled + .checkbox-control:before {\n background: #4A4A57;\n}\n\n.list {\n display: flex;\n flex-direction: column;\n gap: 5px;\n list-style-type: none;\n padding-left: 0;\n}\n.list .list-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n margin-left: 0;\n}\n.list.list-ordered {\n list-style-type: decimal;\n display: list-item;\n margin-left: 30px;\n}\n.list.list-ordered .list-item {\n display: list-item;\n}\n.list.list-definition {\n gap: 15px;\n}\n.list.list-definition .list-row {\n border-left: 2px solid #F8F8F8;\n}\n.list.list-definition .list-row .list-term::before,\n.list.list-definition .list-row .list-desc::before {\n content: \"\";\n height: 2px;\n width: 12px;\n position: absolute;\n top: 50%;\n left: 0;\n margin-top: -1px;\n display: block;\n background: #F8F8F8;\n}\n.list.list-definition .list-row .list-term,\n.list.list-definition .list-row .list-desc {\n position: relative;\n}\n.list.list-definition .list-row .list-term {\n padding-left: 18px;\n font-size: 20px;\n}\n.list.list-definition .list-row .list-desc {\n padding-left: 18px;\n}\n.list.list-nav {\n max-width: 420px;\n width: 100%;\n gap: 0;\n}\n.list.list-nav .list-item {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n height: 50px;\n margin: 0;\n}\n.list.list-nav .list-item .list-action {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 8px 12px;\n border: 0;\n font-size: 17px;\n background: #1A1A23;\n color: inherit;\n transition-duration: 0.2s;\n transition-property: background;\n}\n.list.list-nav .list-item .list-action:hover {\n background: #00B3FF;\n}\n.list.list-nav .list-item .list-action .list-label {\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n letter-spacing: -0.05em;\n font-weight: 400;\n}\n.list.list-nav .list-item .list-action .list-meta {\n padding: 8px;\n background: #00FFAA;\n color: #0A0A0D;\n display: flex;\n}\n.list.list-nav .list-item.list-item-active .list-action {\n background: #00B3FF;\n}\n.list.list-actions {\n width: 100%;\n max-width: 420px;\n gap: 22px;\n}\n.list.list-actions .list-item {\n justify-content: space-between;\n align-items: flex-start;\n}\n.list.list-actions .list-item .list-content {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.list.list-actions .list-item .list-content .list-title {\n font-size: 20px;\n line-height: 1;\n}\n.badge {\n background: #F8F8F8;\n color: #1A1A23;\n padding: 5px 8px;\n font-size: 16px;\n}\n.badge.badge-success {\n background: #00FFAA;\n}\n.badge.badge-warning {\n background: #FFD900;\n}\n.badge.badge-error, .badge.badge-danger {\n background: #FF3C00;\n}\n.badge.badge-info {\n background: #8A2CE2;\n color: #F8F8F8;\n}\n.badge.badge-secondary {\n background: #00B3FF;\n color: #F8F8F8;\n}\n\n.table {\n text-align: left;\n border: 2px solid #F8F8F8;\n padding: 15px;\n}\n.table .table-caption {\n text-align: left;\n font-size: 20px;\n background: #F8F8F8;\n width: max-content;\n color: #1A1A23;\n padding: 5px 12px;\n margin-bottom: 0;\n}\n.table .table-row th,\n.table .table-row td {\n padding: 12px 18px;\n font-size: 16px;\n}\n.table .table-foot th,\n.table .table-foot td {\n padding-top: 15px;\n}\n\n.toast {\n position: fixed;\n bottom: -100px;\n right: 15px;\n max-width: 420px;\n background: #1A1A23;\n border: 2px solid #F8F8F8;\n padding: 0;\n opacity: 0;\n transition-duration: 0.25s;\n transition-property: opacity, top, bottom;\n}\n.toast.a-show {\n bottom: 15px;\n opacity: 1;\n}\n.toast.a-hide {\n bottom: 115px;\n opacity: 0;\n}\n.toast .toast-content {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n.toast .toast-content .toast-title {\n font-size: 24px;\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n color: #0A0A0D;\n background: #F8F8F8;\n padding: 5px 8px;\n padding-right: 42px;\n}\n.toast .toast-content .toast-text {\n font-size: 16px;\n padding: 22px 15px;\n margin: 0;\n}\n.toast .toast-close {\n position: absolute;\n top: 0;\n right: 0;\n color: #0A0A0D;\n height: 40px;\n width: 40px;\n}\n.toast .toast-close:hover {\n color: #1A1A23;\n}\n.toast.toast-success {\n border-color: #00FFAA;\n}\n.toast.toast-success .toast-title {\n background: #00FFAA;\n}\n.toast.toast-warning {\n border-color: #FFD900;\n}\n.toast.toast-warning .toast-title {\n background: #FFD900;\n}\n.toast.toast-danger {\n border-color: #FF3C00;\n}\n.toast.toast-danger .toast-title {\n background: #FF3C00;\n}\n\n.card {\n max-width: 420px;\n width: 100%;\n border: 2px solid #F8F8F8;\n}\n.card .card-title {\n color: #0A0A0D;\n background: #F8F8F8;\n padding: 8px 12px;\n}\n.card .card-content {\n padding: 15px;\n}\n.card .card-content .card-thumb {\n width: 100%;\n}\n.card .card-content p {\n margin-top: 8px;\n margin-bottom: 0;\n}\n.card .card-footer {\n padding: 8px 15px;\n padding-bottom: 15px;\n}\n.card.device-action {\n max-width: 220px;\n transition-duration: 0.2s;\n transition-property: border-color;\n}\n.card.device-action .device-icon-container {\n position: relative;\n}\n.card.device-action .device-icon-container .device-online-status {\n position: absolute;\n top: -15px;\n left: -5px;\n font-size: 24px;\n color: #FF3C00;\n}\n.card.device-action .device-icon-container .device-online-status.status-online {\n color: #00FFAA;\n}\n.card.device-action .device-icon-container .device-icon {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n font-size: 54px;\n height: 80px;\n width: 100%;\n transition-duration: 0.2s;\n transition-property: color;\n}\n.card.device-action .card-title {\n display: flex;\n width: 100%;\n font-size: 14px;\n font-weight: 700;\n transition-duration: 0.2s;\n transition-property: background-color, color;\n}\n.card.device-action .device-name {\n font-size: 14px;\n line-height: 1.4;\n}\n.card.device-action.card-success {\n border-color: #00FFAA;\n}\n.card.device-action.card-success .card-title {\n background: #00FFAA;\n}\n.card.device-action.card-success .device-icon {\n color: #00FFAA;\n}\n.card.device-action.card-warning {\n border-color: #FFD900;\n}\n.card.device-action.card-warning .card-title {\n background: #FFD900;\n}\n.card.device-action.card-warning .device-icon {\n color: #FFD900;\n}\n.card.device-action.card-info {\n border-color: #8A2CE2;\n}\n.card.device-action.card-info .card-title {\n background: #8A2CE2;\n color: #F8F8F8;\n}\n.card.device-action.card-info .device-icon {\n color: #8A2CE2;\n}\n.card.device-action.card-secondary {\n border-color: #00B3FF;\n}\n.card.device-action.card-secondary .card-title {\n background: #00B3FF;\n color: #F8F8F8;\n}\n.card.device-action.card-secondary .device-icon {\n color: #00B3FF;\n}\n.card.device-action.card-danger, .card.device-action.card-error {\n border-color: #FF3C00;\n}\n.card.device-action.card-danger .card-title, .card.device-action.card-error .card-title {\n background: #FF3C00;\n}\n.card.device-action.card-danger .device-icon, .card.device-action.card-error .device-icon {\n color: #FF3C00;\n}\n\n.modal {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.modal .modal-backdrop {\n position: fixed;\n z-index: 1010;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: #0A0A0D;\n opacity: 0;\n transition-duration: 0.25s;\n transition-property: opacity;\n}\n.modal .modal-panel {\n position: relative;\n z-index: 1020;\n width: 100%;\n max-width: 960px;\n height: auto;\n min-height: 200px;\n max-height: 800px;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-top: 200px;\n background: #0A0A0D;\n border: 2px solid #F8F8F8;\n opacity: 0;\n transition-duration: 0.25s;\n transition-property: opacity, margin-top;\n}\n.modal .modal-panel .modal-header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-right: 15px;\n}\n.modal .modal-panel .modal-header .modal-title {\n padding: 12px 15px;\n background: #F8F8F8;\n color: #0A0A0D;\n text-transform: uppercase;\n}\n.modal .modal-panel .modal-body {\n max-height: 700px;\n overflow-y: auto;\n padding: 18px;\n}\n.modal .modal-panel .modal-footer {\n padding: 18px;\n}\n.modal .modal-panel .modal-footer .actions {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n gap: 15px;\n width: 100%;\n}\n.modal.a-show .modal-backdrop {\n opacity: 1;\n}\n.modal.a-show .modal-panel {\n opacity: 1;\n margin-top: 0;\n}\n.modal.a-hide .modal-backdrop {\n opacity: 0;\n}\n.modal.a-hide .modal-panel {\n opacity: 0;\n margin-top: -200px;\n}\n\n.alert {\n padding: 12px 15px;\n border-left-style: solid;\n border-left-width: 4px;\n color: #F8F8F8;\n}\n.alert.alert-primary {\n border-color: #F8F8F8;\n background: rgba(248, 248, 248, 0.1);\n color: #F8F8F8;\n}\n.alert.alert-success {\n border-color: #00FFAA;\n background: rgba(0, 255, 170, 0.1);\n color: #00FFAA;\n}\n.alert.alert-secondary {\n border-color: #00B3FF;\n background: rgba(0, 179, 255, 0.1);\n color: rgb(51, 194.2, 255);\n}\n.alert.alert-info {\n border-color: #8A2CE2;\n background: rgba(138, 44, 226, 0.1);\n color: rgb(187.725, 133.675, 238.325);\n}\n.alert.alert-warning {\n border-color: #FFD900;\n background: rgba(255, 217, 0, 0.1);\n color: #FFD900;\n}\n.alert.alert-error, .alert.alert-danger {\n border-color: #FF3C00;\n background: rgba(255, 60, 0, 0.1);\n color: rgb(255, 118.5, 76.5);\n}\n\n/* =========================\n SPACING UTILITIES\n========================= */\n/* margin */\n.m-0 {\n margin: 0 !important;\n}\n\n.mt-0 {\n margin-top: 0 !important;\n}\n\n.mr-0 {\n margin-right: 0 !important;\n}\n\n.mb-0 {\n margin-bottom: 0 !important;\n}\n\n.ml-0 {\n margin-left: 0 !important;\n}\n\n.mx-0 {\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.my-0 {\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n}\n\n/* padding */\n.p-0 {\n padding: 0 !important;\n}\n\n.pt-0 {\n padding-top: 0 !important;\n}\n\n.pr-0 {\n padding-right: 0 !important;\n}\n\n.pb-0 {\n padding-bottom: 0 !important;\n}\n\n.pl-0 {\n padding-left: 0 !important;\n}\n\n.px-0 {\n padding-left: 0 !important;\n padding-right: 0 !important;\n}\n\n.py-0 {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n\n/* gap */\n.g-0 {\n gap: 0 !important;\n}\n\n/* margin */\n.m-1 {\n margin: 5px !important;\n}\n\n.mt-1 {\n margin-top: 5px !important;\n}\n\n.mr-1 {\n margin-right: 5px !important;\n}\n\n.mb-1 {\n margin-bottom: 5px !important;\n}\n\n.ml-1 {\n margin-left: 5px !important;\n}\n\n.mx-1 {\n margin-left: 5px !important;\n margin-right: 5px !important;\n}\n\n.my-1 {\n margin-top: 5px !important;\n margin-bottom: 5px !important;\n}\n\n/* padding */\n.p-1 {\n padding: 5px !important;\n}\n\n.pt-1 {\n padding-top: 5px !important;\n}\n\n.pr-1 {\n padding-right: 5px !important;\n}\n\n.pb-1 {\n padding-bottom: 5px !important;\n}\n\n.pl-1 {\n padding-left: 5px !important;\n}\n\n.px-1 {\n padding-left: 5px !important;\n padding-right: 5px !important;\n}\n\n.py-1 {\n padding-top: 5px !important;\n padding-bottom: 5px !important;\n}\n\n/* gap */\n.g-1 {\n gap: 5px !important;\n}\n\n/* margin */\n.m-2 {\n margin: 8px !important;\n}\n\n.mt-2 {\n margin-top: 8px !important;\n}\n\n.mr-2 {\n margin-right: 8px !important;\n}\n\n.mb-2 {\n margin-bottom: 8px !important;\n}\n\n.ml-2 {\n margin-left: 8px !important;\n}\n\n.mx-2 {\n margin-left: 8px !important;\n margin-right: 8px !important;\n}\n\n.my-2 {\n margin-top: 8px !important;\n margin-bottom: 8px !important;\n}\n\n/* padding */\n.p-2 {\n padding: 8px !important;\n}\n\n.pt-2 {\n padding-top: 8px !important;\n}\n\n.pr-2 {\n padding-right: 8px !important;\n}\n\n.pb-2 {\n padding-bottom: 8px !important;\n}\n\n.pl-2 {\n padding-left: 8px !important;\n}\n\n.px-2 {\n padding-left: 8px !important;\n padding-right: 8px !important;\n}\n\n.py-2 {\n padding-top: 8px !important;\n padding-bottom: 8px !important;\n}\n\n/* gap */\n.g-2 {\n gap: 8px !important;\n}\n\n/* margin */\n.m-3 {\n margin: 12px !important;\n}\n\n.mt-3 {\n margin-top: 12px !important;\n}\n\n.mr-3 {\n margin-right: 12px !important;\n}\n\n.mb-3 {\n margin-bottom: 12px !important;\n}\n\n.ml-3 {\n margin-left: 12px !important;\n}\n\n.mx-3 {\n margin-left: 12px !important;\n margin-right: 12px !important;\n}\n\n.my-3 {\n margin-top: 12px !important;\n margin-bottom: 12px !important;\n}\n\n/* padding */\n.p-3 {\n padding: 12px !important;\n}\n\n.pt-3 {\n padding-top: 12px !important;\n}\n\n.pr-3 {\n padding-right: 12px !important;\n}\n\n.pb-3 {\n padding-bottom: 12px !important;\n}\n\n.pl-3 {\n padding-left: 12px !important;\n}\n\n.px-3 {\n padding-left: 12px !important;\n padding-right: 12px !important;\n}\n\n.py-3 {\n padding-top: 12px !important;\n padding-bottom: 12px !important;\n}\n\n/* gap */\n.g-3 {\n gap: 12px !important;\n}\n\n/* margin */\n.m-4 {\n margin: 15px !important;\n}\n\n.mt-4 {\n margin-top: 15px !important;\n}\n\n.mr-4 {\n margin-right: 15px !important;\n}\n\n.mb-4 {\n margin-bottom: 15px !important;\n}\n\n.ml-4 {\n margin-left: 15px !important;\n}\n\n.mx-4 {\n margin-left: 15px !important;\n margin-right: 15px !important;\n}\n\n.my-4 {\n margin-top: 15px !important;\n margin-bottom: 15px !important;\n}\n\n/* padding */\n.p-4 {\n padding: 15px !important;\n}\n\n.pt-4 {\n padding-top: 15px !important;\n}\n\n.pr-4 {\n padding-right: 15px !important;\n}\n\n.pb-4 {\n padding-bottom: 15px !important;\n}\n\n.pl-4 {\n padding-left: 15px !important;\n}\n\n.px-4 {\n padding-left: 15px !important;\n padding-right: 15px !important;\n}\n\n.py-4 {\n padding-top: 15px !important;\n padding-bottom: 15px !important;\n}\n\n/* gap */\n.g-4 {\n gap: 15px !important;\n}\n\n/* margin */\n.m-5 {\n margin: 18px !important;\n}\n\n.mt-5 {\n margin-top: 18px !important;\n}\n\n.mr-5 {\n margin-right: 18px !important;\n}\n\n.mb-5 {\n margin-bottom: 18px !important;\n}\n\n.ml-5 {\n margin-left: 18px !important;\n}\n\n.mx-5 {\n margin-left: 18px !important;\n margin-right: 18px !important;\n}\n\n.my-5 {\n margin-top: 18px !important;\n margin-bottom: 18px !important;\n}\n\n/* padding */\n.p-5 {\n padding: 18px !important;\n}\n\n.pt-5 {\n padding-top: 18px !important;\n}\n\n.pr-5 {\n padding-right: 18px !important;\n}\n\n.pb-5 {\n padding-bottom: 18px !important;\n}\n\n.pl-5 {\n padding-left: 18px !important;\n}\n\n.px-5 {\n padding-left: 18px !important;\n padding-right: 18px !important;\n}\n\n.py-5 {\n padding-top: 18px !important;\n padding-bottom: 18px !important;\n}\n\n/* gap */\n.g-5 {\n gap: 18px !important;\n}\n\n/* margin */\n.m-6 {\n margin: 22px !important;\n}\n\n.mt-6 {\n margin-top: 22px !important;\n}\n\n.mr-6 {\n margin-right: 22px !important;\n}\n\n.mb-6 {\n margin-bottom: 22px !important;\n}\n\n.ml-6 {\n margin-left: 22px !important;\n}\n\n.mx-6 {\n margin-left: 22px !important;\n margin-right: 22px !important;\n}\n\n.my-6 {\n margin-top: 22px !important;\n margin-bottom: 22px !important;\n}\n\n/* padding */\n.p-6 {\n padding: 22px !important;\n}\n\n.pt-6 {\n padding-top: 22px !important;\n}\n\n.pr-6 {\n padding-right: 22px !important;\n}\n\n.pb-6 {\n padding-bottom: 22px !important;\n}\n\n.pl-6 {\n padding-left: 22px !important;\n}\n\n.px-6 {\n padding-left: 22px !important;\n padding-right: 22px !important;\n}\n\n.py-6 {\n padding-top: 22px !important;\n padding-bottom: 22px !important;\n}\n\n/* gap */\n.g-6 {\n gap: 22px !important;\n}\n\n/* margin */\n.m-7 {\n margin: 26px !important;\n}\n\n.mt-7 {\n margin-top: 26px !important;\n}\n\n.mr-7 {\n margin-right: 26px !important;\n}\n\n.mb-7 {\n margin-bottom: 26px !important;\n}\n\n.ml-7 {\n margin-left: 26px !important;\n}\n\n.mx-7 {\n margin-left: 26px !important;\n margin-right: 26px !important;\n}\n\n.my-7 {\n margin-top: 26px !important;\n margin-bottom: 26px !important;\n}\n\n/* padding */\n.p-7 {\n padding: 26px !important;\n}\n\n.pt-7 {\n padding-top: 26px !important;\n}\n\n.pr-7 {\n padding-right: 26px !important;\n}\n\n.pb-7 {\n padding-bottom: 26px !important;\n}\n\n.pl-7 {\n padding-left: 26px !important;\n}\n\n.px-7 {\n padding-left: 26px !important;\n padding-right: 26px !important;\n}\n\n.py-7 {\n padding-top: 26px !important;\n padding-bottom: 26px !important;\n}\n\n/* gap */\n.g-7 {\n gap: 26px !important;\n}\n\n/* margin */\n.m-8 {\n margin: 34px !important;\n}\n\n.mt-8 {\n margin-top: 34px !important;\n}\n\n.mr-8 {\n margin-right: 34px !important;\n}\n\n.mb-8 {\n margin-bottom: 34px !important;\n}\n\n.ml-8 {\n margin-left: 34px !important;\n}\n\n.mx-8 {\n margin-left: 34px !important;\n margin-right: 34px !important;\n}\n\n.my-8 {\n margin-top: 34px !important;\n margin-bottom: 34px !important;\n}\n\n/* padding */\n.p-8 {\n padding: 34px !important;\n}\n\n.pt-8 {\n padding-top: 34px !important;\n}\n\n.pr-8 {\n padding-right: 34px !important;\n}\n\n.pb-8 {\n padding-bottom: 34px !important;\n}\n\n.pl-8 {\n padding-left: 34px !important;\n}\n\n.px-8 {\n padding-left: 34px !important;\n padding-right: 34px !important;\n}\n\n.py-8 {\n padding-top: 34px !important;\n padding-bottom: 34px !important;\n}\n\n/* gap */\n.g-8 {\n gap: 34px !important;\n}\n\n/* margin */\n.m-9 {\n margin: 42px !important;\n}\n\n.mt-9 {\n margin-top: 42px !important;\n}\n\n.mr-9 {\n margin-right: 42px !important;\n}\n\n.mb-9 {\n margin-bottom: 42px !important;\n}\n\n.ml-9 {\n margin-left: 42px !important;\n}\n\n.mx-9 {\n margin-left: 42px !important;\n margin-right: 42px !important;\n}\n\n.my-9 {\n margin-top: 42px !important;\n margin-bottom: 42px !important;\n}\n\n/* padding */\n.p-9 {\n padding: 42px !important;\n}\n\n.pt-9 {\n padding-top: 42px !important;\n}\n\n.pr-9 {\n padding-right: 42px !important;\n}\n\n.pb-9 {\n padding-bottom: 42px !important;\n}\n\n.pl-9 {\n padding-left: 42px !important;\n}\n\n.px-9 {\n padding-left: 42px !important;\n padding-right: 42px !important;\n}\n\n.py-9 {\n padding-top: 42px !important;\n padding-bottom: 42px !important;\n}\n\n/* gap */\n.g-9 {\n gap: 42px !important;\n}\n\n/* margin */\n.m-10 {\n margin: 48px !important;\n}\n\n.mt-10 {\n margin-top: 48px !important;\n}\n\n.mr-10 {\n margin-right: 48px !important;\n}\n\n.mb-10 {\n margin-bottom: 48px !important;\n}\n\n.ml-10 {\n margin-left: 48px !important;\n}\n\n.mx-10 {\n margin-left: 48px !important;\n margin-right: 48px !important;\n}\n\n.my-10 {\n margin-top: 48px !important;\n margin-bottom: 48px !important;\n}\n\n/* padding */\n.p-10 {\n padding: 48px !important;\n}\n\n.pt-10 {\n padding-top: 48px !important;\n}\n\n.pr-10 {\n padding-right: 48px !important;\n}\n\n.pb-10 {\n padding-bottom: 48px !important;\n}\n\n.pl-10 {\n padding-left: 48px !important;\n}\n\n.px-10 {\n padding-left: 48px !important;\n padding-right: 48px !important;\n}\n\n.py-10 {\n padding-top: 48px !important;\n padding-bottom: 48px !important;\n}\n\n/* gap */\n.g-10 {\n gap: 48px !important;\n}\n\n.row {\n display: flex;\n flex-direction: row;\n}\n\n.f-grid {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.w-100 {\n width: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n*::-webkit-scrollbar {\n width: 10px;\n}\n\n*::-webkit-scrollbar-track {\n width: 10px;\n background: #0A0A0D;\n cursor: pointer;\n}\n\n*::-webkit-scrollbar-thumb {\n width: 10px;\n background: #4A4A57;\n cursor: default;\n}\n\n*::-webkit-scrollbar-corner {\n background: transparent;\n height: 1px;\n}\n\n*::-webkit-scrollbar-button {\n display: none;\n}\n\n* {\n padding: 0;\n margin: 0;\n}\n\nhtml, body {\n font-family: \"IBM Plex Mono\", monospace;\n font-weight: 400;\n}\n\nbody {\n background-color: #0A0A0D;\n color: #F8F8F8;\n font-size: 15px;\n line-height: 1.45;\n letter-spacing: 0.01em;\n}\n\n.screen {\n display: none;\n}\n.screen.a-show {\n display: block;\n}\n\n.sidebar {\n width: 400px;\n}\n\n.devices-container,\n.scopes-container {\n width: 100%;\n}\n\n.hud {\n width: 100%;\n padding: 18px;\n}\n.hud > .row {\n justify-content: space-between;\n align-items: center;\n gap: 15px;\n flex-wrap: wrap;\n}\n.hud .hud-btns {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 15px;\n}\n.hud .nav-toggle,\n.hud .reload-screen {\n font-size: 42px;\n width: 50px;\n height: 50px;\n background: #F8F8F8;\n color: #0A0A0D;\n}\n.hud .nav-toggle {\n position: relative;\n z-index: 710;\n}\n.hud .nav-toggle.state-off .icon-state-on {\n display: none;\n}\n.hud .nav-toggle.state-on .icon-state-off {\n display: none;\n}\n.hud .app-title {\n padding: 8px 15px;\n text-transform: uppercase;\n}\n.hud .navigation {\n position: fixed;\n z-index: 700;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: #0A0A0D;\n opacity: 0;\n visibility: hidden;\n transition-duration: 0.2s;\n transition-property: visibility, opacity;\n}\n.hud .navigation .container {\n width: 100%;\n max-width: 600px;\n height: 100vh;\n margin: auto;\n padding: 12px;\n display: flex;\n align-items: center;\n}\n.hud .navigation .nav-items {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 48px;\n align-items: center;\n justify-content: space-between;\n height: max-content;\n margin-top: 100px;\n transition-duration: 0.2s;\n transition-property: margin-top;\n}\n.hud .navigation .nav-link {\n text-decoration: none;\n color: #F8F8F8;\n}\n.hud .navigation .nav-item {\n width: 160px;\n border: 2px solid #F8F8F8;\n padding: 22px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n transition-property: color, background, border-color;\n transition-duration: 0.2s;\n}\n.hud .navigation .nav-item .nav-icon {\n text-align: center;\n}\n.hud .navigation .nav-item .nav-icon .ph, .hud .navigation .nav-item .nav-icon .ph-bold {\n font-size: 64px;\n}\n.hud .navigation .nav-item .nav-text {\n width: 100%;\n text-align: center;\n text-transform: uppercase;\n font-size: 17px;\n}\n.hud .navigation .nav-item:hover {\n background: #00FFAA;\n border-color: #00FFAA;\n color: #0A0A0D;\n}\n.hud .navigation.a-show {\n visibility: visible;\n opacity: 1;\n}\n.hud .navigation.a-show .nav-items {\n margin-top: 0;\n}\n.hud .navigation.a-hide .nav-items {\n margin-top: -100px;\n}\n\n.load-screen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n opacity: 0;\n background: #0A0A0D;\n transition-duration: 0.2s;\n transition-property: opacity, visibility;\n}\n.load-screen.a-show {\n visibility: visible;\n opacity: 1;\n z-index: 900;\n transition-duration: 0s;\n}\n\n.error-screen {\n display: none;\n}\n.error-screen .container {\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n flex-wrap: nowrap;\n gap: 15px;\n padding-top: 20%;\n max-width: 420px;\n width: 100%;\n margin: auto;\n}\n.error-screen .icon-container {\n color: #FF3C00;\n}\n.error-screen .icon-container .ph, .error-screen .icon-container .ph-bold {\n font-size: 72px;\n}\n.error-screen .error-title {\n padding: 8px 12px;\n}\n.error-screen .error-text {\n font-size: 16px;\n text-align: center;\n}\n.error-screen.a-show {\n display: block;\n}","/* =========================\n\t FONT FAMILIES\n========================= */\n\n$font-family-base: \"IBM Plex Mono\", monospace;\n$font-family-code: $font-family-base;\n\n/* =========================\n\t FONT WEIGHTS\n========================= */\n\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n/* =========================\n\t FONT SIZES (scale)\n========================= */\n\n$font-size-xs: 12px;\n$font-size-sm: 13px;\n$font-size-md: 14px;\n$font-size-base: 16px;\n$font-size-lg: 17px;\n$font-size-xl: 20px;\n\n$font-size-h1: 36px;\n$font-size-h2: 28px;\n$font-size-h3: 24px;\n$font-size-h4: 20px;\n$font-size-h5: 18px;\n$font-size-h6: 16px;\n\n/* =========================\n\t LINE HEIGHTS\n========================= */\n\n$line-height-base: 1;\n$line-height-tight: 1.15;\n$line-height-snug: 1.25;\n$line-height-normal: 1.4;\n$line-height-relaxed: 1.6;\n\n/* =========================\n\t LETTER SPACING\n========================= */\n\n$letter-spacing-tight: -0.01em;\n$letter-spacing-normal: 0;\n$letter-spacing-wide: 0.04em;\n\n/* =========================\n\t BASE TYPOGRAPHY\n========================= */\n\nhtml {\n\tfont-size: 100%;\n}\n\nbody {\n\tfont-family: $font-family-base;\n\tfont-size: $font-size-base;\n\tfont-weight: $font-weight-regular;\n\tline-height: $line-height-relaxed;\n\tletter-spacing: $letter-spacing-normal;\n}\n\n/* =========================\n\t HEADINGS\n========================= */\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tfont-family: $font-family-base;\n\tfont-weight: $font-weight-semibold;\n\tline-height: $line-height-snug;\n\tmargin: 0;\n\n\t&.contrast {\n\t\tbackground: $color-text-light;\n\t\tcolor: $color-black;\n\t}\n}\n\nh1 {\n\tfont-size: $font-size-h1;\n\tletter-spacing: $letter-spacing-tight;\n}\n\nh2 {\n\tfont-size: $font-size-h2;\n}\n\nh3 {\n\tfont-size: $font-size-h3;\n}\n\nh4 {\n\tfont-size: $font-size-h4;\n}\n\nh5 {\n\tfont-size: $font-size-h5;\n}\n\nh6 {\n\tfont-size: $font-size-h6;\n\tfont-weight: $font-weight-medium;\n}\n\n/* =========================\n\t TEXT VARIANTS\n========================= */\n\n.text,\np {\n\tfont-size: $font-size-base;\n\tline-height: $line-height-relaxed;\n}\n\n.text-sm {\n\tfont-size: $font-size-sm;\n\tline-height: $line-height-normal;\n}\n\n.text-lg {\n\tfont-size: $font-size-lg;\n\tline-height: $line-height-relaxed;\n}\n\n.text-muted {\n\tfont-size: $font-size-sm;\n\tcolor: $color-text-dark;\n}\n\n.text-strong,\nstrong {\n\tfont-weight: $font-weight-semibold;\n}\n\n.text-bold {\n\tfont-weight: $font-weight-bold;\n}\n\n.text-italic,\nem {\n\tfont-style: italic;\n}\n\n/* =========================\n\t CODE / MONO\n========================= */\n\ncode,\npre,\n.code {\n\tfont-family: $font-family-code;\n\tfont-size: $font-size-base;\n\tline-height: $line-height-normal;\n\tbackground-color: $color-dark;\n}\n\npre {\n\tfont-size: $font-size-base;\n\tline-height: $line-height-relaxed;\n\twhite-space: pre-wrap;\n}\n\n/* =========================\n\t LINKS\n========================= */\n\na {\n\tfont-weight: $font-weight-medium;\n\ttext-decoration: none;\n}\n\n.link {\n\tfont-size: inherit;\n\tfont-weight: $font-weight-medium;\n}\n\n/* =========================\n\t LABELS / META\n========================= */\n\n.label {\n\tfont-size: $font-size-sm;\n\tfont-weight: $font-weight-medium;\n\tline-height: $line-height-normal;\n}\n\n.hint,\n.meta {\n\tfont-size: $font-size-xs;\n\tline-height: $line-height-normal;\n}\n\n/* =========================\n\t TABLE TEXT\n========================= */\n\n.table {\n\tfont-size: $font-size-sm;\n\tline-height: $line-height-normal;\n\n\tth {\n\t\tfont-weight: $font-weight-semibold;\n\t}\n\n\ttd {\n\t\tfont-weight: $font-weight-regular;\n\t}\n}\n\n/* =========================\n\t LISTS\n========================= */\n\n.list {\n\tfont-size: $font-size-base;\n\tline-height: $line-height-relaxed;\n}\n\n.list-item {\n\tfont-size: inherit;\n}\n\n/* =========================\n\t MODALS\n========================= */\n\n.modal-title {\n\tfont-size: $font-size-h4;\n\tfont-weight: $font-weight-semibold;\n}\n\n.modal-body {\n\tfont-size: $font-size-base;\n}\n\n/* =========================\n\t TOASTS\n========================= */\n\n.toast-title {\n\tfont-size: $font-size-md;\n\tfont-weight: $font-weight-semibold;\n}\n\n.toast-text {\n\tfont-size: $font-size-sm;\n\tline-height: $line-height-normal;\n}\n",".palette {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\n\t.color {\n\t\t.color-box {\n\t\t\twidth: 100px;\n\t\t\theight: 80px;\n\t\t}\n\t}\n}\n\n/* BACKGROUND COLORS */\n\nbody {\n\t.bg-primary {\n\t\tbackground: $color-primary;\n\t}\n\n\t.bg-secondary {\n\t\tbackground: $color-secondary;\n\t}\n\n\t.bg-success {\n\t\tbackground: $color-success;\n\t}\n\n\t.bg-accent {\n\t\tbackground: $color-accent;\n\t}\n\n\t.bg-info {\n\t\tbackground: $color-info;\n\t}\n\n\t.bg-warning {\n\t\tbackground: $color-warning;\n\t}\n\n\t.bg-error {\n\t\tbackground: $color-error;\n\t}\n\n\t/* TEXT COLORS */\n\n\t.text-color-primary {\n\t\tcolor: $color-primary;\n\t}\n\n\t.text-color-secondary {\n\t\tcolor: $color-secondary;\n\t}\n\n\t.text-color-success {\n\t\tcolor: $color-success;\n\t}\n\n\t.text-color-accent {\n\t\tcolor: $color-accent;\n\t}\n\n\t.text-color-info {\n\t\tcolor: $color-info;\n\t}\n\n\t.text-color-warning {\n\t\tcolor: $color-warning;\n\t}\n\n\t.text-color-error {\n\t\tcolor: $color-error;\n\t}\n}","/* HTML: <div class=\"loader\"></div> */\n.loader {\n width: 45px;\n aspect-ratio: 1;\n --c:no-repeat linear-gradient(#FF3C00 0 0);\n background: \n var(--c) 0 0,\n var(--c) 0 100%, \n var(--c) 50% 0, \n var(--c) 50% 100%, \n var(--c) 100% 0, \n var(--c) 100% 100%;\n animation: l12 1s infinite;\n}\n@keyframes l12 {\n 0%,100%{background-size:20% 50%}\n 16.67% {background-size:20% 30%, 20% 30%, 20% 50%, 20% 50%, 20% 50%, 20% 50%}\n 33.33% {background-size:20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 50%, 20% 50%}\n 50% {background-size:20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%}\n 66.67% {background-size:20% 50%, 20% 50%, 20% 30%, 20% 30%, 20% 30%, 20% 30%}\n 83.33% {background-size:20% 50%, 20% 50%, 20% 50%, 20% 50%, 20% 30%, 20% 30%}\n}","@keyframes icon_spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.btn {\n\tfont-family: $font-family-base;\n\tfont-size: $font-size-lg;\n\tfont-weight: $font-weight-semibold;\n\tline-height: $line-height-base;\n\tletter-spacing: $letter-spacing-wide;\n\tpadding: $space-3 $space-lg;\n\tborder-radius: 0;\n\tborder-width: 2px;\n\tborder-left-width: 6px;\n\tborder-style: solid;\n\tborder-color: $color-primary;\n\ttext-transform: uppercase;\n\tbackground-color: transparent;\n\ttransition-duration: .2s;\n\ttransition-property: background-color, border-color, color;\n\n\t&.with-icon {\n\t\tborder-left-width: 48px;\n\t\tposition: relative;\n\n\t\t.ph,\n\t\t.ph-bold {\n\t\t\tposition: absolute;\n\t\t\tcolor: #0a0a0d;\n\t\t\tleft: -48px;\n\t\t\ttop: 0;\n\t\t\tfont-size: 28px;\n\t\t\theight: 100%;\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\twidth: 48px;\n\t\t\tjustify-content: center;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: color, left;\n\t\t}\n\t}\n\n\t&:hover {\n\t\t&.with-icon:not(.loading-state) {\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tleft: -28px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-primary {\n\t\tcolor: $color-primary;\n\t\tborder-color: $color-primary;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-primary;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-secondary {\n\t\tcolor: $color-secondary;\n\t\tborder-color: $color-secondary;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-secondary;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-accent {\n\t\tcolor: $color-accent;\n\t\tborder-color: $color-accent;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-accent;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-danger {\n\t\tcolor: $color-error;\n\t\tborder-color: $color-error;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-error;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-warning {\n\t\tcolor: $color-warning;\n\t\tborder-color: $color-warning;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-warning;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-success {\n\t\tcolor: $color-success;\n\t\tborder-color: $color-success;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-success;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn-info {\n\t\tcolor: $color-info;\n\t\tborder-color: $color-info;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-info;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&[disabled]:not(.loading-state) {\n\t\tcolor: $color-text-dark;\n\t\tborder-color: $color-dark;\n\t\tbackground-color: $color-dark;\n\n\t\t&.with-icon {\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tcolor: $color-text-dark;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-dark;\n\t\t\tcolor: $color-text-dark;\n\n\t\t\t&.with-icon {\n\t\t\t\t.ph,\n\t\t\t\t.ph-bold {\n\t\t\t\t\tcolor: $color-text-dark;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.with-icon {\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tleft: -28px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-small {\n\t\tfont-size: $font-size-md;\n\t\tfont-weight: $font-weight-medium;\n\t\tpadding: $space-sm $space-sm;\n\n\t\t&.with-icon {\n\t\t\tborder-left-width: 32px;\n\n\t\t\t.ph,\n\t\t\t.ph-bold {\n\t\t\t\tleft: -40px;\n\t\t\t\tfont-size: 23px;\n\t\t\t}\n\n\t\t\t&.loading-state {\n\t\t\t\t.ph, .ph-bold {\n\t\t\t\t\tfont-size: 30px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn-large {\n\t\tfont-size: $font-size-xl;\n\t\tfont-weight: $font-weight-bold;\n\t\tpadding: $space-md $space-xxl;\n\t}\n\n\t&.loading-state {\n\t\tcolor: $color-black !important;\n\t\tborder-color: $color-primary !important;\n\t\tbackground-color: $color-primary !important;\n\n\t\t.ph, .ph-bold {\n\t\t\tfont-size: 31px;\n\t\t\ttransform-origin: 50% 50%;\n \t\tanimation: icon_spin 1.2s linear infinite;\n\t\t}\n\t}\n}\n\n.btn-icon {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\twidth: 30px;\n\theight: 30px;\n\n\tbackground: transparent;\n\tcolor: $color-text-light;\n\tfont-size: $font-size-xl;\n\tborder: 0;\n\n\ttransition-duration: .2s;\n\ttransition-property: color;\n\n\t\n\t.ph {\n\t\ttransform: rotate(0);\n\t\ttransition-duration: .2s;\n\t\ttransition-property: transform;\n\t}\n\n\t&:hover {\n\t\tcolor: $color-text-dark;\n\n\t\t.ph {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\t}\n}\n",".form-group {\n\t.label {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tfont-size: $font-size-lg;\n\t\twidth: 100%;\n\t\tmax-width: 600px;\n\t\tposition: relative;\n\n\t\t& > .ph {\n\t\t\tposition: absolute;\n\t\t\tcolor: $color-text-light;\n\t\t\tleft: 0;\n\t\t\tbottom: 2px;\n\t\t\tfont-size: 28px;\n\t\t\theight: 56px;\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\twidth: 48px;\n\t\t\tjustify-content: center;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: color, left;\n\t\t}\n\n\t\t.input {\n\t\t\tfont-family: $font-family-base;\n\t\t\tfont-size: $font-size-base;\n\t\t\tfont-weight: $font-weight-medium;\n\t\t\tline-height: $line-height-base;\n\t\t\tletter-spacing: $letter-spacing-wide;\n\t\t\tpadding: $space-3 $space-lg;\n\t\t\tmargin-top: $space-sm;\n\t\t\tborder-radius: 0;\n\t\t\tborder-width: 2px;\n\t\t\tborder-bottom-width: 6px;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: $color-text-light;\n\t\t\tcolor: $color-text-light;\n\t\t\tbackground-color: transparent;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: background-color, border-color, color;\n\n\t\t\t&:hover {\n\t\t\t\tborder-bottom-color: $color-text-dark;\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\toutline: none;\n\t\t\t\tborder-color: $color-electric-blue;\n\t\t\t}\n\n\t\t\t&::placeholder {\n\t\t\t\tcolor: $color-text-dark;\n\t\t\t}\n\t\t}\n\n\t\ttextarea.input {\n\t\t\theight: 120px;\n\t\t\tline-height: $line-height-snug;\n\t\t\tresize: none;\n\t\t}\n\n\t\t.ph + .input,\n\t\t.ph + .select-wrap .select {\n\t\t\tpadding-left: 42px;\n\t\t}\n\n\t\t.select-wrap {\n\t\t\tmargin-top: $space-sm;\n\t\t}\n\n\t\t.select {\n\t\t\twidth: 100%;\n\t\t\theight: 56px;\n\t\t\tmargin-top: 0;\n\n\t\t\t/* убрать нативную стрелку */\n\t\t\tappearance: none;\n\t\t\t-webkit-appearance: none;\n\t\t\t-moz-appearance: none;\n\n\t\t\t&:focus {\n\t\t\t\toutline: none;\n\t\t\t}\n\n\t\t\toption {\n\t\t\t\tcolor: $color-text-light;\n\t\t\t\tbackground: $color-dark;\n\t\t\t}\n\t\t}\n\n\t\t.select-wrap::after {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\tright: $space-lg;\n\t\t\tbottom: 18px;\n\t\t\ttransform: translateY(-50%);\n\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-left: 8px solid transparent;\n\t\t\tborder-right: 8px solid transparent;\n\t\t\tborder-top: 10px solid $color-text-light;\n\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t&.error {\n\t\t\t.input:not(:focus) {\n\t\t\t\tborder-color: $color-error;\n\t\t\t}\n\n\t\t\t& + .input-info {\n\t\t\t\tcolor: $color-warning;\n\t\t\t}\n\t\t}\n\t}\n\n\t.input-info {\n\t\tfont-size: $font-size-md;\n\t\tmargin-top: $space-2;\n\n\t\t.ph {\n\t\t\tposition: relative;\n\t\t\ttop: 1px;\n\t\t}\n\t}\n}\n\n.radio {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\talign-items: center;\n\n\tinput[type=\"radio\"] {\n\t\tdisplay: none;\n\t}\n\n\t.radio-control {\n\t\tdisplay: inline-block;\n\t\tborder-radius: 100%;\n\t\tborder: 2px solid $color-primary;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tbackground: transparent;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: background, border-color;\n\t}\n\n\t&:hover .radio-control {\n\t\tbackground: $color-grey;\n\t}\n\n\tinput[type=\"radio\"]:checked + .radio-control {\n\t\tbackground: $color-primary;\n\t}\n\n\tinput[type=\"radio\"]:disabled + .radio-control {\n\t\tbackground: $color-grey;\n\t\tborder-color: $color-grey;\n\t}\n\n\t.radio-label {\n\t\tfont-size: $font-size-lg;\n\t}\n}\n\n.checkbox {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\talign-items: center;\n\n\tinput[type=\"checkbox\"] {\n\t\tdisplay: none;\n\t}\n\n\t.checkbox-control {\n\t\theight: 16px;\n\t\twidth: 30px;\n\t\tborder: 2px solid $color-primary;\n\t\tposition: relative;\n\t\tbackground: transparent;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: border-color, background;\n\t\tdisplay: block;\n\t}\n\n\t.checkbox-control:before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tbackground: $color-primary;\n\t\tposition: absolute;\n\t\tleft: -6px;\n\t\ttop: -4px;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: left, background;\n\t}\n\n\t&:hover .checkbox-control {\n\t\tbackground: $color-grey;\n\t}\n\n\tinput[type=\"checkbox\"]:checked:not(:disabled) + .checkbox-control {\n\t\tbackground: $color-secondary;\n\t\tborder-color: $color-secondary;\n\t}\n\n\tinput[type=\"checkbox\"]:checked + .checkbox-control:before {\n\t\tleft: 12px;\n\t}\n\n\tinput[type=\"checkbox\"]:disabled + .checkbox-control {\n\t\tborder-color: $color-grey;\n\t}\n\n\tinput[type=\"checkbox\"]:disabled + .checkbox-control:before {\n\t\tbackground: $color-grey;\n\t}\n}\n",".list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: $space-1;\n\tlist-style-type: none;\n\tpadding-left: 0;\n\n\t.list-item {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: $space-sm;\n\t\tmargin-left: 0;\n\t}\n\n\t&.list-ordered {\n\t\tlist-style-type: decimal;\n\t\tdisplay: list-item;\n\t\tmargin-left: 30px;\n\n\t\t.list-item {\n\t\t\tdisplay: list-item;\n\t\t}\n\t}\n\n\t&.list-definition {\n\t\tgap: $space-md;\n\n\t\t.list-row {\n\t\t\tborder-left: 2px solid $color-primary;\n\n\t\t\t.list-term::before,\n\t\t\t.list-desc::before {\n\t\t\t\tcontent: \"\";\n\t\t\t\theight: 2px;\n\t\t\t\twidth: $space-3;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 0;\n\t\t\t\tmargin-top: -1px;\n\t\t\t\tdisplay: block;\n\t\t\t\tbackground: $color-primary;\n\t\t\t}\n\n\t\t\t.list-term,\n\t\t\t.list-desc {\n\t\t\t\tposition: relative;\n\t\t\t}\n\n\t\t\t.list-term {\n\t\t\t\tpadding-left: $space-5;\n\t\t\t\tfont-size: $font-size-xl;\n\t\t\t}\n\n\t\t\t.list-desc {\n\t\t\t\tpadding-left: $space-5;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.with-icons {\n\t\t.ph {\n\t\t\t// icon styles if needed\n\t\t}\n\t}\n\n\t&.list-nav {\n\t\tmax-width: 420px;\n\t\twidth: 100%;\n\t\tgap: 0;\n\n\t\t.list-item {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: flex-start;\n\t\t\theight: 50px;\n\t\t\tmargin: 0;\n\n\t\t\t.list-action {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: center;\n\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: $space-2 $space-3;\n\t\t\t\tborder: 0;\n\n\t\t\t\tfont-size: $font-size-lg;\n\t\t\t\tbackground: $color-dark;\n\t\t\t\tcolor: inherit;\n\n\t\t\t\ttransition-duration: .2s;\n\t\t\t\ttransition-property: background;\n\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground: $color-electric-blue;\n\t\t\t\t}\n\n\t\t\t\t.list-label {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\tgap: $space-2;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tletter-spacing: -0.05em;\n\t\t\t\t\tfont-weight: 400;\n\t\t\t\t}\n\n\t\t\t\t.list-meta {\n\t\t\t\t\tpadding: $space-2;\n\t\t\t\t\tbackground: $color-neon-green;\n\t\t\t\t\tcolor: $color-black;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.list-item-active {\n\t\t\t\t.list-action {\n\t\t\t\t\tbackground: $color-electric-blue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.list-actions {\n\t\twidth: 100%;\n\t\tmax-width: 420px;\n\t\tgap: $space-lg;\n\n\t\t.list-item {\n\t\t\tjustify-content: space-between;\n\t\t\talign-items: flex-start;\n\n\t\t\t.list-content {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: $space-2;\n\n\t\t\t\t.list-title {\n\t\t\t\t\tfont-size: $font-size-xl;\n\t\t\t\t\tline-height: $line-height-base;\n\t\t\t\t}\n\n\t\t\t\t.list-subtitle {\n\t\t\t\t\t// subtitle styles\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.list-controls {\n\t\t\t\t// controls styles\n\t\t\t}\n\t\t}\n\t}\n}\n",".badge {\n\tbackground: $color-primary;\n\tcolor: $color-dark;\n\tpadding: $space-1 $space-2;\n\tfont-size: $font-size-base;\n\n\t&.badge-success {\n\t\tbackground: $color-success;\n\t}\n\n\t&.badge-warning {\n\t\tbackground: $color-warning;\n\t}\n\n\t&.badge-error,\n\t&.badge-danger {\n\t\tbackground: $color-error;\n\t}\n\n\t&.badge-info {\n\t\tbackground: $color-info;\n\t\tcolor: $color-text-light;\n\t}\n\n\t&.badge-secondary {\n\t\tbackground: $color-secondary;\n\t\tcolor: $color-text-light;\n\t}\n}\n",".table {\n\ttext-align: left;\n\tborder: 2px solid $color-primary;\n\tpadding: $space-4;\n\n\t.table-caption {\n\t\ttext-align: left;\n\t\tfont-size: $font-size-xl;\n\t\tbackground: $color-primary;\n\t\twidth: max-content;\n\t\tcolor: $color-dark;\n\t\tpadding: $space-1 $space-3;\n\t\tmargin-bottom: 0;\n\t}\n\n\t.table-row {\n\t\tth,\n\t\ttd {\n\t\t\tpadding: $space-3 $space-5;\n\t\t\tfont-size: $font-size-base;\n\t\t}\n\n\t\tth {\n\t\t\t// header cell styles if needed\n\t\t}\n\t}\n\n\t.table-head {\n\t\t// thead styles\n\t}\n\n\t.table-body {\n\t\t// tbody styles\n\t}\n\n\t.table-foot {\n\t\tth,\n\t\ttd {\n\t\t\tpadding-top: $space-4;\n\t\t}\n\t}\n}\n",".toast {\n\tposition: fixed;\n\tbottom: -100px;\n\tright: $space-4;\n\tmax-width: 420px;\n\n\tbackground: $color-dark;\n\tborder: 2px solid $color-text-light;\n\tpadding: 0;\n\topacity: 0;\n\n\ttransition-duration: .25s;\n\ttransition-property: opacity, top, bottom;\n\n\t&.a-show {\n\t\tbottom: $space-4;\n\t\topacity: 1;\n\t}\n\n\t&.a-hide {\n\t\tbottom: $space-4 + 100px;\n\t\topacity: 0;\n\t}\n\n\t.toast-content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0;\n\n\t\t.toast-title {\n\t\t\tfont-size: $font-size-h3;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tgap: $space-2;\n\t\t\talign-items: center;\n\t\t\tcolor: $color-black;\n\t\t\tbackground: $color-primary;\n\t\t\tpadding: $space-1 $space-2;\n\t\t\tpadding-right: $space-9;\n\t\t}\n\n\t\t.toast-text {\n\t\t\tfont-size: $font-size-base;\n\t\t\tpadding: $space-6 $space-4;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t.toast-close {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tcolor: $color-black;\n\t\theight: 40px;\n\t\twidth: 40px;\n\n\t\t&:hover {\n\t\t\tcolor: $color-dark;\n\t\t}\n\t}\n\n\t&.toast-info {\n\t\t// default info styles (inherits primary)\n\t}\n\n\t&.toast-success {\n\t\tborder-color: $color-success;\n\n\t\t.toast-title {\n\t\t\tbackground: $color-success;\n\t\t}\n\t}\n\n\t&.toast-warning {\n\t\tborder-color: $color-warning;\n\n\t\t.toast-title {\n\t\t\tbackground: $color-warning;\n\t\t}\n\t}\n\n\t&.toast-danger {\n\t\tborder-color: $color-error;\n\n\t\t.toast-title {\n\t\t\tbackground: $color-error;\n\t\t}\n\t}\n}\n",".card {\n\tmax-width: 420px;\n\twidth: 100%;\n\tborder: 2px solid $color-text-light;\n\n\t.card-title {\n\t\tcolor: $color-black;\n\t\tbackground: $color-text-light;\n\t\tpadding: $space-2 $space-3;\n\t}\n\n\t.card-content {\n\t\tpadding: $space-4;\n\n\t\t.card-thumb {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\tp {\n\t\t\tmargin-top: $space-2;\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t.card-footer {\n\t\tpadding: $space-2 $space-4;\n\t\tpadding-bottom: $space-4;\n\t}\n\n\t&.device-action {\n\t\tmax-width: 220px;\n\n\t\ttransition-duration: .2s;\n\t\ttransition-property: border-color;\n\n\t\t.device-icon-container {\n\t\t\tposition: relative;\n\n\t\t\t.device-online-status {\n\t\t\t\tposition: absolute;\n\t\t top: -15px;\n \t\tleft: -5px;\n\t\t\n\t\t\t\tfont-size: 24px;\n\t\t\t\tcolor: $color-error;\n\n\t\t\t\t&.status-online {\n\t\t\t\t\tcolor: $color-success;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.device-icon {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t\talign-items: center;\n \t\tjustify-content: center;\n\t\t\t\t\n\t\t\t\tfont-size: 54px;\n\t\t\t\theight: 80px;\n\t\t\t\twidth: 100%;\n\n\t\t\t\ttransition-duration: .2s;\n\t\t\t\ttransition-property: color;\n\t\t\t}\n\t\t}\n\n\t\t.card-title {\n\t\t\tdisplay: flex;\n\t\t\twidth: 100%;\n\t\t\tfont-size: $font-size-md;\n\t\t\tfont-weight: $font-weight-bold;\n\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: background-color, color;\n\t\t}\n\n\t\t.device-name {\n\t\t\tfont-size: $font-size-md;\n\t\t\tline-height: $line-height-normal;\n\t\t}\n\n\t\t&.card-success {\n\t\t\tborder-color: $color-success;\n\n\t\t\t.card-title {\n\t\t\t\tbackground: $color-success;\n\t\t\t}\n\n\t\t\t.device-icon {\n\t\t\t\tcolor: $color-success;\n\t\t\t}\n\t\t}\n\n\t\t&.card-warning {\n\t\t\tborder-color: $color-warning;\n\n\t\t\t.card-title {\n\t\t\t\tbackground: $color-warning;\n\t\t\t}\n\n\t\t\t.device-icon {\n\t\t\t\tcolor: $color-warning;\n\t\t\t}\n\t\t}\n\n\t\t&.card-info {\n\t\t\tborder-color: $color-info;\n\n\t\t\t.card-title {\n\t\t\t\tbackground: $color-info;\n\t\t\t\tcolor: $color-text-light;\n\t\t\t}\n\n\t\t\t.device-icon {\n\t\t\t\tcolor: $color-info;\n\t\t\t}\n\t\t}\n\n\t\t&.card-secondary {\n\t\t\tborder-color: $color-secondary;\n\n\t\t\t.card-title {\n\t\t\t\tbackground: $color-secondary;\n\t\t\t\tcolor: $color-text-light;\n\t\t\t}\n\n\t\t\t.device-icon {\n\t\t\t\tcolor: $color-secondary;\n\t\t\t}\n\t\t}\n\n\t\t&.card-danger, &.card-error {\n\t\t\tborder-color: $color-error;\n\n\t\t\t.card-title {\n\t\t\t\tbackground: $color-error;\n\t\t\t}\n\n\t\t\t.device-icon {\n\t\t\t\tcolor: $color-error;\n\t\t\t}\n\t\t}\n\t}\n}\n",".modal {\n\tposition: fixed;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tz-index: 1000;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\n\t.modal-backdrop {\n\t\tposition: fixed;\n\t\tz-index: 1010;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\n\t\tbackground: $color-black;\n\t\topacity: 0;\n\n\t\ttransition-duration: .25s;\n\t\ttransition-property: opacity;\n\t}\n\n\t.modal-panel {\n\t\tposition: relative;\n\t\tz-index: 1020;\n\n\t\twidth: 100%;\n\t\tmax-width: 960px;\n\t\theight: auto;\n\t\tmin-height: 200px;\n\t\tmax-height: 800px;\n\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: $space-4;\n\t\tmargin-top: 200px;\n\n\t\tbackground: $color-black;\n\t\tborder: 2px solid $color-text-light;\n\t\topacity: 0;\n\n\t\ttransition-duration: .25s;\n\t\ttransition-property: opacity, margin-top;\n\n\t\t.modal-header {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: space-between;\n\t\t\talign-items: center;\n\t\t\tpadding-right: $space-4;\n\n\t\t\t.modal-title {\n\t\t\t\tpadding: $space-3 $space-4;\n\t\t\t\tbackground: $color-text-light;\n\t\t\t\tcolor: $color-black;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t}\n\t\t}\n\n\t\t.modal-body {\n\t\t\tmax-height: 700px;\n\t\t\toverflow-y: auto;\n\t\t\tpadding: $space-5;\n\t\t}\n\n\t\t.modal-footer {\n\t\t\tpadding: $space-5;\n\n\t\t\t.actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t\tjustify-content: flex-end;\n\t\t\t\tgap: $space-4;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.a-show {\n\t\t.modal-backdrop {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t.modal-panel {\n\t\t\topacity: 1;\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\n\t&.a-hide {\n\t\t.modal-backdrop {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t.modal-panel {\n\t\t\topacity: 0;\n\t\t\tmargin-top: -200px;\n\t\t}\n\t}\n}\n","$alert-bg-alpha: 0.1;\n\n.alert {\n\tpadding: $space-3 $space-4;\n\tborder-left-style: solid;\n\tborder-left-width: 4px;\n\tcolor: $color-text-light;\n\n\t&.alert-primary {\n\t\tborder-color: $color-primary;\n\t\tbackground: rgba($color-primary, $alert-bg-alpha);\n\t\tcolor: $color-primary;\n\t}\n\n\t&.alert-success {\n\t\tborder-color: $color-success;\n\t\tbackground: rgba($color-success, $alert-bg-alpha);\n\t\tcolor: $color-success;\n\t}\n\n\t&.alert-secondary {\n\t\tborder-color: $color-secondary;\n\t\tbackground: rgba($color-secondary, $alert-bg-alpha);\n\t\tcolor: lighten($color-secondary, 10%);\n\t}\n\n\t&.alert-info {\n\t\tborder-color: $color-info;\n\t\tbackground: rgba($color-info, $alert-bg-alpha);\n\t\tcolor: lighten($color-info, 20%);\n\t}\n\n\t&.alert-warning {\n\t\tborder-color: $color-warning;\n\t\tbackground: rgba($color-warning, $alert-bg-alpha);\n\t\tcolor: $color-warning;\n\t}\n\n\t&.alert-error, &.alert-danger {\n\t\tborder-color: $color-error;\n\t\tbackground: rgba($color-error, $alert-bg-alpha);\n\t\tcolor: lighten($color-error, 15%);\n\t}\n}","/* =========================\n SPACING UTILITIES\n========================= */\n\n@each $key, $value in $spaces {\n\n /* margin */\n .m-#{$key} { margin: $value !important; }\n .mt-#{$key} { margin-top: $value !important; }\n .mr-#{$key} { margin-right: $value !important; }\n .mb-#{$key} { margin-bottom: $value !important; }\n .ml-#{$key} { margin-left: $value !important; }\n .mx-#{$key} {\n margin-left: $value !important;\n margin-right: $value !important;\n }\n .my-#{$key} {\n margin-top: $value !important;\n margin-bottom: $value !important;\n }\n\n /* padding */\n .p-#{$key} { padding: $value !important; }\n .pt-#{$key} { padding-top: $value !important; }\n .pr-#{$key} { padding-right: $value !important; }\n .pb-#{$key} { padding-bottom: $value !important; }\n .pl-#{$key} { padding-left: $value !important; }\n .px-#{$key} {\n padding-left: $value !important;\n padding-right: $value !important;\n }\n .py-#{$key} {\n padding-top: $value !important;\n padding-bottom: $value !important;\n }\n\n /* gap */\n .g-#{$key} {\n gap: $value !important;\n }\n}\n\n.row {\n display: flex;\n flex-direction: row;\n} \n\n.f-grid {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.w-100 {\n width: 100%;\n}","@import \"_spacing.scss\";\n@import \"ui_components/_typography.scss\";\n@import \"ui_components/_palette.scss\";\n@import \"ui_components/_loader.scss\";\n@import \"ui_components/_buttons.scss\";\n@import \"ui_components/_forms.scss\";\n@import \"ui_components/_lists.scss\";\n@import \"ui_components/_badges.scss\";\n@import \"ui_components/_tables.scss\";\n@import \"ui_components/_toasts.scss\";\n@import \"ui_components/_cards.scss\";\n@import \"ui_components/_modals.scss\";\n@import \"ui_components/_alerts.scss\";\n@import \"_utils.scss\";\n\n* {\n\tbox-sizing: border-box;\n}\n\n*::-webkit-scrollbar {\n\twidth: 10px;\n}\n\n*::-webkit-scrollbar-track {\n\twidth: 10px;\n\tbackground: $color-black;\n\tcursor: pointer;\n}\n\n*::-webkit-scrollbar-thumb {\n\twidth: 10px;\n\tbackground: $color-grey;\n\tcursor: default;\n}\n\n*::-webkit-scrollbar-corner {\n\tbackground: transparent;\n\theight: 1px;\n}\n\n*::-webkit-scrollbar-button {\n\tdisplay: none;\n}\n\n*::-webkit-scrollbar-track-piece {}\n*::-webkit-resizer {}","* {\n\tpadding: 0;\n\tmargin: 0;\n}\n\nhtml, body {\n font-family: \"IBM Plex Mono\", monospace;\n font-weight: 400;\n}\n\nbody {\n\tbackground-color: $color-black;\n\tcolor: $color-text-light;\n\n\tfont-size: 15px;\n line-height: 1.45;\n letter-spacing: 0.01em;\n}\n\n.screen {\n\tdisplay: none;\n\n\t&.a-show {\n\t\tdisplay: block;\n\t}\n}\n\n.sidebar {\n\twidth: 400px;\n}\n\n.devices-container,\n.scopes-container {\n\twidth: 100%;\n}\n\n@import \"app/_hud.scss\";\n@import \"app/_load-screen.scss\";\n@import \"app/_error-screen.scss\";",".hud {\n\twidth: 100%;\n\tpadding: $space-5;\n\n\t& > .row {\n\t\tjustify-content: space-between;\n align-items: center;\n gap: $space-4;\n flex-wrap: wrap;\n\t}\n\n\t.hud-btns {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: $space-4;\n\t}\n\n\t.nav-toggle,\n\t.reload-screen {\n\t\tfont-size: 42px;\n\t\twidth: 50px;\n\t\theight: 50px;\n\t\tbackground: $color-text-light;\n\t\tcolor: $color-black;\n\t}\n\n\t.nav-toggle {\n\t\tposition: relative;\n\t\tz-index: 710;\n\n\t\t&.state-off {\n\t\t\t.icon-state-on {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&.state-on {\n\t\t\t.icon-state-off {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t// &:hover {\n\t\t// \tcolor: $color-success;\n\t\t// }\n\t}\n\n\t.app-title {\n\t\tpadding: $space-2 $space-4;\n\t\ttext-transform: uppercase;\n\t}\n\n\t.navigation {\n\t\tposition: fixed;\n\t\tz-index: 700;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\t\n\t\tbackground: $color-black;\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\n\t\ttransition-duration: .2s;\n\t\ttransition-property: visibility, opacity;\n\n\t\t.container {\n\t\t\twidth: 100%;\n\t\t\tmax-width: 600px;\n\t height: 100vh;\n\n\t\t\tmargin: auto;\n\t\t\tpadding: $space-3;\n\n \tdisplay: flex;\n \talign-items: center;\n\t\t}\n\n\t\t.nav-items {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tflex-wrap: wrap;\n\t\t\tgap: $space-10;\n \talign-items: center;\n \tjustify-content: space-between;\n\n \theight: max-content;\n \tmargin-top: 100px;\n\n \ttransition-duration: .2s;\n \ttransition-property: margin-top;\n\t\t}\n\n\t\t.nav-link {\n\t\t\ttext-decoration: none;\n\t\t\tcolor: $color-text-light;\n\t\t}\n\n\t\t.nav-item {\n\t\t\twidth: 160px;\n\t\t\tborder: 2px solid $color-text-light;\n\t\t\tpadding: $space-6;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: $space-3;\n\n\t\t\ttransition-property: color, background, border-color;\n\t\t\ttransition-duration: .2s;\n\n\t\t\t.nav-icon {\n\t\t\t\ttext-align: center;\n\n\t\t\t\t.ph, .ph-bold {\n\t\t\t\t\tfont-size: 64px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.nav-text {\n\t\t\t\twidth: 100%;\n\t\t\t\ttext-align: center;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tfont-size: $font-size-lg;\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tbackground: $color-success;\n\t\t\t\tborder-color: $color-success;\n\t\t\t\tcolor: $color-black;\n\t\t\t}\n\t\t}\n\n\t\t&.a-show {\n\t\t\tvisibility: visible;\n\t\t\topacity: 1;\n\n\t\t\t.nav-items {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t&.a-hide {\n\t\t\t.nav-items {\n\t\t\t\tmargin-top: -100px;\n\t\t\t}\n\t\t}\n\t}\n}",".load-screen {\n\tposition: fixed;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\n\tdisplay: flex;\n\tflex-direction: row;\n align-items: center;\n justify-content: center;\n\n\tvisibility: hidden;\n\topacity: 0;\n\tbackground: $color-black;\n\n\ttransition-duration: .2s;\n\ttransition-property: opacity, visibility;\n\n\t&.a-show {\n\t\tvisibility: visible;\n\t\topacity: 1;\n\t\tz-index: 900;\n\t\ttransition-duration: 0s;\n\t}\n}",".error-screen {\n display: none;\n\n .container {\n\t display: flex;\n\t align-items: center;\n\t flex-direction: column;\n\t justify-content: center;\n\t flex-wrap: nowrap;\n\t gap: $space-4;\n\t padding-top: 20%;\n\t max-width: 420px;\n\t width: 100%;\n\t margin: auto;\n }\n\n .icon-container {\n \tcolor: $color-error;\n\n \t.ph, .ph-bold {\n \t\tfont-size: 72px;\n \t}\n }\n\n .error-title {\n \tpadding: $space-2 $space-3;\n }\n\n .error-text {\n \tfont-size: $font-size-base;\n \ttext-align: center;\n }\n\n\t&.a-show {\n\t\tdisplay: block;\n\t}\n}"]}
