@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/***************
FONTS
****************/
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.ttf');
    font-weight: 700;
}

/*************** 
variables starting with 'rz-' are used in Radzen so we can override them here globally, 
without defining specific class styles
****************/
:root {
    --bs-body-color: #141515;
    --rz-grid-cell-color: #141515;
    --rz-text-h1-color: #141515;
    --brand-dark-green: #01775A;
    --brand-light-green: #DDF5EB;
    --brand-white: white;
    --brand-background-color: #F7FBFC;
    --brand-text-primary: #141515;
    --brand-text-secondary: #616466;
    --brand-primary-green: #00F0B5;
    --brand-active-green: #B5F5DA;
    --brand-radius: 8px;
    --brand-disabled-background: #E5E5E6;
    --brand-disabled-font: #7A7E80;
    --brand-error-border-color: #FF1F4D;
    --brand-error-background-color: #fde4ea;
    --brand-border-divider-color: #E5E5E6;
    --brand-border-main-color: #F2F2F3;
    --brand-danger-background-color: #FF1F4D;
    --brand-danger-background-hover-color: #f54a70;
    --rz-on-primary: var(--brand-text-primary);
    --rz-primary: var(--brand-primary-green);
    --rz-primary-lighter: var(--brand-light-green);
    --rz-on-secondary: var(--brand-text-primary);
    --rz-secondary: var(--brand-white);
    --rz-base-100: var(--brand-background-color);
    --rz-body-background-color: var(--rz-base-100);
    --rz-border-radius: var(--brand-radius);
    --rz-button-shadow: none;
    --rz-button-hover-shadow: none;
    --rz-text-h1-letter-spacing: 0;
    --rz-text-h2-letter-spacing: 0;
    --rz-text-h3-letter-spacing: 0;
    --rz-text-h4-letter-spacing: 0;
    --rz-text-h5-letter-spacing: 0;
    --rz-text-h6-letter-spacing: 0;
    --rz-text-display-h1-letter-spacing: 0;
    --rz-text-display-h2-letter-spacing: 0;
    --rz-text-display-h3-letter-spacing: 0;
    --rz-text-display-h4-letter-spacing: 0;
    --rz-text-display-h5-letter-spacing: 0;
    --rz-text-display-h6-letter-spacing: 0;
    --rz-text-subtitle1-letter-spacing: 0;
    --rz-text-subtitle2-letter-spacing: 0;
    --rz-text-body1-letter-spacing: 0;
    --rz-text-body2-letter-spacing: 0;
    --rz-text-button-letter-spacing: 0;
    --rz-text-caption-letter-spacing: 0;
    --rz-text-overline-letter-spacing: 0;
    --rz-text-font-family: 'IBM Plex Sans', Arial, sans-serif !important;
    --rz-text-subtitle1: 'IBM Plex Sans', Arial, sans-serif !important;
    --bs-body-font-family: 'IBM Plex Sans', Arial, sans-serif;
    --rz-checkbox-checked-hover-background-color: var(--brand-dark-green);
    --rz-checkbox-checked-icon-background-color: var(--brand-dark-green);
    --rz-checkbox-checked-color: var(--brand-white);
    --rz-checkbox-checked-border: 1px solid var(--brand-dark-green);
    --rz-checkbox-checked-hover-border: 1px solid var(--brand-dark-green);
    --rz-datalist-background-color: var(--rz-base-background-color);
    --rz-datalist-shadow: none;
    --rz-datalist-padding: 0.5rem;
    --rz-datalist-border: var(--rz-border-base-300);
    --rz-datalist-border-radius: var(--rz-border-radius-0);
    --rz-datalist-item-shadow: none;
    --rz-datalist-item-border: none;
    --rz-datalist-item-vertical-margin: 0.1rem;
    --rz-datalist-item-horizontal-margin: 0;
    --rz-datalist-item-padding: 0;
    --rz-datalist-item-background-color: var(--rz-base-background-color);
    --rz-badge-text-transform: none;
    --rz-badge-letter-spacing: 0;
    --rz-header-background-color: var(--rz-base-100);
    --rz-header-min-height: 3.5rem;
    --rz-header-color: var(--rz-text-color);
    --rz-header-shadow: none;
    --rz-layout-body-background-color: var(--rz-base-100);
    --rz-notification-icon-margin: 0 5px 0 0;
    --rz-panel-shadow: none;
    --rz-panel-border-radius: var(--rz-border-radius-6);
    --rz-panel-menu-padding: 0.5rem 0;
    --rz-panel-menu-font-size: 1rem;
    --rz-panel-menu-font-weight: 600;
    --rz-panel-menu-color: var(--brand-text-primary);
    --rz-panel-menu-background-color: var(--rz-base-100);
    --rz-panel-menu-hover-background-color: var(--brand-light-green);
    --rz-panel-menu-hover-color: var(--brand-dark-green);
    --rz-panel-menu-item-line-height: 1.5rem;
    --rz-panel-menu-item-padding: 0.75rem 1rem;
    --rz-panel-menu-item-margin: 0 0.5rem;
    --rz-panel-menu-item-border: var(--rz-border-base-100);
    --rz-panel-menu-item-border-radius: 4px;
    --rz-panel-menu-item-active-background-color: var(--brand-light-green);
    --rz-panel-menu-item-background-color: var(--rz-base-100);
    --rz-panel-menu-item-active-color: var(--brand-dark-green);
    --rz-panel-menu-item-active-indicator: var(--brand-light-green);
    --rz-sidebar-background-color: var(--rz-base-100);
    --rz-sidebar-border-right: var(--rz-border-base-200);
    --rz-sidebar-toggle-color: var(--rz-text-color);
    --rz-text-subtitle2-font-size: 1rem;
    --rz-text-h6-font-size: 1rem;
    --rz-badge-font-size: 1rem;
    --bs-body-font-size: 1rem;
    --rz-grid-cell-font-size: 1rem;
    --rz-grid-header-font-size: 1rem;
    --rz-text-body2-margin-bottom: 0.01rem;
    --rz-link-color: var(--brand-text-secondary);
    --rz-link-hover-color: var(--brand-dark-green);
    --rz-button-base-background-color: var(--brand-dark-green);
    --rz-sidebar-toggle-hover-background-color: var(--brand-light-green);
    --rz-sidebar-toggle-hover-color: var(--brand-dark-green);
    --rz-sidebar-border-right: none !important;
    --rz-panel-menu-icon-color: var(--brand-text-primary);
    --rz-text-h1-margin-bottom: 0.5rem;
    --rz-paginator-numeric-button-selected-color: var(--brand-dark-green);
    --rz-paginator-numeric-button-hover-background-color: var(--brand-light-green);
    --rz-paginator-summary-font-size: 1rem;
    --rz-card-border-radius: var(--brand-radius);
    --rz-card-shadow: none;
    --rz-tooltip-color: var(--brand-text-primary);
    --rz-tooltip-background-color: var(--brand-active-green);
    --rz-tooltip-border-radius: 4px;
    --rz-tooltip-shadow: none;
    --rz-tooltip-font-size: 16px;
    --rz-tooltip-padding: 0.25rem 1rem;
    --rz-tree-node-selected-background-color: var(--brand-light-green);
    --rz-tree-node-hover-background-color: var(--brand-light-green);
    --rz-tree-node-toggle-width: 1.5rem;
    --rz-input-background-color: var(--brand-light-green);
    --rz-input-hover-border: 2px solid var(--brand-light-green);
    --rz-input-focus-border: 2px solid var(--brand-dark-green);
    --rz-input-border: 2px solid var(--brand-light-green);
    --rz-input-border-radius: var(--brand-radius);
    --rz-input-value-color: var(--brand-text-primary);
    --rz-input-placeholder-color: var(--brand-dark-green);
    --rz-menu-item-hover-background-color: var(--brand-light-green);
    --rz-dropdown-item-selected-color: var(--brand-dark-green);
    --rz-form-field-label-focus-color: var(--brand-dark-green);
    --rz-card-padding: 1.5rem;
    --rz-radio-circle-background-color: var(--brand-dark-green);
}

