/* Minification failed. Returning unminified contents.
(8,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(56,35): run-time error CSS1046: Expect comma, found '250'
(56,42): run-time error CSS1046: Expect comma, found ')'
(201,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(372,30): run-time error CSS1038: Expected hex color, found '#fff0'
(391,1): run-time error CSS1019: Unexpected token, found '@'
(391,2): run-time error CSS1019: Unexpected token, found '@keyframes'
(392,8): run-time error CSS1035: Expected colon, found '{'
(397,1): run-time error CSS1019: Unexpected token, found '@'
(397,2): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(398,8): run-time error CSS1035: Expected colon, found '{'
(764,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(765,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(766,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(767,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(768,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(769,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(770,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(771,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(772,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(773,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(774,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(775,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(776,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(777,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(778,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(783,28): run-time error CSS1039: Token not allowed after unary operator: '-semantic-primary-deep-blue'
(803,17): run-time error CSS1039: Token not allowed after unary operator: '-semantic-white'
(804,21): run-time error CSS1039: Token not allowed after unary operator: '-headers-h2-font-size'
(805,23): run-time error CSS1039: Token not allowed after unary operator: '-headers-h2-line-height'
(838,28): run-time error CSS1039: Token not allowed after unary operator: '-semantic-BKG-white-16'
(850,21): run-time error CSS1039: Token not allowed after unary operator: '-regular-font-size'
(885,21): run-time error CSS1039: Token not allowed after unary operator: '-regular-font-size'
(886,23): run-time error CSS1039: Token not allowed after unary operator: '-body-large-line-height'
(905,28): run-time error CSS1039: Token not allowed after unary operator: '-semantic-BKG-dark'
(906,17): run-time error CSS1039: Token not allowed after unary operator: '-semantic-white'
(926,23): run-time error CSS1039: Token not allowed after unary operator: '-headers-h3-font-weight'
(927,21): run-time error CSS1039: Token not allowed after unary operator: '-headers-h3-font-size'
(929,26): run-time error CSS1039: Token not allowed after unary operator: '-mobile-headers-h3-letter-spacing'
(930,23): run-time error CSS1039: Token not allowed after unary operator: '-headers-h3-line-height'
(933,22): run-time error CSS1039: Token not allowed after unary operator: '-mobile-headers-h3-font-style'
(937,17): run-time error CSS1039: Token not allowed after unary operator: '-semantic-type-black'
(938,28): run-time error CSS1039: Token not allowed after unary operator: '-semantic-white'
(940,24): run-time error CSS1039: Token not allowed after unary operator: '-collection-surfaces-border'
(941,22): run-time error CSS1039: Token not allowed after unary operator: '-surfaces-l0'
(945,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1197,25): run-time error CSS1030: Expected identifier, found '#playVideoSay'
(1197,38): run-time error CSS1031: Expected selector, found ')'
(1197,38): run-time error CSS1025: Expected comma or open brace, found ')'
(1318,25): run-time error CSS1030: Expected identifier, found '#playVideoSay'
(1318,38): run-time error CSS1031: Expected selector, found ')'
(1318,38): run-time error CSS1025: Expected comma or open brace, found ')'
(1479,17): run-time error CSS1039: Token not allowed after unary operator: '-status-warning'
 */
.footer-disclaimer {
    margin-top: 16px;
    padding-top: 12px;
    font-size: 12px;
}

#not {
    color: var(--main-color);
}

.h_not {
    font-weight: bold;
    padding-right: 20px;
}

.price-min-max::after {
    content: '₪';
}

@media (max-width: 1199px) {
    .ShowRank #rank-1 {
        display: none;
    }
}

@media (max-width: 991px) {
    body[data-is-iframe="true"].all-tabs .firstTab {
        margin-right: 0 !important;
    }

    .spcard-tabs {
        position: sticky;
        top: 145px;
        background-color: white;
    }

    .spcard-tabs2 {
        position: sticky;
        top: 163px !important;
        background-color: white;
    }

    .all-tabs .firstTab {
        margin-right: 74px;
    }

    #attentionModal, #do-not-want, #assosiationModal, #explain-ir {
        bottom: auto;
    }

    #detailsTab {
        top: 13px;
        position: absolute;
        right: 0;
        z-index: 1;
        background-color: rgb(250 250 252);
    }

    .junior-background .data-divider, .junior-background .rank-count {
        display: none;
    }

    .junior-explain-mobile {
        font-size: 16px
    }

    .all-tabs #detailsTab {
        width: auto;
    }

    .basic-tabs .firstTab {
        margin-right: 127px;
    }



    .all-tabs #detailsTab .hidden-lg span {
        display: none;
    }

    .all-tabs #detailsTab .hidden-lg img {
        margin: 0 8px;
        width: 32px;
    }
}

