/* <----Videos component css----> */
@import url("../css/_static-variables.css");

.videos-component .slider-button.active {
  background-color: var(--theme-dark-green-color) !important;
  transform: scale(1.2);
}

.videos-component .main-swiper,
.videos-component .main-swiper .swiper-wrapper {
  width: 100%;
}

.videos-component .video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
  pointer-events: auto;
}

.videos-component .main-swiper .swiper-slide {
  pointer-events: none;
}

.videos-component .main-swiper .swiper-slide.swiper-slide-active {
  pointer-events: auto;
  z-index: 3;
}

.videos-component .swiper-slide.image-holder:has(.privacy-banner) .gallery-overlay,
.videos-component .swiper-slide.image-holder:has(.privacy-banner) .play-button-holder,
.videos-component .swiper-slide.image-holder:has(.privacy-banner) .image {
  display: none;
}

.privacy-banner{
  width: unset !important;
}

/* ----Images component css----> */

body.stop-overflow {
  overflow: hidden;
}

.images-component .slider-button.active {
  background-color: var(--theme-dark-green-color) !important;
  transform: scale(1.2);
}

.images-component .gallery-focus .icon-wrapper {
  z-index: 1;
}

.overlay-swiper {
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
}

[dir="rtl"] .images-component .icon--arrow-left::before,
[dir="rtl"] .images-component .icon--arrow-right::before,
[dir="rtl"] .overlay .icon--arrow-left::before,
[dir="rtl"] .overlay .icon--arrow-right::before {
  transform: scaleX(-1) !important;
}

/* ----Accordion component css----> */

.baseblock.accordion .highlight .h3-headline{
   color: var(--white); 
}

/* Limit to main gallery swiper inside accordion; avoid overlay swiper conflicts */
.baseblock.accordion .gallery-focus > .swiper.main-swiper > .swiper-wrapper {
  height: unset;
}

.baseblock.accordion .gallery .slider-navigation .slider-button.active{
    background-color: var(--theme-dark-green-color);
}

.baseblock.accordion .gallery .image-button {
    margin: 0 7px;
}

/* ----Podcast component css----> */
.podcast {
    overflow: hidden;
    width: auto;
    margin: 0 auto;
}

.dark {
    background: #003b1c;
}

.podcast .podcast-total {
    display: flex;
    margin: 20px auto;
    align-items: center;
    justify-content: space-around;
    width: 80%;
    font-family: var(--font-family);
    font-weight: 700;
    color: var(--moss-green);
}

.podcast .podcast-total .podcast-percentage {
    min-width: 70px;
}

.podcast .podcast-controls {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
    width: 80%;
    height: 38px;
}

.podcast .podcast-progress-bar {
    position: relative;
    margin: 26px auto;
    width: 80%;
    height: 10px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    border: 2px solid var(--moss-green);
}

.podcast .podcast-progress-bar .progress {
    width: 0%;
    height: 100%;
    background: var(--moss-green);
    border-radius: 5px;
    transform: translateZ(0);
    will-change: width;
    transition: width 0.1s linear;
}

.podcast .podcast-progress-bar .progress-circle {
    position: absolute;
    top: -100%;
    left: -1%;
    width: 20px;
    height: 20px;
    transform: translateZ(0);
    will-change: left;
    transition: left 0.1s linear;
}

.podcast .podcast-progress-bar .progress-circle .progress-circle-block {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--moss-green);
    background: var(--white-bg-color);
    transition: all .2s;
}

.podcast .podcast-progress-bar .progress-circle .progress-circle-block:hover {
    transform: scale(1.1);
}

.dark .podcast .podcast-total {
    color: var(--white-bg-color);
}

.dark .podcast .podcast-progress-bar .progress {
    background: var(--theme-light-green-color);
}

.dark .podcast .podcast-progress-bar .progress-circle .progress-circle-block {
    border: 2px solid var(--moss-green);
    background: var(--theme-light-green-color);
    transition: all .2s;
}

.dark .podcast .podcast-progress-bar {
    border: 2px solid var(--theme-light-green-color);
}


/* Styling for minimal-podcast */
.minimal-podcast {
    overflow: hidden;
    width: auto;
    margin: 0 auto;
}

.minimal-podcast .minimal-podcast-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
    height: 38px;
}

.minimal-podcast .minimal-podcast-controls .minimal-podcast-start {
    display: flex;
}

.minimal-podcast .minimal-podcast-controls .secondary-icon-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 3px;
}

.minimal-podcast .minimal-podcast-controls .icon--play,
.minimal-podcast .minimal-podcast-controls .icon--pause,
.minimal-podcast .minimal-podcast-controls .icon--stop,
.minimal-podcast .minimal-podcast-controls .icon--sound-loud,
.minimal-podcast .minimal-podcast-controls .icon--sound-mute {
    transform: scale(0.8);
    display: block;
}

