/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./shared/styles/global.scss?ngGlobalStyle ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Rokkitt:ital,wght@0,100..900;1,100..900&display=swap);
/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/@fontsource/inter/latin-400.css?ngGlobalStyle ***!
  \****************************************************************************************************************************************************************************************************************************************************/
/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('inter-latin-400-normal.ef6d3f52c547a6e3.woff2') format('woff2'), url('inter-latin-400-normal.2c7a775c1cfc0bf6.woff') format('woff');
}
/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/@fontsource/inter/latin-600.css?ngGlobalStyle ***!
  \****************************************************************************************************************************************************************************************************************************************************/
/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('inter-latin-600-normal.8fb1a96451cec840.woff2') format('woff2'), url('inter-latin-600-normal.ce0f5f4333584aab.woff') format('woff');
}
/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/@fontsource/inter/latin-700.css?ngGlobalStyle ***!
  \****************************************************************************************************************************************************************************************************************************************************/
/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('inter-latin-700-normal.953b7aa585d36a2b.woff2') format('woff2'), url('inter-latin-700-normal.9c21d4dcc3745e44.woff') format('woff');
}
/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/@fontsource/bebas-neue/latin-400.css?ngGlobalStyle ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
/* bebas-neue-latin-400-normal */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('bebas-neue-latin-400-normal.f4646f71883e1c80.woff2') format('woff2'), url('bebas-neue-latin-400-normal.4ae0824f9a0f39a8.woff') format('woff');
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./shared/styles/global.scss?ngGlobalStyle (1) ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Import Ionic Core and Optional Utilities */
:root {
  --ion-color-primary: #0054e9;
  --ion-color-primary-rgb: 0, 84, 233;
  --ion-color-primary-contrast: #fff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #004acd;
  --ion-color-primary-tint: #1a65eb;
  --ion-color-secondary: #0163aa;
  --ion-color-secondary-rgb: 1, 99, 170;
  --ion-color-secondary-contrast: #fff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #015796;
  --ion-color-secondary-tint: #1a73b3;
  --ion-color-tertiary: #6030ff;
  --ion-color-tertiary-rgb: 96, 48, 255;
  --ion-color-tertiary-contrast: #fff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #542ae0;
  --ion-color-tertiary-tint: #7045ff;
  --ion-color-success: #2dd55b;
  --ion-color-success-rgb: 45, 213, 91;
  --ion-color-success-contrast: #000;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #28bb50;
  --ion-color-success-tint: #42d96b;
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;
  --ion-color-danger: #c5000f;
  --ion-color-danger-rgb: 197, 0, 15;
  --ion-color-danger-contrast: #fff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #ad000d;
  --ion-color-danger-tint: #cb1a27;
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
  --ion-color-medium: #636469;
  --ion-color-medium-rgb: 99, 100, 105;
  --ion-color-medium-contrast: #fff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #57585c;
  --ion-color-medium-tint: #737478;
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #fff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;
}

html.ios {
  --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}

html.md {
  --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
}

html {
  --ion-dynamic-font: -apple-system-body;
  --ion-font-family: var(--ion-default-font);
}

body {
  background: var(--ion-background-color);
  color: var(--ion-text-color);
}

body.backdrop-no-scroll {
  overflow: hidden;
}

html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type, html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type, html.ios ion-modal ion-footer ion-toolbar:first-of-type {
  padding-top: 6px;
}

html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type, html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
  padding-bottom: 6px;
}

html.ios ion-modal ion-toolbar {
  padding-right: calc(var(--ion-safe-area-right) + 8px);
  padding-left: calc(var(--ion-safe-area-left) + 8px);
}

@media screen and (min-width: 768px) {
  html.ios ion-modal.modal-card:first-of-type {
    --backdrop-opacity: 0.18;
  }
}
ion-modal.modal-default.show-modal ~ ion-modal.modal-default {
  --backdrop-opacity: 0;
  --box-shadow: none;
}

html.ios ion-modal.modal-card .ion-page {
  border-top-left-radius: var(--border-radius);
}

