iframe {
    width:100%;
}

.imgContainer {
    position:sticky;
    top:0;
    max-width:700px;
}

.substitueImage {
    max-width: 150px;
    height: 80px;
    margin-bottom: 10px;
}

.active .substitueImage {
    border: solid var(--primary-color) 2px;
    border-radius: 3px;
}

.priceContainer strike {
    position: absolute;
    left: 92px;
    top: -8px;
}

.additionalImages {
    width:100%;
    height:auto;
    padding:0;
}


.multiImageSwiper .prevBtnSection {
    left: -15px;
    display: flex;
    position: absolute;
    top: 35%;
    z-index: 3;
    width: 30px;
    height: 30px;
    background-color: white;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    border-radius: 40px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.multiImageSwiper .nextBtnSection {
    right: -15px;
    display: flex;
    position: absolute;
    top: 35%;
    z-index: 3;
    width: 30px;
    height: 30px;
    background-color: white;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    border-radius: 40px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

#FeaturesListTable tr 
{
    border-bottom: solid var(--grey-color-500) 1px;
}


#AdditionalImgContainer {
    max-width:550px;
}


#AdditionalImgContainer .active {
    border: solid var(--primary-color) 2px;
    border-radius: 2px;
}

.productImage {
    width: 100%;
    margin-top: 15px;
}


.buttonProduct {
    height: 50px;
}

.swal2-popup.swal2-toast .swal2-html-container {
    margin: 0 !important;
}


#webDescriptionContainer p span {
    font-family: var(--primaryFont) !important;
}

#webDescriptionContainer *{
    background-color:transparent !important;
}

.substitueProductsContainer {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    padding:20px 0; 
}

.offerSaleBadgeContainer {
    min-width: 130px;
    max-width: 130px;
    background-color: green;
    text-align: center;
    border-radius: 2px;
    margin-left: 10px;
}


.offerSaleBadge {
    color: white;
    font-weight:400;
}

.offersContainer {
    padding-top: 3%;
    padding-bottom: 3%;
    margin-top: 4%;
}

.offers {
    background-color: white;
    position: relative;
    padding: 10px;
}

.offersContainer .active {
    background-color: #b0e0e6;
}


.offersContainer .active:before {
    content: 'Selected Offer';
    position: absolute;
    top: -24px;
    right: 0;
    left: 0;
    text-align: center;
    background-color: #d5edf7;
    padding: 0px 8px;
}


.offerSavings {
    padding: 10px;
    background-color: #bbffbb;
}


#webDescriptionContainer p span {
    font-family: var(--primaryFont) !important;
}

#webDescriptionContainer * {
    background-color: transparent !important;
}


#webDescriptionContainer table {
    max-height: 65px;
    max-width: 720px;
    overflow: hidden;
    display: block;
    transition: max-height 0.5s ease;
    background-color: white !important;
    height: 100%;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.05) 1.95px 1.95px 2.6px;
}


#webDescriptionContainer table tr:first-child {
    opacity: 1;
    display: table-row;
    height: 50px;
    cursor: pointer;
}


#webDescriptionContainer table tr:first-child::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    margin-left: 10px;
    margin-right: 20px;
    transition: content 0.3s ease;
}

#webDescriptionContainer table tr {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}


table.show-all {
    max-height: 2200px !important;
    overflow: visible !important;
}


#webDescriptionContainer table.show-all tr {
    opacity: 1;
}

#webDescriptionContainer table td {
    width: 50% !important;
}

#webDescriptionContainer table.show-all tr:first-child::after {
    content: '\f077';
}

@media(max-width:991px) {
    .productImage {
        max-width:500px;
    }

    #webDescriptionContainer img {
        width:100%;
        height:auto;
    }

    .imgContainer {
        position: initial;
     }
}

@media(max-width:440px) {

    .offerSaleBadge small {
        font-size:14px;
    }

    .offerSaleBadgeContainer {
        min-width:100px; 
        max-width:100px;
    }

}

@media(max-width:370px) {

    .offerSaleBadgeContainer {
       display:none;
    }

}


/*
special offers animatino */
*,
::after,
::before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;

}

::after,
::before {
    --tw-content: "";
}


::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scroll-snap-strictness: proximity;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
}


.invisible {
    visibility: hidden;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-0 {
    inset: 0px;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.mb-9 {
    margin-bottom: 1.25rem;
}


.ml-9 {
    margin-left: 1.25rem;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}



.h-48 {
    height: 12rem;
}



.w-48 {
    width: 100%;
}


.-translate-x-full {
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}


.translate-x-full {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-full {
    --tw-translate-y: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-12 {
    --tw-rotate: -12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-45 {
    --tw-rotate: -45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-90 {
    --tw-rotate: -90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-12 {
    --tw-rotate: 12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45 {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[-40deg\] {
    --tw-rotate: -180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-skew-x-12 {
    --tw-skew-x: -12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.skew-x-12 {
    --tw-skew-x: 12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.items-center {
    align-items: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.overflow-hidden {
    overflow: hidden;
}

.rounded {
    border-radius: 0.25rem;
}


.bg-purple-600 {
    --tw-bg-opacity: 0.8;
    background-color: rgb(191 244 143/ var(--tw-bg-opacity))
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}


.no-underline {
    text-decoration-line: none;
}


.mix-blend-screen {
    mix-blend-mode: screen;
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}


.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-500 {
    transition-duration: 0.5s;
}


.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.group[data-offer-hover="true"] .group-hover\:mb-32 {
    margin-bottom: 8rem;
}


.group[data-offer-hover="true"] .group-hover\:ml-0 {
    margin-left: 0;
}


.group[data-offer-hover="true"] .group-hover\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}


.group[data-offer-hover="true"].group-hover\:-skew-x-12 {
    --tw-skew-x: -12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}


.group[data-offer-hover="true"] .group-hover\:skew-x-12 {
    --tw-skew-x: 12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-offer-hover="true"] .group-hover\:bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity));
}