@charset "UTF-8";
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/*------------------------------------*\
  MEDIA QUERY MIXINS
\*------------------------------------*/
/*------------------------------------*\
    AUSSTICH THEME-VARIABLES
\*------------------------------------*/
:root {
  /*------------------------------------*\
      BRAND
  \*------------------------------------*/
  --color-main: rgb(229, 62, 57);
  --color-main-second: rgb(215, 58, 54);
  --color-main-hover: var(--color-main);
  --color-main-blured: rgba(229, 62, 57, 0.75);
  --color-main-mt: rgb(0, 148, 68);
  --color-main-second-mt: rgb(0, 134, 62);
  /* VERBÄNDE */
  --color-bksv: rgb(81, 90, 97);
  --color-isv: rgb(249, 80, 77);
  --color-nosv: rgb(27, 181, 150);
  --color-nwsv: rgb(84, 123, 233);
  --color-swsv: rgb(247, 109, 0);
  /* UI */
  --color-save: rgb(34, 188, 158);
  --color-save-hover: rgb(35, 172, 145);
  --color-success: var(--color-save);
  --color-error: red;
  --color-grey-light: rgb(240, 240, 240);
  --color-grey-dark: rgb(44, 44, 44);
  --color-trophy-kranz: rgba(254, 212, 35, 0.45);
  --color-trophy-big: rgb(254, 212, 35);
  --color-form-grey: var(--color-grey-light);
  /*------------------------------------*\
      2. FONTS & TYPO
  \*------------------------------------*/
  --font-family-primary: "eds-market-regular", sans-serif; /* brand font */
  --font-family-secondary: "oswald", sans-serif; /* app font */
  --basic-line-height: 1.4;
  --basic-border-radius: 1.5rem;
  --font-size-box-title-mobile: 1.25rem;
  --font-size-box-title-desktop: 1.325rem;
  --font-size-main-navigation: 2rem;
  /*------------------------------------*\
     3. Z-LEVELS
  \*------------------------------------*/
  --z-level-1: 1001;
  --z-level-2: 2001;
  --z-level-3: 3001;
  --z-level-4: 4001;
  --z-level-5: 5001;
  --z-level-6: 6001;
  --z-level-7: 7001;
  /*------------------------------------*\
    4. PADDINGS & MARGINS
  \*------------------------------------*/
  --navigation-top-padding-y: 0.875rem;
  --navigation-padding-mobile: 0.675rem 5vw;
  --main-content-padding-mobile: 1.65rem 5vw;
  --main-content-padding-desktop: 1.65rem 2.75rem;
}

/*------------------------------------*\
    MIXINS
\*------------------------------------*/
/* HIDE SCROLLBAR */
/*------------------------------------*\
    HELPERS-INDEX
\*------------------------------------*/ /*------------------------------------*\
    BASE
    1.1 DEFAULT BOX-SIZING
    1.2 BASE
    1.3 LOGO
    1.4 MOBILE-BUTTON
    1.5 BACKGROUND
\*------------------------------------*/
/*------------------------------------*\
    1. DEFAULT BOX-SIZING
\*------------------------------------*/
*, *:before, *:after {
  box-sizing: border-box;
}

/*------------------------------------*\
    2. BASE
\*------------------------------------*/
body {
  min-height: 100vh;
  min-height: 100dvh;
}

html {
  height: 100%;
}

/*------------------------------------*\
    3. LOGO
\*------------------------------------*/
#logo {
  width: 8.875rem;
}
#logo a {
  display: flex;
  width: 100%;
}
#logo a img {
  width: 100%;
}

#main-navigation #logo {
  display: flex;
}
@media only screen and (min-width: 1024px) {
  #main-navigation #logo {
    display: none;
  }
}

/*------------------------------------*\
    4. MOBILE-NAV-BUTTON
\*------------------------------------*/
#mobile-button {
  cursor: pointer;
  margin-left: auto;
  padding: 0.25rem;
}
@media only screen and (min-width: 1024px) {
  #mobile-button {
    display: none;
  }
}
#mobile-button .mobile-button-inner {
  height: 1.75rem;
  width: 2.875rem;
  position: relative;
}
#mobile-button .mobile-button-inner span {
  background-color: black;
  border-radius: 1rem;
  display: block;
  position: absolute;
  left: 0;
  height: 0.325rem;
  width: 100%;
  transition: top 0.3s ease, bottom 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
#mobile-button .mobile-button-inner span:nth-child(1) {
  top: 0;
  transform-origin: left;
}
#mobile-button .mobile-button-inner span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
}
#mobile-button .mobile-button-inner span:nth-child(3) {
  bottom: 0;
  transform-origin: left;
}
#mobile-button.active .mobile-button-inner span:nth-child(1) {
  transform: rotate(28.75deg);
  width: 117.5%;
}
#mobile-button.active .mobile-button-inner span:nth-child(2) {
  opacity: 0;
}
#mobile-button.active .mobile-button-inner span:nth-child(3) {
  transform: rotate(-28.75deg);
  bottom: -11.5%;
  width: 117.5%;
}

/*------------------------------------*\
    1.5 BACKGROUND-FRONTPAGE
\*------------------------------------*/
#gurt-background {
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0%;
  z-index: 1;
}
#gurt-background div {
  display: flex;
  flex-direction: row;
  padding: 1.25rem 0;
  opacity: 0.85;
}
#gurt-background div img {
  animation: marquee-left 10s linear infinite;
  height: 4rem;
}
#gurt-background div:nth-child(odd) img {
  animation: marquee-left 15s linear infinite;
}
#gurt-background div:nth-child(even) img {
  animation: marquee-right 15s linear infinite;
}

@keyframes marquee-left {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(-100%);
  }
}
@keyframes marquee-right {
  0% {
    transform: translate(-100%);
  }
  to {
    transform: translate(0%);
  }
}
/*------------------------------------*\
    TYPO
    1.1 FONT-SIZE FORMATS
    1.2 TITLES
    1.3 LINKS
    1.4 LISTS
    1.5 SELECTION
\*------------------------------------*/
html {
  font-family: var(--font-family-secondary);
  font-size: 3.675vw !important;
  font-weight: 400;
}
@media only screen and (min-width: 768px) {
  html {
    font-size: 2.25vw !important;
  }
}
@media only screen and (min-width: 1024px) {
  html {
    font-size: 1.25vw !important;
  }
}
@media only screen and (min-width: 1600px) {
  html {
    font-size: 1vw !important;
  }
}

/* 1.1 FONT-SIZE FORMATS */
.font-size-small {
  font-weight: 400;
  font-size: 0.825rem !important;
}

/* 1.2 TITLES*/
h3, .title-h3 {
  font-size: 1.25rem;
  margin: 1.75rem 0 0.25rem;
}

/* 1.3 LINKS */
a {
  box-shadow: none;
  color: var(--color-main);
  outline: none;
}

/* 1.4 LISTS */
ol, ul {
  margin: 0.5rem 0 1.25rem;
}

/* 1.5 SELECTION */
::selection {
  background-color: black;
  color: white;
}

::-moz-selection {
  background-color: black;
  color: white;
}

