:root {
  --sidebar-max-width: 150px;

  /* adjust color scheme */
  /* --color-primary: #1da966; */
  /* --color-primary: #1da966; */
  /* --color-primary:#387e6a; */
  /* --color-primary:#06b186; */
  --hue-primary: 165;
  --color-primary: hsl(var(--hue-primary), 93%, 36%); /* =#06b186 */
  --color-primary-o18: color-mix(in hsl, var(--color-primary) 18%, transparent);
  --color-primary-o30: color-mix(in hsl, var(--color-primary) 30%, transparent);

  /*rgb(56, 126, 106)*/
  /*hsl(162.86deg 38.46% 35.69%)*/
  --color-primary-50: hsl(var(--hue-primary) 98.88% 94.67%);
  --color-primary-100: hsl(var(--hue-primary) 97.86% 89.33%);
  --color-primary-200: hsl(var(--hue-primary) 96.11% 78.67%);
  --color-primary-300: hsl(var(--hue-primary) 94.75% 68%);
  --color-primary-400: hsl(var(--hue-primary) 93.78% 57.33%);
  --color-primary-500: hsl(var(--hue-primary) 93.19% 46.67%);
  --color-primary-600: var(--color-primary);
  --color-primary-700: hsl(var(--hue-primary) 93.19% 25.33%);
  --color-primary-800: hsl(var(--hue-primary) 93.78% 14.67%);
  --color-primary-900: hsl(var(--hue-primary) 94.75% 4%);

  --primary-gray-50: hsl(var(--hue-primary) 10% 97%);
  --primary-gray-100: hsl(var(--hue-primary) 10% 95%);
  --primary-gray-200: hsl(var(--hue-primary) 6% 90%);
  --primary-gray-300: hsl(var(--hue-primary) 6% 78%);
  --primary-gray-400: hsl(var(--hue-primary) 5% 65%);
  --primary-gray-500: hsl(var(--hue-primary) 5% 52%);
  --primary-gray-600: hsl(var(--hue-primary) 5% 40%);
  --primary-gray-700: hsl(var(--hue-primary) 6% 30%);
  --primary-gray-800: #303635;
  --primary-gray-900: hsl(var(--hue-primary) 7% 10%);

  --gray-50: var(--primary-gray-50);
  --gray-100: var(--primary-gray-100);
  --gray-200: var(--primary-gray-200);
  --gray-300: var(--primary-gray-300);
  --gray-400: var(--primary-gray-400);
  --gray-500: var(--primary-gray-500);
  --gray-600: var(--primary-gray-600);
  --gray-700: var(--primary-gray-700);
  --gray-800: var(--primary-gray-800);
  --gray-900: var(--primary-gray-900);

  --link-color: var(--color-primary);
  --link-hover-color: var(--color-primary-700);
  --text-color-dark: var(--gray-800);
  --text-color-light: var(--gray-400);
  --border-color: var(--gray-200);

  --table-hover-cell-bg: var(--gray-100);

  /* --sidebar-menu-badge-bg: var(--color-primary-100); */
  /* --sidebar-menu-badge-active-color: var(--color-primary-50); */
  --resize-handler-hover-bg: var(--color-primary-600);
  --form-switch-checked-bg: var(--color-primary-500);
  --form-type-check-input-checked-bg: var(--color-primary-500);
  --badge-primary-bg: var(--color-primary-100);
  --badge-primary-color: var(--text-indigo-600);
  --alert-primary-bg: var(--color-primary-100);
  --alert-primary-color: var(--color-primary-800);
  --alert-primary-border-color: var(--color-primary-200);

  --gray-50-o10: color-mix(in hsl, var(--gray-50) 10%, transparent);
  --gray-100-o10: color-mix(in hsl, var(--gray-100) 10%, transparent);
  --gray-200-o10: color-mix(in hsl, var(--gray-200) 10%, transparent);
  --gray-300-o10: color-mix(in hsl, var(--gray-300) 10%, transparent);
  --gray-400-o10: color-mix(in hsl, var(--gray-400) 10%, transparent);
  --gray-500-o10: color-mix(in hsl, var(--gray-500) 10%, transparent);
  --gray-600-o10: color-mix(in hsl, var(--gray-600) 10%, transparent);
  --gray-700-o10: color-mix(in hsl, var(--gray-700) 10%, transparent);
  --gray-800-o10: color-mix(in hsl, var(--gray-800) 10%, transparent);
  --gray-900-o10: color-mix(in hsl, var(--gray-900) 10%, transparent);

  --gray-900-o05: color-mix(in hsl, var(--gray-900) 5%, transparent);

  --gray-500-o0: transparent;
  --gray-500-o10: color-mix(in hsl, var(--gray-500) 10%, transparent);
  --gray-500-o20: color-mix(in hsl, var(--gray-500) 20%, transparent);
  --gray-500-o30: color-mix(in hsl, var(--gray-500) 30%, transparent);
  --gray-500-o40: color-mix(in hsl, var(--gray-500) 40%, transparent);
  --gray-500-o50: color-mix(in hsl, var(--gray-500) 50%, transparent);
  --gray-500-o60: color-mix(in hsl, var(--gray-500) 60%, transparent);
  --gray-500-o70: color-mix(in hsl, var(--gray-500) 70%, transparent);
  --gray-500-o80: color-mix(in hsl, var(--gray-500) 80%, transparent);
  --gray-500-o90: color-mix(in hsl, var(--gray-500) 90%, transparent);
  --gray-500-o100: var(--gray-500);

  --button-active-primary-shadow: 0 0 0 1px var(--gray-300),
    0 0 0 4px var(--color-primary-200), 0 1px 1px 0 var(--gray-900-o10),
    0 2px 5px 0 var(--gray-700-o10), 0 3px 9px 0 var(--gray-700-o10);
  --box-shadow-lg: 0 10px 15px -3px var(--gray-900-o10),
    0 4px 6px -2px var(--gray-900-o10);
  --content-panel-bg: var(--gray-50);
  --fieldset-bg: var(--gray-50);

  --bs-light: var(--gray-100);
  --bs-dark: var(--gray-900);
  --bs-gray: var(--gray-600);
  --bs-gray-dark: var(--gray-800);
  --bs-gray-100: var(--gray-100);
  --bs-gray-200: var(--gray-200);
  --bs-gray-300: var(--gray-300);
  --bs-gray-400: var(--gray-400);
  --bs-gray-500: var(--gray-500);
  --bs-gray-600: var(--gray-600);
  --bs-gray-700: var(--gray-700);
  --bs-gray-800: var(--gray-800);
  --bs-gray-900: var(--gray-900);
  --bs-primary: var(--color-primary);
  /*
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #6174d1;
    --bs-secondary: #e3e7ed;
    --bs-success: #1ea471;
    --bs-info: #0679b7;
    --bs-warning: #d97817;
    --bs-danger: #cd3c63;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 97,116,209;
    --bs-secondary-rgb: 227,231,237;
    --bs-success-rgb: 30,164,113;
    --bs-info-rgb: 6,121,183;
    --bs-warning-rgb: 217,120,23;
    --bs-danger-rgb: 205,60,99;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-body-color-rgb: 76,83,103;
    --bs-body-bg-rgb: 227,231,237;
    --bs-font-sans-serif: var(--font-family-sans-serif);
    --bs-font-monospace: var(--font-family-monospace);
    --bs-gradient: linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));
    --bs-body-font-family: var(--font-family-base);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #4c5367;
    --bs-body-bg: #e3e7ed;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0,0,0,.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-hover-color);
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd
*/
}