/***************
border for all content container
****************/
.border-panel {
    border: 1px solid var(--brand-border-main-color) !important;
}

/***************
padding for whole page 
****************/
.rz-layout {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/***************
page header titles
****************/
.rz-text-h1 {
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

.rz-text-h2 {
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    padding-left: 2rem;
}

.rz-text-h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
}

/***************
navigation items
****************/
.rz-panel-menu .rz-navigation-item-wrapper {
    position: relative;
    line-height: var(--rz-panel-menu-item-line-height);
    transition: var(--rz-panel-menu-item-transition);
    border-radius: var(--rz-panel-menu-item-border-radius) !important;
    overflow: hidden;
    font-weight: 400;
}

    .rz-panel-menu .rz-navigation-item-wrapper:hover,
    .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
        color: var(--brand-text-primary);
    }

/* pressed state of navigation items */
.rz-navigation-item-link:not(.rz-state-disabled):active:before {
    background: none !important;
    background-color: var(--brand-light-green) !important;
    color: var(--brand-text-primary) !important;
}

/* pressed state of navigation items */
.rz-panel-menu .rz-navigation-item-link:not(.rz-state-disabled):active {
    background: none !important;
}

.rz-navigation-item-wrapper-active {
    font-weight: 700 !important;
}

.rz-panel-menu .rz-navigation-item {
    margin-bottom: 0.5rem !important;
}

