@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Quicksand:wght@400;600&display=swap');

.field-grid {
  display: grid;
  gap: var(--gin-spacing-m);
}

.field-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.field-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

:root {
  --color-primary-50: hsla(0, 86%, 97%, 1);
  --color-primary-100: hsla(0, 93%, 94%, 1);
  --color-primary-200: hsla(0, 96%, 89%, 1);
  --color-primary-300: hsla(360, 86%, 80%, 1);
  --color-primary-400: hsla(360, 85%, 70%, 1);
  --color-primary-500: hsla(360, 52%, 56%, 1);
  --color-primary-600: hsla(360, 52%, 40%, 1);
  --color-primary-700: hsla(0, 73%, 29%, 1);
  --color-primary-800: hsla(360, 68%, 26%, 1);
  --color-primary-900: hsla(360, 93%, 17%, 1);

  --color-secondary-50: hsla(27, 51%, 98%, 1);
  --color-secondary-100: hsla(27, 39%, 91%, 1);
  --color-secondary-200: hsla(26, 34%, 88%, 1);
  --color-secondary-300: hsla(26, 34%, 84%, 1);
  --color-secondary-400: hsla(26, 33%, 81%, 1);
  --color-secondary-500: hsla(27, 30%, 72%, 1);
  --color-secondary-600: hsla(27, 22%, 65%, 1);
  --color-secondary-700: hsla(27, 20%, 56%, 1);
  --color-secondary-800: hsla(28, 33%, 30%, 1);
  --color-secondary-900: hsla(27, 36%, 16%, 1);
}

/**
 * Layout Styles for CKEditor.
 */
.ck-editor {
  font-family: "Open Sans", sans-serif;
}

.ck-editor .layout-text-lg,
.ck-editor .layout-text-xl,
.ck-editor .layout-text-2xl,
.ck-editor .layout-text-3xl,
.ck-editor .layout-text-4xl,
.ck-editor .layout-text-5xl,
.ck-editor .layout-text-6xl {
  font-family: "Quicksand", sans-serif;
}


.layout-text-lg {
  font-size: 18px;
  font-weight: 600;
}

.layout-text-xl {
  font-size: 20px;
  font-weight: 600;
}

.layout-text-2xl {
  font-size: 24px;
  font-weight: bold;
}

.layout-text-3xl {
  font-size: 30px;
  font-weight: bold;
}

.layout-text-4xl {
  font-size: 36px;
  font-weight: bold;
}

.layout-text-5xl {
  font-size: 48px;
  font-weight: bold;
}

.layout-text-6xl {
  font-size: 60px;
  font-weight: bold;
}

.layout-text-primary {
  color: var(--color-primary-700);
}

.layout-btn {
  display: inline-block;
  padding: 10px 19px;
  border-radius: 10px;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
}

.layout-btn--primary {
  background: var(--color-primary-700);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25), 0px 1px 4px rgba(0, 0, 0, 0.25);
  color: white;
}

.layout-btn--secondary-400 {
  background: var(--color-secondary-400);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0.5px 1px 3px rgba(0, 0, 0, 0.11);
  color: var(--color-secondary-800);
}

.layout-btn--secondary-200 {
  background: var(--color-secondary-200);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0.5px 1px 3px rgba(0, 0, 0, 0.11);
  color: var(--color-secondary-800);
}

.layout-btn--white {
  background: #FFFFFF;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25), 0px 1px 4px rgba(0, 0, 0, 0.25);
  color: var(--color-primary-700);
}

/**
 * CSS Classes field.
 */
.field-css-classes {
  width: 100%;
}

/**
 * Layout Builder.
 */
 fieldset#edit-field-content {
    border-radius: 6px;
}

.layout .paragraph {
    background: white;
    padding: 20px;
    outline: 1px solid var(--gin-border-color);
    border-radius: var(--gin-border-s);
    box-shadow: var(--gin-shadow-l1);
}

.lp-builder .layout .paragraph > .lpb-controls {
    border-top-left-radius: 6px;
}

.lp-builder .layout__region {
    padding: 20px;
    outline: 1px solid var(--gin-border-color);
    background: #f9f9f9;
    min-height: 70px;
}

.lp-builder .lpb-layout {
    padding: 30px 0;
    margin: 25px 0;
    outline: none !important;
}

.lp-builder .lpb-layout > .lpb-btn {
    opacity: 1;
    min-width: 250px;
    color: gray;
    box-shadow: none;
    border-radius: 0;
    background: #fdfdfd;
    width: 100%;
    transform: none;
    left: 0;
    box-sizing: border-box;
    text-align: center;
    outline: 1px solid var(--gin-border-color);

    width: auto;
    left: 50%;
    transform: translateX(-50%);
}

.lp-builder .lpb-layout > .lpb-btn.before {
    top: -30px;
    border-radius: 6px;
}

.lp-builder .lpb-layout > .lpb-btn.after {
    bottom: -30px;
    border-radius: 6px;
}

.lp-builder .lpb-layout + .lpb-layout > .lpb-btn.before {
    display: none;
}

.lp-builder .lpb-layout:last-child {
    margin-bottom: 75px;
}

.lp-builder .lpb-controls.is-layout {
    top: -10px;
}

.lp-builder .layout {
    border-radius: 6px;
    box-shadow: var(--gin-shadow-l1);
}

.lp-builder .layout__region:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.lp-builder .layout__region:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.lp-builder .layout__region > .lpb-btn--add {
    opacity: 0.4;
}

.layout-region-node-main > .field--name-field-content {
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -48px;
    outline: 0 !important;
}

.layout-region-node-main > .field--name-field-content > fieldset {
    border: none;
    border-top: 1px solid var(--gin-border-color);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.lp-builder .ajax-progress {
    position: absolute;
}

.lp-builder .js-lpb-component + .js-lpb-component,
.lp-builder .lpb-navigating-placeholder + .js-lpb-component {
    margin-top: 10px;
}

/* People Liste */
#views-exposed-form-user-admin-people-page-1 .fieldset__wrapper {
  display: grid;
  grid-template-columns: min-content min-content;
}

#views-exposed-form-user-admin-people-page-1 .fieldset__description {
  grid-column: span 2;
}

#views-exposed-form-user-admin-people-page-1 .form-item--uid-raw-1 {
  display: none !important;
}