:root {
    --primary-colour: #e30613;
    --primary-content-background: #ffffff;
    --page-font-colour: #212529;
    --page-background: #f4f4f4;
    --border-highlight-width: .125rem;
}

html {
    font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-colour);
}

html {
    position: relative;
    min-height: 100%;
    background-color: var(--page-background);
    color: var(--page-font-colour);
}

body {
    margin-bottom: 60px;
    background-color: var(--page-background);
    color: var(--page-font-colour);
}

main[role="main"] {
    padding-bottom: 3rem !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

.custom-footer {
    padding: 1rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    word-wrap: break-word;
    white-space: normal;
}



.page-menu {
    border-color: var(--primary-colour);
    border-width: var(--border-highlight-width);
    border-style: solid;
    background-color: var(--primary-content-background);
    margin-top: 0.725rem;
    padding: 0.725rem;
    border-radius: .5rem;
}

.disabled {
    pointer-events: initial !important;
    cursor: not-allowed;
}

.content-primary {
    border-color: var(--primary-colour);
    border-width: var(--border-highlight-width);
    border-style: solid;
    background-color: var(--primary-content-background);
    margin-top: 0.725rem;
    padding: 0.725rem;
    border-radius: 1rem;
}

.bubble-primary {
    border-color: var(--primary-colour);
    border-width: var(--border-highlight-width);
    border-style: solid;
    background-color: var(--primary-content-background);
    margin-top: 0.725rem;
    padding: 0.725rem;
    border-radius: 1rem;
}

.cta-primary {
    border-color: var(--primary-colour);
    border-width: var(--border-highlight-width);
    color: var(--page-font-colour);
    background-color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

    .cta-primary:hover {
        text-decoration: underline;
        background-color: var(--primary-colour);
        border-color: var(--primary-colour);
        color: #ffffff;
    }

.cta-alternative {
    background-color: var(--primary-content-background);
    border-width: var(--border-highlight-width);
    border-color: var(--primary-colour);
    color: var(--primary-colour);
    font-weight: 600;
    text-decoration: none;
}

    .cta-alternative:hover {
        text-decoration: underline;
    }

.action-link {
    cursor: pointer;
    text-decoration: none;
}

    .action-link:hover {
        text-decoration: underline;
    }

.form-group {
    margin-bottom: .5rem;
    margin-top: .5rem;
}

.form-vertialalign {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .form-vertialalign select,
    .form-vertialalign input[type="submit"] {
        margin: 0; /* Remove default margins */
    }

.disclaimer-hmlr {
    font-size: 0.9rem;
    color: var(--page-font-colour);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-left-style: solid;
    border-left-color: #b1b4b6;
    padding-left: 1rem;
}

.chart-container-std {
    min-height: 450px;
}

.item-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .item-row > div {
        border: 1px solid var(--primary-colour);
        text-align: center;
        padding: 1rem;
        margin: .5rem;
        border-radius: .5rem;
        max-width: 250px;
        justify-content: center;
    }


.select2-container {
    min-width: 100px !important; /* Set a fixed width for all Select2 dropdowns */
}


#custom-legend-yearly, #custom-legend-Monthly {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: Arial, sans-serif;
}

.legend-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.3s ease;
}

    .legend-item:hover {
        opacity: 0.8;
    }

    .legend-item.faded {
        opacity: 0.4;
    }

.color-box {
    width: 20px;
    height: 12px;
    margin-right: 5px;
    border-radius: 2px;
}

.smallIcon {
    max-height: 32px;
    max-width: 32px;
}
/* Range Slider Thumb Colours*/
/* Chrome, Safari, Edge */
input[type="range"]::-webkit-slider-thumb {
    background: var(--primary-colour);
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    background: var(--primary-colour);
}

/* IE */
input[type="range"]::-ms-thumb {
    background: var(--primary-colour);
}

/* Chrome, Safari, Edge */
input[type="range"]:focus::-webkit-slider-thumb {
    outline: none;
    background-color: var(--primary-colour);
    opacity: 0.5;
    box-shadow: 0 0 0 0.2rem var(--primary-colour);
}

/* Firefox */
input[type="range"]:focus::-moz-range-thumb {
    outline: none;
    background-color: var(--primary-colour);
    opacity: 0.5;
    box-shadow: 0 0 0 0.2rem var(--primary-colour);
}

/* IE */
input[type="range"]:focus::-ms-thumb {
    outline: none;
    background-color: var(--primary-colour);
    opacity: 0.5;
    box-shadow: 0 0 0 0.2rem var(--primary-colour);
}

/* Remove default outline for the input itself */
input[type="range"]:focus {
    outline: none;
}




.aboutLinks {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}




/* Property Results (Small) */
.propertyResultsList {
    padding: 1rem;
    background-color: var(--primary-content-background);
    border-radius: .5rem;
}

.propertyResultsEntry {
    border: 1px solid var(--primary-colour);
    text-align: left;
    padding: 1rem;
    margin: .5rem;
    border-radius: .5rem;
    background-color: var(--primary-content-background);
}

.propertyResultsEntryTitle {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.propertyResultsEntryImage {
}

    .propertyResultsEntryImage img {
        max-height: 100%;
        max-width: 100%;
        object-fit: cover;
    }

.propertyResultsEntryInfo {
}

.propertyResultsEntryNumbers, .propertyResulrsEntryCTAs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

    .propertyResultsEntryNumbers .roomCount {
        text-align: center;
        margin: 0 0.5rem;
    }

        .propertyResultsEntryNumbers .roomCount img {
            vertical-align: middle;
            margin-right: 0.25rem;
            width: 50px;
            height: 50px;
        }

/* Pagination */
.paging {
}

.paging-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

    .paging-flex .pagination {
        margin-bottom: 0;
    }

    .paging-flex form {
        margin-bottom: 0;
    }

/* Property Listings */
.propertyListingList {
    padding: 1rem;
    background-color: var(--primary-content-background);
    border-radius: .5rem;
}

.propertyListingEntry {
    border: 1px solid var(--primary-colour);
    text-align: left;
    padding: 1rem;
    margin: .5rem;
    border-radius: .5rem;
    background-color: var(--primary-content-background);
}

.propertyListingEntryTitle {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.propertyListingEntryImage {
}

    .propertyListingEntryImage img {
        max-height: 100%;
        max-width: 100%;
        object-fit: cover;
    }

.propertyListingEntryInfo {
}

.propertyListingEntryNumbers, .propertyResulrsEntryCTAs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

    .propertyListingEntryNumbers .roomCount {
        text-align: center;
        margin: 0 0.5rem;
    }

        .propertyListingEntryNumbers .roomCount img {
            vertical-align: middle;
            margin-right: 0.25rem;
            width: 50px;
            height: 50px;
        }

.propertyListingEntryDescription {
    margin-top: 1rem;
    max-height: 500px;
    overflow-y: auto;
}