:root {
    --nav-height: 57px;
    --nav-background: #ebecec;
    --building-header-height: 52px;
    --primary: #1d4ee1; /*#32568d;*/
    --primary-backgroung: #FFF;
    --primary-focus: #1893ff;
    --primary-focus-backgroung: #f1f8ff;
    --primary-light: #a2b8d8;
    --secondary: #fbcb00;
    --secondary-background: #FFFCF4;
    --success: #198754;
    --success-background: #badbcc;
    --warning: #ff7800;
    --warning-background: #fff3cd;
    --warning-light: #fde68a;
    --warning-background-light: #fffbeb;
    --error: #CC0000;
    --error-background: #FFD5D5;
    --error-light: #fecaca;
    --error-background-light: #fef2f2;
    --purple-warning: #9333ea;
    --purple-warning-light: #e9d5ff;
    --purple-warning-background: #faf5ff;
    --archived: #444;
    --gray-background: #f1f5f9;
    --help-background: #f0fff0;
    --disabled: #aaa;
    --disabled-background: #fdfdfd;
    --shadow-color: #bbb;
    --shadow-dark-color: #999;
    --border-color: #999;
    --color1: #69a3f7;
    --color1-light: #dae9ff;
    --color2: #ffa700;
    --color2-light: #fff5e2;
    --color3: #ff7c08;
    --color3-light: #ffe9d6;
    --color4: #ff5313;
    --color4-light: #ffefe8;
    --color5: #ff4343;
    --color5-light: #ffebeb;
    --studena: #fff;
    --studena-background: #005aa9; /*#48B8FE*/
    --studena-background-light: #81c4ff;
    --tepla: #fff;
    --tepla-background: #c70808; /*#FF4748*/
    --tepla-background-light: #ff8282;
    --voda: #fff;
    --voda-background: #096fc8;
    --voda-background-light: #5bb2ff;
    --teplo: #000;
    --teplo-background: #ffc24c; /*#FFB247*/
    --teplo-background-light: #ffe4b1;
    --card-border-radius: 4px;
}                                            

html {
    font-size: 14px;
}

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

.bg-primary-focus {
    background-color: var(--primary-focus-backgroung);
}
.color-primary {
    color: var(--primary);
}
.color-success{
    color: var(--success);
}
.bg-success {
    background-color: var(--success-background);
}
.color-warning {
    color: var(--warning);
}
.color-333 {
    color: #333;
}
.bg-warning {
    background-color: var(--warning-background);
}
.bg-warning-light {
    background-color: var(--warning-background-light);
}
.border-warning {
    border: solid thin var(--warning) !important;
}
.border-warning-light{
        border: solid thin var(--warning-light) !important;
}
.color-error,
.color-danger{
    color: var(--error);
}
.bg-danger,
.bg-error{
    background-color: var(--error) !important;
}
.bg-danger-light,
.bg-error-light {
    background-color: var(--error-background-light) !important;
}
.border-danger-light,
.border-error-light{
    border: solid thin var(--error-light) !important;
}
.color-purple-warning {
    color: var(--purple-warning);
}
.bg-purple-warning {
    background-color: var(--purple-warning-background);
}
.border-purple-warning {
    border: solid thin var(--purple-warning-light) !important;
}
.color-cold-water {
    color: var(--studena);
}
.color-hot-water {
    color: var(--tepla);
}
.color-cold-water.light {
    color: #3b3b3b;
}

.color-hot-water.light {
    color: #3b3b3b;
}

.bg-gray {
    background-color: var(--gray-background);
}
.bg-lightgray {
    background-color: #fcfcfc !important;
}

.mw80{
  min-width:80px;  
}
.mw120 {
    min-width: 120px;
}
.mw240 {
    min-width: 240px;
}
.mw320 {
    min-width: 320px;
}
.mw400 {
    min-width: 400px;
}
.mw480 {
    min-width: 480px;
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
    }
}
@media (min-width: 1500px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1420px;
    }
}
@media (min-width: 1600px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1520px;
    }
}

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

body {
    margin-bottom: 60px;
}

body.admin,
body.supervisor{
    padding-top: var(--nav-height);
}

