.form-custom .form-control {
  border-color: #eee;
  padding-top: 2.2rem !important;
  background-color: var(--form-input-type-text-bg-color);
  border-radius: 0.62rem;
  color: var(--form-input-type-text-color);
  font-size: 0.9rem;
}
.form-custom strong {
  font-weight: 500;
}
.form-custom .form-select {
  border-color: #eee;
  background-color: var(--form-input-type-text-bg-color);
  color: var(--form-input-type-text-color);
  font-size: 0.9rem;
}
.form-custom .form-floating {
  margin-bottom: 1rem;
}
.form-custom label:not(.form-check-label) {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  opacity: 0.65;
}
.form-custom .form-text {
  color: var(--form-input-type-text-color);
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
.form-custom label[for] {
  color: var(--form-input-type-text-color);
}
.form-custom .form-radio-inline {
  margin-left: 0.8rem;
  margin-right: 0.8rem;
  margin-bottom: 1rem;
}
.form-custom .form-radio-inline label {
  padding-left: 0;
  padding-right: 0;
}
.form-custom .form-radio-inline label.main {
  display: block;
  opacity: 0.65;
  font-size: 0.85rem;
  padding-left: 0;
}
.form-custom .form-radio-inline .form-text {
  padding-left: 1.5rem;
}
.form-custom .form-radio-inline .invalid-feedback {
  padding-left: 1.5rem;
}
.form-custom .form-spacer {
  height: 2rem;
}
.form-custom .form-check-input:checked {
  background-color: var(--form-checkbox-radio-checked-color);
  border-color: var(--form-checkbox-radio-checked-color);
}
.form-custom .invalid-feedback {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  display: block;
  color: var(--color-danger);
}
.form-custom .form-box {
  background-color: #fff;
  padding-top: var(--spacing-content);
  padding-bottom: 0.5rem;
  margin-bottom: var(--spacing-content);
}
.form-custom .form-box .form-headline {
  font-size: 1rem;
  margin-bottom: 1rem;
}
.form-custom .form-box .form-headline a {
  font-weight: normal;
  font-size: 1rem;
}
.form-custom .form-box .form-description {
  font-size: 1rem;
  margin-left: 0;
  margin-right: 0.5rem;
}
.form-custom .was-validated .form-check-input:valid ~ .form-check-label,
.form-custom .form-check-input.is-valid ~ .form-check-label {
  color: var(--form-input-type-text-color);
}
.form-action {
  text-align: center;
}
.form-action small.not-important {
  color: #888;
  display: block;
}
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: var(--form-input-type-text-color);
}
textarea {
  resize: vertical;
  min-height: 33px;
}
textarea.auto-grow {
  overflow: hidden;
}
/**
 * FIX for textarea and content, that overlaps headline when multiple lines are entered
 * https://stackoverflow.com/questions/66863242/bootstrap-5-floating-label-for-a-textarea-overlaps-with-input-on-scroll/67334114#67334114
 */
/* NOT REQUIRED ANY MORE SINCE TEXTAREA GROWS ???
.form-floating:before {
  content: '';
  position: absolute;
  top: 1px; // border-width (default by BS)
  left: 1px; // border-width (default by BS)
  width: calc(100% - 1.1rem); // reduce width to not overlay scrollbar
  //border: 1px solid #ff0000;
  height: 1.7rem;
  border-radius: 4px; // (default by BS)
  background-color: var(--form-input-type-text-bg-color);
}

.form-floating textarea.form-control {
  padding-top: 2rem; // height of pseudo element
  min-height: 5rem; // not relevant
}

 */
/*
*
* ==========================================
* PROGRESS BAR CIRCLE - helper classes
* ==========================================
*
*/
.progress {
  width: 100%;
  height: 100%;
  background: none;
  position: relative;
  /**
   * Global styles for progress bar (left AND right)
   */
  /**
   * Specific styles for left progress bar
   */
  /**
   * Specific styles for right progress bar
   */
}
.progress::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-style: solid;
  border-color: var(--progress-bar-bg-color);
  border-width: var(--progress-bar-border-width);
  position: absolute;
  top: 0;
  left: 0;
}
.progress .progress-label {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--progress-bar-color);
}
.progress .progress-left,
.progress .progress-right {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left .progress-bar,
.progress .progress-right .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-style: solid;
  border-color: var(--progress-bar-bg-color-highlight);
  border-width: var(--progress-bar-border-width);
  position: absolute;
  top: 0;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
#toast-wrapper {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 11;
  padding: 1rem;
}
#toast-wrapper .toast {
  margin-top: 0.5rem;
  background-color: #ffffff77;
  backdrop-filter: blur(50px) contrast(100%);
  -webkit-backdrop-filter: blur(50px) contrast(100%);
  background-blend-mode: overlay;
}
#toast-wrapper .toast .toast-body {
  background-color: transparent;
}
#toast-wrapper .toast .toast-body .toast-icon {
  padding-right: 0;
  text-align: center;
}
#toast-wrapper .toast .toast-body .toast-icon i {
  font-size: 1.5rem;
  line-height: 2.4rem;
}
#toast-wrapper .toast .toast-body .toast-content {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: left;
}
#toast-wrapper .toast .toast-body .toast-close {
  text-align: right;
  padding-left: 0;
}
@media (min-width: 768px) {
  /* center center */
  #toast-wrapper {
    left: 50%!important;
    top: 50%!important;
    transform: translate(-50%, -50%) !important;
  }
  /* bottom right
  #toast-wrapper {
    right: 0;
    left: auto;
    bottom: 0;
    top: auto;
    transform: none;
  }
   */
}
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: var(--font-default);
  font-weight: var(--font-default-weight-regular);
}
.text-justify {
  text-align: justify;
}
.color-vimeo-player {
  color: var(--vimeo-player-color);
}
/** Color classes for UI and HTML to use for EditorJs **/
.color-primary {
  color: var(--color-primary);
}
.color-secondary {
  color: var(--color-secondary);
}
.color-tertiary {
  color: var(--color-tertiary);
}
.color-quaternary {
  color: var(--color-quaternary);
}
.color-black {
  color: var(--color-black);
}
.color-white {
  color: var(--color-white);
}
.bg-color-primary {
  background-color: var(--color-primary);
}
.bg-color-secondary {
  background-color: var(--color-secondary);
}
.bg-color-tertiary {
  background-color: var(--color-tertiary);
}
.bg-color-quaternary {
  background-color: var(--color-quaternary);
}
.bg-color-black {
  background-color: var(--colo-black);
}
.bg-color-white {
  background-color: var(--colo-white);
}
.border-radius {
  border-radius: var(--box-border-radius);
}
/**
 Bootstrap overrides
 */