.ion-color-primary {
  --ion-color-base: var(--ion-color-primary, #0054e9) !important;
  --ion-color-base-rgb: var(--ion-color-primary-rgb, 0, 84, 233) !important;
  --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-primary-shade, #004acd) !important;
  --ion-color-tint: var(--ion-color-primary-tint, #1a65eb) !important;
}

.ion-color-secondary {
  --ion-color-base: var(--ion-color-secondary, #0163aa) !important;
  --ion-color-base-rgb: var(--ion-color-secondary-rgb, 1, 99, 170) !important;
  --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-secondary-shade, #015796) !important;
  --ion-color-tint: var(--ion-color-secondary-tint, #1a73b3) !important;
}

.ion-color-tertiary {
  --ion-color-base: var(--ion-color-tertiary, #6030ff) !important;
  --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 96, 48, 255) !important;
  --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-tertiary-shade, #542ae0) !important;
  --ion-color-tint: var(--ion-color-tertiary-tint, #7045ff) !important;
}

.ion-color-success {
  --ion-color-base: var(--ion-color-success, #2dd55b) !important;
  --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 213, 91) !important;
  --ion-color-contrast: var(--ion-color-success-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-success-shade, #28bb50) !important;
  --ion-color-tint: var(--ion-color-success-tint, #42d96b) !important;
}

.ion-color-warning {
  --ion-color-base: var(--ion-color-warning, #ffc409) !important;
  --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
  --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
  --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
}

.ion-color-danger {
  --ion-color-base: var(--ion-color-danger, #c5000f) !important;
  --ion-color-base-rgb: var(--ion-color-danger-rgb, 197, 0, 15) !important;
  --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-danger-shade, #ad000d) !important;
  --ion-color-tint: var(--ion-color-danger-tint, #cb1a27) !important;
}

.ion-color-light {
  --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
  --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
  --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
  --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
}

.ion-color-medium {
  --ion-color-base: var(--ion-color-medium, #636469) !important;
  --ion-color-base-rgb: var(--ion-color-medium-rgb, 99, 100, 105) !important;
  --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-medium-shade, #57585c) !important;
  --ion-color-tint: var(--ion-color-medium-tint, #737478) !important;
}

.ion-color-dark {
  --ion-color-base: var(--ion-color-dark, #222428) !important;
  --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
  --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
  --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
}

.ion-page {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  contain: layout size style;
  z-index: 0;
}

ion-modal > .ion-page {
  position: relative;
  contain: layout style;
  height: 100%;
}

.split-pane-visible > .ion-page.split-pane-main {
  position: relative;
}

ion-route, ion-route-redirect, ion-router, ion-select-option, ion-nav-controller, ion-menu-controller, ion-action-sheet-controller, ion-alert-controller, ion-loading-controller, ion-modal-controller, ion-picker-controller, ion-popover-controller, ion-toast-controller, .ion-page-hidden {
  display: none !important;
}

.ion-page-invisible {
  opacity: 0;
}

.can-go-back > ion-header ion-back-button {
  display: block;
}

html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
  --ion-statusbar-padding: 20px;
}

@supports (padding-top: 20px) {
  html {
    --ion-safe-area-top: var(--ion-statusbar-padding);
  }
}
@supports (padding-top: env(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: env(safe-area-inset-top);
    --ion-safe-area-bottom: env(safe-area-inset-bottom);
    --ion-safe-area-left: env(safe-area-inset-left);
    --ion-safe-area-right: env(safe-area-inset-right);
  }
}
ion-card.ion-color .ion-inherit-color, ion-card-header.ion-color .ion-inherit-color {
  color: inherit;
}

.menu-content {
  transform: translate3d(0, 0, 0);
}

.menu-content-open {
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: none;
  overflow-y: hidden;
}

.menu-content-open ion-content {
  --overflow: hidden;
}

.menu-content-open .ion-content-scroll-host {
  overflow: hidden;
}

.ios .menu-content-reveal {
  box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08);
}

[dir=rtl].ios .menu-content-reveal {
  box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08);
}

.md .menu-content-reveal {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}

.md .menu-content-push {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}

ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

ion-accordion-group > ion-accordion:last-of-type ion-item[slot=header] {
  --border-width: 0px;
}

ion-accordion.accordion-animated > [slot=header] .ion-accordion-toggle-icon {
  transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  ion-accordion .ion-accordion-toggle-icon {
    transition: none !important;
  }
}
ion-accordion.accordion-expanding > [slot=header] .ion-accordion-toggle-icon, ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon {
  transform: rotate(180deg);
}

ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=header] {
  --border-width: 0px;
  --inner-border-width: 0px;
}

ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type, ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
  margin-top: 0;
}

ion-input input::-webkit-date-and-time-value {
  text-align: start;
}

.ion-datetime-button-overlay {
  --width: fit-content;
  --height: fit-content;
}

.ion-datetime-button-overlay ion-datetime.datetime-grid {
  width: 320px;
  min-height: 320px;
}

[ion-last-focus], header[tabindex="-1"]:focus, [role=banner][tabindex="-1"]:focus, main[tabindex="-1"]:focus, [role=main][tabindex="-1"]:focus, h1[tabindex="-1"]:focus, [role=heading][aria-level="1"][tabindex="-1"]:focus {
  outline: none;
}

.popover-viewport:has(> ion-content) {
  overflow: hidden;
}

@supports not selector(:has(> ion-content)) {
  .popover-viewport {
    overflow: hidden;
  }
} 
audio, canvas, progress, video {
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

b, strong {
  font-weight: bold;
}

img {
  max-width: 100%;
}

hr {
  height: 1px;
  border-width: 0;
  box-sizing: content-box;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

label, input, select, textarea {
  font-family: inherit;
  line-height: normal;
}

textarea {
  overflow: auto;
  height: auto;
  font: inherit;
  color: inherit;
}

textarea::placeholder {
  padding-left: 2px;
}

form, input, optgroup, select {
  margin: 0;
  font: inherit;
  color: inherit;
}

html input[type=button], input[type=reset], input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
}

a, a div, a span, a ion-icon, a ion-label, button, button div, button span, button ion-icon, button ion-label, .ion-tappable, [tappable], [tappable] div, [tappable] span, [tappable] ion-icon, [tappable] ion-label, input, textarea {
  touch-action: manipulation;
}

a ion-label, button ion-label {
  pointer-events: none;
}

button {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-style: inherit;
  font-variant: inherit;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: button;
}

[tappable] {
  cursor: pointer;
}

a[disabled], button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
} 
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html:not(.hydrated) body {
  display: none;
}

html.ion-ce body {
  display: block;
}

html.plt-pwa {
  height: 100vh;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  transform: translateZ(0);
  text-rendering: optimizeLegibility;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-drag: none;
  -ms-content-zooming: none;
  word-wrap: break-word;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
} 
html {
  font-family: var(--ion-font-family);
}

@supports (-webkit-touch-callout: none) {
  html {
    font: var(--ion-dynamic-font, 16px var(--ion-font-family));
  }
}
a {
  background-color: transparent;
  color: var(--ion-color-primary, #0054e9);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 16px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.2;
}

h1 {
  margin-top: 20px;
  font-size: 1.625rem;
}

h2 {
  margin-top: 18px;
  font-size: 1.5rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

small {
  font-size: 75%;
}

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
} 
/* Optional Ionic Utility Classes */
.ion-no-padding {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.ion-padding {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-inline-start: var(--ion-padding, 16px);
  padding-inline-end: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}

.ion-padding-top {
  --padding-top: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
}

.ion-padding-start {
  --padding-start: var(--ion-padding, 16px);
  padding-inline-start: var(--ion-padding, 16px);
}

.ion-padding-end {
  --padding-end: var(--ion-padding, 16px);
  padding-inline-end: var(--ion-padding, 16px);
}

.ion-padding-bottom {
  --padding-bottom: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}

.ion-padding-vertical {
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}

.ion-padding-horizontal {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  padding-inline-start: var(--ion-padding, 16px);
  padding-inline-end: var(--ion-padding, 16px);
}

.ion-no-margin {
  --margin-start: 0;
  --margin-end: 0;
  --margin-top: 0;
  --margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.ion-margin {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-inline-start: var(--ion-margin, 16px);
  margin-inline-end: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}

.ion-margin-top {
  --margin-top: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
}

.ion-margin-start {
  --margin-start: var(--ion-margin, 16px);
  margin-inline-start: var(--ion-margin, 16px);
}

.ion-margin-end {
  --margin-end: var(--ion-margin, 16px);
  margin-inline-end: var(--ion-margin, 16px);
}

.ion-margin-bottom {
  --margin-bottom: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}

.ion-margin-vertical {
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}

.ion-margin-horizontal {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  margin-inline-start: var(--ion-margin, 16px);
  margin-inline-end: var(--ion-margin, 16px);
} 
.ion-float-left {
  float: left !important;
}

.ion-float-right {
  float: right !important;
}

.ion-float-start {
  float: left !important;
}

:host-context([dir=rtl]) .ion-float-start {
  float: right !important;
}

[dir=rtl] .ion-float-start {
  float: right !important;
}

@supports selector(:dir(rtl)) {
  .ion-float-start:dir(rtl) {
    float: right !important;
  }
}
.ion-float-end {
  float: right !important;
}

:host-context([dir=rtl]) .ion-float-end {
  float: left !important;
}

[dir=rtl] .ion-float-end {
  float: left !important;
}

@supports selector(:dir(rtl)) {
  .ion-float-end:dir(rtl) {
    float: left !important;
  }
}
@media (min-width: 576px) {
  .ion-float-sm-left {
    float: left !important;
  }
  .ion-float-sm-right {
    float: right !important;
  }
  .ion-float-sm-start {
    float: left !important;
  }
  :host-context([dir=rtl]) .ion-float-sm-start {
    float: right !important;
  }
  [dir=rtl] .ion-float-sm-start {
    float: right !important;
  }
  @supports selector(:dir(rtl)) {
    .ion-float-sm-start:dir(rtl) {
      float: right !important;
    }
  }
  .ion-float-sm-end {
    float: right !important;
  }
  :host-context([dir=rtl]) .ion-float-sm-end {
    float: left !important;
  }
  [dir=rtl] .ion-float-sm-end {
    float: left !important;
  }
  @supports selector(:dir(rtl)) {
    .ion-float-sm-end:dir(rtl) {
      float: left !important;
    }
  }
}
@media (min-width: 768px) {
  .ion-float-md-left {
    float: left !important;
  }
  .ion-float-md-right {
    float: right !important;
  }
  .ion-float-md-start {
    float: left !important;
  }
  :host-context([dir=rtl]) .ion-float-md-start {
    float: right !important;
  }
  [dir=rtl] .ion-float-md-start {
    float: right !important;
  }
  @supports selector(:dir(rtl)) {
    .ion-float-md-start:dir(rtl) {
      float: right !important;
    }
  }
  .ion-float-md-end {
    float: right !important;
  }
  :host-context([dir=rtl]) .ion-float-md-end {
    float: left !important;
  }
  [dir=rtl] .ion-float-md-end {
    float: left !important;
  }
  @supports selector(:dir(rtl)) {
    .ion-float-md-end:dir(rtl) {
      float: left !important;
    }
  }
}
@media (min-width: 992px) {
  .ion-float-lg-left {
    float: left !important;
  }
  .ion-float-lg-right {
    float: right !important;
  }
  .ion-float-lg-start {
    float: left !important;
  }
  :host-context([dir=rtl]) .ion-float-lg-start {
    float: right !important;
  }
  [dir=rtl] .ion-float-lg-start {
    float: right !important;
  }
  @supports selector(:dir(rtl)) {
    .ion-float-lg-start:dir(rtl) {
      float: right !important;
    }
  }
  .ion-float-lg-end {
    float: right !important;
  }
  :host-context([dir=rtl]) .ion-float-lg-end {
    float: left !important;
  }
  [dir=rtl] .ion-float-lg-end {
    float: left !important;
  }
  @supports selector(:dir(rtl)) {
    .ion-float-lg-end:dir(rtl) {
      float: left !important;
    }
  }
}
@media (min-width: 1200px) {
  .ion-float-xl-left {
    float: left !important;
  }
  .ion-float-xl-right {
    float: right !important;
  }
  .ion-float-xl-start {
    float: left !important;
  }
  :host-context([dir=rtl]) .ion-float-xl-start {
    float: right !important;
  }
  [dir=rtl] .ion-float-xl-start {
    float: right !important;
  }
  @supports selector(:dir(rtl)) {
    .ion-float-xl-start:dir(rtl) {
      float: right !important;
    }
  }
  .ion-float-xl-end {
    float: right !important;
  }
  :host-context([dir=rtl]) .ion-float-xl-end {
    float: left !important;
  }
  [dir=rtl] .ion-float-xl-end {
    float: left !important;
  }
  @supports selector(:dir(rtl)) {
    .ion-float-xl-end:dir(rtl) {
      float: left !important;
    }
  }
} 
.ion-text-center {
  text-align: center !important;
}

.ion-text-justify {
  text-align: justify !important;
}

.ion-text-start {
  text-align: start !important;
}

.ion-text-end {
  text-align: end !important;
}

.ion-text-left {
  text-align: left !important;
}

.ion-text-right {
  text-align: right !important;
}

.ion-text-nowrap {
  white-space: nowrap !important;
}

.ion-text-wrap {
  white-space: normal !important;
}

@media (min-width: 576px) {
  .ion-text-sm-center {
    text-align: center !important;
  }
  .ion-text-sm-justify {
    text-align: justify !important;
  }
  .ion-text-sm-start {
    text-align: start !important;
  }
  .ion-text-sm-end {
    text-align: end !important;
  }
  .ion-text-sm-left {
    text-align: left !important;
  }
  .ion-text-sm-right {
    text-align: right !important;
  }
  .ion-text-sm-nowrap {
    white-space: nowrap !important;
  }
  .ion-text-sm-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 768px) {
  .ion-text-md-center {
    text-align: center !important;
  }
  .ion-text-md-justify {
    text-align: justify !important;
  }
  .ion-text-md-start {
    text-align: start !important;
  }
  .ion-text-md-end {
    text-align: end !important;
  }
  .ion-text-md-left {
    text-align: left !important;
  }
  .ion-text-md-right {
    text-align: right !important;
  }
  .ion-text-md-nowrap {
    white-space: nowrap !important;
  }
  .ion-text-md-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 992px) {
  .ion-text-lg-center {
    text-align: center !important;
  }
  .ion-text-lg-justify {
    text-align: justify !important;
  }
  .ion-text-lg-start {
    text-align: start !important;
  }
  .ion-text-lg-end {
    text-align: end !important;
  }
  .ion-text-lg-left {
    text-align: left !important;
  }
  .ion-text-lg-right {
    text-align: right !important;
  }
  .ion-text-lg-nowrap {
    white-space: nowrap !important;
  }
  .ion-text-lg-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 1200px) {
  .ion-text-xl-center {
    text-align: center !important;
  }
  .ion-text-xl-justify {
    text-align: justify !important;
  }
  .ion-text-xl-start {
    text-align: start !important;
  }
  .ion-text-xl-end {
    text-align: end !important;
  }
  .ion-text-xl-left {
    text-align: left !important;
  }
  .ion-text-xl-right {
    text-align: right !important;
  }
  .ion-text-xl-nowrap {
    white-space: nowrap !important;
  }
  .ion-text-xl-wrap {
    white-space: normal !important;
  }
} 
.ion-text-uppercase {
  text-transform: uppercase !important;
}

.ion-text-lowercase {
  text-transform: lowercase !important;
}

.ion-text-capitalize {
  text-transform: capitalize !important;
}

@media (min-width: 576px) {
  .ion-text-sm-uppercase {
    text-transform: uppercase !important;
  }
  .ion-text-sm-lowercase {
    text-transform: lowercase !important;
  }
  .ion-text-sm-capitalize {
    text-transform: capitalize !important;
  }
}
@media (min-width: 768px) {
  .ion-text-md-uppercase {
    text-transform: uppercase !important;
  }
  .ion-text-md-lowercase {
    text-transform: lowercase !important;
  }
  .ion-text-md-capitalize {
    text-transform: capitalize !important;
  }
}
@media (min-width: 992px) {
  .ion-text-lg-uppercase {
    text-transform: uppercase !important;
  }
  .ion-text-lg-lowercase {
    text-transform: lowercase !important;
  }
  .ion-text-lg-capitalize {
    text-transform: capitalize !important;
  }
}
@media (min-width: 1200px) {
  .ion-text-xl-uppercase {
    text-transform: uppercase !important;
  }
  .ion-text-xl-lowercase {
    text-transform: lowercase !important;
  }
  .ion-text-xl-capitalize {
    text-transform: capitalize !important;
  }
} 
.ion-align-self-start {
  align-self: flex-start !important;
}

.ion-align-self-end {
  align-self: flex-end !important;
}

.ion-align-self-center {
  align-self: center !important;
}

.ion-align-self-stretch {
  align-self: stretch !important;
}

.ion-align-self-baseline {
  align-self: baseline !important;
}

.ion-align-self-auto {
  align-self: auto !important;
}

.ion-wrap {
  flex-wrap: wrap !important;
}

.ion-nowrap {
  flex-wrap: nowrap !important;
}

.ion-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.ion-justify-content-start {
  justify-content: flex-start !important;
}

.ion-justify-content-center {
  justify-content: center !important;
}

.ion-justify-content-end {
  justify-content: flex-end !important;
}

.ion-justify-content-around {
  justify-content: space-around !important;
}

.ion-justify-content-between {
  justify-content: space-between !important;
}

.ion-justify-content-evenly {
  justify-content: space-evenly !important;
}

.ion-align-items-start {
  align-items: flex-start !important;
}

.ion-align-items-center {
  align-items: center !important;
}

.ion-align-items-end {
  align-items: flex-end !important;
}

.ion-align-items-stretch {
  align-items: stretch !important;
}

.ion-align-items-baseline {
  align-items: baseline !important;
} 
.ion-hide {
  display: none !important;
}

.ion-hide-up {
  display: none !important;
}

.ion-hide-down {
  display: none !important;
}

@media (min-width: 576px) {
  .ion-hide-sm-up {
    display: none !important;
  }
}
@media (max-width: 575.98px) {
  .ion-hide-sm-down {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .ion-hide-md-up {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  .ion-hide-md-down {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .ion-hide-lg-up {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .ion-hide-lg-down {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .ion-hide-xl-up {
    display: none !important;
  }
}
@media (max-width: 1199.98px) {
  .ion-hide-xl-down {
    display: none !important;
  }
} 
/* Import Global Theme */
/* Global transition for theme changes (fade easing) */
:root,
[data-theme=dark] {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
  /* Needed for apple... */
  --status-bar: #3b5ba8;
  /* Global typography tokens */
  --ion-font-family: "Roboto", sans-serif;
  --ion-font-size-base: 16px;
}

/* ==================== */
/*       LIGHT THEME    */
/* ==================== */
:root {
  /* Background & Text */
  --ion-background-color: #ffffff;
  --ion-background-color-rgb: 255, 255, 255;
  --ion-text-color: #333333;
  --ion-text-color-rgb: 51, 51, 51;
  /* Expanded Text Color Steps (Material style) */
  --ion-text-color-step-50: #3d3d3d;
  --ion-text-color-step-100: #474747;
  --ion-text-color-step-150: #525252;
  --ion-text-color-step-200: #5c5c5c;
  --ion-text-color-step-250: #666666;
  --ion-text-color-step-300: #707070;
  --ion-text-color-step-350: #7a7a7a;
  --ion-text-color-step-400: #858585;
  --ion-text-color-step-450: #8f8f8f;
  --ion-text-color-step-500: #999999;
  --ion-text-color-step-550: #a3a3a3;
  --ion-text-color-step-600: #adadad;
  --ion-text-color-step-650: #b8b8b8;
  --ion-text-color-step-700: #c2c2c2;
  --ion-text-color-step-750: #cccccc;
  --ion-text-color-step-800: #d6d6d6;
  --ion-text-color-step-850: #e0e0e0;
  --ion-text-color-step-900: #ebebeb;
  --ion-text-color-step-950: #f5f5f5;
  /* Expanded Background Color Steps */
  --ion-background-color-step-50: #f5f5f5;
  --ion-background-color-step-100: #ebebeb;
  --ion-background-color-step-150: #e0e0e0;
  --ion-background-color-step-200: #d6d6d6;
  --ion-background-color-step-250: #cccccc;
  --ion-background-color-step-300: #c2c2c2;
  --ion-background-color-step-350: #b8b8b8;
  --ion-background-color-step-400: #adadad;
  --ion-background-color-step-450: #a3a3a3;
  --ion-background-color-step-500: #999999;
  --ion-background-color-step-550: #8f8f8f;
  --ion-background-color-step-600: #858585;
  --ion-background-color-step-650: #7a7a7a;
  --ion-background-color-step-700: #707070;
  --ion-background-color-step-750: #666666;
  --ion-background-color-step-800: #5c5c5c;
  --ion-background-color-step-850: #525252;
  --ion-background-color-step-900: #474747;
  --ion-background-color-step-950: #3d3d3d;
  /* Material Surface Tokens for various elevations */
  --ion-surface: #ffffff; /* Default surface (elevation 0) */
  --ion-surface-elevation-1: var(--ion-background-color-step-50);
  --ion-surface-elevation-2: var(--ion-background-color-step-100);
  --ion-surface-elevation-3: var(--ion-background-color-step-150);
  --ion-surface-elevation-4: var(--ion-background-color-step-200);
  --ion-surface-elevation-5: var(--ion-background-color-step-250);
  /* Primary Colors */
  --ion-color-primary: #3b5ba8;
  --ion-color-primary-rgb: 60, 92, 160;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #34508e;
  --ion-color-primary-tint: #4a6bb5;
  /* Secondary Colors */
  --ion-color-secondary: #6cb94d;
  --ion-color-secondary-rgb: 108, 185, 77;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #63a645;
  --ion-color-secondary-tint: #7dc06b;
  /* Tertiary Colors */
  --ion-color-tertiary: #38b1e6;
  --ion-color-tertiary-rgb: 56, 177, 230;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #319ec0;
  --ion-color-tertiary-tint: #4cb2ec;
  /* Other Colors */
  --ion-color-success: var(--ion-color-secondary);
  --ion-color-warning: #b5b009;
  --ion-color-danger: #eb445a;
  --ion-color-light: #f4f5f8;
  --ion-color-medium: #92949c;
  --ion-color-dark: #222428;
  /* Additional Text Tokens */
  --ion-on-background: #212121;
  --ion-secondary-text: #757575;
}

/* ==================== */
/*       DARK THEME     */
/* ==================== */
html[data-theme=dark] {
  /* Background & Text */
  --ion-background-color: #121212;
  --ion-background-color-rgb: 18, 18, 18;
  --ion-text-color: #fcfcfc;
  --ion-text-color-rgb: 252, 252, 252;
  /* Material Surface Tokens for dark mode */
  --ion-surface: #1e1e1e;
  --ion-surface-elevation-1: #2c2c2c;
  --ion-surface-elevation-2: #333333;
  --ion-surface-elevation-3: #3a3a3a;
  --ion-surface-elevation-4: #424242;
  --ion-surface-elevation-5: #4a4a4a;
  /* Lighter brand colors for dark mode */
  --ion-color-primary: #5e7bd6;
  --ion-color-primary-rgb: 94, 123, 214;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #4a66c0;
  --ion-color-primary-tint: #7a94e0;
  --ion-color-secondary: #86d06a;
  --ion-color-secondary-rgb: 134, 208, 106;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #6fb95a;
  --ion-color-secondary-tint: #9bd983;
  --ion-color-tertiary: #66c9f0;
  --ion-color-tertiary-rgb: 102, 201, 240;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #52b4da;
  --ion-color-tertiary-tint: #84d5f3;
  /* Other Colors */
  --ion-color-success: var(--ion-color-secondary);
  --ion-color-warning: #ffc409;
  --ion-color-danger: #eb445a;
  --ion-color-light: #f4f5f8;
  --ion-color-medium: #92949c;
  --ion-color-dark: #222428;
  /* Additional Text Tokens */
  --ion-on-background: #f5f5f5;
  --ion-secondary-text: #bdbdbd;
  /* ============================= */
  /* Dark-mode overrides for Ionic overlays */
  /* ============================= */
  /* ===== Buttons & Icons lighter in dark ===== */
}
html[data-theme=dark] ion-alert,
html[data-theme=dark] ion-action-sheet,
html[data-theme=dark] ion-loading,
html[data-theme=dark] ion-card-title,
html[data-theme=dark] ion-menu,
html[data-theme=dark] ion-modal,
html[data-theme=dark] ion-header,
html[data-theme=dark] ion-toolbar,
html[data-theme=dark] ion-footer,
html[data-theme=dark] ion-toggle,
html[data-theme=dark] ion-popover {
  --background: var(--ion-background-color);
  --color: var(--ion-on-background);
  --border-color: transparent;
}
html[data-theme=dark] ion-alert,
html[data-theme=dark] ion-action-sheet {
  --header-color: var(--ion-on-background);
  --subheader-color: var(--ion-on-background);
  --message-color: var(--ion-on-background);
  --button-color: #ffffff;
  --cancel-button-color: #ffffff;
}
html[data-theme=dark] ion-loading {
  --spinner-color: var(--ion-on-background);
  --message-color: var(--ion-on-background);
  --color: var(--ion-on-background);
}
html[data-theme=dark] ion-loading::part(message) {
  color: var(--ion-on-background) !important;
}
html[data-theme=dark] ion-icon {
  color: var(--ion-icon-color, #ededed);
  opacity: 0.98;
}
html[data-theme=dark] ion-header ion-icon,
html[data-theme=dark] ion-toolbar ion-icon,
html[data-theme=dark] ion-footer ion-icon,
html[data-theme=dark] ion-button ion-icon {
  color: #ffffff;
  opacity: 1;
}
html[data-theme=dark] ion-button.button-solid,
html[data-theme=dark] ion-fab-button {
  --background: var(--ion-color-primary);
  --background-hover: var(--ion-color-primary-tint);
  --background-activated: var(--ion-color-primary-shade);
  --background-focused: var(--ion-color-primary-tint);
  --color: var(--ion-color-primary-contrast);
}
html[data-theme=dark] ion-button.button-outline {
  --border-color: color-mix(in oklab, var(--ion-color-primary) 70%, white);
  --color: color-mix(in oklab, var(--ion-color-primary) 85%, white);
  --background: transparent;
}
html[data-theme=dark] ion-button.button-clear {
  --color: color-mix(in oklab, var(--ion-color-primary) 75%, white);
}
html[data-theme=dark] ion-segment-button[aria-pressed=true],
html[data-theme=dark] ion-chip.ion-color-primary {
  --background: color-mix(in oklab, var(--ion-color-primary), white 15%);
  --color: var(--ion-color-primary-contrast);
}

/* ============================= */
/*   DARK THEME SCROLLBARS       */
/* ============================= */
html[data-theme=dark] {
  /* ===== WebKit-based browsers (iOS, Safari, Chrome) ===== */
  /* ===== Firefox / standards-based (for md style parity) ===== */
  scrollbar-color: color-mix(in oklab, var(--ion-color-primary) 50%, var(--ion-surface-elevation-2)) color-mix(in oklab, var(--ion-background-color) 85%, black);
  scrollbar-width: thin;
  /* ===== Platform-aware tweaks ===== */
}
html[data-theme=dark] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-theme=dark] ::-webkit-scrollbar-track {
  background-color: color-mix(in oklab, var(--ion-background-color) 85%, black);
  border-radius: 8px;
}
html[data-theme=dark] ::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklab, var(--ion-color-primary) 50%, var(--ion-surface-elevation-2));
  border-radius: 8px;
  border: 2px solid var(--ion-background-color);
}
html[data-theme=dark] ::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in oklab, var(--ion-color-primary) 65%, var(--ion-surface-elevation-2));
}
html[data-theme=dark] ::-webkit-scrollbar-corner {
  background: var(--ion-background-color);
}
html.ios html[data-theme=dark] ::-webkit-scrollbar {
  width: 6px;
}
html.ios html[data-theme=dark] ::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--ion-color-primary) 40%, var(--ion-surface-elevation-3));
}
html.md html[data-theme=dark] ::-webkit-scrollbar {
  width: 10px;
}
html.md html[data-theme=dark] ::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklab, var(--ion-color-primary) 55%, var(--ion-surface-elevation-3));
}

/* ===== Dark theme color “step” scales ===== */
html[data-theme=dark] {
  /* Neutral step scale used by components (e.g., var(--ion-color-step-50)) */
  --ion-color-step-50: #1a1a1a;
  --ion-color-step-100: #202020;
  --ion-color-step-150: #242424;
  --ion-color-step-200: #292929;
  --ion-color-step-250: #2e2e2e;
  --ion-color-step-300: #333333;
  --ion-color-step-350: #383838;
  --ion-color-step-400: #3d3d3d;
  --ion-color-step-450: #424242;
  --ion-color-step-500: #474747;
  --ion-color-step-550: #4c4c4c;
  --ion-color-step-600: #515151;
  --ion-color-step-650: #565656;
  --ion-color-step-700: #5b5b5b;
  --ion-color-step-750: #616161;
  --ion-color-step-800: #676767;
  --ion-color-step-850: #6d6d6d;
  --ion-color-step-900: #737373;
  /* Text step scale (light → dimmer) */
  --ion-text-color-step-50: #fafafa;
  --ion-text-color-step-100: #f2f2f2;
  --ion-text-color-step-150: #ececec;
  --ion-text-color-step-200: #e6e6e6;
  --ion-text-color-step-250: #e0e0e0;
  --ion-text-color-step-300: #dbdbdb;
  --ion-text-color-step-350: #d6d6d6;
  --ion-text-color-step-400: #d0d0d0;
  --ion-text-color-step-450: #cbcbcb;
  --ion-text-color-step-500: #c6c6c6;
  --ion-text-color-step-550: #c0c0c0;
  --ion-text-color-step-600: #bababa;
  --ion-text-color-step-650: #b4b4b4;
  --ion-text-color-step-700: #aeaeae;
  --ion-text-color-step-750: #a8a8a8;
  --ion-text-color-step-800: #a2a2a2;
  --ion-text-color-step-850: #9c9c9c;
  --ion-text-color-step-900: #969696;
  --ion-text-color-step-950: #909090;
  /* Background step scale (near-bg → lighter surface) */
  --ion-background-color-step-50: #161616;
  --ion-background-color-step-100: #1b1b1b;
  --ion-background-color-step-150: #202020;
  --ion-background-color-step-200: #242424;
  --ion-background-color-step-250: #292929;
  --ion-background-color-step-300: #2e2e2e;
  --ion-background-color-step-350: #333333;
  --ion-background-color-step-400: #373737;
  --ion-background-color-step-450: #3b3b3b;
  --ion-background-color-step-500: #404040;
  --ion-background-color-step-550: #454545;
  --ion-background-color-step-600: #4a4a4a;
  --ion-background-color-step-650: #4f4f4f;
  --ion-background-color-step-700: #545454;
  --ion-background-color-step-750: #595959;
  --ion-background-color-step-800: #5e5e5e;
  --ion-background-color-step-850: #636363;
  --ion-background-color-step-900: #686868;
  --ion-background-color-step-950: #6d6d6d;
}

.ion-palette-dark {
  --ion-color-primary: #4d8dff;
  --ion-color-primary-rgb: 77, 141, 255;
  --ion-color-primary-contrast: #000;
  --ion-color-primary-contrast-rgb: 0, 0, 0;
  --ion-color-primary-shade: #447ce0;
  --ion-color-primary-tint: #5f98ff;
  --ion-color-secondary: #46b1ff;
  --ion-color-secondary-rgb: 70, 177, 255;
  --ion-color-secondary-contrast: #000;
  --ion-color-secondary-contrast-rgb: 0, 0, 0;
  --ion-color-secondary-shade: #3e9ce0;
  --ion-color-secondary-tint: #59b9ff;
  --ion-color-tertiary: #8482fb;
  --ion-color-tertiary-rgb: 132, 130, 251;
  --ion-color-tertiary-contrast: #000;
  --ion-color-tertiary-contrast-rgb: 0, 0, 0;
  --ion-color-tertiary-shade: #7472dd;
  --ion-color-tertiary-tint: #908ffb;
  --ion-color-success: #2dd55b;
  --ion-color-success-rgb: 45, 213, 91;
  --ion-color-success-contrast: #000;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #28bb50;
  --ion-color-success-tint: #42d96b;
  --ion-color-warning: #ffce31;
  --ion-color-warning-rgb: 255, 206, 49;
  --ion-color-warning-contrast: #000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0b52b;
  --ion-color-warning-tint: #ffd346;
  --ion-color-danger: #f24c58;
  --ion-color-danger-rgb: 242, 76, 88;
  --ion-color-danger-contrast: #000;
  --ion-color-danger-contrast-rgb: 0, 0, 0;
  --ion-color-danger-shade: #d5434d;
  --ion-color-danger-tint: #f35e69;
  --ion-color-light: #222428;
  --ion-color-light-rgb: 34, 36, 40;
  --ion-color-light-contrast: #fff;
  --ion-color-light-contrast-rgb: 255, 255, 255;
  --ion-color-light-shade: #1e2023;
  --ion-color-light-tint: #383a3e;
  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #000;
  --ion-color-medium-contrast-rgb: 0, 0, 0;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;
  --ion-color-dark: #f4f5f8;
  --ion-color-dark-rgb: 244, 245, 248;
  --ion-color-dark-contrast: #000;
  --ion-color-dark-contrast-rgb: 0, 0, 0;
  --ion-color-dark-shade: #d7d8da;
  --ion-color-dark-tint: #f5f6f9;
}

.ion-palette-dark.ios {
  --ion-background-color: #000000;
  --ion-background-color-rgb: 0, 0, 0;
  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255, 255, 255;
  --ion-background-color-step-50: #0d0d0d;
  --ion-background-color-step-100: #1a1a1a;
  --ion-background-color-step-150: #262626;
  --ion-background-color-step-200: #333333;
  --ion-background-color-step-250: #404040;
  --ion-background-color-step-300: #4d4d4d;
  --ion-background-color-step-350: #595959;
  --ion-background-color-step-400: #666666;
  --ion-background-color-step-450: #737373;
  --ion-background-color-step-500: #808080;
  --ion-background-color-step-550: #8c8c8c;
  --ion-background-color-step-600: #999999;
  --ion-background-color-step-650: #a6a6a6;
  --ion-background-color-step-700: #b3b3b3;
  --ion-background-color-step-750: #bfbfbf;
  --ion-background-color-step-800: #cccccc;
  --ion-background-color-step-850: #d9d9d9;
  --ion-background-color-step-900: #e6e6e6;
  --ion-background-color-step-950: #f2f2f2;
  --ion-text-color-step-50: #f2f2f2;
  --ion-text-color-step-100: #e6e6e6;
  --ion-text-color-step-150: #d9d9d9;
  --ion-text-color-step-200: #cccccc;
  --ion-text-color-step-250: #bfbfbf;
  --ion-text-color-step-300: #b3b3b3;
  --ion-text-color-step-350: #a6a6a6;
  --ion-text-color-step-400: #999999;
  --ion-text-color-step-450: #8c8c8c;
  --ion-text-color-step-500: #808080;
  --ion-text-color-step-550: #737373;
  --ion-text-color-step-600: #666666;
  --ion-text-color-step-650: #595959;
  --ion-text-color-step-700: #4d4d4d;
  --ion-text-color-step-750: #404040;
  --ion-text-color-step-800: #333333;
  --ion-text-color-step-850: #262626;
  --ion-text-color-step-900: #1a1a1a;
  --ion-text-color-step-950: #0d0d0d;
  --ion-item-background: #000000;
  --ion-card-background: #1c1c1d;
}

.ion-palette-dark.ios ion-modal {
  --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));
  --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));
  --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));
}

.ion-palette-dark.md {
  --ion-background-color: #121212;
  --ion-background-color-rgb: 18, 18, 18;
  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255, 255, 255;
  --ion-background-color-step-50: #1e1e1e;
  --ion-background-color-step-100: #2a2a2a;
  --ion-background-color-step-150: #363636;
  --ion-background-color-step-200: #414141;
  --ion-background-color-step-250: #4d4d4d;
  --ion-background-color-step-300: #595959;
  --ion-background-color-step-350: #656565;
  --ion-background-color-step-400: #717171;
  --ion-background-color-step-450: #7d7d7d;
  --ion-background-color-step-500: #898989;
  --ion-background-color-step-550: #949494;
  --ion-background-color-step-600: #a0a0a0;
  --ion-background-color-step-650: #acacac;
  --ion-background-color-step-700: #b8b8b8;
  --ion-background-color-step-750: #c4c4c4;
  --ion-background-color-step-800: #d0d0d0;
  --ion-background-color-step-850: #dbdbdb;
  --ion-background-color-step-900: #e7e7e7;
  --ion-background-color-step-950: #f3f3f3;
  --ion-text-color-step-50: #f3f3f3;
  --ion-text-color-step-100: #e7e7e7;
  --ion-text-color-step-150: #dbdbdb;
  --ion-text-color-step-200: #d0d0d0;
  --ion-text-color-step-250: #c4c4c4;
  --ion-text-color-step-300: #b8b8b8;
  --ion-text-color-step-350: #acacac;
  --ion-text-color-step-400: #a0a0a0;
  --ion-text-color-step-450: #949494;
  --ion-text-color-step-500: #898989;
  --ion-text-color-step-550: #7d7d7d;
  --ion-text-color-step-600: #717171;
  --ion-text-color-step-650: #656565;
  --ion-text-color-step-700: #595959;
  --ion-text-color-step-750: #4d4d4d;
  --ion-text-color-step-800: #414141;
  --ion-text-color-step-850: #363636;
  --ion-text-color-step-900: #2a2a2a;
  --ion-text-color-step-950: #1e1e1e;
  --ion-item-background: #1e1e1e;
  --ion-toolbar-background: #1f1f1f;
  --ion-tab-bar-background: #1f1f1f;
  --ion-card-background: #1e1e1e;
} 
html, body, ion-app {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Ensure proper display and stacking for shell and child content */
.ion-page.shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  contain: layout size style;
}

/* Let router-outlet act like an ion-page */
.router-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  min-height: 0;
}

