@charset "UTF-8";
/*** COLORS ***/
/* STANDARD */
/* Indications */
/* LIVE */
/* ACHIEVEMENTS */
/*** BREAKTPOINTS / MEDIA QUERIES ***/
/* Images */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.helper--hidden {
  display: none !important; }

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  background: #F4F7FA;
  font-family: 'Dosis';
  padding: 64px 0 50px;
  min-height: 100vh;
  overflow-x: hidden; }
  @media screen and (min-width: 576px) {
    body {
      padding: 0; } }

h1 {
  font-size: 2rem;
  font-weight: 700; }
  @media screen and (min-width: 576px) {
    h1 {
      font-size: 2.5rem; } }

h2 {
  font-size: 1.5rem;
  font-weight: 700; }
  @media screen and (min-width: 576px) {
    h2 {
      font-size: 2rem; } }

h3 {
  font-size: 1.2rem;
  font-weight: 700; }
  @media screen and (min-width: 576px) {
    h3 {
      font-size: 1.5rem; } }

p {
  font-size: 16.3px;
  line-height: 24px;
  font-weight: 600;
  color: #152436; }
  p a {
    color: inherit;
    text-decoration: underline; }
  p.light {
    color: rgba(21, 36, 54, 0.48); }
  p.large {
    font-size: 19px;
    line-height: 28px; }

.light {
  color: rgba(21, 36, 54, 0.48); }

.thin {
  font-weight: 600; }

hr {
  border-top: 1px solid rgba(21, 36, 54, 0.08); }

/* CONTENT */
.content {
  padding: 16px 0; }
  @media screen and (min-width: 768px) {
    .content {
      padding: 24px 0; } }

/* BUTTONS */
.button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  padding: 15px 16px 16px;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03);
  border-radius: 8px;
  margin-bottom: 16px;
  text-align: center;
  width: 100%;
  transition: .2s; }
  @media screen and (min-width: 576px) {
    .button {
      padding: 15px 24px 16px; } }
  .button:hover {
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.12);
    transition: .2s ease-in-out;
    text-decoration: none;
    transition: .2s; }
  .button--primary {
    color: #152436;
    background: #FBBC05; }
    .button--primary:hover {
      color: #152436; }
  .button--secondary {
    color: #FFFFFF;
    background: #152436; }
    .button--secondary:hover {
      color: #FFFFFF; }
  .button--light {
    color: #152436;
    background: rgba(21, 36, 54, 0.04);
    box-shadow: none; }
    .button--light:hover {
      color: #152436;
      background: rgba(21, 36, 54, 0.08);
      box-shadow: none; }
  .button--disabled {
    color: rgba(21, 36, 54, 0.48);
    background: rgba(21, 36, 54, 0.04);
    box-shadow: none;
    pointer-events: none; }
    .button--disabled:hover {
      box-shadow: none;
      color: rgba(21, 36, 54, 0.48);
      cursor: default; }
  .button--outline {
    color: #152436;
    box-shadow: inset 0 0 0 3px #152436; }
    .button--outline:hover {
      color: #152436;
      box-shadow: inset 0 0 0 3px #152436;
      background: rgba(21, 36, 54, 0.02); }
  .button--attention {
    color: #FFFFFF;
    background: #E23054; }
    .button--attention:hover {
      color: #FFFFFF; }
  .button--small {
    width: auto;
    padding: 11px 24px 12px; }
  .button-icon--right {
    margin-left: 12px; }
  .button-icon--left {
    margin-right: 12px; }
  .button .icon-tipcoin:before {
    font-size: 15px;
    margin-left: 2px; }

button {
  border: 0; }

/* INPUTS */
.checkbox, .radiobutton {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  /* ERROR */
  /* SELECTED */
  /* DISABLED */ }
  .checkbox label, .radiobutton label {
    position: relative;
    font-size: 16.3px;
    font-weight: 700;
    color: #152436;
    padding: 13px 0 11px;
    width: 100%;
    box-shadow: 0 1px 0 0 rgba(21, 36, 54, 0.08);
    padding-right: 32px;
    cursor: pointer; }
    .checkbox label:before, .radiobutton label:before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px; }
    .checkbox label.checkbox-label:before, .radiobutton label.checkbox-label:before {
      background: url("../_assets/whitelabel/tipplay/ic_checkbox.svg"); }
    .checkbox label.radiobutton-label:before, .radiobutton label.radiobutton-label:before {
      background: url("../_assets/whitelabel/tipplay/ic_radiobutton.svg"); }
    .checkbox label.thin, .radiobutton label.thin {
      font-weight: 600; }
    .checkbox label.light, .radiobutton label.light {
      color: rgba(21, 36, 54, 0.48); }
    .checkbox label a, .radiobutton label a {
      color: inherit;
      text-decoration: underline; }
    .checkbox label .has-error, .radiobutton label .has-error {
      color: #E23054; }
  .checkbox--left label, .radiobutton--left label {
    width: calc(100% - 40px);
    padding-right: 0;
    transform: translateX(40px);
    margin: 0; }
    .checkbox--left label:before, .radiobutton--left label:before {
      left: -40px; }
  .checkbox--right label, .radiobutton--right label {
    margin: 0; }
    .checkbox--right label:before, .radiobutton--right label:before {
      right: 0; }
  .checkbox input[type="checkbox"], .checkbox input[type="radio"], .radiobutton input[type="checkbox"], .radiobutton input[type="radio"] {
    display: none; }
  .checkbox input[type="checkbox"].has-error + label:before, .radiobutton input[type="checkbox"].has-error + label:before {
    background: url("../_assets/ic_checkbox--error.svg"); }
  .checkbox input[type="radio"].has-error + label:before, .radiobutton input[type="radio"].has-error + label:before {
    background: url("../_assets/ic_radiobutton--error.svg"); }
  .checkbox input[type="checkbox"]:checked + label:before, .radiobutton input[type="checkbox"]:checked + label:before {
    background: url("../_assets/whitelabel/tipplay/ic_checkbox--active.svg"); }
  .checkbox input[type="radio"]:checked + label:before, .radiobutton input[type="radio"]:checked + label:before {
    background: url("../_assets/whitelabel/tipplay/ic_radiobutton--active.svg"); }
  .checkbox input:disabled + label, .checkbox input:disabled + label:before, .radiobutton input:disabled + label, .radiobutton input:disabled + label:before {
    opacity: .64; }

/* FILEUPLOAD */
.inputfile {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-bottom: 0;
  cursor: pointer; }
  .inputfile + input[type="file"] {
    display: none; }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: stretch;
  -moz-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  font-size: 16.3px;
  margin: 0;
  padding: 13px 0 11px;
  width: 100%;
  box-shadow: 0 1px 0 0 rgba(21, 36, 54, 0.08);
  font-weight: 700;
  color: #152436;
  font-family: 'Dosis'; }
  select:focus {
    outline: 0;
    box-shadow: 0 1px 0 0 #152436; }
    select:focus + .list-item-icon-right {
      box-shadow: 0 1px 0 0 #152436; }
  select option:selected {
    opacity: .48; }

input, textarea {
  padding: 10px 14px 11px;
  border: 1px solid rgba(21, 36, 54, 0.08);
  border-radius: 4px;
  font-size: 16.3px;
  font-family: 'Dosis';
  font-weight: 400;
  color: #152436;
  margin: 4px 0 12px;
  width: 100%;
  resize: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  input:focus, textarea:focus {
    border: 1px solid #152436;
    outline: 0; }
  input.has-error, textarea.has-error {
    border: 1px solid #E23054; }
  input:disabled, textarea:disabled {
    background: rgba(21, 36, 54, 0.04);
    opacity: 1;
    color: rgba(21, 36, 54, 0.4); }

textarea {
  min-height: 69px; }

/* INPUT ERRORS */
.help-block {
  margin-bottom: 18px;
  font-weight: 600;
  color: #E23054; }
  .help-block strong {
    font-weight: 600; }

/* LIST ITEM */
.list {
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 8px;
  padding: 4px 16px;
  margin-bottom: 16px;
  overflow: hidden; }
  @media screen and (min-width: 576px) {
    .list {
      border-radius: 16px; } }
  .list.light {
    box-shadow: none;
    background: rgba(21, 36, 54, 0.04); }
  .list.contact-form {
    padding: 16px 16px 4px; }

.list-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
  color: #152436;
  padding: 10px 0;
  /* Umbruchverhalten Start */
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
  /* Umbruchverhalden End */ }
  .list-header-value {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    font-size: 17px;
    font-weight: 600;
    color: rgba(21, 36, 54, 0.48);
    transition: .2s ease-in-out; }
    .list-header-value img {
      opacity: .48;
      margin-right: 0 !important; }
    .list-header-value:hover {
      text-decoration: none;
      color: rgba(21, 36, 54, 0.64); }
      .list-header-value:hover img {
        opacity: .64; }
  .list-header img {
    margin-right: 8px; }
  .list-header.text-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center; }

.list-title {
  font-size: 16.3px;
  line-height: 24px;
  font-weight: 700;
  color: #152436;
  padding: 10px 0; }

.list-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch; }
  .list-item:hover {
    text-decoration: none; }
  .list-item > div {
    position: relative;
    z-index: 1; }
  .list-item a {
    color: inherit;
    text-decoration: underline; }
  .list-item.click-redirect {
    cursor: pointer; }
  .list-item[data-toggle] {
    cursor: pointer; }
  .list-item.dark {
    background: #152436;
    margin: 0 -16px -4px;
    padding: 0 16px; }
  .list-item.highlighted {
    background: rgba(21, 36, 54, 0.04);
    margin: 0 -16px;
    padding: 0 16px; }
  .list-item-icon {
    position: relative;
    padding: 0 16px;
    box-sizing: content-box;
    margin-left: -16px;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-align-self: center;
    -moz-align-self: center;
    -ms-flex-item-align: center;
    align-self: center; }
    .deactivated .list-item-icon {
      opacity: .48; }
    .list-item-icon-number {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      -webkit-flex-shrink: 0;
      -moz-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      font-weight: 700;
      transform: translateY(1px);
      background: rgba(21, 36, 54, 0.16);
      border-radius: 50%;
      color: #152436; }
      .size-16 .list-item-icon-number {
        width: 16px;
        height: 16px; }
      .size-24 .list-item-icon-number {
        width: 24px;
        height: 24px; }
      .size-32 .list-item-icon-number {
        width: 32px;
        height: 32px; }
    .list-item-icon .form {
      width: 16px;
      height: 16px; }
      .list-item-icon .form-icon {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin: -2px;
        border-radius: 10px;
        font-size: 11.3px;
        font-weight: 700;
        color: #FFFFFF; }
        .list-item-icon .form-icon--positive {
          background: #72D234; }
        .list-item-icon .form-icon--neutral {
          background: rgba(21, 36, 54, 0.32); }
        .list-item-icon .form-icon--negative {
          background: #E23054; }
    .list-item-icon.size-16 {
      width: 16px;
      height: 16px; }
      .list-item-icon.size-16 img {
        width: 16px;
        height: 16px;
        vertical-align: top; }
    .list-item-icon.size-24 img {
      width: 24px;
      height: 24px;
      vertical-align: top; }
    .list-item-icon.size-24 .avatar, .list-item-icon.size-24 .photo {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      width: 24px;
      height: 24px;
      border-radius: 12px;
      background: rgba(21, 36, 54, 0.08);
      overflow: hidden; }
      .list-item-icon.size-24 .avatar img, .list-item-icon.size-24 .photo img {
        border-radius: 12px;
        box-shadow: 0 0 0 2px #152436; }
      .list-item-icon.size-24 .avatar.einzeltipper, .list-item-icon.size-24 .photo.einzeltipper {
        overflow: visible;
        background: none; }
        .list-item-icon.size-24 .avatar.einzeltipper img, .list-item-icon.size-24 .photo.einzeltipper img {
          border-radius: 0;
          box-shadow: none; }
    .list-item-icon.size-24 .photo {
      border-radius: 3px; }
      .list-item-icon.size-24 .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0; }
    .list-item-icon.size-24 .flag {
      position: absolute;
      width: 12px;
      height: 12px;
      bottom: -2px;
      right: 14px;
      box-shadow: 0 0 0 2px #FFFFFF;
      border-radius: 6px; }
      .list-item-icon.size-24 .flag img {
        width: 12px;
        height: 12px; }
    .list-item-icon.size-32 {
      padding: 0 12px;
      margin-left: -16px; }
      .list-item-icon.size-32 img {
        width: 32px;
        height: 32px;
        vertical-align: top; }
  .list-item-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: auto;
    -webkit-flex: auto;
    -moz-box-flex: auto;
    -moz-flex: auto;
    -ms-flex: auto;
    flex: auto;
    padding: 10px 0;
    box-shadow: 0 1px 0 0 rgba(21, 36, 54, 0.08); }
    .list-item-content.truncate {
      overflow: hidden; }
    .large .list-item-content {
      padding: 20px 0; }
  .list-item-label {
    font-size: 16.3px;
    line-height: 24px;
    font-weight: 700;
    color: #152436; }
    .list-item-label.thin {
      font-weight: 600; }
    .list-item-label.light {
      color: rgba(21, 36, 54, 0.48); }
    .dark .list-item-label {
      color: #FFFFFF; }
    .highlight .list-item-label {
      color: #152436; }
    .deactivated .list-item-label {
      opacity: .48; }
    .truncate .list-item-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
  .list-item-sublabel {
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    color: rgba(21, 36, 54, 0.48);
    margin: -1px 0 1px; }
    .list-item-sublabel.thin {
      font-weight: 600; }
    .list-item-sublabel.dark {
      color: rgba(21, 36, 54, 0.48); }
    .list-item-sublabel a {
      color: #152436; }
    .highlight .list-item-sublabel {
      color: #152436; }
    .deactivated .list-item-sublabel {
      opacity: .48; }
    .truncate .list-item-sublabel {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
  .list-item-value-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end;
    -webkit-box-flex: auto;
    -webkit-flex: auto;
    -moz-box-flex: auto;
    -moz-flex: auto;
    -ms-flex: auto;
    flex: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 10px 0;
    box-shadow: 0 1px 0 0 rgba(21, 36, 54, 0.08);
    text-align: right; }
    .list-item-value-container.truncate {
      overflow: hidden; }
    .list-item-value-container.nowrap {
      flex-shrink: 0; }
  .list-item-value {
    font-size: 16.3px;
    line-height: 24px;
    font-weight: 700;
    color: #152436; }
    .list-item-value.thin {
      font-weight: 600; }
    .list-item-value.light {
      color: rgba(21, 36, 54, 0.48); }
    .dark .list-item-value {
      color: #FFFFFF; }
    .highlight .list-item-value {
      color: #152436; }
    .deactivated .list-item-value {
      opacity: .48; }
    .truncate .list-item-value {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
  .list-item-subvalue {
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    color: rgba(21, 36, 54, 0.48);
    margin: -1px 0 -1px; }
    .list-item-subvalue.thin {
      font-weight: 600; }
    .list-item-subvalue.light {
      color: rgba(21, 36, 54, 0.48); }
    .dark .list-item-subvalue {
      color: #FFFFFF; }
    .highlight .list-item-subvalue {
      color: #152436; }
    .deactivated .list-item-subvalue {
      opacity: .48; }
    .truncate .list-item-subvalue {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .list-item-subvalue .badge {
      background: #FBBC05;
      color: #152436;
      font-size: 11px;
      line-height: 11px;
      padding: 3px 4px 3px 5px;
      border-radius: 3px;
      margin-top: -2px; }
      .list-item-subvalue .badge .icon-tipcoin:before {
        font-size: 8px; }
  .list-item-icon-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-self: stretch;
    -moz-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    box-shadow: 0 1px 0 0 rgba(21, 36, 54, 0.08); }
    .list-item-icon-right .drilldown {
      align-self: center;
      background: url("../_assets/ic_16_drilldown.svg");
      background-size: 16px 16px;
      width: 16px;
      height: 16px; }
      .list-item-icon-right .drilldown.light {
        opacity: .48; }
      .list-item-icon-right .drilldown.large {
        background: url("../_assets/ic_16_drilldown--large.svg"); }
    .list-item-icon-right a {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; }
    .list-item-icon-right img:last-of-type, .list-item-icon-right a:last-of-type {
      margin-left: 8px; }
    .list-item-icon-right .dropdown {
      -webkit-align-self: center;
      -moz-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      background: url(../_assets/ic_16_dropdown.svg);
      width: 16px;
      height: 16px; }
    .deactivated .list-item-icon-right {
      opacity: .48; }
  .list-item:last-child .list-item-content {
    box-shadow: none; }
  .list-item:last-child .list-item-value-container {
    box-shadow: none; }
  .list-item:last-child select, .list-item:last-child select + .list-item-icon-right, .list-item:last-child .checkbox label, .list-item:last-child .radiobutton label {
    box-shadow: none; }
  .list-item:last-child .list-item-icon-right {
    box-shadow: none; }
  .list-item:last-child .checkbox label, .list-item:last-child .radiobutton label {
    box-shadow: none; }
  .list-item.highlight {
    position: relative; }
    .list-item.highlight:before {
      content: '';
      position: absolute;
      width: calc(100% + 32px);
      height: 100%;
      margin-left: -16px;
      margin-right: -16px;
      background: #FBBC05;
      z-index: 0; }
  .list-item--header .list-item-content, .list-item--header .list-item-value-container {
    box-shadow: none; }
  .list-item--header .list-item-icon.number, .list-item--header .list-item-label, .list-item--header .list-item-value {
    font-size: 13px;
    color: rgba(21, 36, 54, 0.48); }

/* MODAL */
.modal-content {
  background: #F3F7FA;
  border-radius: 12px 12px 0 0;
  margin-top: 64px; }
  @media screen and (min-width: 576px) {
    .modal-content {
      margin-top: 32px;
      margin-bottom: 32px;
      border-radius: 12px; } }

.modal-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  border-bottom: 0;
  text-align: center;
  padding: 12px; }
  .modal-header .close {
    margin-left: inherit;
    width: 32px;
    height: 32px;
    background: url("../_assets/whitelabel/tipplay/ic_modal_close.svg");
    margin: 0;
    margin-left: auto; }
  .modal-header .icon-left {
    margin-left: 4px; }
    .modal-header .icon-left.wishlist-icon {
      cursor: pointer;
      width: 26px;
      height: 24px;
      background: url("../_assets/whitelabel/tipplay/ic_wishlist.svg");
      opacity: .48;
      transition: .2s; }
      .modal-header .icon-left.wishlist-icon:hover {
        opacity: 1; }
      .modal-header .icon-left.wishlist-icon.active {
        background: url("../_assets/whitelabel/tipplsc/ic_wishlist-active.svg");
        opacity: 1; }

.modal-title {
  font-size: 21.9px;
  font-weight: 700;
  width: 100%;
  margin-left: 32px; }

.modal-body {
  padding: 16px 16px 0; }
  @media screen and (min-width: 576px) {
    .modal-body {
      padding: 16px 24px 0; } }

.modal-footer {
  border: 0;
  padding: 0;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

.modal-dialog {
  margin: 0;
  min-height: 100%; }
  @media screen and (min-width: 576px) {
    .modal-dialog {
      margin: auto; } }

.modal-dialog-centered {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end; }
  @media screen and (min-width: 576px) {
    .modal-dialog-centered {
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center; } }
  .modal-dialog-centered:before {
    height: -webkit-fill-available; }

.modal-notification {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  margin-top: -32px; }
  .modal-notification-icon {
    margin-bottom: 13px;
    position: relative; }
    .modal-notification-icon.avatar {
      width: 128px;
      height: 128px;
      box-shadow: 0 0 0 3px #152436;
      border-radius: 64px; }
      .modal-notification-icon.avatar img {
        border-radius: 64px;
        width: 100%;
        height: 100%;
        object-fit: cover; }
  .modal-notification-label {
    font-size: 21.9px;
    font-weight: 700;
    color: #152436;
    text-align: center;
    margin-bottom: 6px; }
  .modal-notification-sublabel {
    font-size: 16.3px;
    font-weight: 600;
    color: rgba(21, 36, 54, 0.48);
    text-align: center;
    margin-bottom: 25px; }

.animate-bottom {
  position: relative;
  animation: animatebottom 0.4s; }

@keyframes animatebottom {
  from {
    bottom: -300px;
    opacity: 0; }
  to {
    bottom: 0;
    opacity: 1; } }
/* TABBAR */
.scroll {
  position: -webkit-sticky;
  position: sticky;
  z-index: 3;
  top: 64px;
  background: #FBBC05; }
  @media screen and (min-width: 768px) {
    .scroll {
      top: 0; } }
  .scroll::-webkit-scrollbar {
    display: none; }
  .scroll-container {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scrollbar-width: none;
    width: 100%;
    margin: 0px auto; }
    @media screen and (min-width: 576px) {
      .scroll-container {
        max-width: 510px; } }
    @media screen and (min-width: 768px) {
      .scroll-container {
        max-width: 690px; } }
    @media screen and (min-width: 992px) {
      .scroll-container {
        max-width: 930px; } }
    @media screen and (min-width: 1200px) {
      .scroll-container {
        max-width: 1110px; } }
  .scroll .scroll-item {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #f6f7ee;
    padding: 13px 0 12px;
    margin: 0 10px;
    font-size: 16.3px;
    font-weight: 700;
    color: rgba(21, 36, 54, 0.48); }
    .scroll .scroll-item.active {
      color: #152436; }
      .scroll .scroll-item.active:before {
        content: '';
        position: absolute;
        background: #152436;
        width: 100%;
        height: 3px;
        bottom: 0;
        left: 0; }
    .scroll .scroll-item:first-child {
      margin-left: 16px; }
      @media screen and (min-width: 992px) {
        .scroll .scroll-item:first-child {
          margin-left: 0; } }
    .scroll .scroll-item:last-child {
      margin-right: 16px; }
    .scroll .scroll-item:hover {
      text-decoration: none;
      color: #152436; }

/* ACCORDION */
.accordion .list-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .accordion .list-header img {
    margin-left: auto; }
.accordion .list-header[aria-expanded="true"] img {
  transform: rotate(180deg); }

/* FILTERBARD */
.filterbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  margin: 0 -16px;
  padding: 0 16px; }
  @media screen and (min-width: 576px) {
    .filterbar {
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; } }
  .filterbar-item {
    margin: 0 16px 16px 0; }
    @media screen and (min-width: 576px) {
      .filterbar-item:last-of-type {
        margin-right: 0; } }
    .filterbar-item input {
      display: none; }
    .filterbar-item label {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      white-space: nowrap;
      color: #152436;
      font-size: 16.3px;
      font-weight: 600;
      background: rgba(21, 36, 54, 0.08);
      padding: 10px 16px;
      margin: 0;
      border-radius: 8px;
      cursor: pointer; }
      .filterbar-item label img {
        width: 16px;
        height: 16px;
        border-radius: 8px;
        margin-right: 12px; }
    .filterbar-item input[type="checkbox"]:checked + label {
      color: #FFFFFF;
      background: #152436; }
      .filterbar-item input[type="checkbox"]:checked + label img {
        box-shadow: 0 0 0 2px #FFFFFF; }

/* SLIDER */
.slider-base {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(21, 36, 54, 0.08);
  margin-bottom: 8px; }
.slider-bar {
  position: absolute;
  height: 4px;
  border-radius: 2px;
  background: #FBBC05; }

/* LADNINGPAGE */
.intro {
  background: #FBBC05;
  overflow: hidden;
  padding-top: 32px; }
  @media screen and (min-width: 576px) {
    .intro {
      padding-top: 80px;
      overflow: visible; } }
  @media screen and (min-width: 768px) {
    .intro {
      padding-top: 24px; } }
  .intro h1 {
    font-weight: 800;
    color: #152436; }
  .intro p {
    opacity: .64;
    color: #152436;
    margin: 20px 0 18px;
    font-size: 19px;
    line-height: 28px; }
    @media screen and (min-width: 992px) {
      .intro p {
        margin: 20px 0 42px; } }
  .intro .intro__mockup {
    width: 140%;
    transform: translate(-40%, 0);
    margin: 32px 0; }
    @media screen and (min-width: 768px) {
      .intro .intro__mockup {
        margin: 0;
        transform: translate(-40%, 10%); } }
  .intro .button-row {
    margin-top: 32px; }
    @media screen and (min-width: 576px) {
      .intro .button-row {
        margin-top: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex; } }
    .intro .button-row .button {
      align-items: center; }
      .intro .button-row .button img {
        width: 24px;
        height: 24px;
        margin-right: 12px;
        margin-top: 0; }
      @media screen and (min-width: 576px) {
        .intro .button-row .button {
          margin: 0 8px; } }
      @media screen and (min-width: 992px) {
        .intro .button-row .button {
          margin: 0 12px; } }
      .intro .button-row .button:first-child {
        margin-left: 0; }
      .intro .button-row .button:last-child {
        margin-right: 0; }

.description {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  min-height: 75vh;
  padding: 96px 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.04);
  background: #152436;
  background-size: cover; }
  .description.bg1 {
    background-image: url("../_assets/landingpage/background-01.jpg");
    background-position: center center; }
  .description.bg2 {
    background-image: url("../_assets/landingpage/background-03.jpg");
    background-position: center bottom; }
  @media screen and (min-width: 576px) {
    .description {
      padding: 128px 0; } }
  .description h2 {
    color: #FFFFFF; }
  .description p {
    color: #FFFFFF;
    opacity: .64;
    margin-top: 19px;
    font-size: 19px;
    line-height: 28px; }
  .description .button {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
    margin-top: 16px; }
    @media screen and (min-width: 576px) {
      .description .button {
        width: auto;
        margin-top: 26px; } }
  .description img {
    max-width: 100%;
    margin-bottom: 24px; }
    @media screen and (min-width: 576px) {
      .description img {
        max-width: initial; } }

.leagues {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 24px 0; }
  .leagues-item {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    box-shadow: 0 0 0 2px #FFFFFF;
    margin-right: 16px; }
    @media screen and (min-width: 576px) {
      .leagues-item {
        margin-right: 24px; } }
    .leagues-item:last-child {
      margin-right: 0;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.48); }

.cookie {
  position: fixed;
  left: 15px;
  right: 15px;
  bottom: 15px;
  z-index: 3;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 8px 24px 0 rgba(21, 36, 54, 0.24);
  padding: 17px 24px 19px; }
  @media screen and (min-width: 576px) {
    .cookie {
      max-width: 352px;
      left: inherit;
      right: 24px;
      bottom: 24px; } }
  .cookie-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    margin-bottom: 11px; }
  .cookie-title {
    font-size: 19.1px;
    color: #152436;
    font-weight: 700;
    margin-right: auto; }
  .cookie-button {
    padding: 3px 10px 4px;
    font-size: 13.6px;
    color: #FFFFFF;
    font-weight: 700;
    background: #152436;
    border-radius: 8px;
    margin-right: -8px;
    cursor: pointer; }
  .cookie-text {
    font-size: 13.6px;
    color: rgba(21, 36, 54, 0.48);
    font-weight: 600; }
    .cookie-text a {
      color: rgba(21, 36, 54, 0.48);
      text-decoration: underline; }

/* ABOUT */
.about .content {
  padding: 0; }
.about__header {
  padding: 64px 0 32px;
  background: #FBBC05; }
  @media screen and (min-width: 576px) {
    .about__header {
      padding: 128px 0 32px; } }
  .about__header__badge {
    display: inline-flex;
    background: #152436;
    color: #FBBC05;
    border-radius: 4px;
    font-size: 13.6px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 12px;
    margin-bottom: 14px; }
    @media screen and (min-width: 576px) {
      .about__header__badge {
        border-radius: 8px;
        font-size: 20px;
        padding: 3px 12px 5px;
        margin-bottom: 22px; } }
  .about__header h1 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 900;
    color: #152436;
    margin-bottom: 26px; }
    @media screen and (min-width: 576px) {
      .about__header h1 {
        font-size: 64px;
        line-height: 64px;
        margin-bottom: 44px; } }
  .about__header p {
    font-weight: 600;
    opacity: .64;
    max-width: 640px; }
    @media screen and (min-width: 576px) {
      .about__header p {
        font-size: 22px;
        line-height: 36px; } }
.about__card {
  position: relative;
  z-index: 0;
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 16px;
  padding: 24px 24px 16px; }
  @media screen and (min-width: 576px) {
    .about__card {
      padding: 53px 64px 32px 64px; } }
  .about__card__wrapper {
    position: relative;
    background: rgba(21, 36, 54, 0.02);
    padding: 0; }
    @media screen and (min-width: 576px) {
      .about__card__wrapper {
        padding: 56px 0; } }
    .about__card__wrapper:before {
      content: '';
      position: absolute;
      background: #FBBC05;
      height: 50%;
      width: 100%;
      top: 0; }
  .about__card h2 {
    font-size: 24px;
    font-weight: 800;
    color: #152436;
    margin-bottom: 20px; }
    @media screen and (min-width: 576px) {
      .about__card h2 {
        font-size: 36px;
        margin-bottom: 29px; } }
  @media screen and (min-width: 576px) {
    .about__card p {
      font-size: 22px;
      line-height: 36px;
      font-weight: 600; } }
  .about__card .button-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 24px; }
    @media screen and (min-width: 576px) {
      .about__card .button-row {
        margin-top: 40px;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; }
        .about__card .button-row .button {
          display: inline-flex;
          width: auto; }
          .about__card .button-row .button:not(:last-child) {
            margin-right: 24px; } }
.about__tags {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 26px; }
  .about__tags__item {
    background: #FBBC05;
    color: #152436;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px; }
    .about__tags__item:not(:last-child) {
      margin-right: 12px; }
.about .punktesystem-feature img {
  border-radius: 50%;
  width: 128px;
  margin: 0 0 24px 0; }
  @media screen and (min-width: 576px) {
    .about .punktesystem-feature img {
      width: auto;
      margin: 0 auto; } }
.about .punktesystem-feature:first-child {
  box-shadow: none; }

/* HEADER */
.header {
  background: #FBBC05;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  z-index: 4;
  width: 100%;
  top: 0; }
  @media screen and (min-width: 768px) {
    .header {
      position: relative; } }
  .header .navbar {
    padding: 8px 0; }
    @media screen and (min-width: 768px) {
      .header .navbar {
        padding: 25px 0; } }
  .header .navbar-nav {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
    .header .navbar-nav.mobile {
      -webkit-box-align: inherit;
      -ms-flex-align: inherit;
      -webkit-align-items: inherit;
      -moz-align-items: inherit;
      align-items: inherit; }
  .header .navbar-collapse {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end; }
    .header .navbar-collapse.show {
      min-height: 100vh;
      /*height: 100%;
      max-height: calc(100vh - 72px);
      overflow-y: scroll;*/ }
    .header .navbar-collapse .group-name {
      max-width: 128px; }
  .header .nav-item {
    position: relative;
    margin: 0 8px; }
    @media screen and (min-width: 992px) {
      .header .nav-item {
        margin-left: 24px; } }
    .header .nav-item:first-child {
      margin-left: 0; }
    .header .nav-item:before {
      content: '';
      position: absolute;
      height: 2px;
      width: 100%;
      left: 0;
      bottom: 2px;
      background: #152436;
      opacity: 0;
      transition: .4s ease-in-out; }
    .header .nav-item:hover:before {
      opacity: 1; }
    .header .nav-item.active:before {
      opacity: 1; }
    .header .nav-item.more-items:hover:before, .header .nav-item.dropdown:hover:before {
      opacity: 0; }
  .header .nav-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    font-weight: 700;
    color: #152436 !important;
    padding: 8px 0 !important; }
    .header .nav-link.dropdown-toggle {
      padding: 4px 0 !important; }
    .header .nav-link:focus {
      outline: none; }
  .header .nav-divider {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-self: center;
    -moz-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    margin: 0 11px 0 9px;
    height: 28px;
    width: 2px;
    background: rgba(21, 36, 54, 0.08); }
    @media screen and (min-width: 992px) {
      .header .nav-divider {
        margin: 0 3px 0 17px; } }
  .header .group-logo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    box-shadow: 0 0 0 2px #152436;
    margin-right: 8px;
    background: #EDEEEF;
    overflow: hidden; }
    .header .group-logo img {
      width: 100%; }
    .header .group-logo.einzeltipper {
      box-shadow: none;
      background: none;
      overflow: visible; }
      .header .group-logo.einzeltipper img {
        width: 28px;
        height: 28px;
        margin-left: -2px;
        margin-top: -2px; }
  .header .group-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .header .nav-dots {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .header .nav-dots-item {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      margin: 0 1px;
      background: #152436; }
      .header .nav-dots-item:first-child {
        margin-left: 0; }
      .header .nav-dots-item:last-child {
        margin-right: 0; }
  .header .navbar-nav.mobile .list-item {
    width: 100%; }
    .header .navbar-nav.mobile .list-item .list-item-content {
      padding: 16px 0; }
    .header .navbar-nav.mobile .list-item .list-item-label {
      font-size: 19.1px; }
  .header .button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 16px; }
  .header .navbar-brand {
    list-style-type: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
    .header .navbar-brand .page-title {
      font-size: 19.1px;
      margin-left: 12px;
      font-weight: 700;
      color: #152436; }
    @media screen and (max-width: 414px) {
      .header .navbar-brand > img {
        height: 38px; } }
    .header .navbar-brand .group-name {
      max-width: calc(100vw - 128px); }
  .header .navbar-toggler {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 8px;
    border: 0;
    margin-right: -8px; }
    @media screen and (min-width: 768px) {
      .header .navbar-toggler {
        display: none; } }
  .header .dropdown-menu {
    padding: 4px 16px;
    min-width: auto;
    max-width: 220px;
    border-radius: 8px;
    left: -16px;
    min-width: 156px; }
    .header .dropdown-menu .list-item {
      margin: 0 -16px;
      padding: 0 16px; }
      .header .dropdown-menu .list-item:first-child {
        margin-top: -4px;
        padding-top: 4px; }
      .header .dropdown-menu .list-item:last-child {
        margin-bottom: -4px;
        padding-bottom: 4px; }
      .header .dropdown-menu .list-item:hover {
        background: rgba(21, 36, 54, 0.04); }
    .header .dropdown-menu--tipprunden {
      margin: 0 -16px 4px;
      padding: 0 16px 8px;
      box-shadow: 0 1px 0 0 rgba(21, 36, 54, 0.08); }
      .header .dropdown-menu--tipprunden .list-item:last-child {
        margin-bottom: -8px;
        padding-bottom: 8px; }
  .header .dropdown-toggle:after {
    border-radius: 4px; }
  .header .dropdown-item {
    font-weight: 700;
    padding: 6px 0;
    box-shadow: 0 1px 0 0 rgba(21, 36, 54, 0.08);
    background: none; }
    .header .dropdown-item:last-child {
      box-shadow: none; }
    .header .dropdown-item:active {
      color: inherit; }
  .header .nav-login {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    background: #152436;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 8px;
    margin-left: 16px; }
    .header .nav-login a {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      color: #FFFFFF; }
      .header .nav-login a:hover {
        text-decoration: none; }
    .header .nav-login img {
      margin-right: 10px; }

/* MOBILE MENU */
#modalMenu .button {
  margin-top: 16px; }
#modalMenu .list-item-content {
  padding: 16px 0; }

.carousel-menu {
  margin: 0 -16px; }
  .carousel-menu .slick-dots > li {
    display: inline-block; }
  .carousel-menu .slick-dots > li:only-child {
    display: none; }

.tipprundenselection {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 21px 0 15px; }
  .tipprundenselection-icon {
    width: 70px;
    height: 70px;
    margin: 0px auto 10px;
    border-radius: 38px;
    overflow: hidden;
    border: 3px solid #152436;
    background: rgba(21, 36, 54, 0.08); }
    .einzeltipper .tipprundenselection-icon {
      border: 0;
      overflow: visible;
      background: none; }
    .empty .tipprundenselection-icon {
      border: 0; }
    .tipprundenselection-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
      .einzeltipper .tipprundenselection-icon img {
        width: auto; }
  .tipprundenselection-label {
    font-size: 16.3px;
    color: #152436;
    font-weight: 700;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .empty .tipprundenselection-label {
      color: rgba(21, 36, 54, 0.48); }

/* FOOTER */
footer {
  margin-top: auto;
  background: #152436;
  padding: 32px 0 0;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    footer {
      padding: 44px 0 0; } }
  footer .col-xs-12 {
    width: 100%; }
  footer .footer-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
    @media screen and (min-width: 768px) {
      footer .footer-content {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; } }
    footer .footer-content img {
      opacity: .24;
      transition: .4s; }
      footer .footer-content img:hover {
        opacity: 1; }
    footer .footer-content ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      justify-content: space-between;
      -webkit-box-direction: normal;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      list-style-type: none;
      padding: 3px 16px 0;
      margin: 16px 0 0 0;
      width: 100%; }
      @media screen and (min-width: 576px) {
        footer .footer-content ul {
          -webkit-box-direction: normal;
          -webkit-box-orient: horizontal;
          -webkit-flex-direction: row;
          -moz-flex-direction: row;
          -ms-flex-direction: row;
          flex-direction: row; } }
      @media screen and (min-width: 768px) {
        footer .footer-content ul {
          -webkit-flex-wrap: nowrap;
          -moz-flex-wrap: nowrap;
          -ms-flex-wrap: none;
          flex-wrap: nowrap;
          -webkit-box-pack: end;
          -ms-flex-pack: end;
          -webkit-justify-content: flex-end;
          -moz-justify-content: flex-end;
          justify-content: flex-end;
          margin-left: auto;
          margin: 0;
          padding: 0; } }
      footer .footer-content ul li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-sizing: border-box; }
        @media screen and (min-width: 576px) {
          footer .footer-content ul li {
            border: 0; } }
        @media screen and (min-width: 768px) {
          footer .footer-content ul li {
            margin-left: 24px; } }
        footer .footer-content ul li:first-child {
          margin-left: 0; }
        footer .footer-content ul li:last-child {
          border-bottom: 0; }
        footer .footer-content ul li a {
          width: 100%;
          text-align: center;
          display: inline-block;
          position: relative;
          font-size: 16.3px;
          font-weight: 700;
          color: #FFFFFF;
          opacity: .24;
          transition: .4s;
          padding: 8px 0; }
          @media screen and (min-width: 576px) {
            footer .footer-content ul li a {
              width: auto;
              padding: 8px 0; } }
          footer .footer-content ul li a:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            left: 0;
            bottom: 0;
            border-radius: 1px;
            background: #FFFFFF;
            opacity: 0; }
          footer .footer-content ul li a:hover {
            opacity: 1;
            text-decoration: none; }
            footer .footer-content ul li a:hover:before {
              opacity: 1; }
  footer .footer-advertisement {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 2px solid rgba(255, 255, 255, 0.08);
    padding: 24px 0 0 0;
    margin-top: 21px; }
    @media screen and (min-width: 576px) {
      footer .footer-advertisement {
        margin-top: 44px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between; } }
    footer .footer-advertisement-item {
      width: 80%;
      margin: 0 0 24px 0;
      display: flex;
      justify-content: center; }
      @media screen and (min-width: 576px) {
        footer .footer-advertisement-item {
          width: inherit;
          flex: 1;
          margin: 0 16px 24px 16px;
          align-items: center;
          display: flex;
          justify-content: flex-start; } }
      footer .footer-advertisement-item:first-child {
        margin-left: 0; }
      footer .footer-advertisement-item:last-child {
        margin-right: 0; }
      footer .footer-advertisement-item img {
        width: 100%;
        max-width: 260px; }
        @media screen and (min-width: 576px) {
          footer .footer-advertisement-item img {
            max-width: 180px;
            margin: 0; } }
      footer .footer-advertisement-item p {
        color: rgba(255, 255, 255, 0.24);
        text-align: center;
        margin-bottom: 0;
        margin-left: 0; }
        @media screen and (min-width: 576px) {
          footer .footer-advertisement-item p {
            text-align: right;
            margin-left: auto; } }
        footer .footer-advertisement-item p a {
          text-decoration: none;
          transition: all .2s ease-in-out;
          color: rgba(255, 255, 255, 0.24); }
          footer .footer-advertisement-item p a:hover {
            text-decoration: underline;
            color: rgba(255, 255, 255, 0.48); }

/* DASHBOARD */
.welcome-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background: #FBBC05; }

.welcome-slider {
  margin: 0 -15px;
  padding-bottom: 24px; }
  @media screen and (min-width: 576px) {
    .welcome-slider {
      margin: 0; } }
  .welcome-slider .slick-slide:focus {
    outline: none; }
  .welcome-slider .slick-dots {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    position: absolute;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (min-width: 576px) {
      .welcome-slider .slick-dots {
        bottom: 72px; } }
    .welcome-slider .slick-dots li {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      margin: 0 2px;
      background: rgba(21, 36, 54, 0.48);
      cursor: pointer; }
      .welcome-slider .slick-dots li:nth-child(n+15) {
        display: none; }
    .welcome-slider .slick-dots .slick-active {
      background: #152436; }
    .welcome-slider .slick-dots button {
      display: none; }

.welcome {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  text-align: center;
  padding: 34px 0 91px; }
  @media screen and (min-width: 768px) {
    .welcome {
      padding: 58px 0 115px; } }
  .welcome--large {
    padding: 24px 0 64px; }
    @media screen and (min-width: 768px) {
      .welcome--large {
        padding: 48px 0 80px; } }
  .welcome-icon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    margin: 0px auto;
    margin-bottom: 16px; }
    .welcome-icon--achievement {
      width: 64px;
      height: 64px;
      background: #FFFFFF;
      box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.12), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
      border-radius: 12px; }
  .welcome-headline {
    font-size: 49.3px;
    color: #152436;
    font-weight: 700;
    margin-bottom: 4px; }
    .welcome--large .welcome-headline {
      font-size: 28px;
      margin-bottom: 5px; }
  .welcome-subline {
    font-size: 16.3px;
    color: #152436;
    font-weight: 700; }
  .welcome .button {
    display: inline-flex;
    margin-top: 20px;
    margin-bottom: 24px; }

.tipprunden {
  margin-top: -64px; }
  @media screen and (min-width: 768px) {
    .tipprunden {
      margin-top: -72px; } }

.punkteboost {
  font-size: 14px;
  line-height: 0;
  border-radius: 3px;
  color: #152436;
  background: #FBBC05;
  padding: 3px 7px;
  margin-left: 4px;
  transform: translateY(-2px); }

@media screen and (min-width: 992px) {
  .invite {
    margin-top: 24px;
    display: flex;
    padding: 24px; } }
.invite__content {
  text-align: center;
  padding: 23px 0 26px; }
  @media screen and (min-width: 992px) {
    .invite__content {
      text-align: left;
      padding: 0; } }
.invite__title {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  color: #152436;
  margin-bottom: 14px; }
  @media screen and (min-width: 992px) {
    .invite__title {
      font-size: 22px;
      margin-bottom: 5px; } }
.invite__copy {
  font-size: 16.3px;
  font-weight: 600;
  color: rgba(21, 36, 54, 0.64); }
.invite .button {
  max-width: 220px;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 992px) {
    .invite .button {
      align-self: center;
      margin-bottom: 0;
      margin-right: 0; } }

.advertisement--bottom {
  display: none; }
  @media screen and (min-width: 576px) {
    .advertisement--bottom {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      position: relative;
      margin: 0 auto 32px;
      padding: 0;
      width: 100%;
      max-width: 720px; }
      .login .advertisement--bottom {
        margin: 32px auto 0; } }
.advertisement--right {
  z-index: 4;
  position: fixed;
  top: 124px;
  display: none; }
  @media screen and (min-width: 992px) {
    .advertisement--right {
      left: calc(50% + 624px);
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; } }
.advertisement--top {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  margin: 0 0 24px; }
  .login .advertisement--top {
    margin: 0 0 48px; }
  .profile .advertisement--top {
    margin: 0; }
  .welcome-wrapper .advertisement--top {
    margin: 0 0 8px; }
.advertisement--mobilesticky {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #FFD200;
  border-top: 1px solid rgba(21, 36, 54, 0.24); }
  @media screen and (min-width: 576px) {
    .advertisement--mobilesticky {
      display: none; } }
.advertisement-card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 8px;
  min-height: 192px;
  overflow: hidden;
  pointer-events: none;
  position: relative; }
  .slick-active .advertisement-card {
    pointer-events: all; }
  .advertisement-card-hint {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
    color: rgba(21, 36, 54, 0.4); }
    .advertisement-card-hint:before {
      content: '-';
      position: absolute;
      top: -1.5px;
      left: -5px; }
    .advertisement-card-hint:after {
      content: '-';
      position: absolute;
      top: -1.5px;
      right: -5px; }
  .advertisement-card-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    margin: auto 0;
    text-align: center; }
  .advertisement-card-label {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: #152436;
    margin: 8px 0 3px; }
  .advertisement-card-sublabel {
    font-size: 14px;
    font-weight: 600;
    color: rgba(21, 36, 54, 0.48);
    padding: 0 16px; }
  .advertisement-card-footer {
    background: #FBBC05;
    color: #152436;
    font-size: 19.1px;
    line-height: 28px;
    font-weight: 700;
    padding: 10px 16px;
    width: calc(100% - 2px);
    text-align: center; }
    .advertisement-card-footer:hover {
      text-decoration: none;
      color: #152436; }
    .advertisement-card-footer.deactivated {
      background: rgba(21, 36, 54, 0.08);
      color: rgba(21, 36, 54, 0.48);
      box-shadow: inset 0 1px 0 0 rgba(21, 36, 54, 0.08); }

/* CAROUSSEL */
.carousel {
  padding-bottom: 16px;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    .carousel {
      padding-bottom: 29px; } }
  .carousel-cell {
    width: 100%;
    margin: 0 4px;
    /*margin-right: 10px; */
    opacity: 1;
    /* Hide next slides on desktop because of conflict with ads */ }
    @media screen and (min-width: 768px) {
      .carousel-cell {
        width: calc((100% / 3) - 10px);
        opacity: 0.16; }
        .carousel-cell.slick-active, .carousel-cell.slick-current, .carousel-achievements .carousel-cell {
          opacity: 1; } }
    @media screen and (min-width: 1200px) {
      .reclame-visible .carousel-cell {
        opacity: 0; }
        .reclame-visible .carousel-cell.slick-active, .reclame-visible .carousel-cell.slick-current, .carousel-achievements .reclame-visible .carousel-cell {
          opacity: 1; } }
  .carousel .slick-slide:focus {
    outline: none; }
  .carousel .slick-list {
    width: calc(100% - 32px);
    margin: 0px auto;
    overflow: visible; }
    @media screen and (min-width: 576px) {
      .carousel .slick-list {
        max-width: 510px; } }
    @media screen and (min-width: 768px) {
      .carousel .slick-list {
        max-width: 690px; } }
    @media screen and (min-width: 992px) {
      .carousel .slick-list {
        max-width: 930px; } }
    @media screen and (min-width: 1200px) {
      .carousel .slick-list {
        max-width: 1110px; } }
  .carousel .slick-dots {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin-top: 12px; }
    .carousel .slick-dots li {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      margin: 0 2px;
      background: rgba(21, 36, 54, 0.48);
      cursor: pointer; }
    .carousel .slick-dots .slick-active {
      background: #152436; }
    .carousel .slick-dots button {
      display: none; }
  .carousel .slick-arrow {
    position: absolute;
    top: calc(50% - 15px);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    z-index: 1;
    background: #152436;
    border-radius: 16px;
    cursor: pointer; }
    .carousel .slick-arrow:before {
      content: '';
      position: absolute;
      width: 32px;
      height: 32px; }
    .carousel .slick-arrow.slick-disabled {
      opacity: .16; }
    .carousel .slick-arrow.slick-prev {
      left: calc(50% - 616px); }
      .carousel .slick-arrow.slick-prev:before {
        background: url("../_assets/ic_slider_arrow-prev.svg"); }
    .carousel .slick-arrow.slick-next {
      right: calc(50% - 608px); }
      .carousel .slick-arrow.slick-next:before {
        background: url("../_assets/ic_slider_arrow-next.svg"); }

/* LEAGUE HEADER */
.league-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  padding: 12px 0;
  width: calc(100% - 32px);
  margin: 0px auto; }
  @media screen and (min-width: 576px) {
    .league-header {
      border-bottom: 1px solid rgba(21, 36, 54, 0.08);
      margin: 0px auto 16px;
      max-width: 510px; } }
  @media screen and (min-width: 768px) {
    .league-header {
      max-width: 690px; } }
  @media screen and (min-width: 992px) {
    .league-header {
      max-width: 930px; } }
  @media screen and (min-width: 1200px) {
    .league-header {
      max-width: 1110px; } }
  .league-header--left {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 19px;
    font-weight: 700;
    color: #152436; }
    .league-header--left img {
      margin-right: 8px;
      transform: translateY(1px); }
  .league-header--right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    text-align: right;
    position: relative; }
    .league-header--right:before {
      content: '';
      position: absolute;
      top: 2px;
      right: 0;
      width: 16px;
      height: 16px;
      background: url("../_assets/ic_16_dropdown.svg");
      opacity: .48;
      z-index: 0; }
    .league-header--right select {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-align-self: stretch;
      -moz-align-self: stretch;
      -ms-flex-item-align: stretch;
      align-self: stretch;
      position: relative;
      z-index: 1;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: 0;
      border-radius: 0;
      background: none;
      font-size: 16.3px;
      margin: 0;
      padding: 0 12px 0 0;
      width: 100%;
      font-weight: 600;
      color: rgba(21, 36, 54, 0.48);
      font-family: 'Dosis';
      text-align: right;
      box-shadow: none; }
      .league-header--right select:focus {
        outline: none;
        color: #152436; }
    .league-header--right img {
      margin-right: 2px;
      width: 12px;
      height: 12px;
      -webkit-align-self: center;
      -moz-align-self: center;
      -ms-flex-item-align: center;
      align-self: center; }

/* INTRO CARD */
.intro-card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 8px;
  padding: 0 16px;
  margin: 0 auto;
  min-height: 192px; }
  .intro-card-content {
    padding: 41px 0;
    text-align: center; }
    .intro-card-content-label {
      font-size: 32px;
      font-weight: 700;
      color: #152436;
      margin-bottom: -2px; }
      .intro-card-content-label span {
        font-size: 22px;
        margin-right: 4px; }
    .intro-card-content-sublabel {
      font-size: 16.3px;
      font-weight: 600;
      color: rgba(21, 36, 54, 0.48); }
  .intro-card-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    margin: 8px 0 0;
    padding: 10px 0 14px;
    box-shadow: 0 -1px 0 0 rgba(21, 36, 54, 0.08);
    font-size: 16.3px;
    font-weight: 700;
    width: 100%;
    color: #152436; }
    .intro-card-footer-label {
      font-size: 16.3px;
      font-weight: 700;
      color: #152436; }
      .intro-card-footer-label--left {
        margin: 0 auto 0 8px; }
      .intro-card-footer-label--centered {
        margin: 0px auto; }
  .intro-card label {
    position: relative;
    cursor: pointer; }
    .intro-card label:before {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background: url("../_assets/whitelabel/tipplay/ic_checkbox.svg"); }
  .intro-card input[type="checkbox"] {
    display: none; }
  .intro-card input:checked + label:before {
    background: url("../_assets/ic_checkbox--active.svg"); }

/* BET CARD */
.bet-card {
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 8px;
  padding: 0 16px;
  margin: 0 auto;
  overflow: hidden;
  min-height: 191px; }
  .bet-card-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    font-size: 13.6px;
    line-height: 13.6px;
    color: rgba(21, 36, 54, 0.48);
    font-weight: 600;
    padding: 15px 0 12px; }
    .bet-card-header-left {
      margin-right: auto; }
    .bet-card-header-right {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      padding: 14px 0;
      margin: -14px 0;
      cursor: pointer; }
      .bet-card-header-right img {
        transform: translateY(1px);
        vertical-align: top; }
    .bet-card-header-alert {
      background: #72D234;
      color: #FFFFFF;
      padding: 7px 8px 8px;
      position: absolute;
      right: -8px;
      top: 8px;
      border-radius: 4px; }
  .bet-card-team {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    font-size: 16.3px;
    color: #152436; }
    .bet-card-team-logo {
      width: 20px;
      height: 20px;
      margin-right: 12px;
      transform: translateY(2px);
      -webkit-flex-shrink: 0;
      -moz-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0; }
      .bet-card-team-logo svg {
        vertical-align: inherit; }
      .bet-card-team--bottom .bet-card-team-logo {
        transform: translateY(-2px); }
    .bet-card-team-content {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      font-weight: 700;
      width: 100%;
      padding: 9px 0 12px; }
      .bet-card-team--top .bet-card-team-content {
        box-shadow: 0 1px 0 0 rgba(21, 36, 54, 0.08);
        padding: 11px 0 7px; }
    .bet-card-team-buttons {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      margin-left: auto; }
      .bet-card-team--bottom .bet-card-team-buttons {
        transform: translateY(2px); }
      .bet-card-team-buttons-item {
        background: #152436;
        width: 24px;
        height: 24px;
        color: #FFF;
        border-radius: 4px;
        position: relative;
        cursor: pointer; }
        .bet-card-team-buttons-item:before {
          position: absolute;
          width: 24px;
          height: 24px; }
        .bet-card-team-buttons-item--left:before {
          content: url("../_assets/ic_24_minus.svg"); }
        .bet-card-team-buttons-item--right:before {
          content: url("../_assets/ic_24_plus.svg"); }
        .bet-card-team-buttons-item.disabled {
          background: rgba(21, 36, 54, 0.24); }
      .bet-card-team-buttons-number {
        font-size: 19px;
        color: #152436;
        font-weight: 700;
        text-align: center;
        transform: translateY(-1px); }
        .bet-card-team-buttons-number input {
          padding: 0;
          margin: 0;
          width: 32px;
          height: 24px;
          font-size: 19px;
          line-height: 19px;
          text-align: center;
          color: #152436;
          opacity: 1;
          font-weight: 700;
          border: 0;
          -moz-appearance: textfield;
          pointer-events: none; }
          .bet-card-team-buttons-number input:disabled {
            background: none;
            -webkit-text-fill-color: #152436;
            opacity: 1; }
        .bet-card-team-buttons-number input::-webkit-outer-spin-button,
        .bet-card-team-buttons-number input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0; }
        .bet-card-team-buttons-number.empty {
          color: rgba(21, 36, 54, 0.24); }
    .bet-card-team-result {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      margin-left: auto;
      font-size: 19px; }
      .bet-card-team-result-item {
        position: relative;
        width: 38px;
        text-align: center;
        border: 1px solid rgba(21, 36, 54, 0.08); }
        .bet-card-team-result-item--left {
          margin-left: 8px;
          color: rgba(21, 36, 54, 0.48); }
          .match-running .bet-card-team-result-item--left {
            color: #E23054; }
        .bet-card-team-result-item--right {
          margin-left: 16px;
          background: rgba(21, 36, 54, 0.03); }
        .bet-card-team--top .bet-card-team-result-item {
          padding: 6px 0 8px;
          margin-top: -7px;
          margin-bottom: -8px;
          border-radius: 8px 8px 0 0;
          border-bottom: 0; }
        .bet-card-team--bottom .bet-card-team-result-item {
          padding: 7px 0;
          margin-top: -8px;
          margin-bottom: -7px;
          border-radius: 0 0 8px 8px;
          border-top: 0; }
        .bet-card-team-result-item .result-title {
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          justify-content: center;
          position: absolute;
          top: -32px;
          font-size: 13px;
          width: 100%; }
          .bet-card-team-result-item--right .bet-card-team-result-item .result-title {
            color: rgba(21, 36, 54, 0.48); }
  .bet-card-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 8px -16px 0;
    padding: 10px;
    box-shadow: 0 -1px 0 0 rgba(21, 36, 54, 0.08); }
    .match-finished .bet-card-footer {
      padding: 8px 10px;
      background: rgba(21, 36, 54, 0.04);
      cursor: pointer; }
    .match-running .bet-card-footer {
      padding: 8px 10px;
      background: #E23054;
      cursor: pointer; }
    .bet-card-footer.oddsProvider-banner, .bet-card-footer.oddsProvider {
      background: rgba(21, 36, 54, 0.04); }
      .bet-card-footer.oddsProvider-banner:hover, .bet-card-footer.oddsProvider:hover {
        text-decoration: none; }
    .bet-card-footer-quotes {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      margin-bottom: 1px;
      margin-top: auto; }
      .bet-card-footer-quotes-logo {
        width: 32px;
        height: 32px;
        background: url("../_assets/logo-hpybet.svg");
        margin: -2px 12px -2px 2px;
        flex-shrink: 0; }
        .bet-card-footer-quotes-logo:focus {
          outline: none; }
        .oddsProvider-banner .bet-card-footer-quotes-logo {
          margin-right: 0; }
      .bet-card-footer-quotes-item {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        position: relative;
        padding: 7px 8px;
        font-size: 13.5px;
        line-height: 13.5px;
        font-weight: 700;
        color: #152436;
        border-radius: 4px;
        width: calc(100% / 3);
        overflow: hidden; }
        .oddsProvider .bet-card-footer-quotes-item {
          color: #000000;
          background: rgba(0, 0, 0, 0.06); }
        .bet-card-footer-quotes-item:hover {
          color: #152436;
          text-decoration: none; }
        .bet-card-footer-quotes-item:focus {
          outline: none; }
        .bet-card-footer-quotes-item--center {
          margin: 0 8px; }
        .bet-card-footer-quotes-item .quote-number {
          margin-left: auto; }
        .bet-card-footer-quotes-item-background {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          opacity: .12;
          z-index: 0; }
          .oddsProvider .bet-card-footer-quotes-item-background {
            opacity: 0; }
      .bet-card-footer-quotes-text {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        color: #000;
        font-size: 16.3px;
        font-weight: 700; }
        @media screen and (max-width: 320px) {
          .bet-card-footer-quotes-text {
            font-size: 15px; } }
      .bet-card-footer-quotes-cta {
        -webkit-align-self: center;
        -moz-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
        width: 24px;
        height: 24px;
        background: url("../_assets/ic_happybet_drilldown.svg");
        margin-left: 12px; }
      .bet-card-footer-quotes-hint {
        -webkit-align-self: center;
        -moz-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
        white-space: nowrap;
        font-size: 9px;
        color: rgba(0, 0, 0, 0.48);
        text-transform: uppercase;
        margin-left: 12px !important;
        font-weight: 600; }
    .bet-card-footer-label {
      font-size: 16.3px;
      color: rgba(21, 36, 54, 0.48);
      font-weight: 600;
      padding: 4px 0 4px 6px; }
      .match-running .bet-card-footer-label {
        color: #FFFFFF; }
      .bet-card-footer-label span {
        padding: 2px 6px;
        border-radius: 4px;
        color: #FFFFFF; }
        .bet-card-footer-label span.positive {
          background: #72D234; }
        .bet-card-footer-label span.neutral {
          background: #FBBC05; }
        .bet-card-footer-label span.negative {
          background: #E23054; }
    .bet-card-footer-value {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      font-size: 16.3px;
      color: rgba(21, 36, 54, 0.48);
      font-weight: 600;
      padding: 4px 6px 4px 0;
      margin-left: auto; }
      .match-running .bet-card-footer-value {
        color: #FFFFFF; }
      .bet-card-footer-value img {
        opacity: .48;
        height: 16px; }
        .match-running .bet-card-footer-value img {
          opacity: 1; }

/* TABELLE */
.tabelle {
  padding-left: 0; }
  .tabelle th {
    padding: 19px 0 18px; }
  .tabelle td:first-child, .tabelle th:first-child {
    width: 48px; }
  .tabelle td:nth-child(2), .tabelle th:nth-child(2) {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: inherit;
    max-width: inherit; }
  .tabelle td:nth-child(3), .tabelle td:nth-child(4), .tabelle th:nth-child(3), .tabelle th:nth-child(4) {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right;
    max-width: 44px;
    min-width: inherit;
    border-right: 0 !important; }
  .tabelle td {
    padding: 9px 0 !important; }
    .tabelle td:nth-child(2) {
      padding: 10px 0 11px; }

/* TIPPABGABE LEER */
.tippabgabe-empty {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background: rgba(21, 36, 54, 0.04);
  border-radius: 8px;
  min-height: 192px;
  margin-bottom: 24px;
  padding: 0 12px;
  text-align: center; }
  .tippabgabe-empty-label {
    font-size: 19px;
    font-weight: 700;
    color: #152436;
    margin-bottom: 3px; }
  .tippabgabe-empty-sublabel {
    font-size: 16.3px;
    line-height: 24px;
    font-weight: 600;
    color: rgba(21, 36, 54, 0.64); }

/* DISCLAIMER */
.tippabgabe-disclaimer {
  font-size: 13.6px;
  color: rgba(21, 36, 54, 0.32);
  font-weight: 600;
  text-align: center;
  width: 100%;
  margin: 10px 0 12px; }
  .tippabgabe-disclaimer a {
    color: rgba(21, 36, 54, 0.32); }

/* LOTTERY HINT */
.lottery-hint {
  position: sticky;
  z-index: 1;
  bottom: 48px;
  width: 100%;
  background: #F4F7FA;
  box-shadow: inset 0 1px 0 0 rgba(21, 36, 54, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: rgba(21, 36, 54, 0.48);
  padding: 9px 0;
  text-align: center; }
  @media screen and (min-width: 576px) {
    .lottery-hint {
      bottom: 0; } }
  .lottery-hint span {
    color: rgba(21, 36, 54, 0.24); }
  .lottery-hint a {
    text-decoration: none;
    color: rgba(21, 36, 54, 0.48); }

.teams {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  text-align: center;
  align-items: flex-end;
  margin: 3px 0 40px 0; }
  .teams-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center; }
    .teams-item-label {
      font-size: 16.3px;
      font-weight: 700;
      color: #152436;
      margin: 15px 0 1px; }
      .live .teams-item--center .teams-item-label {
        color: #E23054; }
    .teams-item-sublabel {
      font-size: 13px;
      font-weight: 700;
      color: rgba(21, 36, 54, 0.48);
      min-height: 19px; }
      .live .teams-item--center .teams-item-sublabel {
        font-weight: 800;
        color: #E23054; }
    .teams-item-result {
      align-items: center; }
      .teams-item-result-label {
        font-size: 32px;
        font-weight: 700;
        color: #152436;
        margin-bottom: -3px; }
        .upcoming .teams-item-result-label {
          margin: 0;
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          justify-content: center; }
        .teams-item-result-label input[type=number] {
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          width: 40px;
          height: 40px;
          padding: 0;
          margin: 0;
          text-align: center;
          font-family: 'Dosis';
          font-size: 32px;
          line-height: 0;
          font-weight: 700;
          color: #152436;
          background: #FFFFFF;
          border: 0;
          box-shadow: inset 0 0 0 2px rgba(21, 36, 54, 0.08);
          border-radius: 8px;
          -moz-appearance: textfield; }
          .teams-item-result-label input[type=number]:first-of-type {
            margin-right: 6px; }
          .teams-item-result-label input[type=number]:last-of-type {
            margin-left: 6px; }
          .teams-item-result-label input[type=number]:focus {
            outline: none;
            box-shadow: 0 0 0 2px #152436; }
        .teams-item-result-label input::-webkit-outer-spin-button,
        .teams-item-result-label input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0; }
        .teams-item-result-label .divider {
          display: inline-block;
          transform: translateY(-4px); }
      .teams-item-result-sublabel {
        font-size: 13px;
        font-weight: 700;
        color: rgba(21, 36, 54, 0.48); }
        .upcoming .teams-item-result-sublabel {
          display: none; }

.matchpoints {
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px; }
  .matchpoints-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    background: #152436;
    padding: 14px 16px;
    font-size: 16.3px;
    font-weight: 700;
    color: #FFFFFF; }
    .matchpoints-header-label {
      margin-right: auto; }
    .live .matchpoints-header {
      background: #E23054; }
  .matchpoints-content {
    padding: 4px 16px 24px; }
  .matchpoints-item-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    padding: 10px 0 8px; }
    .matchpoints-item-content-label {
      font-size: 16.3px;
      font-weight: 700;
      color: #152436;
      margin-right: auto; }
    .matchpoints-item-content-value {
      font-size: 13px;
      font-weight: 700;
      color: #152436; }
      .matchpoints-item-content-value span {
        opacity: .48; }
  .matchpoints-item-slider {
    width: 100%;
    height: 2px;
    background: rgba(21, 36, 54, 0.08);
    border-radius: 1px; }
    .matchpoints-item-slider-bar {
      width: 50%;
      height: 2px;
      background: #152436; }
      .live .matchpoints-item-slider-bar {
        background: #E23054; }

.nav-container {
  margin: 24px 0; }

.nav-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  background: none;
  margin: 0 12px; }
  .nav-item:first-child {
    margin-left: 0; }
  .nav-item:last-child {
    margin-right: 0; }

.nav-pills .nav-link {
  position: relative;
  color: #152436 !important;
  background: none !important;
  position: relative;
  font-size: 16.3px;
  font-weight: 700;
  color: #152436;
  text-decoration: none;
  padding: 4px 0;
  opacity: .48; }
  .nav-pills .nav-link:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: #152436;
    border-radius: 1px;
    opacity: 0; }
  .nav-pills .nav-link.active {
    background-color: none !important;
    opacity: 1; }
    .nav-pills .nav-link.active:before {
      opacity: 1; }

.tabs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 0 24px; }
  .tabs-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    margin: 0 0 16px;
    list-style-type: none; }
    .tabs-nav li {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 0 12px; }
      .tabs-nav li:first-child {
        margin-left: 0; }
      .tabs-nav li:last-child {
        margin-right: 0; }
    .tabs-nav-item {
      position: relative;
      font-size: 16.3px;
      font-weight: 700;
      color: #152436;
      opacity: .48;
      padding: 8px 0;
      text-decoration: none; }
      .tabs-nav-item[aria-selected="true"] {
        opacity: 1; }
        .tabs-nav-item[aria-selected="true"]:before {
          content: '';
          position: absolute;
          width: 100%;
          height: 2px;
          bottom: 0;
          left: 0;
          background: #152436;
          border-radius: 1px; }
      .tabs-nav-item:focus {
        outline: none; }

.quote-tendency {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin: -13px 0 24px;
  border-radius: 4px;
  background: #FFFFFF;
  overflow: hidden;
  position: relative; }
  .quote-tendency:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    box-shadow: inset 0 0 0 1px rgba(21, 36, 54, 0.08); }
  .quote-tendency-item {
    padding: 6px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    min-width: 10%; }
    .quote-tendency-item--center {
      background: rgba(21, 36, 54, 0.12);
      color: rgba(21, 36, 54, 0.64);
      border-left: 1px solid rgba(21, 36, 54, 0.08);
      border-right: 1px solid rgba(21, 36, 54, 0.08); }

.last-matches .list-item {
  position: relative; }
  .last-matches .list-item:before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 2px;
    bottom: -6px;
    background: url("../_assets/ic_12_last-matches-arrow.svg"); }
  .last-matches .list-item:last-child:before {
    display: none; }

/* TABLE / RANGLISTE */
.rangliste {
  /* position: relative;*/
  padding-left: 0;
  padding-right: 16px;
  max-width: 100%;
  /* Sticky START */
  overflow-x: scroll;
  overflow-y: auto;
  padding-top: 0;
  height: auto;
  /*max-height: calc(100vh - 200px);*/
  /* Sticky END */ }
  @media screen and (min-width: 576px) {
    .rangliste {
      max-height: calc(100vh - 180px); } }
  .rangliste table thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #FFFFFF;
    z-index: 2; }
  .rangliste table tbody {
    overflow-y: inherit; }
  .rangliste table td:nth-child(1), .rangliste table th:nth-child(1) {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0;
    background: #FFFFFF; }
  .rangliste table td:nth-child(2), .rangliste table th:nth-child(2) {
    position: -webkit-sticky;
    position: sticky;
    left: 44px;
    top: 0;
    background: #FFFFFF; }
  .rangliste table td:nth-child(3), .rangliste table th:nth-child(3) {
    position: -webkit-sticky;
    position: sticky;
    left: 152px;
    top: 0;
    background: #FFFFFF; }
    @media screen and (max-width: 321px) {
      .rangliste table td:nth-child(3), .rangliste table th:nth-child(3) {
        left: 124px; } }
  .rangliste table tr:nth-child(even) td:nth-child(1), .rangliste table tr:nth-child(even) td:nth-child(2), .rangliste table tr:nth-child(even) td:nth-child(3), .rangliste table tr:nth-child(even) th:nth-child(1), .rangliste table tr:nth-child(even) th:nth-child(2), .rangliste table tr:nth-child(even) th:nth-child(3) {
    background: #FAFBFB; }
  .rangliste table .highlight {
    background: #DADDDF !important; }
    .rangliste table .highlight td:nth-child(1), .rangliste table .highlight td:nth-child(2), .rangliste table .highlight td:nth-child(3) {
      background: #DADDDF !important; }
  @media screen and (min-width: 576px) {
    .rangliste {
      margin-bottom: 32px; } }
  .rangliste-scroll {
    /*overflow-x: scroll;*/
    margin-right: -16px; }

table {
  width: 100%;
  	/*tr {
  
  		&.highlight {
  			background: rgba($colorBranding, .16);
  		}
  
  	    &:last-child {
  	    	td, th {
  	    		box-shadow: none;
  	    	}
  	    }
  
  	    td,th {
  			font-size: 16.3px;
  			line-height: 24px;
  			font-weight: 700;
  			color: $colorPrimary;
  			padding: 8px 0 9px;
  	    	text-align: left;
  			box-shadow: 0 1px 0 0 rgba($colorPrimary, .08);
  
  	        &:first-child {
  	        	min-width: 44px;
  				text-align: center;
  				box-shadow: none;
  	        }
  
  	        &:nth-child(3) {
  	        	padding: 0 8px;
          		border-right: 1px solid rgba($colorPrimary, .08);
  
  	        	@include sm {
  	        		border-right: 0;
  	        	}
  	        }
  	    }
  
  	    th {
  	    	font-size: 13px;
  	    	line-height: 14px;
  	    	padding: 5px 0 4px;
  			color: rgba($colorPrimary, .48);
  
  			&.match {
  
  				padding: 5px 16px 4px;
  
  				.active {
  					color: $colorPrimary;
  
  					span {
  						color: $colorLive;
  					}
  				}
  
  				.match-points {
  					display: none;
  				}
  
  	        	&:nth-child(4) {
  	        		padding-left: 24px;
  	        	}
  
  	        	&:last-child {
  	        		padding-right: 24px;
  	        	}
  			}
  	    }
  
          td {
          	.badge {
  	        	background: $colorBranding;
  	        	color: $colorBrandingText;
  	        	font-size: 11px;
  	        	padding: 3px 4px 3px 5px;
  	        	border-radius: 3px;
  	        	margin-left: 4px;
  	        }
  
  	        &:nth-child(2) {
  	    		@include flexbox;
  	    		@include align-items(center);
  	        	padding: 16px 0;
  	        	min-width: 128px;
  	        	max-width: 156px;
  
  	        	@media screen and (max-width: 321px) {
  	        		min-width: 100px;
  	        		max-width: 100px;
  	        	}
  
  	        	@include sm {
  	        		max-width: inherit;
  	        	}
  
  	        	.username {
  	        		white-space: nowrap;
  	        		overflow: hidden;;
  	        		text-overflow: ellipsis;
  	        	}
  	        }
  
  	        &.match {
              	line-height: 19px;
  
  	        	&:nth-child(4) {
  	        		padding-left: 8px;
  	        	}
  
  	        	&:last-child {
  	        		padding-right: 8px;
  	        	}
  	        }
          }
  
          .match {
              text-align: center;
  
              @media screen and (max-width: 414px) {
              	display: flex;
              	flex-direction: row;
  	            align-items: center;
  	        	flex-direction: column;
              }
  
              .match-points {
              	margin: 0 auto;
              	display: inline-flex;
              	color: #FFFFFF;
              	font-size: 13px;
              	font-weight: 600;
              	line-height: 18px;
              	padding: 0 4px;
              	border-radius: 3px;
  
              	&--positive {
              		background: $colorPositive;
              	}
  
              	&--neutral {
              		background: $colorNeutral;
              	}
  
              	&--negative {
              		background: $colorNegative;
              	}
              }
          }
  	}*/ }
  table thead tr {
    display: flex; }
    table thead tr:after {
      content: '';
      overflow-y: scroll;
      visibility: hidden; }
  table thead th {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    font-size: 13px;
    line-height: 14px;
    padding: 5px 0 4px;
    color: rgba(21, 36, 54, 0.48);
    min-width: 72px; }
    table thead th span {
      font-size: 16.3px;
      line-height: 20px; }
    table thead th:nth-child(1) {
      -webkit-box-flex: 0;
      -webkit-flex: 0;
      -moz-box-flex: 0;
      -moz-flex: 0;
      -ms-flex: 0;
      flex: 0;
      width: 44px;
      min-width: 44px;
      max-width: 44px; }
    table thead th:nth-child(2) {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      -webkit-justify-content: flex-start;
      -moz-justify-content: flex-start;
      justify-content: flex-start;
      -webkit-box-flex: 0;
      -webkit-flex: 0;
      -moz-box-flex: 0;
      -moz-flex: 0;
      -ms-flex: 0;
      flex: 0;
      width: 108px;
      min-width: 108px;
      max-width: 108px;
      text-align: left; }
      @media screen and (max-width: 321px) {
        table thead th:nth-child(2) {
          width: 80px;
          min-width: 80px;
          max-width: 80px; } }
      @media screen and (min-width: 576px) {
        table thead th:nth-child(2) {
          width: 180px;
          min-width: 180px;
          max-width: 180px; } }
    table thead th:nth-child(3) {
      position: relative;
      -webkit-box-pack: flex-center;
      -ms-flex-pack: flex-center;
      -webkit-justify-content: flex-center;
      -moz-justify-content: flex-center;
      justify-content: flex-center;
      -webkit-box-flex: 0;
      -webkit-flex: 0;
      -moz-box-flex: 0;
      -moz-flex: 0;
      -ms-flex: 0;
      flex: 0;
      width: 60px;
      min-width: 60px;
      max-width: 60px;
      text-align: left; }
      table thead th:nth-child(3):before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 10px;
        height: 100%;
        box-shadow: 8px 0 10px 0 rgba(0, 0, 0, 0.08); }
      @media screen and (min-width: 992px) {
        table thead th:nth-child(3):before {
          opacity: 0; } }
    table thead th.match {
      padding: 5px 16px 4px; }
      table thead th.match .active {
        color: #152436; }
        table thead th.match .active span {
          color: #E23054; }
      table thead th.match:nth-child(4) {
        padding-left: 24px; }
      table thead th.match:last-child {
        padding-right: 24px; }
  table tbody {
    display: block;
    width: 100%; }
    table tbody tr {
      display: flex; }
      .rangliste table tbody tr:nth-child(even) {
        background: rgba(21, 36, 54, 0.02); }
      table tbody tr.highlight {
        background: rgba(251, 188, 5, 0.16) !important; }
      table tbody tr td {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1;
        font-size: 16.3px;
        line-height: 24px;
        font-weight: 700;
        color: #152436;
        word-wrap: break;
        text-align: center;
        min-width: 72px;
        box-shadow: inset 0 -1px 0 0 rgba(21, 36, 54, 0.08); }
        table tbody tr td:nth-child(1) {
          -webkit-box-flex: 0;
          -webkit-flex: 0;
          -moz-box-flex: 0;
          -moz-flex: 0;
          -ms-flex: 0;
          flex: 0;
          flex: 0;
          width: 44px;
          min-width: 44px;
          max-width: 44px;
          box-shadow: none;
          padding: 15px 0 17px; }
          .rangliste table tbody tr td:nth-child(1) {
            box-shadow: inset 0 -1px 0 0 rgba(21, 36, 54, 0.08); }
        table tbody tr td:nth-child(2) {
          -webkit-box-pack: start;
          -ms-flex-pack: start;
          -webkit-justify-content: flex-start;
          -moz-justify-content: flex-start;
          justify-content: flex-start;
          -webkit-box-flex: 0;
          -webkit-flex: 0;
          -moz-box-flex: 0;
          -moz-flex: 0;
          -ms-flex: 0;
          flex: 0;
          width: 108px;
          min-width: 108px;
          max-width: 108px;
          text-align: left; }
          table tbody tr td:nth-child(2) .username {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; }
          table tbody tr td:nth-child(2) .badge {
            background: #FBBC05;
            color: #152436;
            font-size: 11px;
            line-height: 11px;
            padding: 3px 4px 3px 5px;
            border-radius: 3px;
            margin-left: 4px; }
            table tbody tr td:nth-child(2) .badge .icon-tipcoin:before {
              font-size: 8px; }
          @media screen and (max-width: 321px) {
            table tbody tr td:nth-child(2) {
              width: 80px;
              min-width: 80px;
              max-width: 80px; } }
          @media screen and (min-width: 576px) {
            table tbody tr td:nth-child(2) {
              width: 180px;
              min-width: 180px;
              max-width: 180px; } }
        table tbody tr td:nth-child(3) {
          -webkit-box-pack: flex-center;
          -ms-flex-pack: flex-center;
          -webkit-justify-content: flex-center;
          -moz-justify-content: flex-center;
          justify-content: flex-center;
          -webkit-box-flex: 0;
          -webkit-flex: 0;
          -moz-box-flex: 0;
          -moz-flex: 0;
          -ms-flex: 0;
          flex: 0;
          width: 60px;
          min-width: 60px;
          max-width: 60px;
          text-align: left; }
          table tbody tr td:nth-child(3):before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 10px;
            height: 100%;
            box-shadow: 8px 0 10px 0 rgba(0, 0, 0, 0.08); }
          @media screen and (min-width: 992px) {
            table tbody tr td:nth-child(3):before {
              opacity: 0; } }
        table tbody tr td.match {
          line-height: 19px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center; }
          table tbody tr td.match:nth-child(4) {
            padding-left: 8px; }
          table tbody tr td.match:last-child {
            padding-right: 8px; }
    table tbody .match {
      text-align: center; }
      @media screen and (max-width: 414px) {
        table tbody .match {
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-direction: column; } }
      table tbody .match .match-points {
        margin: 0 auto;
        display: inline-flex;
        color: #FFFFFF;
        font-size: 13px;
        font-weight: 600;
        line-height: 18px;
        padding: 0 4px;
        border-radius: 3px;
        margin-top: 2px; }
        table tbody .match .match-points--positive {
          background: #72D234; }
        table tbody .match .match-points--positive-semi {
          background: #BCD234; }
        table tbody .match .match-points--neutral {
          background: #FBBC05; }
        table tbody .match .match-points--negative-semi {
          background: #FF7C25; }
        table tbody .match .match-points--negative {
          background: #E23054; }

.spieltag-arrow {
  width: 36px;
  height: 40px;
  margin: auto 0;
  background: url("../_assets/ic_24_rangliste_arrow.svg");
  background-repeat: no-repeat;
  background-position: center center; }
  .spieltag-arrow--down {
    margin-right: -6px;
    transform: rotate(180deg); }
  .spieltag-arrow--disabled {
    opacity: .48; }

@media screen and (min-width: 992px) {
  .list.filter {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    background: none;
    padding: 0;
    border-radius: 0; }
    .list.filter .list-item {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      background: rgba(21, 36, 54, 0.04);
      padding: 0 16px;
      border-radius: 16px;
      margin: 0 8px; }
      .list.filter .list-item:first-child {
        margin-left: 0; }
      .list.filter .list-item:last-child {
        margin-right: 0; } }
.tippgruppe-image {
  width: 100%;
  max-width: 960px;
  margin: 0px auto -72px; }
  @media screen and (min-width: 576px) {
    .tippgruppe-image {
      height: 320px;
      margin: 24px auto 0;
      max-width: 540px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03); } }
  .tippgruppe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.tippgruppe-header {
  margin-bottom: -8px; }
  @media screen and (min-width: 576px) {
    .tippgruppe-header {
      font-size: 24px;
      margin-bottom: 0; } }

.add-member-input {
  font-weight: 600;
  text-align: center;
  background: rgba(21, 36, 54, 0.08);
  border-radius: 8px; }

.progress {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative; }
  .progress:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(21, 36, 54, 0.16);
    position: absolute;
    top: 0;
    left: 0; }
  .progress > span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1; }
  .progress .progress-left {
    left: 0; }
  .progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 3px;
    border-style: solid;
    position: absolute;
    top: 0;
    border-color: #152436; }
  .progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
    /*animation: loading-2 1.5s linear forwards 1.8s;*/ }
  .progress .progress-right {
    right: 0; }
    .progress .progress-right .progress-bar {
      left: -100%;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      border-right: 0;
      -webkit-transform-origin: center right;
      transform-origin: center right;
      /*animation: loading-1 1.8s linear forwards;*/ }
  .progress .progress-value {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    color: #152436; }
    .progress .progress-value span {
      opacity: .48; }

/* This for loop creates the 	necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
/* Animation only the left side if below 50% */
.progress[data-percentage="1"] .progress-right .progress-bar {
  animation: loading-1 1.5s ease-in-out forwards; }
.progress[data-percentage="1"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="2"] .progress-right .progress-bar {
  animation: loading-2 1.5s ease-in-out forwards; }
.progress[data-percentage="2"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="3"] .progress-right .progress-bar {
  animation: loading-3 1.5s ease-in-out forwards; }
.progress[data-percentage="3"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="4"] .progress-right .progress-bar {
  animation: loading-4 1.5s ease-in-out forwards; }
.progress[data-percentage="4"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="5"] .progress-right .progress-bar {
  animation: loading-5 1.5s ease-in-out forwards; }
.progress[data-percentage="5"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="6"] .progress-right .progress-bar {
  animation: loading-6 1.5s ease-in-out forwards; }
.progress[data-percentage="6"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="7"] .progress-right .progress-bar {
  animation: loading-7 1.5s ease-in-out forwards; }
.progress[data-percentage="7"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="8"] .progress-right .progress-bar {
  animation: loading-8 1.5s ease-in-out forwards; }
.progress[data-percentage="8"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="9"] .progress-right .progress-bar {
  animation: loading-9 1.5s ease-in-out forwards; }
.progress[data-percentage="9"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-10 1.5s ease-in-out forwards; }
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="11"] .progress-right .progress-bar {
  animation: loading-11 1.5s ease-in-out forwards; }
.progress[data-percentage="11"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="12"] .progress-right .progress-bar {
  animation: loading-12 1.5s ease-in-out forwards; }
.progress[data-percentage="12"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="13"] .progress-right .progress-bar {
  animation: loading-13 1.5s ease-in-out forwards; }
.progress[data-percentage="13"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="14"] .progress-right .progress-bar {
  animation: loading-14 1.5s ease-in-out forwards; }
.progress[data-percentage="14"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="15"] .progress-right .progress-bar {
  animation: loading-15 1.5s ease-in-out forwards; }
.progress[data-percentage="15"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="16"] .progress-right .progress-bar {
  animation: loading-16 1.5s ease-in-out forwards; }
.progress[data-percentage="16"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="17"] .progress-right .progress-bar {
  animation: loading-17 1.5s ease-in-out forwards; }
.progress[data-percentage="17"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="18"] .progress-right .progress-bar {
  animation: loading-18 1.5s ease-in-out forwards; }
.progress[data-percentage="18"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="19"] .progress-right .progress-bar {
  animation: loading-19 1.5s ease-in-out forwards; }
.progress[data-percentage="19"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-20 1.5s ease-in-out forwards; }
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="21"] .progress-right .progress-bar {
  animation: loading-21 1.5s ease-in-out forwards; }
.progress[data-percentage="21"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="22"] .progress-right .progress-bar {
  animation: loading-22 1.5s ease-in-out forwards; }
.progress[data-percentage="22"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="23"] .progress-right .progress-bar {
  animation: loading-23 1.5s ease-in-out forwards; }
.progress[data-percentage="23"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="24"] .progress-right .progress-bar {
  animation: loading-24 1.5s ease-in-out forwards; }
.progress[data-percentage="24"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="25"] .progress-right .progress-bar {
  animation: loading-25 1.5s ease-in-out forwards; }
.progress[data-percentage="25"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="26"] .progress-right .progress-bar {
  animation: loading-26 1.5s ease-in-out forwards; }
.progress[data-percentage="26"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="27"] .progress-right .progress-bar {
  animation: loading-27 1.5s ease-in-out forwards; }
.progress[data-percentage="27"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="28"] .progress-right .progress-bar {
  animation: loading-28 1.5s ease-in-out forwards; }
.progress[data-percentage="28"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="29"] .progress-right .progress-bar {
  animation: loading-29 1.5s ease-in-out forwards; }
.progress[data-percentage="29"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-30 1.5s ease-in-out forwards; }
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="31"] .progress-right .progress-bar {
  animation: loading-31 1.5s ease-in-out forwards; }
.progress[data-percentage="31"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="32"] .progress-right .progress-bar {
  animation: loading-32 1.5s ease-in-out forwards; }
.progress[data-percentage="32"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="33"] .progress-right .progress-bar {
  animation: loading-33 1.5s ease-in-out forwards; }
.progress[data-percentage="33"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="34"] .progress-right .progress-bar {
  animation: loading-34 1.5s ease-in-out forwards; }
.progress[data-percentage="34"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="35"] .progress-right .progress-bar {
  animation: loading-35 1.5s ease-in-out forwards; }
.progress[data-percentage="35"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="36"] .progress-right .progress-bar {
  animation: loading-36 1.5s ease-in-out forwards; }
.progress[data-percentage="36"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="37"] .progress-right .progress-bar {
  animation: loading-37 1.5s ease-in-out forwards; }
.progress[data-percentage="37"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="38"] .progress-right .progress-bar {
  animation: loading-38 1.5s ease-in-out forwards; }
.progress[data-percentage="38"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="39"] .progress-right .progress-bar {
  animation: loading-39 1.5s ease-in-out forwards; }
.progress[data-percentage="39"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-40 1.5s ease-in-out forwards; }
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="41"] .progress-right .progress-bar {
  animation: loading-41 1.5s ease-in-out forwards; }
.progress[data-percentage="41"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="42"] .progress-right .progress-bar {
  animation: loading-42 1.5s ease-in-out forwards; }
.progress[data-percentage="42"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="43"] .progress-right .progress-bar {
  animation: loading-43 1.5s ease-in-out forwards; }
.progress[data-percentage="43"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="44"] .progress-right .progress-bar {
  animation: loading-44 1.5s ease-in-out forwards; }
.progress[data-percentage="44"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="45"] .progress-right .progress-bar {
  animation: loading-45 1.5s ease-in-out forwards; }
.progress[data-percentage="45"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="46"] .progress-right .progress-bar {
  animation: loading-46 1.5s ease-in-out forwards; }
.progress[data-percentage="46"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="47"] .progress-right .progress-bar {
  animation: loading-47 1.5s ease-in-out forwards; }
.progress[data-percentage="47"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="48"] .progress-right .progress-bar {
  animation: loading-48 1.5s ease-in-out forwards; }
.progress[data-percentage="48"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="49"] .progress-right .progress-bar {
  animation: loading-49 1.5s ease-in-out forwards; }
.progress[data-percentage="49"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in-out forwards; }
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0; }

/* Animation only the right side if above 50% */
/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="51"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="51"] .progress-left .progress-bar {
  animation: loading-1 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="52"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="52"] .progress-left .progress-bar {
  animation: loading-2 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="53"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="53"] .progress-left .progress-bar {
  animation: loading-3 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="54"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="54"] .progress-left .progress-bar {
  animation: loading-4 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="55"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="55"] .progress-left .progress-bar {
  animation: loading-5 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="56"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="56"] .progress-left .progress-bar {
  animation: loading-6 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="57"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="57"] .progress-left .progress-bar {
  animation: loading-7 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="58"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="58"] .progress-left .progress-bar {
  animation: loading-8 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="59"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="59"] .progress-left .progress-bar {
  animation: loading-9 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-10 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="61"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="61"] .progress-left .progress-bar {
  animation: loading-11 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="62"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="62"] .progress-left .progress-bar {
  animation: loading-12 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="63"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="63"] .progress-left .progress-bar {
  animation: loading-13 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="64"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="64"] .progress-left .progress-bar {
  animation: loading-14 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="65"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="65"] .progress-left .progress-bar {
  animation: loading-15 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="66"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="66"] .progress-left .progress-bar {
  animation: loading-16 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="67"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="67"] .progress-left .progress-bar {
  animation: loading-17 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="68"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="68"] .progress-left .progress-bar {
  animation: loading-18 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="69"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="69"] .progress-left .progress-bar {
  animation: loading-19 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-20 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="71"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="71"] .progress-left .progress-bar {
  animation: loading-21 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="72"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="72"] .progress-left .progress-bar {
  animation: loading-22 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="73"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="73"] .progress-left .progress-bar {
  animation: loading-23 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="74"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="74"] .progress-left .progress-bar {
  animation: loading-24 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="75"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="75"] .progress-left .progress-bar {
  animation: loading-25 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="76"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="76"] .progress-left .progress-bar {
  animation: loading-26 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="77"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="77"] .progress-left .progress-bar {
  animation: loading-27 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="78"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="78"] .progress-left .progress-bar {
  animation: loading-28 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="79"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="79"] .progress-left .progress-bar {
  animation: loading-29 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-30 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="81"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="81"] .progress-left .progress-bar {
  animation: loading-31 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="82"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="82"] .progress-left .progress-bar {
  animation: loading-32 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="83"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="83"] .progress-left .progress-bar {
  animation: loading-33 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="84"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="84"] .progress-left .progress-bar {
  animation: loading-34 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="85"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="85"] .progress-left .progress-bar {
  animation: loading-35 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="86"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="86"] .progress-left .progress-bar {
  animation: loading-36 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="87"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="87"] .progress-left .progress-bar {
  animation: loading-37 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="88"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="88"] .progress-left .progress-bar {
  animation: loading-38 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="89"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="89"] .progress-left .progress-bar {
  animation: loading-39 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-40 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="91"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="91"] .progress-left .progress-bar {
  animation: loading-41 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="92"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="92"] .progress-left .progress-bar {
  animation: loading-42 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="93"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="93"] .progress-left .progress-bar {
  animation: loading-43 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="94"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="94"] .progress-left .progress-bar {
  animation: loading-44 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="95"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="95"] .progress-left .progress-bar {
  animation: loading-45 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="96"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="96"] .progress-left .progress-bar {
  animation: loading-46 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="97"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="97"] .progress-left .progress-bar {
  animation: loading-47 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="98"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="98"] .progress-left .progress-bar {
  animation: loading-48 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="99"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="99"] .progress-left .progress-bar {
  animation: loading-49 1.5s ease-out forwards 1.5s; }

/* Animation only the left side if below 50% */
/* Animation only the right side if above 50% */
.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-50 1.5s ease-in forwards; }
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-50 1.5s ease-out forwards 1.5s; }

/* Animation */
@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(3.6);
    transform: rotate(3.6deg); } }
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(7.2);
    transform: rotate(7.2deg); } }
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(10.8);
    transform: rotate(10.8deg); } }
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(14.4);
    transform: rotate(14.4deg); } }
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(18);
    transform: rotate(18deg); } }
@keyframes loading-6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(21.6);
    transform: rotate(21.6deg); } }
@keyframes loading-7 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(25.2);
    transform: rotate(25.2deg); } }
@keyframes loading-8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(28.8);
    transform: rotate(28.8deg); } }
@keyframes loading-9 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(32.4);
    transform: rotate(32.4deg); } }
@keyframes loading-10 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg); } }
@keyframes loading-11 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(39.6);
    transform: rotate(39.6deg); } }
@keyframes loading-12 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(43.2);
    transform: rotate(43.2deg); } }
@keyframes loading-13 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(46.8);
    transform: rotate(46.8deg); } }
@keyframes loading-14 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(50.4);
    transform: rotate(50.4deg); } }