/*------------------------------------*\
    BUTTONS
    1.1 BASE-STYLES
    1.2 SPECIAL - SAVE-TEAM
\*------------------------------------*/
/* 1.1 BASE-STYLES */
button,
.button,
input[type=submit] {
  background-color: var(--color-main) !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: var(--color-main) !important;
  border-radius: 0.675rem !important;
  color: white !important;
  cursor: pointer !important;
  display: inline-block !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  height: auto !important;
  letter-spacing: 0.5px;
  line-height: 1 !important;
  padding: 0.6375rem 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: 200ms all linear;
  width: 100%;
  /* BUTTON-BEHAVIOUR */
  /* BOTTOM-BAR ICONS / BUTTONS */
}
button:hover, button:focus,
.button:hover,
.button:focus,
input[type=submit]:hover,
input[type=submit]:focus {
  background-color: white !important;
  border-color: var(--color-main);
  box-shadow: none !important;
  color: var(--color-main) !important;
}
button.button-negative,
.button.button-negative,
input[type=submit].button-negative {
  border-color: var(--color-main) !important;
  background-color: transparent !important;
  color: var(--color-main) !important;
}
button.button-save,
.button.button-save,
input[type=submit].button-save {
  background-color: var(--color-save) !important;
  border-color: var(--color-save) !important;
  color: white !important;
  cursor: pointer;
}
button.button-save:hover, button.button-save:focus,
.button.button-save:hover,
.button.button-save:focus,
input[type=submit].button-save:hover,
input[type=submit].button-save:focus {
  background-color: var(--color-save-hover) !important;
  border-color: var(--color-save-hover) !important;
}
button.button-navigation:hover, button.button-navigation:focus,
.button.button-navigation:hover,
.button.button-navigation:focus,
input[type=submit].button-navigation:hover,
input[type=submit].button-navigation:focus {
  background-color: var(--color-save-hover) !important;
  border-color: var(--color-save-hover) !important;
  color: white !important;
}
button.button-save-default::after,
.button.button-save-default::after,
input[type=submit].button-save-default::after {
  content: "Speichern";
}
button.button-save-default.saving::after, button.button-save-default.loading::after,
.button.button-save-default.saving::after,
.button.button-save-default.loading::after,
input[type=submit].button-save-default.saving::after,
input[type=submit].button-save-default.loading::after {
  content: "Speichert...";
}
button.button-save-default.saved,
.button.button-save-default.saved,
input[type=submit].button-save-default.saved {
  background-color: #22bc9e;
}
button.button-save-default.saved::after,
.button.button-save-default.saved::after,
input[type=submit].button-save-default.saved::after {
  content: "Gespeichert";
}
button.button-save-team::after,
.button.button-save-team::after,
input[type=submit].button-save-team::after {
  content: "Speichern";
}
button.button-save-team.saving::after, button.button-save-team.loading::after,
.button.button-save-team.saving::after,
.button.button-save-team.loading::after,
input[type=submit].button-save-team.saving::after,
input[type=submit].button-save-team.loading::after {
  content: "Speichert...";
}
button.button-save-team.saved,
.button.button-save-team.saved,
input[type=submit].button-save-team.saved {
  background-color: #22bc9e;
}
button.button-save-team.saved::after,
.button.button-save-team.saved::after,
input[type=submit].button-save-team.saved::after {
  content: "Gespeichert";
}
button.button-group-join::after,
.button.button-group-join::after,
input[type=submit].button-group-join::after {
  content: "Gruppe beitreten";
}
button.button-group-join.saving::after, button.button-group-join.loading::after,
.button.button-group-join.saving::after,
.button.button-group-join.loading::after,
input[type=submit].button-group-join.saving::after,
input[type=submit].button-group-join.loading::after {
  content: "Tritt bei...";
}
button.button-group-join.saved,
.button.button-group-join.saved,
input[type=submit].button-group-join.saved {
  background-color: #22bc9e;
}
button.button-group-join.saved::after,
.button.button-group-join.saved::after,
input[type=submit].button-group-join.saved::after {
  content: "Erfolgreich beigetreten";
}
button.button-change-password::after,
.button.button-change-password::after,
input[type=submit].button-change-password::after {
  content: "Passwort ändern";
}
button.button-change-email::after,
.button.button-change-email::after,
input[type=submit].button-change-email::after {
  content: "E-Mail ändern";
}
button.button-change-email.saving::after, button.button-change-email.loading::after,
.button.button-change-email.saving::after,
.button.button-change-email.loading::after,
input[type=submit].button-change-email.saving::after,
input[type=submit].button-change-email.loading::after {
  content: "Speichert...";
}
button.button-change-email.saved,
.button.button-change-email.saved,
input[type=submit].button-change-email.saved {
  background-color: #22bc9e;
}
button.button-change-email.saved::after,
.button.button-change-email.saved::after,
input[type=submit].button-change-email.saved::after {
  content: "E-Mail gespeichert";
}
button.button-save-team-minimal,
.button.button-save-team-minimal,
input[type=submit].button-save-team-minimal {
  background-color: var(--color-save) !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  display: flex;
  padding: 0 !important;
}
button.button-save-team-minimal::after,
.button.button-save-team-minimal::after,
input[type=submit].button-save-team-minimal::after {
  background-image: url("../img/icons/icon-save-white.svg");
  background-repeat: no-repeat;
  background-size: 2rem;
  background-position: center center;
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  button.button-save-team-minimal,
  .button.button-save-team-minimal,
  input[type=submit].button-save-team-minimal {
    background-size: 22.5%;
  }
}
button.button-save-team-minimal.saving::after, button.button-save-team-minimal.loading::after,
.button.button-save-team-minimal.saving::after,
.button.button-save-team-minimal.loading::after,
input[type=submit].button-save-team-minimal.saving::after,
input[type=submit].button-save-team-minimal.loading::after {
  background-image: url("../img/icons/icon-loading-white.svg");
  animation: rotate 2s linear infinite;
}
button.button-save-team-minimal.saved::after,
.button.button-save-team-minimal.saved::after,
input[type=submit].button-save-team-minimal.saved::after {
  background-image: url("../img/icons/icon-check-round-white.svg");
}
button.button-show-team,
.button.button-show-team,
input[type=submit].button-show-team {
  background-color: white !important;
  border-color: var(--color-save) !important;
  background-image: url("../img/icons/icon-team-main.svg");
  background-repeat: no-repeat;
  background-size: 2.25rem;
  background-position: center center;
  border-radius: 0 !important;
  border: none !important;
}
@media only screen and (min-width: 768px) {
  button.button-show-team,
  .button.button-show-team,
  input[type=submit].button-show-team {
    background-size: 30%;
  }
}
button.button-show-team.toggled,
.button.button-show-team.toggled,
input[type=submit].button-show-team.toggled {
  background-image: url("../img/icons/icon-team-selection-main.svg");
}
button.button-show-groups,
.button.button-show-groups,
input[type=submit].button-show-groups {
  background-color: var(--color-main) !important;
  border-radius: 0 !important;
  border: 0 !important;
  background-image: url("../img/icons/icon-group-list-white.svg");
  background-repeat: no-repeat;
  background-size: 2rem;
  background-position: center center;
}
button.button-show-groups.active,
.button.button-show-groups.active,
input[type=submit].button-show-groups.active {
  background-color: white !important;
  background-image: url("../img/icons/icon-group-list-main.svg");
}
button.button-create-group,
.button.button-create-group,
input[type=submit].button-create-group {
  background-color: var(--color-main) !important;
  border-radius: 0 !important;
  border: 0 !important;
  background-image: url("../img/icons/icon-group-create-white.svg");
  background-repeat: no-repeat;
  background-size: 2.5rem;
  background-position: center center;
}
button.button-create-group.active,
.button.button-create-group.active,
input[type=submit].button-create-group.active {
  background-color: white !important;
  background-image: url("../img/icons/icon-group-create-main.svg");
}
button.button-show-rules,
.button.button-show-rules,
input[type=submit].button-show-rules {
  background-color: var(--color-main) !important;
  border-radius: 0 !important;
  border: 0 !important;
  background-image: url("../img/icons/icon-rules-white.svg");
  background-repeat: no-repeat;
  background-size: 2.05rem;
  background-position: center center;
}
button.button-show-rules.active,
.button.button-show-rules.active,
input[type=submit].button-show-rules.active {
  background-image: url("../img/icons/icon-rules-main.svg");
  background-color: white !important;
}
button.button-show-gaben,
.button.button-show-gaben,
input[type=submit].button-show-gaben {
  background-color: var(--color-main) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: url("../img/icons/icon-cow-white.svg");
  background-repeat: no-repeat;
  background-size: 2.5rem;
  background-position: center center;
}
button.button-show-gaben.active,
.button.button-show-gaben.active,
input[type=submit].button-show-gaben.active {
  background-image: url("../img/icons/icon-cow-main.svg");
  background-color: white !important;
}
button.button-show-hof-info,
.button.button-show-hof-info,
input[type=submit].button-show-hof-info {
  background-color: var(--color-main) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: url("../img/icons/icon-hof-info-white.svg");
  background-repeat: no-repeat;
  background-size: 2.215rem;
  background-position: center center;
}
button.button-show-hof-info.active,
.button.button-show-hof-info.active,
input[type=submit].button-show-hof-info.active {
  background-image: url("../img/icons/icon-hof-info-main.svg");
  background-color: white !important;
}
button.button-show-hof-ranking,
.button.button-show-hof-ranking,
input[type=submit].button-show-hof-ranking {
  background-color: var(--color-main) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: url("../img/icons/icon-hof-ranking-white.svg");
  background-repeat: no-repeat;
  background-size: 2.125rem;
  background-position: center center;
}
button.button-show-hof-ranking.active,
.button.button-show-hof-ranking.active,
input[type=submit].button-show-hof-ranking.active {
  background-color: white !important;
  background-image: url("../img/icons/icon-hof-ranking-main.svg");
}
button.button-show-profile-info,
.button.button-show-profile-info,
input[type=submit].button-show-profile-info {
  background-color: var(--color-main) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: url("../img/icons/icon-profile-white.svg");
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position: center center;
}
button.button-show-profile-info.active,
.button.button-show-profile-info.active,
input[type=submit].button-show-profile-info.active {
  background-color: white !important;
  background-image: url("../img/icons/icon-profile-main.svg");
}
button.button-show-profile-success,
.button.button-show-profile-success,
input[type=submit].button-show-profile-success {
  background-color: var(--color-main) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: url("../img/icons/icon-profile-ranking-white.svg");
  background-repeat: no-repeat;
  background-size: 2.125rem;
  background-position: center center;
}
button.button-show-profile-success.active,
.button.button-show-profile-success.active,
input[type=submit].button-show-profile-success.active {
  background-color: white !important;
  background-image: url("../img/icons/icon-profile-ranking-main.svg");
}
button.button-show-group-info,
.button.button-show-group-info,
input[type=submit].button-show-group-info {
  background-color: var(--color-main) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: url("../img/icons/icon-hof-info-white.svg");
  background-repeat: no-repeat;
  background-size: 2.125rem;
  background-position: center center;
}
button.button-show-group-info.active,
.button.button-show-group-info.active,
input[type=submit].button-show-group-info.active {
  background-color: white !important;
  background-image: url("../img/icons/icon-hof-info-main.svg");
}
button.button-show-group-ranking,
.button.button-show-group-ranking,
input[type=submit].button-show-group-ranking {
  background-color: var(--color-main) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: url("../img/icons/icon-ranking-list-white.svg");
  background-repeat: no-repeat;
  background-size: 2.125rem;
  background-position: center center;
}
button.button-show-group-ranking.active,
.button.button-show-group-ranking.active,
input[type=submit].button-show-group-ranking.active {
  background-color: white !important;
  background-image: url("../img/icons/icon-ranking-list-main.svg");
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*------------------------------------*\
    FORM
    1.1 BASE
    1.2 CREATE-PASSWORD FIELD
    1.3 FORM-FIELD-STYLES
    1.4 FORM-MESSAGES
    1.5 REMOVE AUTOFILL YELLOW-BACKGROUND (FIX)

\*------------------------------------*/
/* 1.1 BASE */
input,
textarea,
select {
  background-color: var(--color-form-grey) !important;
  border: 1px solid var(--color-form-grey);
  border-radius: 0.675rem !important;
  font-size: 1rem !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 0.325rem 1rem 0.4125rem !important;
  outline: none !important;
  -webkit-appearance: none !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-main) !important;
  box-shadow: none !important;
}

@-moz-document url-prefix() {
  input,
  textarea,
  select {
    padding: 0.75rem 1rem 0.4125rem !important;
  }
}
.custom-checkbox {
  padding: 0 !important;
}
.custom-checkbox input[type=checkbox] {
  display: none !important;
}
.custom-checkbox label {
  font-size: 1rem !important;
  padding-left: 1.75rem !important;
}
.custom-checkbox label::before {
  border-radius: 0.2rem !important;
  height: 1.25rem !important;
  left: 0 !important;
  top: 0.075rem !important;
  width: 1.25rem !important;
}
.custom-checkbox input:checked ~ label::before {
  background-color: var(--color-main) !important;
  background-image: url("../img/icons/icon-check-white.svg");
  background-size: 80%;
  background-position: center center;
  background-repeat: no-repeat;
  border-color: var(--color-main) !important;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("../img/icons/select-arrows.svg");
  background-repeat: no-repeat;
  background-size: 1.125rem;
  background-position: right 1rem top 50%;
  padding-right: 3rem;
}

textarea {
  line-height: 1.2 !important;
}

/* 1.2 CREATE-PASSWORD-FIELD */
.input-group {
  position: relative;
}
.input-group .input-group-append {
  background-color: transparent;
  position: absolute;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
}
.input-group .input-group-append span {
  background-color: transparent;
  border: none;
}

/* 1.4 FORM-FIELD STYLES */
.form-field {
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
}
.form-field:first-child {
  margin-top: 0;
}
.form-field .label {
  margin-bottom: 0.5rem;
}
.form-field .desc {
  margin-top: 0;
}
.form-field .double-field {
  margin-top: 0.5rem; /* example: two fields in a row to create new password */
}
.form-field .non-editable-text {
  background-color: var(--color-form-grey);
  border-radius: 0.675rem;
  padding: 0.4175rem 1rem 0.4175rem;
  margin: 0;
}
.form-field .non-editable-text.group-link {
  cursor: pointer;
  padding-bottom: 0.675rem;
}
.form-field .non-editable-text.group-link .group-url {
  color: var(--color-main);
  font-weight: 400;
}
.form-field .non-editable-text.group-link.clicked .group-url,
.form-field .non-editable-text.group-link.clicked .click-desc {
  display: none;
}
.form-field .non-editable-text.group-link.clicked::after {
  content: "Link in die Zwischenablage kopiert. Teile diesen über «Einfügen» (CTRL+V) in WhatsApp, Signal, E-Mail...";
  color: var(--color-success);
  font-size: 400;
}