/* Fix content inside child apps */
ion-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  --overflow: auto;
  --padding-top: env(safe-area-inset-top);
  --padding-bottom: env(safe-area-inset-bottom);
}

/* Ensure header always stays on top */
ion-header,
ion-toolbar {
  z-index: 10;
  position: relative;
}

/* Hide elements when in dark mode */
html[data-theme=dark] .hide-on-dark {
  display: none !important;
}

/* Hide elements when in light mode (i.e. when data-theme is not "dark") */
html:not([data-theme=dark]) .hide-on-light {
  display: none !important;
}

ion-input.large {
  font-size: clamp(4rem, 15vw, 8rem);
  font-weight: bold !important;
}

.floating-card {
  background: rgba(255, 255, 255, 0.75);
  text-shadow: 0 0 white;
  color: #333333;
}

html[data-theme=dark] .floating-card {
  background: rgba(0, 0, 0, 0.75);
  text-shadow: 0 0 white;
  color: #fafafa;
}

html ion-range.danger {
  --bar-background-active: var(--ion-color-danger) !important;
}
html ion-range.warning {
  --bar-background-active: var(--ion-color-warning) !important;
}
html ion-range.success {
  --bar-background-active: var(--ion-color-success) !important;
}
html ion-range.medium {
  --bar-background-active: var(--ion-color-medium) !important;
}