@keyframes loading-15 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(54);
    transform: rotate(54deg); } }
@keyframes loading-16 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(57.6);
    transform: rotate(57.6deg); } }
@keyframes loading-17 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(61.2);
    transform: rotate(61.2deg); } }
@keyframes loading-18 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(64.8);
    transform: rotate(64.8deg); } }
@keyframes loading-19 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(68.4);
    transform: rotate(68.4deg); } }
@keyframes loading-20 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg); } }
@keyframes loading-21 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(75.6);
    transform: rotate(75.6deg); } }
@keyframes loading-22 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(79.2);
    transform: rotate(79.2deg); } }
@keyframes loading-23 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(82.8);
    transform: rotate(82.8deg); } }
@keyframes loading-24 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(86.4);
    transform: rotate(86.4deg); } }
@keyframes loading-25 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(90);
    transform: rotate(90deg); } }
@keyframes loading-26 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(93.6);
    transform: rotate(93.6deg); } }
@keyframes loading-27 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(97.2);
    transform: rotate(97.2deg); } }
@keyframes loading-28 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(100.8);
    transform: rotate(100.8deg); } }
@keyframes loading-29 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(104.4);
    transform: rotate(104.4deg); } }
@keyframes loading-30 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg); } }
@keyframes loading-31 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(111.6);
    transform: rotate(111.6deg); } }
