/* https://medieninsider.com/test-fabian/26518/ */


.mi-paywall-fade {
  position: relative;
}

.mi-paywall-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-left: -40px;
  width: calc(100% + 80px);
  font-size: 16px;
  line-height: normal;
  font-weight: 500;
  color: #1B1464;
}

.mi-paywall-container::before {
  display: block;
  top: -310px;
  left: 0;
  width: 100%;
  position: absolute;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  content: "";
  height: 300px;
}

.mi-paywall {
  position: relative;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.mi-paywall-membership-options > div {
  box-shadow: 0 30px 30px 0 rgba(27, 20, 100, 0.10);
  margin-bottom: 20px;
}

.mi-paywall .mi-paywall-text-highlight {
  display: block;
  margin-top: 8px;
}

.mi-paywall .mi-paywall-text-highlight span {
  border-radius: 4px;
  display: inline-block;
  background: #19DDAA;
  padding: 4px 10px;
}

.mi-paywall a.highlight {
  border-radius: 4px;
  display: inline-block;
  background: #1b1466;
  padding: 5px 8px;
  color: #fff!important;;
  text-align: center;
  font-weight: 500;
}

.mi-paywall a.highlight:hover {
  background-color: #1b1466;
  color: #19DDAA!important;;
  text-decoration: none;
}

.mi-paywall a.highlight:active {
  background-color: #19DDAA;
  color: #1b1466!important;;
  text-decoration: none;
}

.mi-paywall a.highlight:after {
  content: "";
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'%3E%3Cg clip-path='url(%23clip0_305_450)'%3E%3Cpath d='M1 6L14 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 1.91669L14.0833 6.00002L10 10.0834' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_305_450'%3E%3Crect width='16' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat 50% 50% / 16px transparent;
  width: 16px;
  height: 12px;
  vertical-align: 0;
  margin-left: 10px;
}

.mi-paywall a.highlight:hover:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'%3E%3Cg clip-path='url(%23clip0_305_450)'%3E%3Cpath d='M1 6L14 6' stroke='%2319DDAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 1.91669L14.0833 6.00002L10 10.0834' stroke='%2319DDAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_305_450'%3E%3Crect width='16' height='12' fill='%2319DDAA'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.mi-paywall a.highlight:active:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'%3E%3Cg clip-path='url(%23clip0_305_450)'%3E%3Cpath d='M1 6L14 6' stroke='%231b1466' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 1.91669L14.0833 6.00002L10 10.0834' stroke='%231b1466' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_305_450'%3E%3Crect width='16' height='12' fill='%231b1466'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.mi-paywall-login {
  color: #1b1466;
  text-align: left;
  padding: 20px;
}

.mi-paywall-login-teaser {
  font-size: 20px;
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: #19DDAA;
  text-decoration-thickness: 10%;
  text-underline-offset: 11%;
  text-underline-position: from-font;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.mi-paywall-login-teaser.has-highlight {
  margin-bottom: 14px;
}

.mi-paywall-login-teaser .mi-paywall-text-highlight {
  display: inline-block;
  margin: 0 -5px;
  padding: 0 20px;
  background: #fff;
  position: relative;
}

.mi-paywall-login-teaser .mi-paywall-text-highlight span {
  padding: 19px 17px;
}

.mi-paywall-login p {
  margin-bottom: 20px;
}

.mi-paywall-login-button {
  background-color: #1b1466;
  color: #fff!important;;
  border: none;
  padding: 5px 15px;
  cursor: pointer;
  font-size: 18px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 20px;
  hyphens: auto;

}

p .mi-paywall-login-button {
  margin-left: 10px;
  margin-bottom: 0;
}

p.button_first .mi-paywall-login-button {
  margin-left: 0;
  margin-right: 10px;
}

.mi-paywall-login-button:hover {
  background-color: #1b1466;
  color: #19ddaa!important;
}

.mi-paywall-login-button:active {
  background-color: #19ddaa;
  color: #1b1466!important;
}

.mi-paywall-login > :last-child {
  margin-bottom: 0;
}

.mi-paywall-membership-options .mi-paywall-option {
  background-color: #1b1466;
  color: white;
  margin-top: 10px;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}

.mi-paywall-option {
  border: 0;
  outline: none;
  width: 100%;
}
.mi-paywall-inner-option {
  padding: 10px;
}

.mi-paywall-membership-button {
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='15' viewBox='0 0 29 15' fill='none'%3E%3Cpath d='M27.5 1.5L14.5 13.5L1.5 1.5' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% - 20px) 50% / 16px #1b1466;
  color: #fff;
  padding: 20px;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  text-align: left;
  width: 100%;
}

.active .mi-paywall-membership-button {
  background-color: #19DDAA;
  color: #1b1466;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='15' viewBox='0 0 29 15' fill='none'%3E%3Cpath d='M1.5 13.5L14.5 1.5L27.5 13.5' stroke='%231B1464' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") ;
}

.mi-paywall-content {
  padding: 15px 15px 30px 15px;
  display: none;
  background: #fff;
}

.mi-paywall-content p {
  margin-bottom: 15px;
}

.mi-paywall-content p:first-of-type {
  font-weight: 700;
}

.mi-paywall-content ul {
  padding: 0;
  margin: 15px 0 0 0;
  list-style: none;
}

.mi-paywall-content ul li {
  padding: 0 0 0 32px;
  margin: 0!important;
  position: relative;
  list-style-image: none;
}

.mi-paywall-content ul li + li:not(.no-icon) {
  margin-top: 10px!important;
}

.mi-paywall-content ul li:before {
  content: '';
  display: block;
  width: 24px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.9161 4.626C20.0816 4.73634 20.1965 4.9079 20.2355 5.10293C20.2745 5.29796 20.2344 5.50051 20.1241 5.666L11.1241 19.166C11.0625 19.2582 10.9812 19.3357 10.8861 19.3927C10.791 19.4498 10.6844 19.485 10.5741 19.4959C10.4637 19.5068 10.3523 19.4931 10.2478 19.4558C10.1434 19.4185 10.0485 19.3584 9.97009 19.28L3.97009 13.28C3.83761 13.1378 3.76549 12.9498 3.76892 12.7555C3.77234 12.5612 3.85106 12.3758 3.98847 12.2384C4.12588 12.101 4.31127 12.0223 4.50557 12.0188C4.69987 12.0154 4.88792 12.0875 5.03009 12.22L10.3831 17.573L18.8761 4.833C18.9866 4.66768 19.1582 4.553 19.3532 4.51419C19.5483 4.47537 19.7507 4.51559 19.9161 4.626Z' fill='%2319DDAA'/%3E%3C/svg%3E") no-repeat 50% 50% / 24px transparent;
}

.mi-paywall-content ul li.not-included:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.47007 5.47003C5.6107 5.32958 5.80132 5.25069 6.00007 5.25069C6.19882 5.25069 6.38945 5.32958 6.53007 5.47003L12.0001 10.94L17.4701 5.47003C17.5387 5.39634 17.6215 5.33724 17.7135 5.29625C17.8055 5.25526 17.9048 5.23322 18.0056 5.23144C18.1063 5.22966 18.2063 5.24819 18.2997 5.28591C18.3931 5.32363 18.4779 5.37977 18.5491 5.45099C18.6203 5.52221 18.6765 5.60705 18.7142 5.70043C18.7519 5.79382 18.7704 5.89385 18.7687 5.99455C18.7669 6.09526 18.7448 6.19457 18.7039 6.28657C18.6629 6.37857 18.6038 6.46137 18.5301 6.53003L13.0601 12L18.5301 17.47C18.6038 17.5387 18.6629 17.6215 18.7039 17.7135C18.7448 17.8055 18.7669 17.9048 18.7687 18.0055C18.7704 18.1062 18.7519 18.2062 18.7142 18.2996C18.6765 18.393 18.6203 18.4779 18.5491 18.5491C18.4779 18.6203 18.3931 18.6764 18.2997 18.7142C18.2063 18.7519 18.1063 18.7704 18.0056 18.7686C17.9048 18.7668 17.8055 18.7448 17.7135 18.7038C17.6215 18.6628 17.5387 18.6037 17.4701 18.53L12.0001 13.06L6.53007 18.53C6.3879 18.6625 6.19985 18.7346 6.00555 18.7312C5.81125 18.7278 5.62586 18.6491 5.48845 18.5117C5.35104 18.3742 5.27233 18.1889 5.2689 17.9946C5.26547 17.8003 5.33759 17.6122 5.47007 17.47L10.9401 12L5.47007 6.53003C5.32962 6.38941 5.25073 6.19878 5.25073 6.00003C5.25073 5.80128 5.32962 5.61066 5.47007 5.47003Z' fill='%23FB5C59'/%3E%3C/svg%3E");
}

