/*.input-dinob {*/
/*    background: var(--ion-background-color, #fff);*/
/*    border: 1px solid var(--ion-color-medium);*/
/*    color: var(--ion-text-color, #000);*/
/*}*/

/*.input-date-dinob {*/
/*    min-height: 38px;*/
/*}*/
.input-date-dinob[data-v-5e7b1396]::part(native) {
  background: transparent;
  padding-left: 0;
  width: 100%;
  text-align: left;
  max-height: 36px;
  --min-height: 80px !important;
}
.input-date-dinob[data-v-5e7b1396] {
  width: 100%;
}
.input-date-dinob .placeholder[data-v-5e7b1396] {
  color: rgba(var(--ion-text-color-rgb, var(--shadow-rgb)), 0.33);
}
.input-icon[data-v-5e7b1396] {
  position: absolute;
  right: 0.8em;
  bottom: 0.6em;
}

/* Css-Klasse für das Positionieren des Anzeigeauges und um dafür zu sorgen, dass die Funktion toggleInputType beim Klick auf das Anzeigeauge ausgeführt wird. */
ion-label .ion-icon[data-v-5e7b1396] {
  pointer-events: auto;
  margin-left: 8px;
}
.delete-box[data-v-5e7b1396] {
    position: absolute;
    top: 60%;               /* vertikal zentriert */
    right: 16px;            /* gleichen Abstand wie Chevron wählen */
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    cursor: pointer;
    z-index: 3;

    /* Icon-Grafik per Mask (wie gehabt) */
    background-color: var(--ion-color-slate);
    mask: url(/img/close-circle.bcd04c19.svg) center / contain no-repeat;
    -webkit-mask: url(/img/close-circle.bcd04c19.svg) center / contain no-repeat;
}


.item-input
  > ion-input
  > .native-input[type="number"]::-webkit-outer-spin-button,
.item-input
  > ion-input
  > .native-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.item-input > ion-input > .native-input[type="number"] {
  -moz-appearance: textfield;
}
.dinob-input-item {
  --border-color: #404040; /* your desired color */
  --padding-start: 1rem;
}
.dinob-input-item ion-label,
.dinob-input-item ion-label.label-floating {
  font-size: 14px;
  z-index: 3 !important;
}
.dinob-input-item ion-input input:-webkit-autofill,
.dinob-input-item ion-input input:-webkit-autofill:hover,
.dinob-input-item ion-input input:-webkit-autofill:focus,
.dinob-input-item ion-input input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: var(--ion-text-color) !important;
    caret-color: var(--ion-text-color) !important;
    z-index: 1; /* Place the autofill background below the label */
}

/* For dark mode support */
:root[data-theme="dark"] .dinob-input-item ion-input input:-webkit-autofill,
:root[data-theme="dark"] .dinob-input-item ion-input input:-webkit-autofill:hover,
:root[data-theme="dark"] .dinob-input-item ion-input input:-webkit-autofill:focus,
:root[data-theme="dark"] .dinob-input-item ion-input input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--ion-background-color) inset !important;
    -webkit-text-fill-color: var(--ion-text-color) !important;
}


.login-logo-company[data-v-538c4c78], .login-logo-company[data-v-538c4c78]::part(image) {
    height: calc(30vh - 300px);
    min-height: 100px;
}
.info-text[data-v-538c4c78] {
    color: var(--ion-color-dinob-slategray);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}


.base-button[data-v-1598ac7b] {
    --border-radius: 5px;
    --padding-end: 6px;
    --padding-start: 6px;
    margin: 4px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.bounding-box[data-v-70ec8aec] {
    height: 110px;
}
.button-container[data-v-70ec8aec] {
    border-radius: 16px;
    background: var(--ion-color-medium);
    height: 100px;
    width: 100px;
}
.button-add-file-background[data-v-70ec8aec] {
    bottom: var(--plus-offset);
    right: var(--plus-offset);
    min-height: var(--plus-min-size);
    min-width: var(--plus-min-size);
    border-radius: 50%;
    background: var(--ion-color-light);
    z-index: 9;
}
.button-add-file-plus[data-v-70ec8aec] {
    bottom: var(--plus-offset);
    right: var(--plus-offset);
    min-height: var(--plus-min-size);
    min-width: var(--plus-min-size);
    z-index: 10;
}
.button-icon[data-v-70ec8aec] {
    height: calc(100% - 1.6rem);
    width: calc(100% - 1.6rem);
}


.card-interaction-icon[data-v-3b4dbcd6] {
    min-height: 24px;
    width: auto;
    aspect-ratio: 1;
}
.delete-icon[data-v-3b4dbcd6] {
    min-height: 1.8rem !important;
}
.copy-icon[data-v-3b4dbcd6] {
    margin-right: -5px;
}
.edit-icon[data-v-3b4dbcd6] {
    margin-right: 8px;
    margin-left: 8px;
}
.edit-icon-planned[data-v-3b4dbcd6] {
    margin-right: -4px;
}
.flex-margin-right[data-v-3b4dbcd6] {
    margin-right: -5px;
}
.card-interaction-icon[data-v-3b4dbcd6]:active {
    opacity: .8;
}
.shorter-last-row > ion-row:last-of-type > ion-col[data-v-3b4dbcd6]:last-child,
.shorter-last-row > ion-row:nth-last-of-type(2) > ion-col[data-v-3b4dbcd6]:last-child {
    flex: 0 0 calc(calc(calc(9 / var(--ion-grid-columns, 12)) * 100%) - 35px);
    width: calc(calc(calc(9 / var(--ion-grid-columns, 12)) * 100%) - 35px);
    max-width: calc(calc(calc(9 / var(--ion-grid-columns, 12)) * 100%) - 35px);
}

/* Buttons in der Auftragskachel werden waagerecht angezeigt, wenn die Auftragskachel in der Auftragsübersicht geladen wird, und senkrecht, wenn die Auftragskachel in einer Esri-Karte geladen wird. */
.flex-col[data-v-3b4dbcd6] {
  flex-direction: column !important;
  align-items: flex-end; /* optional, damit Buttons linksbündig untereinander stehen */
}
.flex-row[data-v-3b4dbcd6] {
  flex-direction: row !important;
}
/* E. Großhable - 27.08.2025 */


.custom-popup[data-v-4fec6112] {
  background: white;
  width: auto;
}

/* Dynamisches Margin basierend auf der Art vom Popup und ob die Karte in einem Modal geladen wird (Abfragevariablen müssen zukünftig zentral im mapStore gespeichert werden). */
.margin-custom-popup[data-v-4fec6112] {
  margin-bottom: -5px;
}
.margin-order-popup[data-v-4fec6112] {
  margin: -5px -5px -10px -5px;
}
.margin-popup-modal[data-v-4fec6112] {
  margin: -10px -10px -12px -10px;
}
/* E. Großhable - 27.08.2025 */



.noDataIcon[data-v-4a1e8629] {
    width: 32px;
    height: 32px;
}
.noDataSubtext[data-v-4a1e8629] {
    color: var(--ion-color-slate)
}
.center-grid[data-v-4a1e8629] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}


