/**
 * SPDX-FileCopyrightText: 2023 Bundesministerium des Innern und für Heimat, PG ZenDiS "Projektgruppe für Aufbau ZenDiS"
 * SPDX-License-Identifier: Apache-2.0
 */

:root {
  /* used to accent some elements: checkbox/radiobox, checked toggle buttons/checked input fields */
    --color-accent: #5e27dd;
    --color-opendesk-secondary: #f5f5f5;
    --color-opendesk-secondary-dark: #c7b3f3;
    --color-opendesk-white: #ffffff;
    --color-opendesk-black: #000000;
    --bgc-announcements-info: #adb3bc;
    --bgc-announcements-warn: #ffc700;
    --bgc-announcements-success: #00ffcd;
    --bgc-announcements-danger: #ff529e;
    --bgc-content-body: var(--color-opendesk-secondary);
    --bgc-content-container: var(--color-opendesk-white);
    --bgc-content-header: var(--bgc-content-container);
    --bgc-inputfield-on-container: var(--color-opendesk-white);
    --bgc-inputborder-on-container: var( --color-opendesk-secondary);
    --bgc-inputfield-on-body: var(--bgc-content-container);
    --bgc-checkbox-hover: rgba(255,255,255,0.06);
    --bgc-checkbox-focus: rgba(255,255,255,0.12);
    --bgc-loading-circle: var(--font-color-contrast-middle);
    --bgc-user-menu-item-hover: rgba(255,255,255,0.1);
    --bgc-user-menu-item-active: rgba(255,255,255,0.2);
    --bgc-header-number-circle: var(--color-accent);
    --bgc-tab-separator: var( --color-opendesk-secondary);
    --bgc-popup: #d0d0d0;
    --bgc-popup-item-hover: rgba(0,0,0,0.15);
    --bgc-popup-item-active: rgba(0,0,0,0.3);
    --bgc-popup-item-selected: rgba(0,0,0,0.3);
    --bgc-grid-row-hover: rgba(255,255,255,0.04);
    --bgc-grid-row-selected: var(--bgc-grid-row-hover);
    --bgc-tree-row-hover: var(--bgc-grid-row-hover);
    --bgc-tree-row-selected: rgba(255,255,255,0.15);
    --bgc-apptile-default: var(--color-opendesk-white);
    --bgc-appcenter-app-hover: rgba(255,255,255,0.08);
    --bgc-appcenter-app-active: rgba(255,255,255,0.12);
    --bgc-progressbar-empty: #bdbdbb;
    --bgc-progressbar-progress: var(--bgc-success);
    --bgc-titlepane-hover: rgba(255,255,255,0.04);
    --bgc-underlay: rgb(221 221 221 / 80%);
    --bgc-checkerboard: repeating-conic-gradient(var(--bgc-inputfield-on-container) 0% 25%, transparent 0% 50%) 50%/20px 20px;
    --bgc-error: #ff529e;
    --bgc-warning: #ffc700;
    --bgc-success: #00ffcd;
    --font-size-1: 1.5rem;
    --font-size-2: 1.25rem;
    --font-size-3: 1rem;
    --font-size-4: 0.875rem;
    --font-size-5: 0.75rem;
    --font-size-html: 1rem;
    --font-size-body: var(--font-size-4);
    --font-lineheight-normal: 1.5;
    --font-lineheight-compact: 1.25;
    --font-lineheight-header: 1.3;
    --font-weight-bold: 600;
    --font-color-contrast-high: #000;
    --font-color-contrast-middle: #606060;
    --font-color-contrast-low: #868681;
    --font-color-error: #b82323;
    --font-color-error-light: #EABFBF;
    --font-color-warning: #ff8c00;
    --font-color-warning-light: #ffeeca;
    --font-color-success: #92d625;
    --font-color-success-light: #ebffca;
    --button-primary-bgc: #5e27dd;
    --button-primary-bgc-hover: #1b1d18;
    --button-primary-bgc-active: rgba(79,114,24,1);
    --button-primary-bgc-disabled: #5f5f5c;
    --button-bgc: var(--color-opendesk-secondary);
    --button-bgc-hover: #575755;
    --button-bgc-active: rgba(80,80,77,1);
    --button-bgc-disabled: #5f5f5c;
    --button-text-bgc: transparent;
    --button-text-bgc-hover: var(--button-bgc-hover);
    --button-text-bgc-active: var(--button-bgc-active);
    --button-text-bgc-disabled: transparent;
    --button-icon-bgc: transparent;
    --button-icon-bgc-hover: var(--button-bgc-hover);
    --button-icon-bgc-active: var(--button-bgc-active);
    --button-icon-bgc-disabled: transparent;
    --button-icon-highlighted-bgc: var(--bgc-inputfield-on-body);
    --button-icon-highlighted-bgc-hover: var(--button-bgc-hover);
    --button-icon-highlighted-bgc-active: var(--button-bgc-active);
    --button-icon-highlighted-bgc-disabled: transparent;
    --color-focus: var(--font-color-contrast-high);
    --popup-border: 1px solid #bdbdbb;
    --box-shadow: 0 1px 6px rgb(1 0 0 / 12%), 0 1px 4px rgb(0 1 0 / 12%);
    --serveroverview-tile-hover-bgc: #00acb6;
    --serveroverview-tile-hover-color: #1e1e1d;
    --portal-tab-background: var(--color-accent);
    --select-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABkSURBVHgB7Y3BCQAhDAS3BEtICVeCJdi5JVwpGsGHiGLECD4ysL9lBjCMpwk8En6p/kV4XuL9WAeo/sr/gwDHi4JAK47YYBXoxQ6bzALH4lnAa4lHgaQpHgVUxW0g4ILYMC6TAZ0BJA3bxN3RAAAAAElFTkSuQmCC');
    --layout-height-header: 63px;
    /* Keycloak user screens logo */
    --login-logo: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEuMTQ4IDEuMjQ1IDkyLjYgMTcuMzg2IiB3aWR0aD0iOTIuNiIgaGVpZ2h0PSIxNy4zODYiPjxwb2x5Z29uIHBvaW50cz0iOTMuNzQ4IDUuNTczIDg5LjgzNSA1LjU3MyA4Ni4yNDQgOS4yMjEgODYuMjQ0IDEuMjQ1IDgzLjAxMyAxLjI0NSA4My4wMTMgMTUuMTM3IDg2LjI0NCAxNS4xMzcgODYuMjQ0IDExLjE4NyA4OS44MzUgMTUuMTM3IDkzLjc0OCAxNS4xMzcgODkuMTM2IDEwLjIyMyA5My43NDggNS41NzMiPjwvcG9seWdvbj48cGF0aCBkPSJNIDMxLjU4MyA2LjIxMSBDIDMwLjkzMyA1Ljg1MSAzMC4xNzMgNS42NzEgMjkuMzAzIDUuNjcxIEMgMjguNDQzIDUuNjcxIDI3LjcxMyA1Ljg1MSAyNy4wNTMgNi4yMzEgQyAyNi40MDMgNi42MDEgMjUuOTEzIDcuMTMxIDI1LjU2MyA3LjgzMSBDIDI1LjIyMyA4LjU0MSAyNS4wNDMgOS4zODEgMjUuMDQzIDEwLjM4MSBDIDI1LjA0MyAxMS4zMTEgMjUuMjAzIDEyLjE1MSAyNS41MjMgMTIuOTAxIEMgMjUuODUzIDEzLjY3MSAyNi4zNDMgMTQuMjcxIDI3LjAwMyAxNC43MjEgQyAyNy42ODMgMTUuMTUxIDI4LjUwMyAxNS4zODEgMjkuNDgzIDE1LjM4MSBDIDMwLjc0MyAxNS4zODEgMzEuNjgzIDE1LjA2MSAzMi4zMzMgMTQuNDAxIEMgMzIuODQzIDEzLjg3MSAzMy4yMzMgMTMuMjQxIDMzLjQ5MyAxMi40OTEgTCAzMi42NDMgMTIuMDExIEMgMzIuNDQzIDEyLjc5MSAzMi4wODMgMTMuMzkxIDMxLjU2MyAxMy44NTEgQyAzMS4wMjMgMTQuMzAxIDMwLjMyMyAxNC41NDEgMjkuNDYzIDE0LjU0MSBDIDI4LjMyMyAxNC41NDEgMjcuNDUzIDE0LjE2MSAyNi44ODMgMTMuNDExIEMgMjYuMzQzIDEyLjcxMSAyNi4wNjMgMTEuODExIDI2LjA0MyAxMC43MDEgTCAzMy42NTMgMTAuNzAxIEwgMzMuNjUzIDEwLjIwMSBDIDMzLjY1MyA5LjI2MSAzMy40NzMgOC40NTEgMzMuMTEzIDcuNzcxIEMgMzIuNzUzIDcuMDgxIDMyLjI0MyA2LjU3MSAzMS41ODMgNi4yMTEgWiBNIDI2LjA0MyA5Ljg0MSBDIDI2LjA3MyA5LjIzMSAyNi4yMTMgOC42NzEgMjYuNDUzIDguMjExIEMgMjYuNzMzIDcuNjUxIDI3LjEyMyA3LjI1MSAyNy42MjMgNi45NjEgQyAyOC4xMDMgNi42ODEgMjguNjUzIDYuNTQxIDI5LjI3MyA2LjU0MSBDIDMwLjMwMyA2LjU0MSAzMS4xMTMgNi44NjEgMzEuNzMzIDcuNDcxIEMgMzIuMjgzIDguMDYxIDMyLjYwMyA4Ljg1MSAzMi42MzMgOS44NDEgTCAyNi4wNDMgOS44NDEgWiI+PC9wYXRoPjxwYXRoIGQ9Ik0gNTYuMTA5IDIuMzg2IEMgNTUuMDQ0IDIuMDQxIDUzLjgyOSAxLjg3NiA1Mi40NjQgMS44NzYgTCA1MC42MzQgMS44NzYgTCA1MC42MzQgNC41MTYgTCA1Mi40NjQgNC41MTYgQyA1My40MjQgNC41MTYgNTQuMTg5IDQuNTkxIDU0Ljc1OSA0Ljc0MSBDIDU1LjMxNCA0Ljg5MSA1NS43NzkgNS4yNTEgNTYuMTM5IDUuODM2IEMgNTYuNTE0IDYuNDA2IDU2LjY5NCA3LjMwNiA1Ni42OTQgOC41MjEgQyA1Ni42OTQgOS43NTEgNTYuNTE0IDEwLjY1MSA1Ni4xNTQgMTEuMjIxIEMgNTUuNzk0IDExLjgwNiA1NS4zMjkgMTIuMTY2IDU0Ljc3NCAxMi4zMTYgQyA1NC4yMTkgMTIuNDUxIDUzLjQzOSAxMi41MjYgNTIuNDY0IDEyLjUyNiBMIDUwLjYwNCAxMi41MjYgTCA1MC42MDQgNy4xNjIgTCA0Ny41NTkgNy4xNjIgTCA0Ny41NTkgMTUuMTk2IEwgNTIuNDY0IDE1LjE5NiBDIDUzLjgyOSAxNS4xOTYgNTUuMDQ0IDE1LjAzMSA1Ni4xMDkgMTQuNjg2IEMgNTcuMTU5IDE0LjM0MSA1OC4wMjkgMTMuNjgxIDU4LjcxOSAxMi43MDYgQyA1OS4zOTQgMTEuNzE2IDU5LjczOSAxMC4zMjEgNTkuNzM5IDguNTIxIEMgNTkuNzM5IDYuNzM2IDU5LjM5NCA1LjM0MSA1OC43MTkgNC4zNjYgQyA1OC4wMjkgMy4zNzYgNTcuMTU5IDIuNzE2IDU2LjEwOSAyLjM4NiBaIj48L3BhdGg+PHBhdGggZD0iTSA4LjQ5OCA2LjM0NiBDIDcuNzYzIDUuODk2IDYuOTIzIDUuNjcxIDUuOTQ4IDUuNjcxIEMgNC45NzMgNS42NzEgNC4xMzMgNS44OTYgMy4zOTggNi4zNDYgQyAyLjY2MyA2Ljc4MSAyLjEwOCA3LjM4MSAxLjcxOCA4LjEzMSBDIDEuMzQzIDguODY2IDEuMTQ4IDkuNjYxIDEuMTQ4IDEwLjUzMSBDIDEuMTQ4IDExLjM4NiAxLjM0MyAxMi4xODEgMS43MTggMTIuOTMxIEMgMi4xMDggMTMuNjY2IDIuNjYzIDE0LjI2NiAzLjM5OCAxNC43MTYgQyA0LjEzMyAxNS4xNTEgNC45NzMgMTUuMzc2IDUuOTQ4IDE1LjM3NiBDIDYuOTIzIDE1LjM3NiA3Ljc2MyAxNS4xNTEgOC40OTggMTQuNzE2IEMgOS4yMzMgMTQuMjY2IDkuNzg4IDEzLjY2NiAxMC4xNjMgMTIuOTMxIEMgMTAuNTUzIDEyLjE4MSAxMC43NDggMTEuMzg2IDEwLjc0OCAxMC41MzEgQyAxMC43NDggOS42NjEgMTAuNTUzIDguODY2IDEwLjE2MyA4LjEzMSBDIDkuNzg4IDcuMzgxIDkuMjMzIDYuNzgxIDguNDk4IDYuMzQ2IFogTSA5LjI5MyAxMi40OTYgQyA5LjAwOCAxMy4wOTYgOC41NzMgMTMuNTkxIDguMDAzIDEzLjk2NiBDIDcuNDE4IDE0LjM0MSA2Ljc0MyAxNC41MzYgNS45NDggMTQuNTM2IEMgNS4xNTMgMTQuNTM2IDQuNDYzIDE0LjM0MSAzLjg5MyAxMy45NjYgQyAzLjMyMyAxMy41OTEgMi44ODggMTMuMDk2IDIuNjAzIDEyLjQ5NiBDIDIuMzE4IDExLjg4MSAyLjE2OCAxMS4yMzYgMi4xNjggMTAuNTMxIEMgMi4xNjggOS44MjYgMi4zMTggOS4xNjYgMi42MDMgOC41NjYgQyAyLjg4OCA3Ljk1MSAzLjMyMyA3LjQ3MSAzLjg5MyA3LjA5NiBDIDQuNDYzIDYuNzIxIDUuMTUzIDYuNTQxIDUuOTQ4IDYuNTQxIEMgNi43NDMgNi41NDEgNy40MTggNi43MjEgOC4wMDMgNy4wOTYgQyA4LjU3MyA3LjQ3MSA5LjAwOCA3Ljk1MSA5LjI5MyA4LjU2NiBDIDkuNTc4IDkuMTY2IDkuNzI4IDkuODI2IDkuNzI4IDEwLjUzMSBDIDkuNzI4IDExLjIzNiA5LjU3OCAxMS44ODEgOS4yOTMgMTIuNDk2IFoiPjwvcGF0aD48cGF0aCBkPSJNIDIwLjc2OCA2LjI3MSBDIDIwLjA5MyA1Ljg2NiAxOS4zNDMgNS42NzEgMTguNTAzIDUuNjcxIEMgMTcuNDIzIDUuNjcxIDE2LjUyMyA1Ljk0MSAxNS43NzMgNi40NjYgQyAxNS4wODMgNi45NjEgMTQuNjAzIDcuNjIxIDE0LjMwMyA4LjQ2MSBMIDE0LjMwMyA1Ljg1MSBMIDEzLjI4MyA1Ljg1MSBMIDEzLjI4MyAxOC42MzEgTCAxNC4zMDMgMTguNjMxIEwgMTQuMzAzIDEyLjYzMSBDIDE0LjQ4MyAxMy4xNDEgMTQuNzUzIDEzLjU3NiAxNS4wODMgMTMuOTY2IEMgMTUuNDg4IDE0LjQxNiAxNS45NjggMTQuNzc2IDE2LjU1MyAxNS4wMTYgQyAxNy4xMjMgMTUuMjU2IDE3Ljc4MyAxNS4zNzYgMTguNTAzIDE1LjM3NiBDIDE5LjM0MyAxNS4zNzYgMjAuMDkzIDE1LjE4MSAyMC43NjggMTQuNzc2IEMgMjEuNDI4IDE0LjM3MSAyMS45NTMgMTMuODAxIDIyLjMyOCAxMy4wODEgQyAyMi43MTggMTIuMzQ2IDIyLjg5OCAxMS40OTEgMjIuODk4IDEwLjUzMSBDIDIyLjg5OCA5LjU3MSAyMi43MTggOC43MTYgMjIuMzI4IDcuOTgxIEMgMjEuOTUzIDcuMjQ2IDIxLjQyOCA2LjY3NiAyMC43NjggNi4yNzEgWiBNIDIxLjM4MyAxMi43MjEgQyAyMS4wNTMgMTMuMzIxIDIwLjYxOCAxMy43NzEgMjAuMDYzIDE0LjA4NiBDIDE5LjUwOCAxNC4zODYgMTguODkzIDE0LjUzNiAxOC4yMzMgMTQuNTM2IEMgMTcuNTU4IDE0LjUzNiAxNi45MjggMTQuMzcxIDE2LjM0MyAxNC4wNzEgQyAxNS43NDMgMTMuNzU2IDE1LjI3OCAxMy4zMDYgMTQuOTAzIDEyLjcwNiBDIDE0LjU0MyAxMi4wOTEgMTQuMzYzIDExLjM3MSAxNC4zNjMgMTAuNTMxIEMgMTQuMzYzIDkuNjc2IDE0LjU0MyA4Ljk1NiAxNC45MDMgOC4zNTYgQyAxNS4yNzggNy43NDEgMTUuNzQzIDcuMjkxIDE2LjM0MyA2Ljk5MSBDIDE2LjkyOCA2LjY5MSAxNy41NTggNi41NDEgMTguMjMzIDYuNTQxIEMgMTguODkzIDYuNTQxIDE5LjUwOCA2LjY3NiAyMC4wNjMgNi45NzYgQyAyMC42MTggNy4yNjEgMjEuMDUzIDcuNzExIDIxLjM4MyA4LjMxMSBDIDIxLjcxMyA4LjkxMSAyMS44NzggOS42NjEgMjEuODc4IDEwLjUzMSBDIDIxLjg3OCAxMS40MDEgMjEuNzEzIDEyLjEzNiAyMS4zODMgMTIuNzIxIFoiPjwvcGF0aD48cGF0aCBkPSJNIDQyLjg3OCA2LjA5MSBDIDQyLjM5OCA1LjgwNiA0MS44MTMgNS42NzEgNDEuMTM4IDUuNjcxIEMgNDAuMDczIDUuNjcxIDM5LjE4OCA1Ljk0MSAzOC40OTggNi40OTYgQyAzNy44NjggNy4wMDYgMzcuNDMzIDcuNjk2IDM3LjIwOCA4LjU1MSBMIDM3LjIwOCA1Ljg1MSBMIDM2LjE4OCA1Ljg1MSBMIDM2LjE4OCAxNS4xOTYgTCAzNy4yMDggMTUuMTk2IEwgMzcuMjA4IDEwLjk4MSBDIDM3LjIwOCAxMC4xNDEgMzcuMzU4IDkuMzkxIDM3LjY0MyA4LjcxNiBDIDM3LjkyOCA4LjA0MSAzOC4zNDggNy41MTYgMzguOTAzIDcuMTI2IEMgMzkuNDQzIDYuNzM2IDQwLjA3MyA2LjU0MSA0MC43OTMgNi41NDEgQyA0MS42NjMgNi41NDEgNDIuMzA4IDYuNzUxIDQyLjcxMyA3LjIwMSBDIDQzLjEzMyA3LjYzNiA0My4zMjggOC4zNTYgNDMuMzI4IDkuMzQ2IEwgNDMuMzI4IDE1LjE5NiBMIDQ0LjM2MyAxNS4xOTYgTCA0NC4zNjMgOS4zMDEgQyA0NC4zNjMgOC41MzYgNDQuMjQzIDcuODc2IDQzLjk4OCA3LjMzNiBDIDQzLjcxOCA2Ljc5NiA0My4zNTggNi4zNzYgNDIuODc4IDYuMDkxIFoiPjwvcGF0aD48cGF0aCBkPSJNIDY4LjY3OSA2LjA0NiBDIDY3LjkyOSA1LjY3MSA2Ny4wMTQgNS40NzYgNjUuOTc5IDUuNDc2IEMgNjUuMDA0IDUuNDc2IDY0LjE0OSA1LjY3MSA2My4zOTkgNi4wNjEgQyA2Mi42NDkgNi40NTEgNjIuMDY0IDcuMDIxIDYxLjYyOSA3Ljc3MSBDIDYxLjIwOSA4LjUwNiA2MC45OTkgOS4zNzYgNjAuOTk5IDEwLjM4MSBDIDYwLjk5OSAxMS4zNTYgNjEuMjA5IDEyLjIyNiA2MS42MTQgMTIuOTc2IEMgNjIuMDM0IDEzLjc0MSA2Mi42MTkgMTQuMzI2IDYzLjM4NCAxNC43NDYgQyA2NC4xNDkgMTUuMTY2IDY1LjA2NCAxNS4zNzYgNjYuMDk5IDE1LjM3NiBDIDY3LjUzOSAxNS4zNzYgNjguNjk0IDE1LjA2MSA2OS41NDkgMTQuNDE2IEMgNzAuMDE0IDE0LjA1NiA3MC4zODkgMTMuNjM2IDcwLjY0NCAxMy4xNTYgTCA2OC4yNzQgMTEuODM2IEwgNjguMTk5IDExLjgzNiBDIDY4LjEwOSAxMi4yNzEgNjcuODY5IDEyLjYxNiA2Ny40OTQgMTIuODU2IEMgNjcuMTE5IDEzLjA5NiA2Ni42NTQgMTMuMjE2IDY2LjA4NCAxMy4yMTYgQyA2NS4zOTQgMTMuMjE2IDY0Ljg1NCAxMi45OTEgNjQuNDY0IDEyLjU1NiBDIDY0LjEzNCAxMi4xODEgNjMuOTM5IDExLjY3MSA2My45MDkgMTEuMDQxIEwgNzEuMDM0IDExLjA0MSBMIDcxLjAzNCAxMC4yNDYgQyA3MS4wMzQgOS4yNDEgNzAuODM5IDguMzg2IDcwLjQzNCA3LjY4MSBDIDcwLjAyOSA2Ljk3NiA2OS40NDQgNi40MjEgNjguNjc5IDYuMDQ2IFogTSA2My44NjQgOS40ODEgQyA2My44OTQgOS4xNTEgNjMuOTk5IDguODUxIDY0LjEzNCA4LjU5NiBDIDY0LjMxNCA4LjI2NiA2NC41NjkgOC4wMjYgNjQuODg0IDcuODQ2IEMgNjUuMjE0IDcuNjgxIDY1LjU4OSA3LjU5MSA2Ni4wNTQgNy41OTEgQyA2Ni43MjkgNy41OTEgNjcuMjY5IDcuNzg2IDY3LjY1OSA4LjE2MSBDIDY4LjAwNCA4LjQ5MSA2OC4xODQgOC45MjYgNjguMjI5IDkuNDgxIEwgNjMuODY0IDkuNDgxIFoiPjwvcGF0aD48cGF0aCBkPSJNIDc4LjY1MyA5LjY3NiBMIDc2LjQ0OCA5LjEyMSBDIDc2LjEwMyA5LjAzMSA3NS44NDggOC45MjYgNzUuNjgzIDguNzc2IEMgNzUuNTAzIDguNjI2IDc1LjQyOCA4LjQ2MSA3NS40MjggOC4yODEgQyA3NS40MjggOC4wNDEgNzUuNTMzIDcuODYxIDc1Ljc1OCA3LjcyNiBDIDc1Ljk4MyA3LjYwNiA3Ni4zMjggNy41NDYgNzYuNzYzIDcuNTQ2IEMgNzcuMzQ4IDcuNTQ2IDc3Ljc4MyA3LjY1MSA3OC4wNjggNy44NzYgQyA3OC4zNTMgOC4xMDEgNzguNTAzIDguNDQ2IDc4LjUwMyA4Ljg5NiBMIDgxLjM4MyA4Ljg5NiBDIDgxLjM4MyA3Ljc4NiA4MC45NjMgNi45NDYgODAuMTUzIDYuMzYxIEMgNzkuMzQzIDUuNzc2IDc4LjIwMyA1LjQ3NiA3Ni43NDggNS40NzYgQyA3NS44NjMgNS40NzYgNzUuMTEzIDUuNTgxIDc0LjQ4MyA1LjgwNiBDIDczLjg1MyA2LjAxNiA3My4zNTggNi4zMzEgNzMuMDI4IDYuNzM2IEMgNzIuNjk4IDcuMTQxIDcyLjUzMyA3LjY1MSA3Mi41MzMgOC4yNTEgQyA3Mi41MzMgOS4wMDEgNzIuNzU4IDkuNTg2IDczLjIyMyA5Ljk5MSBDIDczLjcwMyAxMC40MTEgNzQuMjU4IDEwLjcxMSA3NC44ODggMTAuOTA2IEwgNzcuNzk4IDExLjY3MSBDIDc4LjA5OCAxMS43NjEgNzguMzA4IDExLjg4MSA3OC40NDMgMTIuMDE2IEMgNzguNTc4IDEyLjEzNiA3OC42NTMgMTIuMzAxIDc4LjY1MyAxMi40OTYgQyA3OC42NTMgMTIuNzgxIDc4LjU0OCAxMi45OTEgNzguMzIzIDEzLjEyNiBDIDc4LjA5OCAxMy4yNjEgNzcuNzIzIDEzLjMyMSA3Ny4xOTggMTMuMzIxIEMgNzYuNDkzIDEzLjMyMSA3NS45NjggMTMuMjAxIDc1LjYyMyAxMi45MzEgQyA3NS4yNzggMTIuNjc2IDc1LjA5OCAxMi4yNzEgNzUuMDk4IDExLjczMSBMIDcyLjIzMyAxMS43MzEgQyA3Mi4yMzMgMTIuNTI2IDcyLjQxMyAxMy4yMDEgNzIuNzg4IDEzLjc0MSBDIDczLjE3OCAxNC4yODEgNzMuNzE4IDE0LjY4NiA3NC40NTMgMTQuOTcxIEMgNzUuMTczIDE1LjI0MSA3Ni4wNzMgMTUuMzc2IDc3LjE1MyAxNS4zNzYgQyA3OC4xMjggMTUuMzc2IDc4LjkzOCAxNS4yNzEgNzkuNTgzIDE1LjA2MSBDIDgwLjI0MyAxNC44NTEgODAuNzIzIDE0LjUyMSA4MS4wNTMgMTQuMTAxIEMgODEuMzgzIDEzLjY2NiA4MS41NDggMTMuMTQxIDgxLjU0OCAxMi41MjYgQyA4MS41NDggMTEuNzE2IDgxLjI5MyAxMS4xMDEgODAuNzY4IDEwLjY1MSBDIDgwLjI1OCAxMC4yMTYgNzkuNTUzIDkuODg2IDc4LjY1MyA5LjY3NiBaIj48L3BhdGg+PC9zdmc+") no-repeat center;
  }