body.admin{
    /*background-color: var(--secondary-background);*/
}
.navbar {
    display: none;
}
.admin .navbar {
    background-color: var(--nav-background);
    display: flex;
    min-height: var(--nav-height);
    /*
    border-radius: 30px;
    margin: 0 10px;
    */
}
.supervisor .navbar {
    background-color: var(--nav-background);
    display: flex;
    min-height: var(--nav-height);
}
.user.navbar {    
    display: flex;
    min-height: var(--nav-height);
    padding:0;
}
.navbar-nav {
    background-color: var(--nav-background);
}
.navbar-brand{
    margin: 0;
}
.navbar-light .navbar-nav .nav-link{
    font-size: 1rem;
    color: #444;
    padding-bottom:3px;
}
.navbar-light .navbar-nav .nav-link:hover {
    color: #000;
}
.navbar-nav .nav-link .menu-item {
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.01em;
    padding: 0 8px;
}
.navbar-nav .nav-link:hover .menu-item,
.nav-link.active .menu-item {
    border-bottom: solid 5px #fbc531;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.app-logo {
    max-height: var(--nav-height);
    max-width: 100%;
}
@media (max-width: 769px) {
    .app-logo {
        max-height: 36px;
        max-width:85%;
    }
    /*
    .nav-item {
        padding: 8px 12px;
        border: solid thin #fac430;
        margin: 8px 12px;
    }
    */
}
.btn:focus,
.btn.active:focus,
.form-control:focus,
.form-select:focus {
    box-shadow: none;
}
input.form-control:focus{
    box-shadow: 0 0 0 2px rgba(13,110,253,.25);
}
.input-inactive {
    border: none;
    background-color: transparent;
    /*pointer-events: none;*/
}
.input-hilight {
    border: solid thin var(--primary-focus);
}
.input-group-text {
    background-color: #fbfbfb;
    border: 1px solid #546679;
}
.form-group{
    margin-bottom: 1rem;
}
.btn {
    white-space: nowrap;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-left: 0.75rem;
    padding-right: 1.5rem;
}
.btn.btn-round {
    border-radius: 20px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.btn.btn-hilight-hover{
    border: none;
    opacity: 0.75;
}
.btn.btn-hilight-hover:hover {
    border: initial;
    opacity: 1;
}
.btn-primary,
.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #ddd;
    border-color: #ddd;
}
.btn-link {
    cursor:pointer;
    text-decoration: none;
    color: #333;
}
.btn-link:hover {
    text-decoration: underline;
    color: var(--primary);
}
.btn-sm {
    padding: 2px 8px;
    font-size: 0.75em;
}
.hover:hover {
    color: var(--primary);
    background-color: var(--primary-focus-backgroung);
    box-shadow: 1px 1px 6px var(--shadow-color);
}
.fxs {
    font-size: .75em;
}
.fsm {
    font-size: .85em;
}
.fs1-1 {
    font-size: 1.1em;
}
.fs1-25 {
    font-size: 1.25em;
}
.fs1-5{
    font-size: 1.5em;
}
.bold{
    font-weight: 600;
}
.bolder {
    font-weight: bolder;
}
.form-control{
    border-color: var(--primary);
}
.border-none {
    border: none;
}
.border {
    border: solid thin #999;
}
.border-bottom-dark {
    border-bottom: solid thin #555;
}
.border-round {
    border-radius: 8px !important;
}
.border-round-right-40 {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.border-round-right-60 {
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.border-round-left-20 {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.alert-secondary {
    color: #6f7172;
    background-color: #f7f7f7;
    border-color: #d3d6d8;
}

.hide{
    display: none !important;
}
.help-text {
    font-size: 0.75em;
    color: #999;
}
.rounded{
    border-radius: 12px !important;
}
@media (min-width: 1200px) {
    .h1, h1 {
        font-size: 1.75rem;
        font-style: italic;
        font-weight: 600;
    }

    .h2, h2 {
        font-size: 1.5rem;
    }

    .h3, h3 {
        font-size: 1.25rem;
    }
    .h4, h4 {
        font-size: 1.15rem;
        font-weight: 600;
    }
}

.table-stripe {
    box-shadow: inset 0 0 0 9999px var(--bs-table-striped-bg) !important;
}

.table-sticky-top th {
    position: sticky;
    top: var(--nav-height);
    z-index: 1;
    background-color: white;
}

.table-small {
    font-size: .9em;
}
.table-small > :not(caption) > * > * {
    padding: .25rem .5rem;
}
.table-borders > :not(caption) > * > * {
    border-right-width: 1px;
    border-left-width: 1px;
}

@media (max-width: 767.98px) {
    table.table-stack thead {
        display: none;
    }
    table.table-stack tr {
        display: block;
        border: 1px solid rgba(0,0,0,.125);
        margin-bottom: .75rem;
    }
    table.table-stack td {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
    }
    table.table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
    }
    table.table-stack td[data-label=""]::before {
        content: "";
    }
}

tr.archived {
    color: var(--archived)!important;
    background-color: #ccc !important;
}

tr.hidden {
    color: #555 !important;
    background-color: var(--warning-background) !important;
}

.note {
    color: #111;
    border: solid 1px #DDD;
    padding: 15px;
    background: #ffffd9;
    border-radius: 8px;
    margin: 20px 0;
}
.code {
    font-family: monospace;
    background-color: #eee;
    padding: 0.1em 0.4em;
    border-radius: 4px;
}

.help {
    margin: 20px 0;
    padding: 15px;
    background-color: var(--help-background);    
    border-left: 4px solid var(--success);
}

.box-shadow {
    box-shadow: 1px 1px 6px var(--shadow-color);
}
.box-shadow-dark {
    box-shadow: 1px 1px 6px var(--shadow-dark-color);
}
.pointer-events-none {
    pointer-events: none;
}

.container.small div, .container.small span, .container.small input, .container.small select {
    font-size: 0.9em;
}

.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding-top: var(--nav-height);
}
.page-overlay-dialog {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    max-height: calc(90vh - var(--nav-height));
    overflow: auto;
}
@media (min-width: 1400px) {
    .page-overlay-dialog {
        width: 800px;
    }
}
@media (min-width: 1500px) {
    .page-overlay-dialog {
        width: 1000px;
    }
}
@media (min-width: 1600px) {
    .page-overlay-dialog {
        width: 1200px;
    }
}
/*
tr.error{
    color: var(--error) !important;
    background-color: var(--error-background) !important;
    --bs-table-accent-bg: var(--error-background) !important;
}
tr.disabled {
    color: var(--disabled) !important;
    background-color: var(--disabled-background) !important;
    --bs-table-accent-bg: var(--disabled-background) !important;
}
*/
.text-divider {
    display: flex;
    align-items: center;
}

.text-divider::before, .text-divider::after {
    flex: 1;
    content: '';
    padding-top: 1px;
    background-color: var(--secondary);
    margin: 5px;
}
.divider {
    padding-top: 1px;
    background-color: var(--secondary);
    margin: 5px;
}
.block-title {
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.8rem 0.5rem;
}
.block-header {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0.25rem;
    display: flex;
    align-items: center;
}
.gray-box {
    padding: 12px 24px;
    color: #bbb;
    /*background-color: var(--secondary-background);*/
    background-image: linear-gradient(to bottom right, #fefefe, #ededed);
}
.gray-box .box-icon{
    color: #ccc;
}
.success-box {
    padding: 12px 24px;
    color: #047857;
    /*background-color: var(--success-background);*/
    background-image: linear-gradient(to bottom right, #ecfdf5, #d1fae5);
}
.warning-box {
    padding: 12px 24px;
    color: #b34b00;
    /*background-color: var(--warning-background);*/
    background-image: linear-gradient(to bottom right, #fffbeb, #fef3c7);
}
.error-box,
.danger-box {
    padding: 12px 24px;
    color: #b91c1c;
    /*background-color: var(--error-background);*/
    background-image: linear-gradient(to bottom right, #fef2f2, #fee2e2);
}
.box-icon {
    margin-left: 44px;
    width: 36px;
    height: 36px;
}
.box-title{

}
.box-no{
    font-size: 1.5em;
    font-weight: 600;
}
#readings-header {
    font-size: 1.1em;
    padding-top: 20px;
    padding-bottom: 40px;       
}

.readings-monthly-data {
    display: flex;
    padding-bottom: 15px;
    scroll-behavior: smooth;
}
.readings-monthly.card {
    flex-shrink: 0;
    margin: 1px;
    border: none;
    min-width: 125px;
    border-radius: 0.5rem;
    border: solid 2px #fff;
}
.readings-monthly.card > .card-header {
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 600;
    padding: 0.25rem 1rem;
    border-radius: var(--card-border-radius);
    cursor: pointer;
    background-color: #eee;
    position: relative;
}
.readings-monthly.card .list-group {
    padding: 0;
    font-size: 0.75em;
    font-weight: 600;
}
.readings-monthly.card .list-group-item{
    padding: 0.25rem 1rem;
    border-radius: var(--card-border-radius);
}
.readings-monthly.card.blur {
    /*background-color: #eee;*/
    color: #999;
}
.readings-monthly.card.blur  .list-group-item.voda{
    background-color: var(--voda-background-light);
    color: #fefefe;
}
.readings-monthly.card.blur .list-group-item.studena-voda {
    background-color: var(--studena-background-light);
    color: #fefefe;
}
.readings-monthly.card.blur .list-group-item.tepla-voda {
    background-color: var(--tepla-background-light);
    color: #fefefe;
}
.readings-monthly.card.blur .list-group-item.teplo {
    background-color: var(--teplo-background-light);
    color: #888;
}
.readings-monthly.card.blur  .list-group-item.no-data{
    background-color: #eee;
    color: #fefefe;
}
.readings-monthly.card.active,
.readings-monthly.card:hover {
    box-shadow: 0 0 2px var(--primary-focus);
    /*background-color: var(--primary-focus-backgroung);*/
    background-color: #1893FF;
    border: solid 2px var(--primary-focus);
}
.readings-monthly.card.active .card-header {
    color: var(--primary);
    background-color: #fff;
    border: solid thin var(--primary-focus);
    font-weight: 600;
}
.readings-monthly.card .card-header::after {
    font-family: "odecty";
    content: '\f107';
    position:absolute;
    right: 6px;
    color: var(--primary);
    transition: transform 0.2s ease;
}
.readings-monthly.card.active .card-header::after {
    content: '\f106';
    color: var(--primary-focus);
}
.reading-card-header {
    text-transform: uppercase;
}
.reading-card-value {
    display: flex;
    justify-content: space-between;
}
#readings-summary {
    margin-top: 60px;
    max-width: 400px;
}
#readings-summary-data {
    display: table;
    width: 100%;
}
.readings-summary-row {
    display: table-row;
}
.readings-summary-row > div:first-child {
    border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
}
.readings-summary-row > div:last-child {
    border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
}
.readings-summary-row-heading,
.readings-summary-row-value,
.readings-summary-row-unit {
    display: table-cell;
    padding: 0.5rem 1rem;    
    font-size: 1rem;
    font-weight: 600;    
}
.readings-summary-row-heading {
    text-transform: uppercase;
    min-width: 180px;
}
.readings-summary-row-value {
    text-align: right;
    min-width: 100px;
}
.readings-summary-row-unit {
    padding-left: 0;
    font-size: 0.8em;
}
.summary-item {
    border-top: solid 2px var(--primary-focus);
    color: var(--primary);
    background-color: var(--primary-backgroung);
}
.building-tree .summary-item {
    border: solid 2px var(--primary-focus);
}
.summary-item.collapsed {
    border: 1px solid rgba(0,0,0,.125);
}
.summary-header {
    position: sticky;
    top: calc(var(--nav-height) + var(--building-header-height));
    background: #fff;
    border-bottom: solid 1px var(--primary-focus);
    padding-bottom: 1rem;
}
.collapsed > .summary-header {
    border-bottom: none;
}
.summary-block {
    display: table;
    padding-left: 1rem;
}
.summary-block-heading {
    font-size: 1rem;
    font-weight: 600;
}
.summary-block-row{
    display: table-row;
}
.summary-block-row-heading,
.summary-block-row-value,
.summary-block-row-unit {
    display: table-cell;
    padding: 0.25rem;
    font-size: 0.8rem;
}
.summary-block-row-heading {
    padding-left:0;
    padding-right: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}
.summary-block-row-value {
    text-align: right;
    min-width: 100px;
}
.summary-block-row-unit {
    padding-left: 0;
    font-size: 0.8em;
}
.summary-block-body-row{
    display:flex;
    flex-wrap:wrap;
    padding: 0.25rem 1rem 2rem 0;
    border-top: solid thin #ccc;
}

.panel-summary-filter-errors-btn {
    background-color: #fff;
    border-color: var(--border-color);
}
.summary-panel.filter-errors .panel-summary-filter-errors-btn {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}
.summary-panel.filter-errors .panel-summary-filter-errors-btn i {
    color: var(--warning);
}
.summary-panel.filter-errors .location-month:not(.has-error){
    display:none;
}
.location-month-button {
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 600;
}
.location-month:not(.collapsed) .summary-block-body-row,
.location-month:not(.collapsed) .acc-body,
.location-month:not(.collapsed) .location-month-button {
    background-color: var(--primary-focus-backgroung);
}
.summary-block-body-row-header {
    font-weight: 600;
    min-width: 100px;
}
.summary-block-body-row .summary-block-row {
    border-bottom: solid thin #ddd;
}
.location-month-detail{
    flex-basis: 100%;
    padding: 1.5rem 1rem;
    background-color: var(--primary-focus-backgroung);
}
.detail-card {
    margin-bottom: 2rem;
    border-radius: 4px;
    border: solid thin var(--border-color);
}
.detail-card-header {
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 600;
    margin-right: 1rem;
}
.detail-card-header,
.detail-card-subheader {
    white-space: nowrap;
}
.detail-card-toggler{
    cursor: pointer;
    margin-left: auto;
}
.detail-card-body {
    display: table;
    border-collapse: collapse;
    width: 100%;
}
@media (min-width: 769px) {
    .detail-card-body.small {
        display:none;
    }
}
@media (max-width: 769px) {
    .detail-card-body.big {
        display: none;
    }
}
.detail-card.show-daily .detail-card-row.daily,
.detail-card-row {
    display: table-row;
}
.detail-card-row.daily {
    display: none;
}
.detail-card-row > div {
    display: table-cell;
    padding: 8px 20px;
    border: solid thin var(--border-color);
}
.detail-card-row.monthly > div {
    font-weight: 600;
}
.detail-card-row.archived {
    color: var(--archived);
}
.detail-card-row > div:first-child {
    border-left: none;
}
.detail-card-row > div:last-child {
    border-right: none;
}
.detail-card-row:last-child > div {
    border-bottom: none;
}
.detail-card-row-value {
    letter-spacing: 0.5px;
}
.detail-card-row-value span {
    font-size: 0.75em;
}
.detail-card.show-daily .detail-card-row.monthly {
    border-bottom: solid 3px #555;
}
.reading-interval-label{
    display: none;
    font-weight: normal;
}
.detail-card.show-daily .reading-interval-label {
    display: block;
}
.month-summary-block {
    border: solid thin var(--primary-focus-backgroung);
    padding: 8px 0;
    border-radius: 8px;
    margin: 24px 0;
}

.studena-voda {
    color: var(--studena);
    background-color: var(--studena-background);
}
.studena-voda.light{
    color: #000;
    background-color: var(--studena-background-light);
    font-size: 0.8em;
}
.studena-voda.archived,
.studena-voda.hidden{
    color: var(--archived);
    background-color: var(--studena-background-light);
}
.studena-voda.no-data {
    color: #000;
    background-color: #eee;
    border-bottom: solid 1px #ccc;
}
.tepla-voda {
    color: var(--tepla);
    background-color: var(--tepla-background);
}
.tepla-voda.light{
    color: #000;
    background-color: var(--tepla-background-light);
    font-size: 0.8em;
}
.tepla-voda.archived,
.tepla-voda.hidden{
    color: var(--archived);
    background-color: var(--tepla-background-light);
}
.tepla-voda.no-data {
    color: #000;
    background-color: #eee;
    border-bottom: solid 1px #ccc;
}
.teplo {
    color: var(--teplo);
    background-color: var(--teplo-background);
}
.teplo.light{
    color: #000;
    background-color: var(--teplo-background-light);
    font-size: 0.8em;
}
.teplo.archived,
.teplo.hidden{
    color: var(--archived);
    background-color: var(--teplo-background-light);
}
.teplo.no-data {
    color: #000;
    background-color: #eee;
    border-bottom: solid 1px #ccc;
}
.voda {
    color: var(--voda);
    background-color: var(--voda-background);
}
.voda.light{
    color: #000;
    background-color: var(--teplo-background-light);
    font-size: 0.8em;
}
.voda.archived,
.voda.hidden{
    color: var(--archived);
    background-color: var(--teplo-background-light);
}
.voda.no-data {
    color: #000;
    background-color: #eee;
    border-bottom: solid 1px #ccc;
}
.device-error-code-text{
    font-style: italic;
}
.meter-type-label {
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
    height: fit-content;
}
.meter-type-filters{
    position: absolute;
    top: 18px;
    left: 42px;
    width: 160px;
    padding: 16px;
    border: solid thin var(--border-color);
    border-radius: 4px;
    z-index: 3;
    background-color: #fff;
}
.horizontal-scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    background-color: var(--primary-backgroung);
}
.horizontal-scroll-content {
    overflow-x: hidden;
    cursor: grab;
    user-select: none;
}
.horizontal-scroll-content:active {
    cursor: grabbing;
}
.horizontal-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    font-size: 16px;
    cursor: pointer;
    border: solid 2px var(--primary);
    outline: none;
    display: none;
}
.horizontal-scroll-btn.disabled {
    border: solid 2px #eee;
    cursor: default;
}
.horizontal-scroll-btn:hover {
    background-color: var(--primary-backgroung);
}
.horizontal-scroll-btn.left {
    left: 4px;
}
.horizontal-scroll-btn.right {
    right: 4px;
}
.horizontal-scroll-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
}
.horizontal-scroll-btn.disabled::before {
    border-top: 2px solid #eee;
    border-right: 2px solid #eee;
}
.horizontal-scroll-btn.left::before {
    transform: translate(-33%, -50%) rotate(225deg);
}
.horizontal-scroll-btn.right::before {
    transform: translate(-67%, -50%) rotate(45deg);
}
@media (min-width: 576px) {
    .horizontal-scroll-container {
        padding: 0 40px;
        /*margin: 0 -40px;*/
    }
    .horizontal-scroll-btn {
        display: block;
    }
}
.error-count-pill {
    border-radius: 20px;
    background: #eb1313;
    color: white;
    font-size: 0.8em;
    font-weight: 600;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    box-shadow: 1px 1px 8px red
}
.step-counter-pill {
    border-radius: 28px;
    background: #0d6efd;
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    flex: 0 0 auto;
}
/*ikony-->*/
@font-face {
    font-family: 'odecty';
    src: url('../font/odecty.eot?64972278');
    src: url('../font/odecty.eot?64972278#iefix') format('embedded-opentype'), url('../font/odecty.woff2?64972278') format('woff2'), url('../font/odecty.woff?64972278') format('woff'), url('../font/odecty.ttf?64972278') format('truetype'), url('../font/odecty.svg?64972278#odecty') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'odecty';
    src: url('../font/odecty.svg?64972278#odecty') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "odecty";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-files:before {
    content: '\e800';
}
/* '' */
.icon-check:before {
    content: '\e801';
}
/* '' */
.icon-down-open:before {
    content: '\e802';
}
/* '' */
.icon-people:before {
    content: '\e803';
}
/* '' */
.icon-left-open:before {
    content: '\e804';
}
/* '' */
.icon-right-open:before {
    content: '\e805';
}
/* '' */
.icon-arrow-left-circle:before {
    content: '\e806';
}
/* '' */
.icon-x-circle:before {
    content: '\e807';
}
/* '' */
.icon-water:before {
    content: '\e808';
}
/* '' */
.icon-cloud-upload:before {
    content: '\e809';
}
/* '' */
.icon-check-circle:before {
    content: '\e80a';
}
/* '' */
.icon-logout:before {
    content: '\e80b';
}
/* '' */
.icon-attention:before {
    content: '\e80c';
}
/* '' */
.icon-up-open:before {
    content: '\e80d';
}
/* '' */
.icon-arrows-cw:before {
    content: '\e80e';
}
/* '' */
.icon-plus:before {
    content: '\e80f';
}
/* '' */
.icon-resize-full:before {
    content: '\e810';
}
/* '' */
.icon-resize-small:before {
    content: '\e811';
}
/* '' */
.icon-temperatire:before {
    content: '\e812';
}
/* '' */
.icon-x:before {
    content: '\e813';
}
/* '' */
.icon-play:before {
    content: '\e814';
}
/* '' */
.icon-download-alt:before {
    content: '\e815';
}
/* '' */
.icon-key:before {
    content: '\e816';
}
/* '' */
.icon-pencil:before {
    content: '\e817';
}
/* '' */
.icon-home-outline:before {
    content: '\e818';
}
/* '' */
.icon-home:before {
    content: '\e819';
}
/* '' */
.icon-login:before {
    content: '\e81a';
}
/* '' */
.icon-speedometer:before {
    content: '\e81b';
}
/* '' */
.icon-trash-empty:before {
    content: '\e81c';
}
/* '' */
.icon-paper-plane:before {
    content: '\e81d';
}
/* '' */
.icon-mail-1:before {
    content: '\e81e';
}
/* '' */
.icon-flag-filled:before {
    content: '\e81f';
}
/* '' */
.icon-pin:before {
    content: '\e820';
}
/* '' */
.icon-attention-circled:before {
    content: '\e821';
}
/* '' */
.icon-alert:before {
    content: '\e822';
}
/* '' */
.icon-lock:before {
    content: '\e823';
}
/* '' */
.icon-archive:before {
    content: '\e824';
}
/* '' */
.icon-folder-add:before {
    content: '\e825';
}
/* '' */
.icon-wrench:before {
    content: '\e826';
}
/* '' */
.icon-bell:before {
    content: '\f03f';
}
/* '' */
.icon-link-ext:before {
    content: '\f08e';
}
/* '' */
.icon-sort:before {
    content: '\f0dc';
}
/* '' */
.icon-sort-down:before {
    content: '\f0dd';
}
/* '' */
.icon-sort-up:before {
    content: '\f0de';
}
/* '' */
.icon-bell-alt:before {
    content: '\f0f3';
}
/* '' */
.icon-building:before {
    content: '\f0f7';
}
/* '' */
.icon-angle-up:before {
    content: '\f106';
}
/* '' */
.icon-angle-down:before {
    content: '\f107';
}
/* '' */
.icon-circle:before {
    content: '\f111';
}
/* '' */
.icon-ellipsis:before {
    content: '\f141';
}
/* '' */
.icon-down:before {
    content: '\f175';
}
/* '' */
.icon-up:before {
    content: '\f176';
}
/* '' */
.icon-left:before {
    content: '\f177';
}
/* '' */
.icon-database:before {
    content: '\f1c0';
}
/* '' */
.icon-sticky-note-o:before {
    content: '\f24a';
}
/* '' */
.icon-question-circle-o:before {
    content: '\f29c';
}
/* '' */
.icon-user-circle-o:before {
    content: '\f2be';
}
/* '' */
/*<-- ikony*/
.icon-archived:before {
    content: '\e824';
    font-size: 0.7em;
    opacity: 0.8;
    color: var(--archived);
}
.icon-K:before {
    content: 'K';
    font-size: 0.75em;
    font-weight: bold;
    font-family: verdana, arial;
    border-radius: 50%;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    color: #fff;
    background-color: #61007D;
}
.icon-SN:before {
    content: 'SN';
    font-size: 0.75em;
    font-weight: bold;
    font-family: verdana, arial;
    border-radius: 50%;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    background-color: #444;
    color: #fff;
}


.align-middle {
    vertical-align: middle;
}

/* spinkit--> */
.sk-wave {
    width: 60px;
    height: 40px;
    display: flex;
    justify-content: space-between;
}
.sk-wave.small {
    width: 40px;
    height: 24px;
    display: flex;
    justify-content: space-between;
}
.sk-wave.small .sk-wave-rect {
    background-color: var(--secondary);
}
.sk-wave-rect {
    background-color: var(--primary);
    height: 100%;
    width: 15%;
    animation: sk-wave 0.8s infinite ease-in-out;
}

.sk-wave-rect:nth-child(1) {
    animation-delay: -0.8s;
}

.sk-wave-rect:nth-child(2) {
    animation-delay: -0.7s;
}

.sk-wave-rect:nth-child(3) {
    animation-delay: -0.6s;
}

.sk-wave-rect:nth-child(4) {
    animation-delay: -0.5s;
}

.sk-wave-rect:nth-child(5) {
    animation-delay: -0.4s;
}

@keyframes sk-wave {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1);
    }
}
/* <-- */
.icon-round-background {
    background: white;
    border-radius: 11px;
    width: 22px;
    height: 22px;
    line-height: 19px;
}