.all-tabs-scroll {
    overflow-x: scroll;
    white-space: nowrap
}

    .all-tabs-scroll::-webkit-scrollbar {
        display: none;
    }

#crash-sentence-tip {
    z-index: 997;
}

#detailsTab .hidden-lg img {
    margin-left: 5px;
    width: 20px;
}

.tb {
    height: 43px;
    position: relative;
    border-left: 1px solid #ddd;
    width: 33.33%;
}



.header {
    border-bottom: none;
}


@media only screen and (min-width: 992px) {
    /*add drag-to-scroll*/
    .all-tabs-scroll {
        display: flex;
        cursor: grab;
        user-select: none; /* Prevent text selection while dragging */
    }
        /*add drag-to-scroll*/
        .all-tabs-scroll.active {
            cursor: grabbing;
        }

    .tb {
        width: auto;
        padding: 0 20px;
    }

    .spcard-tabs {
        position: sticky;
        top: 127px;
        background-color: white;
    }

    .flex-desktop-container {
        display: flex;
    }
}

.disabled-filters #scroll-filter {
    overflow: hidden;
    pointer-events: none;
    opacity: 0.5
}

@media (min-width: 992px) and (max-width: 1025px) {
    .spcard-tabs {
        position: sticky;
        top: 143px;
        background-color: white;
    }
}


@media only screen and (min-device-width: 398px) and (max-device-width: 767px) {

    #playVideoSay {
        max-width: 160px;
    }

        #playVideoSay button img {
            margin-left: 40px;
        }
}

@media (max-width:500px) {
    /* The full-width rule for horizontal VideoSay clips now lives in Site.css,
       keyed off .video-modal so it applies to every VideoSay modal. */

    #attentionModal .deep-blue {
        padding-top: 20px !important;
    }
}

#stastistics [class^="col-"] span {
    font-size: 1.6em;
    display: block;
    line-height: .7;
}

.spcard-top h4 {
    margin-top: 0px;
    text-align: right;
}

.spcard-top .rating-area .col-xs-12, .spcard-top .col-xs-4 {
    padding-right: 0px;
    padding-left: 0px;
}

.spcard-top .rating {
    text-align: right;
    font-size: 58px;
    color: var(--main-color);
    padding-left: 20px;
    line-height: 1.2;
}

.spcard-top .rating-caption {
    font-size: 1.125em;
    border-bottom: 1px solid #c8c8c8;
}

.spcard-top {
    padding-top: 12px;
    padding-bottom: 10px;
    text-align: center;
}

.spcard-tabs {
    z-index: 990;
}

#ranks {
    height: 100%;
}



@media (max-width: 326px) {
    .mobile-many-ranks {
        padding-bottom: 0px;
        padding-top: 0px;
    }
}

#stastistics td {
    padding: 0px;
    border-bottom: 1px solid #fbfbfb;
    border-top: 0px;
    vertical-align: bottom;
    padding-top: 1em;
}

#stastistics {
    display: none;
}

    #stastistics table tr:first-child td {
        padding-top: 0;
    }

#details {
    display: none;
    padding: 20px 0;
}

    #details .about-sp, #About .about-sp {
        padding-right: 20px;
        padding-left: 20px;
    }

.spdetails-label {
    color: #787878;
}

@media only screen and (min-width: 992px) {

    #share-sp #filter + .left-float {
        margin-top: 0px !important;
    }

    #share-sp #filter {
        margin-top: 9px;
    }

    #share-sp .share-btn img {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) {
    #details .col-md-6.about-sp {
        float: right;
    }
}

#details div.spdetails-label {
    padding: 0;
}

#showLicense {
    height: 100%;
    color: #fff;
    z-index: 9999;
    position: fixed;
    top: 102px;
    width: 100%;
    right: 0;
}

    #showLicense #closeLicense {
        float: left;
        height: 20px;
    }

    #showLicense .image-container img {
        max-height: 60vh;
        width: auto !important;
        max-width: 100%;
    }

#filter-feedbacks-count {
    font-size: 1.375em;
    padding-left: 2px;
    font-weight: bold;
}

