@keyframes searching {
    0% {
        content: ' .';
    }
    15% {
        content: ' ..';
    }
    30% {
        content: ' ...';
    }
    45% {
        content: ' ....';
    }
    60% {
        content: ' .....';
    }
    75% {
        content: ' ......';
    }
    90% {
        content: ' ......';
    }
}

.col-checkbox {
    width: 80px;
}

body {
    background-color: var(--md-sys-color-background);
}

body:not(:has(#slide-out-right)) {
    & nav.hide-on-large-only {
        & a[data-target="slide-out-right"] {
            display: none;
        }
    }
}

a {
    text-decoration: none !important;
}

nav {
    margin-bottom: 0
}

a.sidenav-trigger {
    padding: 0 !important;
}

a.sidenav-trigger i:hover {
    background-color: var(--md-sys-color-on-sidenav);
}

.sidenav-right {
    background-color: var(--md-sys-color-background);
    padding-top: 24px;
    padding-right: 24px;
}

.nav-wrapper {
    background-color: var(--md-sys-color-background-sidenav);
}

.sidenav, nav.hide-on-large-only {
    &:not(.hide-on-large-only) {
        width: 220px;
    }

    &:not(.sidenav-right) {
        background-color: var(--md-sys-color-background-sidenav);
    }
}

nav.hide-on-large-only {
    & a:hover {
        background-color: transparent !important;
        
        & i:hover {
            background-color: transparent !important;   
        }   
    }
}

.logo {
    cursor: pointer;
}

#profile-logout {
    position: sticky;
    bottom: 0;
    width: 100%;

    background-color: var(--md-sys-color-background-sidenav);
}

#profile-logout .row {
    gap: unset;
    margin-bottom: 0;
}

#profile-logout a {
    padding: 5px;
}

#profile-logout a:hover {
    background-color: #1355b8;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}

#profile-logo {
    display: flex;
    align-items: center;
}

#profile-info {
    margin-left: -15px;
}

#tenant-name {
    font-size: 10px;
}

.container {
    width: calc(100% - 268px);
    margin: 24px;
    max-width: 100%;
}

.container2 {
    width: calc(100% - 50px);
    margin: 24px;
    max-width: 100%;
}

h1 {
    font-size: 1.8rem;
    line-height: 100%;
    margin: 0 0 1rem 0;
}

h2 {
    font-size: 1.6rem;
    line-height: 100%;
    margin: 0 0 1rem 0;
}

h3 {
    font-size: 1.4rem;
    line-height: 100%;
    margin: 0 0 1rem 0;
}

.logo_white{
    width: 200px !important;
    margin: 10px !important;
}

.sidenav a.active {
    background-color: #006ec5;
}

.sidenav a:hover {
    background-color: var(--md-sys-color-sidenav-hover) !important;
}

.sidenav li {
    margin-bottom: 3px;
}

.sidebar-search-box-container {
    margin: 20px;
    width: 180px;

    background-color: var(--md-sys-color-background-sidenav);

    display: flex;
    align-items: center;
}

.sidebar-search-box {
    max-width: 150px;
    height: 31px !important;

    padding: 8px;

    font-size: 16px;

    margin: 0;

    float: left;

    background-color: var(--search-box-background);

    border: 2px solid var(--search-box-border);
    border-radius: 8px 0 0 8px;
}

.sidebar-search-box-icon {
    float: right;
    margin: 0;

    background-color: var(--search-box-border);

    border: 1px solid var(--search-box-border);
    border-radius: 0 8px 8px 0;

    padding: 3px;
}

.row {
    margin-bottom: 4px;
}

.row-horizontal-gap-0 {
    row-gap: 0;
}

.row-vertical-gap-0 {
    column-gap: 0;
}

.row-gap-0 {
    gap: 0;
}

.btn {
    margin: 4px 0 !important;
}

.input-field.outlined input, .input-field.outlined textarea {
    padding: 8px !important;
    margin-bottom: 16px;
    width: 100%;
}

.formInnerMessage {
    margin-bottom: 24px !important;
}

.medium-icon {
    font-size: 1.3rem !important;
}