/*accordion*/
.acc-header {
    margin-bottom: 0;
}
.acc-button {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
    padding: 0.8rem 1.25rem;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
}
.acc-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    /*margin-left: auto;*/
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}
.acc-button.alert-danger{
    color: #fff;
    background-color: #ff3c4e;
}
.acc-button.alert-warning{
    color: #000;
    background-color: var(--warning-background);
}
.acc-item:not(.collapsed) > .acc-header > .acc-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d4ee1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}
.acc-item.collapsed {
    width: auto;
}
.acc-item.collapsed>.acc-body {
    display: none;
    max-height: 0;
    padding: 0;
    overflow: hidden;
}
.acc-item .acc-body {
    display: block;
    max-height: initial;
}
.acc-item.inactive,
.acc-item.inactive .acc-button{
    background-color: #efefef;
    color: #555;
}
.acc-button:focus {
    box-shadow: none;
    /*border-color: var(--primary-focus);*/
}
/*autocomplete*/
.autocomplete-menu mark {
    text-decoration: underline;
    background: none;
    color: currentColor;
    padding: 0;
}
/* Optional nicer scrollbars */
.autocomplete-menu {
    --scroller-color: 0, 0%;
    --scroller-color-lightness: 80%;
    --scroller-bg-lightness: 90%;
    --scroller-hover-factor: 0.8;
    --scroller-thumb: hsl(var(--scroller-color), var(--scroller-color-lightness));
    /* Replicate hover for webkit */
    --scroller-thumb-hover: hsl(var(--scroller-color), calc(var(--scroller-color-lightness) * var(--scroller-hover-factor)));
    --scroller-background: hsl(var(--scroller-color), calc(var(--scroller-bg-lightness)));
    scrollbar-color: var(--scroller-thumb) var(--scroller-background);
    scrollbar-width: thin;
}
.autocomplete-menu {
    max-height: 280px !important;
    max-width: unset !important;
    width: 100%;
    top: 38px;
}
.autocomplete-menu::-webkit-scrollbar {
    width: 8px;
}
.autocomplete-menu::-webkit-scrollbar-track {
    background: var(--scroller-background);
}
.autocomplete-menu::-webkit-scrollbar-thumb {
    background: var(--scroller-thumb);
}
.autocomplete-menu::-webkit-scrollbar-thumb:hover {
    background: var(--scroller-thumb-hover);
}
/*tabs*/
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    color: var(--primary-focus);
    border-color: var(--primary-focus) var(--primary-focus) var(--primary-focus);
}
.nav-tabs .nav-link.active {
    color: var(--primary-focus);
}
.nav-tabs .nav-link {
    cursor:pointer;
    color: var(--primary);
}
.tab-content{
    min-height:80px;
}