form .field-wrapper {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  form .field-wrapper-column-2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 768px) {
  form .field-wrapper-column-2 > span {
    width: 48.5%;
  }
  form .field-wrapper-column-2 > span input {
    width: 100%;
  }
}
form .field-wrapper-textarea {
  width: 100%;
}
form .field-wrapper-textarea textarea {
  width: 100%;
}
form .field-wrapper-submit {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 0;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  form .field-wrapper-submit input {
    width: 11.25rem;
  }
}
form .field-wrapper-submit .wpcf7-spinner {
  display: none;
}

/* 1.4 MESSAGES (USP AND CUSTOM */
/* alert messages from uwp-plugin */
/* alerts from uwp plugin / used for login, register, change password... */
.alert {
  background-color: transparent !important;
  border-radius: 0.325rem !important;
  font-size: 0.8125rem;
  display: block;
  margin-bottom: 0.725rem;
  padding: 0.5rem !important;
}
.alert.alert-danger {
  border: 2px solid var(--color-error) !important;
  color: var(--color-error) !important;
}
.alert.alert-success {
  border: 2px solid var(--color-success) !important;
  color: var(--color-success) !important;
}
.alert i {
  display: none !important;
}

/* alert messages from contact form 7 */
form.sent .form-inner {
  display: none !important;
}

[data-status=sent] .wpcf7-response-output {
  color: var(--color-success) !important;
}

[data-status=invalid] .wpcf7-response-output {
  color: var(--color-error) !important;
}

.wpcf7-response-output {
  border: none !important;
  margin: 1.75rem 0 0 !important;
  padding: 0 !important;
}

/* 1.5 REMOVE AUTOFILL YELLOW-BACKGROUND (FIX) */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--color-form-grey) inset !important; /* override yellow autofill color */
}

/*------------------------------------*\
    BOXES
    1.1 DEFAULT BOX-STYLE
    1.2 STYLE - LOGIN-BOX
    1.4 STYLE - SELECT-TEAM-BOX - FILTER 
\*------------------------------------*/
:root {
  --padding-x-default-mobile: 1.125rem;
  --padding-x-default-desktop: 1.5rem;
  --padding-x-sidebar-desktop: 1.5rem;
  --padding-y-default-mobile: 1.25rem;
  --padding-y-default-desktop: 1.5rem;
  --padding-y-login-box: 2.5rem;
}

.box {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
  width: 100%;
}
.box:last-child {
  margin-bottom: 0;
}
.box.box-photo {
  min-height: 100%;
  position: relative;
}
.box.box-photo .credit {
  color: white;
  font-size: 0.65rem;
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
}
.box .box-title {
  background-color: black;
  border: 2px solid black;
  border-radius: var(--basic-border-radius) var(--basic-border-radius) 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: var(--font-family-primary);
  padding: 0.425rem 0;
  position: relative;
  text-transform: uppercase;
}
.box .box-title span {
  color: white;
  font-size: var(--font-size-box-title-mobile) !important;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .box .box-title span {
    font-size: var(--font-size-box-title-desktop) !important;
  }
}
.box .box-title .filter {
  position: absolute;
  right: 1rem;
  top: 0.65rem;
  z-index: 2000;
}
.box .box-title .filter.filter-team {
  /*
  &.active {
      .filter-open {
          &::before {
              background-image: url('../img/icons/icon-filter-main.svg');
          }
      }
  }
  */
}
.box .box-title .filter.filter-team .filter-open::before {
  background-image: url("../img/icons/icon-filter-white.svg");
}
.box .box-title .filter.filter-ranking .filter-open::before {
  background-image: url("../img/icons/icon-ranking-list-white.svg");
}
.box .box-title .filter.filter-ranking.active {
  /*
  .filter-open {
      &::before {
          background-image: url('../img/icons/icon-ranking-list-main.svg');
      }
  }
      */
}
.box .box-title .filter .filter-open {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-left: 1.55rem;
  position: relative;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .box .box-title .filter .filter-open {
    padding-left: 1.55rem;
  }
}
.box .box-title .filter .filter-open::before {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 1rem;
  width: 1rem;
}
@media only screen and (min-width: 768px) {
  .box .box-title .filter .filter-open::before {
    position: absolute;
    left: 0;
  }
}
.box .box-title .filter .filter-open .text {
  font-size: 0.65rem !important;
}
@media only screen and (min-width: 768px) {
  .box .box-title .filter .filter-open .text {
    font-size: 0.925rem !important;
  }
}
.box .box-title .filter .filter-options {
  border-radius: 0.5rem;
  border: 1px solid black;
  display: none;
  padding: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 105%;
}
@media only screen and (min-width: 768px) {
  .box .box-title .filter .filter-options {
    top: 110%;
  }
}
.box .box-title .filter .filter-options.opened {
  display: flex;
  flex-direction: column;
}
.box .box-title .filter .filter-options span {
  color: black !important;
  font-size: 1rem !important;
}
.box .box-title .filter .filter-options div {
  background-color: white;
  border-bottom: 1px solid black;
  color: black !important;
  cursor: pointer;
  display: inline-block;
  font-size: 0.9125rem !important;
  padding: 0.65rem 2rem;
  text-align: center;
}
@media only screen and (min-width: 1024px) {
  .box .box-title .filter .filter-options div {
    font-size: 1rem !important;
  }
}
.box .box-title .filter .filter-options div:last-child {
  border-bottom: 0;
}
.box .box-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* hide scrollbar */
  background-color: white;
  border-radius: 0 0 var(--basic-border-radius) var(--basic-border-radius);
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  overflow: auto;
  padding: var(--padding-y-default-mobile) var(--padding-x-default-mobile);
}
.box .box-content::-webkit-scrollbar {
  display: none;
}
@media only screen and (min-width: 768px) {
  .box .box-content {
    padding: var(--padding-y-default-desktop) var(--padding-x-default-desktop);
  }
}
.box .box-content.full-width {
  padding: 0;
}
.box .box-content .box-content-text > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.box .box-content .box-content-text > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.box .box-content.no-border-radius {
  border-radius: 0 !important;
}
@media only screen and (min-width: 1024px) {
  .box .box-content.no-border-radius-desktop {
    border-radius: 0 !important;
  }
}
.box .box-content-intro {
  margin-bottom: 0.875rem;
}
.box .box-bottom {
  border-radius: 0 0 var(--basic-border-radius) var(--basic-border-radius);
  border: 2px solid black;
  border-top: 0 !important;
  flex: 0 0 auto;
  overflow: hidden;
}
.box .box-bottom > * {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/*------------------------------------*\
    PAGES
    1.1 MAIN-NAVIGATION
    1.2 MAIN-AREA
    1.2.1 MAIN-AREA LOGIN
    1.2.2 RULES, GABEN, CONTACT
    1.6 COUNTDOWN
    1.7 FRONTPAGE BG-EFFECT
    1.8 FRONTPAGE-INTRO
\*------------------------------------*/
/* 1.1 MAIN-NAVIGATION */
#main-navigation {
  background-color: white;
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: row;
  font-family: var(--font-family-primary);
  padding: 0.675rem 5vw;
  position: relative;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  #main-navigation {
    padding: 0;
  }
}
#main-navigation nav {
  background-color: white;
  border-bottom: 1px solid black;
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  transition: 300ms all linear;
  width: 100%;
  z-index: 5001;
}
@media only screen and (min-width: 1024px) {
  #main-navigation nav {
    display: block;
    position: static;
    width: 100%;
  }
}
#main-navigation nav.opened {
  border-top: 1px solid black;
  display: block;
}
#main-navigation nav ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
@media only screen and (min-width: 1024px) {
  #main-navigation nav ul {
    flex-direction: row;
  }
}
#main-navigation nav ul li {
  border-bottom: 1px solid black;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  #main-navigation nav ul li {
    border-bottom: 0;
    border-right: 1px solid black;
  }
}
#main-navigation nav ul li a {
  color: black;
  display: inline-block;
  padding: var(--navigation-top-padding-y) 0;
  text-decoration: none;
  width: 100%;
}

/* 1.2 MAIN-AREA  */
#main-wrapper {
  background-color: var(--color-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}

/* 1.2.1 MAIN-AREA LOGIN */
#content-area {
  flex: 1 1 100%;
  position: relative;
  width: 100%;
}
#content-area .box-account-function {
  max-width: 22.5rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-level-1);
  width: 90vw;
}
#content-area .box-account-function .box-content {
  position: relative;
  /* deativate login-box with overlay */
  /*
  &::after {
      background-color: rgba(255,255,255,0.25);
      backdrop-filter: blur(0.25rem);
      content: "Der Login Bereich wird bald aufgeschaltet.";
      display: flex; justify-content: center; align-items: center;
      font-size: 1.75rem;
      font-family: var(--font-family-primary);
      font-weight: 400;
      padding: 0 1rem;
      position: absolute; left: 0; top: 0; right: 0; bottom: 0;
      text-align: center;
      z-index: 6666;
  }
  */
}
#content-area .box-account-function .box-content .box-form .row {
  margin: 0 !important;
}
#content-area .box-account-function .box-content .box-form .row .card-body {
  padding: 0;
}
#content-area .box-account-function .box-content .box-form .row .card-body .card-title {
  display: none;
}
#content-area .box-account-function .box-content .box-form .row .card-body form .form-group {
  margin-bottom: 0.75rem;
}
#content-area .box-account-function .box-content .box-form .row .card-body form .form-group:last-child {
  margin-bottom: 0;
}
#content-area .box-account-function .box-content .box-form .row .card-body form .uwp-remember-me {
  margin-bottom: 0.75rem !important;
  padding-left: 0 !important;
}
#content-area .box-account-function .box-content .box-form .row .card-body .uwp-footer-links {
  display: none;
}
#content-area .box-account-function .box-content .box-bottom-links {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#content-area .box-account-function .box-content .box-bottom-links.split {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#content-area .box-account-function .box-content .box-bottom-links a {
  margin-top: 0.575rem;
}
#content-area .box-account-function .box-content .box-bottom-links a.simple-link {
  font-weight: 400;
  text-decoration: none;
}

