/*
 * Kein @import verwenden: Der Browser fordert Importe über die ungefingerprintete URL an,
 * die nie langzeit-gecacht wird (kein "immutable"). Zugehörige Stylesheets (animations,
 * cx-color-palettes, cx-color-variables, kontrastmodus, cx-rem-variables, cx-size-variables)
 * werden stattdessen in der App.razor der Apps als eigene @Assets-Links eingebunden.
 */
:root {
   /*fonts*/
   --cx-default-font_text-size: var(--cx-font-size-s);
   --cx-default-font_title-size: var(--cx-font-size-m);
   --cx-default-font_subtext-size: var(--cx-11px-to-rem);
   /* CxAppFrame */
   --cx-main-menu-height: 64px;
   --cx-sub-menu-height: 56px;
   --cx-left-bar-width: 220px;
   --cx-filter-menu-width: 400px;
   --cx-context-flyout-max-height: 60vh;
   --cx-appframe-leftbar-size-leftaligned: 88px;
   --cx-appframe-leftbar-size-bottomaligned: 64px;
   /* CxContextDropDown */
   --cx-context-size: 14px;
   /* CxSidepanel */
   --cx-sidepanel-width: 300px;
   /* Box-Shadow */
   --cx-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
   --cx-button_box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   --cx-top_box-shadow-medium: 0 -2px 5px #00000042;
   --cx-bottom_box-shadow-medium: 0 2px 5px #00000042;
   --cx-right_box-shadow-medium: 2px 0 5px #00000042;
   --cx-left_box-shadow-medium: -2px 0 5px #00000042;
   --cx-top_box-shadow-soft: 0 -1px 5px #00000020;
   --cx-bottom_box-shadow-soft: 0 1px 5px #00000020;
   --cx-right_box-shadow-soft: 1px 0 5px #00000020;
   --cx-left_box-shadow-soft: -1px 0 5px #00000020;
   /*CxTabs*/
   --cx-tabs-height: var(--cx-50px-to-rem);
   /*CxPageHeader*/
   --cx-page-header-height: var(--cx-64px-to-rem);
   /*Button outlines for double contrast*/
   --cx-focus-outline: var(--cx-focus-outline-width) solid var(--cx-focus-ring-color--on-dark-background);
   --cx-focus-box-shadow: 0 0 0 var(--cx-focus-outline-width) var(--cx-focus-ring-color);
   /* CxFloatingActionButton */
   --cx-fab--regular__size: var(--cx-56px-to-rem);
   --cx-fab--small__size: var(--cx-40px-to-rem);
   --cx-fab--medium__size: var(--cx-80px-to-rem);
   --cx-fab--large__size: var(--cx-96px-to-rem);
   --cx-fab-container__inset: var(--cx-padding-l);
   /* Z-Index scale */
   --cx-z-index-skip-link: 20;
   --cx-z-index-leftbar-sticker: 101;
   --cx-z-index-search-overlay: 996;
   --cx-z-index-loading-panel: 999;
   --cx-z-index-fab-scrim: 999;
   --cx-z-index-content-overlay: 1000;
   --cx-z-index-fab: 1000;
   --cx-z-index-bottom-sheet-overlay: 1001;
   --cx-z-index-bottom-sheet: 1002;
   --cx-z-index-toast: 2500;
   --cx-z-index-tooltip: 3000;
}

.double-contrast-outline {
   outline: var(--cx-focus-outline);
   box-shadow: var(--cx-focus-box-shadow);
}

.flex-row {
   display: flex;
   flex-direction: row;
}

.flex-column {
   display: flex;
   flex-direction: column;
}

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

.flex-row-between {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: nowrap;
   align-items: center;
}

.clickable {
   cursor: pointer;
}

   .clickable:hover {
      background-color: var(--cx-default__bg-color--hover);
   }

.secondary-text {
   color: var(--cx-secondary__text-color);
}

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


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

.ellipsis-max-two-lines {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
}

.horizontal-divider {
   margin-top: 20px;
   padding-top: 8px;
   border-top: 1px solid var(--cx-grey-300);
   width: 100%;
}

