@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700;800&display=swap');

/* CUSTOM PROPERTY VARIABLES */
:root {
    --color-text: #74788d;
    --color-text-light: #aaacb9;
    --color-page-bg: #ecf0f1;
    --color-page-bg: #f6f6f6;
    --color-accent: #ae6bb5;
    --color-accent-light: #be79c5;
    --color-accent-midbg: #d3a4d8;
    --color-accent-lightbg: #f0e4f1;
    --color-dark: #2f3d4f;
    --color-menu-item: #7796b4;
    --color-menu-item-active: #fff;
    --color-icons: var(--color-accent);
    --color-main-headings: var(--color-dark);
    --color-sub-headings: var(--color-accent);
    --box-shadow: rgba(0, 0, 0, 0.04) 0px 10px 36px 0px, rgba(0, 0, 0, 0.01) 0px 0px 0px 1px;
    --dropdown-box-shadow: rgba(0, 0, 0, 0.06) 0px 10px 36px 0px, rgba(0, 0, 0, 0.03) 0px 0px 0px 1px;
    --bs-border-radius: 0.3rem;
    --width-side-nav: 250px;
    --aspect-ratio: 4/3;
    --carousel-aspect-ratio: 3/2;
}


body {
    font-size: 15px;
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    line-height: 1.3;
    background-color: var(--color-page-bg);
    color: var(--color-text);
    animation: wait 0.25s, fadeIn 0.5s;
}

    body.sidenav-expand {
        animation: none;
    }

@keyframes wait {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media (min-width: 992px) {

    body.sidenav-shrink {
        animation: wait 0.25s, fadeIn 0.5s;
        --width-side-nav: 70px;
    }
}

h1 {
    color: var(--color-main-headings);
    margin: 0.20rem 0 0rem 0;
    font-size: 1.4rem;
    font-weight: 600;
}

h2, h3, h4, h5, h6 {
    color: var(--color-sub-headings);
}

h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
}

h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    /*color:#949aa2;*/
}

h4 {
    font-size: 0.8rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: #949aa2;
}

a {
    text-decoration: none;
    color: var(--color-accent);
    font-weight: 600;
}

div.smaller {
    font-size: 0.8rem;
    padding-top: 0.25rem;
}

p.large {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 576px) {

    p.large {
        /*margin-top:0.25rem;*/
        font-size: 1.2rem;
        margin-bottom: 1.25rem;
    }
}

.back-link {
    padding-bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    font-size: 0.9rem;
}

    .back-link i {
        width: 0.85rem;
        height: 0.85rem;
        background-color: var(--color-icons);
        margin-right: 0.5rem;
    }


/* ICONS */
.icon svg, .icon object, .icon img {
    width: 100%;
    height: auto;
}

.icon.inline {
    display: inline-flex;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-left: 0.5rem;
    margin-bottom: 2px;
}

.item-content .icon.inline {
    margin-left: 0;
}

.icon.inline i {
    background-color: var(--color-icons);
}

.icon.inline a {
    width: 100%;
    height: 100%;
}

i {
    width: 100%;
    height: 100%;
    display: block;
    -webkit-mask-size: cover;
    mask-size: cover;
}

    i.dashboard {
        -webkit-mask-image: url('images/dashboard.svg');
        mask-image: url('images/dashboard.svg');
    }

    i.properties {
        -webkit-mask-image: url('images/properties.svg');
        mask-image: url('images/properties.svg');
    }

    i.viewings {
        -webkit-mask-image: url('images/viewings.svg');
        mask-image: url('images/viewings.svg');
    }

    i.statements {
        -webkit-mask-image: url('images/statements.svg');
        mask-image: url('images/statements.svg');
    }

    i.expenses {
        -webkit-mask-image: url('images/expenses.svg');
        mask-image: url('images/expenses.svg');
    }

    i.maintenance {
        -webkit-mask-image: url('images/maintenance.svg');
        mask-image: url('images/maintenance.svg');
    }

    i.tenancies {
        -webkit-mask-image: url('images/tenancies.svg');
        mask-image: url('images/tenancies.svg');
    }

    i.financials {
        -webkit-mask-image: url('images/financials.svg');
        mask-image: url('images/financials.svg');
    }

    i.user {
        -webkit-mask-image: url('images/user.svg');
        mask-image: url('images/user.svg');
    }

    i.reminders {
        -webkit-mask-image: url('images/reminders.svg');
        mask-image: url('images/reminders.svg');
    }

    i.pdf {
        -webkit-mask-image: url('images/pdf.svg');
        mask-image: url('images/pdf.svg');
    }

    i.no-date {
        -webkit-mask-image: url('images/no-date.svg');
        mask-image: url('images/no-date.svg');
    }

    i.filter {
        -webkit-mask-image: url('images/filter.svg');
        mask-image: url('images/filter.svg');
    }

    i.sub-menu {
        -webkit-mask-image: url('images/sub-menu.svg');
        mask-image: url('images/sub-menu.svg');
    }

    i.date-range-picker {
        -webkit-mask-image: url('images/date-range.svg');
        mask-image: url('images/date-range.svg');
    }

    i.inspections {
        -webkit-mask-image: url('images/inspections.svg');
        mask-image: url('images/inspections.svg');
    }

    i.marketing {
        -webkit-mask-image: url('images/marketing.svg');
        mask-image: url('images/marketing.svg');
    }

    i.brochure {
        -webkit-mask-image: url('images/brochure.svg');
        mask-image: url('images/brochure.svg');
    }

    i.website {
        -webkit-mask-image: url('images/website.svg');
        mask-image: url('images/website.svg');
    }

    i.csv {
        -webkit-mask-image: url('images/csv.svg');
        mask-image: url('images/csv.svg');
    }

    i.print {
        -webkit-mask-image: url('images/print.svg');
        mask-image: url('images/print.svg');
    }

    i.floorplan {
        -webkit-mask-image: url('images/floorplan.svg');
        mask-image: url('images/floorplan.svg');
    }

    i.virtualtour {
        -webkit-mask-image: url('images/virtualtour.svg');
        mask-image: url('images/virtualtour.svg');
    }

    i.previous {
        -webkit-mask-image: url('images/previous.svg');
        mask-image: url('images/previous.svg');
    }

    i.next {
        -webkit-mask-image: url('images/next.svg');
        mask-image: url('images/next.svg');
    }

    i.download-doc {
        -webkit-mask-image: url('images/download-file.svg');
        mask-image: url('images/download-file.svg');
    }

    i.view-doc {
        -webkit-mask-image: url('images/file.svg');
        mask-image: url('images/file.svg');
    }

    i.sale {
        -webkit-mask-image: url('images/sale.svg');
        mask-image: url('images/sale.svg');
    }

    i.offers {
        -webkit-mask-image: url('images/offers.svg');
        mask-image: url('images/offers.svg');
    }

    i.map {
        -webkit-mask-image: url('images/map.svg');
        mask-image: url('images/map.svg');
    }

    i.account {
        -webkit-mask-image: url('images/banks.svg');
        mask-image: url('images/banks.svg');
    }

    i.calendar {
        -webkit-mask-image: url('images/calendar.svg');
        mask-image: url('images/calendar.svg');
    }

    i.camera {
        -webkit-mask-image: url('images/camera.svg');
        mask-image: url('images/camera.svg');
    }

    i.gallery {
        -webkit-mask-image: url('images/photo-gallery.svg');
        mask-image: url('images/photo-gallery.svg');
    }

    i.full-screen {
        -webkit-mask-image: url('images/full-screen.svg');
        mask-image: url('images/full-screen.svg');
    }