/* 1.2.2 RULES (939), GABEN (941), CONTACT (943) */
.page-id-939 #main-wrapper,
.page-id-941 #main-wrapper,
.page-id-943 #main-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.page-id-939 #content-area,
.page-id-941 #content-area,
.page-id-943 #content-area {
  overflow: hidden;
  z-index: 3003;
}
.page-id-939 #content-area #content,
.page-id-941 #content-area #content,
.page-id-943 #content-area #content {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
  padding: var(--main-content-padding-mobile);
}
@media only screen and (min-width: 768px) {
  .page-id-939 #content-area #content,
  .page-id-941 #content-area #content,
  .page-id-943 #content-area #content {
    justify-content: space-between;
    padding: var(--main-content-padding-desktop);
  }
}
.page-id-939 #content-area #content .photo-wrapper,
.page-id-941 #content-area #content .photo-wrapper,
.page-id-943 #content-area #content .photo-wrapper {
  display: none;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .page-id-939 #content-area #content .photo-wrapper,
  .page-id-941 #content-area #content .photo-wrapper,
  .page-id-943 #content-area #content .photo-wrapper {
    display: block;
    width: calc(50% - 0.825rem);
  }
}
.page-id-939 #content-area #content .photo-wrapper .title,
.page-id-941 #content-area #content .photo-wrapper .title,
.page-id-943 #content-area #content .photo-wrapper .title {
  background-color: black;
}
.page-id-939 #content-area #content .content-wrapper,
.page-id-941 #content-area #content .content-wrapper,
.page-id-943 #content-area #content .content-wrapper {
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .page-id-939 #content-area #content .content-wrapper,
  .page-id-941 #content-area #content .content-wrapper,
  .page-id-943 #content-area #content .content-wrapper {
    width: calc(50% - 0.825rem);
  }
}

.box-photo {
  border-radius: var(--basic-border-radius);
  border: 2px solid black;
}

/* rules */
.page-id-939 .box-photo {
  background-image: url("../img/fotos/infos.jpg");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
}

/* gaben */
.page-id-941 .box-photo {
  background-image: url("../img/fotos/gaben.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* kontakt */
.page-id-943 .box-photo {
  background-image: url("../img/fotos/komitee.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 1.2.3 */
.home #main-navigation,
.home #content-area {
  opacity: 0;
}
.home #main-navigation.loaded,
.home #content-area.loaded {
  opacity: 1;
}

/* 1.6 COUNTDOWN */
#countdown {
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-family-primary);
  font-size: 3.925vw;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  text-align: center;
  width: 100vw;
  z-index: 11;
}
#countdown > * {
  flex: 0 0 auto;
}
@media only screen and (min-width: 768px) {
  #countdown {
    bottom: 0.5vw;
    flex-direction: row;
    font-size: 2.25vw;
  }
}
@media only screen and (min-width: 1024px) {
  #countdown {
    font-size: 1.125vw;
  }
}
#countdown #countdown-timer {
  flex-shrink: 0;
  flex-grow: 0;
}
@media only screen and (min-width: 768px) {
  #countdown #countdown-timer::after {
    content: " ";
  }
}

.home #countdown,
.page-template-register #countdown,
.page-template-password-forgot #countdown,
.page-template-password-forgot-reset #countdown {
  position: fixed;
  bottom: 0;
}

/*------------------------------------*\
    1.7 BACKGROUND-FRONTPAGE
\*------------------------------------*/
#gurt-background {
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0%;
  z-index: 1;
}
#gurt-background div {
  display: flex;
  flex-direction: row;
  padding: 1.25rem 0;
  opacity: 0.85;
}
#gurt-background div img {
  animation: marquee-left 10s linear infinite;
  height: 4rem;
}
#gurt-background div:nth-child(odd) img {
  animation: marquee-left 15s linear infinite;
}
#gurt-background div:nth-child(even) {
  background-color: var(--color-main-second);
}
#gurt-background div:nth-child(even) img {
  animation: marquee-right 15s linear infinite;
}

@keyframes marquee-left {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(-100%);
  }
}
@keyframes marquee-right {
  0% {
    transform: translate(-100%);
  }
  to {
    transform: translate(0%);
  }
}
/* 1.8 FRONTPAGE-INTRO */
#intro {
  background-color: rgb(255, 255, 255);
  backdrop-filter: blur(0.25rem); /* Adjust the blur intensity as needed */
  position: fixed;
  display: none;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  z-index: 9999;
  transition: 200ms opacity linear;
  opacity: 1;
}
#intro #logo {
  width: 20rem;
}
#intro.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
#intro.loaded {
  opacity: 0;
  pointer-events: none;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*------------------------------------*\
    BASE-LAYOUT
    1. MAIN 
    2. FOOTER
    3. SPECIAL-STYLE (VALIANT)
\*------------------------------------*/
#manager-wrapper {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-secondary);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  /* 1. MAIN  */
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper {
    height: 100vh;
    height: 100dvh;
  }
}
#manager-wrapper .inner-wrapper {
  background-color: var(--color-main);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
  padding: var(--main-content-padding-mobile);
  position: relative;
}
@media only screen and (min-width: 768px) {
  #manager-wrapper .inner-wrapper {
    padding: var(--main-content-padding-desktop);
  }
}
#manager-wrapper .inner-wrapper #main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 1 100%;
  overflow: hidden;
  width: 100%;
}
#manager-wrapper .inner-wrapper #main #content {
  height: 100%;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper .inner-wrapper #main #content {
    display: flex !important;
    align-items: flex-start;
  }
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper .inner-wrapper #main.has-sidebar #content {
    height: 100%;
    overflow: hidden;
    padding-right: 1.65rem;
    width: 75%;
  }
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper .inner-wrapper #main.columns-02 #content > * {
    display: flex !important;
  }
}
#manager-wrapper .inner-wrapper #main.columns-02 #content > *:last-child {
  display: none;
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper .inner-wrapper #main.columns-02 #content > *:last-child {
    display: flex;
  }
}
#manager-wrapper .inner-wrapper #main #sidebar {
  display: none;
  height: 100%;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper .inner-wrapper #main #sidebar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* hide scrollbar */
    display: block !important;
    height: 100%;
    overflow: auto;
    width: 25%;
  }
  #manager-wrapper .inner-wrapper #main #sidebar::-webkit-scrollbar {
    display: none;
  }
}

.postid-1964 #manager-wrapper .inner-wrapper {
  background-color: rgb(114, 82, 172);
}

/*------------------------------------*\
    MANAGER - TOP-BAR
\*------------------------------------*/
#manager-wrapper #top-bar {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 6666;
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper #top-bar {
    position: static;
  }
}
#manager-wrapper #top-bar .navigation {
  background-color: white;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-family-primary);
  padding: var(--navigation-padding-mobile);
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper #top-bar .navigation {
    padding-left: 2.75rem;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper #top-bar .navigation {
    position: static;
  }
}
#manager-wrapper #top-bar .navigation #manager-navigation {
  background-color: white;
  display: none;
  margin-left: auto;
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper #top-bar .navigation #manager-navigation {
    display: flex;
    height: 100%;
  }
}
@media only screen and (max-width: 1023px) {
  #manager-wrapper #top-bar .navigation #manager-navigation.opened {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 9999;
  }
}
#manager-wrapper #top-bar .navigation #manager-navigation .nav-item {
  border-bottom: 1px solid black;
  position: relative;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper #top-bar .navigation #manager-navigation .nav-item {
    border-bottom: 0;
    width: auto;
  }
}
#manager-wrapper #top-bar .navigation #manager-navigation .nav-item a {
  border-left: 1px solid black;
  color: black;
  display: inline-block;
  padding: var(--navigation-top-padding-y) 1.5rem;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}
#manager-wrapper #top-bar .navigation #manager-navigation .nav-item a:last-child {
  margin-right: 0;
}
#manager-wrapper #top-bar .navigation #manager-navigation .nav-item a.inactive {
  opacity: 0.325;
  pointer-events: none;
}
#manager-wrapper #top-bar .navigation #manager-navigation .nav-item #ranking-link,
#manager-wrapper #top-bar .navigation #manager-navigation .nav-item #konto-link {
  display: none;
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper #top-bar .navigation #manager-navigation .nav-item #ranking-link,
  #manager-wrapper #top-bar .navigation #manager-navigation .nav-item #konto-link {
    display: block;
  }
}
#manager-wrapper #top-bar .navigation #manager-navigation .nav-item .sub-navigation-account {
  background-color: white;
  border-top: 1px solid black;
  display: flex;
}
@media only screen and (min-width: 1024px) {
  #manager-wrapper #top-bar .navigation #manager-navigation .nav-item .sub-navigation-account {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
  }
}
#manager-wrapper #top-bar .navigation #manager-navigation .nav-item .sub-navigation-account a {
  border-bottom: 1px solid black;
  text-align: center;
  width: 100%;
}
#manager-wrapper #top-bar .navigation #audio-wrapper {
  display: none;
  margin-left: auto;
  width: 2.35rem;
  height: 2.35rem;
}
#manager-wrapper #top-bar .navigation #audio-wrapper .play-audio {
  background-color: black;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
}
#manager-wrapper #top-bar .navigation #audio-wrapper .play-audio::after {
  background-image: url("../img/icons/icon-audio-white.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 1.4125rem;
  width: 1.4125rem;
}
#manager-wrapper #top-bar .navigation #audio-wrapper .play-audio .audio-active {
  background-color: var(--color-main);
  border-radius: 50%;
  color: white;
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.25rem 0.3rem;
  font-size: 0.85rem;
  text-align: center;
  animation: pulsate-audio-bottom 1.375s infinite;
  position: absolute;
  left: -0.25rem;
  top: -0.25rem;
}
#manager-wrapper #top-bar .navigation #audio-wrapper .play-audio.playing::after {
  background-image: url("../img/icons/icon-audio-pause-white.svg");
}
#manager-wrapper #top-bar .navigation #mobile-button {
  margin-left: 0.75rem;
}