/*button-tabs*/
.nav-tabs.button-tabs {
    border-bottom: none;
    background-color: #f3f4f6;
    border-radius: 12px;
    padding: 6px;
    display: flex;
    gap: 6px;
}
.nav-tabs.button-tabs .nav-link {
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nav-tabs.button-tabs .nav-link:hover {
    color: #111827;
}
.nav-tabs.button-tabs .nav-link.active {
    background-color: #ffffff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.nav-tabs.button-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.4);
}


/*buildings*/
.building-tree.buildings-table-content.active .building-item,
.building-tree.buildings-table-content.active .node-item,
.building-tree.buildings-table-content.active .city-block {
    display: none;
}
.buildings-table-content.active .building-item.active,
.buildings-table-content.active .node-item.active,
.buildings-table-content.active .city-block.active {
    display: block;
    margin: 1rem 0;
    width: 100%;
}
.building-tree.buildings-table-content.active .node-item.active .building-item {
    display: initial;
    width:initial;
}
.building-tree.buildings-table-content.active .node-item.active {
    width: 100%;
}
.building-tree.buildings-table-content.active .node-item.active .building-item.active {
    width: 100%;
}
.filter-data.filtering .filterable.filter {
    display: block!important;
}

.filter-data.filtering .filterable {
    display: none!important;
}
.filter-data.filtering .node-buildings .building-item.filterable {
  display: initial !important;
}
.building-header {
    min-height: var(--building-header-height);
    white-space: nowrap;
    display: flex;
}

.building-header button {
    white-space: normal;
    min-height: var(--building-header-height);
}

.building-body {
    min-height: 200px;
    border-radius: 8px;
    margin-top: 8px;
    padding: 8px;
    background-color: #fff;
    box-shadow: 1px 1px 6px var(--primary-light);
}

/*
.building-item .table thead tr {
    border-top: none;
}
*/
.building-item.building-not-confirmed .building-table-button {
    background-color: #d8d8d8 !important;
    border: solid 2px #ccc !important;
    color: #555 !important;
}
.building-address-text {
    margin-right: 32px;
    pointer-events: none;
}
/*tree*/
.building-tree {
    display: flex;
    flex-wrap: wrap;
}
.building-tree .building-header {
    position: sticky;
    top: var(--nav-height);
    z-index: 5;
    min-height: var(--building-header-height);
    white-space: nowrap;
    display: flex;
    border-bottom-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}
.building-tree .node-header{
    position: sticky;
    top: var(--nav-height);
    z-index: 6;
}
.building-tree .table-sticky-top th {
    top: calc(var(--nav-height) + var(--building-header-height));
}
.building-tree .building-item{
    border: none;
}
.building-tree .building-item:not(.collapsed),
.building-tree .city-block:has(.building-item:not(.collapsed)) {
    border: none;
    width: 100%;
    margin-right: 1rem;
}
.building-tree .city-block:not(.collapsed) {
    margin-right: 100%;
}
.building-tree .acc-item .building-table-button {
    border: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 0;
    z-index:2;
    box-shadow: 2px 2px 4px lightgray;
}

.building-tree .acc-item.collapsed  > .acc-header > .building-table-button {
    border-radius: 25px;
    min-width: 460px;
}

.building-tree .acc-item:not(.collapsed) > .acc-header > .building-table-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke-width='2' stroke='white' fill='none'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(0deg) translateX(24px);
}