.rz-panel-menu .rz-navigation-item-wrapper .rz-navigation-item-wrapper-active {
    font-weight: 700 !important;
}

.psb-sidebar {
    display: flex;
    flex-direction: column;
}

    .psb-sidebar .rz-panel-menu .rz-navigation-item-icon-children {
        margin-left: auto;
    }

    .psb-sidebar .rz-panel-menu .rz-badge {
        margin-left: 0.5rem;
        font-size: 9px;
        line-height: 12px;
    }

/***************
default cursor for links
****************/
a, #search-icon {
    cursor: pointer !important;
}

/***************
tabs
****************/
.rz-tabview-nav li a,
.rz-tabview-nav li a:not([href]):not([class]) {
    font-size: 16px;
    border-bottom-color: var(--brand-dark-green);
    color: var(--brand-dark-green);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none !important;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-top-width: 0;
    border-bottom: 4px solid var(--brand-dark-green);
}

.rz-tabview-nav li.rz-state-disabled > a:not([href]):not([class]) {
    color: grey !important;
}

/***************
checkboxes
****************/
.rz-chkbox-box {
    border-color: var(--brand-text-primary);
    background-color: var(--brand-white) !important;
}

    .rz-chkbox-box .rz-state-active {
        border-color: var(--brand-dark-green);
    }

    .rz-chkbox-box:hover:not(.rz-state-disabled):after {
        background-color: transparent !important;
    }

    .rz-chkbox-box:hover:not(.rz-state-disabled) {
        border-color: var(--brand-dark-green) !important;
    }

.rz-chkbox-label:hover,
.rz-chkbox-label:active {
    color: var(--brand-dark-green);
    cursor: pointer;
}

/***************
TOOLTIPS
****************/
.rz-tooltip-content {
    font-weight: 400;
}

.rz-tooltip .rz-left-tooltip-content:after,
.rz-tooltip .rz-right-tooltip-content:after,
.rz-tooltip .rz-top-tooltip-content:after,
.rz-tooltip .rz-bottom-tooltip-content:after {
    display: none;
}

/***************
Style for title panel on pages
****************/
.title-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: unset
}

/***************
INPUTS IN FORMS
****************/
:not(.rz-state-focused) > .rz-form-field-label {
    color: var(--brand-text-secondary);
}

.rz-form-field-content:has(.invalid) {
    background-color: var(--brand-error-background-color);
    border-color: var(--brand-error-background-color) !important;
}

