@import url("animations.css");
@import url("cx-color-variables.css");
@import url("kontrastmodus.css");

:root {

    /*fonts*/
    --cx-default-font_text-size: 14px;
    --cx-default-font_title-size: 16px;
    --cx-default-font_subtext-size: 11px;

   /* 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;

   /* 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);

   /*CxTabs*/
   --cx-tabs-height: 50px;

   /*CxPageHeader*/
   --cx-page-header-height: 64px;

   /*CxMenu*/
   --cx-main-menu_focus-outline-color: #a780cd;
   --cx-main-menu_focus-outline-width: 2px;
}

.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);
   }

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

.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;
}