.building-tree .acc-item.collapsed > .acc-header > .building-table-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke-width='1.5' stroke='white' fill='none'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(180deg);
}

.building-tree .building-table-button::after {
    padding-left: 44px;
}

.building-tree .city-block {
    margin: 1rem;
    border: none;
    background-color: transparent;
}

.building-tree .city-body {
    display: flex;
    flex-direction: column;
    align-items: end;
    padding: 0;
    border: none;
}
.building-tree .acc-item .node-button {
    z-index: 2;
    border-radius: 6px;
    padding: 1.5rem 1.25rem;
}
.building-tree .node-item:not(.collapsed) .node-button {
    border-bottom: solid thin;
    box-shadow: 0 2px 2px #eee;
    padding: 1rem 1.25rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.building-tree .node-item{
    margin: 0.6rem 1rem 0.6rem 3rem;
    min-width: 580px;
    border: solid 2px var(--primary-light);
    border-radius: 6px;
    box-shadow: 2px 2px 4px lightgray;
}
.building-tree .node-item:not(.collapsed) {    
    margin: 0.3rem 0;
    align-self: start;
    width: 100%;
}
.node-label{
    font-weight: 600;
    font-size: 16px;
}
.node-count{
    margin-left: 12px;
    font-size: 0.6em;
    font-weight: 600;
    color: var(--primary);
}
.node-body {
    padding: 16px 0 16px 8px;
}
.node-buildings {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.node-panel{
    padding: 28px 18px;
    background-color: var(--primary-backgroung);
}
.building-tree .building-item {
    margin: 0.3rem 1rem 0.3rem 3rem;
    /*background-color: var(--primary-backgroung);*/
}

.building-tree .city-block.acc-item .city-button {
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    box-shadow: 2px 2px 4px lightgray;
}

.building-tree .city-block:nth-child(5n+1) .building-table-button {
    color: white;
    background-color: var(--color1);
}

.building-tree .city-block:nth-child(5n+2) .building-table-button {
    color: white;
    background-color: var(--color2);
}

.building-tree .city-block:nth-child(5n+3) .building-table-button {
    color: white;
    background-color: var(--color3);
}

.building-tree .city-block:nth-child(5n+4) .building-table-button {
    color: white;
    background-color: var(--color4);
}

.building-tree .city-block:nth-child(5n+5) .building-table-button {
    color: white;
    background-color: var(--color5);
}
.building-tree .city-block:nth-child(5n+1) .node-button {
    border-color: var(--color1);
    background-color: var(--color1-light);
}

.building-tree .city-block:nth-child(5n+2) .node-button {
    border-color: var(--color2);
}

.building-tree .city-block:nth-child(5n+3) .node-button {
    border-color: var(--color3);
}

.building-tree .city-block:nth-child(5n+4) .node-button {
    border-color: var(--color4);
}

.building-tree .city-block:nth-child(5n+5) .node-button {
    border-color: var(--color5);
}
@media (min-width: 576px) {
    .building-tree .city-block.acc-item .city-button {
        min-width: 400px;
    }
    .building-tree .building-header {
        min-width: 380px;
    }
}
/*table*/
.building-table .building-item {
    margin: 4px 0;
    border: solid thin #ddd;
}
.building-table .node-item {
    margin: 4px 0;
    border: solid 2px #ddd;
}
.building-fullscreen-button {
    display: none;
    box-shadow: none;
    border: none;
    color: var(--primary-focus);
    background-color: var(--primary-backgroung);
    padding: 4px 12px;
}
.building-table .building-item:not(.collapsed) > .acc-header > .building-fullscreen-button {
    display: flex;
}
.building-fullscreen-button::before {
    content: '\e810';
    font-family: odecty;
}
.building-item.fullscreen .building-fullscreen-button::before {
    content: '\e811';
    font-family: odecty;
}
.building-table.fullscreen .building-item {
    display: none;
}
.building-table.fullscreen .building-item.fullscreen {
    display: block;
    position: absolute;
    left: 0;
    top: var(--nav-height);
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: 0;
    height: fit-content;
    min-height: 100%;
}
.building-table .table-sticky-top th {
    top: 0;
    /*top: calc(var(--nav-height) + var(--building-header-height) + 42px);*/
}
.building-table .building-body {
    background-color: var(--primary-backgroung);
    border: solid 1px var(--primary-focus);
    border-top: none;
    padding: 16px 0;
    margin-top: 0;
    border-radius: 0;
}
.building-table .city-button {
    /*display: none;*/
    text-transform: capitalize;
    color: #000;
    font-size: 1.2em;
    font-weight: bold;
}
.building-table .city-block {    
    border: none;
    background-color: transparent;
    margin: 0;
}
.building-table .city-body.acc-body {
    /*display: block;*/
    max-height: none;
    overflow: visible;
    padding: 0;
}
/*
.building-table .building-body ul.nav {
    position: sticky;
    top: calc(var(--nav-height) + var(--building-header-height));
    background: #fff;
    z-index: 1;
}
*/
.building-table:not(.fullscreen) .building-body .panel-content{
    max-height: 80vh;
    overflow: auto;
}
.building-table .acc-item:not(.collapsed) > .building-header {
    border: solid 1px var(--primary-focus);
    border-bottom-color: var(--primary-light);
    border-bottom-width: thin;
    background-color: var(--primary-backgroung);
}

.building-table .building-table-button::after,
.button-left::after{
    margin-left: unset;
    margin-right: 24px;
    order: -1;
}

.building-table .acc-item:not(.collapsed) > .acc-header > .building-table-button {
    box-shadow: none;
    border: none;
    color: var(--primary-focus);
    background-color: var(--primary-backgroung);
}


#buildings-table-filterInput {
    border: var(--primary-focus) solid 2px;
}

#buildings-table-filterClearButton {
    border: var(--primary-focus) solid 2px;
    border-left: none;
}

