/*Set some css variables*/
:root {
    --mainColor: #CF0000;
    --lightGrey: #8c8c8c;
    --grey: #474747;
    --hoverMainColor: #B00000;
    --imageBackground: #c9c9c9;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

/*Set styling for the footer social icons*/
.SocialIconButtons {
    font-size: 35px;
    color: white;
}

.SocialIconButtons:hover {
    color: var(--mainColor);
}

/*This datalist thead styling form thead back stop stop button*/
#toTopButton {
    right: -80px;
    position: fixed;
    bottom: 0;
    z-index: 99;
    font-size: 23px;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    font-weight: bold;
    width: 45px;
    height: 45px;
    transition: right 0.2s ease;
}

#toTopButton:hover {
    opacity: 1;
}

/*Added a new fontweight class*/
.fw-medium {
    font-weight: 600;
}

/*Settinf some styling for the table border*/
tr:last-child td:last-child {
    border: none !important;
}

#sitemapTable td {
    padding: 0;
}

#sitemapTable a {
    font-weight: normal;
    text-decoration: none;
    color: black;
}

#navbarDarkDropdownMenuLink {
    height: 34px;
}

.fixedBackgroundImage {
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(40px);
    background-position-y: bottom;
    background-position-x: center;
}

.linkStyle a {
    font-weight: 600;
}

#homePageInfoTabs button {
    border: none;
}

#homePageInfoTabs button.active {
    background: var(--mainColor);
    color: white;
    font-weight: 600;
}

#homePageInfoTabs button.nav-link {
    color: white;
    font-weight: 600;
}

#homePageInfoTabs button.nav-link:hover {
    background-color: white;
    color: var(--mainColor);
}

#homePageInfoTabs button.nav-link.active:hover {
    background-color: var(--mainColor);
    color: white;
    font-weight: 600;
}

#homePageInfoTabs {
    border-bottom: 1px solid var(--mainColor);
}

#homePageObjectTabs button {
    margin: 5px;
}

#homePageObjectTabs button.nav-link {
    border: 1px solid grey;
    color: var(--grey);
}

#homePageObjectTabs button.active {
    border: 1px solid grey;
    color: white;
}

#policyInput:checked {
    background-color: #0d6efd;
    border: none;
}

.blogItem {
    height: 450px;
    background-color: #f3f3f3;
    text-decoration: none
}

.blogItem #image {
    height: 60% !important;
}

#blogDescription {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical
}

#blogTitle {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.blogItemContainer {
    top: -200px;
    max-width: auto;
}


@media (min-width: 1200px) {
    .blogItemContainer {
        max-width: 1100px;
    }
}

.dropdownFilter {
    width: 100%;
    overflow-y: hidden !important;
    padding: 0;
}

.dropdownFilterChild {
    max-height: 450px;
    width: 100%;
    overflow-y: auto;
}

@media (min-width: 576px) {
    .blogItem {
        height: 300px;
    }

    .blogItem #image {
        height: 90% !important;
    }


    #blogDescription {
        display: -webkit-box;
    }

    .dropdownFilter {
        max-width: 400px;
    }
}

.text-grey {
    color: var(--grey);
}

.text-lightgrey {
    color: var(--lightGrey);
}

.favoriteHearth {
    color: #ffffff8f;
}

.favoriteHearth:hover {
    color: white;
}

.form-switch .form-check-input {
    margin-top: auto;
}

.form-check-input:checked {
    /*background-color: var(--mainColor);*/
}

#objectButton::after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 0;
    border-bottom: 12px solid var(--mainColor);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#objectButton:hover::after {
    border-bottom-color: #B00000;
}

.nav-item {
    height: 35px;
}

#shareButton:hover {
    color: var(--grey) !important;
}

.container-sm, .container {
    max-width: 540px;
}

#objectButtons button.nav-link {
    background-color: lightgray;
    border-color: #a4a4a4;
}

#objectButtons button.nav-link:hover {
    background-color: #a4a4a4;
}

#objectButtons button.active {
    background-color: var(--mainColor);
    border-color: var(--mainColor) !important;
}

#objectButtons button.active:hover {
    background-color: var(--hoverMainColor);
}

#objectButtons button.active::after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 0;
    border-bottom: 12px solid var(--mainColor);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#objectButtons button.active:hover::after {
    border-bottom-color: var(--hoverMainColor);
}

/*The fixedButton class is for the buttons that hover over the page*/
.fixedButton {
    z-index: 10000;
    opacity: 0.8;
    background-color: #212529;
}

.fixedButton:hover {
    opacity: 1;
}

/*This sets the contact button for the detail page to visible*/
#contactButton {
    display: block;
}

