@font-face {
  font-family: "WorkSans";
  font-weight: 400;
  font-style: normal;
  /* font-display: swap — index.css wird render-blocking per <link> in
     index.html geladen; ohne swap blieb der Landingpage-Text bis zum
     TTF-Download unsichtbar (FOIT). WorkSans-ExtraBold.ttf lag daneben,
     ohne dass hier je eine @font-face dafür stand — totes Asset, gelöscht. */
  font-display: swap;
  src: local("WorkSans-Regular"),
    url("/static/fonts/WorkSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "WorkSans-Bold";
  font-weight: 700;
  font-style: bold;
  font-display: swap;
  src: url("/static/fonts/WorkSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "VAG Rounded Bold";
  font-display: swap;
  src: url("/static/fonts/vag_rounded_bold-webfont.woff2") format("woff2");
}

:root {
  --base-color: #3b2f67;
  --even-color: #fafafa;
  --odd-color: #efefef;

  --bg-primary-color: #63b4ff;
  --bg-secondary-color: #c382ff;
  --bg-tertiary-color: #ffffff;
  --bg-highlight-color: #ff944b;
  --bg-input-color: #f0f0f7;

  --text-primary-color: #3b2f67;
  --text-secondary-color: #bc74ff;
  --text-tertiary-color: #ffffff;
  --text-highlight-color: #ff9640;

  --btn-primary-color: #3b2f67;
  --btn-secondary-color: #3c3067;
  --btn-tertiary-color: #f6f4ff;
  --btn-highlight-color: #ff9640;

  --icn-secondary-color: #a091d8;
  --icn-tertiary-color: #66607b;
  --hr-primary-color: #d8d5e1;
  --pipe-primary-color: #ebebf2;

  --hover-color-primary: #2c2155;
  --border-color-secondary: #e5792f;
  --chkbx-chk-color: #cccccc;
  --chkbx-chked-bg-color: #ff9640;

  --hover-color-primary: #2c2155;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-tertiary-color);
  color: var(--btn-primary-color);
  overflow-x: hidden;
  font-family: "WorkSans";
  scrollbar-width: thin;
  min-height: 100vh;
}


.p-checkbox {
  vertical-align: unset;
}
.p-checkbox .p-checkbox-box {
  border: 2px solid var(--base-color);
  background: #ffffff;
  width: 21px;
  height: 21px;
  color: var(--chkbx-chk-color);
  border-radius: 3px;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  /* position: relative;
  z-index: 2; */
}
.p-checkbox .p-checkbox-box[data-p-highlight="true"] {
  border-color: var(--chkbx-chked-bg-color) !important;
  background: var(--chkbx-chked-bg-color) !important;
}
.p-checkbox-box[data-p-highlight] > .p-icon.p-checkbox-icon > path {
  stroke: currentColor;
  stroke-width: 1;
}
.p-checkbox-box.p-focus {
  box-shadow: none !important;
}
.p-checkbox .p-checkbox-box::before {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.p-checkbox:hover .p-checkbox-box[data-p-highlight="false"]::before {
  opacity: 0.8;
}
.p-checkbox .p-checkbox-box[data-p-highlight]::before {
  opacity: 0;
}
/**
* checkbox style end
*/

*:enabled:focus {
  box-shadow: unset !important;
  border-color: unset !important;
}

.pill-btn {
  border-radius: 45px;
  color: var(--text-tertiary-color);
  background-color: var(--btn-primary-color);
  text-align: center;
  font-weight: bold;
  font-style: normal;
  border: none;
  min-width: 200px;
  letter-spacing: 0.18px;
}

.pill-btn.highlight {
  background-color: var(--btn-highlight-color) !important;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background: var(--btn-secondary-color);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--btn-primary-color);
}

/* for default react button */
.p-button {
  border-radius: 45px;
  color: var(--text-tertiary-color);
  background-color: var(--btn-primary-color);
  text-align: center;
  font-weight: bold;
  font-style: normal;
  border: none;
  letter-spacing: 0.18px;
}

.p-button:focus {
  border: none;
}

.p-button:focus-visible {
  border: none;
  outline: none;
}
.p-button:active {
  border: none;
}

input:focus-visible {
  outline: none;
  border-color: transparent;
}

.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
  background-color: var(--bg-secondary-color);
}
.p-multiselect-panel
  .p-multiselect-items
  .p-multiselect-item:not(.p-highlight):not(.p-disabled) {
  color: var(--text-primary-color);
}

.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
  color: var(--text-primary-color);
}

.header-notification {
  background: transparent
    linear-gradient(265deg, #ff9740 0%, #ff77a6 53%, #6d4de0 100%) 0% 0%
    no-repeat padding-box;
  height: 50px;
  font-size: 25px;
  font-weight: bold;
  color: var(--bg-tertiary-color);
}

.header-notification button {
  background-color: transparent;
  border: 1px solid var(--bg-tertiary-color);
}
/**  design for texteditor**/
.ql-container.ql-snow {
  border: none !important;
}
.ql-editor {
  font-size: 16px !important;
}

.ql-editor.ql-blank {
  padding-left: 0;
  padding-right: 0;
}
/** prime component**/
.p-tieredmenu,
.p-tieredmenu
  .p-menuitem
  > .p-menuitem-content
  .p-menuitem-link
  .p-menuitem-text,
.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link,
.p-dialog-content,
.p-dialog-title,
.WelcomeDialogText,
.p-panel .p-panel-header,
.p-panel .p-panel-content {
  color: var(--text-primary-color);
  font-family: "WorkSans";
}

/** prime select **/
.p-dropdown-label.p-inputtext,
.p-dropdown-panel .p-dropdown-items .p-dropdown-item,
.p-dropdown-panel
  .p-dropdown-items
  .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
  color: var(--text-primary-color);
  font-family: "WorkSans";
}

.p-dropdown-label.p-inputtext.p-placeholder {
  color: var(--text-primary-color);
  font-family: "WorkSans";
  opacity: 0.5;
}

/** input floting label**/
.label {
  text-align: left;
}

::placeholder {
  color: var(--text-primary-color);
  font-family: "WorkSans";
  opacity: 0.5;
}
/** prime select **/
.p-dropdown-panel .p-dropdown-header {
  color: var(--base-color);
  background: var(--bg-input-color);
  font-family: "WorkSans";
}

/* .p-menuitem-link:hover,
.p-dropdown-panel
  .p-dropdown-items
  .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
  color: var(--base-color);
  background: var(--bg-secondary-color);
  font-family: "WorkSans";
} */
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  color: var(--bg-tertiary-color);
  background: var(--bg-highlight-color);
  font-family: "WorkSans";
}
.space-to-footer {
  margin-bottom: 120px;
}