.cx-icon {
   color: var(--cx-icon__color);
}

.overflow-hidden {
   overflow: hidden !important;
}

.cx-highlighted-text {
   background-color: var(--cx-search-highlight__bg-color);
   color: var(--cx-search-highlight__text-color);
   padding: 0;
}

.toolbar-element .dxbl-toolbar-item-tmpl {
   flex: 1 !important;
}

.dxbl-btn-dropdown-list-item button, .dxbl-toolbar-dropdown-item-list button, .dxbl-toolbar-dropdown-item.dxbl-toolbar-item-tmpl div.clickable {
   padding: 8px 16px !important;
}

/*für die dxtoolbar, da man sie leider nicht wrappen kann*/
.cx-toolbar-item {
   padding: 4px 12px !important;
   border-radius: 4px;
}

   .cx-toolbar-item.icon-item {
      padding: 8px !important;
      border-radius: 100%;
   }

   .cx-toolbar-item.accent-color-item {
      --dxbl-btn-bg: var(--primary-accent-color);
   }

   .cx-toolbar-item .cx-toolbar-item__icon {
      --dxbl-image-margin-y: 0;
      --dxbl-image-margin-x: 0;
   }
   
   .dxbl-dropdown-item .cx-toolbar-item__icon {
      color: var(--cx-icon__color);
   }

/*drei-punkte-menü icon button*/
dxbl-toolbar-item button:has(.dxbl-toolbar-icon-more) {
   width: 40px !important;
   height: 40px !important;
}

/*dropdown icon in den toolbaricons (ist per default etwas groß)*/
.cx-toolbar-item .dxbl-toolbar-dropdown-toggle {
   --dxbl-image-width: 14px;
   --dxbl-image-height: 14px;
}

.cx-toolbar-item.checked::before {
   background-color: var(--cx-blue-tag__bg-color) !important;
   opacity: 1 !important;
}

.icon-button {
   gap: 12px;
   align-items: center;
   display: flex;
   flex-direction: row;
}

.transparent-border {
   border-color: transparent !important;
}

.remove-top-border {
   border-top: none !important;
}

.remove-right-border {
   border-right: none !important;
}

.remove-bottom-border {
   border-bottom: none !important;
}

.remove-left-border {
   border-left: none !important;
}

/*Styles for tooltips (DxFlyout)*/
dxbl-popup-cell:has(.cx-tooltip) {
   /* DevExpress calculates the z-index of all its popup-components, so that newer components have a higher z-index than 
   * the ones opened previously. They start with 1010 and go up by 10-step increments. However, since tooltips are supposed
   * to appear over all elements (also Toast Notifications with a z-index of 2500) the z-index needs to be increased manually */
   z-index: var(--cx-z-index-tooltip) !important;
}

.dxbl-flyout .dxbl-flyout-dialog.cx-tooltip {
   white-space: nowrap;
   font-size: 0.625rem;
   background-color: var(--cx-grey-700);
   color: var(--cx-white);
   border-color: transparent;
   border-radius: 4px;
}

   .dxbl-flyout .dxbl-flyout-dialog.cx-tooltip .dxbl-flyout-body {
      padding: 0.25rem 0.5rem;
   }

.dxbl-flyout-arrow {
   display: none;
}

/*
 * Since rem units are not yet used consistently throughout the codebase,the UI only partially responds to the font size set by the browser or user.
 * To prevent inconsistent scaling behavior, the root font size is explicitly fixed to 16px for the time being.
 *
 * When developing new components/features or updating existing ones, rem units should be used where appropriate to ensure
 * better accessibility and responsiveness in the future. For testing rem units, deactivate this styling.
 * For more information on using rem units, please refer to https://cx-tfs.connext.de/tfs/DefaultCollection/Vivendi/_wiki/wikis/Vivendi.wiki/2165/Textskalierung.
 */
html {
   font-size: 16px;
}

dxbl-loading-panel {
   z-index: var(--cx-z-index-loading-panel); /*LoadingPanel sonst ggf. ÜBER dem CxFloatingActionButton*/
}