:root * {
  --sidebar-max-width: 205px;
  transition: color 0.5s, background-color 0.5s, border-color 0.5s;
}

/* fix height overflow */
body,
html {
  height: initial;
  min-height: 100vh;
  margin: 0;
}

a.btn-disabled,
button:disabled {
  background-color: var(--gray-600) !important;
  border-color: var(--gray-400-o10) !important;
}

/*
TODO:
link --bs-... vars to ea app var variants in standard
*/
.ea-dark-scheme {
  --color-primary: hsl(var(--hue-primary), 93%, 36%); /* =#06b186 */
  --link-color: var(--color-primary-400);
  --link-hover-color: var(--color-primary-300);
  --border-color: var(--gray-900);
  --table-hover-cell-bg: var(--true-gray-800);
  /* --color-primary: #1da966; */
  /* --color-primary:#387e6a; */

  --bs-border-color: var(--border-color);
  --bs-body-color: var(--text-color-light);
  --bs-body-bg: var(--body-bg);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.3);
  --bs-modal-bg: var(--modal-bg);

  /* --sidebar-menu-badge-active-bg: var(--color-primary-800); */
  --sidebar-menu-active-item-bg: var(--color-primary);
  /* --sidebar-menu-active-item-color: var(--color-primary-400); */
  --resize-handler-hover-bg: var(--color-primary-400);
  --pagination-active-bg: var(--color-primary-500);
  --form-switch-checked-bg: var(--color-primary-600);
  --form-type-check-input-checked-bg: var(--color-primary-600);
  --badge-boolean-true-box-shadow: inset 0 0 0 1px var(--color-primary-o30);
  --badge-boolean-true-bg: var(--color-primary-o18);
  --badge-boolean-true-color: var(--color-primary);
  --badge-primary-bg: var(--color-primary-o18);
  --badge-primary-box-shadow: inset 0 0 0 1px var(--color-primary-o30);
  --badge-primary-color: var(--color-primary);

  --alert-primary-bg: var(--color-primary-900);
  --alert-primary-color: var(--color-primary-100);
  --alert-primary-border-color: var(--color-primary-800);
  --button-primary-bg: var(--color-primary);
  --box-shadow-lg: 0 10px 15px -3px var(--gray-900-o10),
    0 4px 6px -2px var(--gray-900-o05);
  --content-panel-bg: var(--true-gray-800);
  --fieldset-bg: var(--true-gray-800);
  --page-login-form-control-button-bg: var(--color-primary-700);

  --text-tertiary-color: var(--true-gray-400);
  --responsive-table-label-color: var(--true-gray-400);
  --sidebar-menu-icon-color: var(--true-gray-400);
  --content-search-icon-color: var(--true-gray-400);
  --user-avatar-icon-color: var(--true-gray-400);
  --user-name-color: var(--true-gray-400);
  --dropdown-toggle-hover-border-color: var(--true-gray-400);
  --dropdown-settings-icon-color: var(--true-gray-400);
  --dropdown-settings-active-item-shadow: inset 0 0 0 1px var(--true-gray-400);
  --table-thead-marker-color: var(--true-gray-400);
  --form-help-color: var(--true-gray-400);
  --form-panel-help-color: var(--true-gray-400);
  --form-panel-icon-color: var(--true-gray-400);
}