em, q, blockquote {
  font-family: "Rokkitt", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
}

em {
  font-weight: 700;
}

ion-label.label-stacked {
  font-size: 1.4rem !important;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./projects/shell/src/styles.scss?ngGlobalStyle ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/ol/ol.css?ngGlobalStyle ***!
  \******************************************************************************************************************************************************************************************************************************/
:root,
:host {
  --ol-background-color: white;
  --ol-accent-background-color: #F5F5F5;
  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
  --ol-foreground-color: #333333;
  --ol-subtle-foreground-color: #666666;
  --ol-brand-color: #00AAFF;
}

.ol-box {
  box-sizing: border-box;
  border-radius: 2px;
  border: 1.5px solid var(--ol-background-color);
  background-color: var(--ol-partial-background-color);
}

.ol-mouse-position {
  top: 8px;
  right: 8px;
  position: absolute;
}

.ol-scale-line {
  background: var(--ol-partial-background-color);
  border-radius: 4px;
  bottom: 8px;
  left: 8px;
  padding: 2px;
  position: absolute;
}

.ol-scale-line-inner {
  border: 1px solid var(--ol-subtle-foreground-color);
  border-top: none;
  color: var(--ol-foreground-color);
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
  transition: all 0.25s;
}

.ol-scale-bar {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.ol-scale-bar-inner {
  display: flex;
}

.ol-scale-step-marker {
  width: 1px;
  height: 15px;
  background-color: var(--ol-foreground-color);
  float: right;
  z-index: 10;
}

.ol-scale-step-text {
  position: absolute;
  bottom: -5px;
  font-size: 10px;
  z-index: 11;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-text {
  position: absolute;
  font-size: 12px;
  text-align: center;
  bottom: 25px;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-singlebar {
  position: relative;
  height: 10px;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid var(--ol-foreground-color);
}

.ol-scale-singlebar-even {
  background-color: var(--ol-subtle-foreground-color);
}

.ol-scale-singlebar-odd {
  background-color: var(--ol-background-color);
}

.ol-unsupported {
  display: none;
}

.ol-viewport,
.ol-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ol-viewport canvas {
  all: unset;
  overflow: hidden;
}

.ol-viewport {
  touch-action: pan-x pan-y;
}

.ol-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

.ol-grabbing {
  cursor: grabbing;
}

.ol-grab {
  cursor: move;
  cursor: grab;
}

.ol-control {
  position: absolute;
  background-color: var(--ol-subtle-background-color);
  border-radius: 4px;
}

.ol-zoom {
  top: .5em;
  left: .5em;
}

.ol-rotate {
  top: .5em;
  right: .5em;
  transition: opacity .25s linear, visibility 0s linear;
}

.ol-rotate.ol-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s linear, visibility 0s linear .25s;
}

.ol-zoom-extent {
  top: 4.643em;
  left: .5em;
}

.ol-full-screen {
  right: .5em;
  top: .5em;
}

.ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: var(--ol-subtle-foreground-color);
  font-weight: bold;
  text-decoration: none;
  font-size: inherit;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: .4em;
  background-color: var(--ol-background-color);
  border: none;
  border-radius: 2px;
}

.ol-control button::-moz-focus-inner {
  border: none;
  padding: 0;
}

.ol-zoom-extent button {
  line-height: 1.4em;
}

.ol-compass {
  display: block;
  font-weight: normal;
  will-change: transform;
}

.ol-touch .ol-control button {
  font-size: 1.5em;
}

.ol-touch .ol-zoom-extent {
  top: 5.5em;
}

.ol-control button:hover,
.ol-control button:focus {
  text-decoration: none;
  outline: 1px solid var(--ol-subtle-foreground-color);
  color: var(--ol-foreground-color);
}

.ol-zoom .ol-zoom-in {
  border-radius: 2px 2px 0 0;
}

.ol-zoom .ol-zoom-out {
  border-radius: 0 0 2px 2px;
}

.ol-attribution {
  text-align: right;
  bottom: .5em;
  right: .5em;
  max-width: calc(100% - 1.3em);
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
}

.ol-attribution a {
  color: var(--ol-subtle-foreground-color);
  text-decoration: none;
}

.ol-attribution ul {
  margin: 0;
  padding: 1px .5em;
  color: var(--ol-foreground-color);
  text-shadow: 0 0 2px var(--ol-background-color);
  font-size: 12px;
}

.ol-attribution li {
  display: inline;
  list-style: none;
}

.ol-attribution li:not(:last-child):after {
  content: " ";
}

.ol-attribution img {
  max-height: 2em;
  max-width: inherit;
  vertical-align: middle;
}

.ol-attribution button {
  flex-shrink: 0;
}

.ol-attribution.ol-collapsed ul {
  display: none;
}

.ol-attribution:not(.ol-collapsed) {
  background: var(--ol-partial-background-color);
}

.ol-attribution.ol-uncollapsible {
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0;
}

.ol-attribution.ol-uncollapsible img {
  margin-top: -.2em;
  max-height: 1.6em;
}

.ol-attribution.ol-uncollapsible button {
  display: none;
}

.ol-zoomslider {
  top: 4.5em;
  left: .5em;
  height: 200px;
}

.ol-zoomslider button {
  position: relative;
  height: 10px;
}

.ol-touch .ol-zoomslider {
  top: 5.5em;
}

.ol-overviewmap {
  left: 0.5em;
  bottom: 0.5em;
}

.ol-overviewmap.ol-uncollapsible {
  bottom: 0;
  left: 0;
  border-radius: 0 4px 0 0;
}

.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
  display: block;
}

.ol-overviewmap .ol-overviewmap-map {
  border: 1px solid var(--ol-subtle-foreground-color);
  height: 150px;
  width: 150px;
}

.ol-overviewmap:not(.ol-collapsed) button {
  bottom: 0;
  left: 0;
  position: absolute;
}

.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
  display: none;
}