/* TOP NAVBAR */
.navbar > .container-fluid {
    justify-content: normal;
    padding-left: 1rem;
}

.navbar {
    box-shadow: var(--box-shadow);
    text-align: left;
}

.navbar-brand {
    padding-left: 60px;
}

    .navbar-brand img {
        max-height: 50px;
    }

#user-nav {
    margin-left: auto;
    margin-right: 0.5rem;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

    #user-nav svg, #user-nav object, #user-nav i {
        width: 28px;
        height: 28px;
        margin-left: 1rem;
        background-color: var(--color-dark);
        fill: var(--color-dark);
        stroke: var(--color-dark);
    }

    #user-nav .dropdown-menu[data-bs-popper] {
        top: 50px;
        left: -119px;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    #user-nav.impersonating i {
        background-color: var(--color-icons);
    }

    #user-nav .dropdown-menu a.impersonating {
        color: var(--color-accent);
        font-weight: 600;
    }

.dropdown-item.impersonating {
    white-space: unset;
}

#impersonating-user {
    position: absolute;
    top: 28px;
    right: 70px;
    color: var(--color-accent);
}

.headercompany {
    display: none;
}

@media (max-width: 576px) {

    .navbar-brand img {
        max-height: 40px;
    }

    #user-nav .dropdown-menu[data-bs-popper] {
        top: 45px;
        left: -123px;
    }

    #impersonating-user {
        top: 24px;
        right: 63px;
    }
}

@media (min-width: 576px) {

    .navbar > .container-fluid {
        padding: 0 0.75rem;
    }

    .navbar-brand {
        padding-left: 70px;
    }

    #user-nav {
        margin-right: 1rem;
    }
}

@media (min-width: 992px) {

    nav {
        margin-left: var(--width-side-nav);
    }

    .navbar-brand {
        padding-left: 10px;
    }
}




/* SIDE NAVBAR */
.offcanvas-lg {
    --bs-offcanvas-bg: var(--color-dark);
}

    .offcanvas-lg.offcanvas-start {
        width: var(--width-side-nav);
    }

        .offcanvas-lg.offcanvas-start.show {
            --width-side-nav: 250px;
        }

.offcanvas-backdrop.show {
    opacity: .65;
}

#sidenav {
    width: var(--width-side-nav);
    background-color: var(--color-dark);
    transition-property: transform, width;
    transition-duration: 0.01s;
    transition-delay: 0;
}

#sidenav-header {
    height: 76px;
    background-color: rgba(0,0,0,0.2);
}

#sidenav-menu {
    padding: 1rem;
    width: var(--width-side-nav);
}

    #sidenav-menu a {
        text-decoration: none;
        display: block;
        color: var(--color-menu-item);
        font-weight: 600;
        fill: var(--color-menu-item);
        stroke: var(--color-menu-item);
        border-radius: var(--bs-border-radius);
        margin-bottom: 0.5rem;
    }

        #sidenav-menu a:hover {
            color: var(--color-menu-item-active);
            fill: var(--color-menu-item-active);
            stroke: var(--color-menu-item-active);
            background-color: rgba(255,255,255,0.05);
        }

            #sidenav-menu a:hover i {
                background-color: var(--color-menu-item-active);
            }

        #sidenav-menu a.active {
            background-color: rgba(255,255,255,0.05);
            fill: var(--color-menu-item-active);
            stroke: var(--color-menu-item-active);
            color: var(--color-menu-item-active);
        }

            #sidenav-menu a.active i {
                background-color: var(--color-menu-item-active);
            }


    #sidenav-menu .menu-item {
        display: flex;
        align-items: center;
        flex-direction: row;
        padding: 0.75rem 1rem;
        overflow: hidden;
    }

        #sidenav-menu .menu-item span {
            padding: 0px 0rem 0 1rem;
        }

#body.sidenav-expand #sidenav-menu .menu-item span {
    display: block;
}

#sidenav-menu .menu-item object {
    visibility: hidden;
}

#sidenav-menu .menu-item img, #sidenav-menu .menu-item svg, #sidenav-menu .menu-item object, #sidenav-menu .menu-item i {
    width: 18px;
    height: 18px;
    background-color: var(--color-menu-item);
}

@media (max-width: 576px) {

    #sidenav.shrink #sidenav-menu .menu-item span {
        display: block;
    }
}

@media (min-width: 992px) {

    .offcanvas-lg {
        position: fixed;
        top: 0;
        left: 0;
    }

    #sidenav {
        height: 100vh;
    }

        #sidenav.shrink #sidenav-menu .menu-item span {
            display: none;
        }

        #sidenav.shrink #sidenav-menu .menu-item {
            justify-content: center;
            padding: 0.5rem 0;
        }

        #sidenav.shrink #sidenav-menu a {
            padding: 0;
            width: 40px;
        }
}

.hamburger-box, .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    width: 35px;
}

    .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
        background-color: var(--color-dark);
    }

#hamburger-close .hamburger-inner, #hamburger-close .hamburger-inner:before, #hamburger-close .hamburger-inner:after, #hamburger.is-active .hamburger-inner, #hamburger.is-active .hamburger-inner:before, #hamburger.is-active .hamburger-inner:after {
    background-color: #fff;
}

#hamburger {
    position: fixed;
    top: 5px;
    left: 0.5rem;
    z-index: 2000;
    margin-left: 0;
    transition: all 0.2s ease;
}

@media (min-width: 576px) {

    #hamburger {
        top: 12px;
        left: 0.75rem;
    }
}