#feedbacks-filter, .sp-feedbacks-filter {
    padding: 20px;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background-color: #4a4d4f;
    font-size: 1.125em;
    color: #fff;
}

#details.block ~ #feedbacks-filter {
    display: none;
}

#share-sp .share-btn:first-of-type {
    padding-left: 8px;
    padding-right: 2px;
}

#share-sp .share-btn:last-child {
    padding-right: 6px;
}

#share-sp .share-btn img {
    height: 21px;
}

.video-tip-btn {
    padding: 10px 0;
    border-bottom: 1px solid #d8d8d8;
    width: 230px;
    text-align: right;
}

    .video-tip-btn:first-child {
        border-top: 1px solid #d8d8d8;
    }

#attentionModal .modal-body.deep-blue {
    padding-top: 0;
    min-height: 305.2px !important;
}

.main-t {
    width: 170px;
    background-color: #fff;
    border-radius: 4px 0 0 4px;
    box-shadow: 0 0 10px rgba(0,0,0,.15) inset, 0 6px 10px rgba(0,0,0,.15);
    text-align: right;
    font-size: 40px;
    padding: 0 30px 0 0;
}

.cornered {
    width: 10px;
    border-top: 10px solid #fff;
    border-right: 10px solid #fff0;
}
/** SPINNER CREATION **/

.loader {
    position: relative;
    text-align: center;
    margin: 15px auto;
    z-index: 9999;
    display: block;
    width: 80px;
    height: 80px;
    border: 10px solid rgba(0, 0, 0, .3);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

.edge-left-border::after {
    content: "";
    background: #d0d0d0;
    position: absolute;
    top: 4px;
    left: 0;
    height: -webkit-calc(100% - 15%);
    width: 1px;
}

.before::before {
    content: "";
    background: #d0d0d0;
    position: absolute;
    right: 0;
    bottom: 8px;
    height: 43px;
    width: 1px;
}

.light-partial-edge-bottom-border::after {
    content: "";
    background: #d4d4d4;
    position: absolute;
    bottom: 1px;
    left: 0;
    height: 1px;
    width: -webkit-calc(100% - 30px);
}

#ranks #widgetMidrag h2 {
    margin-left: 24px;
}

.available-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 1px 3px;
}

@media only screen and (max-width: 992px) {
    .mobile-height {
        height: 115px !important;
    }

    .mobile-padding-10 {
        padding-top: 13px !important;
    }

    .mobile-padding-13 {
        padding-top: 16px !important;
    }
}

#attentionModal {
    max-height: calc(100vh - 20px);
    overflow-y: auto;
}

@media (max-width: 767px) {
    #share-icons {
        display: none;
    }
}

@media (min-width: 767px) {
    #main-share-icon {
        display: none;
    }

    .my-price-text {
        padding: 0 10px;
    }
}

#crash-sentence {
    position: absolute;
    width: 100%;
    top: 243px;
}


.bubble-sentence {
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.14);
    border: solid 2px #b6bdca;
    background-color: #ffffff;
    background-color: white;
    z-index: 997;
    margin: 0 15px;
    padding-right: 40px;
    font-size: 22px;
    border-radius: 1rem;
    padding: 20px 25px;
    margin-top: -4px;
    position: relative;
}

    .bubble-sentence::before {
        content: "";
        position: absolute;
        border-style: solid;
        border-color: #b6bdca transparent;
        width: 0;
        right: 2.9em;
        border-width: 0 10px 10px;
        height: 0;
        bottom: 100%;
    }

    .bubble-sentence:after {
        content: "";
        position: absolute;
        border-style: solid;
        border-color: #fff transparent;
        width: 0;
        height: 0;
        bottom: 100%;
        right: 3em;
        border-width: 0 8px 8px;
    }