/* Keycloak user screens begin */
#kc-login, #kc-logout, #saveTOTPBtn, .pf-c-button.btn-lg {
  color: var(--color-opendesk-white);
  border: 2px solid;
}

#kc-login:hover, #kc-logout:hover, #saveTOTPBtn:hover, .pf-c-button.btn-lg:hover {
  color: #000000;
  background-color: #e7dffa;
  border: 2px solid var(--color-accent);
}

.pf-c-form-control {
  background-color: #e7dffa;
}

.pf-c-dropdown__menu-item:hover {
  background-color: var(--color-accent);
  color: var(--color-opendesk-white) !important;
}

#kc-form-options .checkbox {
  color: var(--font-color-contrast-high) !important;
}
#kc-header-wrapper {
  color: var(--color-opendesk-secondary);
}
/* Keycloak user screens end */

.portal-title__image {
    width: 82px;
    height: auto;
}
.portal-title {
    padding: 0 10px 0 5px;
}

/*
.portal::after {
    content: '';
    display: block;
    position: fixed;
    z-index: 0;
    height: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to right, #5e27dd, #5e27dd 62%, white 62%);
}
*/

.portal__background::before {
  content: '';
  display: block;
  position: fixed;
  left: 0;
  background-image: url(/univention/portal/custom/portal_background_image.svg);
  background-repeat: no-repeat;
  width: 100%;
  height: 237px;
  background-size: 480px;
  bottom: 4px;
  background-position: right 25px center;
}

