/* Stripped the 60kb version to only required items */

/* @import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"; */

/*!
 * Bootstrap Icons v1.13.1 (https://icons.getbootstrap.com/)
 * Copyright 2019-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 */

@font-face {
    font-display: block;
    font-family: bootstrap-icons;
    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/fonts/bootstrap-icons.woff2?e34853135f9e39acf64315236852cd5a") format("woff2");
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal !important;
    line-height: 1;
    text-transform: none;
    vertical-align: -.125em;
}

.bi-check-circle::before { content: "\f26b"; }
.bi-exclamation::before { content: "\f33c"; }
.bi-exclamation-triangle::before { content: "\f33b"; }
.bi-eye-slash::before { content: "\f340"; }
.bi-eye::before { content: "\f341"; }
.bi-info-circle::before { content: "\f431"; }

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url("https://sso-test.stimme.de/services/assets/sales_funnel/fonts/MaterialIcons.woff") format('woff');
}

html {
    --xpresso-font: ff-meta-web-pro, -apple-system, blinkmacsystemfont, segoe ui, roboto, oxygen-sans, ubuntu, cantarell, helvetica neue, sans-serif;
    --xpresso-black: #000;
    --xpresso-white: #fff;
    --accent-color: #fabb00;
    --accent-shadow: #c90;
    --xpresso-grey: #757575;
    --xpresso-border: #bfbfbf;
    --xpresso-bg: #fefefe;
    --loading-color: #ededed;
}