.mi-paywall-content ul li.no-icon {
  margin-top: 8px!important;
}

.mi-paywall-content ul li.no-icon:before {
  background-image: none;
}

.mi-paywall-content .text-price-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.mi-paywall-membership-option {
  position: relative;
}

.mi-paywall-membership-option + .mi-paywall-membership-option {
  margin-top: 15px;
}

.mi-paywall-membership-option input {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.mi-paywall-membership-option label {
  padding: 7px 15px 7px 65px;
  background: url("data:image/svg+xml,%3Csvg width='31' height='30' viewBox='0 0 31 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15.5' cy='15' r='14.5' stroke='%231B1464'/%3E%3C/svg%3E") no-repeat 15px 50% / 30px transparent;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  flex-direction: row;
  position: relative;
  border: 1px solid #CFCFCF;
  color: #1b1466;
}

.mi-paywall-membership-option input:checked ~ label {
  background-image: url("data:image/svg+xml,%3Csvg width='31' height='30' viewBox='0 0 31 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15.5' cy='15' r='14.5' stroke='%231B1464'/%3E%3Ccircle cx='15.4997' cy='15.0001' r='10.5319' fill='%231B1464'/%3E%3C/svg%3E");
  background-color:  rgba(25, 221, 170, 0.15);
}

.mi-paywall-membership-option.single-option label {
  padding-left: 15px;
  background-image: none!important;
}

.mi-paywall-membership-option.single-option label .title {
  font-size: 16px;
}

.mi-paywall-membership-option label span {
  display: block;
}

.mi-paywall-membership-option label > span:first-child {
  margin-right: 20px;
  flex: 1;
}

.mi-paywall-membership-option label .title {
  font-size: 18px;
  font-weight: 700;
  hyphens: auto;
}

.mi-paywall-membership-option label .legal {
  font-size: 16px;
}

.mi-paywall-membership-option label .title + .legal {
  margin-top: 3px;
}

.mi-paywall-price {
  font-size: 32px;
  line-height: 32px;
  font-weight: 700;
}

.mi-paywall-price .tax {
  font-size: 16px;
  display: block;
  line-height: 16px;
}


.mi-paywall-become-member-button {
  margin: 15px auto;
}

.mi-paywall-become-member-button a {
  background-color: #1b1466;
  color: #fff!important;;
  padding: 15px 20px;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  border-radius: 4px;
  text-align: center;
  font-size: 18px;
}

.mi-paywall-become-member-button a:hover {
  background-color: #1b1466;
  color: #19DDAA!important;;
  text-decoration: none;
}

.mi-paywall-become-member-button a:active {
  background-color: #19DDAA;
  color: #1b1466!important;;
  text-decoration: none;
}

.mi-paywall-become-member-button a:after {
  content: "";
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M5.5 12H19.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 5L19.5 12L12.5 19' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% 50% / 24px transparent;
  width: 24px;
  height: 20px;
  vertical-align: -3px;
  margin-left: 5px;
}

.mi-paywall-become-member-button a:hover:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M5.5 12H19.5' stroke='%2319DDAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 5L19.5 12L12.5 19' stroke='%2319DDAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mi-paywall-become-member-button a:active:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M5.5 12H19.5' stroke='%231b1466' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 5L19.5 12L12.5 19' stroke='%231b1466' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.user-count-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: -15px;
  width: calc(100% + 30px);
}