.tip-midrag {
    /*height: 268px;*/
    padding: 32px 0 32px 94px;
    background-color: #362641;
    color: #ffffff;
    width: -webkit-fill-available;
    position: absolute;
    margin: 0 26px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.icon-tip-midrag {
    text-align: center;
    padding-top: 11px;
}

.icon-tip-width {
    width: 43px;
}

.tip-text {
    font-size: 20px;
    padding-top: 15px;
    line-height: 1.45;
    letter-spacing: 0.3px;
}

.crash-sentence-btn {
    display: block;
    width: fit-content;
    margin: 12px auto 0 0;
    padding: 6px 24px;
    background-color: #362641;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
}

    .crash-sentence-btn:hover,
    .crash-sentence-btn:focus {
        background-color: #4a3556;
        color: #ffffff;
    }

/* sits on its own row above the sentence; the × glyph draws at roughly
   half its font-size, hence the large value for a mark of about 24px */
.crash-sentence-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 24px;
    margin: 0 0 6px 0;
    padding: 0;
    background: none;
    border: none;
    color: #362641;
    font-size: 54px;
    line-height: 0;
    cursor: pointer;
}

    .crash-sentence-close:hover,
    .crash-sentence-close:focus {
        color: #7a6a85;
    }

/* hold the sentence off the right edge, so it reads as one block with the
   close button sitting above it rather than running out past it */
#crash-sentence[data-active="true"] .bubble-sentence > span {
    display: block;
    padding-right: 45px;
}

/* the close button's row and the dismiss button's own margin already give
   the bubble its breathing room, so take that back off the padding and the
   sticky bubble keeps covering about as much of the card as it used to */
#crash-sentence[data-active="true"] .bubble-sentence {
    padding-top: 10px;
    padding-bottom: 8px;
}

/* the close button's row pushed the dismiss button down by its own height;
   take that back off the gap above it so the bubble ends up the height it
   was before the button existed */
#crash-sentence[data-active="true"] .crash-sentence-btn {
    margin-top: 4px;
}

#crash-sentence[data-active="true"] {
    position: sticky;
    top: 135px;
    z-index: 997;
    height: 0;
    overflow: visible;
    margin-top: -20px;
}

@media (max-width: 991px) {
    #crash-sentence[data-active="true"] {
        top: 150px;
    }
}

@media (max-width: 720px) {

    #crash-sentence {
        top: 184px;
    }

    .bubble-sentence {
        width: 96%;
        /* height: 69px; */
        margin: -4px 8px 0 8px;
        font-size: 20px;
        padding: 20px 16px;
    }

        .bubble-sentence::before {
            right: 2.32em;
            top: -11px;
        }

        .bubble-sentence:after {
            right: 2.4em;
        }

    .tip-midrag {
        /* height: 268px; */
        padding: 32px 0 32px 24px;
        margin-right: 16px;
        width: 92%;
    }

    .icon-tip-midrag {
        padding-top: 24px;
    }

    .icon-tip-width {
        width: 35px;
    }

    .tip-text {
        font-size: 16px;
    }

    .crash-sentence-btn {
        font-size: 14px;
        padding: 5px 20px;
    }

    .crash-sentence-close {
        height: 20px;
        margin-bottom: 4px;
        font-size: 46px;
    }

    #crash-sentence[data-active="true"] .bubble-sentence > span {
        padding-right: 32px;
    }

    #crash-sentence[data-active="true"] .bubble-sentence {
        padding-top: 10px;
        padding-bottom: 8px;
    }

    /* the close button's row is 6px shorter here, so give 6px back */
    #crash-sentence[data-active="true"] .crash-sentence-btn {
        margin-top: 10px;
    }

    .mobile-no-padding-r {
        padding-right: 0 !important;
    }

    .my-price-text {
        padding: 0 15px;
    }
}
/*personalPrice List*/
.ILS-icon {
    border: 2px solid black;
    /*      padding: 5px 5px 3px 5px;*/
    padding: 3px 3px 0px 3px;
    border-radius: 25px;
    font-weight: bold;
}

.long-line {
    height: 1px;
    background-color: #333;
    opacity: 0.25;
    margin: 10px 0;
}

.inner-container {
    padding-right: 42px;
    float: right;
}

.tax-text {
    padding: 10px 0;
    color: #515151;
}

.flex-container {
    display: flex;
}

.no-Breadcrumbs {
    top: 82.5px;
}

@media (max-width: 991px) {
    .no-Breadcrumbs {
        top: 54px;
    }

    .no-Breadcrumbs-sticky .top-sticky-category {
        top: 124px;
    }

    .no-Breadcrumbs-sticky #filterContainer {
        top: 170px;
    }

    #detailsTab {
        padding: 7px 13px;
    }
}


/* modal new*/