#hamburger.is-active {
    z-index: 2000;
    margin-left: 250px;
    transition: all 0.2s ease;
}

#hamburger-shrink {
    padding: 17px 15px 13px 15px;
}


/* MAIN CONTENT CONTAINER */
#content-container {
    margin-top: 80px;
    padding: 1rem 0.5rem;
}

    #content-container .container-fluid {
        margin: 0 auto;
        max-width: 1980px;
    }

    #content-container .row {
        --bs-gutter-y: 1.5rem;
        margin-bottom: var(--bs-gutter-y);
    }

@media (max-width: 576px) {

    #content-container .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1.25rem;
    }
}

@media (min-width: 576px) {

    #content-container {
        margin-top: 85px;
        padding: 1rem 0.75rem;
    }

    /*.row>* {
        margin-bottom:2rem;
    }*/

}

@media (min-width: 992px) {

    #content-container {
        margin-left: var(--width-side-nav);
    }
}



/* SUB NAV */

#content-container.sub-nav-container {
    margin-top: 175px;
}

#sub-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem 0.75rem;
    background-color: #f9f9f9;
    margin-top: 65px;
    height: 93px;
    z-index: 900;
    box-shadow: var(--box-shadow);
}

#sub-nav-content {
    display: block;
}

    #sub-nav-content .thumbnail {
        display: inline-block;
        height: 60px;
        margin-right: 1.25rem;
        aspect-ratio: 1/1;
        border-radius: var(--bs-border-radius);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

        #sub-nav-content .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--bs-border-radius);
        }

    #sub-nav-content h2 {
        margin-top: 3px;
        margin-bottom: 5px;
        color: var(--color-accent);
    }

    #sub-nav-content .text-details {
        vertical-align: top;
        display: inline-block;
        width: calc(100% - 85px);
    }

#hnav-container {
    height: 37px;
    overflow: hidden;
}

#hnav {
    padding: 5px 0;
    margin: 5px 0rem 0 0rem;
    padding-left: 0rem;
    display: inline-table;
}

    #hnav li {
        display: table-cell;
    }

    #hnav a {
        padding-right: 15px;
    }

    #hnav .dropdown-item {
        font-weight: 600;
        opacity: 0.7;
    }

        #hnav .dropdown-item:hover {
            background-color: transparent;
            font-weight: 600;
            opacity: 1;
            text-decoration: underline;
            text-decoration-color: rgba(0,0,0,0.05);
            text-decoration-thickness: 2px;
            text-underline-offset: 10px;
        }

        #hnav .dropdown-item.active, #hnav .dropdown-item:active, #hnav .dropdown-item.active:hover {
            background-color: transparent;
            font-weight: 600;
            opacity: 1;
            text-decoration: underline;
            text-decoration-color: rgba(0,0,0,0.05);
            text-decoration-thickness: 2px;
            text-underline-offset: 10px;
        }

#sub-nav-dropdown {
    display: inline-table;
}

    #sub-nav-dropdown .dropdown-menu {
    }

#sub-nav-dropdown-btn {
}

    #sub-nav-dropdown-btn .mobile {
        display: inline-block;
        margin: 10px 0px 0 0;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        text-align: center;
        cursor: pointer;
    }

        #sub-nav-dropdown-btn .mobile:hover {
            background-color: #eee;
        }

        #sub-nav-dropdown-btn .mobile object, #sub-nav-dropdown-btn .mobile svg, #sub-nav-dropdown-btn .mobile i {
            width: 24px;
            height: 24px;
            margin: 4px auto 0 auto;
            background-color: var(--color-dark);
        }

.hidden {
    visibility: hidden;
}

@media (max-width: 576px) {

    #hnav {
        visibility: hidden;
        height: 0;
    }

    #hnav-container {
        height: 0;
    }

    #sub-nav-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
    }

        #sub-nav-content .text-details {
            width: calc(100% - 140px);
        }

    #sub-nav-dropdown-btn {
        position: absolute;
        top: 5px;
        right: 0;
        z-index: 1000;
    }

        #sub-nav-dropdown-btn span {
            display: none;
        }

        #sub-nav-dropdown-btn.dropdown-toggle::after {
            display: none;
        }
}

@media (min-width: 576px) {

    #sub-nav {
        margin-top: 75px;
    }

    #sub-nav-dropdown-btn .mobile {
        display: none;
    }
}

@media (min-width: 992px) {

    #sub-nav {
        margin-left: var(--width-side-nav);
    }
}



/* BOOTSTRAP OVERRIDES */
.alert-success {
    --bs-success-bg-subtle: #e8f3e8;
    --bs-success-border-subtle: #bbd5bc;
    --bs-alert-color: #3f7d42;
}

.alert-danger {
    --bs-danger-bg-subtle: #fbe8ea;
    --bs-alert-color: var(--bs-form-invalid-color);
}

.alert-warning {
    --bs-warning-border-subtle: #f2d479;
    --bs-alert-color: #977100;
}

.alert-info {
    --bs-info-bg-subtle: #d8e9fa;
    --bs-info-border-subtle: #a9cae8;
    --bs-alert-color: #356c9e;
}



/* BOOTSTRAP DROPDOWN OVERRIDES */
.dropdown-menu {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /*-webkit-box-shadow: 0 1rem 3rem rgba(0,0,0,.15);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.15);*/
    box-shadow: var(--dropdown-box-shadow);
    margin: 0;
    position: absolute;
    z-index: 1000;
    /*clip-path: inset(0px -3rem -3rem -3rem);*/
}

.dropdown-item {
    color: var(--color-dark);
}

    .dropdown-item.active, .dropdown-item:active, .dropdown-item:hover {
        color: var(--color-dark);
        font-weight: 400;
        background-color: var(--bs-dropdown-link-hover-bg);
    }



/* CONTENT BOX */
.content-box {
    background-color: #fff;
    padding: calc(var(--bs-gutter-x) * 1);
    border-radius: calc(var(--bs-border-radius) * 1.5);
    height: 100%;
    box-shadow: var(--box-shadow);
}

#content-container .content-box .row {
    margin-bottom: 0.75rem;
}

.content-box h3 {
    margin: 1rem 0 1.25rem 0;
}

.content-box .row div h3 {
    margin: 0rem 0 1rem 0;
}

.view-all {
    font-size: 0.9rem;
    margin-top: 0.25rem;
    display: inline-block;
    border: 1px solid var(--color-page-bg);
    border-radius: var(--bs-border-radius);
    padding: 5px 10px;
}

    .view-all:hover {
        background-color: rgba(0,0,0,0.01);
    }