@keyframes pulsate-audio-top {
  0% {
    transform: scale(0.875);
  }
  50% {
    transform: scale(1.1); /* Scale up by 20% */
  }
  100% {
    transform: scale(0.875);
  }
}
/*------------------------------------*\
    MANAGER - BOTTOM-BAR
\*------------------------------------*/
#bottom-bar {
  background-color: black;
  border-radius: var(--basic-border-radius);
  border: 2px solid black;
  color: white;
  font-family: var(--font-family-primary);
  flex: 0 0 auto;
  height: 3.25rem;
  margin-top: 1.65rem;
  overflow: hidden;
}
@media only screen and (min-width: 1024px) {
  #bottom-bar {
    height: 3rem;
  }
}
#bottom-bar .mobile-bar {
  display: flex;
}
@media only screen and (min-width: 1024px) {
  #bottom-bar .mobile-bar {
    display: none;
  }
}
#bottom-bar .desktop-bar {
  display: none;
}
@media only screen and (min-width: 1024px) {
  #bottom-bar .desktop-bar {
    display: flex;
  }
}
#bottom-bar .bottom-bar-inner {
  flex-direction: row;
  height: 100%;
}
@media only screen and (min-width: 1024px) {
  #bottom-bar .bottom-bar-inner {
    justify-content: space-between;
  }
}
#bottom-bar .bottom-bar-inner .bottom-bar-item {
  font-size: 1.125rem;
  text-transform: uppercase;
  flex: 1 1 33.33%;
}
@media only screen and (min-width: 1024px) {
  #bottom-bar .bottom-bar-inner .bottom-bar-item {
    padding: 0.65rem 0 !important;
    width: auto;
  }
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.button-wrapper-mobile-team {
  border-right: 2px solid black;
  display: flex;
}
@media only screen and (min-width: 1024px) {
  #bottom-bar .bottom-bar-inner .bottom-bar-item.button-wrapper-mobile-team {
    display: none;
  }
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.button-save-wrapper {
  display: flex;
}
@media only screen and (min-width: 1024px) {
  #bottom-bar .bottom-bar-inner .bottom-bar-item.button-save-wrapper {
    display: none;
  }
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.button-wrapper-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2px;
  width: 100%;
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.counter-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  font-size: 1.125rem;
  padding: 0.375rem 0;
}
@media only screen and (min-width: 1024px) {
  #bottom-bar .bottom-bar-inner .bottom-bar-item.counter-item {
    display: none;
  }
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.counter-item .label {
  font-size: 0.525rem;
  text-align: center;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  #bottom-bar .bottom-bar-inner .bottom-bar-item.counter-item .label {
    font-size: 1.125rem;
    margin-right: 0.5rem;
    width: auto;
  }
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.counter-item .current::after {
  content: "/";
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.news-item {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  align-items: center;
  width: auto;
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.news-item span {
  animation: marquee 15s linear infinite;
  display: inline-block;
  font-size: 1.25rem;
  flex: 0 0 auto;
  padding: 0 1rem;
  text-transform: uppercase;
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.audio-item {
  background-color: black;
  border-left: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  flex: 0 0 5rem;
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.audio-item .play-audio {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.audio-item .play-audio::after {
  background-image: url("../img/icons/icon-audio-white.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 1.75rem;
  width: 1.75rem;
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.audio-item .play-audio.playing::after {
  background-image: url("../img/icons/icon-audio-pause-white.svg");
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.audio-item .play-audio .audio-active {
  background-color: var(--color-main);
  border-radius: 50%;
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.25rem 0.3rem;
  font-size: 0.85rem;
  text-align: center;
  animation: pulsate-audio-bottom 1.375s infinite;
  position: absolute;
  left: 0.5rem;
  top: -0.25rem;
}
#bottom-bar .bottom-bar-inner .bottom-bar-item.audio-item .audio {
  display: none;
}

.page-template-page-manager-news #bottom-bar {
  background-color: white;
  color: black;
  font-size: 1.25rem;
  max-width: 920px !important;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.page-template-page-manager-news #bottom-bar .sponsoring-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.page-template-page-manager-news #bottom-bar .sponsoring-bar span {
  animation: none !important;
}
.page-template-page-manager-news #bottom-bar .sponsoring-bar span.flashbox {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.page-template-page-manager-news #bottom-bar .sponsoring-bar > div {
  border-right: 2px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  text-align: center;
  width: 100%;
}
.page-template-page-manager-news #bottom-bar .sponsoring-bar > div:last-child {
  border-right: 0;
}
.page-template-page-manager-news #bottom-bar .sponsoring-bar .media-sponsor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.565rem;
  font-weight: 300;
}
.page-template-page-manager-news #bottom-bar .sponsoring-bar .media-sponsor .link {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
}
.page-template-page-manager-news #bottom-bar .sponsoring-bar .media-sponsor .link img {
  width: 7rem;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-news #bottom-bar .sponsoring-bar .media-sponsor .link img {
    width: 10rem;
  }
}
.page-template-page-manager-news #bottom-bar .sponsoring-bar .media-sponsor span {
  background-color: black;
  color: white;
  display: block;
  padding-top: 0.15rem;
  width: 100%;
}
.page-template-page-manager-news .twint-button {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: 220px !important;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-news .twint-button {
    width: 260px !important;
  }
}

@keyframes marquee {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  to {
    -webkit-transform: translate(-100%);
    transform: translate(-100%);
  }
}
@keyframes pulsate-audio-bottom {
  0% {
    transform: scale(0.675);
  }
  50% {
    transform: scale(1.1075); /* Scale up by 20% */
  }
  100% {
    transform: scale(0.675);
  }
}
/*------------------------------------*\
    MANAGER - TEAM-SELECTION
\*------------------------------------*/
#team-selection {
  /* SCHWINGER SELEKTION */
  /* MOUNTAIN-TROPHY-REGISTER */
  /* INFO */
}
#team-selection #info-button {
  background-image: url("../img/icons/icon-info-white.svg");
  cursor: pointer;
  display: none;
  height: 1rem;
  width: 1rem;
  position: absolute;
  left: 1rem;
  top: 0.6rem;
}
@media only screen and (min-width: 768px) {
  #team-selection #info-button {
    height: 1.125rem;
    width: 1.125rem;
    top: 0.6rem;
  }
}
#team-selection .box-content {
  position: relative;
}
#team-selection #schwinger {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: -0.725rem;
}
@media only screen and (min-width: 768px) {
  #team-selection #schwinger {
    margin-bottom: -0.585rem;
  }
}
#team-selection #schwinger .schwinger {
  background-color: rgb(240, 240, 240);
  border: 2px solid rgb(240, 240, 240);
  border-radius: 2rem;
  color: rgb(180, 180, 180);
  display: flex;
  flex-direction: row;
  margin: 0 0 0.585rem;
  padding: 0.75rem 1.25rem;
  position: relative;
  width: 100%;
  /* selected */
  /* selected */
}
@media only screen and (min-width: 768px) {
  #team-selection #schwinger .schwinger {
    padding: 0.695rem 1.25rem;
    margin: 0 0.585rem 0.585rem 0;
    width: auto;
  }
}
#team-selection #schwinger .schwinger.expensive {
  pointer-events: none;
}
#team-selection #schwinger .schwinger.selected {
  pointer-events: all;
}
#team-selection #schwinger .schwinger.active:not(.expensive) {
  background-color: white;
  border-color: black;
  color: black;
  cursor: pointer;
  opacity: 1;
}
@media only screen and (min-width: 1024px) {
  #team-selection #schwinger .schwinger.active:not(.expensive):hover {
    background-color: black;
    color: white;
  }
}
#team-selection #schwinger .schwinger .schwinger-wert {
  margin-right: 0.25rem;
}
#team-selection #schwinger .schwinger .schwinger-verband {
  margin-left: auto;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  #team-selection #schwinger .schwinger .schwinger-verband {
    display: none !important;
  }
}
#team-selection #schwinger .schwinger.selected {
  background-color: black !important;
  color: white !important;
  opacity: 1 !important;
}
#team-selection #schwinger .schwinger.selected:hover {
  cursor: pointer !important;
}
#team-selection #schwinger .schwinger[data-status=injured] {
  display: none !important;
}
#team-selection #schwinger .schwinger[data-status=injured].selected {
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
  display: flex !important;
}
#team-selection #mountain-trophy-register-wrapper {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(0.25rem); /* This will apply a blur effect on the background behind this element */
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  display: none !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
}
#team-selection #mountain-trophy-register-wrapper button {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  width: 90%;
}
@media only screen and (min-width: 768px) {
  #team-selection #mountain-trophy-register-wrapper button {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: auto;
  }
}
#team-selection .info {
  margin: 0;
}

/*------------------------------------*\
    MANAGER - TEAM
    1.1 TEAM BOX-CONTENT-STYLE
    1.2 HIDE DATA-FORM
\*------------------------------------*/
/* 1.1 TEAM BOX-CONTENT-STYLE */
.team-sidebar {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .team-sidebar {
    display: block;
  }
}
.team-sidebar #select-data {
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: row;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: uppercase;
}
.team-sidebar #select-data > div {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0;
  width: 50%;
}
.team-sidebar #select-data > div:first-child {
  border-right: 1px solid black;
}
.team-sidebar #select-data > div .label {
  margin-right: 0.35rem;
}
.team-sidebar #select-data > div .current::after {
  content: "/";
}
.team-sidebar #replacement-notice {
  border-bottom: 1px solid black;
  color: var(--color-error);
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.25rem var(--padding-x-default-mobile);
}
@media only screen and (min-width: 768px) {
  .team-sidebar #replacement-notice {
    padding: 0.325rem var(--padding-x-sidebar-desktop);
  }
}
.team-sidebar #replacement-notice p {
  margin: 0;
}
.team-sidebar #team .team-member {
  border-bottom: 1px solid rgb(220, 220, 220);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.325rem var(--padding-x-default-mobile);
  position: relative;
}
@media only screen and (min-width: 768px) {
  .team-sidebar #team .team-member {
    padding: 0.275rem var(--padding-x-sidebar-desktop);
  }
}
.team-sidebar #team .team-member:before {
  color: rgb(160, 160, 160);
  font-size: 0.675rem !important;
  display: inline-block;
  padding-bottom: 0.1vh;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .team-sidebar #team .team-member:before {
    font-size: 0.75rem;
  }
}
.team-sidebar #team .team-member#team-1::before {
  content: "BKSV I";
}
.team-sidebar #team .team-member#team-2::before {
  content: "BKSV II";
}
.team-sidebar #team .team-member#team-3::before {
  content: "ISV I";
}
.team-sidebar #team .team-member#team-4::before {
  content: "ISV II";
}
.team-sidebar #team .team-member#team-5::before {
  content: "NOSV I";
}
.team-sidebar #team .team-member#team-6::before {
  content: "NOSV II";
}
.team-sidebar #team .team-member#team-7::before {
  content: "NWSV I";
}
.team-sidebar #team .team-member#team-8::before {
  content: "NWSV II";
}
.team-sidebar #team .team-member#team-9::before {
  content: "SWSV I";
}
.team-sidebar #team .team-member#team-10::before {
  content: "SWSV II";
}
.team-sidebar #team .team-member.injured {
  color: var(--color-error) !important;
}
.team-sidebar #team .team-member.injured::before {
  color: var(--color-error) !important;
  content: "Verletzt" !important;
}
.team-sidebar #team .team-member.replacement {
  color: var(--color-error) !important;
}
.team-sidebar #team .team-member.replacement::before {
  color: var(--color-error) !important;
  content: "Ersatzschwinger" !important;
}
.team-sidebar #team .team-member.injured span.delete, .team-sidebar #team .team-member.replacement span.delete {
  background-image: url("../img/icons/icon-x-delete-red.png") !important;
}
.team-sidebar #team .team-member span.value {
  margin-left: auto;
}
.team-sidebar #team .team-member span.delete {
  background-color: transparent;
  background-image: url("../img/icons/icon-x-delete-black.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 0.95rem;
  width: 0.95rem;
  margin-left: 2.5rem;
}
.team-sidebar #team .team-member span.points {
  margin-left: auto;
}
.team-sidebar .box .box-bottom {
  display: none !important;
}
@media only screen and (min-width: 1024px) {
  .team-sidebar .box .box-bottom {
    display: block !important;
  }
}
.team-sidebar .ranking-info {
  background-color: var(--color-form-grey) !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-weight: 500;
  padding: 0.675rem var(--padding-x-default-mobile) 0.725rem;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .team-sidebar .ranking-info {
    padding: 0.675rem var(--padding-x-sidebar-desktop) 0.725rem;
  }
}
.team-sidebar .info {
  margin: 0;
}