/* The popup bubble styling. */
.popup-bubble {
    /* Position the bubble centred-above its parent. */
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    user-select: none;
    /* Style the bubble. */
    background-color: white;
    padding: 5px;
    border-radius: 5px;
    font-family: sans-serif;
    overflow-y: auto;
    max-height: 80px;
    text-align: center;
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
    /* Position the div a fixed distance above the tip. */
    position: absolute;
    width: 100%;
}

/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
    cursor: auto;
    height: 0;
    position: absolute;
    /* The max width of the info window. */
    width: 200px;
    transition: opacity 0.5s;
}

/*Styling for the icon in the googlemaps marker*/
.google-maps-icon {
    padding-bottom: 2px;
    font-size: 25px;
    color: rgb(143, 143, 143);
    transition: color 0.5s ease 0s;
}

/*Styling for the count text*/
.google-maps-count {
    padding-top: 2px;
    font-weight: bold;
}

.toggleButton {
    display: block;
}

.listMap {
    display: block;
}

/*This is pagesidepadding on mobile scale*/
.pageSidePadding {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/*This is pagepadding on mobile scale*/
.pagePadding {
    padding: 1.5rem !important;
}

.pageSidePaddingNotOnMobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*Hide all the children to show them via media querys*/
.suppressChildCount > div {
    display: none;
}

/*This is for grids when you scale down to smaller sizes that the count of children decreases*/
.suppressChildCount > div:nth-child(-n+4) {
    display: block;
}

@media (min-width: 576px) {
    /*This is pagesidepadding on not mobile scale*/
    .pageSidePadding {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    /*This is pagepadding on not mobile scale*/
    .pagePadding {
        padding: 3rem !important;
    }

    /*This is for grids when you scale down to smaller sizes that the count of children decreases*/
    .suppressChildCount > div:nth-child(-n+6) {
        display: block !important;
    }
}

/*Down here datalist thead code form the responsive page layout and other styles that need the break point values this media tags need to be at the bottom of the file*/
@media (min-width: 768px) {


    .container-md, .container-sm, .container {
        max-width: 800px;
    }

    .toggleButton {
        display: none !important;
    }

    .listMap {
        display: block !important;
    }

    #itemsList {
        display: block !important;
    }

    /*Changing the line clamp for the blog title*/
    #blogTitle {
        -webkit-line-clamp: 1 !important;
        line-clamp: 1 !important;
    }

    #toggle-map-button {
        display: block !important;
    }

    #map-button-parent {
        transition: width 0.5s ease;
    }
}

@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }

    .specifications-description {
        padding-top: 0px !important;
    }
}

@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1100px;
    }

    /*This is for grids when you scale down to smaller sizes that the count of children decreases*/
    .suppressChildCount > div:nth-child(-n+8) {
        display: block !important;
    }
}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }

    .suppressChildCount > div:nth-child(-n+99) {
        display: block !important;
    }
}

/*
    This class is for the background color of images
*/
.bg-imageBackround {
    background-color: var(--imageBackground);
}

/* Slider color */
.splide__pagination__page.is-active {
    background-color: var(--mainColor) !important;
}

/*Move pagination to the bottom*/
.splide__pagination {
    bottom: -30px !important;
}

#mapButton, #listButton, #contactButton {
    z-index: 99;
    bottom: 0px;
    left: 0px;
    margin-bottom: 3px;
}

#mapButton, #listButton, #contactButton, #mobileBottomBar button {
    font-size: 14px !important;
    height: 34px !important;
}

/*GoogleMaps warapper style*/
#map-button-parent {
    height: min-content;
    z-index: 0;
    left: 0px;
    right: 0px;
    max-width: 100vw;
    white-space: nowrap;
}

#toggle-map-button {
    left: 0px;
    z-index: 50;
    width: 40px;
    background-color: white;
    height: 40px;
    top: calc(50% - 40px);
    transition: left 0.5s ease, border-radius 0.5s ease;
    position: absolute;
    display: none;
}

#toggle-map-button i {
    color: rgb(102, 102, 102);
}

#toggle-map-button:hover i {
    color: var(--bs-dark);
}

.btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show {
    color: #2c2c2c;
    background-color: #e0e0e0 !important;
    border-color: #2c2c2c;
    display: inline-block !important;
}

.sort-buttons label {
    font-size: 14px !important;
    border-color: #969696 !important;
}

/*.sort-buttons label:hover {*/
/*    background-color: var(--lightGrey);*/
/*    !*background-color: var(--mainColor) !important;*!*/
/*}*/

.text-shadow {
    text-shadow: black 2px 2px 2px;
}

.description-button img {
    filter: opacity(0.5);
}

.description-button.active img {
    filter: opacity(1) !important;
}