@keyframes loading-32 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(115.2);
    transform: rotate(115.2deg); } }
@keyframes loading-33 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(118.8);
    transform: rotate(118.8deg); } }
@keyframes loading-34 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(122.4);
    transform: rotate(122.4deg); } }
@keyframes loading-35 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(126);
    transform: rotate(126deg); } }
@keyframes loading-36 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(129.6);
    transform: rotate(129.6deg); } }
@keyframes loading-37 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(133.2);
    transform: rotate(133.2deg); } }
@keyframes loading-38 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(136.8);
    transform: rotate(136.8deg); } }
@keyframes loading-39 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(140.4);
    transform: rotate(140.4deg); } }
@keyframes loading-40 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg); } }
@keyframes loading-41 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(147.6);
    transform: rotate(147.6deg); } }
@keyframes loading-42 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(151.2);
    transform: rotate(151.2deg); } }
@keyframes loading-43 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(154.8);
    transform: rotate(154.8deg); } }
@keyframes loading-44 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(158.4);
    transform: rotate(158.4deg); } }
@keyframes loading-45 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(162);
    transform: rotate(162deg); } }
@keyframes loading-46 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(165.6);
    transform: rotate(165.6deg); } }
@keyframes loading-47 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(169.2);
    transform: rotate(169.2deg); } }