.ea-dark-scheme .accordion {
  --bs-accordion-color: var(--text-color-light);
  --bs-accordion-bg: var(--true-gray-800);
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-btn-color: var(--bs-accordion-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-focus-border-color: var(--true-gray-600);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--color-primary-o30);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--color-primary-400);
  --bs-accordion-active-bg: var(--true-gray-700);
}

.ea-dark-scheme div.form-control {
  background-color: var(--form-control-bg);
  border: 1px solid var(--form-input-border-color);
  box-shadow: var(--form-input-shadow);
  color: var(--form-input-text-color);
}

.bg-lightgray-o80  {
  background-color: color-mix(in hsl, var(--gray-300) 80%, transparent);
  color: var(--gray-900)
}
.bg-mediumgray-o80 { 
  background-color: color-mix(in hsl, var(--gray-500) 80%, transparent);
  color: var(--gray-900)
}
.bg-darkgray-o80   { 
  background-color: color-mix(in hsl, var(--gray-800) 80%, transparent);
  color: var(--gray-100)
}



.bg-gray-o0 { background-color: var(--gray-500-o0);}
.bg-gray-o10 { background-color: var(--gray-500-o10);}
.bg-gray-o20 { background-color: var(--gray-500-o20);}
.bg-gray-o30 { background-color: var(--gray-500-o30);}
.bg-gray-o40 { background-color: var(--gray-500-o40);}
.bg-gray-o50 { background-color: var(--gray-500-o50);}
.bg-gray-o60 { background-color: var(--gray-500-o60);}
.bg-gray-o70 { background-color: var(--gray-500-o70);}
.bg-gray-o80 { background-color: var(--gray-500-o80);}
.bg-gray-o90 { background-color: var(--gray-500-o90);}
.bg-gray-o100 { background-color: var(--gray-500-o100);}