/*Slider arrows*/
.splide__arrow {
    border-radius: 0.25rem !important;
    box-shadow: #0000004a 2px 2px 0px !important;
    --bs-bg-opacity: 1;
    background-color: white !important;
    border: 1px solid #dee2e6 !important;
    opacity: 1 !important;
}

/*Slider arrows*/
.objectImageSlider .splide__arrow {
    box-shadow: none !important;
    --bs-bg-opacity: 1;
    border: none !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}

.splide__arrow:disabled {
    opacity: 0.5 !important;
}

.splide__arrow svg {
    fill: var(--grey);
}

.objectImageSlider .splide__arrow svg {
    fill: white;
}

.splide__arrow--next {
    right: -10px !important;
}

.splide__arrow--prev {
    left: -10px !important;
}

.objectImageSlider .splide__arrow--next {
    right: 0.5rem !important;
}

.objectImageSlider .splide__arrow--prev {
    left: 0.5rem !important;
}

/*Shows the click mouse*/
.show-pointer {
    cursor: pointer;
}

/*Removes the underLine for example the a tag*/
.removeUnderLine {
    text-decoration: none;
}

/*This is for highlighted objects*/
.bg-highlighted {
    background-color: #f5e4c8;
}

.shareIcon {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

.shareIconWrapper {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
}

.nav-pills .nav-link.active {
    border-color: var(--mainColor) !important;
}

/*Set slider filled color*/
.noUi-connect {
    background-color: #D7D7D7FF !important;
}

/*Slider on click color*/
.noUi-handle:active .noUi-touch-area {
    background: var(--mainColor);
    border-radius: 3px;
}

/*Increment input style*/
/* Chrome, Safari, Edge, Opera */
.incrementalInput::-webkit-outer-spin-button,
.incrementalInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.incrementalInput[type=number] {
    -moz-appearance: textfield;
}

/*This removes the gutters from the side of a bootstrap grid so it aligns with the rest of the page*/
.removeSideGutters {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
}

.hideMarkerLocation {
    display: none;
}

.popup-container:hover .hideMarkerLocation {
    display: block !important;
}

.searchAndMailServiceContent {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.estateContactIcons a {
    text-decoration: none !important;
}

/*This is for the breadCrumb links*/
.underLineOnHover:hover {
    text-decoration: underline !important;
}

.google-maps-button-shadow {
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
}

/*This is some styling for a loading spinner*/
.lds-ring {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    border: 4px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*Adding some styling so the page can be printed properly*/
@media print {
    .printHide {
        display: none !important;
    }

    .printShow {
        display: block !important;
    }

    .printShowOverFlow {
        display: block !important;
        -webkit-line-clamp: revert !important;
    }

    .printShowInline {
        display: inline-block !important;
    }

    .printShowInline > a {
        padding: 0px !important;
    }

    .printAvoidBreak {
        page-break-inside: avoid;
    }

    .printFullWidth {
        width: 100% !important;
    }
}

.fs-7 {
    font-size: 13px;
}

.homeLinks a:hover {
    text-decoration: underline !important;
}

@media (max-width: 1199px) {
    .searchServiceIndicator {
        width: 100%;
    }
}

/*Used to open the map at once without a transition*/
.noTransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/*This is used to hide the arrows of a slider when there are not enough pages*/
.splide:not(.is-overflow) .splide__arrows {
    display: none;
}

.galleria-container {
    width: 100% !important;
    height: 100% !important;
}

.applyBubble {
    padding-block: 8px;
    padding-inline: 10px;
    top: -70px;
    z-index: 2323;
    left: 20px;
    animation: ease-in-out bobbingUpAndDown 1s alternate infinite;
}

.applyBubble::after {
    content: '';
    position: absolute;
    z-index: 123232323;
    width: 10px;
    height: 10px;
    bottom: -20px;
    left: 10px;
    background-color: transparent;
    border: 10px solid transparent;
    border-top-color: var(--mainColor);
}

.hideApply {
    display: none !important;
}

@keyframes bobbingUpAndDown {
    from {
        margin-top: 0;
    }
    to {
        margin-top: 20px;
    }
}

.galleria-stage .galleria-info {
    display: none !important;
}

#filterMapToggle, #mobileMapToggle {
    background-color: #ababab;
    border-color: #a4a4a4;
}

.objectItem>div {
    box-shadow: none !important;
    transition: box-shadow 0.3s ease;
}

#saveFilters button{
    color: var(--mainColor) !important;
}

@media (hover: hover) {
    #filterMapToggle:hover, #mobileMapToggle:hover {
        background-color: #9a9a9a;
    }
    
    .objectItem > div:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    #saveFilters button:hover, #loadCookiesService:hover {
        background-color: var(--mainColor) !important;
        color: white !important;
    }
}