:root {
    --headers-h2-font-size: 24px;
    --headers-h2-line-height: 30px;
    --regular-font-size: 20px;
    --body-large-line-height: 22px;
    --headers-h3-font-size: 22px;
    --headers-h3-font-weight: 700;
    --headers-h3-line-height: 28px;
    --surfaces-l0: 1px 1px 3px 0px rgba(0, 0, 0, 0.06), 1px 1px 2px 0px rgba(0, 0, 0, 0.02);
    --semantic-type-black: rgba(34, 34, 34, 1);
    --semantic-BKG-white-16: rgba(255, 255, 255, 0.16);
    --semantic-BKG-dark-8: rgba(54, 38, 65, 0.08);
    --semantic-BKG-dark: rgba(54, 38, 65, 1);
    --semantic-primary-deep-blue: rgba(0, 111, 194, 1);
    --collection-surfaces-border: rgba(223, 221, 225, 1);
    --semantic-white: rgba(255, 255, 255, 1);
}

.modal .custom-modal, .modal .custom-modal-header {
    border-radius: 8px 8px 0 0;
    background-color: var(--semantic-primary-deep-blue);
}

.modal .custom-modal-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px;
    padding: 28px 40px 24px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.modal .text-wrapper-title {
    align-self: stretch;
    text-align: right;
    font-weight: 700;
    color: var(--semantic-white);
    font-size: var(--headers-h2-font-size);
    line-height: var(--headers-h2-line-height);
    position: relative;
    margin-top: -1px;
    direction: rtl;
}

.modal .paragraphs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    padding: 0px 40px 32px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.modal .divider {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.modal .rectangle {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1px;
    background-color: var(--semantic-BKG-white-16);
}


.modal .flexcontainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.modal .text {
    font-size: var(--regular-font-size);
    text-align: right;
    color: #ffffff;
}



.modal .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 15px 24px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: white;
    border-radius: 0 0 8px 8px;
}

.modal .paragraph-text {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px 20px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    text-align: right;
}

.modal .div {
    flex: 1;
    font-size: var(--regular-font-size);
    line-height: var(--body-large-line-height);
    position: relative;
    margin-top: -1px;
    direction: rtl;
}

.modal .buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    padding: 0 20px;
}

.modal .primary-button {
    background-color: var(--semantic-BKG-dark);
    color: var(--semantic-white);
}

.modal .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px 14px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    border-radius: 6px;
}

.modal .btn-text {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-weight: var(--headers-h3-font-weight);
    font-size: var(--headers-h3-font-size);
    text-align: center;
    letter-spacing: var(--mobile-headers-h3-letter-spacing);
    line-height: var(--headers-h3-line-height);
    white-space: nowrap;
    direction: rtl;
    font-style: var(--mobile-headers-h3-font-style);
}

.modal .secondary-button {
    color: var(--semantic-type-black);
    background-color: var(--semantic-white);
    border: 1px solid;
    border-color: var(--collection-surfaces-border);
    box-shadow: var(--surfaces-l0);
}

.magenta-modal {
    background-color: var(--main-color);
    color: white;
    text-align: right;
    padding: 20px 50px;
    border-radius: 5px;
}

.border-bottom {
    padding-right: 0 !important;
    padding-left: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.16);
    margin-bottom: 20px;
}

@media (max-width: 800px) {
    .model-content-in, .modal-content {
        max-height: calc(100vh - 80px); /* Set the maximum height (adjust 80px based on your modal header and footer height) */
        overflow-y: auto; /* Enable vertical scrolling if needed */
    }
}

.tab-container {
    border-top: 4px #fafafc solid;
    padding-top: 12px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: inline-flex;
    position: relative;
    height: 54px;
}

.spcard-tab-active {
    background: white !important;
    box-shadow: 1px -1px 2px rgba(0, 0, 0, 0.08);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-left: 1px #DFDDE1 solid;
    border-top: 4px #BD1954 solid;
    border-right: 1px #DFDDE1 solid;
    justify-content: flex-start;
}

.spcard-tab {
    cursor: pointer;
}

.tab-button {
    height: 100%;
    text-align: right;
    color: #444444;
    word-wrap: break-word
}

.spcard-tab-active .tab-button {
    color: black !important;
}

.sp-img img {
    border-radius: 6px;
}

.pipe-after {
    content: "";
    opacity: 0.16;
    background: #7d6e75;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 80%;
    width: 1px;
}