.content-box .sep {
    height: 0;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-page-bg);
}

.content-box.details-form .col-4 {
    max-width: 250px;
}

.content-box.details-form .col-8 {
    word-wrap: anywhere;
}

@media (max-width: 768px) {

    .content-box {
        padding: calc(var(--bs-gutter-x) * 1);
    }

    #content-container .content-box.details-form .row {
        --bs-gutter-y: 0.5rem;
        margin-bottom: 1rem;
    }
}

.icon-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--color-page-bg);
}

    .icon-heading .icon {
        background-color: var(--color-page-bg);
        padding: 0.65rem;
        fill: var(--color-icons);
        stroke: var(--color-icons);
        max-width: 45px;
        width: 45px;
        height: 45px;
        border-radius: var(--bs-border-radius);
        margin-right: 1.25rem;
    }

        .icon-heading .icon i {
            width: 24px;
            height: 24px;
            background-color: var(--color-icons);
        }

        .icon-heading .icon svg, .icon-heading .icon object {
            width: 100%;
            height: auto;
        }

    .icon-heading h2 {
        margin: 0;
        flex: 1;
    }

    .icon-heading .item-count {
        border: 1px solid var(--color-page-bg);
        border-radius: var(--bs-border-radius);
    }

        .icon-heading .item-count:hover {
            background-color: rgba(0,0,0,0.01);
        }

        .icon-heading .item-count span {
            display: inline-block;
        }

        .icon-heading .item-count .count {
            background-color: var(--color-page-bg);
            padding: 5px 10px;
            border-top-left-radius: var(--bs-border-radius);
            border-bottom-left-radius: var(--bs-border-radius);
        }

        .icon-heading .item-count .text {
            padding: 5px 10px;
        }

    .icon-heading.large {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        margin: 0.5rem;
    }

        .icon-heading.large .icon {
            background-color: var(--color-page-bg);
            padding: 1.15rem 1.25rem;
            max-width: 85px;
            width: 85px;
            height: 85px;
            margin-right: 1.5rem;
        }

            .icon-heading.large .icon i {
                width: 46px;
                height: 46px;
                background-color: var(--color-icons);
            }

        .icon-heading.large h2 {
            font-size: 1.75rem;
        }

@media (max-width:576px) {

    .icon-heading.large {
        margin: 0;
    }

        .icon-heading.large .icon {
            padding: 0.75rem 0.925rem;
            max-width: 65px;
            width: 65px;
            height: 63px;
            margin-right: 1rem;
        }

            .icon-heading.large .icon i {
                width: 36px;
                height: 36px;
            }

        .icon-heading.large h2 {
            font-size: 1.5rem;
        }
}



/* DASHBOARD CHART */
.chart-container {
    margin: 2rem 0;
}


/* WIDGET ITEMS */
.widget-item {
    display: flex;
    flex-direction: row;
    align-items: start;
    margin-bottom: 1.15rem;
}

    .widget-item .photo {
        margin-right: 1rem;
        aspect-ratio: var(--aspect-ratio);
        width: 75px;
        border-radius: var(--bs-border-radius);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .widget-item .date, .widget-item .status {
        /*min-width:60px;*/
        min-width: 87px;
        /*min-height:20px;*/
        text-align: center;
        /*line-height:14px;*/
        padding: 4px 12px;
        background-color: var(--color-accent-lightbg);
        color: var(--color-accent);
        font-size: 0.7rem;
        font-weight: 600;
        margin-right: 1rem;
        border-radius: var(--bs-border-radius);
    }

        .widget-item .date.empty {
            background-color: var(--color-page-bg);
            color: var(--color-text);
            font-weight: 400;
        }

            .widget-item .date.empty svg, .widget-item .date.empty object, .widget-item .date.empty i {
                margin: 0 auto;
                width: 14px;
                height: 14px;
                opacity: 0.5;
                fill: var(--color-text);
                stroke: var(--color-text);
                background-color: var(--color-text);
            }

    .widget-item .status {
        display: inline-block;
        margin-top: 0.5rem;
        margin-right: 0.5rem;
        vertical-align: middle;
    }

    .widget-item .current-tenancy {
        display: inline-block;
        margin-top: 0.5rem;
        margin-left: 0rem;
        padding-top: 5px;
        vertical-align: middle;
    }

        .widget-item .current-tenancy .icon {
            width: 16px;
            height: 16px;
            margin-right: 0.25rem;
        }

            .widget-item .current-tenancy .icon i {
                width: 16px;
                height: 16px;
            }

    .widget-item .item-content .current-tenancy a {
        font-size: 0.8rem;
    }

    .widget-item .item-content {
        padding-top: 0px;
        flex: 1;
        min-width: 0;
    }

    .widget-item .icon {
        width: 20px;
        height: 20px;
    }

        .widget-item .icon i {
            width: 20px;
            height: 20px;
            background-color: var(--color-icons);
        }

    .widget-item .item-content span {
        padding-right: 0.5rem;
        font-size: 0.8rem;
    }

        .widget-item .item-content span.bigger {
            font-size: 1rem;
            font-weight: 400;
        }

    .widget-item .item-content a {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 1rem;
    }

        .widget-item .item-content a span {
            padding-right: 0.5rem;
            font-size: 1rem;
        }

    .widget-item .viewing-feedback {
        background-color: var(--color-page-bg);
        padding: 0.75rem;
        margin: 0.5rem 0;
        border-radius: var(--bs-border-radius);
    }

        .widget-item .viewing-feedback span {
            display: inline;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-wrap: break-word;
        }

    .widget-item .item-content a {
        display: inline;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
    }

        .widget-item .item-content a .viewing-feedback {
            font-size: 0.8rem;
            color: var(--color-text);
        }

.widget-info {
    font-size: 0.8rem;
}

@media (max-width:576px) {

    .widget-item .date, .widget-item .status {
        padding: 4px;
        font-size: 0.6rem;
        margin-right: 0.5rem;
        min-width: 80px;
    }

    .widget-item .item-content .current-tenancy a {
        font-size: 0.7rem;
    }
}



/* WIDGET TOTALS AND ICON LINKS */
.widget-totals, .icon-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    column-gap: 2rem;
    row-gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.widget-total, .icon-link {
    display: flex;
    gap: unset;
    flex-direction: row;
    align-items: center;
    border: 1px solid var(--color-page-bg);
    border-radius: var(--bs-border-radius);
    max-width: fit-content;
    margin: 0 auto;
}

    .widget-total:hover, .icon-link:hover {
        background-color: rgba(0,0,0,0.01);
    }

    .widget-total .total, .icon-link .icon {
        background-color: var(--color-page-bg);
        width: 45px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        font-size: 1.6rem;
        font-weight: 700;
    }

.icon-links.align-end {
    justify-content: flex-end;
}

.icon-link .icon i {
    margin: 0 auto;
    margin-top: 10px;
    width: 24px;
    height: 24px;
    background-color: var(--color-text);
}

.icon-links a .icon-link .icon i {
    background-color: var(--color-icons);
}

.icon-link.profile {
    display: inline-flex;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    margin-right: 1.5rem;
}

    .icon-link.profile .icon {
        width: 60px;
        height: 60px;
        line-height: 60px;
    }

        .icon-link.profile .icon i {
            margin-top: 13px;
            width: 34px;
            height: 34px;
        }

.widget-total.red {
    color: var(--bs-danger);
    border-color: var(--bs-danger-bg-subtle);
}

    .widget-total.red:hover {
        background-color: rgba(248,215,218,0.13);
    }

    .widget-total.red .total {
        background-color: var(--bs-danger-bg-subtle);
        color: var(--bs-danger);
    }

.widget-total.yellow {
    color: var(--bs-warning);
    border-color: var(--bs-warning-bg-subtle);
}

    .widget-total.yellow:hover {
        background-color: rgba(255,243,205,0.13);
    }

    .widget-total.yellow .total {
        background-color: var(--bs-warning-bg-subtle);
        color: var(--bs-warning);
    }

.widget-total.green {
    color: var(--bs-success);
    border-color: var(--bs-success-bg-subtle);
}

    .widget-total.green:hover {
        background-color: rgba(209,231,221,0.13);
    }

    .widget-total.green .total {
        background-color: var(--bs-success-bg-subtle);
        color: var(--bs-success);
    }

.widget-total .text, .icon-link .text {
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0 1rem;
}

    .icon-link .text span {
        display: block;
        font-size: 0.7rem;
        color: var(--color-text);
        font-weight: 400;
    }

.finance-total, .stat-total {
    font-size: 1.4rem;
    color: var(--color-accent);
    font-weight: 600;
}

    .finance-total .label, .stat-total .label {
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--color-text);
    }