:is(#xpresso_funnel, .content__container) {
    box-sizing: border-box;
    font-family: var(--xpresso-font), sans-serif;

    address, blockquote, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, ol, pre, table, ul {
        margin-bottom: 1rem;
    }

    & *,
    & *::before,
    & *::after {
        box-sizing: inherit;
    }

    & .material-symbols-outlined {
        direction: ltr;
        display: inline-block;
        font-family: 'Material Symbols Outlined', sans-serif;
        font-size: 24px;
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1;
        text-rendering: optimizelegibility;
        text-transform: none;
        white-space: nowrap;
        word-wrap: normal;
    }

    & label {
        /* display: inline-block; */
        line-height: 1.8;
    }

    & fieldset {
        background: none;
        border: none;
        outline: none;
    }

    & button:not(.btn__submit,.button-primary,.btn__cancel,.btn__link,.btn__jumpTo) {
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        cursor: auto;
        padding: 0;
    }

    & :is(input, button, select, textarea) {
        font-family: inherit;
        line-height: 1;
    }

    & textarea {
        resize: vertical;
    }

    & :is(
    [type="text"],
    [type="password"],
    [type="date"],
    [type="datetime-local"],
    [type="email"],
    [type="number"],
    [type="search"],
    [type="tel"],
    [type="url"],
    textarea) {
        appearance: none;
        background-color: var(--xpresso-bg);
        border: 1px solid var(--xpresso-border);
        border-radius: 5px;
        box-shadow: none;
        box-sizing: border-box;
        color: #0a0a0a;
        display: block;
        font-family: inherit;
        font-size: 1rem;
        font-weight: normal;
        height: 2.4375rem;
        line-height: 1.5;
        margin: 0 0 1rem;
        padding: .5rem;
        transition: box-shadow .5s, border-color .25s ease-in-out;
        width: 100%;
    }

    & select {
        appearance: none;
        background: var(--xpresso-bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>') no-repeat right -1rem center / 9px 6px content-box;
        border: 1px solid var(--xpresso-border);
        border-radius: 0;
        box-sizing: border-box;
        color: #0a0a0a;
        font-family: inherit;
        font-size: 1rem;
        font-weight: normal;
        height: 2.4375rem;
        line-height: 1.5;
        margin: 0 0 1rem;
        padding: .5rem 1.5rem .5rem .5rem;
        transition: box-shadow .5s, border-color .25s ease-in-out;
        width: 100%;
    }
}

/* Button styles */
:is(.btn.btn__wrapper .btn__submit, .button-primary, .btn.btn__cancel, .btn.btn__link) {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    color: var(--xpresso-black);
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    padding: .625rem;
    text-decoration: none;
    transition: background-color .25s, border .25s, color .25s, box-shadow .25s;

    &:hover {
        background-color: var(--xpresso-black);
        border-color: var(--xpresso-black);
        color: var(--xpresso-white);
    }
}

div.success-footer .xpresso-paywall-slogan {
    align-items: center;
    background-color: var(--xpresso-white);
    border-radius: 95px;
    color: var(--accent-color);
    display: flex;
    font: normal 18px/25px 'Century Old Style Std', sans-serif;
    height: 190px;
    letter-spacing: 0;
    place-content: center center;
    text-align: center;
    width: 190px;
}

div.xpresso-paywall-inner.xpresso-paywall-page-success {
    height: 315px;
}

.content__container {
  border: .01rem solid var(--accent-color);
  color: var(--xpresso-black);
  font-family: var(--xpresso-font);

  & a {
    color: var(--xpresso-black);
    text-decoration: underline;

    &:hover {
      text-decoration: underline;
    }
  }

  & .row {
    & :is(.headline__text, .form__label) {
      color: var(--xpresso-black);
    }

    & :is(#form, #register_form, #reset-password-form) {
      & .bi-eye-slash {
        cursor: pointer;
        margin: .35rem 0 0;
        position: absolute;
        right: 3.5rem;

        @media (width <= 576px) {
          right: 2rem;
        }
      }

      & .form__input-field {
        border: 2px solid var(--xpresso-grey);

        &::placeholder {
          color: var(--xpresso-grey);
        }
      }

      & .register-with-abo-wrapper {
        border-top: 1px solid #002655;
        margin: 2rem 0 0;
        padding: 1.5rem 0 0;

        & span {
          font-size: 80%;
        }

        & .disclaimer-text {
          line-height: .5rem;
        }

        & .field-line-wrapper {
          align-content: stretch;
          display: flex;
          flex-wrap: nowrap;

          & input {
            flex-grow: 2;
            margin: .5rem 0;

            &:nth-child(2) {
              margin: .5rem 0 .5rem .5rem;
            }
          }

          & .abo_wrapper {
            display: flex;
            position: relative;

            & i {
              cursor: pointer;
              margin-left: -1.75rem;
            }

            & .hd-pop-button {
              color: var(--xpresso-black);
              margin-top: .85rem;
            }
          }
        }
      }

      & .password__message-error-text {
        background: var(--xpresso-white);
        border: 1px solid var(--xpresso-border);
        border-radius: 5px;
        color: var(--xpresso-black);
        display: none;
        font-weight: bold;
        margin-bottom: 1rem;
        padding: 1rem 1rem 0;
        width: 100%;
        z-index: 1;

        & .helper-text {
          margin-top: .5rem;

          & li {
            color: red;
            list-style-type: none;

            &::before {
              content: "✖";
              margin: 0 .5rem 0 0;
              position: relative;
            }

            &.valid {
              color: green;

              &::before {
                content: "✔";
                margin: 0 .5rem 0 0;
                position: relative;
              }
            }
          }
        }
      }

      & .non-abo-text {
        font-size: .9rem;
        margin: 1rem 0;
      }

      & .disclaimer_wrapper {
        font-size: 80%;
        margin: 0 0 2rem;

        & .checkbox__container {
          height: auto;
          margin-top: 5px;
          min-height: 25px;

          & input ~ .checkmark {
            background-color: var(--xpresso-white);
            border: 1px solid var(--xpresso-border);
            border-radius: 5px;
          }

          &:hover input ~ .checkmark {
            background-color: var(--xpresso-white);
            border: 1px solid var(--xpresso-black);
          }

          & input:checked ~ .checkmark {
            background-color: var(--accent-color);

            &::after {
              border-color: color-contrast(var(--accent-color));
            }
          }

          & .form__checkbox-text {
            color: var(--xpresso-black);
            font-size: 60%;
          }
        }
      }

      & .btn__wrapper {
        float: right;
        margin-bottom: 2rem;
        position: relative;
        width: auto;
      }
    }

    & .hd-layer {
      background: rgb(0 0 0 / 70%);
      inset: 0;
      opacity: 0;
      position: fixed;
      transition: opacity 500ms;
      visibility: hidden;
      z-index: 1;

      &:target {
        opacity: 1;
        visibility: visible;
      }

      & .hd-pop {
        background: var(--xpresso-white);
        border-radius: 5px;
        margin: 70px auto;
        padding: 20px;
        position: relative;
        width: 70%;

        @media (width <= 998px) {
          height: 100%;
          margin: 0 auto;
          width: 100%;
        }

        & .close {
          background: var(--accent-color);
          border-radius: 40rem;
          color: var(--xpresso-white);
          content: '\F659';
          font-weight: bold;
          padding: .1rem .55rem .5rem;
          position: absolute;
          right: 10px;
          text-decoration: none;
          top: 10px;
        }

        & .content {
          overflow: auto;
          padding: 1rem 3rem 1rem 1rem;
          position: relative;
        }
      }

      & .content-image {
        margin-top: 2rem;
        max-height: 600px;
        width: 100%;

        & img {
          max-width: 100%;
        }
      }
    }

    /* Shared #check_popup and #clickable_button styles (ID = unique on page) */

    & .btn__wrapper #check_popup {
      background-color: #555555;
      border-radius: 6px;
      bottom: 125%;
      color: var(--xpresso-white);
      left: -170%;
      max-width: 360px;
      padding: 1rem;
      position: absolute;
      text-align: left;
      visibility: hidden;
      z-index: 1;

      @media (width >= 768px) {
        left: -29%;
        margin-left: -170px;
      }

      &::after {
        border: 5px solid transparent;
        border-top-color: #555555;
        content: "";
        left: 90%;
        margin-left: -5px;
        position: absolute;
        top: 100%;
      }

      & ul {
        margin-left: .5rem;

        & li {
          list-style-type: square;
        }
      }

      &.show {
        animation: fadeIn 1s;
        visibility: visible;
      }
    }

    & .btn__wrapper #clickable_button {
      cursor: pointer;
      display: none;
      height: 100%;
      position: absolute;
      width: 100%;
      z-index: 99999;

      &.block {
        display: block;
        z-index: 1;
      }
    }

    & > .col-md-6 {
      flex: 0 0 60%;
      max-width: 60%;

      @media (width <= 768px) {
        flex: 0 0 100%;
        max-width: 100%;
      }

      & .form__wrapper .btn__forgot-password a {
        color: var(--xpresso-black);
        font-size: 90%;

        &:hover {
          text-decoration: none;
        }
      }

      & .form__wrapper .btn__wrapper {
        float: right;
        margin-bottom: 2rem;
        position: relative;
        width: auto;

        & .btn__submit {
          background-color: var(--accent-color);
          border: 1px solid var(--accent-color);
          border-radius: 5px;
          color: var(--xpresso-black);
          cursor: pointer;
          display: inline-block;
          font-weight: 700;
          padding: .625rem;
          text-decoration: none;
          transition: background-color .25s, border .25s, color .25s, box-shadow .25s;

          &:hover {
            background-color: var(--xpresso-black);
            border-color: var(--xpresso-black);
            color: var(--xpresso-white);
          }
        }
      }
    }

    & > .col-md-6 .form__wrapper .button__wrapper,
    & > .col-sm-12 .form__wrapper .button__wrapper {
      display: flex;
      justify-content: end;
      margin: 1.5rem 0 0;

      & .checkbox__wrapper .checkbox__container {
        margin-bottom: 0;
        margin-top: 5px;

        & input ~ .checkmark {
          background-color: var(--xpresso-white);
          border: 1px solid var(--xpresso-border);
          border-radius: 5px;
        }

        &:hover input ~ .checkmark {
          background-color: var(--xpresso-white);
          border: 1px solid var(--xpresso-black);
        }

        & input:checked ~ .checkmark {
          background-color: var(--accent-color);
        }

        & .form__checkbox-text {
          color: var(--xpresso-black);
          font-size: 60%;
        }
      }

      & .btn__wrapper {
        width: auto;
      }
    }

    & .overlay {
      background-color: var(--accent-color);
      max-width: 40%;

      @media (width <= 768px) {
        max-width: 100%;
      }
    }

    & .overlay__heading {
      color: var(--xpresso-black);
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    & .overlay__wrapper {
      & a {
        color: var(--xpresso-black);
        font-weight: bold;
        text-decoration: none;

        &:hover {
          background-color: var(--xpresso-black);
          color: var(--xpresso-white);
        }
      }

      & .btn__jumpTo {
        border: 2px solid var(--xpresso-black);
        border-radius: 5px;
        color: var(--xpresso-black);

        &:hover {
          background-color: var(--xpresso-black);

          & a {
            color: var(--xpresso-white);
          }
        }
      }
    }
  }
}