@media screen and (max-width: 1300px){
  .portal__background::before{
      background-size: 350px;
      bottom: -28px;
      background-position: right 19px center;
  }
}

@media screen and (max-width: 748px){
  .portal__background::before{
      background-size: 250px;
      bottom: -50px;
      background-position: right 20px center;
  }
}

.portal-categories:before {
width: 100%;
content: '';
position: fixed;
left: 0;
height: 1px;
top: var(--layout-height-header);
background-color: #dddddd;
z-index: 1;
}

.portal-sidenavigation__login-header {
border-bottom-color:var( --color-opendesk-secondary);
}
.portal-sidenavigation__edit-mode {
border-color:var( --color-opendesk-secondary);
background-color:var( --color-opendesk-secondary);
}

.portal-sidenavigation__edit-mode:hover {
border-color:var(--color-opendesk-secondary-dark);
background-color:var(--color-opendesk-secondary-dark);
}

.portal-header__edit-mode-label {
background-color: var( --color-opendesk-secondary);
}
.portal-sidenavigation__logout-link {
color: var(--color-accent);
}
.portal-sidenavigation__menu-item:hover,
.portal-sidenavigation__menu-subItem:hover {
background-color: var( --color-opendesk-secondary);
transition: all var(--portal-transition-duration);
}
.portal-sidenavigation__menu-item:hover .portal-sidenavigation__submenu{
background-color: var(--color-opendesk-white);
}
.portal-sidenavigation__menu-item:active {
border-color: transparent;
}