.status-color.status.submitted,
.status-color.status.inactive,
.status-color.status.preview {
  color: orange;
}

.status-color.status.approved,
.status-color.status.active,
.status-color.status.visible,
.status-color.status.published {
  color: green;
}

.status-color.status.completed,
.status-color.status.invis,
.status-color.status.deleted {
  color: grey;
}

.action-approve-report {
  background-color: green;
}

#edit-Report-form {
  /* copied from .row */
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-top: calc(var(--bs-gutter-y) * -1);
}

#edit-Report-form > * {
  flex-shrink: 0;
  margin-top: var(--bs-gutter-y);
  max-width: 100%;
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  /* width: 100%; */
}

#edit-Report-form .image-container > fieldset {
  position: sticky;
  top: 0;
  overflow-y: auto;
  height: 100%;
  max-height: calc(100vh - 40px);
  padding-right: 20px;
}

#edit-Report-form .image-container > fieldset > .form-fieldset-header {
  position: sticky;
  top: 0;
  background-color: var(--body-bg);
}

#edit-Report-form .image-container .form-fieldset-body img {
  max-width: 650px;
}

.field-headline label {
  font-weight: bold;
  font-size: 1rem;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-500);
  display: block;
}

.field-headline-small {
  padding: 6px 0;
}

.field-headline-small label {
  font-weight: bold;
  font-size: 0.8rem;
  color: var(--gray-500);
  text-decoration: underline;
  padding: 0;
  border-bottom: 0;
}

.field-headline .form-widget {
  display: none;
}

.field-hr {
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #999;
}

.field-hr label {
  display: none;
}

.field-hr .form-widget {
  display: none;
}

.form-compound {
  width: fit-content;
}



/* .ea-detail .content-body {
    position: relative;
}

.ea-detail .form-panel-header {
    position: absolute;
    width: 50%;
    float: left;
    top: 0;
    box-shadow: 0 1px 0 var(--form-panel-header-border-color);
}

.ea-detail .form-panel-body {
    position: absolute;
    top: 60px;
    width: 100%;
} */



.flight-target-data .form-group,
.report-property .form-group {
  padding: 0;
}

.flight-target-data .form-group > label {
  display: none;
}

.report-property .form-group > label {
  display: none;
}

.flight-target-data .form-control {
  /* font-size: var(--bs-body-font-size); */
  font-size: 0.875rem;
}

/* info_field */
.tooltip-container {
  position: relative;
  text-align: center;
}

th .tooltip-container {
  display: inline-block;
}

.tooltip-container .tooltip-content {
  display: none;
  position: absolute;
  background-color: var(--body-bg);
  color: var(--text-color);
  border-radius: 4px;
  border: 1px solid var(--border-color);
  text-align: center;
  padding: 5px;
  z-index: 1000000;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.tooltip-container.tooltip-bottom .tooltip-content{
  bottom: unset;
  top: 125%;
}

.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--border-color) transparent transparent transparent;
}

.tooltip-content > .content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 5px;
}

.tooltip-content > .content-grid > .header {
  grid-column: 1 / span 2;
}

.tooltip-container:hover > .tooltip-content,
.tooltip-content.show {
  display: block;
}



.flight-info > .card-body {
  padding: 3px;
}

.flight-info .flight-legend {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  line-height: 1.5;
  margin-bottom: 22px;
}

.flight-info .flight-legend > * {
  padding: 3px 6px;
}

.flight-info .flight-legend > * {
  padding: 3px 6px;
}

.card {
  background-color: var(--body-bg);
}