.rz-form-field.rz-variant-flat:not(.rz-state-disabled).rz-state-focused .rz-form-field-content:has(.invalid) {
    border-color: var(--brand-error-border-color) !important;
    box-shadow: none !important;
}

.invalid ~ .rz-form-field-label {
    color: var(--brand-error-border-color) !important;
}

/***************
BUTTONS
****************/

/* ButtonStyle=Info look */
.rz-button.rz-info {
    background-color: transparent !important;
    color: var(--brand-dark-green) !important;
    border-radius: 24px !important;
    border: 2px solid var(--brand-dark-green) !important;
    font-weight: 600 !important;
    font-size: 1rem;
}

    .rz-button.rz-info:hover {
        background-color: var(--brand-light-green) !important;
    }

    .rz-button.rz-info.rz-state-disabled {
        color: var(--brand-disabled-font);
        border-color: var(--brand-disabled-background);
    }

/* ButtonStyle=Danger look */
.rz-button.rz-danger {
    background-color: var(--brand-danger-background-color) !important;
    color: var(--brand-white) !important;
    border-radius: 24px !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 1rem;
}

    .rz-button.rz-danger:hover {
        background-color: var(--brand-danger-background-hover-color) !important;
    }

    .rz-button.rz-danger.rz-state-disabled {
        color: var(--brand-disabled-font);
        border-color: var(--brand-disabled-background);
    }

/* ButtonStyle=Light look == tetriary in brand styles */
.rz-button.rz-light {
    background-color: transparent !important;
    color: var(--brand-dark-green) !important;
    border-radius: 24px !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 1rem;
}

    .rz-button.rz-light:hover {
        background-color: var(--brand-light-green) !important;
    }

/* main buttons */
.rz-button.rz-secondary,
.rz-button.rz-primary {
    font-weight: 600;
    border-radius: 24px !important;
    font-size: 1rem;
}

    .rz-button.rz-primary:hover {
        background-color: var(--brand-active-green);
    }

    .rz-button.rz-secondary:hover {
        background-color: var(--brand-light-green);
    }

    .rz-button.rz-primary.rz-state-disabled {
        color: var(--brand-disabled-font);
        background-color: var(--brand-disabled-background);
    }

.rz-button.rz-info.rz-state-disabled {
    color: var(--brand-disabled-font);
    border-color: var(--brand-disabled-background);
}

/* 3-dot buttons */
.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active) {
    background-color: var(--brand-light-green);
}

.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active {
    background-color: var(--brand-light-green);
}

/***************
RADIO BUTTONS
****************/
.rz-radiobutton-box {
    background-color: transparent !important;
    border-color: var(--brand-text-primary);
}

    .rz-radiobutton-box.rz-state-active {
        border-color: var(--brand-dark-green) !important;
    }

/***************
BUTTONS IN DATA GRID
****************/
.rz-badge,
.rzi-primary {
    color: var(--brand-dark-green) !important;
    font-weight: 600;
}

/***************
ICONS
****************/
.rzi.rzi-primary {
    cursor: pointer;
    font-weight: 400;
}

#search-icon:hover {
    background-color: var(--brand-light-green);
}

.heat-cost-allocator-icon {
    background: url('../icons/heatCostAllocator.png');
    display: inline-flex;
    width: 32px;
    height: 32px;
}

.heat-meter-icon {
    background: url('../icons/heatMeter.png');
    display: inline-flex;
    width: 32px;
    height: 32px;
}

.water-meter-icon {
    background: url('../icons/waterMeter.png');
    display: inline-flex;
    width: 32px;
    height: 32px;
}