.select-list-container[data-v-67a9d0dd] {
    height: -moz-max-content;
    height: max-content;
    max-height: calc(80vh - 6.5rem);
    overflow: auto;
}
.dinob-select-item[data-v-67a9d0dd] {
    --border-color: var(--ion-text-color, #000);
}
.dinob-select[data-v-67a9d0dd] {
    color: var(--ion-text-color, #000);
}
.dinob-select[data-v-67a9d0dd]::part(icon) {
    opacity: 1;
    color: var(--ion-color-slate)
}
ion-select[data-v-67a9d0dd]::part(icon) {
    opacity: 1;
    color: var(--ion-color-slate);
    pointer-events: auto;
}
.noLabelSelect[data-v-67a9d0dd]::part(icon) {
  position: absolute;
  right: 12px; /* oder dein gewünschter Abstand */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
}

/* Status Icon unterm Label wird nun korrekt positioniert auf allen Geräten. */
.status-icon[data-v-67a9d0dd] {
    position: absolute;
    width: 13px;
    height: 13px;
    z-index: -1;
}
/* E. Großhable - 22.05.2025 */
.status-icon-no-label[data-v-67a9d0dd] {
    top: -6px;
}
.status-icon-label[data-v-67a9d0dd] {
    top: 10px;
}

/* Delete + Chevron Icons werden nun sinnvoll korrekt angezeigt + deren Funktionalitäten funktionieren nur, wenn das Icon auch angezeigt wird. */
.no-chevron-icon[data-v-67a9d0dd]::part(icon) {
    display: none;
}
.disable-chevron-icon[data-v-67a9d0dd]::part(icon) {
    pointer-events: none;
}

/* Macht das ion-item zum Bezugssystem für absolute Elemente */
ion-item.dinob-select-item[data-v-67a9d0dd] {
    position: relative;
}

/* Icon selbst */
.delete-box[data-v-67a9d0dd] {
    position: absolute;
    top: 70%;               /* vertikal zentriert */
    right: 16px;            /* gleichen Abstand wie Chevron wählen */
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    cursor: pointer;
    z-index: 3;

    /* Icon-Grafik per Mask (wie gehabt) */
    background-color: var(--ion-color-slate);
    mask: url(/img/close-circle.bcd04c19.svg) center / contain no-repeat;
    -webkit-mask: url(/img/close-circle.bcd04c19.svg) center / contain no-repeat;
}
/* E. Großhable - 02.07.2025 */
ion-select[data-v-67a9d0dd]::part(icon) {
    opacity: 1;
    color: var(--ion-color-slate);
    pointer-events: auto;
}
ion-select[data-v-67a9d0dd]::part(placeholder) {
  opacity: 0.33;
}



.balance-row[data-v-8af3ac02] {
    width: 100%;
    padding: 0px 10px;
}
.number[data-v-8af3ac02] {
    display: inline-block;
    width: 45px;
    text-align: right;
    margin-right: 5px;
}
.unit[data-v-8af3ac02] {
    display: inline-block;
    width: 40px;
}


.toggle-container[data-v-792143e0] {
    width: 40px;
    height: 20px;
    border-radius: 10px;
    background-color: #ccc;
    display: flex;
    align-items: center;
    padding: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.toggle-switch[data-v-792143e0] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.3s ease;
}
.toggle-container.active[data-v-792143e0] {
    background-color: var(--ion-color-primary);
}
.toggle-container.active .toggle-switch[data-v-792143e0] {
    transform: translateX(20px);
}


ion-item[data-v-0c15068a] {
    --padding-start: 10px;
    --inner-padding-end: 5px;
}
ion-item ion-icon[slot="start"][data-v-0c15068a] {
    margin-inline-end: 10px;
    margin: 1;
}
ion-list[data-v-0c15068a] {
    padding-bottom: 4px;
}


.balance-row[data-v-15d3b36f] {
    width: 100%;
    padding: 0px 10px;
}
.number[data-v-15d3b36f] {
    display: inline-block;
    width: 45px;
    text-align: right;
    margin-right: 5px;
}
.unit[data-v-15d3b36f] {
    display: inline-block;
    width: 40px;
}
.fab-button[data-v-15d3b36f] {
  position: relative !important;
  display: flex;
  transform: none !important; /* optional, wenn es verschoben erscheint */
  margin-top: 8px; /* optional */
}


.balance-row[data-v-ed257bd6] {
    width: 100%;
    padding: 0px 10px;
}
.number[data-v-ed257bd6] {
    display: inline-block;
    width: 45px;
    text-align: right;
    margin-right: 5px;
}
.unit[data-v-ed257bd6] {
    display: inline-block;
    width: 40px;
}
.fab-button[data-v-ed257bd6] {
  position: relative !important;
  display: flex;
  transform: none !important;
  margin-top: 8px;
}


.card-interaction-icon[data-v-bd28a1c6] {
    min-height: 24px;
    width: auto;
    aspect-ratio: 1;
}
.delete-icon[data-v-bd28a1c6] {
    min-height: 1.8rem !important;
}
.copy-icon[data-v-bd28a1c6] {
    margin-right: -5px;
}
.edit-icon[data-v-bd28a1c6] {
    margin-right: 8px;
    margin-left: 8px;
}
.edit-icon-planned[data-v-bd28a1c6] {
    margin-right: -4px;
}
.flex-margin-right[data-v-bd28a1c6] {
    margin-right: -5px;
}
.card-interaction-icon[data-v-bd28a1c6]:active {
    opacity: .8;
}
.shorter-last-row > ion-row:last-of-type > ion-col[data-v-bd28a1c6]:last-child,
.shorter-last-row > ion-row:nth-last-of-type(2) > ion-col[data-v-bd28a1c6]:last-child {
    flex: 0 0 calc(calc(calc(9 / var(--ion-grid-columns, 12)) * 100%) - 35px);
    width: calc(calc(calc(9 / var(--ion-grid-columns, 12)) * 100%) - 35px);
    max-width: calc(calc(calc(9 / var(--ion-grid-columns, 12)) * 100%) - 35px);
}
.flex-row[data-v-bd28a1c6] {
  flex-direction: row !important;
}
/* E. Großhable - 27.08.2025 */


.balance-row[data-v-5a02c608] {
    width: 100%;
    padding: 0px 10px;
}
.number[data-v-5a02c608] {
    display: inline-block;
    width: 45px;
    text-align: right;
    margin-right: 5px;
}
.unit[data-v-5a02c608] {
    display: inline-block;
    width: 40px;
}
.fab-button[data-v-5a02c608] {
  position: relative !important;
  display: flex;
  transform: none !important; /* optional, wenn es verschoben erscheint */
  margin-top: 8px; /* optional */
}


.dark-mode-toggle[data-v-bbc8181e] {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.toggle-option[data-v-bbc8181e] {
    padding: 5px;
}
.left[data-v-bbc8181e] {
    background-color: var(--ion-color-primary);
    color: white;
}
.right[data-v-bbc8181e] {
    background-color: var(--ion-color-white);
}
.dark-mode .left[data-v-bbc8181e] {
    background-color: var(--ion-color-white);
}
.dark-mode .right[data-v-bbc8181e] {
    background-color: var(--ion-color-primary);
}


.input-error[data-v-5530a0d6] {
    padding-left: 16px;
    padding-top: 8px;
    color: var(--ion-color-danger);
}


.settings-menu[data-v-98d33230] {
    --width: 35%;
}
@media (max-width: 1050px) {
.settings-menu[data-v-98d33230] {
        --width: 100%;
}
}


.balance-row[data-v-25f8cff6] {
    width: 100%;
}
.number[data-v-25f8cff6] {
    display: inline-block;
    text-align: right;
    margin-right: 5px;
}
.unit[data-v-25f8cff6] {
    display: inline-block;
    text-align: left;
}
.custom-fab-button[data-v-25f8cff6] {
  width: 100px;
  height: 100px;
  margin: 0 20px;
}
.disabled-opacity[data-v-25f8cff6] {
    opacity: 0.2;
}
.length-measurement-menu[data-v-25f8cff6] {
    --width: 20%;
}
@media (max-width: 1050px) {
.length-measurement-menu[data-v-25f8cff6] {
        --width: 40%;
}
}

/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */

/* ! To change the default theming use this tool: https://ionicframework.com/docs/theming/color-generator */

/** Ionic CSS Variables **/
:root {
    --ion-font-family: 'Custom Font';
    --ion-text-color: #404040;
    --ion-text-color-rgb: 0, 0, 0;

    --ion-color-primary: #1970BD;
    --ion-color-primary-rgb: 25, 112, 189;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #1663a6;
    --ion-color-primary-tint: #307ec4;

    --ion-color-success: #00915E;
    --ion-color-success-rgb: 0, 145, 94;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 255, 255, 255;
    --ion-color-success-shade: #008053;
    --ion-color-success-tint: #1a9c6e;

    --ion-color-yellow: #F2C94C;;
    --ion-color-yellow-rgb: 242, 201, 76;
    --ion-color-yellow-contrast: #000000;
    --ion-color-yellow-contrast-rgb: 0, 0, 0;
    --ion-color-yellow-shade: #d5b143;
    --ion-color-yellow-tint: #f3ce5e;

    --ion-color-warning: #F28E00;
    --ion-color-warning-rgb: 242, 142, 0;
    --ion-color-warning-contrast: #ffffff;
    --ion-color-warning-contrast-rgb: 255, 255, 255;
    --ion-color-warning-shade: #d57d00;
    --ion-color-warning-tint: #f3991a;

    --ion-color-danger: #E42E49;
    --ion-color-danger-rgb: 228, 46, 73;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #c92840;
    --ion-color-danger-tint: #e7435b;

    --ion-color-light: #f8f7fa;
    --ion-color-light-rgb: 248, 247, 250;
    --ion-color-light-contrast: #000000;
    --ion-color-light-contrast-rgb: 0, 0, 0;
    --ion-color-light-shade: #dad9dc;
    --ion-color-light-tint: #f9f8fb;

    --ion-color-medium: #c2c2c7;
    --ion-color-medium-rgb: 194, 194, 199;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0, 0, 0;
    --ion-color-medium-shade: #ababaf;
    --ion-color-medium-tint: #c8c8cd;

    --ion-color-dark: #404040;
    --ion-color-dark-rgb: 64, 64, 64;
    --ion-color-dark-contrast: #ffffff;
    --ion-color-dark-contrast-rgb: 255, 255, 255;
    --ion-color-dark-shade: #383838;
    --ion-color-dark-tint: #535353;

    --ion-color-slate: #778899;
    --ion-color-slate-rgb: 119, 136, 153;
    --ion-color-slate-contrast: #000000;
    --ion-color-slate-contrast-rgb: 0, 0, 0;
    --ion-color-slate-shade: #697887;
    --ion-color-slate-tint: #8594a3;

    --ion-color-black: #404040;
    --ion-color-black-rgb: 64, 64, 64;
    --ion-color-black-contrast: #ffffff;
    --ion-color-black-contrast-rgb: 255, 255, 255;
    --ion-color-black-shade: #383838;
    --ion-color-black-tint: #535353;

    /** transparent **/
    --ion-color-transparent: transparent;
    --ion-color-transparent-rgb: 0, 0, 0;
    --ion-color-transparent-contrast: #000000;
    --ion-color-transparent-contrast-rgb: 0, 0, 0;
    --ion-color-transparent-shade: #fffff;
    --ion-color-transparent-tint: #f1f1f1;

    --ion-color-bggrey: #f8f7fa;
    --ion-color-bggrey-rgb: 245, 245, 245;
    --ion-color-bggrey-contrast: #000000;
    --ion-color-bggrey-contrast-rgb: 0, 0, 0;
    --ion-color-bggrey-shade: #d8d8d8;
    --ion-color-bggrey-tint: #f6f6f6;

    --ion-color-dinob-black: #404040;
    --ion-color-dinob-slategray: #708090;
    --ion-color-dinob-blue: #1970BD;
    --ion-color-dinob-lightblue: #E8F1F9;
    --ion-color-dinob-darkyellow: #CCA700   ;
    --ion-color-dinob-lightyellow: #FFF4C1;
    --ion-color-dinob-green: #1CB07E;
    --ion-color-dinob-lightgreen: #DEFCF2;
    --ion-color-dinob-lightred: #FBDBD9;
    --ion-color-dinob-lgraybg: #f8f7fa;
    --ion-color-dinob-lgrayborder: #c2c2c7;

    --ion-footer-shadow: #d7d8da;
    --shadow-rgb: 0, 0, 0;

    --ion-color-white: #ffffff;
    --ion-color-white-rgb: 255, 255, 255;
    --ion-color-white-contrast: #000000;

    --box-shadow-default: 0 0 4px 0 #00000040;

    /* Option hinzugefügt, den Opacity-Wert manuell ändern zu können überall. */
    --disabled-elements-opacity: 0.5;
    /* E. Großhable - 03.09.2025 */
}

.ion-color-transparent {
    --ion-color-base: var(--ion-color-transparent);
    --ion-color-base-rgb: var(--ion-color-transparent-rgb);
    --ion-color-contrast: var(--ion-color-transparent-contrast);
    --ion-color-contrast-rgb: var(--ion-color-transparent-contrast-rgb);
    --ion-color-shade: var(--ion-color-transparent-shade);
    --ion-color-tint: var(--ion-color-transparent-tint);
}

.ion-color-dark {
    --ion-color-base: var(--ion-color-dark);
    --ion-color-base-rgb: var(--ion-color-dark-rgb);
    --ion-color-contrast: var(--ion-color-dark-contrast);
    --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb);
    --ion-color-shade: var(--ion-color-dark-shade);
    --ion-color-tint: var(--ion-color-dark-tint);
}

.ion-color-slate {
    --ion-color-base: var(--ion-color-slate);
    --ion-color-base-rgb: var(--ion-color-slate-rgb);
    --ion-color-contrast: var(--ion-color-slate-contrast);
    --ion-color-contrast-rgb: var(--ion-color-slate-contrast-rgb);
    --ion-color-shade: var(--ion-color-slate-shade);
    --ion-color-tint: var(--ion-color-slate-tint);
}

.ion-color-yellow {
    --ion-color-base: var(--ion-color-yellow);
    --ion-color-base-rgb: var(--ion-color-yellow-rgb);
    --ion-color-contrast: var(--ion-color-yellow-contrast);
    --ion-color-contrast-rgb: var(--ion-color-yellow-contrast-rgb);
    --ion-color-shade: var(--ion-color-yellow-shade);
    --ion-color-tint: var(--ion-color-yellow-tint);
}

.ion-color-bggrey {
    --ion-color-base: var(--ion-color-bggrey);
    --ion-color-base-rgb: var(--ion-color-bggrey-rgb);
    --ion-color-contrast: var(--ion-color-bggrey-contrast);
    --ion-color-contrast-rgb: var(--ion-color-bggrey-contrast-rgb);
    --ion-color-shade: var(--ion-color-bggrey-shade);
    --ion-color-tint: var(--ion-color-bggrey-tint);
}

.ion-color-black {
    --ion-color-base: var(--ion-color-black);
    --ion-color-base-rgb: var(--ion-color-black-rgb);
    --ion-color-contrast: var(--ion-color-black-contrast);
    --ion-color-contrast-rgb: var(--ion-color-black-contrast-rgb);
    --ion-color-shade: var(--ion-color-black-shade);
    --ion-color-tint: var(--ion-color-black-tint);
}

/* Der Darkmode wird über den Button im Einstellungen-Fenster gesteuert. */
.dark-mode {
    /* !*
     * Dark Colors
     * -------------------------------------------
     *! */
    /* Ändert die Variablen mit den Farben des Darkmodes. */
    --ion-color-primary: #1970BD;
    --ion-color-primary-rgb: 66, 140, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #3a7be0;
    --ion-color-primary-tint: #5598ff;

    --ion-color-secondary: #50c8ff;
    --ion-color-secondary-rgb: 80, 200, 255;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #46b0e0;
    --ion-color-secondary-tint: #62ceff;

    --ion-color-tertiary: #6a64ff;
    --ion-color-tertiary-rgb: 106, 100, 255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #5d58e0;
    --ion-color-tertiary-tint: #7974ff;

    --ion-color-success: #2fdf75;
    --ion-color-success-rgb: 47, 223, 117;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 0, 0, 0;
    --ion-color-success-shade: #29c467;
    --ion-color-success-tint: #44e283;

    --ion-color-warning: #ffd534;
    --ion-color-warning-rgb: 255, 213, 52;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #e0bb2e;
    --ion-color-warning-tint: #ffd948;

    --ion-color-danger: #ff4961;
    --ion-color-danger-rgb: 255, 73, 97;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #e04055;
    --ion-color-danger-tint: #ff5b71;

    --ion-color-dark: #f4f5f8;
    --ion-color-dark-rgb: 244, 245, 248;
    --ion-color-dark-contrast: #000000;
    --ion-color-dark-contrast-rgb: 0, 0, 0;
    --ion-color-dark-shade: #d7d8da;
    --ion-color-dark-tint: #f5f6f9;

    --ion-color-medium: #989aa2;
    --ion-color-medium-rgb: 152, 154, 162;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0, 0, 0;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;

    --ion-color-light: #222428;
    --ion-color-light-rgb: 34, 36, 40;
    --ion-color-light-contrast: #ffffff;
    --ion-color-light-contrast-rgb: 255, 255, 255;
    --ion-color-light-shade: #1e2023;
    --ion-color-light-tint: #383a3e;

    --ion-color-black: #ffffff;
    --ion-color-black-rgb: 64, 64, 64;
    --ion-color-black-contrast: #ffffff;
    --ion-color-black-contrast-rgb: 255, 255, 255;
    --ion-color-black-shade: #383838;
    --ion-color-black-tint: #535353;

    --ion-color-transparent: transparent;
    --ion-color-transparent-rgb: 0, 0, 0;
    --ion-color-transparent-contrast: #ffffff;
    --ion-color-transparent-contrast-rgb: 0, 0, 0;
    --ion-color-transparent-shade: #000000;
    --ion-color-transparent-tint: #a1a1a1;
    
    --ion-color-bggrey: #222428;
    --ion-color-bggrey-rgb: 245, 245, 245;
    --ion-color-bggrey-contrast: #000000;
    --ion-color-bggrey-contrast-rgb: 0, 0, 0;
    --ion-color-bggrey-shade: #d8d8d8;
    --ion-color-bggrey-tint: #f6f6f6;

    --ion-color-white: #222428;
    --ion-color-white-rgb: 0, 0, 0;
    --ion-color-white-contrast: #000000;

    --ion-footer-shadow: #0A0A0A;

    --ion-color-dinob-black: #ffffff;
    --ion-color-dinob-slategray: #708090;
    --ion-color-dinob-blue: #1970BD;
    --ion-color-dinob-green: #1CB07E;
    --ion-color-dinob-lgraybg: #222428;
    --ion-color-dinob-lgrayborder: #c2c2c7;

    /* !*
     * iOS Dark Theme
     * -------------------------------------------
     *! */
    /* .ios body {
        --ion-background-color: #000000;
        --ion-background-color-rgb: 0, 0, 0;

        --ion-text-color: #ffffff;
        --ion-text-color-rgb: 255, 255, 255;

        --ion-color-step-50: #0d0d0d;
        --ion-color-step-100: #1a1a1a;
        --ion-color-step-150: #262626;
        --ion-color-step-200: #333333;
        --ion-color-step-250: #404040;
        --ion-color-step-300: #4d4d4d;
        --ion-color-step-350: #595959;
        --ion-color-step-400: #666666;
        --ion-color-step-450: #737373;
        --ion-color-step-500: #808080;
        --ion-color-step-550: #8c8c8c;
        --ion-color-step-600: #999999;
        --ion-color-step-650: #a6a6a6;
        --ion-color-step-700: #b3b3b3;
        --ion-color-step-750: #bfbfbf;
        --ion-color-step-800: #cccccc;
        --ion-color-step-850: #d9d9d9;
        --ion-color-step-900: #e6e6e6;
        --ion-color-step-950: #f2f2f2;

        --ion-item-background: #000000;

        --ion-card-background: #1c1c1d;
    }

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


    /* !*
     * Material Design Dark Theme
     * -------------------------------------------
     *! */
    --ion-background-color: #222428;
    --ion-background-color-rgb: 18, 18, 18;

    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;

    --ion-border-color: #222222;

    --ion-color-step-50: #1e1e1e;
    --ion-color-step-100: #2a2a2a;
    --ion-color-step-150: #363636;
    --ion-color-step-200: #414141;
    --ion-color-step-250: #4d4d4d;
    --ion-color-step-300: #595959;
    --ion-color-step-350: #656565;
    --ion-color-step-400: #717171;
    --ion-color-step-450: #7d7d7d;
    --ion-color-step-500: #898989;
    --ion-color-step-550: #949494;
    --ion-color-step-600: #a0a0a0;
    --ion-color-step-650: #acacac;
    --ion-color-step-700: #b8b8b8;
    --ion-color-step-750: #c4c4c4;
    --ion-color-step-800: #d0d0d0;
    --ion-color-step-850: #dbdbdb;
    --ion-color-step-900: #e7e7e7;
    --ion-color-step-950: #f3f3f3;

    --ion-item-background: #1e1e1e;

    --ion-toolbar-background: #1f1f1f;

    --ion-tab-bar-background: #1f1f1f;

    --ion-card-background: #1e1e1e;
}
/* Enrico - 24.08.2023 */
.no-padding-grid {
    --ion-grid-padding: 0;
    --ion-grid-column-padding: 0;
}

.no-padding-y {
    padding: 0 5px !important;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.no-padding-top {
    padding: 0 5px 5px !important;
}

.item-input .sc-ion-label-md-h.base-input-error, .item-select .sc-ion-label-md-h.base-input-error, .item-textarea .sc-ion-label-md-h.base-input-error {
    max-width: none;
    width: 100vw;
}

.max-height {
    height: 100%;
}

.height-fit {
    height: -moz-fit-content;
    height: fit-content;
}

.max-width {
    width: 100%;
}

.max-height-100 {
    max-height: 100%;
}

.max-width-100 {
    max-width: 100%;
}

.fixed-height125 {
    min-height: 1.25rem;
    max-height: 1.25rem;
}

.fixed-height185 {
    min-height: 1.85rem;
    max-height: 1.85rem;
}

.vw-100 {
    width: 100vw;
}

.vh-100 {
    height: 100vh;
}

.input-height {
    height: 38px;
}

.no-max-width {
    max-width: none !important;
}

.no-max-width-label.item-input .fixed-label-width {
    max-width: none;
}

.flex-grow-1 {
    flex-grow: 1;
}

.icon-image {
    max-height: 16px;
    max-width: 16px;
}

.base-button.no-button-padding::part(native) {
    padding: 0;
}

.center-gap > ion-row > ion-col {
    padding: var(--gap-top, 5px) var(--gap-right, 5px) var(--gap-bottom, 5px) var(--gap-left, 5px);
}

/*.center-gap > ion-row > ion-col:first-child {*/
/*    padding: 5px 5px 5px 0;*/
/*}*/

/*.center-gap > ion-row > ion-col:last-child {*/
/*    padding: 5px 0 5px 5px;*/
/*}*/

.ion-col-padding-h {
    --ion-grid-column-padding: 5px;
}

.ion-col-padding-h > ion-col {
    padding-top: 0;
    padding-bottom: 0;
}

.ion-col-padding-h > ion-col:first-child {
    padding-left: 0;
}

.ion-col-padding-h > ion-col:last-child {
    padding-right: 0;
}

.mb-1 {
    margin-bottom: .5rem;
}

.mb-2 {
    margin-bottom: 0.75rem;
}

.mt-2 {
    margin-top: 0.75rem
}

.mt-1 {
    margin-top: 0.50rem
}

.mr-3 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.75rem;
}

.mr-1 {
    margin-right: 0.5rem;
}

.ion-mr-2 {
    margin-right: 0.75rem;
}

.ion-mr-1 {
    margin-right: 0.5rem;
}

.ml-1 {
    margin-left: 0.5rem;
}

.ion-ml-1 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 0.25rem;
}

.ion-ml-3 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.75rem;
}