@media (max-width:991px) {

    .icon-links.align-end {
        justify-content: flex-start;
    }
}

@media (max-width:576px) {

    .widget-totals, .icon-links {
        column-gap: 1rem;
    }

    .icon-link.profile {
        max-width: none;
        display: flex;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
}


/* SUMMARY WIDGET */
.summary {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

    .summary .count {
        font-size: 1.5rem;
        font-weight: 700;
    }

    .summary .icon {
        background-color: var(--color-page-bg);
        padding: 1rem;
        width: 70px;
        height: 70px;
        border-radius: var(--bs-border-radius);
    }

        .summary .icon i {
            width: 100%;
            height: 100%;
            background-color: var(--color-icons);
        }



/* DETAILS */
.detail {
    margin-right: .5rem;
    margin-bottom: .5rem;
    padding: 5px 10px;
    border-radius: var(--bs-border-radius);
    background-color: var(--color-page-bg);
    font-size: 0.8rem;
    display: inline-block;
}



/* FORMS */
label {
    font-weight: 600;
}

.btn {
    font-size: 0.9rem;
    font-weight: 600;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.5rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-accent-light);
    --bs-btn-hover-border-color: var(--color-accent-light);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-accent);
    --bs-btn-active-border-color: var(--color-accent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

.btn.btn-small {
    font-size: 0.8rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.3rem;
}

input.form-control[type=text], input.form-control[type=password], input.form-control[type=email] {
    max-width: 350px;
}

textarea.form-control {
    min-height: 200px;
}

.form-control::placeholder {
    color: rgba(0,0,0,0.3);
    font-size: 0.9rem;
}

.form-control:focus {
    border-color: rgba(0,0,0,.05);
    box-shadow: 0 0 0 0.20rem rgba(0,0,0,.0225);
}

.col-form-label {
    padding-bottom: 0.25rem;
}

.form-check-input:focus {
    border-color: var(--color-accent-light);
    box-shadow: 0 0 0 0.20rem rgba(0,0,0,.0225);
}

.form-switch .form-check-input:focus {
    border-color: #dee2e6;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

.form-check-input:checked, .form-check-input:checked:focus {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}



/* VALIDATION */
.form-control.input-validation-error {
    border-color: var(--bs-form-invalid-border-color);
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    margin-bottom: 0.25rem;
}

    .form-control.input-validation-error:focus {
        border-color: var(--bs-form-invalid-border-color);
        box-shadow: 0 0 0 0.20rem rgba(251,232,234,.6);
    }

    .form-control.input-validation-error::placeholder {
        color: var(--bs-danger-border-subtle);
    }

.field-validation-error {
    font-size: .875em;
    color: var(--bs-form-invalid-color);
}

.validation-summary-errors {
    background-color: #fbe8ea;
    padding: 1rem;
    border: 1px solid var(--bs-danger-border-subtle);
    border-radius: var(--bs-border-radius);
    color: var(--bs-form-invalid-color);
    margin: 1.5rem 0;
}

    .validation-summary-errors span {
        font-weight: 600;
        display: none;
    }

    .validation-summary-errors ul {
        margin: 0 0 0 0;
        padding-left: 1rem;
    }


/* LOGIN */
#body.login {
    background-color: var(--color-dark);
}

    #body.login .container-fluid {
        /*padding:0;*/
    }

.login-logo {
    height: 50px;
    margin: 2.5rem 1.5rem;
}

.form-col {
    background-color: #fff;
    height: 100vh;
}

    .form-col .content-box {
        background-color: transparent;
        box-shadow: none;
    }

        .form-col .content-box .row {
            margin-bottom: 0.5rem;
        }

#login-accountmsg {
    font-size: 0.8rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {

    .form-col {
        background-color: #fff;
        height: auto;
        min-height: 75vh;
    }
}


/* PROFILE HOME */
#profile-home {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 2000;
    width: 100%;
}

.row#profile-home {
    margin-left: 0;
    margin-right: 0;
}

#profile-home .form-col {
    padding-left: 1.35rem;
}

#profile-home .login-logo {
    margin-left: 0.9rem;
}

@media (min-width: 768px) {

    #profile-home .content-box {
        margin-left: -0.6rem;
    }
}

#profile-home-bg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1500;
    width: 100%;
    background-color: var(--color-dark);
    /*opacity:0.9;*/
}