/***************
TEXT LOOK IN BUTTONS
****************/
.rz-button-md,
.rz-scheduler-nav-views .rz-button.rz-primary,
.rz-scheduler-nav-views .rz-primary.rz-paginator-element,
.rz-date-filter-buttons .rz-button,
.rz-date-filter-buttons .rz-paginator-element,
.rz-fileupload-choose,
.rz-selectbutton .rz-button.rz-button-md,
.rz-selectbutton .rz-button-md.rz-paginator-element,
.rz-selectbutton .rz-date-filter-buttons .rz-button,
.rz-selectbutton .rz-date-filter-buttons .rz-paginator-element,
.rz-date-filter-buttons .rz-selectbutton .rz-button,
.rz-date-filter-buttons .rz-selectbutton .rz-paginator-element,
.rz-selectbutton .rz-button.rz-fileupload-choose,
.rz-selectbutton .rz-fileupload-choose.rz-paginator-element,
.rz-splitbutton .rz-button-md,
.rz-splitbutton .rz-fileupload-choose {
    letter-spacing: 0;
    text-transform: none;
    font-size: 1rem;
}

/***************
DIALOG
****************/
.rz-dialog-titlebar-close {
    display: none;
}

.rz-dialog-title {
    font-size: 24px;
    font-weight: 700;
}

/***************
USED in index.html
****************/
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/***************
DATA GRID
****************/
.rz-data-grid {
    border: none !important;
}

    .rz-data-grid .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) {
        border: 0 0 0 1px !important;
    }

    .rz-data-grid > .rz-datatable-data td:not(:last-child), .rz-datatable-data td.rz-composite-cell, .rz-grid-table td:not(:last-child), .rz-grid-table td.rz-composite-cell {
        border: 0 0 0 1px !important;
    }

    .rz-data-grid .rz-datatable-odd > td {
        background-color: var(--brand-white) !important;
    }

    .rz-data-grid .rz-grid-table td, .rz-grid-table th {
        padding: 0 !important;
    }

    .rz-data-grid > div {
        box-shadow: none !important;
    }

        .rz-data-grid > div > table tr {
            height: 4.2rem;
        }

    .rz-data-grid .rz-datatable-thead th .rz-column-title, .rz-grid-table thead th .rz-column-title {
        padding: 0 !important;
    }

    .rz-data-grid > div > table > thead > tr > th {
        border: none !important;
        background-color: transparent;
    }

        .rz-data-grid > div > table > thead > tr > th > div > span {
            justify-content: start;
        }

            .rz-data-grid > div > table > thead > tr > th > div > span > span.rz-column-title-content {
                color: var(--brand-text-primary);
                font-weight: 600;
            }

.datagrid-with-header .rz-group-header {
    justify-content: flex-end !important;
    border-bottom: none !important;
    padding: 0 2rem 0 0 !important;
}

    .datagrid-with-header .rz-group-header i {
        cursor: pointer !important;
    }

.data-grid-element {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rz-datatable-emptymessage {
    color: var(--brand-text-secondary);
}

.rz-cell-filter {
    padding: 0 0.2rem 0 0 !important
}

thead th div span {
    justify-content: center;
}

/***************
PAGINATOR SUMMARY 
****************/
.rz-paginator {
    position: relative;
}

.rz-paginator-summary {
    position: absolute;
    right: 0;
}

.rz-paginator-element.rz-state-disabled:hover {
    background-color: transparent !important;
    cursor: auto !important;
}
/***************
LOADING CIRCLE
****************/
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--brand-dark-green);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* todo: remove later when not used*/
.bolded-label {
    font-weight: 600;
    cursor: pointer;
}

.logo {
    width: 9.5rem;
}

/* todo: can be replaced with radzen classes */
.edit-draft-text {
    padding: 0 0 0 0 !important;
    font-size: 10px !important;
}

.rz-tree.wibutler-location-tree .rz-tree-toggler {
    margin-left: calc(var(--rz-tree-node-toggle-width)*-.8) !important;
}

.rz-tree.wibutler-location-tree .rz-treenode-label {
    overflow: hidden;
    white-space: nowrap;
}

.rz-tooltip .rz-top-tooltip-content:after {
    left: 18px;
}

.rz-tooltip .rz-bottom-tooltip-content:after {
    left: 18px;
}


/***************
ERROR / SUCCESS messages
****************/
.rz-notification {
    right: unset !important;
    top: unset !important;
    left: 50% !important;
    bottom: 0% !important;
    margin-left: -125px !important;
}