input { border: 0.1rem solid var(--color-opendesk-secondary-dark) }
input[readonly] {  background-color: var(--color-opendesk-secondary); }
/*input {
border-color: var(--bgc-inputborder-on-container);
}*/

.portal-search__input{
border: 0.1rem solid var(--bgc-inputborder-on-container);
}

.image-upload__canvas {
background-color: var( --color-opendesk-secondary);
border: 1px solid var( --color-opendesk-secondary);
}

button {
transition: all var(--portal-transition-duration);
}

button.primary {
color: var(--color-opendesk-white);
}
button.primary svg {
color: var(--color-opendesk-white);
}
button[disabled] {
color: #afafaf;
}
button[disabled] svg {
color: #afafaf;
}

button:focus {
border-color:white;
outline: 2px solid var(--color-opendesk-black);
}

input[type=checkbox]:focus {
outline: 2px solid var(--color-opendesk-black);
}

.form-element {
margin-bottom: 2px; /*needed for cleaner Outline*/
margin-left: 2px;
}

select {
border: 1px solid var( --color-opendesk-secondary);
}
.multi-select__select {
border: 1px solid var( --color-opendesk-secondary);
}

.multi-input__row--multiline {
box-shadow: inset 2px 0 var( --color-opendesk-secondary);
}

