@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

:focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--colors-background)), 0 0 0 4px rgb(var(--colors-basic)) !important;
    outline: none !important
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.react-Slidy {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: transparent;
    min-height: 50px;
    position: relative;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.react-Slidy,
.react-Slidy > ul,
.react-Slidy > ul > li {
    height: 100% !important;
}

.react-Slidy-arrow {
    -webkit-align-items: center;
    align-items: center;
    bottom: 0;
    display: -webkit-flex;
    display: flex;
    margin: auto 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .3s ease;
    width: auto;
    z-index: 1
}

.react-Slidy-arrowLeft {
    left: 0
}

.react-Slidy-arrowRight {
    right: 0
}

@media screen and (max-width: 850px) {
    .react-Slidy-arrow {
        display: none
    }
}

.react-Slidy-next, .react-Slidy-prev {
    background: hsla(0, 0%, 100%, .8);
    cursor: pointer;
    height: 20%;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 56px;
    width: 40px
}

.react-Slidy-next {
    border-radius: 10px 0 0 10px
}

.react-Slidy-next:after {
    border-right: 3px solid #AAAAAA;
    border-top: 3px solid #AAAAAA;
    content: "";
    display: inline-block;
    height: 24px;
    margin-right: 6px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 24px
}

.react-Slidy-prev {
    border-radius: 0 10px 10px 0
}

.react-Slidy-prev:after {
    border-right: 3px solid #AAAAAA;
    border-top: 3px solid #AAAAAA;
    content: "";
    display: inline-block;
    height: 24px;
    margin-left: 6px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    width: 24px
}

.react-Slidy--fullHeight, .react-Slidy--fullHeight > div li img {
    height: 100%
}

.react-Slidy--fullWidth > div li img {
    width: 100%
}

.react-Slidy--contain li img {
    object-fit: contain
}

.react-Slidy--cover li img {
    object-fit: cover
}

.react-Slidy:hover > .react-Slidy-arrow {
    opacity: 1
}

.react-Slidy:hover > .react-Slidy-arrow[disabled] {
    opacity: .2
}

.react-Slidy > div {
    font-size: 0;
    max-height: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    width: 100%
}

.react-Slidy > div > ul {
    display: block;
    list-style: none;
    padding: 0;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    width: 100%;
    will-change: transform, transition-timing, transition-duration
}

.react-Slidy > div > ul > li {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 100%
}

.react-Slidy > div img, .react-Slidy > div > ul > li {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.react-Slidy > div img {
    -webkit-backface-visibility: hidden;
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    -webkit-perspective: 1000;
    pointer-events: none;
    touch-action: none
}


.re-CardMultimediaCounter {
    bottom: 8px;
    color: #FFFFFF;
    left: 8px;
    position: absolute
}

.re-CardMultimediaCounter, .re-CardMultimediaCounterBadge {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex
}

.re-CardMultimediaCounterBadge {
    background: color-mix(in srgb, var(--c-gray-dark-4), transparent 50%);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 400;
    height: 24px;
    padding: 2px 8px
}

.re-CardMultimediaCounterBadge--isMapCard {
    padding: 2px 0 2px 8px
}

.re-CardMultimediaCounterBadge--vgo {
    height: 24px;
    margin-left: 4px
}

.re-CardMultimediaCounterBadge--vgo img {
    height: 24px;
    width: 24px
}

.re-CardMultimediaCounterBadge:not(:first-of-type) {
    margin-left: 4px;
    padding-bottom: 4px
}

.re-CardMultimediaLabelsLeft, .re-CardMultimediaLabelsRight, .re-CardMultimediaLabelsRightOneLine {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    left: 8px;
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 8px
}

.re-CardMultimediaLabelsLeft--isMapCard {
    -webkit-flex-direction: column;
    flex-direction: column;
    row-gap: 8px
}

.re-CardMultimediaLabelsRight {
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-left: auto
}

.re-CardMultimediaLabelsRight .re-CardMultimediaLabels-label {
    margin-bottom: 8px;
    margin-right: 0
}

.re-CardMultimediaLabelsRightOneLine {
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    margin-left: auto
}

.re-CardMultimediaLabelsRightOneLine .re-CardMultimediaLabels-label {
    margin-bottom: 8px;
    margin-left: 4px;
    margin-right: 0
}

.re-CardMultimediaLabels-label {
    -webkit-align-items: center;
    align-items: center;
    border-radius: 16px;
    color: #FFFFFF;
    display: -webkit-inline-flex;
    display: inline-flex;
    font-size: 10px;
    font-weight: 600;
    height: 20px;
    margin-right: 4px;
    padding: 2px 8px;
    text-transform: uppercase
}

.re-CardMultimediaLabels-label--top {
    background: color-mix(in srgb, var(--c-gray-dark-4), transparent 50%)
}

.re-CardMultimediaLabels-label--vgo {
    background-color: var(--c-accent);
    padding-left: 0
}

.re-CardMultimediaLabels-label--vgo img {
    height: 20px;
    margin-right: 4px;
    width: 20px
}

.re-CardMultimediaLabels-label--more-properties {
    background: color-mix(in srgb, var(--c-gray-dark-3), transparent 20%)
}

.re-CardMultimediaLabels-label--isOnline, .re-CardMultimediaLabels-label--opportunity {
    background: var(--c-accent);
    color: var(--c-gray-light-5)
}

.re-CardMultimediaLabels-label--isOnline {
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    height: 30px;
    text-transform: inherit
}

.re-CardMultimediaLabels-label--isOnline-literal {
    margin-left: 8px
}

.re-CardMultimediaLabels-label--newBuild {
    background: #FFFFFF;
    color: var(--c-gray-dark-3)
}

.re-CardMultimediaLabels-label--advertising, .re-CardMultimediaLabels-label--visited {
    background: var(--c-gray)
}

.re-CardMultimediaLabels-label--hasSubsidies {
    background: var(--c-secondary-dark-2)
}

.re-CardMultimediaLabels-label--inProgress {
    background: var(--c-alert)
}

.re-CardMultimediaLabels-label--finished {
    background: var(--c-success)
}

.re-CardMultimediaLabels-label--publicationTimeAgo {
    background: var(--c-secondary-dark-2)
}


.re-CardMultimediaSlider-arrow {
    background: hsla(0, 0%, 100%, .55);
    border-radius: 20px;
    display: -webkit-flex;
    display: flex;
    height: 40px;
    -webkit-justify-content: center;
    justify-content: center;
    margin: auto 8px;
    width: 40px
}

.re-CardMultimediaSlider-arrow.react-Slidy-arrow {
    border: 0;
    cursor: pointer
}

.re-CardMultimediaSlider-arrow.react-Slidy-arrowLeft {
    left: 4px
}

.re-CardMultimediaSlider-arrow.react-Slidy-arrowRight {
    right: 4px
}

.re-CardMultimediaSlider-arrow.react-Slidy-arrow:focus {
    opacity: 1
}

.re-CardMultimediaSlider-arrow:hover {
    background: #FFFFFF
}

.re-CardMultimediaSlider-arrow:after {
    border-right: 2px solid var(--c-gray-dark-1);
    border-top: 2px solid var(--c-gray-dark-1);
    content: "";
    height: 14px;
    width: 14px
}

.re-CardMultimediaSlider-arrow--left:after {
    -webkit-transform: translateX(3px) rotate(-135deg);
    transform: translateX(3px) rotate(-135deg)
}

.re-CardMultimediaSlider-arrow--right:after {
    -webkit-transform: translateX(-3px) rotate(45deg);
    transform: translateX(-3px) rotate(45deg)
}

.re-CardMultimediaSlider-arrow--isMapArrow {
    height: 32px;
    width: 32px
}

.re-CardMultimediaSlider-arrow--isMapArrow:after {
    height: 11px;
    width: 11px
}

.re-CardMultimediaSlider {
    height: fit-content;
    background: var(--c-gray-light-4);
    overflow: hidden;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.re-CardMultimediaSlider-ssr .react-Slidy ul li:first-child .re-CardMultimediaSlider-image {
    -webkit-filter: blur(5px);
    filter: blur(5px)
}

.re-CardMultimediaSlider .react-Slidy.custom-slidy .react-Slidy-arrow {
    opacity: 1
}

.re-CardMultimediaSlider .react-Slidy.custom-slidy .re-CardMultimediaSlider-arrow {
    background-color: #FFFFFF
}

body.os-iOS .re-CardMultimediaSlider-arrow {
    padding: 0
}

body.os-iOS .re-CardMultimediaSlider-arrow:after {
    height: 10px;
    width: 10px
}

body.os-iOS .re-CardMultimediaSlider .react-Slidy-arrow {
    opacity: .75
}

/* - - - - */

.sui-AtomIcon {
    background: transparent;
    border: none;
    color: inherit;
    display: inherit;
    overflow: visible;
    padding: 0;
    width: auto;
}

.sui-AtomIcon > span {
    display: inherit;
}

.sui-AtomIcon.sui-AtomIcon--size-small svg {
    height: 16px;
    width: 16px;
}

.sui-AtomIcon.sui-AtomIcon--color-currentColor svg {
    fill: currentColor;
}

.sui-AtomIcon svg {
    vertical-align: middle;
}

.sui-AtomIcon svg path {
    stroke: none !important;
}

/* - - - - */

/* Additional Styles */
.re-CardMultimediaSlider img {
    aspect-ratio: 16 / 10;
}

.re-CardMultimediaSlider {
    width: 100%;
    height: 100%;
}

.react-Slidy--fullWidth {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slider-track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    user-select: none;
    transform: translateX(0);
    transition: transform 0.3s ease;
}

.slider-track li {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.slider-track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

body .re-CardMultimediaLabels-label--advertising,
body .re-CardMultimediaLabels-label--visited {
    background: color(srgb 0.113725 0.113725 0.113725 / 0.5)
}

.mms-slider-counter {
    align-self: center;
    line-height: 1;
    font-size: 12px;
    font-weight: 500;
}

.react-Slidy--fullWidth > ul > li {
    flex: 0 0 100%;
}

.react-Slidy > .react-Slidy-arrow {
    opacity: 1;
}

.property-sponsored .media-slider-container {
    flex-grow: 1;
}

.property-sponsored .thumbnail-item {
    /*border: 2px solid transparent;*/
    transition: border-color 0.2s ease;
    border-radius: 4px;
    overflow: hidden;
}

/*.property-sponsored .thumbnail-item:hover {
    border-color: #3B82F6;
}

.property-sponsored .thumbnail-item.active {
    border-color: #1D4ED8;
}*/

@media (width >= 80rem) {
    .property-sponsored .media-slider-container {
        flex-basis: 60%;
        max-width: 60%;
    }
}

/* Add these styles at the end of your existing file */

/* Thumbnail slider container */
.thumbnail-slider-container {
    position: relative;
    width: 100%;
    margin-top: 8px;
    overflow: hidden;
}

/* Hide scrollbar but allow scrolling */
.thumbnail-slider-container::-webkit-scrollbar {
    display: none;
}

/* Thumbnail track - holds all thumbnails */
.thumbnail-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
    gap: 0.5rem;
    width: auto !important;
    margin-left: 0 !important;
}

/* Individual thumbnail items */
.thumbnail-item {
    /*flex: 0 0 calc(33.333% - 0.34rem);*/
    flex: 0 0 auto;
    aspect-ratio: 16/10;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Thumbnail image styling */
.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 16/10;
    transition: opacity 0.2s ease;
}

/* Hover effects */
.thumbnail-item:hover {
    opacity: 0.9;
}

.thumbnail-item:hover img {
    opacity: 0.8;
}

/* Active state */
/*.thumbnail-item.active-thumbnail {
    border: 2px solid #3b82f6;
}*/

/* Loading state */
.thumbnail-item.loading img {
    filter: blur(2px);
}

/* Error state */
.thumbnail-item.error {
    background-color: #FEF2F2;
}

/* For sponsored properties */
.property-sponsored .thumbnail-slider-container {
    flex-shrink: 0;
    padding: 0;
    margin-bottom: 8px;
}

/*.property-sponsored .thumbnail-item {
    border: 2px solid transparent;
}

.property-sponsored .thumbnail-item:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.property-sponsored .thumbnail-item.active-thumbnail {
    border-color: #3b82f6;
}*/

/* Responsive adjustments */
@media (max-width: 768px) {
    .thumbnail-slider-container {
        margin-top: 4px;
    }

    .thumbnail-track {
        gap: 0.25rem;
    }

    .thumbnail-item {
        flex: 0 0 calc(33.333% - 0.17rem);
    }
}

/* Smooth transitions for infinite effect */
.thumbnail-track.no-transition {
    transition: none;
}

/* Special handling for last items */
.thumbnail-track.end-mode {
    justify-content: flex-end;
}