.card-body {
  color: var(--table-cell-color);
}


/* fix logo center */
.sidebar .main-header .navbar {
  padding: 0;
}

.content-top-header-logo {
  margin-right: 2rem;
}
.content-top-header-logo .logo {
  color: var(--text-color);
}

.content-top-header-logo .logo > *:not(:last-child) {
  margin-right: 1rem;
}

.content-header .page-actions.flex-column-reverse .btn + .btn {
  margin-left: 0;
}

.width-min {
  width: 1px;
  white-space: nowrap;
}

.min-width-20 {
  min-width: 20px;
}

.min-width-30 {
  min-width: 30px;
}

.min-width-200 {
  min-width: 200px;
}

.header-for-field-has-help .has-help {
  display: inline;
  cursor: help;
  /* text-decoration: underline dotted */
}

.bigger-dropdown .ts-dropdown-content {
  max-height: 400px;
}

.form-group.field-collection .field-collection-item .accordion-item:has(.has-error) {
  box-shadow: var(--form-input-error-shadow);
}

/* hide by default */
.form-collection-item-grab-marker{
  display: none;
}

/* specific to not change nested collections */
.sortable-collection > .field-collection-item > .accordion-item > .accordion-header > .accordion-button > .form-collection-item-grab-marker {
  display: var(--fa-display, inline-block);
}

.sortable-collection > .field-collection-item .form-collection-item-grab-marker::before{
    cursor: grab;
    padding-left: 0.5rem;
    padding-right: 1rem;
    color: var(--form-collection-item-collapse-marker-color);
}

.form-group.field-collection .accordion-button:not(.collapsed) i.form-collection-item-grab-marker {
  transform: rotate(0deg);
}

.form-group.field-collection .page-components > .field-collection-item > .accordion-item > .accordion-header {
  background-color: var(--color-primary-o18);
}

.form-group.field-collection .page-components > .field-collection-item > .accordion-item > .accordion-header:hover {
  background-color: var(--color-primary-o30);
}

/* Table & Datagrid */

/* Table & Datagrid > flight_targets */
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 3px;
}

/* Table & Datagrid > table color fixes */
.table-hover > tbody > tr:hover > *,
.table > :not(caption) > * > * {
  /* background-color: var(--bs-body-color); */
  color: var(--table-cell-color);
  border-bottom-width: 0;
  box-shadow: inset 0 1px 0 var(--table-cell-border-color);
  /* padding: 0.5rem; */
}

.table > thead > tr:first-child > th {
  box-shadow: inset 0 -1px 0 var(--table-cell-border-color);
  border-bottom-width: 0;
  border-top-width: 0;
}

/* Table & Datagrid > datagrid */
.datagrid tbody tr:hover td,
.datagrid tbody tr:hover th {
  cursor: pointer;
}

.datagrid td,
.datagrid thead a,
.datagrid thead span {
  padding: 6px;
}
.datagrid td.flight-target-data div {
  /* move padding from td to div */
  padding: 6px 0;
}

/* Table & Datagrid > datalist (Flight embedded reports) */
dl.datalist .data-row.data-row-no-dt {
  grid-template-columns: none;
  padding-left: 0;
  padding-right: 0;
}

dl.datalist .data-row.data-row-no-dt > dd {
  overflow: unset;
}


/* Flight Registrations*/
#load-data-result .data-row-custom {
  display: grid;
  grid-template-columns: 360px 1fr;
}

#load-data-result .data-row-custom.data-row-col3 {
  grid-template-columns: 360px 1fr 1fr;
}

#load-data-result .data-row-custom:hover {
  background: var(--table-hover-cell-bg);
}

#load-data-result .data-row-custom-header {
  background-color: var(--gray-50);
  margin: 0.5rem 0;
  padding: 0.5rem 0;
}

#load-data-result .data-row-custom-header > dd {
  margin: 0;
}

.ea-dark-scheme #load-data-result .data-row-custom-header {
  background-color: var(--true-gray-800);
}

dl.datalist .field-empty {
  height: 30px;
  line-height: 30px;
  box-shadow: none;
}