#xpresso_funnel .xpresso-modal-box {
    align-items: center;
    background-color: rgb(0 0 0 / 70%);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;

    & .xpresso-paywall {
        background: var(--xpresso-white);
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        position: relative;

        @media (width <= 768px) {
            height: 100%;
        }

        & h2 {
            color: var(--xpresso-black);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.125;
        }

        & .form-sepa {
            & select {
                appearance: none;
                border-radius: 0;

                & > option {
                    appearance: none;
                }
            }

            & label {
                display: block;

                /* FIXME Roboto isn't loaded */
                font-family: Roboto, sans-serif;
                font-size: 1rem;
                margin-top: 1.5rem;

                &:first-child {
                    margin-top: 0;
                }
            }

            & :is(input, select) {
                width: 100%;
            }

            & .personaldata {
                width: calc(100% / 3);
            }

            & .addressdata {
                width: 100%;

                & .form-flex-item {
                    width: 40%;
                }
            }

            & :is(input[type="text"], select) {
                background-color: white;
                border: 1px solid var(--xpresso-grey);
                display: block;
                font-size: 1.125rem;
                height: 58px;
                line-height: 1.75rem;
                margin-top: .5rem;
                max-height: 58px;
                min-height: 58px;
                padding: 5px;
            }
        }

        & .form-flex-layout {
            display: flex;
            margin-top: 1rem;

            &:first-child {
                margin-top: 0;
            }
        }

        & .form-flex-item {
            margin-left: 5px;

            &:first-child {
                margin-left: 0;
            }

            &.input-small {
                width: 10%;
            }
        }

        /* Status messages with material icon */
        & :is(.success, .info, .error) {
            color: var(--xpresso-white);
            font: normal normal normal 14px Roboto, sans-serif;
            padding: 1.5rem 1rem;
            text-align: center;

            & span::before {
                direction: ltr;
                display: inline-block;
                font-family: 'Material Symbols Outlined', sans-serif;
                font-size: 24px;
                -webkit-font-smoothing: antialiased;
                font-style: normal;
                font-weight: normal;
                letter-spacing: normal;
                line-height: 1;
                padding-right: .3rem;
                text-rendering: optimizelegibility;
                text-transform: none;
                vertical-align: middle;
                white-space: nowrap;
                word-wrap: normal;
            }
        }

        & .success {
            background-color: #437e18;

            & span::before {
                content: 'verified';
            }

            & h2 {
                padding-left: 88px;
                text-align: center;
            }
        }

        & .info {
            background-color: #7abcdc;
            margin: 0 0 1rem;

            & span::before {
                content: 'info';
            }
        }

        & .error {
            background-color: #ff0000;

            & span::before {
                content: 'error';
            }
        }

        & .error-inline {
            background-color: #ff0000;
            color: var(--xpresso-white);
            display: inline-flex;
            font: normal normal normal 12px Roboto, sans-serif;
            padding: 5px;
            vertical-align: top;
        }

        & label.error {
            color: #ff0000;
        }

        & input[type="text"].error {
            border: 1px solid #ff0000;
        }

        & .loading-spinner {
            background-color: rgb(255 255 255 / 80%);
            display: flex;
            height: 100%;
            position: absolute;
            width: 100%;
            z-index: 2000;
        }

        & .xpresso-paywall-page-checkout-head {
            align-items: center;
            background: var(--accent-color);
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            padding: 1rem;
            text-align: center;

            & .premium-icon {
                background-color: var(--accent-color);
                border: 1px solid var(--xpresso-white);
                border-radius: .125rem;
                color: var(--xpresso-white);
                display: inline-block;
                font-size: 1.5rem;
                font-weight: 600;
                line-height: 1;
                margin: 0 0 1rem;
                max-width: 85px;
                padding: .2em .4em;
                position: relative;
                text-shadow: 0 0 4px var(--accent-shadow);
            }

            & .progress {
                background-color: transparent;
                display: flex;
                font-size: .75rem;
                height: 2.5rem;
                justify-content: flex-end;
                margin-top: 1em;
                overflow: hidden;
                text-align: center;

                & .progress-step {
                    border: 1px solid var(--xpresso-white);
                    border-radius: 50%;
                    color: var(--xpresso-black);
                    display: inline-block;
                    height: 3em;
                    padding: .5rem;
                    position: relative;
                    width: 3em;

                    &:not(:last-child) {
                        margin-right: 2em;

                        &::after {
                            background-color: var(--xpresso-white);
                            content: "";
                            height: 1px;
                            left: 100%;
                            position: absolute;
                            top: 50%;
                            width: 2em;
                        }
                    }

                    &.active {
                        background-color: rgb(255 255 255 / 50%);
                        color: var(--xpresso-black);
                        font-weight: bold;
                    }
                }
            }
        }

        & .xpresso-paywall-inner {
            display: flex;
            flex-direction: column;
            padding: 22px 44px;
            width: 828px;

            @media (width <= 768px) {
                width: 100%;
            }

            &.xpresso-paywall-page-checkout {
                height: 715px;

                @media (width <= 768px) {
                    height: 100%;
                }

                & .checkout-header {
                    display: flex;
                    flex-direction: row;
                    height: 50px;
                    justify-content: flex-start;
                    margin-top: 50px;

                    & .checkout-header-heading {
                        flex: auto;
                    }
                }

                & .checkout-content {
                    flex: auto;
                    margin-top: 3rem;

                    &.tabbed {
                        & nav a {
                            border-bottom: 2px solid var(--accent-color);
                            border-top-left-radius: 4px;
                            border-top-right-radius: 4px;
                            color: var(--xpresso-grey);
                            float: left;
                            font-family: var(--xpresso-font), sans-serif;
                            font-size: .875rem;
                            font-weight: bold;
                            padding: .5rem 1rem;
                            text-align: center;
                            text-decoration: none;
                            width: calc(100% / 3);

                            &.active {
                                background: var(--accent-color);
                                color: var(--xpresso-black);
                                width: 33.3333%;
                            }

                            & :hover {
                                background-color: #f2f2f2;
                            }
                        }

                        & figure {
                            clear: both;
                            display: block;
                            margin-left: 0;
                            width: 100%;

                            & > div {
                                letter-spacing: .3px;
                                line-height: 1.5em;
                                padding: 20px 0 0;
                                width: 100%;
                            }
                        }
                    }
                }

                & .checkout-footer {
                    min-height: 150px;
                    vertical-align: bottom;

                    & .checkout-buttons {
                        display: flex;

                        @media (width <= 768px) {
                            flex-direction: column;

                            & div:nth-child(1) {
                                text-align: center;
                                width: 100% !important;

                                & a {
                                    justify-content: center;
                                    width: 100%;
                                }
                            }

                            & div:nth-child(2) {
                                margin: 1rem 0 0;
                                width: 100% !important;

                                & a {
                                    justify-content: center;
                                    padding: .625rem 2rem;
                                    width: 100%;
                                }
                            }
                        }

                        & .button-secondary {
                            border: 2px solid var(--xpresso-black);
                            border-radius: .5rem;
                            bottom: unset;
                            color: var(--xpresso-black);
                            display: block;
                            font-weight: bold;
                            padding: .5rem 2rem;
                            position: relative;
                            right: unset;
                            text-align: center;
                            text-decoration: none;

                            &:hover {
                                background-color: var(--xpresso-black);
                                border-color: var(--xpresso-black);
                                color: var(--xpresso-white);
                            }
                        }
                    }

                    & .checkout-productinfo {
                        color: #404040;
                        font: normal normal normal 14px/25px Roboto, sans-serif;
                        opacity: 1;
                        text-align: left;
                    }
                }
            }

            &.xpresso-paywall-page-success {
                align-items: center;
                display: flex;
                justify-content: center;
                text-align: center;

                & .success-content p {
                    color: #404040;
                    font-family: var(--xpresso-font), sans-serif;
                    margin: .5rem;
                    text-align: center;
                }

                & .success-content .button-primary {
                    margin-top: 1rem;
                    text-decoration: none;
                }
            }

            & .success-content p {
                color: #404040;
                font: normal normal normal 16px/25px Roboto, sans-serif;
                margin: .5rem;
                text-align: center;
            }
        }

        &.success .success-content {
            flex: auto;
            font: normal normal normal 16px/25px Roboto, sans-serif;
            text-align: center;
        }

        & span.icon-success {
            content: '\e815';
            font-family: "Material Icons", sans-serif;
        }

        & .success-footer {
            align-items: center;
            background: url(/assets/img/xpresso/funnel_checkout_success.jpg) no-repeat bottom;
            background-size: cover;
            display: flex;
            height: 415px;
            place-content: center center;
            vertical-align: bottom;
        }
    }
}