.user-count-wrapper > div {
  width: 100%;
  font-weight: 700;
  padding: 0 15px;
}

.user-count-wrapper > div + div {
  border-top: 1px solid #CFCFCF;
  margin-top: 15px;
  padding-top: 15px;
}

.user-count-wrapper .control-container {
  display: flex;
  flex-wrap: wrap;
}

.user-count-wrapper label {
  display: block;
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 20px;
}

.user-count-wrapper input {
  background: rgba(212, 214, 236, 0.15);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15) inset;
  color: #8D8E9E;
  width: calc(100% - 84px);
  padding: 4px 20px;
  height: 35px;
  display: block;
  border: 0;
  font-size: 20px;
  font-weight: 500;
}

.user-count-wrapper .change-user-count {
  text-align: center;
  font-size: 28px;
  font-weight: 400;
  background: #19DDAA;
  border: 0;
  line-height: 35px;
  height: 35px;
  width: 42px;
  display: block;
}

.user-count-wrapper > div > span {
  display: block;
  text-align: center;
}

.user-count-wrapper .mi-paywall-price {
  font-size: 32px;
  margin-bottom: 10px;
}

@media screen and (max-width: 499.98px) {
  p .mi-paywall-login-button {
    display: block;
    margin-top: 10px;
    margin-bottom: 0;
    margin-left: 0;
  }
}