.building-name {
    font-weight: 600;
    padding-right: 1rem;
}

.building-access-table {
}
.building-access-row {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    padding: 0.5rem 1.25rem;
    border-bottom: solid thin var(--primary-light);
}
.building-access-row-address {
    flex: 1 1 auto;    
}
.building-access-row.removed {
    background-color: #eee;
}
tr.enduser-invalid{
    display: none;
}
.show-invalid tr.enduser-invalid {
    display: table-row;
}
tr.enduser-invalid td {
    color: #777;
}

.building-pending-changes-item {
    border: solid thin #dee2e6;
    background-color: var(--primary-focus-backgroung);
}
.building-pending-changes-item:hover{
    box-shadow: 1px 1px 6px var(--shadow-color);
}
.building-pending-changes-item.collapsed{
    background-color: #fff !important;
    border: solid thin #aaa;
}
.building-pending-changes-item.collapsed,
.building-pending-changes-item.collapsed > .acc-header > .acc-button{
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
.building-pending-changes-item .acc-button {
    background-color: unset;
}
.building-pending-changes-item .acc-button::after {
    margin-left: 12px;
}
.change-group-item{
    background-color: #f3fdfd;
    border: solid thin #aaa;
    border-radius: 20px;
}
.change-group-item > .acc-header > .acc-button {
    border-radius: 20px;
}
.change-item .acc-header,
.change-item .acc-body{
    background-color: var(--primary-focus-backgroung);
}
.change-item.collapsed .acc-header{
    background-color: #fff;
}
.change-item.change-ignored .acc-header,
.change-item.change-ignored .acc-button{
    color: #777;
    background-color: #eee;
}
.change-item.change-approved .acc-header,
.change-item.change-approved .acc-button {
    color: #777;
    background-color: var(--success-background);
}
.change-item.change-rejected .acc-header,
.change-item.change-rejected .acc-button {
    color: #777;
    background-color: #eee;
}
.change-item.change-auto .acc-header,
.change-item.change-auto .acc-button {
    color: #777;
    background-color: var(--success-background);
}
.change-item.change-edited .acc-header,
.change-item.change-edited .acc-button {
    color: #777;
    background-color: var(--success-background);
}
.change-detail{
    padding: 12px 20px;
    border: solid thin #aaa;
    border-radius: 12px;
    background-color: #fff;
}
/*
.entity-change-group .card-header {
    background-color: #fff;
}
.entity-change-group.inactive,
.entity-change-group.inactive .card-header {
    background-color: #efefef;
    color: #555;
}
.change-header-left {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
*/
table.building-change-table{
    background-color: var(--primary-backgroung);
}
.change-detail-row{
    /*background-color: var(--primary-focus-backgroung);*/
}
table.building-change-table td:first-child,
table.building-change-table th:first-child {
    padding-left: 16px;
}
table.building-change-table td:last-child,
table.building-change-table th:last-child {
    padding-right: 16px;
}

.group-toggle-cell {
    width: 32px; 
    padding: 0;
}

.entity-type-header {
    background-color: #f6f6f6;
}

td.entity-type-header-cell {
    position: relative;
    padding: 6px 0;
}
.entity-type-toggle {
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--primary-focus);
    border-radius: 2px;
    width: 14px;
    height: 14px;
    padding: 0 0 3px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 0;
    background: var(--primary-backgroung);
    cursor: pointer;
}