.ion-ml-2 {
    margin-left: 0.75rem;
}

.my-1 {
    margin-top: .25em;
    margin-bottom: .25em;
}

.my-2 {
    margin-top: .75em;
    margin-bottom: .75em;
}

.px-3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-1 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.py-2 {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.pl-1 {
    padding-left: .25rem;
}

.pl-2 {
    padding-left: .5rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

.ion-pl-1 {
    --padding-left: .25rem;
}

.ion-pl-2 {
    --padding-left: .5rem;
}

.ion-pl-3 {
    --padding-left: .75rem;
}

.ion-pl-4 {
    --padding-left: .1rem;
}

.pr-1 {
    padding-right: .25rem;
}

.pr-2 {
    padding-right: .5rem;
}

.pr-3 {
    padding-right: .75rem;
}

.pr-4 {
    padding-right: 1rem;
}

.ion-pr-1 {
    padding-right: .25rem;
}

.ion-pr-2 {
    padding-right: .5rem;
}

.ion-pr-3 {
    padding-right: .75rem;
}

.ion-pr-4 {
    padding-right: 1rem;
}

.custom-icon-large {
    font-size: 2rem;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-bottom-page {
    padding-bottom: 9rem;
}

.pt-1 {
    padding-top: .25rem
}

.pt-2 {
    padding-top: .5rem
}

.pt-3 {
    padding-top: .75rem
}

.pt-4 {
    padding-top: 1rem
}

.p-2 {
    padding: .75em;
}

.p-1 {
    padding: .5em;
}

.no-item-padding::part(native) {
    padding-left: 0;
}

.col-p-1 {
    --ion-grid-column-padding: 0.5rem;
}

.no-inherit-col-padding {
    padding: .5rem !important;
}

.capped-width > ion-row {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.capped-small > ion-row {
    max-width: 500px;
}

.cap-width {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.fixed-height-60 {
    min-height: 60px;
}

.min-width-TrackingSummary {
    min-width: 88px;
}
.broder-top {
    border: 1px solid var(--ion-toolbar-border-color);
}

.shadow-top {
    box-shadow: 0 -1px 1px 1px var(--ion-footer-shadow, var(--ion-background-color));
}

.border-medium {
    border: 1px solid var(--ion-color-medium);
    border-radius: 5px;
}

.ion-border-medium {
    --border-width: 1px;
    --border-style: solid;
    --border-color: var(--ion-color-medium);
}

.card-shadow {
    border-style: solid;
    border-width: 1px;
    border-color: var(--ion-color-dinob-lgrayborder, #fff);
}

.line {
    border-top: 1px solid;
    border-color: var(--ion-color-dinob-lgrayborder, #fff);
}

.border-bottom-lines {
    border-bottom: 0.55px solid var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))))
}

.accordion-shadow::part(header), .accordion-shadow.accordion-collapsed, .accordion-shadow.accordion-collapsing {
    box-shadow: 0 0 2px var(--ion-footer-shadow, var(--ion-background-color)),
    0 2px 2px var(--ion-footer-shadow, var(--ion-background-color)),
    0 1px 3px var(--ion-footer-shadow, var(--ion-background-color));
}


.custom-popover::part(content) {
    width: auto;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

@media (min-width: 576px) {
    .custom-popover::part(content) {
        max-width: 500px;
        min-width: 400px;
    }

    .custom-popover.sm::part(content) {
        max-width: 300px;
        min-width: 250px;
    }
}

@media (min-width: 992px) {
    .custom-popover.lg::part(content), .custom-popover.xl::part(content) {
        max-width: 800px;
        min-width: 700px;
    }
}

@media (min-width: 1200px) {
    .custom-popover.xl::part(content) {
        max-width: 1140px;
        min-width: 1100px;
    }
}

.d-flex {
    display: flex;
}

.overflow-auto {
    overflow: auto;
}
.p-relative {
    position: relative;
}

.p-sticky {
    position: sticky;
}

.p-aboslute {
    position: absolute;
}

.s-tl-grid {
    top: 0;
    left: 0;
    z-index: 100;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-vertical {
    display: flex;
    align-items: center;
}

.center-horizontal {
    display: flex;
    justify-content: center;
}

.center-right {
    display: flex;
    align-items: center;
    justify-content: right;
}

.center-left {
    display: flex;
    align-items: center;
    justify-content: left;
}

.flex-d-c {
    flex-direction: column;
}

.m-auto {
    margin: auto;
}

.isolate {
    isolation: isolate;
}

/* Positioniert das No-Data-Element innerhalb eines Containers in der Mitte. */
.center-no-data {
    display: flex;
    height: calc(100vh - 50vh); /* anpassen je nach Header / Footer */
    width: 100%;
}

/* Positioniert das No-Data-Element EXAKT in der Mitte des gesamten Bildschirms auf egal welchem Endgerät. */
.display-center-no-data {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* E. Großhable - 04.06.2025 */
.cursor-pointer {
    cursor: pointer;
}
.font-size-50 {
    font-size: 0.5rem;
}

.font-size-75 {
    font-size: 0.75rem;
}

.font-size-75-nc {
    font-size: 0.75rem;
}

.font-size-90 {
    font-size: 0.9rem;
}

.font-size-90-nc {
    font-size: 0.9rem;
}

.font-size-100 {
    font-size: 1rem;
}

.font-size-100-nc {
    font-size: 1rem;
}

.ion-font-size-100 {
    font-size: 1rem;
}

.font-size-125 {
    font-size: 1.25rem;
}

.font-size-125-nc {
    font-size: 1.25rem;
}

.font-size-150 {
    font-size: 1.5rem;
}

.font-size-175 {
    font-size: 1.75rem;
}

.font-size-200 {
    font-size: 2rem;
}

.font-size-225 {
    font-size: 2.25rem;
}

.font-size-250 {
    font-size: 2.5rem;
}

.font-size-50, .font-size-75, .font-size-90, .font-size-100, .font-size-125, .font-size-150, .font-size-175, .font-size-200 {
    font-family: 'Custom Font', 'Helvetica', 'Arial', 'sans-serif' !important;
}

.font-size-50, .font-size-75, .font-size-90, .font-size-100, .font-size-125, .font-size-150, .font-size-175, .font-size-200 {
    color: var(--ion-color-dinob-black);
}

.font-family-dinob{
    font-family: 'Custom Font', 'Helvetica', 'Arial', 'sans-serif' !important;
}

/* Extra zuweisung der Schriftart für die unterelemente der Auswahllisten */
ion-label {
    font-family: 'Custom Font', 'Helvetica', 'Arial', 'sans-serif' !important;
}

.sc-ion-label-md-h {
    font-size: 1rem !important;
    font-family: 'Custom Font', 'Helvetica', 'Arial', 'sans-serif' !important;
  }

@font-face {
    font-family: 'Custom Font';
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
    src:    local('Custom Font'),
            url(/fonts/Roboto-regular.4b98f76b.woff) format('woff');
}

@font-face {
    font-family: 'Custom Font Bold';
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
    src:    local('Custom Font'),
            url(/fonts/Roboto-SemiBold.1c026072.woff) format('woff');
}
.color-slate {
    color: var(--ion-color-dinob-slategray)
}

.color-medium {
    color: var(--ion-color-medium)
}

.color-dinob-black {
    color: var(--ion-color-dinob-black);
}

.color-dinob-slategray {
    color: var(--ion-color-dinob-slategray);
}

.color-dinob-blue {
    color: var(--ion-color-dinob-blue);
}

.color-dinob-lightblue {
    color: var(--ion-color-dinob-lightblue);
}

.color-dinob-darkyellow {
    color: var(--ion-color-dinob-darkyellow);
}

.color-dinob-lightyellow {
    color: var(--ion-color-dinob-lightyellow);
}

.color-dinob-green {
    color: var(--ion-color-dinob-green);
}

.color-dinob-lightgreen {
    color: var(--ion-color-dinob-lightgreen);
}
.color-dinob-stdwhite {
   color: var(--ion-color-white)
}

.color-dinob-lgraybg {
    color: var(--ion-color-dinob-lgraybg);
}

.color-dinob-lgrayborder {
    color: var(--ion-color-dinob-lgrayborder);
}


.color-success {
    color: var(--ion-color-success);
}

.color-warning {
    color: var(--ion-color-warning);
}

.color-default {
    color: var(--ion-text-color, #000);
}

.color-primary {
    color: var(--ion-color-primary);
}

.color-black {
    color: var(--ion-color-black);
}

.svg-mask.color-success {
    background: var(--ion-color-success);
}

.color-disabled {
    color: #939393 !important;
}

.danger-error .item-input .base-input-error {
    color: var(--ion-color-danger);
}

.danger-error {
    color: var(--ion-color-danger);
}

.icon-color-black{
    fill: var(--ion-color-dinob-black);
    stroke: var(--ion-color-dinob-black);
}

/* .bc1{
    background-color: aqua;
}

.bc2{
    background-color: greenyellow;
}

.bc3{
    background-color: darkorange;
}

.bc4{
    background-color: burlywood;
} */

.overflow-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    text-wrap: none;
    overflow: hidden;
}

.whitespace-default {
    white-space: normal;
}

.whitespace-no-wrap {
    white-space: nowrap;
}

.no-ellipsis {
    white-space: normal !important;
}

.force-a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
}

.font-bold {
    /* font-weight: bold; */
    font-family: 'Custom Font Bold', 'Helvetica', 'Arial', 'sans-serif' !important;
}

.font-500 {
    font-weight: 500;
}

.font-center{
    text-align: center;
}

.bg-primary {
    background-color: var(--ion-color-primary);
}

.bg-secondary {
    background-color: var(--ion-color-secondary);
}

.bg-tertiary {
    background-color: var(--ion-color-tertiary);
}

.bg-light {
    background-color: var(--ion-color-light);
}

.bg-medium {
    background-color: var(--ion-color-medium);
}

.ion-bg-white {
    --background: var(--ion-color-dark) !important;
}

.bg-dark {
    background-color: var(--ion-color-dark);
}

.bg-success {
    background-color: var(--ion-color-success);
}

.bg-warning {
    background-color: var(--ion-color-warning);
}

.bg-danger {
    background-color: var(--ion-color-danger);
}

.bg-yellow {
    background-color: var(--ion-color-yellow);
}

.bg-default {
    --background: var(--ion-background-color, #fff);
}

.ion-bg-medium {
    --background: var(--ion-color-medium);
}

.svg-image.ion-color-success {
    fill: var(--ion-color-success);
}

.bg-bggrey {
    background-color: var(--ion-color-bggrey);
}

.ion-bg-bggrey {
    --background: var(--ion-color-bggrey) !important;
}

.ion-bg-white {
    --background: var(--ion-color-dinob-lgraybg) !important;
}

.bg-white {
    background: var(--ion-color-dinob-lgraybg) !important;
}

.bg-std-white {
    background: var(--ion-color-white) !important;
}

.read-only[aria-disabled="true"] :is(ion-label, ion-toggle),
[aria-disabled="true"] .read-only {
    opacity: 1 !important;
}

.some-class {
    filter: invert(48%) sepia(79%) saturate(100%) hue-rotate(86deg) brightness(118%) contrast(119%);
  }

.alert-title.sc-ion-alert-md{
    font-family: 'Custom Font', 'Helvetica', 'Arial', 'sans-serif' !important;
    font-size: 1rem;
    color: var(--ion-color-dinob-black);
    font-weight: 500;
    /* text-decoration: underline; */
}

.alert-button.sc-ion-alert-md {
    font-family: 'Custom Font', 'Helvetica', 'Arial', 'sans-serif' !important;
    font-size: 1rem;
}



:root {
    --input-label-width: auto;
    --gap-left: 5px;
    --gap-right: 5px;
    --gap-top: 5px;
    --gap-bottom: 5px;
    --plus-offset: -10px;
    --plus-min-size: 40px;
}

.settings-modal {
    --width: 75vw;
}

.settings-modal > div {
    position: absolute;
    right: 0;
}

.select-search-modal {
    --width: 90vw;
    --min-width: 300px;
    --max-width: 600px;
    --height: 80vh;
    --border-radius: 5px;
    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4) !important;
    --backdrop-opacity: 0.4 !important;
}


.ios .select-search-modal {
    --height: 80vh;
}

.ios .select-search-modal .select-list-container {
    max-height: calc(80vh - 107px);
}

.booking-segment {
    /* --background: var(--ion-color-white);
    box-shadow: var(--box-shadow-default); */
}

.booking-segment > [aria-selected="true"] {
    --color: var(--ion-color-primary);
}

.booking-overview-card {
    padding: .5rem .5rem;
    border-radius: 5px;
    --ion-grid-column-padding: .2rem;
}

.booking-popup-card {
    --ion-grid-column-padding: .2rem;
}

.status-icon {
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

.card-tracking {
    /* box-shadow: 0 0 4px 0 rgba(var(--ion-text-color-rgb, var(--shadow-rgb)), .25); */
    border-style: solid;
    border-width: 1px;
    border-color: var(--ion-color-dinob-lgrayborder, #fff);
    padding: .5rem;
    background: var(--ion-color-white, #fff);
    border-radius: 5px;
}

.card-tracking-skeleton {
    height: 70px;
    border-radius: 5px;
}

.read-only > .checkbox-disabled {
    opacity: 1;
}

.read-only > [aria-disabled="true"] > .native-input {
    opacity: 1;
}

.read-only {
    opacity: 1;
}

.svg-mask {
    display: inline-block;
    background: var(--ion-color-dark);
    -webkit-mask-size: cover !important;
            mask-size: cover !important;
}

.svg-small {
    width: 19px;
    height: 19px;
}

.mask-edit {
    -webkit-mask: url(/img/edit.6b47c0b0.svg);
            mask: url(/img/edit.6b47c0b0.svg)
}


.mask-gps {
    -webkit-mask: url(/img/gps.489f2bf8.svg);
            mask: url(/img/gps.489f2bf8.svg)
}

ion-button.ion-color-transparent {
    --box-shadow: none;
}

ion-button.select-search-modal-choice {
    --ion-color-contrast: var(--ion-color-primary) !important;
}

.custom-login-button {
    height: 3.5rem;
    /* font-family: 'Custom Font', 'Helvetica', 'Arial', 'sans-serif' !important; */
    /* font-size: 1rem; */
}

.custom-module-button {
    height: 3.5rem;
}

.button-no-layout-impact {
    position: absolute;
    top: -15px; right: 0px;
}

.button-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .button-wrapper::before {
    content: "";
    position: absolute;
    top: -15px; right: -15px; bottom: -15px; left: -15px; /* Adjust the clickable area */
    z-index: -1;
    cursor: pointer;
  }
  

.clear-no-transparent .input-clear-icon {
    visibility: unset;
}

.clear-no-transparent .input-clear-icon:focus {
    opacity: 1;
}

.clear-no-transparent .input-clear-icon:active {
    opacity: 0.5;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type=number] {
  -webkit-appearance: textfield !important;
     -moz-appearance: textfield !important;
          appearance: textfield !important;
}
.full-width-alert .alert-wrapper {
    width: 90vw;
    --max-width: 400px;
}

.full-width-alert .alert-wrapper > .alert-radio-group > .select-interface-option .alert-radio-label {
    white-space: normal;
}



/*body, #app, ion-app, .ion-page, ion-tabs {*/
/*    !*background-color: var(--ion-color-bggrey);*!*/
/*    background-color: red;*/
/*}*/

.ripple-parent {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}

ion-toast.dinob-toast {
    --ion-safe-area-bottom: 140px !important;
    text-align: center;
}

ion-toast.dinob-toast-textcolor-white {
    color: var(--ion-color-white)
}