textarea {
border: .1rem solid #B2AFAF;
width: -webkit-fill-available;
}

.notification--success {
border: 1px solid var(--font-color-success);
background-color: var(--font-color-success-light);
}
.notification--warning {
border: 1px solid var(--font-color-warning);
background-color: var(--font-color-warning-light);
}
.notification--error {
border: 1px solid var(--font-color-error);
background-color: var(--font-color-error-light);
}

.header-tab__clickable:before {
background-color: var( --color-opendesk-secondary);
border-color: var(--color-opendesk-white);
box-shadow: 0 0.2rem 0 var( --color-opendesk-secondary);
border-bottom: 0;
}

.header-tab:hover:before{
background-color: var(--color-opendesk-secondary-dark);
box-shadow: 0 0.2rem 0 var(--color-opendesk-secondary-dark);
border-bottom: 0;
transition: all var(--portal-transition-duration);
}

.header-tab:focus:before {
border-bottom: 0.2rem solid var(--color-opendesk-black);
box-shadow: 0;
}

.header-tab--active:focus:after {
border: 0.2rem solid var(--color-opendesk-black);
}

.portal-tile__name,
.portal-folder__name {
text-shadow: 0 0.1rem 0.1rem rgb(0 0 0 / 10%);
}

.header-tab:hover,
.header-tab:hover ~ .icon-button .portal-icon,
.header-tab--active,
.header-tab--active ~ .icon-button .portal-icon{
color: var(--color-opendesk-white);
transition: all var(--portal-transition-duration);
}