.ea-detail dl.datalist .data-row:first-child {
  /* display: none; */
  box-shadow: none;
}

.modal .field-group .field-value {
  min-width: unset;
}

#responsive-header-logo > .responsive-logo > img {
  display: block;
  /* white-space: no ; */
}

.card-h-2x .card {
  max-height: 400px;
  overflow-y: auto;
}

.card-h-1-5x .card {
  max-height: 300px;
  overflow-y: auto;
}

.card-h-0-5x .card {
  max-height: 100px;
  overflow-y: auto;
}

.card-small .card {
  max-height: 130px;
  overflow-y: auto;
}

/* flight details info boxes */
@media (min-width: 768px) {

  .card-h-2x .card {
    height: 400px;
  }

  .card-h-1-5x .card {
    height: 300px;
  }

  .card-h-0-5x .card {
    height: 100px;
  }

  .card-small .card {
    height: 130px;
  }
}


/* templates/admin/field/custom_data_dashboard_data_box.html.twig */
.data-box table {
  max-width: 100%;
}

/* .data-box > table > thead > tr > th, */
.data-box > table > tbody > tr > th,
/* .data-box > table > tfoot > tr > th, */
.data-box > table > thead > tr > td,
.data-box > table > tbody > tr > td,
.data-box > table > tfoot > tr > td {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.data-box > table > thead > tr > th:first-child,
.data-box > table > tbody > tr > th:first-child,
.data-box > table > tfoot > tr > th:first-child,
.data-box > table > thead > tr > td:first-child,
.data-box > table > tbody > tr > td:first-child,
.data-box > table > tfoot > tr > td:first-child {
  max-width: 230px;
  overflow-x: hidden;
}

.data-box > table > thead > tr > th:first-child span,
.data-box > table > tbody > tr > th:first-child span,
.data-box > table > tfoot > tr > th:first-child span,
.data-box > table > thead > tr > td:first-child span,
.data-box > table > tbody > tr > td:first-child span,
.data-box > table > tfoot > tr > td:first-child span {
  width: 100%;
  text-align: left;
  display: inline-block;
  /* line-height: 1em; */
  vertical-align: bottom;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

*:has( > .percentbar) {
  position: relative;
}
.percentbar {
  position: absolute;
  /* z-index: -1; */
  bottom: 0;
  right: 0;
  height: 10px;
  background-color: color-mix(in hsl, var(--color-primary) 90%, transparent);
}

/*!* custom pages index display styles *!*/
.visible_columns_App_Controller_Admin_FlightStatsCrudController_flightStats-tr-ploom > th {
  writing-mode: vertical-lr;
  vertical-align: middle;
  text-align: right!important;
}

/* custom pages index display styles */
table th,
table td {
  border: 1px solid #404040!important;
}

/* Question ID Tooltip on Question Mark Icon */
.question-help-icon {
  position: relative;
  cursor: help;
  font-size: 1rem;
  margin-right: 8px;
  display: inline-block;
}

.question-help-icon:hover::after {
  content: attr(title);
  position: absolute;
  background: var(--body-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 1000;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.question-help-icon:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--border-color) transparent transparent transparent;
  z-index: 1001;
}

/* Readonly fields styling for multibrand flight targets */
.flight-targets input[readonly].readonly-field {
  background-color: var(--gray-100);
  color: var(--gray-600);
  cursor: not-allowed;
  opacity: 0.8;
}

.ea-dark-scheme .flight-targets input[readonly].readonly-field {
  background-color: var(--true-gray-700);
  color: var(--gray-400);
}
/* Multibrand Report Tables */
.multibrand-tables-container {
  padding: 1rem 0;
}

.multibrand-kpi-table {
  font-size: 0.9rem;
}

.multibrand-kpi-table th {
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.multibrand-kpi-table td {
  vertical-align: middle;
  padding: 0.5rem;
}

.multibrand-kpi-table td.text-end {
  min-width: 80px;
}

.multibrand-kpi-table .table-active td {
  font-weight: 600;
}

.multibrand-kpi-table small.text-muted {
  font-size: 0.75rem;
}