.rz-growl-message > p {
    word-break: break-word;
    font-weight: 400;
}

.rz-growl-title {
    font-weight: 600;
}

.rz-growl-item-container {
    border-radius: var(--rz-border-radius);
}

.rz-growl-message-error .rz-growl-item {
    color: #D5193E;
    background-color: #e4d8db !important
}

.rz-growl-message-success .rz-growl-item {
    color: #177E4B;
    background-color: #d0e4d9 !important;
}

.rz-growl-message-warn .rz-growl-item {
    color: var(--rz-on-warning);
    background-color: var(--rz-warning-darker);
}

.rz-growl-image.rzi-times:before {
    content: "warning";
}

/***************
MAIN LAYOUT
****************/
.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row a, .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row a:hover, .top-row .btn-link:hover {
            text-decoration: underline;
        }

        .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

b {
    font-weight: 600;
}

/**************
COMPONENT SPECIFIC STYLES
(Name of class should start with component name)
****************/
.realties-info-badge {
    font-size: 1rem;
}

.connected-accounts-status {
    cursor: help;
}

    .connected-accounts-status.connected {
        color: green;
    }

    .connected-accounts-status.disconnected {
        color: red;
    }

    .connected-accounts-status.unknown {
        color: orange;
    }

.dashboard-card-title {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.edit-profile-link {
    color: var(--brand-dark-green);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.edit-profile-link {
    padding: 0 !important;
}

/* todo: can be removed if we sort out why userprofileTopDialog gets focus on the link after opening */
.rz-link.edit-profile-link:focus-visible {
    outline: none !important;
}

/* todo: can be removed if we sort out why userprofileTopDialog gets focus on the link after opening */
.rz-link.edit-profile-link:focus .rz-link-text {
    text-decoration: none !important;
}

.sidebar-menu-button {
    width: 80% !important;
}

.login-display-icon {
    height: 48px;
    width: 48px;
}

.profile-button-dot {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    background-color: var(--brand-light-green);
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .profile-button-dot span {
        font-weight: 700;
        color: var(--brand-dark-green);
        font-style: normal;
        font-size: 120%;
    }

.profile-button-pointer {
    cursor: pointer;
}

.my-profile-button {
    width: 100% !important;
}

#my-profile-cookies .rz-text-subtitle2 {
    font-size: 16px !important;
    font-weight: 600 !important;
}

#my-profile-cookies .list-group-item {
    border: none !important;
}

#my-profile-cookies .fw-bold.text-primary {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--brand-text-primary) !important;
}


#my-profile-cookies button {
    background-color: var(--brand-white) !important;
    color: var(--brand-dark-green) !important;
    border-radius: 24px !important;
    border: 2px solid var(--brand-dark-green) !important;
    font-weight: 600 !important;
    margin-left: 20px !important;
}

    #my-profile-cookies button:hover {
        background-color: var(--brand-light-green) !important;
    }

#my-profile-cookies .rz-accordion-header {
    background-color: var(--brand-light-green) !important;
}

#my-profile-cookies .rz-accordion {
    box-shadow: none !important;
}

#my-profile-cookies text-muted {
    color: var(--brand-text-primary) !important;
}

.drag-drop-line {
    border-top: 1px solid var(--brand-border-divider-color);
    border-bottom: 1px solid var(--brand-border-divider-color);
}

.building-managment-column-header, .draft-column-header {
    font-size: 16px;
    font-weight: 600;
}