/*------------------------------------*\
    MANAGER - RANKING
    1. GROUP-JOIN BUTTON
\*------------------------------------*/
.ranking {
  display: flex;
  flex-direction: column;
}
.ranking .ranking-item {
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: column;
}
.ranking .ranking-item:last-child {
  border-bottom: 0;
}
.ranking .ranking-item:nth-child(even) {
  background-color: rgb(240, 240, 240);
}
.ranking .ranking-item.current-user {
  color: var(--color-main-original);
  font-weight: 500;
}
.ranking .ranking-item .ranking-header {
  display: flex;
  flex-direction: row;
  text-transform: uppercase;
  width: 100%;
}
.ranking .ranking-item .ranking-header .ranking-header-user {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.5rem 0.5rem;
  width: 100%;
}
.ranking .ranking-item .ranking-header .ranking-header-user .ranking-count {
  text-align: right;
  flex: 0 0 2rem;
  padding-top: 0.175rem;
  overflow: hidden;
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-avatar {
  background-color: rgb(225, 225, 225);
  display: flex;
  border: 1px solid black;
  flex: 0 0 1rem;
  border-radius: 3px;
  margin: 0 0.375rem;
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-avatar img {
  height: 1.5rem;
  width: 1.5rem;
  object-position: bottom center;
  object-fit: contain;
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-avatar.user-ready {
  background-color: var(--color-success);
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name {
  display: flex;
  flex-direction: row;
  hyphens: auto;
  padding-right: 1rem;
  flex: 1 1 auto;
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .awards {
  margin-top: -0.15rem;
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .koenig,
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .us,
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .ejsf-125,
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .bergfest {
  background-repeat: no-repeat;
  background-size: contain;
  height: 0.75rem;
  width: 0.75rem;
  display: inline-block;
  margin-left: 0.125rem;
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .koenig {
  background-image: url("../img/icons/icon-hof-koenig.svg");
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .us {
  background-image: url("../img/icons/icon-hof-us.svg");
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .ejsf-125 {
  background-image: url("../img/icons/icon-hof-125.svg");
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .bergfest {
  background-image: url("../img/icons/icon-bergfestsieg.svg");
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .kranz,
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .saisonkranz,
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .bergkranz {
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 0.725rem;
  margin-top: 0;
  position: relative;
  left: 0.15rem;
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .kranz {
  background-image: url("../img/icons/icon-hof-kranzer.svg");
  margin-right: 0.2125rem;
  width: 1.875rem;
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .saisonkranz {
  background-image: url("../img/icons/icon-hof-mtkranz.svg");
  margin-right: 0.2125rem;
  width: 1.2375rem;
}
.ranking .ranking-item .ranking-header .ranking-header-user .user-name .bergkranz {
  background-image: url("../img/icons/icon-hof-normalkranz.svg");
  margin-right: 0.2125rem;
  width: 0.61875rem;
}
.ranking .ranking-item .ranking-header .ranking-header-user .verband {
  flex: 0 0 12%;
  padding-top: 0.175rem;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .ranking .ranking-item .ranking-header .ranking-header-user .verband {
    flex: 0 0 25%;
  }
}
.ranking .ranking-item .ranking-header .ranking-header-user .pts {
  flex: 0 0 15.5%;
  padding-top: 0.175rem;
  position: relative;
  text-align: right;
  overflow: hidden;
}
.ranking .ranking-item .ranking-header .ranking-header-user .icons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex: 0 0 15.5%;
}
.ranking .ranking-item .ranking-header .ranking-header-user .icons span {
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  height: 1.65rem;
  width: 1.65rem;
}
@media only screen and (min-width: 1024px) {
  .ranking .ranking-item .ranking-header .ranking-header-user .icons span {
    height: 1.525rem;
    width: 1.525rem;
  }
}
.ranking .ranking-item .ranking-header .ranking-header-user .icons span.koenig {
  background-image: url("../img/icons/icon-hof-koenig.svg");
}
.ranking .ranking-item .ranking-header .ranking-header-user .icons span.us {
  background-image: url("../img/icons/icon-hof-us.svg");
}
.ranking .ranking-item .ranking-header .ranking-header-user .icons span.kranz {
  background-image: url("../img/icons/icon-hof-kranz.svg");
}
.ranking .ranking-item .ranking-header .action {
  border-left: 1px solid black;
  display: flex;
  flex: 0 0 10%;
}
@media only screen and (min-width: 768px) {
  .ranking .ranking-item .ranking-header .action {
    flex: 0 0 5%;
  }
}
.ranking .ranking-item .ranking-header .action .ranking-open-team {
  background-image: url("../img/icons/icon-plus-black.svg");
  background-size: 35%;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.ranking .ranking-item .ranking-header .action .remove-user {
  background-image: url("../img/icons/icon-x-black.svg");
  background-size: 40%;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.ranking .ranking-item .button-open-user {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.ranking .ranking-item .button-open-user:before {
  background-image: url("../img/icons/icon-open-white.png");
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  height: 5vw;
  width: 5vw;
  display: inline-block;
  background-color: black;
  color: white;
}
@media only screen and (min-width: 1024px) {
  .ranking .ranking-item .button-open-user:before {
    height: 1.5vw;
    width: 1.5vw;
  }
}
.ranking .ranking-item .ranking-user-team {
  border-top: 1px solid black;
  display: none;
  font-size: 3.25vw;
  padding: 1vh 0 1.5vh;
  padding-left: 3rem;
  font-weight: 300;
}
.ranking .ranking-item .ranking-user-team.open {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 1024px) {
  .ranking .ranking-item .ranking-user-team {
    font-size: 1.25vw;
  }
}
@media only screen and (min-width: 1600px) {
  .ranking .ranking-item .ranking-user-team {
    font-size: 1.05w;
  }
}

/* EASF */
.page-template-page-manager [data-page="1"] .ranking-item,
.page-template-page-manager [data-page="2"] .ranking-item,
.page-template-page-manager [data-page="3"] .ranking-item,
.page-template-page-manager [data-page="4"] .ranking-item:nth-child(-n+19) {
  background-color: var(--color-trophy-kranz) !important;
}

.page-template-page-manager [data-page="1"] .ranking-item:nth-child(-n+1) {
  background-color: var(--color-trophy-big) !important;
}

/* MT */
.page-template-page-manager-mountain-trophy [data-page="1"] .ranking-item:nth-child(-n+93) {
  background-color: var(--color-trophy-kranz) !important;
}

.page-template-page-manager-mountain-trophy [data-page="1"] .ranking-item:nth-child(-n+1) {
  background-color: var(--color-trophy-big) !important;
}

/* 2. PAGINATION */
.pagination {
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: var(--font-family-primary);
  font-size: 0.875rem;
  text-transform: uppercase;
}
.pagination span {
  background-size: 1rem;
  background-repeat: no-repeat;
  cursor: pointer;
  color: white !important;
  display: flex;
  align-items: center;
  opacity: 0;
  padding: 0.25rem 0.775rem;
  pointer-events: none;
  text-decoration: none;
}
.pagination span[data-direction=next]::after {
  background-image: url("../img/icons/icon-arrow-pagination-right.svg");
  margin-left: 0.325rem;
}
.pagination span[data-direction=prev]::before {
  background-image: url("../img/icons/icon-arrow-pagination-left.svg");
  margin-right: 0.325rem;
}
.pagination span::before, .pagination span::after {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  height: 0.75rem;
  width: 1rem;
  display: inline-block;
}
.pagination span.active {
  opacity: 1;
  pointer-events: all;
}
.pagination span.loading {
  opacity: 0.685;
  pointer-events: none;
}

#group-join-ranking {
  display: none;
}

.not-in-group #content .box-content {
  border-radius: 0 !important;
}
.not-in-group #group-join-ranking {
  display: block;
}

/*------------------------------------*\
    MANAGER - TROPHIES
\*------------------------------------*/
#trophy-room .trophy {
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem;
}
#trophy-room .trophy:nth-child(even) {
  background-color: rgb(240, 240, 240);
}
#trophy-room .trophy:last-child {
  border-bottom: 0;
}
#trophy-room .trophy.trophy-kranz {
  background-color: var(--color-trophy-kranz);
}
#trophy-room .trophy.trophy-bigwin {
  background-color: var(--color-trophy-big);
}
#trophy-room .trophy .top {
  display: flex;
  flex-direction: row;
}
#trophy-room .trophy .top .position {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex: 0 0 5%;
}
#trophy-room .trophy .top .event {
  padding-left: 0.45rem;
  flex: 0 0 60%;
}
#trophy-room .trophy .top .type {
  flex: 0 0 35%;
  text-align: right;
  padding-right: 1rem;
}
#trophy-room .trophy .max-ranking {
  font-size: 0.625rem;
  display: flex;
  flex-direction: row;
  flex: 0 0 4%;
}
#trophy-room .trophy .max-ranking span {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
  position: relative;
  flex: 0 0 5%;
}
#trophy-room .trophy .max-ranking span::after {
  content: "Total Rangierungen";
  display: inline-block;
  padding-left: 0.45rem;
  position: absolute;
  left: 100%;
  line-break: 0;
}
#trophy-room .no-trophies {
  margin: 0 !important;
  padding: 0.75rem 1rem 0.85rem;
}

#profile-view,
#article-lightbox {
  background-color: var(--color-main-blured);
  backdrop-filter: blur(0.875rem); /* This will apply a blur effect on the background behind this element */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