.ol-overviewmap:not(.ol-collapsed) {
  background: var(--ol-subtle-background-color);
}

.ol-overviewmap-box {
  border: 1.5px dotted var(--ol-subtle-foreground-color);
}

.ol-overviewmap .ol-overviewmap-box:hover {
  cursor: move;
}

.ol-overviewmap .ol-viewport:hover {
  cursor: pointer;
}

/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/material-icons/iconfont/material-icons.css?ngGlobalStyle ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-icons.59322316b3fd6063.woff2') format("woff2"), url('material-icons.4ad034d2c499d9b6.woff') format("woff");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-icons-outlined.f86cb7b0aa53f0fe.woff2') format("woff2"), url('material-icons-outlined.78a93b2079680a08.woff') format("woff");
}
.material-icons-outlined {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Round";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-icons-round.b10ec9db5b7fbc74.woff2') format("woff2"), url('material-icons-round.92dc7ca2f4c591e7.woff') format("woff");
}
.material-icons-round {
  font-family: "Material Icons Round";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Sharp";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-icons-sharp.3885863ee4746422.woff2') format("woff2"), url('material-icons-sharp.a71cb2bf66c604de.woff') format("woff");
}
.material-icons-sharp {
  font-family: "Material Icons Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Two Tone";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-icons-two-tone.675bd578bd14533e.woff2') format("woff2"), url('material-icons-two-tone.588d63134de807a7.woff') format("woff");
}
.material-icons-two-tone {
  font-family: "Material Icons Two Tone";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./shared/styles/helm-brand.scss?ngGlobalStyle ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* ===========================================================================
   HELM — art direction
   ===========================================================================

   The brief was "truly unique, and on brand with gohrt-frontend". The public
   site has a real design language, and it is not the palette — the palette is
   the least of it. Reading gohrt-frontend's stylesheet, three things carry the
   brand:

     1. THREE WAVES. The mark is three waves; the page transition is three
        waves in green, light blue and navy sweeping up the window as
        sine-curve masks. It is the single most recognisable HRT gesture.
     2. BEBAS NEUE. A condensed display face set at poster scale — the home
        hero runs to 8.5rem with a line-height of 0.88. Nothing else on a
        transit site looks like that.
     3. DIAGONALS. Scrims at 100deg, hero photographs sliced into diagonal
        bands that assemble one at a time. The site moves across, not down.

   Helm takes all three somewhere the public site cannot go: a control room at
   night. The site is daylight, photographic and welcoming; this is the bridge
   of a vessel — dark, instrumented, and quiet until something needs attention.
   Same voice, different room.

   WHAT THIS FILE OWNS
   -------------------
   The brand layer only: fonts, the wave motif, the display type, and the
   diagonal geometry. Colour still comes from the theme engine, so the themes
   can change without touching any of this.
   =========================================================================== */
/* ---------------------------------------------------------------------------
   1. Type
   ---------------------------------------------------------------------------
   Inter for everything that is read, Bebas Neue for everything that is
   *announced*. The two families and their fallbacks match the public site, and
   the condensed fallbacks matter: dropping Bebas to Helvetica would change the
   width of every heading, not just its shapes.
   --------------------------------------------------------------------------- */
:root {
  --helm-font-plain: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --helm-font-display: "Bebas Neue", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  /* Data is read in columns and compared down the column, so every figure is
     tabular. Without this a fleet list jitters as digits change width. */
  --helm-font-data: "Inter", ui-monospace, "SF Mono", Menlo, monospace;
  /* The HRT marks, unmodified. These are the brand, not theme tokens, and they
     stay the same in every theme — the wave is the wave. */
  --helm-wave-green: #68bd45;
  --helm-wave-blue: #38b2e6;
  --helm-wave-navy: #3b5aa8;
  /* The navy the public site's footer uses. Helm's rooms are built from it
     rather than from neutral grey, which is what stops the console reading as
     a generic dark theme. */
  --helm-navy-deep: #0b1220;
  --helm-navy: #1c2439;
  /* The 8px baseline from the public site, same names, same steps. */
  --helm-space-1: 0.5rem;
  --helm-space-2: 1rem;
  --helm-space-3: 1.5rem;
  --helm-space-4: 2rem;
  --helm-space-5: 3rem;
  /* One angle, used everywhere something is cut. Matching the site's 100deg
     scrim means the diagonals here and there lean the same way. */
  --helm-shear: 10deg;
}

body {
  font-family: var(--helm-font-plain);
}

/* ---------------------------------------------------------------------------
   2. Display type
   ---------------------------------------------------------------------------
   Bebas is uppercase-only and very condensed, so it needs letter-spacing to
   breathe and a line-height well under 1 to look deliberate rather than merely
   tall. These are the public site's proportions.
   --------------------------------------------------------------------------- */
.helm-display,
.helm-title {
  font-family: var(--helm-font-display);
  font-weight: 400; /* Bebas ships one weight; asking for 700 synthesises it */
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.helm-display {
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 0.86;
}

.helm-title {
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
}

/* A label above a block: small, wide, and quiet. The counterpart to the display
   face — where Bebas shouts, this whispers the category. */
.helm-eyebrow {
  font-family: var(--helm-font-plain);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ion-color-secondary);
}

/* Every figure, everywhere. */
.helm-data,
.helm-figure {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   3. The wave
   ---------------------------------------------------------------------------
   The wave is a PAGE TRANSITION, not an ornament. It appears when you navigate,
   sweeps the window, and is gone.

   There is deliberately no permanently animated wave anywhere in the chrome.
   One lived under the masthead for a while, a 7px strip of three bands drifting
   sideways forever, and it was removed: a loop that never stops is either
   ignored or irritating, and no amount of work on the curve fixed that. The
   gesture belongs to a moment.

   This is a port of the curtain on the public site (gohrt-frontend:
   src/app/shared/page-transition.ts and the curtain section of styles.scss).
   Three bands in the mark's colours sweep up and out of the window, one a beat
   after the other, while the router swaps pages underneath. Each band is a
   crest, a stretch of solid colour beneath it, and a fade to nothing — so what
   shows through a wave's tail is the page, not the wave behind it, and the
   three are never solid on top of each other.

   The curve is the public site's, unchanged: one sine period per 400px tile as
   two cubics, control points outside the box so the cubic actually reaches its
   amplitude. Used as a MASK rather than as a picture, so each crest takes its
   own band's colour and one data URI serves all three.
   --------------------------------------------------------------------------- */
:root {
  --helm-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24C42 -8 58 -8 100 24C142 56 158 56 200 24V48H0Z'/%3E%3C/svg%3E");
}

/**
 * The curtain: a fixed overlay holding the three bands.
 *
 * `pointer-events: none` is not optional — for well over a second this covers
 * the whole viewport, and without it every click in that window would land on
 * the curtain instead of the page.
 *
 * It starts hidden HERE rather than in script, so it is invisible before the
 * transition code runs and stays invisible for anyone who prefers reduced
 * motion, for whom the transition never runs at all.
 *
 * The z-index sits above the page and below Ionic's overlay container, so a
 * modal or action sheet opened during a navigation stays on top of the curtain
 * rather than under it.
 */
/**
 * How far each band drifts right as it rises, so the waves travel up and across
 * rather than straight up. The band starts this far off the left edge (see
 * `inset-inline` below) so the drift never uncovers a strip down the window.
 *
 * A Sass variable rather than only a custom property, because the sweep
 * keyframes need it as a LITERAL — see the note on compositing there.
 */
/** How far the crests roll sideways over the sweep: a swell and a half. */
[data-page-curtain] {
  --helm-crest: 56px;
  --helm-wave-drift: 240px;
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  visibility: hidden;
}

/** Shown only while a sweep is running; the directive adds and removes this. */
[data-page-curtain].is-sweeping {
  visibility: visible;
}

/**
 * One band: solid under its crest, fading to nothing below.
 *
 * Parked with its top edge at the bottom of the window, so it is off screen
 * until it is swept. Two thirds opaque as a whole, crest included: at full
 * strength three saturated brand colours crossing the entire window is a flash,
 * and a flash is the wrong thing to put in front of an operator on every page
 * change. At two thirds the page stays faintly visible through each wave and
 * the colours read as tinted water rather than paint.
 */
[data-curtain-sheet] {
  position: absolute;
  inset-inline: calc(-1 * var(--helm-wave-drift)) 0;
  inset-block-start: 100%;
  height: 60%;
  background: linear-gradient(to bottom, var(--helm-sheet) 10%, transparent);
  opacity: 0.66;
}

/* Back to front. The crest phases differ so the three waterlines do not line
   up crest over crest. These are the mark's colours in every theme — this is
   the mark passing over the page, not a themed surface. */
[data-curtain-sheet]:nth-child(1) {
  --helm-sheet: var(--helm-wave-green);
  --helm-crest-phase: 0px;
}

[data-curtain-sheet]:nth-child(2) {
  --helm-sheet: var(--helm-wave-blue);
  --helm-crest-phase: 140px;
}

[data-curtain-sheet]:nth-child(3) {
  --helm-sheet: var(--helm-wave-navy);
  --helm-crest-phase: 260px;
}

/* The crest, riding above the band. A pixel taller than the crest and set a
   pixel down into the band, so the strip overlaps the solid colour: the mask's
   bottom row is antialiased, and where it met the band edge-to-edge that row
   showed as a faint seam along the waterline. */
[data-curtain-sheet]::before {
  content: "";
  position: absolute;
  /* Far wider than the band on both sides. The crest rolls by being TRANSLATED
     (see `helm-crest-roll`), not by having its `mask-position` animated, and the
     overhang is what guarantees the roll never drags an edge into view. */
  inset-inline: -800px;
  inset-block-end: calc(100% - 1px);
  height: calc(var(--helm-crest) + 1px);
  background: var(--helm-sheet);
  mask-image: var(--helm-wave-mask);
  mask-size: 400px 100%;
  mask-repeat: repeat-x;
  mask-position: var(--helm-crest-phase) 0;
  -webkit-mask-image: var(--helm-wave-mask);
  -webkit-mask-size: 400px 100%;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: var(--helm-crest-phase) 0;
}

/**
 * The sweep.
 *
 * A wave travels its own height plus the window's: parked with its top at the
 * bottom edge, it is clear once its bottom passes the top edge. The band is 60%
 * of the window, so the window is 166.67% of the band and the whole journey is
 * 266.67% of the band's own height — which is why this is written in percent
 * and needs no viewport units and no measuring in script.
 *
 * ### The easing is the whole character of it
 *
 * Fast in, a near-hover through the middle of the window, fast out. A wave
 * arrives briskly, slows almost to a stop halfway up, then gathers itself and
 * leaves. The lull is where the crests are seen rolling sideways, and that
 * contrast — a nearly still band with its surface streaming across it — is what
 * makes the bands read as water rather than as shapes sliding past.
 *
 * The public site expresses this as a GSAP ease function, `t + 0.9·sin(2πt)/2π`
 * — a straight line with a sine term added, so speed is `1 + 0.9·cos(2πt)`:
 * fastest at the ends, slowest at t=0.5, never negative. CSS has no function
 * eases, so it is sampled at 24 points into `linear()`, which is exact enough
 * that the two are indistinguishable. Regenerate it by sampling that formula if
 * the lull is ever retuned.
 */
/** Seconds one band takes to cross, and the gap between one band and the next. */
/**
 * Nothing runs under reduced motion. The transition is decoration over a
 * navigation that happens either way, so removing it costs nothing but the
 * flourish — and a full-window sweep is exactly the kind of motion that
 * setting exists to suppress.
 */
@media (prefers-reduced-motion: no-preference) {
  [data-page-curtain].is-sweeping [data-curtain-sheet] {
    animation: helm-curtain-sweep 1s linear(0, 0.0787, 0.155, 0.2263, 0.2907, 0.3467, 0.3932, 0.43, 0.4574, 0.4763, 0.4883, 0.4954, 0.5, 0.5046, 0.5117, 0.5237, 0.5426, 0.57, 0.6068, 0.6533, 0.7093, 0.7737, 0.845, 0.9213, 1) both;
  }
  /* A beat between each, so every band is clearly its own arrival while the
     three still read as one set: the second crest enters as the first settles
     into its hover. */
  [data-page-curtain].is-sweeping [data-curtain-sheet]:nth-child(2) {
    animation-delay: 0.18s;
  }
  [data-page-curtain].is-sweeping [data-curtain-sheet]:nth-child(3) {
    animation-delay: 0.36s;
  }
  /* The crests roll sideways as the waves pass, so the surface is seen to move.
     Linear, and spanning the whole sweep rather than one band's tween: it is
     the water's own motion, steady underneath, not a second thing easing in and
     out with the band. */
  [data-page-curtain].is-sweeping [data-curtain-sheet]::before {
    animation: helm-crest-roll 1.36s linear both;
  }
}
/**
 * EVERY VALUE IN THESE KEYFRAMES IS A LITERAL, AND MUST STAY ONE.
 *
 * Both animations move `transform` and nothing else, and neither reads a custom
 * property, so the compositor can run them off the main thread.
 *
 * That matters more here than it does for most decoration, because this
 * transition fires at the exact moment the application is busiest. A navigation
 * that pulls in a lazy route chunk can occupy the main thread for a long stretch
 * — the fleet map is the worst of them — and a curtain whose whole job is to
 * cover that pause is the last thing that should be queued behind it. A
 * main-thread animation would stutter or stall precisely when it is needed.
 *
 * Two things would quietly take it off the compositor. Reading a custom
 * property (`var(--helm-wave-drift)`) forces resolution on the main thread, so
 * Sass substitutes the drift and roll as literals at build time instead — there
 * is still only one place to change them. And `mask-position`, which the crest
 * roll used at first, is not a compositable property at all; the crest strip is
 * oversized and translated instead, which looks identical and is free.
 */
@keyframes helm-curtain-sweep {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* Its own height plus the window's: the band is 60% of the window, so the
       window is 166.67% of the band and the whole journey is 266.67% of it. */
    transform: translate3d(240px, -266.67%, 0);
  }
}
@keyframes helm-crest-roll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(600px, 0, 0);
  }
}
/* ---------------------------------------------------------------------------
   4. Diagonals
   ---------------------------------------------------------------------------
   The site slices its hero into diagonal bands and rakes its scrims at 100deg.
   Here the same lean becomes the edge of a panel: a clipped corner instead of a
   rounded one, which reads as instrumentation rather than as a card.
   --------------------------------------------------------------------------- */