@media screen and (max-width: 1199.98px) {
  .text-price-wrapper br {
    display: none;
  }
}

@media screen and (min-width: 1200px) {

  .mi-paywall-login {
    padding: 30px;
  }

  .mi-paywall-membership-button {
    padding: 15px 20px;
    font-size: 24px;
    line-height: 120%;
  }

  .mi-paywall-content {
    padding: 20px 20px;
  }

  .mi-paywall-membership-option-wrapper:not(.single-option) {
    display: flex;
    flex-wrap: wrap;
  }

  .mi-paywall-membership-option:not(.single-option) {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
    margin-right: 10px;
  }

  .mi-paywall-membership-option:not(.single-option):nth-child(2n+2) {
    margin-left: 10px;
    margin-right: 0;
  }

  .mi-paywall-membership-option:not(.single-option) + .mi-paywall-membership-option:not(.single-option) {
    margin-top: 0;
  }

  .mi-paywall-become-member-button {
    margin: 20px auto;
    text-align: center;
  }

  .mi-paywall-become-member-button a {
    font-size: 24px;
    width: auto;
    padding: 17px 30px;
  }

  .mi-paywall-content .text-price-wrapper {
    justify-content: space-between;
  }

  .mi-paywall-content .text-price-wrapper > div:first-child {
    flex: 0 0 calc(100% - 125px);
    max-width: calc(100% - 125px);
  }

  .mi-paywall-content .text-price-wrapper > div:last-child {
    flex: 0 0 105px;
    max-width: 105px;
  }

  .user-count-wrapper {
    border-bottom: 1px solid #CFCFCF;
    margin-top: -20px;
    margin-left: -20px;
    width: calc(100% + 40px);
  }

  .user-count-wrapper > div {
    flex: 0 0 50%;
    max-width: 50%;
    margin-top: 0!important;
    padding: 15px 20px 20px;
    border-top: 0;
  }

  .user-count-wrapper > div:nth-child(2n+2) {
    border-left: 1px solid #CFCFCF;
    border-top: 0;
    padding-top: 20px;
  }

  .mi-paywall-membership-option label {
    padding: 10px 15px 10px 65px;
  }

  .mi-paywall-membership-option label .title {
    font-size: 20px;
  }

}