.entity-type-group {
    position: relative;
}

.entity-type-group-has-header::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 1.2rem;
    bottom: 2rem;
    border-left: 1px dotted var(--primary-focus);
    border-bottom: 1px dotted var(--primary-focus);
    pointer-events: none;
    width: 8px;
}

.change-row.change-approved,
.change-row.change-rejected{
    background-color: #eee;
    color: #999;
}
.change-row.failed {
    background-color: var(--error-background);
    color: var(--error);
}
.entity-type-group.collapsed .entity-row,
.entity-type-group.collapsed .change-row,
.entity-type-group.collapsed .change-detail-row {
    display: none;
}

.entity-type-group.collapsed .entity-type-header {
    display: table-row;
}
.pending-changes-toolbar {
    position: sticky;
    top: var(--nav-height);
    z-index: 20;
    background-color: var(--primary-backgroung);
    padding: 1rem 1.5rem;
    border: 1px solid var(--primary);
    border-radius: var(--card-border-radius);
}
.pending-changes-toolbar.active{
    background-color: var(--warning-background);
    border-color: var(--warning);
    box-shadow: 1px 1px 6px var(--warning);
}
.pending-changes-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pending-changes-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.entity-type-header-cell {
    background-color: var(--primary-backgroung);
}
.pending-changes-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.building-pending-changes-item.has-selection > .acc-header .acc-button {
    background-color: var(--primary-focus-backgroung);
}
.building-category-badge.is-muted {
    background-color: #bbb !important;
}
.change-row.category-filter-hidden,
.change-detail-row.category-filter-hidden,
.entity-row.category-filter-hidden{
    display: none;
}
/*notifikace->*/
.building-header-notification {
    margin: 0 1px;
}