#profile-view .profile-view-inner,
#profile-view .news-article,
#article-lightbox .profile-view-inner,
#article-lightbox .news-article {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
  width: 90vw;
}
#profile-view .profile-view-inner.box,
#profile-view .profile-view-inner .box,
#profile-view .news-article.box,
#profile-view .news-article .box,
#article-lightbox .profile-view-inner.box,
#article-lightbox .profile-view-inner .box,
#article-lightbox .news-article.box,
#article-lightbox .news-article .box {
  max-height: 87.5vh !important;
  max-height: 87.5dvh !important;
}
#profile-view .profile-view-inner.box .title,
#profile-view .profile-view-inner .box .title,
#profile-view .news-article.box .title,
#profile-view .news-article .box .title,
#article-lightbox .profile-view-inner.box .title,
#article-lightbox .profile-view-inner .box .title,
#article-lightbox .news-article.box .title,
#article-lightbox .news-article .box .title {
  display: block;
  padding: 0 2rem !important;
}
#profile-view .profile-view-inner.box .avatar-wrapper,
#profile-view .profile-view-inner .box .avatar-wrapper,
#profile-view .news-article.box .avatar-wrapper,
#profile-view .news-article .box .avatar-wrapper,
#article-lightbox .profile-view-inner.box .avatar-wrapper,
#article-lightbox .profile-view-inner .box .avatar-wrapper,
#article-lightbox .news-article.box .avatar-wrapper,
#article-lightbox .news-article .box .avatar-wrapper {
  border-bottom: 1px solid black;
  /* korrekturen von profile css der view */
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
#profile-view .profile-view-inner.box #about,
#profile-view .profile-view-inner .box #about,
#profile-view .news-article.box #about,
#profile-view .news-article .box #about,
#article-lightbox .profile-view-inner.box #about,
#article-lightbox .profile-view-inner .box #about,
#article-lightbox .news-article.box #about,
#article-lightbox .news-article .box #about {
  border-bottom: 1px solid black;
  padding: 0.75rem 1.4125rem;
}
#profile-view .profile-view-inner.box #about::before,
#profile-view .profile-view-inner .box #about::before,
#profile-view .news-article.box #about::before,
#profile-view .news-article .box #about::before,
#article-lightbox .profile-view-inner.box #about::before,
#article-lightbox .profile-view-inner .box #about::before,
#article-lightbox .news-article.box #about::before,
#article-lightbox .news-article .box #about::before {
  content: "Biografie: ";
  font-weight: 500;
}
#profile-view .profile-view-inner.box .jungschwinger,
#profile-view .profile-view-inner .box .jungschwinger,
#profile-view .news-article.box .jungschwinger,
#profile-view .news-article .box .jungschwinger,
#article-lightbox .profile-view-inner.box .jungschwinger,
#article-lightbox .profile-view-inner .box .jungschwinger,
#article-lightbox .news-article.box .jungschwinger,
#article-lightbox .news-article .box .jungschwinger {
  padding: 0.75rem 1.4125rem;
}
#profile-view .profile-view-inner.box .jungschwinger p,
#profile-view .profile-view-inner .box .jungschwinger p,
#profile-view .news-article.box .jungschwinger p,
#profile-view .news-article .box .jungschwinger p,
#article-lightbox .profile-view-inner.box .jungschwinger p,
#article-lightbox .profile-view-inner .box .jungschwinger p,
#article-lightbox .news-article.box .jungschwinger p,
#article-lightbox .news-article .box .jungschwinger p {
  padding: 0;
  margin: 0;
}
#profile-view .profile-view-inner #close-profile-button,
#profile-view .profile-view-inner #close-lightbox,
#profile-view .news-article #close-profile-button,
#profile-view .news-article #close-lightbox,
#article-lightbox .profile-view-inner #close-profile-button,
#article-lightbox .profile-view-inner #close-lightbox,
#article-lightbox .news-article #close-profile-button,
#article-lightbox .news-article #close-lightbox {
  background-color: white;
  background-image: url("../img/icons/icon-x-black.svg");
  background-position: center center;
  background-size: 50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 2px solid black;
  cursor: pointer;
  height: 3rem;
  width: 3rem;
  position: absolute;
  top: -1.5rem;
  right: -0.75rem;
}
@media only screen and (min-width: 1024px) {
  #profile-view .profile-view-inner #close-profile-button,
  #profile-view .profile-view-inner #close-lightbox,
  #profile-view .news-article #close-profile-button,
  #profile-view .news-article #close-lightbox,
  #article-lightbox .profile-view-inner #close-profile-button,
  #article-lightbox .profile-view-inner #close-lightbox,
  #article-lightbox .news-article #close-profile-button,
  #article-lightbox .news-article #close-lightbox {
    top: -1.5rem;
    right: -1.5rem;
  }
}

/*------------------------------------*\
    AVATAR-ANZEIGE
    1. BASE
    1.1 PROFIL
    1.2 PROFIL-ANSICHT
\*------------------------------------*/
.avatar-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 13.5rem;
  width: 100% s;
  overflow: hidden;
  position: relative;
}
.avatar-wrapper #avatar-background {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}
.avatar-wrapper #avatar {
  object-fit: contain;
  object-position: bottom center;
  height: 93.5%;
  width: 100%;
  z-index: 2;
}
.avatar-wrapper #verband {
  background-color: white;
  background-position: center center;
  background-repeat: no-repeat;
  border: 2px solid black;
  height: 3.5rem;
  width: 3.5rem;
  position: absolute;
  left: 1rem;
  top: 0.875rem;
  border-radius: 50%;
  z-index: 3;
}
@media only screen and (min-width: 1024px) {
  .avatar-wrapper #verband {
    top: 0.8rem;
  }
}
.avatar-wrapper #verband.isv {
  background-image: url("../img/verbandslogos/isv.svg");
  background-size: 85%;
}
.avatar-wrapper #verband.swsv {
  background-image: url("../img/verbandslogos/arls.svg");
  background-size: 70%;
  background-position: left 0.5rem center;
}
.avatar-wrapper #verband.bksv {
  background-image: url("../img/verbandslogos/bksv.svg");
  background-size: 75%;
  background-color: black;
}
.avatar-wrapper #verband.nosv {
  background-image: url("../img/verbandslogos/nos.svg");
  background-size: 80%;
  background-color: var(--color-nosv);
}
.avatar-wrapper #verband.nwsv {
  background-image: url("../img/verbandslogos/nwsv.svg");
  background-size: 90%;
}
.avatar-wrapper #verband.not-selected {
  display: none;
}
.avatar-wrapper .ranking-wrapper {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
}
.avatar-wrapper .ranking-wrapper .ranking {
  background-color: white;
  border: 2px solid black;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  color: black;
  padding: 0.25rem 0.5rem;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
  width: 6.5rem;
  z-index: 5555;
}
.avatar-wrapper .ranking-wrapper .ranking::before {
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 400;
}
.avatar-wrapper .ranking-wrapper .ranking.ausstich {
  margin-bottom: 0.275rem;
}
.avatar-wrapper .ranking-wrapper .ranking.ausstich::before {
  content: "Ausstich Ranking";
}
.avatar-wrapper .ranking-wrapper .ranking.mt::before {
  content: "Mountain Trophy";
}
.avatar-wrapper .action-wrapper {
  display: flex;
  flex-direction: row;
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
}
.avatar-wrapper .action-wrapper #change-background,
.avatar-wrapper .action-wrapper #change-avatar {
  background-color: var(--color-main);
  background-size: 52.5%;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 2rem;
  height: 2.35rem;
  width: 2.35rem;
  transition: 150ms all linear;
  cursor: pointer;
}
.avatar-wrapper .action-wrapper #change-background:hover, .avatar-wrapper .action-wrapper #change-background:focus,
.avatar-wrapper .action-wrapper #change-avatar:hover,
.avatar-wrapper .action-wrapper #change-avatar:focus {
  background-color: black;
}
.avatar-wrapper .action-wrapper #change-avatar {
  background-image: url("../img/icons/icon-change-avatar-white.svg");
  margin-right: 0.5rem;
}
.avatar-wrapper .action-wrapper #change-background {
  background-image: url("../img/icons/icon-change-background-white.svg");
}

.page-template-page-manager-profile .avatar-wrapper {
  border: 1px solid black !important;
  border-radius: calc(var(--basic-border-radius) / 2);
  margin-bottom: 1.25rem;
}

.page-template-page-manager-profile-view .avatar-wrapper {
  border-bottom: 1px solid black !important;
}

/*------------------------------------*\
    AVATAR-SELECTION WINDOWS
    1.1 BASE
    1.2 AVATAR-SELECTION
    1.3 AVATAR-BACKGROUND-SELECTION
\*------------------------------------*/
.avatar-selection {
  background-color: black;
  padding: 1rem;
  position: absolute;
  left: 0;
  top: 100%;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: top 200ms linear;
  z-index: 9999;
}
.avatar-selection.opened {
  top: 0;
  opacity: 1;
}
.avatar-selection .avatar-selection-close {
  background-color: black;
  height: 3rem;
  width: 3rem;
  background-image: url("../img/icons/icon-x-white.svg");
  background-size: 50%;
  background-repeat: no-repeat;
  align-items: start; /* Aligns grid items to the start along the block axis */
  cursor: pointer;
  background-position: center center;
  border-radius: 50%;
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}
@media only screen and (min-width: 768px) {
  .avatar-selection .avatar-selection-close {
    height: 3.5rem;
    width: 3.5rem;
  }
}
.avatar-selection .selection-wrapper {
  background-color: white;
  border-radius: var(--basic-border-radius);
  display: grid;
  gap: 1rem;
  align-content: start; /* Aligns grid items to the start along the block axis */
  height: 100%;
  width: 100%;
  overflow: auto;
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem;
}
.avatar-selection .selection-wrapper.avatar-selection-wrapper {
  grid-template-columns: 1fr 1fr;
}
@media only screen and (min-width: 1024px) {
  .avatar-selection .selection-wrapper.avatar-selection-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
.avatar-selection .selection-wrapper.avatar-background-selection-wrapper {
  grid-template-columns: 1fr 1fr;
  z-index: 9999;
}
@media only screen and (min-width: 1024px) {
  .avatar-selection .selection-wrapper.avatar-background-selection-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.avatar-selection .selection-wrapper img {
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* hide scrollbar */
  border-radius: 1rem;
  object-fit: cover;
  object-position: center center;
  border: 1px solid black;
  width: 100%;
  margin: 0 !important;
}
.avatar-selection .selection-wrapper img::-webkit-scrollbar {
  display: none;
}
.avatar-selection .selection-wrapper .avatar {
  cursor: pointer;
  object-fit: contain;
  object-position: bottom center;
  height: 10rem;
}
.avatar-selection .selection-wrapper .avatar-wrapper.special {
  position: relative;
}
.avatar-selection .selection-wrapper .avatar-wrapper.special::after {
  background-color: black;
  border-radius: 0.5rem;
  color: white;
  content: "Unlocked";
  padding: 0.25rem 0.5rem;
  text-transform: uppercase;
  font-size: 0.675rem;
  position: absolute;
  left: 1rem;
  bottom: 0.5rem;
}
.avatar-selection .selection-wrapper .avatar-wrapper.special img {
  background-color: gold;
  border: 5px solid gold !important;
}
.avatar-selection .selection-wrapper .bg-wrapper-special {
  position: relative;
}
.avatar-selection .selection-wrapper .bg-wrapper-special .bg-name {
  background-color: black;
  border-radius: 0.5rem;
  color: white;
  padding: 0.25rem 0.5rem;
  text-transform: uppercase;
  font-size: 0.675rem;
  position: absolute;
  left: 1rem;
  bottom: 0.5rem;
}
.avatar-selection .selection-wrapper .bg {
  cursor: pointer;
  height: 7.5rem;
}

/*------------------------------------*\
    MANAGER - POPUP
\*------------------------------------*/
#popup {
  background-color: white;
  border: 2px solid black;
  border-radius: 1rem;
  padding: 1rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92.5vw;
  max-width: 400px;
}
#popup.error {
  border-color: var(--color-error);
}
#popup p {
  line-height: 1.4;
  margin-top: 0;
}
#popup .button-single button {
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
  width: 100%;
}
#popup .button-single button:hover, #popup .button-single button:focus {
  color: white !important;
}
#popup .buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#popup .buttons button {
  width: 47.5%;
}