.collapsible-header.sidebar {
    font-weight: bold !important;
    margin: 0 12px;
    border-radius: 50px;
    padding-left: 8px;
}

.collapsible-header.sidebar:hover {
    background-color: #1355b8;
}

.app-name {
    margin: 0 auto 0 auto !important;
    font-size: 26px;
    color: #77bdf1 !important;
    font-weight: bold !important;
    display: flex;
    align-items: center;
}

.app-name i {
    padding-left: 8px;
}

.card-action {
    max-height: 48px !important;
    overflow: hidden;
}

.hide-element{
    display: none !important;
}

.truncate {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strikethrough {
    text-decoration: line-through;
    color: #600 !important;
}

.bold {
    font-weight: bold;
}

.tdLeftAlign {
    text-align: left !important;
    padding-left: 15px !important;

}

.tdRightAlign {
    text-align: right !important;
    padding-right: 15px !important;
    
}

.thLeftAlign .dt-column-title {
    justify-content: left;
    text-align: left !important;
}

.thRightAlign .dt-column-title {
    justify-content: right;
    text-align: right !important;
    padding-right: 39px !important;
}

.tasks-num {
    border-radius: 24px; 
    margin-top: 0 !important;
    padding: 0 8px;
    width: fit-content;
}

span.badge {
    min-width: 0 !important;
    padding: 0 10px !important;
}

.ck-content .mention, .mention {
    background-color: transparent !important;
    color: var(--mention-color) !important;
    font-weight: bold !important;
}

#tenant-name, div:has(+#tenant-name) {
    margin-left: 12px;
}

#slide-out-right {
    scrollbar-color: #ddd #fafafa;
    scrollbar-width: thin;

    @media screen and (min-width: 992px) {
        border-left: 1px solid var(--right-slide-border-color);
        padding-left: 24px;
    }
}

table:not(.datepicker-table) thead th {
    color: white !important;
}

table:not(.datepicker-table) tr {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

table.pointer tr:hover {
    cursor: pointer;

    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
}

table:not(.datepicker-table) td {
    padding: 8px 5px;
}

.modal {
    overflow-y: unset;
}

.modal .ph-row .big {
    height: 40px;
    margin-bottom: 40px;
}

.modal .ph-picture {
    height: 220px;
}

.modal-spinner-div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.ck-content .image {
    margin: 0 !important;
}

.ck-content {
    padding: 12px !important;
}

.ck.ck-balloon-panel {
    z-index: 99999999999991 !important;
}

.hoverable-small:hover {
    box-shadow: #888 0 0 8px;
}

datalist[data-patched]::-webkit-scrollbar {
    display: none;
}

datalist[data-patched] {
    transform: scaleY(0);
    transform-origin: top;
    
    display: block;
    max-height: 0;
    overflow: hidden;
    position: fixed;

    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface);

    border: 1px solid gray;
    border-radius: 0 0 5px 5px;
    border-top: none;

    padding: 5px;

    z-index: 99999999999999;

    transition: transform 0.15s ease;

    &.active {
        overflow-y: auto;
        max-height: 400px;

        &:not(.upside):not(.upside-dynamic) {
            transform: scaleY(1);
        }
        &.upside, &.upside-dynamic {
            transform: scaleY(-1);

            & option {
                transform: scaleY(-1);
            }
        }
    }

    &[multiple] {
        & option[selected]:not(:hover):not(.selected) {
            background-color: var(--md-sys-color-surface-variant-subtle);
        }

        & option {
            &[data-promiscuous] {
                &::before {
                    content: '☐ *'
                }

                &[selected] {
                    &::before {
                        content: '☑ *'
                    }
                }
            }

            &::before {
                content: '☐ '
            }

            &[selected] {
                &::before {
                    content: '☑ '
                }
            }
        }
    }

    & option {
        display: block;
        text-align: left;

        padding: 10px 0;
        font-size: 17px;

        cursor: pointer;

        &:not(.orphan) {
            &.parent {
                font-weight: 600;
            }
            
            &.child {
                padding-left: 8px;
            }
        }

        &.orphan {
            &.child {
                font-weight: 600; /*If orphan, it means it had a parent, but now he is its own parent*/
            }
        }


    }

    &:not(:has(option:hover)) option.selected, option:hover {
        background-color: var(--md-sys-color-surface-variant);
        color: var(--md-sys-color-on-surface-variant);
    }
}