.building-header-notifications-container {
    display: flex;
    margin-left: auto;
    /* min-width: 142px; */
}

.building-header-icon-container {
    padding: 0 4px;
    margin-left: auto;
    display: flex;
}

.building-notification-icon-box {
    margin: 0 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* pokud je ikona samostatně focusovatelná / klikací */
.building-notification-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
}

/* základ badge */
.notification-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .notification-badge::before {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 21px;
        height: 21px;
        line-height: 1;
        text-align: center;
        vertical-align: middle;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        border-radius: 50%;
        margin-right: 0.4em;
        margin-left: 0.1em;
        font-style: normal;
        border: 1px solid transparent;
        transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
    }

/* menší varianta v headeru */
.building-header-notification.notification-badge::before {
    width: 15px;
    height: 15px;
    font-size: 10px;
    margin-right: 0;
    margin-left: 0;
}

/* aktivní stav */
.notification-badge:not(.inactive)::before {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.notification-badge.inactive::before {
    background: #f7f7f7;
    color: #8d8d8d;
    box-shadow: none;
    opacity: 1;
}

/* diagonální čárka pro inactive */
.notification-badge.inactive::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background: #9a9a9a;
    border-radius: 2px;
    transform: rotate(-35deg);
    top: 10px;
    left: 0;
    pointer-events: none;
    opacity: 0.95;
}

/* menší inactive marker v headeru */
.building-header-notification.notification-badge.inactive::after {
    width: 10px;
    height: 1.5px;
    top: 7px;
    left: 3px;
}

/* hover / focus */
.building-notification-icon:hover::before,
.building-notification-icon:focus-visible::before,
.notification-badge:hover::before,
.notification-badge:focus-visible::before {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18), 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* inactive hover bez silného "aktivního" efektu */
.building-notification-icon.inactive:hover::before,
.building-notification-icon.inactive:focus-visible::before,
.notification-badge.inactive:hover::before,
.notification-badge.inactive:focus-visible::before {
    transform: none;
    box-shadow: 0 0 0 2px rgba(120, 120, 120, 0.12);
}

/* K */
.notification-badge.notification-K::before {
    content: 'K';
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #fff;
    font-size: 11px;
    background: linear-gradient(180deg, #8a2ad1, #61007d);
}

/* SN */
.notification-badge.notification-SN::before {
    content: 'SN';
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #fff;
    font-size: 11px;
    background: linear-gradient(180deg, #4b5563, #667085);
}

/* menší font v headeru */
.building-header-notification.notification-badge.notification-K::before,
.building-header-notification.notification-badge.notification-SN::before {
    font-size: 8px;
}

/* inactive textové badge */
.notification-badge.inactive.notification-K::before,
.notification-badge.inactive.notification-SN::before {
    color: #777;
    background: #f7f7f7;
}

/* otázník */
.notification-badge.notification-question::before {
    content: '?';
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 700;
    background: #fff;
    color: #666;
    border: 2px solid currentColor;
    box-shadow: none;
    width: 18px;
    height: 18px;
}

/* v headeru menší otázník */
.building-header-notification.notification-badge.notification-question::before {
    width: 15px;
    height: 15px;
    font-size: 9px;
    border-width: 1.5px;
}

/* ikonfonty */
.notification-bell::before {
    content: '\f0f3';
    font-family: "odecty";
    font-weight: normal;
}
.notification-flag::before {
    content: '\e81f';
    font-family: "odecty";
    font-weight: normal;
}
.notification-checked::before {
    content: '\e80a';
    font-family: "odecty";
    font-weight: normal;
}
.notification-replacement::before {
    content: '\e826';
    font-family: "odecty";
    font-weight: normal;
    transform: scaleX(-1);
}
.notification-i::before {
    content: '\e821';
    font-family: "odecty";
    font-weight: normal;
}
/* barevné varianty – aktivní stav */
.notification-color-blue:not(.inactive)::before {
    color: #1961AE;
    background: linear-gradient(180deg, #ffffff, #e8f1fb);
}

.notification-color-green:not(.inactive)::before {
    color: #79C300;
    background: linear-gradient(180deg, #ffffff, #eef8db);
}

.notification-color-red:not(.inactive)::before {
    color: #CD001A;
    background: linear-gradient(180deg, #ffffff, #fdecee);
}

.notification-color-orange:not(.inactive)::before {
    color: #EF6A00;
    background: linear-gradient(180deg, #ffffff, #fff1e5);
}

/* inactive barevné varianty*/
.notification-color-blue.inactive::before,
.notification-color-green.inactive::before,
.notification-color-red.inactive::before,
.notification-color-orange.inactive::before {
    color: #8d8d8d;
    background: #f7f7f7;
}

/*<-notifikace*/
.btn.building-alert-filter-btn {
    padding: 2px 10px 2px 6px;
    font-size: 12px;
    color: #555;
    background-color: #fff;
    border-color: #fff;
    box-shadow: 1px 1px 4px #ccc;
}
.btn.building-alert-filter-btn.active {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.building-note {
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /*box-shadow: 0 0 2px var(--primary-light);*/
}

.note-meta {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: #777;
    align-items: start;
}

.note-author {
    text-transform: uppercase;
    min-width: 120px;
}

.note-updated {
    text-align: right;
    white-space: nowrap;
    min-width: 180px;
}

.note-body {
    width: 100%;
    /*min-height: 140px;*/
    max-height: 600px;
    resize: none;
    border-radius: 6px;
    padding: 12px 12px 10px;
    line-height: 1.4;
    border: none;
    /*background: #f9f9f9;*/
    outline: none;
    transition: background-color 0.15s ease;
    box-shadow: 0 0 2px var(--primary);
}

.note-body::placeholder {
    color: #bbbbbb;
}

.note-body:focus {
    background: #fff;
    box-shadow: 0 0 0 1px var(--primary-focus);
}