/*------------------------------------*\
    TICKER
    1. TICKER
\*------------------------------------*/
/* 1. TICKER */
#ticker {
  margin: 0 auto 1.65rem;
  max-width: 920px;
}
#ticker .news {
  border-bottom: 1px solid #000;
  padding: 1rem;
}
#ticker .news h3 {
  margin-bottom: 0.25rem;
  margin-top: 0;
}
#ticker .news p {
  margin: 0 0 1rem;
}
#ticker .news p:last-child {
  margin-bottom: 0;
}

.page-template-page-manager-news {
  /* HIDE NEWS-ARTICLE (DETAILS) BUT SHOW WHEN IN LIGHTBOX */
}
.page-template-page-manager-news .box-content .news-banner {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin: 1rem 1rem;
  padding-bottom: 0.5rem;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-news .box-content .news-banner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1rem;
  }
}
.page-template-page-manager-news .box-content .news-banner img {
  border-radius: calc(var(--basic-border-radius) / 2);
  grid-column: span 2;
  object-fit: cover;
  object-position: center center;
  height: 20rem;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-news .box-content .news-banner img {
    height: auto;
  }
}
.page-template-page-manager-news .box-content .news-banner h3 {
  color: var(--color-main);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0;
  margin-top: 0.75rem;
}
.page-template-page-manager-news .box-content .news-banner h3 span {
  display: block;
  font-size: 1.5rem;
  line-height: 1.05;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-news .box-content .news-banner h3 span {
    font-size: 1.75rem;
  }
}
@media only screen and (min-width: 1600px) {
  .page-template-page-manager-news .box-content .news-banner h3 span {
    font-size: 1.55rem;
  }
}
.page-template-page-manager-news .box-content .news-banner h3 span:last-child {
  margin-bottom: 0;
}
.page-template-page-manager-news .box-content .news-banner .news-details {
  display: none;
}
.page-template-page-manager-news .box-content .news-line {
  margin: 1rem;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-news .box-content .news-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1rem;
  }
}
.page-template-page-manager-news .box-content .news-line .news {
  border-bottom: 0 !important;
  cursor: pointer;
  margin-bottom: 1.5rem;
  padding: 0 !important;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-news .box-content .news-line .news {
    margin-bottom: 0;
  }
}
.page-template-page-manager-news .box-content .news-line .news .news-image {
  border-radius: calc(var(--basic-border-radius) / 2);
  width: 100%;
}
.page-template-page-manager-news .box-content .news-line .news .news-title {
  color: var(--color-main);
  font-size: 1.5rem;
  margin-top: 0.325rem !important;
  margin-bottom: 0 !important;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-news .box-content .news-line .news .news-title {
    font-size: 1rem;
  }
}
.page-template-page-manager-news .news-article {
  display: none;
}
.page-template-page-manager-news #article-lightbox .news-article {
  display: flex;
}

.page-template-page-manager-groups .box .group-item {
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: row;
  width: 100%;
}
.page-template-page-manager-groups .box .group-item:last-child {
  border-bottom: none;
}
.page-template-page-manager-groups .box .group-item a {
  color: black;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex: 1 1 auto;
  padding: 0.5rem 1rem 0.65rem;
  position: relative;
  text-decoration: none;
}
.page-template-page-manager-groups .box .group-item a:hover {
  background: rgb(240, 240, 240);
}
.page-template-page-manager-groups .box .group-item a .group-name {
  padding-right: 1rem;
  width: 57.5%;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-groups .box .group-item a .group-name {
    width: 50%;
  }
}
.page-template-page-manager-groups .box .group-item a .group-rights {
  display: none;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-groups .box .group-item a .group-rights {
    display: block;
    width: 35%;
  }
}
.page-template-page-manager-groups .box .group-item a .group-members {
  width: 35%;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-groups .box .group-item a .group-members {
    width: 30%;
  }
}
.page-template-page-manager-groups .box .group-item .action {
  border-left: 1px solid black;
  display: flex;
  flex: 0 0 10%;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-groups .box .group-item .action {
    flex: 0 0 5%;
  }
}
.page-template-page-manager-groups .box .group-item .action span {
  background-size: 45%;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 100%;
  width: 100%;
}
.page-template-page-manager-groups .box .group-item .action span.group-leave {
  background-image: url("../img/icons/icon-leave-black.svg");
  background-size: 55%;
}
.page-template-page-manager-groups .box .group-item .action span.group-trash {
  background-image: url("../img/icons/icon-trash-black.svg");
  background-size: 45%;
}
.page-template-page-manager-groups #sidebar {
  display: none;
  width: 25%;
}
@media only screen and (min-width: 1024px) {
  .page-template-page-manager-groups #sidebar {
    display: block;
  }
}
.page-template-page-manager-groups #sidebar #group-create-form {
  padding: 0 2vw;
}
.page-template-page-manager-groups #sidebar #group-create-form .main-title h2 {
  padding-left: 0;
  padding-right: 0;
}
.page-template-page-manager-groups #sidebar #group-create-form #invitations {
  font-size: 1.375rem;
  margin-top: 0.5rem;
}
.page-template-page-manager-groups #sidebar #group-create-form #invitations span:not(:last-child)::after {
  content: ", ";
}

/* NOT LOGGED IN */
#group-not-logged-in {
  background-image: url("../img/unspunnen-background.jpg");
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
#group-not-logged-in .box {
  max-width: 640px;
}

.page-template-page-manager-groups-create-group #content .box {
  max-width: 640px;
  margin: 0 auto;
}
.page-template-page-manager-groups-create-group #invitations {
  margin-top: 0.5rem;
}
.page-template-page-manager-groups-create-group #invitations span:not(:last-child)::after {
  content: ", ";
}
.page-template-page-manager-groups-create-group .message-success {
  margin: 0 !important;
}

.page-template-page-manager-info #manager-wrapper .inner-wrapper #content {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 1024px) {
  .page-template-page-manager-info #manager-wrapper .inner-wrapper #content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #rules,
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices {
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .page-template-page-manager-info #manager-wrapper .inner-wrapper #content #rules,
  .page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices {
    width: calc(50% - 0.825rem);
  }
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list {
  display: flex;
  flex-direction: column;
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item {
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: row;
  padding: 0.5rem 0.5rem;
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item:last-child {
  border-bottom: 0;
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item:nth-child(even) {
  background-color: rgb(240, 240, 240);
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item .rank {
  flex: 0 0 2rem;
  text-align: right;
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item .price {
  flex: 1 1 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item .price {
    padding-right: 1.5rem;
  }
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item .price .title {
  text-transform: uppercase;
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item .price .desc {
  font-size: 0.85rem;
  margin-bottom: 0;
  margin-top: 0.25rem;
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item .logo {
  flex: 0 0 6.5rem;
  padding-top: 0.25rem;
}
@media only screen and (min-width: 768px) {
  .page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item .logo {
    flex: 0 0 7.5rem;
  }
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item .logo a {
  display: flex;
}
.page-template-page-manager-info #manager-wrapper .inner-wrapper #content #prices #price-list .price-item .logo a img {
  width: 100%;
}

.page-template-page-manager-profile #manager-wrapper .inner-wrapper #content {
  display: flex;
  flex-direction: column;
  /* PROFILE */
}
@media only screen and (min-width: 1024px) {
  .page-template-page-manager-profile #manager-wrapper .inner-wrapper #content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.page-template-page-manager-profile #manager-wrapper .inner-wrapper #content #user-information,
.page-template-page-manager-profile #manager-wrapper .inner-wrapper #content #trophy-room {
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .page-template-page-manager-profile #manager-wrapper .inner-wrapper #content #user-information,
  .page-template-page-manager-profile #manager-wrapper .inner-wrapper #content #trophy-room {
    width: calc(50% - 0.825rem);
  }
}
.page-template-page-manager-profile #manager-wrapper .inner-wrapper #content #user-information .preview-link {
  color: white;
  text-decoration: none;
  position: absolute;
  right: 1rem;
  font-size: 0.925rem;
}
.page-template-page-manager-profile #manager-wrapper .inner-wrapper #content #user-information #about {
  height: 6rem !important;
}

.page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content,
.page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 1024px) {
  .page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content,
  .page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content #info,
.page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content #rankings,
.page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content #register,
.page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content #info,
.page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content #rankings,
.page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content #register {
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content #info,
  .page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content #rankings,
  .page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content #register,
  .page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content #info,
  .page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content #rankings,
  .page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content #register {
    width: calc(50% - 0.825rem);
  }
}
.page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content #rankings,
.page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content #rankings {
  max-height: 100%;
}
.page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content #rankings .box:nth-child(2),
.page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content #rankings .box:nth-child(2) {
  display: none;
}
.page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content #register,
.page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content #register {
  max-height: 100%;
}
.page-template-page-manager-hall-of-fame #manager-wrapper .inner-wrapper #content #register .register-info,
.page-template-page-manager-mountain-trophy #manager-wrapper .inner-wrapper #content #register .register-info {
  margin: 0;
  padding: 0;
}

@media only screen and (min-width: 1024px) {
  .page-template-page-manager-partner .box {
    margin: 0 auto;
    width: calc(50% - 0.825rem);
  }
}

.page-template-page-manager-account #content {
  display: flex;
  flex-direction: column;
}
.page-template-page-manager-account #content #user-email {
  max-width: 640px;
  margin: 0 auto 1.65rem;
}
.page-template-page-manager-account #content #user-password {
  max-width: 640px;
  margin: 0 auto;
}

/*------------------------------------*\
    1. HELPERS
\*------------------------------------*/
/*------------------------------------*\
    2. LAYOUT
\*------------------------------------*/
/*------------------------------------*\
    3. PAGE - VIEWS
\*------------------------------------*/
/*------------------------------------*\
    4. MANAGER -VIEWS
\*------------------------------------*/