.ck-powered-by-balloon {
    display:none !important;
}

.leaflet-bottom.leaflet-right {
    display:none !important;
}

.filter-label{
    font-weight: bold;
    font-size: 15px;
}

.tinyModal {
    height: 25% !important;
    top: 20% !important;
}

.chip {
    background-color: var(--md-sys-color-background-chip) !important;

    margin-bottom: 5px !important;
    margin-right: 5px;
    padding-right: 0;
    --font-size: 10px;
    --font-size-icon: 16px;
    height: 24px;
}

.chip .close:hover {
    background-color: transparent !important;
}

.ph-item {
    border: none;
}

tbody .ph-item,
tbody .ph-col-12,
tbody .ph-col-10,
tbody .ph-col-8,
tbody .ph-col-6,
tbody .ph-col-4,
tbody .ph-col-2,
tbody .ph-row {
  margin: 0 !important;
  padding: 0;
  border: none;
}

tbody .ph-item {
    padding: 5px 0;
}

div.filter-input-div input, input[role="combobox"] {
    height: 40px !important;
    cursor: pointer;
}

select {
    cursor: pointer;
}

input[disabled], select[disabled] {
    background-color: var(--md-sys-color-surface-variant) !important;
    color: var(--md-sys-color-on-surface-variant) !important;

    cursor: default;

    &:is(select) {
        cursor: not-allowed;
    }
}

span.required {
    color: var(--md-sys-color-error);
}

/* TABLET */
@media (max-width: 992px) {
    main {
        margin-top: 24px;
        width: 100%;
        margin: 0;
    }

    .container {
        width: calc(100% - 36px);
        margin: 18px;
    }    

    .sidenav-right{
        padding-left: 24px;
    }
    
}

/* MOBILE */
@media (max-width: 600px) {
    main {
        width: 100%;
        margin-left: 0;
    }

    .container {
        width: calc(100% - 24px);
        margin: 12px;
    }
}

table:not(.datepicker-table) th {
    background-color: var(--md-sys-color-background-table-head);

    &:hover {
        background-color: var(--md-sys-color-background-table-head-hover) !important;
    }
}

.no-data:not(.hide) {
    &:not(.pointers) {
        pointer-events: none;
        cursor: default;
    }

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;

    display: inline-flex;
    flex-direction: column;

    align-items: center;

    & span.material-icons {
        font-size: 128px;
    }

    & span:not(.material-icons):not(.uncolored) {
        color: var(--md-sys-color-no-data-icon);
    }
}

@media only screen and (min-width: 601px) {
    .datepicker-day-button {
        width: 44px !important;
    }
}

button.datepicker-day-button {
    margin: 0 auto;
    width: 38px;
}

table.datepicker-table tr:hover {
    background-color: transparent !important;

    & button {
        background-color: var(--md-sys-color-surface-variant) !important;

        &:hover {
            background-color: var(--md-sys-color-secondary) !important;
            color: var(--md-sys-color-on-secondary) !important;
        }
    }
}

table.datepicker-table td.is-selected {
    background-color: unset !important;

    & button.datepicker-day-button {
        background-color: var(--md-sys-color-primary) !important;
    }
}

.dropdown-content {
    max-height: 400px;

    height: fit-content !important;
    padding: 2px 12px !important;
    
    padding: 0 !important;
    margin: 0 !important;
}

