/* FONTS */
@font-face{
  font-family:"Netto W01";
  font-weight: 400;
  font-style: normal;
  src:url("../fonts/5560498/052be335-d0d2-49d2-867d-5e26b9c7b302.woff2") format("woff2"),
  url("../fonts/5560498/6c94e13c-af1f-4f6f-9d64-f68bf977e7ee.woff") format("woff");
}
@font-face{
  font-family:"Netto W01";
  font-weight: 400;
  font-style: italic;
  src:url("../fonts/5617153/54f88dab-f1f2-4ffa-b3e3-9b1b69feb3e0.woff2") format("woff2"),
  url("../fonts/5617153/98a9ef89-bfe4-457a-91c4-95263b0e2921.woff") format("woff");
}
@font-face{
  font-family:"Netto W01";
  font-weight: 700;
  font-style: normal;
  src:url("../fonts/5617162/7f042938-58bd-453f-b9ab-c7948ab829df.woff2") format("woff2"),
  url("../fonts/5617162/98dfd474-1f15-4956-9026-01c709c22fad.woff") format("woff");
}
@font-face{
  font-family:"Netto W01";
  font-weight: 700;
  font-style: italic;
  src:url("../fonts/5617167/d06c3381-e41d-4a63-b858-4288bdb6edaa.woff2") format("woff2"),
  url("../fonts/5617167/1de00b29-2c95-432f-a383-3424bbfa6a37.woff") format("woff");
}
@font-face{
  font-family:"Netto W01";
  font-weight: 800;
  font-style: normal;
  src:url("../fonts/5617176/32e774ee-d7a6-48b5-bd02-5ab744d88b33.woff2") format("woff2"),
  url("../fonts/5617176/5a2867a0-91b4-4077-9dec-e98610b345ec.woff") format("woff");
}
@font-face{
  font-family:"Netto W01";
  font-weight: 800;
  font-style: italic;
  src:url("../fonts/5617185/08a9a9cd-dbb5-497b-9a06-bd66fe31981b.woff2") format("woff2"),
  url("../fonts/5617185/d8f70c1d-cf5f-4722-b204-f2bdf774a637.woff") format("woff");
}
@font-face{
  font-family:"Netto W01";
  font-weight: 200;
  font-style: normal;
  src:url("../fonts/5617210/b451a9ce-7f4f-4693-a749-2a3415298fea.woff2") format("woff2"),
  url("../fonts/5617210/d4a02a66-539d-499f-9e65-3aea3eee926f.woff") format("woff");
}
@font-face{
  font-family:"Netto W01";
  font-weight: 200;
  font-style: italic;
  src:url("../fonts/5617219/d9daa91f-8584-4e98-8e61-e900bdd1fa8f.woff2") format("woff2"),
  url("../fonts/5617219/45ee64b8-d14e-4b2f-a115-ef0247ca1fc7.woff") format("woff");
}
@font-face{
  font-family:"Netto W01";
  font-weight: 300;
  font-style: normal;
  src:url("../fonts/5617228/62fc68f8-0f4c-4eff-83c3-070b4f6bbd08.woff2") format("woff2"),
  url("../fonts/5617228/d6b5e1cd-e5a5-46c9-9c73-eeca8766e704.woff") format("woff");
}
@font-face{
  font-family:"Netto W01";
  font-weight: 300;
  font-style: italic;
  src:url("../fonts/5617237/f8046b90-7458-4bd5-ad7e-f777a9308eac.woff2") format("woff2"),
  url("../fonts/5617237/e4fc4346-aa67-40da-ab27-3f1c61be5cbf.woff") format("woff");
}

/* BASE STYLES */
html {
  font-size: 16px;
}

*:focus {
  outline: none;
}

*, ::after, ::before {
  box-sizing: border-box;
}

body {
  color: var(--color-grey-dark);
  font-family: "Netto W01", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-size: var(--font-size);
  background-color: var(--color-item-bg-1);
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: var(--color-primary);
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
}

.container .container {
  padding: 0;
}

p {
  font-size: var(--font-size-text);
  line-height: var(--line-height-text);
  margin: 1.5em 0;
}

/* Unpublished paragraphs */
.a.unpublished,
.paragraph.unpublished {
  opacity: 0.3;
  margin: 10px 0;
  padding: 10px 0;
}

.a.unpublished::before,
.paragraph.unpublished::before {
  content: 'UNPUBLISHED';
  position: absolute;
  left: calc(100% - 200px);
  color: white;
  background: red;
  border-radius: 1rem;
  padding: 10px;
  margin: 10px 0;
  z-index: 999;
}

.event-content > .container,
.field--name-field-ements-wfbb-page {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 2rem;
}

#main-content {
  padding: var(--header-height) var(--page-gap) 0;
  scroll-behavior: smooth;
}


#main-content.background-color-grey {
  background-color: var(--color-grey-light);
}

#main-content.background-color-grey::before {
  content: '';
  position: fixed;
  height: 100vh;
  width: 100%;
  background-color: var(--color-grey-light);
  left: 0;
  top: 0;
  z-index: -1;
}

#main-content.layout-location {
  padding: unset;
}


/* Admin bottom nav bar */
nav.tabs ul {
  display: flex;
  margin: .75rem;
}

nav.tabs ul li {
  list-style: none;
  padding: 0 1rem;
}

nav.tabs ul li a {
  color: #fff;
}



/* BASE - IMAGE */
figure {
  margin: 0 auto;
  height: 100%;
  display: block;
}

figure img {
  vertical-align: middle;
  border-style: none;
  height: auto;
  width: 100%;
  margin: 0;
}

figure figcaption {
  font-size: .75rem;
  background: rgb(255 255 255 / 40%);
  padding: .25rem .5rem;
  border-radius: calc(var(--border-radius) / 2);
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: 1.75rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  color: transparent;
  z-index: 1000;
  height: auto !important;
}

figcaption::before {
  content: '©';
  position: absolute;
  color: var(--color-grey-dark);
}

figcaption:hover {
  max-width: inherit;
  color: var(--color-grey-dark);
  background: rgb(255 255 255 / 100%);
  width: auto;
}

figcaption:hover::before {
  content: '';
  position: absolute;
  color: var(--color-grey-dark);
}


/* Focus styles */
label:focus-visible,
input ~ label:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
  z-index: 9999;
}

/* TODO: Extract to backend.css and load only for logged-in users */
/********************/
/* LOGGED IN STYLES */
/********************/

/* Move administration toolbar in front of menu */
#toolbar-administration {
  z-index: 9999;
  position: relative;
}

/* Move local task to bottom */
#block-wfbb-theme-reiter {
  margin-bottom: 0 !important;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: center;
  background: #101010;
  height: var(--user-edit-bar-height);
}

#block-wfbb-theme-reiter .contextual {
  display: none;
}

#block-wfbb-theme-reiter ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

#block-wfbb-theme-reiter ul li a {
  border-radius: 0 !important;
  border: 0 !important;
  padding: .5rem 1rem !important;
  color: var(--color-grey);
}


#block-wfbb-theme-reiter ul li a.is-active {
  color: #fff !important;
}

a.back-to-top {
  display: none;
}


#user-login-form {
  padding-top: 2rem;
}

#user-login-form .form-item {
  padding: 1rem;
}

#user-login-form .form-item input {
  margin-top: 1rem;
}

#user-login-form > input {
  margin-left: 1rem;

  font-weight: 700;
  font-size: 1.125rem;
  font-family: 'Netto W01', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-decoration: none;
  display: inline-block;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 5rem;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  padding: .5em 1em .5em 1em;
  gap: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}


#user-login-form > input:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
}