.adding-device-border-column,
.building-management-column,
.draft-column {
    border-right-style: solid;
    border-right-width: 1px;
    border-color: var(--brand-border-divider-color) !important;
}

    /*Rule to remove the right border from the last column */
    .building-management-column:last-child,
    .draft-column:last-child,
    .adding-device-border-column:last-child {
        border-right: none !important;
    }

    .building-management-column,
    .draft-column label {
        cursor: pointer;
    }

        .building-management-column .rz-state-highlight,
        .draft-column .rz-state-highlight {
            background-color: var(--brand-light-green) !important;
            border-radius: var(--rz-tree-node-selected-border-radius);
            cursor: pointer;
        }

        .building-management-column p.rz-text-body2,
        .draft-column p.rz-text-body2 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        .building-management-column .rz-datalist-data,
        .draft-column .rz-datalist-data {
            cursor: pointer;
            padding-left: 0;
        }

    .building-managment-column .rz-treenode-content-selected .rz-treenode-label,
    .draft-column .rz-treenode-content-selected .rz-treenode-label {
        padding: 0 !important;
    }

    .building-management-column .rz-treenode-content,
    .draft-column .rz-treenode-content {
        margin-bottom: 10px;
    }

.device-details-flex-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.adding-device-column-title {
    font-weight: 600;
    color: var(--brand-text-primary);
    font-size: 16px;
}

.adding-device-column {
    overflow-y: auto;
    max-height: 440px;
}

.adding-device-manufacturer-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    font-size: 1rem !important;
}

.adding-device-card {
    min-height: 440px;
    min-width: 125px;
}

.adding-device-item-row {
    cursor: pointer;
    overflow: hidden;
    height: 2.2rem;
}

    .adding-device-item-row:hover {
        background-color: var(--brand-light-green);
    }

    .adding-device-item-row.rz-state-highlight {
        background-color: var(--brand-light-green);
    }

        .adding-device-item-row.rz-state-highlight p {
            font-weight: 600;
        }

.adding-device-manufacturer-image-container {
    min-width: 36px;
    overflow: hidden;
}

.adding-device-manufacturer-image {
    background-color: lightgray;
    border-radius: 4px;
}

.adding-device-overflow-hidden {
    overflow: hidden;
}

.adding-device-image {
    display: block;
    margin: auto;
}

.add-wibutler-device-error {
    color: var(--rz-danger);
}

.add-wibutler-device-serial-number {
    width: 60% !important;
}

.add-connected-accounts-manufacturer {
    cursor: pointer;
}

    .add-connected-accounts-manufacturer.unknown {
        color: orange;
    }

.heating-curve-dialog-target-temperature-message {
    text-align: center;
    color: var(--bs-body-color);
    font-size: 1rem;
    padding: 2em;
}

.heating-curve-dialog-tooltip {
    display: flex;
    align-items: center;
}

.heating-curve-operatingmode-dropdown {
    width: fit-content;
}

.heating-curve-heatingprogram-dropdown {
    width: fit-content;
    max-height: 17rem;
    overflow-y: auto;
}

.heating-curve-slopeshift-inputbox {
    width: fit-content;
}

.heating-curve-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: -1rem;
}

.heating-curve-temperature-input {
    width: 30%;
}

.heating-curve-graph {
    height: 15rem;
    width: 35rem;
    margin-left: -2rem;
}

.plugins-button {
    width: 100% !important;
}

.plugins-card-header {
    font-size: 20px;
    font-weight: 700;
}

.plugins-card-text {
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 24px;
}

.plugins-status-active {
    color: #177E4B;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 24px;
}

.plugins-status-inactive {
    color: #D5193E;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 24px;
}

.plugins-logo {
    width: 96px;
    height: 49.55px;
    margin-bottom: 24px
}

.page-header-toggle {
    padding: 10px 10px;
}

    .page-header-toggle:active {
        color: var(--brand-text-primary) !important;
    }

.draft-header-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.draft-header-panel {
    margin-bottom: 1rem;
    max-width: 450px;
    word-wrap: break-word
}

.draft-data-list {
    height: 400px;
    overflow: auto;
}

.draft-loader {
    margin: 20% 0 0 50%;
}

.draft-realty-edit {
    background: transparent !important;
    color: var(--brand-dark-green) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

    .draft-realty-edit:active {
        box-shadow: none !important;
    }

.draft-button-group {
    color: var(--brand-text-primary) !important;
}

    .draft-button-group:hover {
        color: var(--brand-text-primary) !important;
    }

#realty-base-info-dialog .rz-form-field {
    margin-bottom: 20px;
}

