@charset "UTF-8";
/* ---------------------------- */
/* --- vendor-prefix mixins --- */
/* ---------------------------- */
/* --------------- */
/* --- helpers --- */
/* --------------- */
/* === flip animation ===
   This effect needs the following elements:
   * flip-container: the container the mixin is applied to. Element that contains all the other elements; on this element the perspective
     property is set and the actual animation is triggered (by applying another class, on hover or however ... )
   * flipper: element that is flipped; this contains an element that serves as the front of the flipped thingy.
   * front: element that serves as the front of the flipped thingy
   * back: element that serves as the back of the flipped thingy. In the current implementation this is realized by an after-pseudoelement on
     the flipper-element. This could also be a separate element

   This mixin up to now is not too generic to keep it simple right now and mainly serves to make the CSS where it is called less cluttered.
   Can be made more generic as soon as needed.
*/
/* === breakpoints === */
.clsy-c-loading-indicator, .clsy-c-btn.clsy-c-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clsy-c-loading-indicator::after, .clsy-c-btn.clsy-c-loading-indicator::after {
  content: " ";
  box-sizing: border-box;
  display: block;
  width: var(--loading-indicator-width);
  height: var(--loading-indicator-width);
  min-width: auto;
  min-height: auto;
  margin: 1px;
  background-color: transparent;
  border-radius: 50%;
  border: var(--loading-indicator-line-thickness) solid;
  border-color: var(--emphasized-color) transparent var(--emphasized-color) transparent;
  animation: rotate-360-deg 1.2s linear infinite;
}

.clsy-c-message {
  --animation-duration-unitless: 200;
  --animation-duration: calc(var(--animation-duration-unitless) * 1ms);
  --mask-icon-width: calc(24px + .8em);
  --mask-icon-height: 100%;
  --mask-icon-color: var(--icon-color-messages);
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--mask-icon-width);
  line-height: var(--smaller-line-height);
  background-color: var(--cardlike-item-bg-color);
  border-style: solid;
  border-color: var(--message-class-color) !important;
  box-shadow: 0 -1px 0 0 var(--contentsection-border-color), 0 3px 0 0 var(--contentsection-border-color);
  margin: .8em auto;
  max-width: 80ch;
  border-width: 0 5px 0 var(--mask-icon-width);
  transition: opacity var(--animation-duration) ease-out, transform var(--animation-duration) var(--bouncy-transition-function);
  transform: scaleY(1);
  opacity: 1;
}

.clsy-c-message::before {
  content: "";
  flex: none;
  display: block;
  width: var(--mask-icon-width);
  height: var(--mask-icon-height);
  transform: var(--mask-icon-transform);
  opacity: var(--mask-icon-opacity);
  background-color: var(--mask-icon-color);
  -webkit-mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  -webkit-mask-size: var(--mask-icon-size);
  mask-size: var(--mask-icon-size);
  position: absolute;
  top: 0;
  left: calc(-1 * var(--mask-icon-width));
  bottom: 0;
}

.clsy-c-message--info {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/belck9g/image/pwa/icons/icon-message-info.svg);
  --message-class-color: var(--message-color-info);
}

.clsy-c-message--warning {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/86ckdgje/image/pwa/icons/icon-message-warning.svg);
  --message-class-color: var(--message-color-warning);
}

.clsy-c-message--error {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/ihhdd7kg/image/pwa/icons/icon-message-error.svg);
  --message-class-color: var(--message-color-error);
  --mask-icon-color: var(--icon-color-messages--error);
}

.clsy-c-message--success {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/l9gccbbe/image/pwa/icons/icon-message-success.svg);
  --message-class-color: var(--message-color-success);
}

.clsy-c-message:has(.clsy-c-message__close) {
  display: flex;
  gap: var(--button-gutter);
  align-items: flex-start;
}

.clsy-c-message--hidden {
  opacity: 0;
  transform: scaleY(0);
}

.clsy-c-message__close {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/ifjbbllb/image/pwa/icons/icon-close.svg);
  --mask-icon-color: var(--standard-link-color);
  margin-left: auto;
}

.clsy-c-message > div:first-child {
  padding: var(--standard-content-padding-vertical) var(--fixed-content-padding-horizontal);
}

.clsy-c-message ul {
  margin: .4em 0 0 .4em;
  padding: 0;
  list-style-type: none;
}

.clsy-c-message ul > li {
  position: relative;
  margin: 0;
  padding: .2em 0 .2em .6em;
}

.clsy-c-message ul > li::before {
  content: "›";
  position: absolute;
  top: .18em;
  left: 0;
  font-weight: bold;
  color: var(--less-important-text-color);
}

/* === unread items indicator === */
.clsy-count-badge {
  --badge-diameter: 1.9em;
  display: inline-block;
  min-width: var(--badge-diameter);
  height: var(--badge-diameter);
  line-height: 1.7em;
  color: var(--emphasized-background-text-color);
  font-size: var(--fontsize-small);
  font-weight: bold;
  text-align: center;
  background-color: var(--emphasized-color);
  border: 2px solid var(--standard-bg-color);
  border-radius: calc(var(--badge-diameter) / 2);
  transform: scale(1);
  transition: transform 300ms var(--very-bouncy-transition-function), visibility 300ms;
}

.clsy-count-badge--hidden {
  visibility: hidden;
  transform: scale(0);
}

.clsy-count-badge--nav-trigger {
  position: absolute;
  top: 2px;
  right: 2px;
}

/*!
 *  This document contains trade secret data which is the property of
 *  markt.de GmbH & Co KG. Information contained herein may not be used,
 *  copied or disclosed in whole or part except as permitted by written
 *  agreement from markt.de GmbH & Co KG.
 *
 *  Copyright (c) 2023 markt.de GmbH & Co KG / Munich / Germany
 */
.clsy-premium-cancel-subscription__submit-button {
  margin: var(--standard-top-margin) 0 var(--standard-bottom-margin);
}

.clsy-premium-cancel-subscription .clsy-c-form-selectiongroup--multicol ul {
  display: flex;
  align-items: baseline;
}

.clsy-premium-cancel-subscription__intro, .clsy-premium-cancel-subscription__cancellationType {
  margin-bottom: 0;
}

.clsy-premium-cancel-subscription__cancellationType:has(input#clsy-premium-cancel-subscription-cancellationType-ordinary:checked) {
  margin-bottom: var(--formfield-wrapper-bottom-margin);
}

.clsy-premium-cancel-subscription__cancellationType:has(input#clsy-premium-cancel-subscription-cancellationType-ordinary:checked) ~ .clsy-premium-cancel-subscription__reason {
  display: none;
}

.clsy-premium-cancel-subscription__cancellationType:has(input#clsy-premium-cancel-subscription-cancellationType-ordinary:checked) + .clsy-c-inlinemessage {
  display: none;
}