.header-tab--active ~ .icon-button:focus {
border-color: var(--color-opendesk-white);
}

.choose-tab:hover {
background-color: var( --color-opendesk-secondary);
}
.choose-tab--active {
background-color: var(--color-accent);
color: var(--color-opendesk-white);
}


.header-button__button .portal-icon{
  color: #1F1F1F;
  stroke-width: 3;
}
.header-button--is-active  .portal-icon {
  color: var(--color-accent);
}

/*
//
//
// Loading Overlay image and Animation
*/

.standbyCircle{
display: none;
}

.standbyWrapper:before {
content: '';
background-image: url(/univention/portal/icons/logo.svg);
background-size: 70%;
width: 200px;
height: 200px;
background-repeat: no-repeat;
-webkit-animation: pulsate-bck 1.2s ease-in-out infinite both;
animation: pulsate-bck 1.2s ease-in-out infinite both;
background-position: center center;
}

@-webkit-keyframes pulsate-bck {
0% {
  -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 1;
}
50% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 0.5;
}
100% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
}
@keyframes pulsate-bck {
0% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
50% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 0.5;
}
100% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
}

.portal-tooltip {
border-color: var(--color-accent);
}
.portal-tooltip__arrow {
border-color: transparent transparent var(--color-accent) transparent;
}

.portal-title__portal-name {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}