/**
 * 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: #571EFA;
  --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: #203257;
  --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: #571EFA;
  --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: #AA98FB;
  --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("/static-files/login/logo.svg") no-repeat center;
}

/* Beta overlay for Notes */
.portal-tile[target="tab_notes"]:before {
  position: absolute;
  content: "Beta";
  color: #571EFA;
  transform: rotate(45deg);
  top: 8px;
  right: 0px;
  font-size: var(--font-size-5);
  font-weight: bold;
  z-index: 1;
}

@media screen and (max-width: 748px) {
  .portal-tile[target="tab_notes"]:before {
      top: 5px;
      font-size: 10px;
  }
  .portal-tile__name {
      font-size: 13px;
  }
}

.portal-tile[target="tab_notes"]:after {
  position: absolute;
  content: "";
  top: 1px;
  right: 1px;
  border-style: solid;
  border-width: 0 calc(var(--app-tile-side-length) / 2) calc(var(--app-tile-side-length) / 2) 0;
  border-color: transparent #E9E4FC transparent transparent;
  z-index: 0;
  border-top-right-radius: calc(var(--border-radius-apptile) - 1px);
}

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

.kc-social-provider-name {
  color: var(--color-opendesk-white) !important;
}

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

.login-pf-page {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-pf-page #kc-header {
  display: none;
}

.login-pf-page .card-pf {
  border-radius: 13px;
  margin-top: 40px;
}

.login-pf-page #umcLoginLinks a {
  color: #000;
}

.login-pf-page #umcLoginLinks a:focus {
  text-decoration-thickness: unset;
}

.login-pf body {
  background: #eee6fe url("/static-files/login/background.jpg") center center/cover no-repeat !important;
}
/* 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, #571EFA, #571EFA 62%, white 62%);
}
*/

.portal__background::before {
  content: '';
  display: block;
  position: fixed;
  left: 0;
  background-image: url("/static-files/portal/background.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;
}

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

.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("/static-files/portal/waiting-spinner.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: #D3D7DE;
  box-shadow: 0px 0px 4px 0px rgba(32, 50, 87, 0.10);
}

.portal-tooltip__arrow {
  border-color: transparent transparent #D3D7DE 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;
}