.dropdown-content li>span {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.dropdown-content li:not(.selected)>span {
    color: var(--md-sys-color-on-background) !important;
}

input[type=text].timepicker-input-minutes, input[type=text].timepicker-input-hours {
    border: none;
    margin-left: 0;
    width: 30% !important;
    text-align: center !important;
    font-size: 60% !important;
    color: var(--pure-theme-color);
}

.timepicker-digital-display, .timepicker-text-container {
    background-color: var(--time-picker-background);
}

.timepicker-text-container {
    font-size: 3rem;
    color: var(--pure-theme-color);
}

.timepicker-canvas line {
    stroke: var(--time-picker-background);
}

.timepicker-canvas-bg {
    fill: var(--time-picker-background);
}

.timepicker-canvas-bearing {
    fill: var(--time-picker-background);
}

*[id$="_wrapper" i]:has(div.dt-layout-row.dt-layout-table) {
    overflow-x: auto;
}

.searching-animation::after {
    content: ' .......';
    animation: searching 500ms linear infinite alternate-reverse;
}

.datepicker-controls[role='heading'] {
    align-items: center !important;
    justify-content: space-between !important;

    margin: unset !important;
    width: 100% !important;

    & .selects-container {
        width: 90% !important;
        justify-content: space-evenly !important;
    
        & .select-wrapper {
            width: unset !important;

            & input {
                width: 100px;
                padding: 0 !important;
                padding-top: 0 !important;
            }
        }
    }
}

.help-list div.collapsible-header.sidebar {
    justify-content: space-between !important;

    &::after {
        width: unset !important;
        color: white !important;
    }

    &.active {
        background-color: #006ec5;
    }
}

.help-list div.collapsible-body[style]:not([style*='max-height: 0px;']) {
    max-height: 100% !important;
}

.help-list i.left {
    margin-left: unset !important;
}

.help-list a.active {
    background-color: #006ec5 !important;
}

#image-overlay {
    display: none;
    opacity: 0;

    position: fixed;
    top: 0;
    left: 0;

    width: 100dvw;
    height: 100dvh;

    z-index: 9999;

    will-change: display, opacity;

    transform: display 300ms ease allow-discrete, opacity 300ms ease;

    background-color: #00000085;
    backdrop-filter: blur(4px);

    &.active {
        display: flex;
        opacity: 1;

        flex-wrap: nowrap;
        flex-direction: column;

        justify-content: space-between;
        align-items: center;
    }

    & > #taskbar {
        width: 100%;

        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;

        justify-content: flex-end;
        align-items: center;

        & > i {
            margin-top: 12px;
            cursor: pointer;

            &:last-of-type {
                margin-right: 24px;
            }
        }
    }

    & > #image-overlay-container {
        height: 100%;
        width: 100%;

        & > img {
            /*cursor: pointer;*/
            position: absolute;

            object-fit: cover;
            object-position: 50% 50%;

            top: 50%;
            left: 50%;

            transform: translate(-50%, -50%);

            max-height: 80dvh;
            max-width: 80dvw;
        }
    }
}

.filter-shadow-1 {
    filter: drop-shadow(1px 1px 1px #000);
}

#map-add { height: 300px; }
#map-edit { height: 300px; }
#massive-actions {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;

    & i {
        font-size: 24px;
    }
}

#massiveActionsSelector, #massiveActions-input {
    width: 200px;
}

#massiveActions-submit {
    margin-left: 8px !important;
}

td i {
    user-select: none;
}

.massiveActions-btn {
    margin-left: 8px !important;
}


.stylePopupok .leaflet-popup-content-wrapper,
.stylePopupok .leaflet-popup-tip {
    background-color: oklch(96.7% 0.067 122.328);
    padding: 8px;
}

.stylePopuperror .leaflet-popup-content-wrapper,
.stylePopuperror .leaflet-popup-tip {
    background-color: oklch(93.6% 0.032 17.717);
    padding: 8px;
}


.stylePopupalert .leaflet-popup-content-wrapper,
.stylePopupalert .leaflet-popup-tip {
    background-color: oklch(95.4% 0.038 75.164);
    padding: 8px;
}

.popup-table {
    width: 100% !important;
    border-collapse: collapse !important;
    color: #232d00 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.popup-table-ok th {
    font-size: 14px !important;
    color: #232d00 !important;
    background-color: #ecfcca !important;
}
.popup-table-ok td {
    font-size: 14px !important;
    color: #232d00 !important;
    background-color: #ecfcca !important;
}
.popup-table-ok th, .popup-table-ok td {
    padding: 8px !important;
    text-align: left !important;
}
.popup-table-ok th:hover {
    background-color: #ecfcca !important;
}
.popup-table-ok td:hover {
    background-color: #ecfcca !important;
}