.mask {
    mask: linear-gradient(to right, transparent, #fff);
}
/* Apply a gradient mask and blur to non-active tabs */
/*.tab-container:not(.spcard-tab-active) {
        -webkit-mask: linear-gradient(to left, transparent, rgb(255, 255, 255), transparent);
        mask: linear-gradient(to left, transparent, rgb(255, 255, 255), transparent);
        filter: blur(4px);*/ /* Add blur */
/*transition: filter 0.3s ease;*/ /* Smooth transition for blur effect */
/*}*/

/* Remove the blur and mask from active tab */
/*.spcard-tab-active {
        -webkit-mask: none !important;
        mask: none !important;
        filter: none;*/ /* Remove blur */
/*}*/
.sp-img {
    border-radius: 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.spcard-top-container {
    position: relative;
    width: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    /* overflow: hidden;*/
    justify-content: flex-start;
    align-items: flex-end;
    gap: 300px;
    display: inline-flex
}

.flex-start-container {
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.gap-16 {
    gap: 16px;
}

.gap-8 {
    gap: 8px;
}

.divider-spimg {
    width: 1px;
    height: 106.07px;
    background: rgba(54, 38, 65, 0.16);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.stretch-container {
    align-self: stretch;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    display: inline-flex
}

.sp-name {
    text-align: right;
    color: #BD1954;
    font-weight: 700;
    word-wrap: break-word
}

.general-rank-container {
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    display: flex
}

.flex-start-colmn {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex
}

.data-title {
    text-align: right;
    color: #777777;
    font-weight: 400;
    line-height: 18px;
    word-wrap: break-word;
}

.data-text {
    text-align: right;
    font-weight: 400;
    word-wrap: break-word;
}

.general-rank {
    color: #BD1954;
}

.feedback-count {
    color: #444444
}

.data-divider {
    width: 1px;
    background: rgba(54, 38, 65, 0.16);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.spcard-tab-active::after {
    position: absolute;
    background: white;
    height: 3px;
    width: 100%;
    content: ' ';
    right: 0;
    z-index: 9999;
    bottom: -3px;
}

.category-general-text {
    color: #777777;
    font-weight: 300;
    word-wrap: break-word
}

.selected-category-container {
    color: #222222;
    font-weight: 300;
    word-wrap: break-word
}

.scroll-fade-left {
    position: absolute;
    top: 16px;
    bottom: 5px;
    width: 80px;
    pointer-events: none;
    z-index: 990;
}

.scroll-fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 15%, rgba(255, 255, 255, 0.4) 85%, transparent 100%);
    /* background: linear-gradient(to right, rgba(255, 255, 255, 1), rgb(255 255 255 / 39%));
        background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));*/
}

@media (max-width: 980px) {

    .category-area {
        font-size: 16px;
        line-height: 18px;
    }

    .sp-name {
        font-size: 28px;
        line-height: 30px;
    }

    .gap-sp-img {
        gap: 20px;
    }

        .gap-sp-img:has(#playVideoSay) {
            gap: 15px;
        }

    .spcard-top-container {
        /* auto + min-height so the row grows for the 138px photo on tablet */
        height: auto;
        min-height: 154.07px;
        padding: 24px;
    }

    .sp-name {
        font-size: 24px;
    }

    .data-title {
        font-size: 16px;
    }

    .data-text {
        font-size: 36px;
    }

    .general-rank-container {
        height: 58px;
    }

    .data-divider {
        height: 58px;
    }

    .playVideoSay-container {
        height: 106px;
        position: relative;
    }

    .play-icon {
        width: 28.8px;
        height: 28.8px;
    }

    .video-text {
        width: 28px;
        font-size: 16px;
        line-height: 18px;
    }

    .play-icon-gap {
        gap: 10px;
    }

    .spcard-tab {
        border-bottom: 1px #DFDDE1 solid;
    }

    .tab-button {
        font-size: 20px;
        line-height: 26px;
    }

    .top-sticky-category {
        top: 214px;
    }

    #filterContainer {
        top: 260px;
    }
}

@media (min-width: 980px) {
    .category-container {
        padding-bottom: 10px !important;
    }

    .GH-icon {
        padding-left: 10px;
    }

    .top-sticky-category {
        top: 197px;
    }

    #filterContainer {
        top: 247px;
    }

    .no-Breadcrumbs-sticky .top-sticky-category {
        top: 152.5px;
    }

    .no-Breadcrumbs-sticky #filterContainer {
        top: 202.5px;
    }

    .tab-button {
        font-size: 24px;
        line-height: 30px;
    }

    .spcard-tabs {
        border-bottom: 1px #DFDDE1 solid;
    }

    .sp-name {
        font-size: 24px;
        line-height: 28px;
    }

    .spcard-top-container {
        height: 234px;
        padding: 48px 40px;
    }

    .divider-spimg {
        height: 138px;
    }

    .gap-sp-img {
        gap: 40px;
    }

        .gap-sp-img:has(#playVideoSay) {
            gap: 30px;
        }

    .sp-name {
        font-size: 28px;
    }

    .data-title {
        font-size: 22px;
        line-height: 30px;
    }

    .data-text {
        font-size: 56px;
        line-height: 40px;
    }

    .general-rank-container {
        height: 70px;
    }

    .data-divider {
        height: 69px;
    }

    .playVideoSay-container {
        height: 138px;
        position: relative;
    }

    .play-icon {
        width: 49.87px;
        height: 49.87px;
    }

    .video-text {
        width: 49px;
        font-size: 22px;
        line-height: 26px;
    }

    .play-icon-gap {
        gap: 19px;
    }

    .big-font-spcard {
        font-size: 28px;
    }

    #detailsTab {
        padding: 12px 13px;
        min-width: 150px;
    }
}


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