/**
 * A panel with its top-right and bottom-left corners cut away.
 *
 * `clip-path` rather than a border-radius so the corner is a straight bevel.
 * The cut is small and constant in px, not a percentage: a percentage bevel
 * grows with the panel and turns a wide strip into a parallelogram.
 */
.helm-panel {
  --helm-cut: 14px;
  background: var(--ion-color-step-50, transparent);
  border: 1px solid var(--ion-color-step-150, rgba(127, 127, 127, 0.18));
  clip-path: polygon(0 0, calc(100% - var(--helm-cut)) 0, 100% var(--helm-cut), 100% 100%, var(--helm-cut) 100%, 0 calc(100% - var(--helm-cut)));
}

/** A full-bleed band whose bottom edge is raked, like the site's scrims. */
.helm-band-raked {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

/* ---------------------------------------------------------------------------
   5. Live signal
   ---------------------------------------------------------------------------
   The one thing a control room needs that a public site does not: a clear,
   quiet indication that data is arriving. Cyan is the brightest brand colour
   and carries no other meaning here, so it is reserved for "this is live".
   --------------------------------------------------------------------------- */
.helm-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--helm-wave-blue);
}
.helm-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .helm-live::before {
    animation: helm-ping 2.4s ease-out infinite;
  }
}
@keyframes helm-ping {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 70%, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
/* ---------------------------------------------------------------------------
   6. Chart ground
   ---------------------------------------------------------------------------
   A faint graticule behind empty surfaces, the way a nautical chart carries
   its grid. Barely visible on purpose — it should register as texture, not as
   a grid you could count.
   --------------------------------------------------------------------------- */
.helm-chart-ground {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--helm-wave-blue) 7%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--helm-wave-blue) 7%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}