/* PROPERTY LIST */
.property {
    position: relative;
}

    .property .photo {
        aspect-ratio: var(--aspect-ratio);
        border-radius: var(--bs-border-radius);
        overflow: hidden;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        position: relative;
    }

        .property .photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .property .photo .icon {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 34px;
            height: 34px;
            background-color: rgba(0,0,0,0.3);
            border-radius: var(--bs-border-radius);
            padding: 0.40rem;
        }

            .property .photo .icon i {
                background-color: #fff;
            }

        .property .photo .status {
            padding: 0.25rem 0.5rem;
            font-size: 0.7rem;
            font-weight: 600;
            border-top-left-radius: var(--bs-border-radius);
            border-top-right-radius: var(--bs-border-radius);
            background-color: rgba(255,255,255,0.8);
        }

.nophoto {
    background-color: #ECECEC;
    text-align: center;
}

.property .status {
    position: absolute;
    right: 1.5rem;
    bottom: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}

    .property .status.bg {
        padding: 0.5rem 1.25rem;
        font-size: 0.9rem;
    }

.status.Sold {
    background-color: var(--color-accent);
    color: #fff;
}

.status.Let {
    background-color: var(--color-accent);
    color: #fff;
}

.status.Under.Offer {
    background-color: var(--color-accent-lightbg);
    color: var(--color-accent);
}

.status.SSTC {
    background-color: var(--color-accent-midbg);
    color: #fff;
}

.status.Let.Agreed {
    background-color: var(--color-accent-lightbg);
    color: var(--color-accent);
}

.status.Available {
    background-color: #dfecda;
    color: #408628;
}

.status.Under.Valuation {
    background-color: #f2ebc5;
    color: #a08700;
}

.status.Inactive {
    background-color: #f5f5f5;
    color: var(--color-text);
}

.property .bottom-container {
    position: absolute;
    bottom: 0;
    right: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: end;
}

    .property .bottom-container .current-tenancy {
        float: none;
        margin-right: 1rem;
        display: inline-block;
        font-size: 0.7rem;
        margin-top: 0;
        margin-left: 0;
        padding-bottom: 6px;
    }

        .property .bottom-container .current-tenancy .icon {
            width: 14px;
            height: 14px;
            vertical-align: text-top;
        }

    .property .bottom-container .status {
        position: unset;
    }

.property .address {
    font-size: 1.1rem;
    font-weight: 600;
}

.property a {
    z-index: 10;
    position: relative;
}

    .property a.property-details {
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.ref {
    font-size: 0.8rem;
    padding-top: 0.5rem;
    font-weight: 400;
    margin: 0;
}

.property .current-tenancy {
    float: right;
    margin-top: 0.25rem;
    margin-left: 1rem;
}

    .property .current-tenancy .icon {
        margin-right: 0.25rem;
    }




/* PROPERTY DETAILS */
.property-details .photo {
    aspect-ratio: var(--aspect-ratio);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.marketing-status {
    /*background-color:var(--color-page-bg);*/
    border: 1px solid var(--color-page-bg);
    padding: 0.75rem 1rem;
    border-radius: var(--bs-border-radius);
    max-width: fit-content;
    display: flex;
    column-gap: 1rem;
    flex-direction: row;
    align-items: flex-start;
    margin: 1.25rem 0;
}

    .marketing-status.no-margin {
        margin: 0;
    }

    .marketing-status i {
        width: 24px;
        height: 24px;
    }

    .marketing-status h2 {
        margin-bottom: 0.25rem;
    }

    .marketing-status span {
        font-size: 0.8rem;
    }

    .marketing-status.on {
        border-color: var(--color-accent-lightbg);
        color: var(--color-accent);
    }

        .marketing-status.on i {
            background-color: var(--color-icons);
        }

    .marketing-status.off h2 {
        color: var(--color-text);
    }

    .marketing-status.off i {
        background-color: var(--color-text);
    }

.rightmove-stats {
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: var(--bs-border-radius);
    margin: 0.5rem 0 1rem 0;
    align-items: start;
    display: flex;
    flex-direction: row;
    column-gap: 3rem;
    --color-accent: #56c0a7;
    --color-sub-headings: #56c0a7;
}

    .rightmove-stats .widget-totals {
        margin-bottom: 0;
    }

.content-box .row div.rightmove-stats h3 {
    margin-bottom: 0.5rem;
}

.rightmove-stats .logo img {
    max-height: 35px;
}

@media (max-width:1200px) {

    .rightmove-stats .logo img {
        max-height: 30px;
    }

    .rightmove-stats {
        flex-wrap: wrap;
        row-gap: 1.25rem;
    }

        .rightmove-stats .logo {
            flex-basis: 100%;
        }
}

@media (max-width:567px) {

    .rightmove-stats .stat {
        flex-basis: 100%;
    }

    .rightmove-stats .widget-totals {
        column-gap: 2rem;
    }
}



/* PROPERTY MARKETING */

.marketing-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    flex-wrap: wrap;
}

    .marketing-header .marketing-status {
        margin: 0;
    }

    .marketing-header .icon-links {
        justify-content: flex-start;
        margin-bottom: 0;
    }

        .marketing-header .icon-links .icon-link {
            margin: 0;
        }

.marketing-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
}

    .marketing-gallery .content-box {
        padding: 1rem;
        position: relative;
        overflow: hidden;
        text-align: center;
    }

        .marketing-gallery .content-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            margin: 0 auto;
            /*overflow-clip-margin: unset;
    will-change: transform;*/
        }

    .marketing-gallery .image span {
        background-color: var(--color-accent);
        bottom: 0;
        right: 0;
        position: absolute;
        display: inline-block;
        padding: 0.4rem 0.75rem;
        color: #fff;
        font-weight: 600;
        font-size: 0.8rem;
        margin-right: 1rem;
        border-top-left-radius: var(--bs-border-radius);
        border-top-right-radius: var(--bs-border-radius);
    }

    .marketing-gallery .image {
        position: relative;
        background-color: var(--color-page-bg);
        width: 100%;
        aspect-ratio: var(--aspect-ratio);
        border-radius: var(--bs-border-radius);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    .marketing-gallery.full-image .image {
        background-size: contain;
    }


@media (max-width:1200px) {

    .marketing-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width:992px) {

    .marketing-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:576px) {

    .marketing-header .marketing-status {
        max-width: none;
        width: 100%;
    }

    .marketing-header .icon-links {
        column-gap: 4%;
    }

        .marketing-header .icon-links .icon-link {
            margin: 0;
            max-width: unset;
        }

        .marketing-header .icon-links > a, .marketing-header .icon-links > .icon-link {
            flex-grow: 1;
            flex-basis: calc(100% / 2);
            max-width: 48% !important;
        }

        .marketing-header .icon-links .icon-link .icon {
            width: 35px;
            height: 35px;
            line-height: 35px;
        }

            .marketing-header .icon-links .icon-link .icon i {
                width: 20px;
                height: 20px;
                margin-top: 8px;
            }

        .marketing-header .icon-links .icon-link .text {
            font-size: 0.8rem;
        }

    .marketing-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* PHOTO GALLERY */
.carousel-inner {
    aspect-ratio: var(--carousel-aspect-ratio);
}

    .carousel-inner .carousel-item {
        width: 100%;
        height: 100%;
        text-align: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        cursor: pointer;
    }

        .carousel-inner .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            margin: 0 auto;
            cursor: pointer;
        }

.carousel.pointer-event {
    touch-action: pan-x pan-y pinch-zoom;
}

.modal.show .modal-dialog.full-screen {
    max-width: 100%;
    transform: none;
    position: fixed;
    width: 100%;
    /*height: 100vh;*/
    margin: 0 auto;
}

    .modal.show .modal-dialog.full-screen .modal-body {
        padding: 0;
    }

    .modal.show .modal-dialog.full-screen .modal-header {
        display: none;
    }

    .modal.show .modal-dialog.full-screen .carousel-inner {
        aspect-ratio: unset;
    }

    .modal.show .modal-dialog.full-screen .carousel-item {
        height: 100vh;
    }

    .modal.show .modal-dialog.full-screen .carousel-inner .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin: 0 auto;
        cursor: pointer;
    }