@keyframes loading-48 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(172.8);
    transform: rotate(172.8deg); } }
@keyframes loading-49 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(176.4);
    transform: rotate(176.4deg); } }
@keyframes loading-50 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg); } }
/* PROFILE */
.profile {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  background: #FBBC05;
  padding-bottom: 24px;
  text-align: center; }
  .profile-icon {
    position: relative;
    width: 140px;
    height: 140px;
    margin-top: 40px; }
    .profile-icon > img {
      width: 100%;
      height: 100%;
      border-radius: 70%;
      object-fit: cover;
      border: 4px solid #152436; }
    .profile-icon-premium {
      position: absolute;
      top: calc(100% - 4px);
      left: 50%;
      transform: translate(-50%, -50%);
      background: #152436;
      color: #FBBC05;
      box-shadow: 0 0 0 3px #FBBC05;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 2px 6px; }
  .profile-label {
    font-size: 24px;
    font-weight: 700;
    color: #152436;
    margin-top: 15px; }
  .profile-sublabel {
    font-size: 16.3px;
    font-weight: 700;
    color: #152436;
    margin-top: -3px; }
  .profile-tipcoins {
    font-size: 16.3px;
    font-weight: 700;
    color: #152436;
    margin-top: -3px;
    background: rgba(21, 36, 54, 0.08);
    padding: 2px 9px;
    border-radius: 4px;
    margin-top: 6px; }

/* ACHIEVEMENTS */
.level {
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px; }
  .level:last-child {
    margin-bottom: 0; }
  @media screen and (min-width: 992px) {
    .level {
      margin: 16px 0 8px; } }
  .level--main {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    text-align: center;
    padding: 26px 20px 0; }
  .level-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 20px 20px 20px 16px;
    cursor: pointer; }
    .level-header-content {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-box-direction: normal;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center; }
  .level-icon {
    width: 48px;
    height: 48px;
    margin-right: 16px;
    position: relative; }
    .level--main .level-icon {
      margin: 0;
      width: inherit;
      height: inherit; }
    .level-icon-number {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      position: absolute;
      width: 100%;
      top: 9px;
      font-size: 16.3px;
      font-weight: 800;
      color: #152436; }
      .list-item-icon .level-icon-number {
        background: none !important;
        top: -2px;
        font-size: 11px;
        left: 0;
        height: 100%; }
      .modal-notification-icon .level-icon-number, .level--main .level-icon-number {
        top: 15px;
        font-size: 32px;
        font-weight: 700; }
  .level-hint {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 14px;
    color: rgba(21, 36, 54, 0.48);
    font-weight: 700;
    margin-left: auto;
    cursor: pointer;
    padding: 8px; }
    .level-hint img {
      margin-top: -4px; }
  .level-headline {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    font-size: 19px;
    font-weight: 700;
    color: #152436; }
    .level--main .level-headline {
      font-size: 23px;
      margin: 4px 0 2px; }
    .level-headline span {
      font-size: 14px;
      color: rgba(21, 36, 54, 0.48);
      font-weight: 700;
      margin-left: auto; }
      .level-headline span img {
        margin-top: -4px; }
  .level-subline {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: rgba(21, 36, 54, 0.48); }
    .level--main .level-subline {
      font-size: 16px;
      line-height: 22px; }
  .level-slider {
    padding: 10px 0 12px;
    margin: 0 20px;
    box-shadow: 0 -1px 0 0 rgba(21, 36, 54, 0.08); }
    .level--main .level-slider {
      box-shadow: none;
      padding: 32px 0 12px;
      margin: 0;
      width: 100%; }
    .level-slider-base {
      position: relative;
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background: rgba(21, 36, 54, 0.08);
      margin-bottom: 8px; }
    .level-slider-bar {
      position: absolute;
      height: 4px;
      border-radius: 2px;
      background: #FBBC05; }
      .level--main .level-slider-bar {
        height: 6px;
        border-radius: 3px;
        margin-top: -1px;
        background: #152436; }
    .level-slider-legend {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 7px;
      margin-top: 6px; }
    .level-slider-label {
      font-size: 13px;
      font-weight: 700;
      color: #152436; }
      .level-slider-label span {
        color: rgba(21, 36, 54, 0.48); }
      .level-slider-label--right {
        color: rgba(21, 36, 54, 0.48);
        margin-left: auto;
        flex-shrink: 0; }
      .level--main .level-slider-label {
        font-size: 16px; }
    .level-slider-button {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      color: #152436;
      background: #FBBC05;
      border-radius: 10px;
      font-size: 16.3px;
      font-weight: 700;
      padding: 10px 0;
      margin: 6px 0 4px;
      cursor: pointer; }
  .level-finished {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    padding: 48px 16px 20px; }
    .level-finished .level-icon {
      position: relative;
      margin-bottom: 5px;
      width: inherit;
      height: inherit; }
      .level-finished .level-icon:before {
        content: '';
        position: absolute;
        top: calc(50% - 16px);
        left: 50%;
        transform: translate(-50%, -50%);
        width: 186px;
        height: 74px;
        background: url("../_assets/whitelabel/tipplay/level/level-finished.svg"); }
    .level-finished .level-headline, .level-finished .level-subline {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center; }

.top-spieltage .list-item-content, .top-spieltage .list-item-value-container {
  box-shadow: none; }
.top-spieltage .slider-base {
  margin-top: -4px;
  margin-bottom: 15px; }

.punkteboost-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0px auto;
  width: 100%; }
  @media screen and (max-width: 320px) {
    .punkteboost-section .button {
      font-size: 16.3px; } }
  .punkteboost-section-divider {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 100%;
    margin-bottom: 10px; }
    .punkteboost-section-divider-stroke {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 2px;
      background: rgba(21, 36, 54, 0.08); }
    .punkteboost-section-divider-label {
      font-size: 16.3px;
      font-weight: 600;
      color: rgba(21, 36, 54, 0.48);
      margin: 0 8px; }
  .punkteboost-section-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between; }
    .punkteboost-section-buttons .button {
      -webkit-box-direction: normal;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 calc(50% - 8px);
      -moz-box-flex: 0;
      -moz-flex: 0 0 calc(50% - 8px);
      -ms-flex: 0 0 calc(50% - 8px);
      flex: 0 0 calc(50% - 8px);
      font-size: 16.3px;
      line-height: 20px;
      padding-top: 12px;
      padding-bottom: 12px; }
      .punkteboost-section-buttons .button img {
        margin-bottom: 4px; }
  .punkteboost-section-selection {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 26px; }
    .punkteboost-section-selection-item {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      background: #FBBC05;
      padding: 6px 0 8px;
      border-radius: 8px;
      font-size: 28px;
      font-weight: 800;
      color: rgba(21, 36, 54, 0.48);
      cursor: pointer; }
      .punkteboost-section-selection-item.selected {
        cursor: inherit;
        color: #152436;
        font-size: 22px;
        font-weight: 700;
        padding: 11px 0 12px;
        box-shadow: 0 0 24px 0 rgba(251, 188, 5, 0.24); }
      .punkteboost-section-selection-item.not-selected {
        cursor: inherit;
        background: rgba(21, 36, 54, 0.08);
        color: rgba(21, 36, 54, 0.24);
        font-size: 22px;
        font-weight: 700;
        padding: 11px 0 12px; }
      .punkteboost-section-selection-item:nth-child(2) {
        margin: 0 16px; }
      .punkteboost-section-selection-item img {
        display: none;
        width: 25px;
        height: 25px; }
@keyframes selected {
  0% {
    transform: scale(1);
    box-shadow: 0 0 24px 0 rgba(251, 188, 5, 0.24); }
  50% {
    transform: scale(1.1);
    box-shadow: 0 8px 24px 0 rgba(251, 188, 5, 0.16); }
  100% {
    transform: scale(1);
    box-shadow: 0 0 24px 0 rgba(251, 188, 5, 0.24); } }
@keyframes progress {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
      .punkteboost-section-selection-item.animation-selected {
        animation: 1s selected infinite; }
        .punkteboost-section-selection-item.animation-selected span {
          display: none; }
        .punkteboost-section-selection-item.animation-selected img {
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          opacity: 1;
          animation: 1s progress infinite; }
      .punkteboost-section-selection-item.animation-not-selected {
        opacity: .48; }
        .punkteboost-section-selection-item.animation-not-selected img {
          display: none; }

/* PRAEMIENSHOP */
.praemienshop {
  margin-bottom: 72px; }
  @media screen and (min-width: 576px) {
    .praemienshop {
      padding: 40px 0; } }
  .praemienshop .container {
    position: relative; }
  .praemienshop-modal-image {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    margin: -8px auto 24px;
    max-width: calc(100% - 64px); }

.amount-selection .list-item-label {
  width: 100%;
  display: flex;
  align-items: center; }
.amount-selection .badge {
  background: #FBBC05;
  color: #152436;
  font-size: 11px;
  padding: 3px 4px 3px 5px;
  border-radius: 3px;
  max-height: 16px; }
  .amount-selection .badge--free {
    background: rgba(21, 36, 54, 0.08);
    color: #152436;
    margin-left: auto; }
  .amount-selection .badge--premium {
    background: #FBBC05;
    color: #152436;
    margin-left: 22px; }
.amount-selection .radiobutton label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .amount-selection .radiobutton label .icon-tipcoin {
    margin-left: 2px; }

.praemienshop-hint {
  font-size: 12px;
  line-height: 16px;
  color: rgba(21, 36, 54, 0.48);
  text-align: center;
  margin-top: -4px;
  margin-bottom: 12px; }

.price {
  width: 64px;
  text-align: right; }
  .price--free {
    color: rgba(21, 36, 54, 0.48);
    margin-left: auto; }
  .price--premium {
    color: #FBBC05;
    margin-left: 8px; }

/* PRAEMIENSHOP ITEM */
.discount-card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 16px;
  margin: 8px 0;
  transition: .2s;
  cursor: pointer;
  overflow: hidden;
  min-height: 226px; }
  @media screen and (min-width: 576px) {
    .discount-card {
      margin: 16px 0; } }
  .discount-card:hover {
    box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.06), inset 0 0 0 1px rgba(21, 36, 54, 0.08); }
  .discount-card-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    text-align: center;
    padding: 0 16px; }
    .discount-card-top-value {
      font-size: 40px;
      font-weight: 700;
      color: #152436;
      margin-bottom: 3px;
      margin-top: -6px;
      margin-left: 12px; }
      .discount-card-top-value span {
        font-size: 24px;
        font-weight: 900; }
      .discount-card-top-value.empty {
        color: rgba(21, 36, 54, 0.24); }
    .discount-card-top-title {
      font-size: 19.1px;
      font-weight: 700;
      color: #152436;
      margin-bottom: 3px; }
    .discount-card-top-description {
      font-size: 13.6px;
      font-weight: 600;
      color: rgba(21, 36, 54, 0.48); }
    .discount-card-top .question {
      position: absolute;
      top: 17px;
      right: 17px;
      width: 26px;
      height: 26px;
      background: url("../_assets/ic_question.svg");
      cursor: pointer;
      opacity: .48;
      transition: .2s; }
      .discount-card-top .question:hover {
        opacity: 1; }
  .discount-card-footer {
    text-align: center;
    background: #FBBC05;
    columns: #152436;
    font-size: 16.3px;
    font-weight: 700;
    padding: 12px 16px; }
    .discount-card-footer.disabled {
      color: rgba(21, 36, 54, 0.48);
      background: rgba(21, 36, 54, 0.04);
      box-shadow: inset 0 1px 0 0 rgba(21, 36, 54, 0.08);
      pointer-events: none; }

.gift-card {
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 16px;
  margin: 8px 0;
  transition: .2s;
  cursor: pointer; }
  @media screen and (min-width: 576px) {
    .gift-card {
      margin: 16px 0; } }
  .gift-card:hover {
    box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.06), inset 0 0 0 1px rgba(21, 36, 54, 0.08); }
  .gift-card-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    position: relative;
    height: 180px;
    padding: 24px 0 16px; }
    .gift-card-top img {
      max-width: 100%;
      max-height: 100%; }
    .gift-card-top .new {
      position: absolute;
      top: 16px;
      left: 16px;
      border-radius: 6px;
      padding: 5px 7px;
      font-size: 13px;
      font-weight: 700;
      background: #FBBC05;
      color: #152436; }
    .gift-card-top .wishlist {
      position: absolute;
      top: 17px;
      right: 17px;
      width: 26px;
      height: 24px;
      background: url("../_assets/whitelabel/tipplay/ic_wishlist.svg");
      cursor: pointer;
      opacity: .48;
      transition: .2s; }
      .gift-card-top .wishlist:hover {
        opacity: 1; }
      .gift-card-top .wishlist.active {
        background: url("../_assets/whitelabel/tipplsc/ic_wishlist-active.svg");
        opacity: 1; }
  .gift-card-progress {
    background: rgba(21, 36, 54, 0.08);
    height: 1px;
    /*&-bar {
    	display: none;
    	width: 40%;
    	height: 3px;
    	background: $colorBranding;
    	border-radius: 0 1.5px 1.5px 0; 
    }*/ }
  .gift-card-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    align-items: stretch;
    padding: 0 16px; }
    .gift-card-footer-content {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-direction: normal;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-flex: auto;
      -webkit-flex: auto;
      -moz-box-flex: auto;
      -moz-flex: auto;
      -ms-flex: auto;
      flex: auto;
      padding: 10px 0 11px; }
      .gift-card-footer-content.truncate {
        overflow: hidden; }
    .gift-card-footer-label {
      font-size: 16.3px;
      line-height: 24px;
      font-weight: 700;
      color: #152436; }
      .truncate .gift-card-footer-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
    .gift-card-footer-sublabel {
      font-size: 13px;
      line-height: 20px;
      font-weight: 600;
      color: rgba(21, 36, 54, 0.48);
      margin: -1px 0 1px; }
      .truncate .gift-card-footer-sublabel {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
    .gift-card-footer-value-container {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
      -ms-flex-align: end;
      -webkit-align-items: flex-end;
      -moz-align-items: flex-end;
      align-items: flex-end;
      -webkit-box-flex: auto;
      -webkit-flex: auto;
      -moz-box-flex: auto;
      -moz-flex: auto;
      -ms-flex: auto;
      flex: auto;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      -webkit-box-direction: normal;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 10px 0 11px;
      text-align: right; }
      .gift-card-footer-value-container.truncate {
        overflow: hidden; }
    .gift-card-footer-value {
      font-size: 16.3px;
      line-height: 24px;
      font-weight: 700;
      color: #152436; }
      .truncate .gift-card-footer-value {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
    .gift-card-footer-subvalue {
      font-size: 13px;
      line-height: 20px;
      font-weight: 600;
      color: rgba(21, 36, 54, 0.48);
      margin: -1px 0 -1px; }
      .gift-card-footer-subvalue .badge {
        background: #FBBC05;
        color: #152436;
        font-size: 11px;
        line-height: 11px;
        padding: 3px 4px 3px 5px;
        border-radius: 3px;
        margin-top: -2px; }
        .gift-card-footer-subvalue .badge .icon-tipcoin:before {
          font-size: 8px; }

/* WARENKORB ICON */
.basket {
  position: fixed;
  z-index: 4;
  right: 16px;
  bottom: 72px;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: #FBBC05;
  box-shadow: 0 8px 16px 0 rgba(21, 36, 54, 0.16);
  cursor: pointer; }
  @media screen and (min-width: 576px) {
    .basket {
      position: absolute;
      top: -72px;
      box-shadow: 0 0 16px 0 rgba(21, 36, 54, 0.24); } }
  .basket-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16.3px;
    font-weight: 700;
    color: #152436;
    margin-top: 1px; }

/* THANK YOU */
.thankyou {
  @inlcude flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  padding: 48px 0;
  text-align: center; }
  .thankyou-icon {
    margin-bottom: 17px; }
    @media screen and (min-width: 576px) {
      .thankyou-icon {
        margin-bottom: 24px; } }
    .thankyou-icon img {
      width: 64px;
      height: 64px; }
      @media screen and (min-width: 576px) {
        .thankyou-icon img {
          width: inherit;
          height: inherit; } }
  .thankyou-label {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: #152436;
    margin-bottom: 18px; }
    @media screen and (min-width: 576px) {
      .thankyou-label {
        font-size: 32px;
        line-height: 40px; } }
  .thankyou-sublabel {
    font-size: 16.3px;
    font-weight: 600;
    color: rgba(21, 36, 54, 0.48);
    margin-bottom: 41px; }
    @media screen and (min-width: 576px) {
      .thankyou-sublabel {
        font-size: 19.1px; } }
  .thankyou .button {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex; }

/* REGELN/INFOS */
.regeln-infos .accordion {
  cursor: pointer; }

.punktesystem {
  padding-bottom: 0; }
  .punktesystem h1, .punktesystem h2 {
    color: #152436; }
  .punktesystem-header {
    padding: 64px 0; }
    @media screen and (min-width: 576px) {
      .punktesystem-header {
        padding: 94px 0 128px; } }
    .punktesystem-header .button {
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -moz-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex; }
      @media screen and (min-width: 576px) {
        .punktesystem-header .button {
          width: auto; } }
    .punktesystem-header p {
      max-width: 640px; }
  .punktesystem-feature {
    background: rgba(21, 36, 54, 0.02);
    box-shadow: 0 -1px 0 0 rgba(21, 36, 54, 0.08);
    padding: 80px 0; }
    @media screen and (min-width: 576px) {
      .punktesystem-feature {
        padding: 96px 0 96px; } }
    .punktesystem-feature img {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      max-width: 100%;
      margin: 0 -16px 32px; }
      @media screen and (min-width: 576px) {
        .punktesystem-feature img {
          margin: 0 auto; } }
    .punktesystem-feature p {
      margin-bottom: 0; }
    .punktesystem-feature a {
      color: #152436; }
  .punktesystem .link-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 25px 0 30px; }
    @media screen and (min-width: 576px) {
      .punktesystem .link-row {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; } }
    .punktesystem .link-row a {
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -moz-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      font-size: 19px;
      line-height: 28px;
      font-weight: 700;
      color: #152436;
      border-bottom: 2px dotted rgba(21, 36, 54, 0.24);
      transition: .2s;
      margin-bottom: 24px; }
      @media screen and (min-width: 576px) {
        .punktesystem .link-row a {
          margin-bottom: 0;
          margin-right: 24px; } }
      .punktesystem .link-row a:last-child {
        margin: 0; }
      .punktesystem .link-row a:hover {
        text-decoration: none;
        border-bottom: 2px dotted #152436; }
      .punktesystem .link-row a img {
        margin-left: auto; }
        @media screen and (min-width: 576px) {
          .punktesystem .link-row a img {
            display: none; } }

.punkterechner {
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 16px;
  overflow: hidden; }
  @media screen and (min-width: 576px) {
    .punkterechner {
      margin-top: 24px; } }
  .punkterechner-header {
    padding: 48px 16px 41px;
    box-shadow: 0 1px 0 0 rgba(21, 36, 54, 0.08); }
    @media screen and (min-width: 576px) {
      .punkterechner-header {
        padding: 64px 16px 57px; } }
    .punkterechner-header-ergebnisse {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      -webkit-justify-content: space-around;
      -moz-justify-content: space-around;
      justify-content: space-around;
      max-width: 400px;
      margin: 0px auto 36px; }
      @media screen and (min-width: 576px) {
        .punkterechner-header-ergebnisse {
          margin: 0px auto 60px; } }
      .punkterechner-header-ergebnisse-item-content {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex; }
        .punkterechner-header-ergebnisse-item-content input[type=number] {
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          width: 40px;
          height: 40px;
          padding: 0;
          margin: 0;
          text-align: center;
          font-family: 'Dosis';
          font-size: 32px;
          line-height: 40px;
          font-weight: 700;
          color: #152436;
          background: #FFFFFF;
          border: 0;
          box-shadow: inset 0 0 0 2px rgba(21, 36, 54, 0.08);
          border-radius: 8px;
          -moz-appearance: textfield; }
          .punkterechner-header-ergebnisse-item-content input[type=number]:first-of-type {
            margin-right: 6px; }
          .punkterechner-header-ergebnisse-item-content input[type=number]:last-of-type {
            margin-left: 6px; }
          .punkterechner-header-ergebnisse-item-content input[type=number]:focus {
            outline: none;
            box-shadow: 0 0 0 2px #152436; }
        .punkterechner-header-ergebnisse-item-content input::-webkit-outer-spin-button,
        .punkterechner-header-ergebnisse-item-content input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0; }
        .punkterechner-header-ergebnisse-item-content .divider {
          font-size: 32px;
          font-weight: 700;
          color: #152436;
          display: inline-block;
          transform: translateY(-8px); }
      .punkterechner-header-ergebnisse-item-label {
        width: 100%;
        text-align: center;
        font-size: 16.3px;
        font-weight: 600;
        color: rgba(21, 36, 54, 0.48);
        margin-top: -2px; }
    .punkterechner-header-quoten {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      max-width: 400px;
      margin: 0px auto; }
      .punkterechner-header-quoten-divider {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        margin-bottom: 18px; }
        @media screen and (min-width: 576px) {
          .punkterechner-header-quoten-divider {
            margin-bottom: 26px; } }
        .punkterechner-header-quoten-divider-stroke {
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          -moz-box-flex: 1;
          -moz-flex: 1;
          -ms-flex: 1;
          flex: 1;
          height: 1px;
          background: rgba(21, 36, 54, 0.08); }
        .punkterechner-header-quoten-divider-label {
          font-size: 16.3px;
          font-weight: 600;
          color: rgba(21, 36, 54, 0.48);
          margin: 0 8px; }
      .punkterechner-header-quoten-inputs {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between; }
        .punkterechner-header-quoten-inputs-item {
          max-width: 96px;
          text-align: center;
          font-size: 16.3px;
          font-weight: 600;
          color: rgba(21, 36, 54, 0.48); }
          .punkterechner-header-quoten-inputs-item:nth-child(2) {
            margin: 0px 8px; }
          .punkterechner-header-quoten-inputs-item input[type=number] {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            height: 40px;
            padding: 0;
            margin: 0 0 4px 0;
            text-align: center;
            font-family: 'Dosis';
            font-size: 17px;
            line-height: 24px;
            font-weight: 700;
            color: #152436;
            background: #FFFFFF;
            border: 0;
            box-shadow: inset 0 0 0 2px rgba(21, 36, 54, 0.08);
            border-radius: 8px;
            -moz-appearance: textfield; }
            .punkterechner-header-quoten-inputs-item input[type=number]:focus {
              outline: none;
              box-shadow: 0 0 0 2px #152436; }
          .punkterechner-header-quoten-inputs-item input::-webkit-outer-spin-button,
          .punkterechner-header-quoten-inputs-item input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0; }
  .punkterechner-content {
    padding: 8px 16px; }
    @media screen and (min-width: 576px) {
      .punkterechner-content {
        padding: 8px 24px; } }
    .punkterechner-content .list-item {
      cursor: pointer; }
      .punkterechner-content .list-item img {
        margin-left: 4px;
        transform: translateY(-2px); }
  .punkterechner-footer {
    padding: 0 16px; }
    @media screen and (min-width: 576px) {
      .punkterechner-footer {
        padding: 0 24px; } }
    .punkterechner-footer .list-item {
      margin: 0 -24px;
      padding: 0 24px; }

.searchbar {
  font-size: 19.1px;
  font-weight: 600;
  padding: 18px 16px 18px 64px;
  border-radius: 16px;
  margin: 16px 0;
  background-image: url(../_assets/ic_search_lupe.svg);
  background-repeat: no-repeat;
  border: 2px solid rgba(21, 36, 54, 0.08);
  transition: .2s; }
  @media screen and (min-width: 576px) {
    .searchbar {
      margin: 48px 0 48px 0; } }
  .searchbar:focus {
    border: 2px solid #152436;
    background-image: url(../_assets/ic_search_lupe-active.svg); }

/* LOGIN */
.login .list {
  padding: 16px 16px 0;
  margin: 16px 16px 28px;
  max-width: 640px; }
  @media screen and (min-width: 576px) {
    .login .list {
      padding: 40px 40px 24px;
      margin: 32px 0 28px 0; } }
  .login .list .row {
    margin-top: 4px; }
    @media screen and (min-width: 576px) {
      .login .list .row {
        margin-top: 20px; } }
.login .checkboxen {
  margin: 16px 0; }
  .login .checkboxen a {
    color: #152436; }
.login p {
  font-size: 19.1px;
  font-weight: 700; }
.login h1 {
  color: #152436; }
.login .password-forgot {
  color: #152436;
  opacity: .48; }
  .login .password-forgot:hover {
    opacity: 1; }
.login .content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  background: #FBBC05;
  min-height: -webkit-fill-available; }
  @media screen and (min-width: 768px) {
    .login .content {
      min-height: calc(100vh - 100px); } }
.login input {
  font-weight: 600;
  padding: 18px;
  border: 2px solid rgba(21, 36, 54, 0.08);
  border-radius: 8px;
  text-align: center; }
  @media screen and (min-width: 576px) {
    .login input {
      text-align: center; } }
  .login input:focus {
    border: 2px solid #152436; }
  .login input.has-error {
    border: 2px solid #E23054; }
.login__invite__image {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0px auto;
  border: 3px solid #152436;
  margin-top: 16px; }
  .login__invite__image img {
    width: 100%;
    height: 100%;
    object-fit: cover; }
.login__invite h1 {
  margin-top: 21px;
  margin-bottom: 9px; }
.login__invite p {
  font-size: 16.3px;
  line-height: 24px;
  color: rgba(21, 36, 54, 0.64); }
  .login__invite p .highlight {
    color: #152436;
    position: relative;
    margin: 0; }
    @media screen and (min-width: 768px) {
      .login__invite p .highlight {
        margin: 0 6px; } }
    .login__invite p .highlight:before {
      visibility: hidden;
      content: '';
      position: absolute;
      left: -6px;
      top: 0;
      width: calc(100% + 12px);
      height: calc(100% + 2px);
      background: rgba(21, 36, 54, 0.08);
      border-radius: 4px; }
      @media screen and (min-width: 768px) {
        .login__invite p .highlight:before {
          visibility: visible; } }
  @media screen and (min-width: 768px) {
    .login__invite p {
      font-size: 19.3px;
      line-height: 28px; } }
.login__invite .button {
  margin-top: 9px; }
  @media screen and (min-width: 576px) {
    .login__invite .button {
      width: auto;
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -moz-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex; } }
.login__invite__divider {
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .48;
  max-width: 464px;
  margin: 18px auto 2px; }
  .login__invite__divider:after {
    content: '';
    position: absolute;
    width: calc(50% - 24px);
    height: 2px;
    right: 0;
    top: calc(50% - 1px);
    background: #152436;
    opacity: .64; }
  .login__invite__divider:before {
    content: '';
    position: absolute;
    width: calc(50% - 24px);
    height: 2px;
    left: 0;
    top: calc(50% - 1px);
    background: #152436;
    opacity: .64; }

/* PREMIUM */
.premium {
  position: relative;
  margin-top: -24px; }
  @media screen and (min-width: 576px) {
    .premium {
      margin-bottom: 160px; } }
  .premium:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background: #FBBC05; }
    @media screen and (min-width: 576px) {
      .premium:before {
        height: 50%; } }
  .premium-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    padding: 35px 16px 0;
    background: #FFFFFF;
    box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
    border-radius: 16px;
    transition: .4s;
    margin-bottom: 24px; }
    @media screen and (min-width: 768px) {
      .premium-card {
        margin-bottom: 0; } }
    .premium-card:hover {
      box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.08), inset 0 0 0 1px rgba(21, 36, 54, 0.08); }
    .premium-card-label {
      font-size: 32px;
      font-weight: 700;
      color: #152436;
      text-align: center; }
    .premium-card-sublabel {
      font-size: 19.3px;
      font-weight: 600;
      color: rgba(21, 36, 54, 0.48);
      text-align: center;
      margin: -3px 0 25px; }
    .premium-card .button {
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -moz-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      width: auto;
      margin-top: 32px; }
    .premium-card .light {
      color: rgba(21, 36, 54, 0.24); }
    .premium-card--standard  {
      background: #EDEEEF; }
  .premium-item {
    margin: 64px 0;
    flex-direction: column-reverse; }
    .premium-item img {
      margin-bottom: 32px; }
      @media screen and (min-width: 576px) {
        .premium-item img {
          margin-bottom: 0; } }
    @media screen and (min-width: 576px) {
      .premium-item {
        margin: 160px 0; } }

/* WIZARD */
#modalWizard {
  /*.modal-content {
  	height: calc(100vh - 64px);
  }*/ }
  #modalWizard .modal-header .ueberspringen {
    margin-left: auto;
    font-weight: 700;
    text-decoration: underline;
    color: rgba(21, 36, 54, 0.48);
    margin-top: 4px;
    margin-right: 2px;
    cursor: pointer; }

.carousel-wizard, .carousel-quiz {
  margin: 0 -16px; }
  @media screen and (min-width: 576px) {
    .carousel-wizard, .carousel-quiz {
      margin: 0 -24px; } }
  .carousel-wizard .slick-slide:focus, .carousel-quiz .slick-slide:focus {
    outline: none; }
  .carousel-wizard .slick-track, .carousel-quiz .slick-track {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
  .carousel-wizard .carousel-cell, .carousel-quiz .carousel-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto;
    margin: 0 16px; }
    @media screen and (min-width: 576px) {
      .carousel-wizard .carousel-cell, .carousel-quiz .carousel-cell {
        margin: 0 24px; } }
  .carousel-wizard-dots ul, .carousel-quiz-dots ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin-top: 8px;
    margin-bottom: 24px; }
    .carousel-wizard-dots ul li, .carousel-quiz-dots ul li {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      margin: 0 2px;
      background: rgba(21, 36, 54, 0.48);
      cursor: pointer; }
    .carousel-wizard-dots ul .slick-active, .carousel-quiz-dots ul .slick-active {
      background: #152436; }
    .carousel-wizard-dots ul button, .carousel-quiz-dots ul button {
      display: none; }
  .carousel-wizard-icon, .carousel-quiz-icon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center; }
  .carousel-wizard-label, .carousel-quiz-label {
    font-size: 21.9px;
    font-weight: 700;
    color: #152436;
    text-align: center;
    margin-bottom: 18px; }
  .carousel-wizard-text, .carousel-quiz-text {
    font-size: 16.3px;
    font-weight: 600;
    color: rgba(21, 36, 54, 0.48);
    text-align: center;
    margin-bottom: 35px; }

.news {
  position: relative;
  max-width: 768px;
  margin: 0px auto; }
  .news .content {
    background: #000; }
  .news-image {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03);
    max-height: 480px;
    margin: 24px 0 29px; }
    .news-image img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .news-timedate {
    font-size: 14px;
    font-weight: 700;
    color: rgba(21, 36, 54, 0.48);
    margin-bottom: 8px; }
  .news h1 {
    margin-bottom: 24px; }
  .news-introtext {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 20px;
    font-weight: 700; }

.quiz {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: auto; }
  .quiz-question-meta {
    font-size: 16.3px;
    font-weight: 600;
    line-height: 24px;
    color: rgba(21, 36, 54, 0.48);
    text-align: center;
    margin-bottom: 11px; }
  .quiz-question-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: #152436;
    text-align: center; }
  .quiz-answer {
    margin: auto 0; }
    .quiz-answer-item {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      background: #FFFFFF;
      box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
      border-radius: 8px;
      padding: 14px 12px;
      margin-bottom: 8px; }
      .quiz-answer-item--selected {
        box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.08), inset 0 0 0 2px #152436; }
      .quiz-answer-item-icon {
        margin-right: 12px; }
        .quiz-answer-item-icon span {
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          justify-content: center;
          background: rgba(21, 36, 54, 0.16);
          color: #152436;
          font-size: 13.6px;
          font-weight: 600;
          width: 24px;
          height: 24px;
          border-radius: 12px; }
      .quiz-answer-item-label {
        font-size: 16.3px;
        font-weight: 600;
        color: #152436; }

.feed-input {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 8px;
  padding: 2px 4px 2px 14px;
  overflow: hidden;
  flex-wrap: wrap; }
  .feed-input-avatar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 24px;
    -moz-box-flex: 0;
    -moz-flex: 0 0 24px;
    -ms-flex: 0 0 24px;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    margin-right: 8px;
    overflow: hidden;
    margin-top: 12px; }
    .feed-input-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .feed-input textarea {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 24px;
    -moz-box-flex: 1;
    -moz-flex: 1 1 24px;
    -ms-flex: 1 1 24px;
    flex: 1 1 24px;
    background: none;
    font-size: 16.3px;
    font-weight: 600;
    color: #152436;
    border: 0;
    padding: 12px 0;
    margin: 0;
    min-height: 0; }
    .feed-input textarea:not(:placeholder-shown) ~ .feed-input-button {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; }
  .feed-input-upload {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    width: 48px;
    height: 48px;
    padding: 12px;
    opacity: .48;
    transition: .2s ease-in-out; }
    .feed-input-upload:hover {
      opacity: .64;
      transition: .2s ease-in-out;
      cursor: pointer; }
  .feed-input-image {
    width: 100%;
    padding: 5px 0 16px 32px; }
    .feed-input-image-item {
      position: relative;
      width: 48px;
      height: 48px; }
      .feed-input-image-item img {
        border-radius: 4px;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .feed-input-image-item:before {
        content: '';
        position: absolute;
        top: -6px;
        right: -6px;
        width: 16px;
        height: 16px;
        border-radius: 8px;
        background: url("../_assets/ic_feed-upload-delete.svg");
        box-shadow: 0 0 0 2px #FFFFFF; }
  .feed-input-button {
    display: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    width: calc(100% + 18px);
    font-size: 16.3px;
    font-weight: 700;
    color: #152436;
    background: #FBBC05;
    margin: 0 -4px -2px -14px;
    padding: 10px 0;
    box-shadow: inset 0 1px 0 0 rgba(21, 36, 54, 0.08); }
.feed hr {
  border-top: 1px solid rgba(21, 36, 54, 0.08);
  margin: 16px 0; }
.feed-post {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 0 8px 16px 0 rgba(11, 19, 43, 0.03), inset 0 0 0 1px rgba(21, 36, 54, 0.08);
  border-radius: 8px;
  padding: 2px 16px 8px 16px;
  margin-bottom: 16px;
  overflow: hidden; }
  .feed-post-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 4px 0; }
    .feed-post-header-avatar {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-shrink: 0;
      -moz-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 12px;
      margin-right: 8px;
      margin-left: -2px;
      overflow: hidden; }
      .feed-post-header-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .feed-post-header-content {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-direction: normal;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1; }
      .feed-post-header-content-name {
        font-size: 13.6px;
        line-height: 20px;
        color: #152436;
        font-weight: 600; }
      .feed-post-header-content-meta {
        font-size: 11px;
        line-height: 14px;
        color: rgba(21, 36, 54, 0.48);
        font-weight: 600;
        margin-top: -2px; }
    .feed-post-header-actionlist {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      margin-right: -8px; }
      .feed-post-header-actionlist-item {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        position: relative;
        padding: 12px 8px; }
        .feed-post-header-actionlist-item:not(:last-child):before {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          width: 1px;
          height: 20px;
          transform: translateY(-50%);
          background: rgba(21, 36, 54, 0.12); }
        .feed-post-header-actionlist-item img {
          opacity: .48;
          transition: .2s ease-in-out; }
        .feed-post-header-actionlist-item span {
          font-size: 13.6px;
          font-weight: 700;
          color: rgba(21, 36, 54, 0.48);
          transition: .2s ease-in-out;
          margin-right: 2px; }
        .feed-post-header-actionlist-item.active img {
          opacity: 1; }
        .feed-post-header-actionlist-item.active span {
          color: #FBBC05; }
        .feed-post-header-actionlist-item:hover {
          cursor: pointer; }
          .feed-post-header-actionlist-item:hover img {
            opacity: .64;
            transition: .2s ease-in-out; }
          .feed-post-header-actionlist-item:hover span {
            color: rgba(21, 36, 54, 0.64);
            transition: .2s ease-in-out; }
          .feed-post-header-actionlist-item:hover.active img {
            opacity: 1; }
          .feed-post-header-actionlist-item:hover.active span {
            color: #FBBC05; }
  .feed-post-message {
    padding-bottom: 16px; }
    .feed-post-message:nth-last-child(2) {
      box-shadow: inset 0 -1px 0 0 rgba(21, 36, 54, 0.08); }
    .feed-post-commentlist .feed-post-message {
      padding-bottom: 8px; }
  .feed-post-image {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px; }
    .feed-post-image img {
      max-width: 100%;
      height: auto; }
  .feed-post-text {
    font-size: 16.3px;
    line-height: 24px;
    font-weight: 600;
    color: #152436;
    padding: 2px 0; }
    .feed-post-text a {
      color: #FBBC05;
      text-decoration: underline; }
  .feed-post-commentlist-item {
    background: rgba(21, 36, 54, 0.04);
    border-radius: 8px;
    padding: 0 16px;
    margin-bottom: 8px; }
  .feed-post-commentlist-button {
    font-size: 13.6px;
    font-weight: 600;
    color: #152436;
    padding: 2px 0 11px;
    box-shadow: inset 0 -1px 0 0 rgba(21, 36, 54, 0.08); }
    .feed-post-commentlist-button:hover {
      cursor: pointer;
      text-decoration: underline; }
  .feed-post-comment {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative; }
    .feed-post-comment-avatar {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-shrink: 0;
      -moz-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      position: absolute;
      left: 0;
      top: 10px;
      width: 24px;
      height: 24px;
      border-radius: 12px;
      margin-right: 8px;
      overflow: hidden;
      opacity: 0;
      transition: .2s ease-in-out; }
      .feed-post-comment-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(0);
        transform-origin: 50% 50%;
        transition: .2s ease-in-out; }
    .feed-post-comment textarea {
      background: none;
      font-size: 16.3px;
      font-weight: 600;
      color: #152436;
      border: 0;
      padding: 10px 0;
      margin: 0;
      min-height: 0; }
      .feed-post-comment textarea:not(:placeholder-shown) {
        padding-left: 32px;
        transition: .2s ease-in-out; }
        .feed-post-comment textarea:not(:placeholder-shown) + .feed-post-comment-avatar {
          opacity: 1;
          transition: .2s ease-in-out; }
          .feed-post-comment textarea:not(:placeholder-shown) + .feed-post-comment-avatar img {
            transform: scale(1); }

/*# sourceMappingURL=tipplay-styles.css.map */