.popup-table-ok:not(.datepicker-table) thead th {
    color: #232d00 !important;
}

.popup-table-ok tr:hover {
    background-color: #ecfcca !important;
    color: #232d00 !important;
}

.popup-table-ok th {
    background-color: #ecfcca !important;
    color: #232d00 !important;
}

.popup-table-ok:not(.datepicker-table) th {
    background-color: #ecfcca !important;

    &:hover {
        background-color: #ecfcca !important;
    }
}



.popup-table-error th {
    font-size: 14px !important;
    color: #232d00 !important;
    background-color: #ffe2e2 !important;
}
.popup-table-error td {
    font-size: 14px !important;
    color: #232d00 !important;
    background-color: #ffe2e2 !important;
}
.popup-table-error th, .popup-table-error td {
    padding: 8px !important;
    text-align: left !important;
}
.popup-table-error th:hover {
    background-color: #ffe2e2 !important;
}
.popup-table-error td:hover {
    background-color: #ffe2e2 !important;
}

.popup-table-error:not(.datepicker-table) thead th {
    color: #232d00 !important;
}

.popup-table-error tr:hover {
    background-color: #ffe2e2 !important;
    color: #232d00 !important;
}

.popup-table-error th {
    background-color: #ffe2e2 !important;
    color: #232d00 !important;
}

.popup-table-error:not(.datepicker-table) th {
    background-color: #ffe2e2 !important;

    &:hover {
        background-color: #ffe2e2 !important;
    }
}


.popup-table-alert th {
    font-size: 14px !important;
    color: #232d00 !important;
    background-color: #ffedd4 !important;
}
.popup-table-alert td {
    font-size: 14px !important;
    color: #232d00 !important;
    background-color: #ffedd4 !important;
}
.popup-table-alert th, .popup-table-alert td {
    padding: 8px !important;
    text-align: left !important;
}
.popup-table-alert th:hover {
    background-color: #ffedd4 !important;
}
.popup-table-alert td:hover {
    background-color: #ffedd4 !important;
}

.popup-table-alert:not(.datepicker-table) thead th {
    color: #232d00 !important;
}

.popup-table-alert tr:hover {
    background-color: #ffedd4 !important;
    color: #232d00 !important;
}

.popup-table-alert th {
    background-color: #ffedd4 !important;
    color: #232d00 !important;
}

.popup-table-alert:not(.datepicker-table) th {
    background-color: #ffedd4 !important;

    &:hover {
        background-color: #ffedd4 !important;
    }
}

pre {
    background-color: var(--neutral-add-background);
    color: var(--pure-theme-color);
    font-family: 'Monaco', monospace;
    padding: 1em;
    border-radius: 5px;
}

code {
    font-family: 'Monaco', monospace;
    line-height: 100%;
    background-color: #eee;
    padding: 0.2em;
    letter-spacing: -0.05em;
    word-break: normal;
}

pre code {
    border: none;
    background: none;
    line-height: 1em;
    letter-spacing: normal;
    word-break: break-all;
}

.ck-content pre code {
    color: var(--pure-theme-color) !important;
}

#massiveActionModal {
    max-height: 200px !important;
    width: 70% !important;
    top: 20% !important;
}

#pagination-message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.card.z-depth-5.center-align > img.responsive-img[src^='/static/main/img/logo_'] {
    padding-right: 24px;
}

div#table-no-content {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 500px;

    display: flex;
    flex-direction: column;

    align-items: center;

    & > section {
        display: flex;

        flex-wrap: nowrap;
        flex-direction: row;

        justify-content: space-between;
        align-items: center;

        & span {
            font-size: 32px;
            max-width: 80%;
        }

        & i {
            font-size: 64px !important;
            color: var(--md-sys-color-error);
        }
    }

    & a {
        width: 70%;
        margin-top: 18px !important;

        color: var(--pure-theme-color);

        justify-content: center;
    }
}