:root {
  --theme-accent: #FFCC4A;
  --theme-primary: #000;
  --theme-grey: #A3A3A3;
}

/* Custom Tab Styles */
.k-tabs {
  margin-top: 12px;
  margin-inline: 0;
  gap: var(--spacing-2);

  .k-tab-button {
    --button-color-icon: var(--button-color-dimmed-off);
    --button-text-color: var(--button-color-dimmed-off);
    padding-right: var(--spacing-3);
    color: #000;

    &:hover {
      --button-color-icon: var(--button-color-dimmed-off);
      background: rgba(0, 0, 0, 0.05);
    }

    &[aria-current] {
      --button-color-text: #000;
      --button-color-icon: #000;
      background: #fff;
      box-shadow: var(--shadow);

      &::after {
        display: none;
      }
    }
  }
}

.janitor-wrapper .k-field-help {
  margin-top: var(--spacing-2);
}

.janitor-wrapper .k-field-help p {
  color: var(--color-text-dimmed);
}

.janitor-wrapper .k-button[data-has-icon=true] {
  padding-left: 0.5rem;
  padding-right: 0.75rem;
}

/* Custom Login Screen */
.k-login-view {
  position: relative;
}
.k-login-view .k-choice-input-label-text {
  white-space: nowrap;
}

.k-login-view .k-login-dialog {
  overflow: visible;
}

.k-login-view .k-login-dialog .k-login-button {
  background: var(--theme-accent);
  color: var(--theme-primary);
}

.k-login-view .k-login-dialog .k-login-button .k-icon {
  color: var(--theme-primary);
}

.k-login-view .k-login-dialog::before {
  bottom: 100%;
  display: flex;
  margin-bottom: 1.5rem;
  left: 0;
  content: url('/assets/panel/logo.svg');
  position: absolute;
  width: 100%;
}

.k-login-view::before {
  content: url("/assets/panel/studio-lenzing-logo.svg");
  position: absolute;
  opacity: 0.5;
  bottom: 2.5rem;
  height: 1.25rem;
  width: 7.85rem;
}

/* Quote */
.k-block-type-quote-editor {
	padding-inline-start: var(--spacing-3);
	border-inline-start: 2px solid var(--color-black);
}
.k-block-type-quote-text {
	font-size: var(--text-xl);
	margin-bottom: var(--spacing-1);
	line-height: 1.25em;
}
.k-block-type-quote-citation {
  padding: var(--input-padding-multiline);
  margin-block-start: var(--spacing-2);
  display: flex;
  gap: var(--spacing-2);
  font-style: normal;
  cursor: pointer;
}
.k-block-type-quote-citation figure {
  width: 32px;
  height: 32px;
}
.k-block-type-quote-citation figure img,
.k-block-type-quote-citation figure button {
  object-fit: cover;
  height: 32px;
  width: 32px;
}
.k-block-type-quote-citation div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.k-block-type-quote-citation span:first-child {
	color: var(--color-black);
}