.minimal-podcast .minimal-podcast-controls .podcast-time-display {
    margin: 8px;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-family: var(--font-family);
    font-weight: 700;
    color: var(--moss-green);
}

.minimal-podcast .minimal-podcast-controls .podcast-progress-bar {
    position: relative;
    width: 40%;
    height: 5px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--moss-green);
}

.minimal-podcast .minimal-podcast-controls .podcast-progress-bar .progress {
    width: 0%;
    height: 100%;
    background: var(--moss-green);
    border-radius: 5px;
    transform: translateZ(0);
    will-change: width;
    transition: width 0.1s linear;
}

.minimal-podcast .minimal-podcast-controls .podcast-progress-bar .progress-circle {
    position: absolute;
    top: -150%;
    left: -1%;
    width: 10px;
    height: 10px;
    transform: translateZ(0);
    will-change: left;
    transition: left 0.1s linear;
}

.minimal-podcast .minimal-podcast-controls .podcast-progress-bar .progress-circle .progress-circle-block {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--moss-green);
    background: var(--white-bg-color);
    transition: all .2s;
}

.minimal-podcast .minimal-podcast-controls .podcast-progress-bar .progress-circle .progress-circle-block :hover {
    transform: scale(1.1);
}

.dark .minimal-podcast .minimal-podcast-controls .podcast-time-display {
    color: var(--white-bg-color);
}

.dark .minimal-podcast .minimal-podcast-controls .podcast-progress-bar {
    border: 1px solid var(--theme-light-green-color);
}

.dark .minimal-podcast .minimal-podcast-controls .podcast-progress-bar .progress {
    background: var(--theme-light-green-color);
}

.dark .minimal-podcast .minimal-podcast-controls .podcast-progress-bar .progress-circle .progress-circle-block {
    border: 1px solid var(--moss-green);
    background: var(--theme-light-green-color);
}
.podcast-container{
    margin-bottom: 30px;
}

/* <----Teasers component css----> */
 
.teaser--half .slider-section {
  display: flex !important;
}
@media screen and (width >= 961px) {
  .teaser--half .slider-section {
    display: none !important;
  }
}
.teaser--slider .teaser-card .content {
  width: auto;
}
.teaser .slider-button.active {
  background-color: var(--theme-dark-green-color) !important;
  transform: scale(1.2);
}

.teaser h2 {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.teaser-card--without-image {
  min-height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border: 0.1rem solid #d4d9d4;
  height: 100%;
}
.text-button .button-icon {
  padding: 0 4px;
}
.teaser-card .button-container--with-text-button {
  justify-content: space-between;
  align-items: center;
  gap: var(--in-block-2xs);
  flex-flow: wrap;
}
section.baseblock.teaser.highlight.teaser--slider .teaser-card--without-image {
    background: #003b1c;
}

/* <----SmartBanner component css----> */
 
.smartbanner {
  display: none;
  height: auto;
}
.smartbanner button:focus {
  outline: none;
}
.smartbanner .content.android-info,
.smartbanner .content.ios-info {
  display: none;
}
.smartbanner .android-info.android-show {
  display: inline-block;
}
.smartbanner .ios-info.ios-show {
  display: inline-block;
}
.smartbanner p.headline {
  padding-bottom: 5px;
}
.smartbanner .hiden-value {
  display: none;
}
@media only screen and (min-width: 768px) {
  .smartbanner .smart-banner-app {
    display: flex;
  }
}

/* <----rtl  css----> */

html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] body,
html[dir="rtl"] .rich-text,
html[dir="rtl"] .accordion--header,
html[dir="rtl"] .accordion--trigger,
html[dir="rtl"] .table__th,
html[dir="rtl"] .table__td {
  text-align: right;
}