#galleryCarousel button i, #floorplanGalleryCarousel button i {
    width: 45px;
    height: 45px;
    background-color: var(--color-accent);
}

.carousel .full-screen-icon {
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    width: 60px;
    height: 60px;
    z-index: 3000;
    background-color: rgba(0,0,0,0.3);
    border-radius: var(--bs-border-radius);
    padding: 0.75rem;
    cursor: pointer;
}

    .carousel .full-screen-icon i.full-screen {
        background-color: #fff;
    }

    .carousel .full-screen-icon i.btn-close {
        display: none;
        width: 28px;
        height: 28px;
        background-size: 28px;
        --bs-btn-close-opacity: 1;
        --bs-btn-close-hover-opacity: 1;
    }

.modal-dialog.full-screen .carousel .full-screen-icon i.full-screen {
    display: none;
}

.modal-dialog.full-screen .carousel .full-screen-icon i.btn-close {
    display: block;
}




/* TENANT DASHBOARD */

.tenancy-tenants .tenant {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.5rem;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-page-bg);
}

    .tenancy-tenants .tenant .icon {
        width: 20px;
        height: 20px;
    }

        .tenancy-tenants .tenant .icon i {
            background-color: var(--color-text);
        }

    .tenancy-tenants .tenant.you {
        padding-top: 0.5rem;
        border-top: 1px solid var(--color-page-bg);
        color: var(--color-accent);
    }

        .tenancy-tenants .tenant.you .icon i {
            background-color: var(--color-accent);
        }

.tenancy-tenants .others {
    padding-top: 0.5rem;
}

.tenancy-balance {
    margin-top: 1rem;
    border: 1px solid var(--color-accent-lightbg);
    padding: 1.25rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--color-page-bg);
}

    .tenancy-balance .balance {
        font-size: 2rem;
        color: var(--color-accent);
        font-weight: 700;
    }

    .tenancy-balance .note {
        margin-top: 0.5rem;
        color: var(--color-accent);
    }

    .tenancy-balance.overdue {
        color: var(--bs-danger);
        border-color: var(--bs-danger-bg-subtle);
        background-color: rgba(248, 215, 218, 0.13);
    }

        .tenancy-balance.overdue * {
            color: var(--bs-danger);
        }

    .tenancy-balance.overdue {
        color: var(--bs-danger);
        border-color: var(--bs-danger-bg-subtle);
        background-color: rgba(248, 215, 218, 0.13);
    }

    .tenancy-balance .widget-totals {
        margin-top: 1rem;
    }

@media (max-width: 576px) {

    .tenancies .photo {
        margin-bottom: 0.5rem;
    }
}

@media (min-width: 576px) {

    .curr-tenancy-details {
        padding-top: 0.5rem;
    }
}



/* TENANT ACCOUNT */

tbody tr.future td {
    color: var(--color-text-light);
    background-color: rgba(0,0,0,0.025);
}

tbody tr.overdue td, tbody tr.overdue:hover td {
    /*color:var(--bs-danger);*/
    /*background-color: rgba(248, 215, 218, 0.13);*/
}

    tbody tr.overdue td.balance {
        font-weight: 600;
        color: var(--bs-danger);
    }



/* UTILITIES */

#meterReadingsModal .modal-body {
    text-align: center;
}

    #meterReadingsModal .modal-body img {
        margin: 0 auto;
        max-width: 100%;
        max-height: 100%;
    }


/* TABLES */
.table {
    --bs-border-color: rgba(0,0,0,0.075);
}

.table-container {
    background-color: #fff;
    padding: 0.25rem 0 0.75rem 0;
    border-radius: var(--bs-border-radius);
    box-shadow: var(--box-shadow);
}

.table > :not(caption) > * > * {
    color: var(--color-text);
    --bs-table-accent-bg: #fff;
    box-shadow: none;
}

.table > :not(caption) > * > th {
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 0.75rem 0.5rem;
    color: var(--color-accent);
}

th.first {
    border-top-left-radius: var(--bs-border-radius);
}

th.last {
    border-top-right-radius: var(--bs-border-radius);
}

th.textarea-column {
    min-width: 250px;
}

td.textarea {
    min-width: 250px;
}

    td.textarea span {
        display: inline;
        -webkit-line-clamp: 4;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
    }


td.table-lastcol-icon {
    text-align: right;
}

table .icon {
    max-width: 20px;
    fill: var(--color-icons);
    stroke: var(--color-icons);
}

    table .icon i {
        width: 20px;
        height: 20px;
        background-color: var(--color-icons);
    }

@media (max-width: 576px) {

    .table {
        font-size: 0.7rem;
    }

        .table > :not(caption) > * > th {
            font-size: 0.6rem;
        }
}

.list-icon {
    width: 24px;
    height: 24px;
    margin-right: 1.5rem;
    margin-top: 4px;
    float: right;
}

    .list-icon i {
        background-color: var(--color-icons);
    }

.page-message {
    background-color: #fff;
    padding: calc(var(--bs-gutter-x) * 1);
    border-radius: calc(var(--bs-border-radius) * 1.5);
    color: var(--color-text);
    box-shadow: var(--box-shadow);
    margin-bottom: 1rem;
}