.no-bottom-space {
  margin-bottom: 0!important;
}
h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  color: var(--h1-color);
  font-weight: var(--h1-font-weight);
  margin-bottom: 1rem;
}
h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  color: var(--h2-color);
  font-weight: var(--h2-font-weight);
  margin-bottom: 1rem;
}
h3 {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  color: var(--h3-color);
  font-weight: var(--h3-font-weight);
  margin-bottom: 1rem;
}
h4 {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  color: var(--h4-color);
  font-weight: var(--h4-font-weight);
  margin-bottom: 1rem;
}
h5 {
  font-family: var(--h5-font-family);
  font-size: var(--h5-font-size);
  color: var(--h5-color);
  font-weight: var(--h5-font-weight);
  margin-bottom: 1rem;
}
h6 {
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  color: var(--h6-color);
  font-weight: var(--h6-font-weight);
  margin-bottom: 1rem;
}
a {
  color: var(--a-color);
  text-decoration: var(--a-text-decoration);
  -webkit-transition: all 0.2s ease !important;
  -moz-transition: all 0.2s ease !important;
  -o-transition: all 0.2s ease !important;
  -ms-transition: all 0.2s ease !important;
  transition: all 0.2s ease !important;
}
a:hover,
a:active,
a:focus {
  color: var(--a-color-active);
  text-decoration: var(--a-text-decoration-active);
}
img.max-width-hack {
  width: 100%;
  max-width: 200px;
}
div.content-text ol,
div.content-text ul {
  padding-left: 1rem;
}
div.content-text ol li,
div.content-text ul li {
  padding-bottom: 0.5rem;
}
.external-payment-product-name {
  display: block;
  margin: 1rem 0 1.2rem 0;
  text-align: center;
}
span.link-center {
  display: block;
  text-align: center;
}
.content-img-container {
  margin-bottom: 1rem;
}
.content-img-container img {
  border-radius: var(--box-border-radius);
  max-width: 100%;
}
.content-img-container.img-full-width img {
  width: 100%;
}
.content-img-container.img-center {
  text-align: center;
}
.content-img-container .content-img-caption {
  font-size: var(--content-image-caption-font-size);
  padding-top: 0.3rem;
}
.btn {
  padding: var(--btn-space-vertical) var(--btn-space-horizontal);
  border-radius: var(--btn-border-radius);
  border: 0;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
}
.btn:hover,
.btn:active,
.btn:focus {
  text-decoration: none;
}
.btn i.bs {
  float: right;
  margin-left: 0.8rem;
}
.btn.btn-icon-left i.bs {
  float: left;
  margin-left: 0;
  margin-right: 0.8rem;
}
.btn[disabled] {
  background-color: var(--btn-disabled-bg-color) !important;
  color: var(--btn-disabled-color) !important;
  cursor: not-allowed;
}
.btn[disabled]:hover,
.btn[disabled]:active,
.btn[disabled]:focus {
  background-color: inherit;
  color: inherit;
}
.btn[disabled] i {
  color: var(--btn-disabled-color);
}
.btn.btn-icon-only {
  /**
       * Lay out the children of this container with
       * flexbox.
       */
  display: flex;
  /**
     * As in the above "Centered prompt" example,
     * we'll rotate the main axis so that the children
     * are ordered vertically.
     */
  flex-direction: column;
  /**
     * Same thing here as before: group the children
     * together in the center of their container.
     */
  justify-content: center;
  /**
     * Just like in the "Centered prmopt" example,
     * align the children in the center, along the
     * main axis.
     */
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
}
.btn-default {
  color: var(--btn-default-color);
  background-color: var(--btn-default-bg-color);
}
.btn-default:hover,
.btn-default:active,
.btn-default:focus {
  color: var(--btn-default-color-active);
  background-color: var(--btn-default-bg-color-active);
}
.btn-danger {
  color: var(--btn-danger-color);
  background-color: var(--btn-danger-bg-color);
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
  color: var(--btn-danger-color-active);
  background-color: var(--btn-danger-bg-color-active);
}
.btn-success {
  color: var(--btn-success-color);
  background-color: var(--btn-success-bg-color);
}
.btn-success:hover,
.btn-success:active,
.btn-success:focus {
  color: var(--btn-success-color-active);
  background-color: var(--btn-success-bg-color-active);
}
.btn-warning {
  color: var(--btn-warning-color);
  background-color: var(--btn-warning-bg-color);
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
  color: var(--btn-warning-color-active);
  background-color: var(--btn-warning-bg-color-active);
}
.btn-info {
  color: var(--btn-info-color);
  background-color: var(--btn-info-bg-color);
}
.btn-info:hover,
.btn-info:active,
.btn-info:focus {
  color: var(--btn-info-color-active);
  background-color: var(--btn-info-bg-color-active);
}
.btn-primary {
  color: var(--btn-primary-color);
  background-color: var(--btn-primary-bg-color);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  color: var(--btn-primary-color-active);
  background-color: var(--btn-primary-bg-color-active);
}
.btn-secondary {
  color: var(--btn-secondary-color);
  background-color: var(--btn-secondary-bg-color);
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  color: var(--btn-secondary-color-active);
  background-color: var(--btn-secondary-bg-color-active);
}
.btn-tertiary {
  color: var(--btn-tertiary-color);
  background-color: var(--btn-tertiary-bg-color);
}
.btn-tertiary:hover,
.btn-tertiary:active,
.btn-tertiary:focus {
  color: var(--btn-tertiary-color-active);
  background-color: var(--btn-tertiary-bg-color-active);
}
.btn-quaternary {
  color: var(--btn-quaternary-color);
  background-color: var(--btn-quaternary-bg-color);
}
.btn-quaternary:hover,
.btn-quaternary:active,
.btn-quaternary:focus {
  color: var(--btn-quaternary-color-active);
  background-color: var(--btn-quaternary-bg-color-active);
}
.avatar-wrapper {
  position: relative;
  max-width: 200px;
  background-size: contain;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  /**
   * When there is no profile image -> use <div class="avatar-name">MH</div> for circle with initials
   */
}
.avatar-wrapper .avatar-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 100%;
  font-size: var(--profile-section-avatar-initials-font-size);
  text-align: center;
  font-family: var(--profile-section-avatar-initials-font-family);
  color: var(--color-white);
  background-color: #CCCCCC;
  /**
     * Took from palette at:
     * https://coolors.co/palettes/trending
     */
}
.avatar-wrapper .avatar-name.color-a {
  background-color: #264653;
}
.avatar-wrapper .avatar-name.color-b {
  background-color: #2A9d8F;
}
.avatar-wrapper .avatar-name.color-c {
  background-color: #E9C46A;
}
.avatar-wrapper .avatar-name.color-d {
  background-color: #F4A261;
}
.avatar-wrapper .avatar-name.color-e {
  background-color: #E76F51;
}
.avatar-wrapper .avatar-name.color-f {
  background-color: #BC6C25;
}
.avatar-wrapper .avatar-name.color-g {
  background-color: #F15BB5;
}
.avatar-wrapper .avatar-name.color-h {
  background-color: #9B5DE5;
}
.avatar-wrapper .img-overlay {
  width: 100%;
}
.avatar-wrapper .btn-edit-avatar {
  position: absolute;
  right: 0;
  bottom: 0;
}
header.header-main .row {
  margin-left: 0;
  margin-right: 0;
}
header.header-main .row .col {
  display: flex;
  padding-left: 0;
  padding-right: 0;
}
header.header-main .row .col .start {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
}
header.header-main .row .col .center {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
header.header-main .row .col .end {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}
header.header-main .nav-item-icon {
  padding: 0.5rem 1rem;
  font-size: var(--main-nav-bar-icon-font-size);
}
header.header-main .nav-item-logo {
  padding: 0.5rem 1rem;
}
header.header-main .nav-item-logo .logo {
  width: var(--main-nav-bar-logo-width);
}
header.header-main .dropdown-avatar .link-avatar {
  display: block;
  outline: none;
  padding: 0.5rem 1rem;
}
header.header-main .dropdown-avatar .link-avatar:hover,
header.header-main .dropdown-avatar .link-avatar:active,
header.header-main .dropdown-avatar .link-avatar:focus {
  text-decoration: none;
}
header.header-main .dropdown-avatar .link-avatar .avatar-wrapper {
  max-width: var(--main-nav-bar-avatar-circle-width);
  width: var(--main-nav-bar-avatar-circle-width);
  height: var(--main-nav-bar-avatar-circle-width);
}
header.header-main .dropdown-avatar .link-avatar .avatar-wrapper .avatar-img {
  width: var(--main-nav-bar-avatar-circle-width);
  height: var(--main-nav-bar-avatar-circle-width);
  border-radius: 50%;
}
header.header-main .dropdown-avatar .link-avatar .avatar-wrapper .avatar-name {
  font-size: var(--main-nav-bar-avatar-initials-font-size);
  font-weight: var(--main-nav-bar-avatar-initials-font-weight);
}
header.header-main .dropdown-avatar .dropdown-header {
  font-family: var(--main-nav-bar-dropdown-header-font-family);
  font-size: var(--main-nav-bar-dropdown-header-font-size);
  font-weight: var(--main-nav-bar-dropdown-header-font-weight);
  color: var(--main-nav-bar-dropdown-header-color);
}
header.header-main .dropdown-avatar .dropdown-item {
  font-family: var(--main-nav-bar-dropdown-item-font-family);
  font-size: var(--main-nav-bar-dropdown-item-font-size);
  font-weight: var(--main-nav-bar-dropdown-item-font-weight);
  color: var(--main-nav-bar-dropdown-item-color);
}
header.header-main .dropdown-avatar .dropdown-item:hover,
header.header-main .dropdown-avatar .dropdown-item:active,
header.header-main .dropdown-avatar .dropdown-item:focus {
  background-color: var(--main-nav-bar-dropdown-item-active-bg-color);
  color: var(--main-nav-bar-dropdown-item-active-color);
  text-decoration: none;
}
header.header-image .container {
  background-repeat: no-repeat;
}
header.header-image .container .transparent-layer {
  background-color: rgba(181, 138, 105, 0.2);
  display: flex;
  flex: 0 0 100%;
  /* Let it fill the entire space horizontally */
  height: 100%;
}
header.header-image .container .cite-wrapper {
  padding: var(--spacing-content);
  display: flex;
  flex: 0 0 var(--dashboard-header-cite-width-percentage);
  align-items: center;
  justify-content: center;
}
header.header-image .container .cite-wrapper cite {
  width: 100%;
  display: block;
  font-family: var(--dashboard-header-cite-headline-font-family);
  font-size: var(--dashboard-header-cite-headline-font-size);
  line-height: var(--dashboard-header-cite-headline-line-height);
  font-weight: var(--dashboard-header-cite-headline-font-weight);
  color: var(--dashboard-header-cite-headline-color);
  text-transform: var(--dashboard-header-cite-headline-text-transform);
  font-style: var(--dashboard-header-cite-headline-font-style);
  text-align: var(--dashboard-header-cite-headline-text-align);
}
header.header-image .container .cite-wrapper small {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--dashboard-header-cite-small-font-family);
  font-size: var(--dashboard-header-cite-small-font-size);
  font-weight: var(--dashboard-header-cite-small-font-weight);
  text-align: var(--dashboard-header-cite-small-text-align);
}
.container {
  padding-left: 0;
  padding-right: 0;
}
.container .container-wrapper {
  padding: var(--spacing-content);
}
.flex-row {
  display: flex;
  margin-top: 1rem;
}
.flex-row .flex-dynamic {
  flex: 1;
}
.flex-row .flex-spacer {
  flex: 0 0 10px;
}
.flex-row .flex-fix {
  flex: 0 0 60px;
  height: 60px;
}
.box-image {
  display: block;
  position: relative;
  margin-bottom: 1rem;
  text-decoration: none;
  color: inherit;
  /**
   * Animate on hover with mouse
   */
}
.box-image.not-available .img-thumb,
.box-image.not-available .box-headline-main,
.box-image.not-available .box-headline-sub {
  opacity: 0.4;
  filter: grayscale(100%);
  /* Standard */
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
  /* Firefox4-34 */
  -webkit-filter: grayscale(1);
  /* Old WebKit */
}
.box-image .box-headline-main {
  margin-bottom: 0;
  font-family: var(--image-box-item-headline-font-family);
  font-size: var(--image-box-item-headline-font-size);
  font-weight: var(--image-box-item-headline-font-weight);
  color: var(--image-box-item-headline-color);
  text-transform: var(--image-box-item-headline-text-transform);
}
.box-image .box-headline-sub {
  font-family: var(--image-box-item-headline-sub-font-family);
  font-size: var(--image-box-item-headline-sub-font-size);
  font-weight: var(--image-box-item-headline-sub-font-weight);
  color: var(--image-box-item-headline-sub-color);
  text-transform: var(--image-box-item-headline-sub-text-transform);
}
.box-image:hover,
.box-image:focus,
.box-image:active {
  text-decoration: none;
}
.box-image[href]:hover,
.box-image[href]:focus,
.box-image[href]:active {
  color: inherit;
}
.box-image[href]:hover .img-thumb:not(.no-transform-on-hover),
.box-image[href]:focus .img-thumb:not(.no-transform-on-hover),
.box-image[href]:active .img-thumb:not(.no-transform-on-hover) {
  transform: scale(1.02);
  border-color: var(--image-box-border-color-active);
}
.box-image .box-shadow {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.box-image .img-thumb {
  width: 100%;
  border-radius: 0.8rem;
  transition: transform 0.5s;
  /* Animation */
  border: 1px solid var(--image-box-border-color);
}
.box-image .badge {
  position: absolute;
  top: -10px;
  right: -7px;
  padding: var(--image-box-badge-padding);
  border-radius: var(--image-box-badge-border-radius);
  background-color: var(--image-box-badge-bg-color);
  font-family: var(--image-box-badge-font-family);
  font-size: var(--image-box-badge-font-size);
  line-height: var(--image-box-badge-line-height);
  font-weight: var(--image-box-badge-font-weight);
  color: var(--image-box-badge-color);
  text-transform: var(--image-box-badge-text-transform);
}
.box-image .badge.badge-icon {
  padding: 0;
  background-color: transparent;
  color: var(--image-box-badge-icon-color);
  font-size: var(--image-box-badge-icon-font-size);
  box-shadow: none;
}
.box-image .img-wrapper {
  position: relative;
}
.box-image .box-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-image .box-image-overlay .btn {
  text-transform: uppercase;
  transform: scale(0.9);
  -webkit-transition: all 0.2s ease !important;
  -moz-transition: all 0.2s ease !important;
  -o-transition: all 0.2s ease !important;
  -ms-transition: all 0.2s ease !important;
  transition: all 0.2s ease !important;
}
.box-image:hover .box-image .btn {
  transform: scale(1);
}
.badge-color-media-has-like {
  color: var(--audio-player-like-color) !important;
}
.swiper-edge-to-edge {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.swiper {
  width: 100%;
}
.swiper .swiper-wrapper {
  margin-bottom: 1.8rem;
}
.swiper .swiper-slide {
  padding-top: 1rem;
}
.swiper .swiper-slide .box-image {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.swiper .swiper-pagination {
  bottom: 0;
}
.swiper .swiper-pagination .swiper-pagination-bullet {
  background-color: var(--swiper-bullet-color);
  opacity: 1;
}
.swiper .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--swiper-bullet-bg-color);
}
.swiper .box-image {
  margin-bottom: 0;
}
.swiper .box-image p:last-child {
  margin-bottom: 0;
}
.row-slider .box-image {
  margin-bottom: 0;
}
.nav-horizontal {
  border-bottom: 1px solid var(--module-navbar-border-color);
  margin: 1.3rem calc(0px - var(--spacing-content)) 0 calc(0px - var(--spacing-content));
  padding-left: 1rem;
  padding-right: 1rem;
}
.nav-horizontal .nav-item:not(:last-child) {
  margin-right: 0.7rem;
}
.nav-horizontal .nav-item .nav-link {
  padding: 0.5rem 0.5rem;
  font-family: var(--module-navbar-font-family);
  font-weight: var(--module-navbar-font-weight);
  color: var(--module-navbar-color);
  text-transform: var(--module-navbar-text-transform);
}
.nav-horizontal .nav-item .nav-link.active {
  border-bottom: 2px solid var(--module-navbar-color-active);
  color: var(--module-navbar-color-active);
  font-weight: var(--module-navbar-font-weight-active);
}
.nav-horizontal .nav-item .nav-link:hover,
.nav-horizontal .nav-item .nav-link:active,
.nav-horizontal .nav-item .nav-link:focus {
  color: var(--module-navbar-color-active);
  text-decoration: none;
}
/**
 * GENERAL
 */
.section-meeting {
  background-image: var(--meeting-bg-image);
  background-repeat: var(--meeting-bg-repeat);
  background-size: var(--meeting-bg-size);
  background-position: var(--meeting-bg-position);
}
.section-meeting .container-wrapper {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.section-meeting .box-headline {
  font-family: var(--meeting-box-headline-font-family);
  font-size: var(--meeting-box-headline-font-size);
  font-weight: var(--meeting-box-headline-font-weight);
  color: var(--meeting-box-headline-color);
  text-transform: var(--meeting-box-headline-text-transform);
}
.section-meeting div {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.section-meeting div span {
  letter-spacing: 0.2rem;
  pointer-events: none;
  font-family: var(--meeting-box-value-font-family);
  font-size: var(--meeting-box-value-font-size);
  font-weight: var(--meeting-box-value-font-weight);
  color: var(--meeting-box-value-color);
  text-transform: var(--meeting-box-value-text-transform);
}
.section-meeting div label {
  display: block;
  font-family: var(--meeting-box-label-font-family);
  font-size: var(--meeting-box-label-font-size);
  font-weight: var(--meeting-box-label-font-weight);
  color: var(--meeting-box-label-color);
  text-transform: var(--meeting-box-label-text-transform);
}
.section-meeting div:last-child {
  margin-bottom: 0;
}
.section-meeting .meeting-link {
  /* no style here, exists in case user wants to add some custom CSS */
}
.section-meeting .meeting-id {
  /* no style here, exists in case user wants to add some custom CSS */
}
.section-meeting .meeting-password {
  /* no style here, exists in case user wants to add some custom CSS */
}
.section-meeting img {
  max-width: 100%;
}
/**
 * APPLICATION SIGNUP PAGE
 */
.section-application {
  margin: var(--spacing-content);
  margin-top: 0;
}
.section-application .logo {
  max-width: 80px;
  margin: 2rem;
}
.section-application .application-header img {
  max-width: 100%;
  border-radius: var(--box-border-radius);
}
.section-application .current-count,
.section-application .maxlength {
  font-size: 0.8rem;
}
.select-phone-country-code {
  position: absolute;
  left: 0;
  bottom: 0;
}
.iti {
  width: 100%;
}
/**
 * PUBLIC PAGES (e.g. login, registration, password reset, ...)
 */
.section-public {
  margin: var(--spacing-content);
}
.section-public .language-switch {
  text-align: right;
  color: var(--a-color);
}
.section-public .logo {
  max-width: var(--public-logo-max-width);
  margin: 2rem;
}
.section-public .link-password-request {
  text-align: right;
  font-size: 0.85rem;
  margin-top: -0.8rem;
  margin-bottom: 1.5rem;
}
.section-public .footer-action {
  margin-top: 1.5rem;
}
.section-public .footer-action p {
  margin-bottom: 0.5rem;
}
/**
 * DASHBOARD PAGE
 */
.section-dashboard-products .headline-greeting {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  color: var(--h3-color);
  font-weight: var(--h3-font-weight);
}
/**
 * GENERAL PAGE CONTENT
 */
.section-content .headline-and-progress-area {
  margin-top: 0;
}
.section-content .headline-and-progress-area .flex-fix {
  flex: 0 0 100px;
  height: 100px;
  /**
       * Make progress bar thicker for product page
       */
}
.section-content .headline-and-progress-area .flex-fix .progress::after,
.section-content .headline-and-progress-area .flex-fix .progress .progress-left .progress-bar,
.section-content .headline-and-progress-area .flex-fix .progress .progress-right .progress-bar {
  border-width: calc(var(--progress-bar-border-width) + 2px);
}
.section-content .headline-main {
  margin-bottom: 0;
  font-family: var(--content-headline-main-font-family);
  font-size: var(--content-headline-main-font-size);
  font-weight: var(--content-headline-main-font-weight);
  color: var(--content-headline-main-color);
  text-transform: var(--content-headline-main-text-transform);
}
.section-content .headline-sub {
  font-family: var(--content-headline-sub-font-family);
  font-size: var(--content-headline-sub-font-size);
  font-weight: var(--content-headline-sub-font-weight);
  color: var(--content-headline-sub-color);
  text-transform: var(--content-headline-sub-text-transform);
}
.section-products-modules-dates {
  margin-top: calc((0px - var(--spacing-content)) / 2);
}
.section-products-modules-dates .box-date {
  margin-bottom: 0;
}
.section-products-modules-dates .box-date .box-item-headline {
  margin-bottom: 0;
  font-family: var(--module-dates-item-headline-font-family);
  font-size: var(--module-dates-item-headline-font-size);
  font-weight: var(--module-dates-item-headline-font-weight);
  color: var(--module-dates-item-headline-color);
  text-transform: var(--module-dates-item-headline-text-transform);
}
.section-products-modules-dates .box-date .box-item-headline-sub {
  margin-bottom: 0;
  font-family: var(--module-dates-item-headline-sub-font-family);
  font-size: var(--module-dates-item-headline-sub-font-size);
  font-weight: var(--module-dates-item-headline-sub-font-weight);
  color: var(--module-dates-item-headline-sub-color);
  text-transform: var(--module-dates-item-headline-sub-text-transform);
}
.section-products-modules-dates .box-date .event-date {
  flex: 0 0 100px;
  text-align: right;
  font-family: var(--module-dates-item-headline-sub-font-family);
  font-size: var(--module-dates-item-headline-sub-font-size);
  font-weight: var(--module-dates-item-headline-sub-font-weight);
  color: var(--module-dates-item-headline-sub-color);
  text-transform: var(--module-dates-item-headline-sub-text-transform);
}
.section-products-modules-dates .box-date.event-date-not-reached .box-item-headline,
.section-products-modules-dates .box-date.event-date-not-reached .box-item-headline-sub,
.section-products-modules-dates .box-date.event-date-not-reached .event-date {
  color: var(--module-dates-item-date-not-reached-color);
}
.section-products-modules-dates .box-date::after {
  display: block;
  width: 100%;
  margin: 0.1rem auto 1rem auto;
  border-bottom: var(--module-dates-separator-line);
  content: '';
}
.section-products-modules-dates .box-date:last-child:after {
  border-bottom: 0;
}
.section-media .container-wrapper {
  background-color: var(--media-box-bg-color);
}
.section-media .container-wrapper .box-headline {
  font-family: var(--media-box-headline-font-family);
  font-size: var(--media-box-headline-font-size);
  font-weight: var(--media-box-headline-font-weight);
  color: var(--media-box-headline-color);
  text-transform: var(--media-box-headline-text-transform);
}
.section-media .item-file {
  display: flex;
  margin-bottom: 0.6rem;
  background-color: var(--media-box-item-bg-color);
  border-radius: var(--box-border-radius);
  text-decoration: none;
  color: inherit;
}
.section-media .item-file:last-child {
  margin-bottom: 0;
}
.section-media .item-file .file-icon-left {
  flex: 0 0 3rem;
  margin: 1.2rem 0.8rem;
  align-self: center;
}
.section-media .item-file .file-icon-left i {
  border-radius: 2rem;
  background-color: var(--media-box-item-left-icon-bg-color);
  color: var(--media-box-item-left-icon-color);
  padding: 0.6rem 0.9rem 0.6rem 0.9rem;
  font-size: 1.2rem;
}
.section-media .item-file .file-details {
  flex: 1;
  align-self: center;
  margin: 0.5rem 0;
}
.section-media .item-file .file-details .file-title {
  margin-bottom: 0;
  font-family: var(--media-box-item-title-font-family);
  font-size: var(--media-box-item-title-font-size);
  font-weight: var(--media-box-item-title-font-weight);
  color: var(--media-box-item-title-color);
  text-transform: var(--media-box-item-title-text-transform);
  text-decoration: var(--media-box-item-title-text-decoration);
}
.section-media .item-file .file-details .file-title-sub {
  margin-bottom: 0;
  font-family: var(--media-box-item-title-sub-font-family);
  font-size: var(--media-box-item-title-sub-font-size);
  font-weight: var(--media-box-item-title-sub-font-weight);
  color: var(--media-box-item-title-sub-color);
  text-transform: var(--media-box-item-title-sub-text-transform);
}
.section-media .item-file .file-details .file-info {
  margin-bottom: 0;
  font-family: var(--media-box-item-file-info-font-family);
  font-size: var(--media-box-item-file-info-font-size);
  font-weight: var(--media-box-item-file-info-font-weight);
  color: var(--media-box-item-file-info-color);
  text-transform: var(--media-box-item-file-info-text-transform);
}
.section-media .item-file .file-details .file-info span {
  display: inline-block;
}
.section-media .item-file .file-details .file-info span:before {
  content: '•';
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}
.section-media .item-file .file-icon-right {
  flex: 0 0 50px;
  text-align: center;
  align-self: center;
  margin: 0 0.8rem;
}
.section-media .item-file .file-icon-right a {
  display: inline-block;
  color: var(--media-box-item-right-icon-color);
}
.section-media .item-file .file-icon-right a i {
  font-size: 1.7rem;
}
.section-media .item-file .file-progress {
  flex: 0 0 55px;
  height: 55px;
  align-self: center;
  margin: 0.3rem;
}
.section-offers {
  display: none;
}
.section-offers .container-wrapper {
  background-color: var(--offer-box-bg-color);
}
.section-offers .box-headline {
  font-family: var(--offer-box-headline-font-family);
  font-size: var(--offer-box-headline-font-size);
  font-weight: var(--offer-box-headline-font-weight);
  color: var(--offer-box-headline-color);
  text-transform: var(--offer-box-headline-text-transform);
}
.section-offers .box-item-headline-main {
  margin-bottom: 0;
  font-family: var(--offer-box-item-headline-main-font-family);
  font-size: var(--offer-box-item-headline-main-font-size);
  font-weight: var(--offer-box-item-headline-main-font-weight);
  color: var(--offer-box-item-headline-main-color);
  text-transform: var(--offer-box-item-headline-main-text-transform);
}
.section-offers .box-item-headline-sub {
  font-family: var(--offer-box-item-headline-sub-font-family);
  font-size: var(--offer-box-item-headline-sub-font-size);
  font-weight: var(--offer-box-item-headline-sub-font-weight);
  color: var(--offer-box-item-headline-sub-color);
  text-transform: var(--offer-box-item-headline-sub-text-transform);
}
/**
 * PROFILE PAGE
 */
.form-custom .form-text,
.form-custom .form-control,
.form-custom label[for],
.form-custom .form-check-label {
  color: var(--form-text-color);
}
.section-profile p {
  color: var(--form-text-color);
}
.section-profile .nav {
  justify-content: center;
}
.section-profile .nav .nav-item .nav-link {
  font-weight: normal;
}
.section-profile .nav .nav-item .nav-link:hover:not(.active) {
  color: var(--color-black);
}
.section-profile .nav .nav-item .nav-link i {
  margin-right: 0.7rem;
}
footer {
  margin: 1rem 1rem 1.5rem 1rem;
  text-align: center;
}
footer small {
  display: block;
  font-family: var(--footer-font-family);
  font-size: var(--footer-font-size);
  font-weight: var(--footer-font-weight);
  color: var(--footer-color);
  text-transform: var(--footer-text-transform);
}
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  background-color: var(--bd-callout-bg, var(--bs-gray-100));
  border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
}
.bd-callout.bd-callout-info {
  --bd-callout-bg: rgba(var(--bs-info-rgb), 0.075);
  --bd-callout-border: rgba(var(--bs-info-rgb), 0.5);
}
.bd-callout.bd-callout-warning {
  --bd-callout-bg: rgba(var(--bs-warning-rgb), 0.075);
  --bd-callout-border: rgba(var(--bs-warning-rgb), 0.5);
}
.bd-callout.bd-callout-danger {
  --bd-callout-bg: rgba(var(--bs-danger-rgb), 0.075);
  --bd-callout-border: rgba(var(--bs-danger-rgb), 0.5);
}
.bd-callout.bd-callout-success {
  --bd-callout-bg: rgba(var(--bs-success-rgb), 0.075);
  --bd-callout-border: rgba(var(--bs-success-rgb), 0.5);
}
.bd-callout.bd-callout-info {
  --bd-callout-bg: rgba(var(--bs-info-rgb), 0.075);
  --bd-callout-border: rgba(var(--bs-info-rgb), 0.5);
}
.bd-callout > :last-child {
  margin-bottom: 0;
}
/**
 * AUDIO PLAYER
 */
.audio-wrapper .player {
  margin: var(--spacing-content);
  border-radius: var(--audio-player-border-radius);
  background-color: var(--audio-player-bg-color);
  border: 1px solid var(--audio-player-border-color);
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
.audio-wrapper .player .cover {
  width: 100%;
}
.audio-wrapper .player .cover img {
  border-top-left-radius: var(--audio-player-border-radius);
  border-top-right-radius: var(--audio-player-border-radius);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.audio-wrapper .player .info {
  padding: 1rem 0.5rem 0 0.5rem;
  text-align: center;
}
.audio-wrapper .player .info .title {
  font-family: var(--audio-player-title-font-family);
  font-size: var(--audio-player-title-font-size);
  font-weight: var(--audio-player-title-font-weight);
  color: var(--audio-player-title-color);
  text-transform: var(--audio-player-title-text-transform);
}
.audio-wrapper .player .info .title-sub {
  font-family: var(--audio-player-title-sub-font-family);
  font-size: var(--audio-player-title-sub-font-size);
  font-weight: var(--audio-player-title-sub-font-weight);
  color: var(--audio-player-title-sub-color);
  text-transform: var(--audio-player-title-sub-text-transform);
}
.audio-wrapper .player .volume-box {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0.5rem 0.5rem 0 0.5rem;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  -webkit-transition: opacity 0.5s ease-in;
  -moz-transition: opacity 0.5s ease-in;
  -o-transition: opacity 0.5s ease-in;
}
.audio-wrapper .player .volume-box .btn-volume-down,
.audio-wrapper .player .volume-box .btn-volume-up {
  cursor: pointer;
  color: var(--audio-player-controls-color);
  padding: 0.5rem 2rem;
}
.audio-wrapper .player .volume-box .btn-volume-down::selection,
.audio-wrapper .player .volume-box .btn-volume-up::selection {
  background-color: unset;
}
.audio-wrapper .player .volume-box.active {
  opacity: 1;
}
.audio-wrapper .player .volume-box .input-volume-range {
  flex: 1;
  -webkit-appearance: none !important;
  margin: 0;
  padding: 0;
  background: var(--audio-player-bar-bg-color);
  height: 5px;
  width: 150px;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
}
.audio-wrapper .player .volume-box .input-volume-range::-ms-fill-lower {
  background: var(--audio-player-bar-bg-color);
}
.audio-wrapper .player .volume-box .input-volume-range::-ms-fill-upper {
  background: var(--audio-player-bar-bg-color);
}
.audio-wrapper .player .volume-box .input-volume-range::-moz-range-track {
  border: none;
  background: var(--audio-player-bar-bg-color);
}
.audio-wrapper .player .volume-box .input-volume-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background: var(--audio-player-controls-color-active);
  height: 5px;
  width: 5px;
  border-radius: 50%;
  box-shadow: -100vw 0 0 100vw var(--audio-player-bar-color);
}
.audio-wrapper .player .volume-box .input-volume-range::-moz-range-thumb {
  background: var(--audio-player-bar-color);
  height: 3px;
  width: 3px;
  border-radius: 100%;
}
.audio-wrapper .player .volume-box .input-volume-range::-ms-thumb {
  -webkit-appearance: none !important;
  background: var(--audio-player-bar-color);
  height: 8px;
  width: 8px;
  border-radius: 100%;
}
.audio-wrapper .player .btn-box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.audio-wrapper .player .btn-box i {
  flex: 1;
  font-size: 1.5rem;
  color: var(--audio-player-controls-color);
  padding: 0.5rem 1rem 1rem 1rem;
  cursor: pointer;
  text-align: center;
}
.audio-wrapper .player .btn-box i.active {
  color: var(--audio-player-controls-color-active);
}
.audio-wrapper .player .btn-box .btn-like.active {
  color: var(--audio-player-like-color);
}
.audio-wrapper .player .music-box {
  text-align: center;
  padding: 1rem 0.5rem 0 0.5rem;
}
.audio-wrapper .player .music-box .music-range {
  display: flex;
  flex: 1;
  align-items: center;
}
.audio-wrapper .player .music-box .music-range .input-seekbar {
  -webkit-appearance: none !important;
  margin: 0;
  padding: 0;
  background: var(--audio-player-bar-bg-color);
  height: 5px;
  width: 100%;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
}
.audio-wrapper .player .music-box .music-range .input-seekbar::-ms-fill-lower {
  background: var(--audio-player-bar-bg-color);
}
.audio-wrapper .player .music-box .music-range .input-seekbar::-ms-fill-upper {
  background: var(--audio-player-bar-bg-color);
}
.audio-wrapper .player .music-box .music-range .input-seekbar::-moz-range-track {
  border: none;
  background: var(--audio-player-bar-bg-color);
}
.audio-wrapper .player .music-box .music-range .input-seekbar::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background: var(--audio-player-controls-color-active);
  height: 5px;
  width: 5px;
  border-radius: 50%;
  box-shadow: -100vw 0 0 100vw var(--audio-player-bar-color);
}
.audio-wrapper .player .music-box .music-range .input-seekbar::-moz-range-thumb {
  background: var(--audio-player-bar-color);
  height: 3px;
  width: 3px;
  border-radius: 100%;
}
.audio-wrapper .player .music-box .music-range .input-seekbar::-ms-thumb {
  -webkit-appearance: none !important;
  background: var(--audio-player-bar-color);
  height: 8px;
  width: 8px;
  border-radius: 100%;
}
.audio-wrapper .player .music-box .music-range .time {
  padding: 0 1rem;
  font-family: var(--audio-player-time-font-family);
  font-size: var(--audio-player-time-font-size);
  font-weight: var(--audio-player-time-font-weight);
  color: var(--audio-player-time-color);
  text-transform: var(--audio-player-time-text-transform);
}
.audio-wrapper .player .music-box .music-control {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.audio-wrapper .player .music-box .music-control .btn-audio-play {
  display: inline-block;
  padding: 0 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s;
}
.audio-wrapper .player .music-box .music-control .btn-audio-play:hover i,
.audio-wrapper .player .music-box .music-control .btn-audio-play:focus i,
.audio-wrapper .player .music-box .music-control .btn-audio-play:active i {
  color: var(--audio-player-controls-color-active);
}
.audio-wrapper .player .music-box .music-control .btn-audio-play i {
  font-size: 3rem;
  line-height: 1rem;
  color: var(--audio-player-controls-color);
  transition: all 0.4s;
}
@media (min-width: 576px) {
  /**
   * Rounded border on Header and highlighted boxes with alternative bg color -> only on devices where header/boxes are not edge-to-edge and have white spacing left and right
   */
  header .container,
  header .transparent-layer,
  .section-offers .container-wrapper,
  .section-media .container-wrapper,
  .border-box-special {
    border-radius: var(--box-border-radius);
  }
  /**
   * Set a maximum width for the player when screen is too big (so it does not stretch too much)
   */
  .audio-wrapper .player {
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 992px) {
  /**
   * PROFILE page, alternative view for profile navigation
   */
  .section-profile .nav {
    border-bottom: 0;
  }
  .section-profile .nav .nav-item {
    flex: 1 1 100%;
    text-align: left;
  }
  .section-profile .nav .nav-item .nav-link {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .section-profile .nav .nav-item .nav-link.active {
    border-bottom: none;
    background-color: #EEEEEE;
    border-radius: var(--box-border-radius);
  }
  .form-box {
    border: 1px solid #DDDDDD;
    border-radius: var(--box-border-radius);
    padding: var(--spacing-content);
  }
}
/*# sourceMappingURL=frontend.default.css.map */