#page-footer {
    font-size: 0.75rem;
}

#save-realty-basic-info-button {
    float: right;
}

#connected-accounts-button-set {
    padding-top: 25px;
}

#account-credentials-form {
    padding-top: 25px;
}

.qundis-device-type-column {
    display: flex;
    align-items: center;
    gap: 8px;
}


.device-type-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}


#issues-details-header {
    font-weight: bold;
}

.issues-details-status-header {
    float: right;
}

#issue-details-open-status {
    gap: 5px;
    float: right;
}

#issue-details-open-status-icon {
    color: #D5193E;
}

#issue-details-open-status-text {
    color: #D5193E;
}

#issue-details-closed-status {
    gap: 5px;
    float: right;
}

#issue-details-closed-status-icon {
    color: #177E4B;
}

#issue-details-closed-status-text {
    color: #177E4B;
}

#issue-details-wibutler-pro-details-stack {
    padding-top: 25px;
}

.connected-account-credentials-form-subdomain-description {
    font-size: 0.9em;
    display: block;
    margin: 0.1em 0 0 0;
}

#add-kemper-device-grid .rz-group-header {
    padding: 0 0 0 0 !important;
    border-bottom: none !important;
}

.dashboard-error-colors {
    background-color: #FFF2F4;
    color: #D5193E;
}

    .dashboard-error-colors #go-to-device-issues-button,
    .dashboard-error-colors #go-to-threshold-issues-button {
        color: #D5193E !important;
    }

        .dashboard-error-colors #go-to-device-issues-button:hover,
        .dashboard-error-colors #go-to-threshold-issues-button:hover {
            background-color: rgba(213, 25, 62, 0.1) !important;
        }

    .dashboard-error-colors i,
    .dashboard-success-colors i {
        font-size: 40px;
        padding-right: 1rem;
    }

    .dashboard-error-colors i {
        color: #FF1F4D !important;
    }

.dashboard-success-colors {
    background-color: #E6FCF1;
    color: #177E4B;
}

.dashboard-card {
    height: 100%;
}

.dashboard-card-subtitle {
    font-size: 16px;
    font-weight: 40;
    line-height: 150%;
}

.dashboard-big-number {
    font-size: 48px;
    font-weight: 700;
    line-height: 150%;
}

#last-issues-grid .rz-grid-table td:not(:last-child),
#recent-activities-grid .rz-grid-table td:not(:last-child),
#group-issues-grid .rz-grid-table td:not(:last-child),
#issues-grid .rz-grid-table td:not(:last-child) {
    padding-right: 15px !important;
}

#last-issues-grid .rz-datatable-emptymessage,
#recent-activities-grid .rz-datatable-emptymessage,
#group-issues-grid .rz-datatable-emptymessage {
    text-align: center !important;
}

#last-issues-grid .rz-grid-table thead,
#group-issues-grid .rz-grid-table thead,
#recent-activities-grid .rz-grid-table thead {
    display: none !important;
}

.issues-count-bar {
    width: 100%;
    height: 24px;
    position: relative;
}

.issues-count-bar-content {
    height: 100%;
    background: #FFF2F4;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.issues-count-bar-content-text {
    color: #D5193E;
    font-weight: 600;
    font-size: 1rem;
}

.issue-type-panel {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-right: 5px;
    height: 100%
}

.column-subtext {
    font-size: 0.75rem;
    color: #616466;
    font-weight: 400;
}

#go-to-device-issues-button i,
#go-to-threshold-issues-button i {
    padding-right: 0;
}

.issue-type-dashboard-icon {
    border-radius: 8px !important;
    padding: 14px 18px !important;
    color: #FF1F4D;
}

#auth-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
}

    #auth-error img {
        width: 300px;
        height: 50px;
    }

.wibutler-device-add-columns {
    width: 100% !important;
}

.add-device-column-styling {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.rz-datatable-subtext {
    color: var(--brand-text-secondary);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}