.content-box.details-form .page-message {
    padding: 0;
    box-shadow: none;
}



/* LIST FILTERS */
.list-filters {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 1.5rem;
    position: relative;
    text-align: left;
    width: 38px;
    float: right;
}

    .list-filters h3 {
        color: var(--color-accent);
    }

    .list-filters .reset {
        font-weight: 400;
        font-size: 0.8rem;
        float: right;
        padding-top: 2px;
    }

    .list-filters .icon {
        position: relative;
    }

.filter-count {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    line-height: 18px;
    vertical-align: middle;
    background-color: #e0e0e0;
    color: #a3a3a3;
    text-align: center;
    font-weight: 700;
    font-size: 0.7rem;
}

    .filter-count.has-filters {
        background-color: var(--color-accent);
        color: #fff;
    }

.list-filters object {
    visibility: hidden;
}

.list-filters svg, .list-filters object, .list-filters i {
    margin-top: 6px;
    width: 24px;
    height: 24px;
    background-color: var(--color-icons);
}

.list-filters .dropdown-menu {
    min-width: 275px;
    margin-top: 10px;
    padding: 1.5rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}

.list-filters .btn {
    margin-top: 1.5rem;
}

.list-filters input[type=text], .list-filters select {
    font-size: 0.8rem;
    color: var(--color-text);
}

.list-filters i.date-range-picker {
    cursor: pointer;
    margin-top: -2px;
    width: 17px;
    height: 17px;
    background-color: var(--color-icons);
}

.list-filters input[type=text].date-picker {
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color-translucent);
    cursor: pointer;
}

.list-filters .date-range-group .fields, .list-filters .inline-inputs {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 0.5rem;
    align-items: center;
}

    .list-filters .date-range-group .fields input, .list-filters .inline-inputs input {
        width: 100px;
    }

    .list-filters .date-range-group .fields div, .list-filters .inline-inputs div {
        flex-grow: 0;
        font-size: 0.8rem;
        color: var(--color-text);
    }

.list-filters .date-range-group .reset {
    color: var(--color-accent);
    padding-right: 1rem;
    margin-top: -1px;
    cursor: pointer;
}

.list-filters .form-check, .list-filters .form-check * {
    cursor: pointer;
}

    .list-filters .form-check label {
        padding-top: 2px;
    }

.list-filters label {
    color: var(--color-accent);
}

.list-filters .spacer {
    height: 1rem;
}

@media (max-width: 576px) {

    .list-icon, .result-count {
        margin-right: 0.75rem;
    }
}




/* SPECIFIC TABLE STYLES */
table.viewings {
    min-width: 600px;
}


/* DATE PICKER OVERRIDES */
.daterangepicker td.today:not(.active) {
    background-color: #eee;
}

.daterangepicker .ranges li.active, .daterangepicker td.today:not(.off).active, .daterangepicker td.end-date:not(.off).active, .daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker td.available:hover {
    background-color: var(--color-accent);
    color: #fff;
}

.daterangepicker td.in-range {
    background-color: var(--color-accent-lightbg);
    color: var(--color-accent);
}


/* MULTI SELECT */
.filter-multi-select .dropdown-item .custom-checkbox:checked ~ .custom-control-label::before, .filter-multi-select .dropdown-item .custom-checkbox:indeterminate ~ .custom-control-label::before {
    background-color: var(--color-accent);
}

.filter-multi-select .dropdown-item {
    padding: 0.25rem 0.5rem;
}

.list-filters .filter-multi-select .dropdown-menu {
    min-width: auto;
    max-width: 225px;
}

.filter-multi-select > .viewbar > .selected-items > .item {
    color: var(--color-text);
    background-color: #eee;
    border-radius: var(--bs-border-radius);
    font-size: 0.8rem;
    height: auto;
    align-items: flex-start;
}

.filter-multi-select .dropdown-item .custom-control-label {
    width: 150px;
    word-wrap: normal;
    white-space: normal;
}

    .filter-multi-select .dropdown-item .custom-control-label::before, .filter-multi-select .dropdown-item .custom-checkbox:checked ~ .custom-control-label::before, .filter-multi-select .dropdown-item .custom-checkbox:indeterminate ~ .custom-control-label::before {
        top: 0;
    }

    .filter-multi-select .dropdown-item .custom-control-label::after {
        top: 0;
    }

.filter-multi-select .filter {
    display: none;
}

.filter-multi-select > .viewbar > .selected-items > .item > button {
    color: var(--color-text);
}



/* PAGING */
.pager {
    padding-top: 1rem;
    font-size: 0.8rem;
    /*display:flex;
    flex-direction:row;
    justify-content:space-between;*/
}

    .pager span, .pager a {
        box-shadow: var(--box-shadow);
        margin: 0 0.125rem;
        padding: 0.5rem 0.75rem;
        background-color: rgba(255,255,255,0.3);
        border-radius: var(--bs-border-radius);
    }

.result-count {
    margin: 0.5rem 1.5rem 0 0;
    float: right;
}

.pager span.current {
    background-color: var(--color-accent);
    color: #fff;
}

.pager a {
    background-color: rgba(255,255,255,0.8);
}

    .pager a:hover {
        background-color: var(--color-accent);
        color: #fff;
    }

@media (max-width: 576px) {

    #content-container .row.pager {
        --bs-gutter-y: 1.5rem;
    }

    .pager {
        font-size: 0.7rem;
    }

        .pager span, .pager a {
            padding: 0.25rem 0.5rem;
        }
}



/* MODALS */
.modal-body input.form-control[type=text] {
    max-width: 100%;
}

.modal-header {
    border-bottom: 0;
    box-shadow: var(--box-shadow);
}

.modal-body {
    background-color: var(--color-page-bg);
}

.modal-footer {
    border-top: 0;
}



/* PRINT OVERRIDES */
@media print {

    @page {
        size: landscape;
    }

    body {
        zoom: 70%;
    }

    nav.fixed-top {
        position: static;
    }

    button#hamburger-shrink, button#hamburger {
        display: none;
    }

    div#user-nav {
        display: none;
    }

    div.list-icon, div.list-filters {
        display: none;
    }

    .navbar-brand {
        margin-left: -55px;
    }

    #sub-nav {
        position: static;
        margin-top: 0px;
    }

    #content-container.sub-nav-container {
        margin-top: 10px;
    }

    .row.pager {
        display: none;
    }

    .table-container {
        padding-bottom: 20px;
    }
}