.play-icon-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
}

.video-text {
    color: rgba(119, 119, 119, 1);
    position: absolute;
    bottom: 0;
}

.rectangle-small {
    width: 1px;
    height: 106.07px;
}

.rectangle-tiny {
    width: 1px;
    height: 16px;
}

.GH-icon {
    gap: 9px;
    justify-content: center;
    align-items: end;
    display: flex;
}

.sticky-container {
    position: sticky;
    background-color: white; /* Optional: to avoid transparency when sticky */
    z-index: 990; /* Ensure it stays on top of other elements */
}

.category-container {
    padding-top: 20px;
    padding-bottom: 6px;
    padding-left: 16px;
    padding-right: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 8px;
    display: flex
}

.category-area {
    align-self: stretch;
    padding-left: 12px;
    padding-right: 12px;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 10px;
    display: inline-flex;
}

#filterContainer {
    height: 74px;
    background-color: white;
    z-index: 990;
    position: sticky;
}

.width-20 {
    width: 20px;
    height: 20px;
}

.junior-rank-general {
    font-size: 38px;
    line-height: 0.9;
}

.junior-explain-mobile {
    position: absolute;
    left: 0;
    height: 106px;
    width: 28%;
    border-right: 1px solid rgba(54, 38, 65, 0.16);
    padding: 10px;
}

.junior-explain {
    width: 40%;
    position: relative;
    height: 138px;
}

.junior-explain-container {
    height: 100%;
}

.padding-15 {
    padding: 0 15px;
}

.color-warning {
    color: var(--status-warning, #FA8E25);
}

.share-area {
    bottom: 48px;
    float: left;
    position: absolute;
    left: 40px;
}

.share-btn-icon {
    width: 24px;
    height: 24px;
    padding: 2px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.share-btn-text {
    height: 27px;
    padding-top: 3px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    text-align: right;
    color: #1D85C9;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

.icon-height {
    height: 30px;
    cursor: pointer;
}

.flex-desktop-container-style {
    padding-top: 12px;
    background: rgba(245, 245, 249, 0.48);
    width: 100%;
    border-top: 1px #DFDDE1 solid;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
}

.tab-container-padding {
    padding: 13px;
}

#calendar .padding-40-20-100 {
    padding: 40px 20px 100px;
}

.text-align-left {
    text-align: left;
}

.padding-40-17-100 {
    padding: 40px 17px 100px;
}

.inline-block {
    float: none;
    text-align: center;
}

.margin-right-10 {
    margin-right: 10px;
}

.tab-content-margin {
    padding-bottom: 20px;
    margin-bottom: 15px;
}

.inline-block-price {
    float: left;
    font-weight: bold;
    text-align: left;
    padding: 0;
}

.category-area-inline {
    align-self: stretch;
    padding-left: 12px;
    padding-right: 12px;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 10px;
    display: inline-flex;
}

.border-filter-result {
    padding: 7px 10px 4px;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-right: 10px
}

body[data-is-iframe="true"]#detailsTab {
    display: none;
}

.rating-system-title-container {
    position: absolute;
    right: -10px;
    margin: 30px 0;
}

.midrag-system-content .rating-system-title-container + .video-container,
.midrag-system-content .rating-system-title-container + div {
    margin-top: 130px;
}