html[dir="rtl"] .breadcrumb--holder,
html[dir="rtl"] .navigation,
html[dir="rtl"] .navigation__items,
html[dir="rtl"] .primary-button,
html[dir="rtl"] .secondary-button,
html[dir="rtl"] .text-button {
  flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumb--holder i,
html[dir="rtl"] .button-icon,
html[dir="rtl"] .accordion-icon {
  transform: scaleX(-1);
}

html[dir="rtl"] .input-text .input-wrap i.left-icon,
html[dir="rtl"] .input-dropdown .input-wrap i.search-icon {
  left: auto;
  right: var(--component-spacing-m);
}

html[dir="rtl"] .input-text .input-wrap i.right-icon,
html[dir="rtl"] .input-dropdown .input-wrap i.chevron-down-icon {
  right: auto;
  left: var(--component-spacing-m);
}

html[dir="rtl"] .input-text.has-left-icon input {
  padding-left: var(--component-spacing-m);
  padding-right: calc(var(--component-spacing-l) + 2.4rem + var(--component-spacing-m));
}

html[dir="rtl"] .input-text.has-right-icon input {
  padding-right: var(--component-spacing-m);
  padding-left: calc(var(--component-spacing-l) + 2.4rem + var(--component-spacing-m));
}

html[dir="rtl"] .input-textarea .input-wrap i,
html[dir="rtl"] .input-text .input-wrap .inner-button,
html[dir="rtl"] .input-text .input-wrap .search-icons {
  right: auto;
  left: var(--component-spacing-m);
}

html[dir="rtl"] ol,
html[dir="rtl"] ul,
html[dir="rtl"] .product-comparison__cell-value ul,
html[dir="rtl"] .rich-text .checkmark-list li {
  padding-left: 0;
  padding-right: 2rem;
}

html[dir="rtl"] .rich-text .checkmark-list li::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .contact-flyout-button {
  right: auto;
  left: 1.6rem;
}

html[dir="rtl"] .off-canvas-area .panel {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .gallery .icon-wrapper {
  right: auto;
  left: var(--in-block-xs);
}

html[dir="rtl"] .images-wrapper-desktop .image-caption-1 {
  margin-right: 0;
  margin-left: var(--in-block-xs);
}

html[dir="rtl"] .images-wrapper-desktop .image-caption-2 {
  margin-left: 0;
  margin-right: var(--in-block-xs);
  text-align: left;
}

html[dir="rtl"] .footer__navItem,
html[dir="rtl"] .conversion-card,
html[dir="rtl"] .rep-card__header,
html[dir="rtl"] .suggestion-item__btn {
  flex-direction: row-reverse;
}

html[dir="rtl"] .conversion-card .button,
html[dir="rtl"] .filter-chip .button-icon {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .accordion--header {
  padding-left: var(--component-spacing-m);
  padding-right: 0;
}

html[dir="rtl"] .link-teaser .list,
html[dir="rtl"] .download-list-item__text,
html[dir="rtl"] .productCard__benefits {
  text-align: right;
}

html[dir="rtl"] .table__th,
html[dir="rtl"] .table__td {
  direction: rtl;
}

html[dir="rtl"] .tabs-section-desktop .underline,
html[dir="rtl"] .tabs-section-desktop [class*="underline-section"] {
  right: 0;
  left: auto;
}


/*  <----animation  css----> --> */

.slide-in-right {
    animation: slide-in-right 0.5s forwards;
}

@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-out-left {
    animation: slide-out-left 0.5s forwards;
}

@keyframes slide-out-left {
    from { transform: translateX(0); opacity: 1;}
    to { transform: translateX(-100%); opacity: 0; }
}

.slide-in-left {
    animation: slide-in-left 0.5s forwards;
}

@keyframes slide-in-left {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-out-right {
    animation: slide-out-right 0.5s forwards;
}

@keyframes slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@-webkit-keyframes slide-in-arrow-data-v-8978c7c0 {
    0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
    to { -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes slide-in-arrow-data-v-8978c7c0 {
    0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
    to { -webkit-transform: translateY(0); transform: translateY(0); }
}

@-webkit-keyframes vue-treeselect-animation-fade-in {
    0% { opacity: 0; }
}

@keyframes vue-treeselect-animation-fade-in {
    0% { opacity: 0; }
}

@-webkit-keyframes vue-treeselect-animation-bounce {
    0%,
    to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes vue-treeselect-animation-bounce {
    0%,
    to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes vue-treeselect-animation-rotate {
    to { -webkit-transform: rotate(1turn); transform: rotate(1turn); }
}

@keyframes vue-treeselect-animation-rotate {
    to { -webkit-transform: rotate(1turn); transform: rotate(1turn); }
}

@-webkit-keyframes show-scroll {
    0% { right: -50px; opacity: 1 }
    to { right: 50px; opacity: 0; }
}

@keyframes show-scroll {
    0% { right: -50px; opacity: 1; }
    to { right: 50px; opacity: 0; }
}

@-webkit-keyframes stroke-spacing {
    0% { stroke-dasharray: 0 200; }
    45% { stroke-dashoffset: 0; stroke-dasharray: 200 200; }
    90% { stroke-dashoffset: -200; stroke-dasharray: 200 200; }
    to { stroke-dashoffset: -200; stroke-dasharray: 200 200; }
}

@keyframes stroke-spacing {
    0% { stroke-dasharray: 0 200; }
    45% { stroke-dashoffset: 0; stroke-dasharray: 200 200; }
    90% { stroke-dashoffset: -200; stroke-dasharray: 200 200; }
    to { stroke-dashoffset: -200; stroke-dasharray: 200 200; }
}

@keyframes move {
    0% { transform: translateX(540px); opacity:99999; }
    100% { transform: translateX(0); }
}

@keyframes moveOut {
    0% { transform: translateX(0); }
    100% { transform: translateX(540px); }
}

@keyframes slide {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); }
}

@keyframes slideOut {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%);}
}