/* hide standard mode elements till MidWinter finally drops them */
.cactiPageHead,
.cactiPageBottom,
#navBar,
#menu_main_console,
.scrollBar,
.infoBar,
.cactiShadow {
    display: none;
}

/* kiosk mode */
[class~=fullscreen],
[class~=fullscreen] > div {
    /*height: 100dvh !important;*/
    height: 100% !important;

}

.hide,
.hidden {
    display: none !important;
}

.show {
    display: block;
}

.invisible {
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

.visible {
    visibility: visible;
}

.subTab {
    line-height: 2.0rem;
}

.compact_nav_icon,
.navBox-header-button {
    color: var(--text-color-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    flex-direction: column;

    &.mdw-active {
        background: var(--background-active-section);
        color: snow;
    }

    &.selected {
        color: white;
        background: var(--background-active-section);
    }

    &:focus-visible {
        color: white;
        outline: none !important;
        box-shadow: var(--background-content) 0 0 0 -2px, var(--border-color-highlight) 0 0 0 1px;
        background-color: hsla( 208, 69%, 40%, 0.5);
    }

    @media (hover: hover) {
        &:hover {
            color: white;
            background-color: hsla( 208, 69%, 40%, 0.5);
        }
    }
}

.no-col2 th:nth-child(2), .no-col2 td:nth-child(2),
.no-col3 th:nth-child(3), .no-col3 td:nth-child(3),
.no-col4 th:nth-child(4), .no-col4 td:nth-child(4),
.no-col5 th:nth-child(5), .no-col5 td:nth-child(5),
.no-col6 th:nth-child(6), .no-col6 td:nth-child(6),
.no-col7 th:nth-child(7), .no-col7 td:nth-child(7),
.no-col8 th:nth-child(8), .no-col8 td:nth-child(8),
.no-col9 th:nth-child(9), .no-col9 td:nth-child(9),
.no-col10 th:nth-child(10), .no-col10 td:nth-child(10),
.no-col11 th:nth-child(11), .no-col11 td:nth-child(11),
.no-col12 th:nth-child(12), .no-col12 td:nth-child(12),
.no-col13 th:nth-child(13), .no-col13 td:nth-child(13),
.no-col14 th:nth-child(14), .no-col14 td:nth-child(14),
.no-col15 th:nth-child(15), .no-col15 td:nth-child(15),
.no-col16 th:nth-child(16), .no-col16 td:nth-child(16),
.no-col17 th:nth-child(17), .no-col17 td:nth-child(17),
.no-col18 th:nth-child(18), .no-col18 td:nth-child(18),
.no-col19 th:nth-child(19), .no-col19 td:nth-child(19),
.no-col20 th:nth-child(20), .no-col20 td:nth-child(20),
.no-col21 th:nth-child(21), .no-col21 td:nth-child(21),
.no-col22 th:nth-child(22), .no-col22 td:nth-child(22),
.no-col23 th:nth-child(23), .no-col23 td:nth-child(23),
.no-col24 th:nth-child(24), .no-col24 td:nth-child(24),
.no-col25 th:nth-child(25), .no-col25 td:nth-child(25),
.no-col26 th:nth-child(26), .no-col26 td:nth-child(26),
.no-col27 th:nth-child(27), .no-col27 td:nth-child(27),
.no-col28 th:nth-child(28), .no-col28 td:nth-child(28),
.no-col29 th:nth-child(29), .no-col29 td:nth-child(29),
.no-col30 th:nth-child(30), .no-col30 td:nth-child(30),
.no-col31 th:nth-child(31), .no-col31 td:nth-child(31),
.no-col32 th:nth-child(32), .no-col32 td:nth-child(32),
.no-col33 th:nth-child(33), .no-col33 td:nth-child(33),
.no-col34 th:nth-child(34), .no-col34 td:nth-child(34),
.no-col35 th:nth-child(35), .no-col35 td:nth-child(35),
.no-col36 th:nth-child(36), .no-col36 td:nth-child(36),
.no-col37 th:nth-child(37), .no-col37 td:nth-child(37),
.no-col38 th:nth-child(38), .no-col38 td:nth-child(38),
.no-col39 th:nth-child(39), .no-col39 td:nth-child(39),
.no-col40 th:nth-child(40), .no-col40 td:nth-child(40),
.no-col41 th:nth-child(41), .no-col41 td:nth-child(41),
.no-col42 th:nth-child(42), .no-col42 td:nth-child(42),
.no-col43 th:nth-child(43), .no-col43 td:nth-child(43),
.no-col44 th:nth-child(44), .no-col44 td:nth-child(44),
.no-col45 th:nth-child(45), .no-col45 td:nth-child(45),
.no-col46 th:nth-child(46), .no-col46 td:nth-child(46),
.no-col47 th:nth-child(47), .no-col47 td:nth-child(47),
.no-col48 th:nth-child(48), .no-col48 td:nth-child(48),
.no-col49 th:nth-child(49), .no-col49 td:nth-child(49),
.no-col50 th:nth-child(50), .no-col50 td:nth-child(50) {
    display: none !important;
}


.mdw-GridContainer-PopOver {
    position: fixed !important;
    z-index: 3000;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: -2px 4px 10px 2px var(--box-shadow-color);
    background-color: var(--background-menu);
    border-radius: 2px;
    border: 1px solid var(--border-color);
    width: clamp(40dvw, 40dvw, 100dvw);
    max-height: 95dvh;
    height: fit-content;
    min-height: 25dvh;
    color: var(--text-color-normal);
    display: inline-flex;
    flex-direction: column;

    .mdw-PopOverTitle {

    }
    .mdw-PopOverContent {
        flex: 1;
        background: var(--background-content-element);
        div.left:first-of-type {
            padding: 1rem 1rem 1rem 18px;
        }
        div.textArea.left:not(:has(div.itemlist)) {
            max-height: 40dvh;
            overflow: auto;
        }
        div.textArea.left:not(:has(div.itemlist)):not(:has(div.formRow)) {
            padding: 1rem 1rem 1rem 18px;
        }
        div.itemlist {
            border-radius: 4px;
            border: 1px solid var(--border-color);
            padding: 1rem;
            margin: 0 1rem 1rem 1rem;
        }
    }
    .mdw-PopOverFooter {
        border-top: 1px solid var(--border-color);
    }

    div {
        width: unset !important;
    }

    .cactiTableTitleRow {
        margin: 0;
        padding: 2px 2px 3px 18px;
        box-sizing: border-box;
        height: unset;
        cursor: move;
        .cactiTableButton {
            margin-left: 1rem;
            align-items: flex-end;
        }
    }
}


    /* Main Content Area */
    .mdw-Main {
        display: grid;
        grid-template-areas:    "left top    right"
                                "left middle right";
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto 1fr;
        border-top: 1px solid var(--border-color-light);

        grid-area: main;

        & #main {
            .navBarNavigation {
                display: none;
            }
        }

        &:has(.saveRowParent) {
          /*  & #main {
                margin-bottom: 4rem;
            }
*/
            & #main::-webkit-scrollbar-button {
                width: 40px;
                height: 40px;
            }
/*
            .saveRowParent & {
                padding-bottom: 0.5rem;
            }

            & .saveRowParent {
                width: 100%;
                .saveRow {
                    position: absolute;
                    top:100%;
                    width: 100%;
                    -webkit-transform: translateY(-100%);
                    -ms-transform: translateY(-100%);
                    transform: translateY(-100%);
                    border-top: 1px solid var(--border-color-semilight);
                    right: 0;
                }
            }

 */

        }

        & .mdw-DockTop {
            grid-area: top / 1 / top / 3;
            padding-left: 1rem;
            width: auto;
            border-bottom: 1px solid var(--border-color-semilight);
        }

        & .mdw-DockLeft {
            grid-area: left;
            height: auto;
            /* border-right: 1px solid var(--border-color-semilight); */
            width: min-content;

            & .cactiTable {
                width: 100% !important;
                padding: 0 !important; /* again usage of inline style detected :(  */
                margin: 0 !important;
            }

            & .filterTable {
                white-space: unset;
                display: flex;
                width: 100%;

                & tbody {
                    flex: 1;
                }

                & td {
                    display: inline-block;
                    width: 100%;
                }

                & tr:has(input) {
                    display: flex;
                    flex-direction: column-reverse;
                }

                &:has(div) {

                }
            }
            & .mdw-ConsoleNavigationBox:only-child {
                height: 100%;
            }
        }

        & .mdw-DockRight {
            grid-area: right;
            height: auto;
            /* border-left: 1px solid var(--border-color-semilight); */
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 2px 5px -1px var(--box-shadow-color);
            width: min-content;

            & .mdw-ConsoleNavigationBox:only-child {
                height: 100%;
            }

            & .navBox-header {
                padding: 0 2px 0 10px;
                text-align: unset;
            }
            & .navBox-header-button {
                margin: 0 !important;
            }

        }

        & > div[class^="mdw-Dock"] {
            background: var(--background-navigation-top);
            overflow-x: hidden;
            &:has(div) {
                .cactiTable {
                    display: block !important;
                }
                .cactiTableTitle,
                .cactiTableButton {
                    display: none;
                }
            }

            & > div:first-of-type {
                border-top: none;
            }

            & > div {
                height: 100%;
                position: unset;
                transform: translate(0);
                transition: 300ms;
                background: transparent;
                box-shadow: none;
                border: none;
            }
            .navBox-header {
                font-size: var(--fs-regular);
            }

            & .mdw-ConsoleNavigationBox {
                visibility: visible;
                height: clamp( 50%, 50%, 100%);                        /* we allow two Boxes per total per dock, in this case set initial height to 50% */
                width: 100%;
                border-top: 1px solid var(--box-shadow-color);
            }

            & .mdw-ConsoleNavigationBox:first-of-type {
                .navBox-header{
                    border-top: none;
                }
            }
        }
    }

    /* navigationBox Tabs */
    .displayOptions {
        height: 100%;
        width: 100%;

        .displayOptionsTap {
            .tab-label {
                display: inline-flex;
                width: 100%;
                height: 2.5rem;
                border-bottom: 3px solid transparent;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                padding-left: 10px;
                @supports (-moz-appearance: none) {
                    padding: 0 10px;
                }


                &:hover {
                    color: var(--text-color-lighter);
                }

                & > i {
                    height: 2.5rem;
                    width: 2.5rem;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            & .tab-input {
                position: absolute;
                z-index: -1;
                opacity: 0;
            }

            & .tab-input + label:before{
                display: none;
            }

            & .tab-input:checked + label i {
                transform: translate(0, 0) rotateX(180deg);
                transition: 0.2s ease-in-out;
            }


            & .tab-input:checked + .tab-content {
                height: auto;
                opacity: 1;
                transform: translate(0);
            }

            .tab-filters .filterTable {
                width: 100%;
            }

            .tab-filters .filterTable td:nth-child(2n+1) {
                display: block;
                width: 100%;
            }

            .tab-filters .filterTable td:nth-child(2n+0) {
                display: block;
                width: 100%;
            }

            .tab-content {
                position: relative;
                transform: translate(0, -10%);
                transition: 0.2s ease-in-out;
                height: 0;
                opacity: 0;
                overflow: hidden;
                border-bottom: 1px solid var(--border-color-semilight);
                line-height: 3rem;
                padding-left: 10px;
                @supports (-moz-appearance: none) {
                    padding: 0 10px;
                }

                & div:nth-child(2n+1) {
                    float: left;
                    width: 70%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                & div:nth-child(2n+0) {
                    display: inline-flex;
                    justify-content: flex-end;
                    width: 30%;
                }
            }

            .mdw-columns-reset {
                cursor: pointer;
                color: var(--text-color-highlight-a);
                margin-top: 2rem;
                font-weight: var(--fw-semibold);
            }

            .mdw-columns-reset.inactive {
                color: var(--text-color-normal);
                cursor: unset;
            }
        }
    }

    .cactiAuthBody {
        top: 0;
        position: absolute;
        display: flex;
        height: 100% !important;
        width: 100% !important;
        justify-items: center;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        background: transparent;
        overflow-y: auto;
        overflow-x: hidden;
        color: var(--text-color-normal);
        @media screen and (max-width: 768px) {
            background: var(--background-navigation-top);
        }

    }

    .cactiInstallTable {
        box-shadow: -2px 4px 10px 2px var(--box-shadow-color);
        border-radius: 2px;
        border: 1px solid var(--border-color);
        & > div {

        }
    }

    .cactiAuthLogo {
        background: url(./../../images/wallpapers/cacti_monitoring_wall.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 100%;
        min-height: 256px;
        max-height: 30%;
    }

    .cactiAuthCenter {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        justify-content: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
        color: var(--text-color-normal);
        border: 1px solid var(--border-color-semilight);
        border-radius: 4px;
        background: var(--background-navigation-top);
        flex-shrink: 1;
        width: max-content;
        min-width: 40rem;
        max-width: 100dvw !important;

        @media screen and (max-width: 768px) {
            border: 1px solid transparent;
        }
    }

    html {
        background: rgba(0,0,0,99.99);
    }
    html[data-theme-color="light"] {
        background: rgba(0,0,0,0.01);
    }

    .cactiAuthCenter hr {
        display:none;
    }

    .cactiAuthArea {
        padding: 2.5rem;
    }

    .cactiAuth label {
        /*display: none;*/
    }

    .cactiAuthTitle {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .cactiAuth {
        font-size: var(--fs-semilarge);
        display: flex;
        align-items: stretch;
        flex-direction: column;

        > span {
            margin-bottom: 2rem;
        }

        & i {
            position: relative;
            top: -3.87rem;
            left: 0.5rem;
            width: calc( var(--fs-semilarge) + 1rem );
            padding: 0.5rem;
            color: var(--text-color-medium);
            border: 1px solid transparent;
            border-radius: 4px;
            text-align: center;
            @media (hover: hover) {
                &:hover {
                    cursor: pointer;
                    color: white;
                    background-color: hsla(208, 69%, 40%, 0.5);
                }
            }
        }

        & .badpassword,
        & .goodpassword {
            position: relative;
            top: -3.5rem;
            padding: 0;
            width: 1rem;
            height: 0;
            right: calc( -100% - 0.5rem);
        }

        & input:not([type="checkbox"]) {
            line-height: 3rem;
            background: rgba(0, 0, 0, 0.6);
            html[data-theme-color="light"] & {
                background: var(--background-content);
            }
        }

        & input[type="text"],
        & input[type="password"] {
            margin: 1rem 0;
            padding: 0 0 0 4rem;
            &:-webkit-autofill,
            &:-webkit-autofill:hover,
            &:-webkit-autofill:focus {
                -webkit-box-shadow: 0 0 0px 1000px var(--background-autofill) inset !important;
                transition: background-color 5000s ease-in-out 0s !important;
            }
        }

        & input[type="submit"],
        & input[type="button"] {
            margin: 2rem 0 0 0;
            :hover,
            :focus {
                background-color: rgba(0,0,0,0.3);
            }
        }

        &::placeholder {
            color: white;
        }

        & td {
            padding-right: 6px;
            padding-bottom: 6px;
            white-space: nowrap;
        }
    }

    .cactiAuthErrors {
        min-height: 3.5rem;
        line-height: 3.5rem;
        color: red;
        text-align: center;
        margin-top: 1rem;
    }

    .cactiAuthPanel {
        padding: 4px 0;
    }

    .versionInfo {
        color: var(--text-color-normal);
        padding: 1rem 0;
    }

    .cactiTreeNavigationArea,
    .cactiTreeNavigationArea * {
        display: none !important;
    }

    .cactiGraphContentArea,
    .cactiConsoleContentArea {
        /* only keep second navigation bar */
        & > div {
            padding-left: 1rem;
        }
        grid-area: middle;
    }

    .stickyContainer {
        display: flex;
        flex-direction: column;
        background: none;
        min-height: 3rem;
        & >div {
            height: 100%;
        }
        & div {
            background: none;
        }
        &:empty {
            display: none;      /* hide empty stickyContainer */
        }
    }

    .elementsOnTop {
        display: none;
        grid-template-areas:    "left   middle right"
                                "bottom bottom bottom";
        grid-template-columns: repeat(auto-fit, minmax(0, 33.3%));
        grid-template-rows: 3rem auto;
        @container contentArea (max-width: 1024px) {
            grid-template-areas: "left      right"
                                 "middle    middle"
                                 "bottom    bottom";
            grid-template-columns: minmax(auto,60%) minmax(40%, auto);
            grid-template-rows: 3rem auto auto;
        }
        padding-left: 18px !important;
        border-bottom: 1px solid var(--border-color);
        background: none;
        min-height: 0;
        max-width: calc(100% - 1px);

        & > div {
            margin-top: 0;
            padding: unset !important;
        }
        & .cactiTableTitleRow {
            padding: 0;
            margin: 0;
        }
        & .elementOnTop {
            display: flex;
            div {
                height: 100%;
                display: inline-flex;
                align-items: center;
                max-width: 100%;
            }
        }

        &:has(.elementOnTop:not(:empty)) {      /* only show elements on top with content */
            display: grid;
        }

        & .tableTitleOnTop {
            grid-area: left;
        }

        & .tableNavBarOnTop {
            grid-area: middle;

            justify-content: center;
            @media screen and (max-width: 1024px) {

            }
            .navBarNavigation {
                justify-content: center;
            }
            .navBarNavigationPrevious {
                justify-content: flex-end;
                & > a {
                    font-size: 0;
                    width: 16px;
                    &::before {
                        font-size: var(--fs-regular);
                        font-family: "Font Awesome 6 Free", serif;
                        font-weight: 900;
                        content: "\f100";
                    }
                }
            }
            .navBarNavigationNone,
            .navBarNavigationCenter {
                justify-content: center;
                width: max-content;
                margin: 0 2rem;
            }
            .navBarNavigationNext {
                justify-content: flex-start;
                & > a {
                    font-size: 0;
                    width: 16px;
                    &::before {
                        font-size: var(--fs-regular);
                        font-family: "Font Awesome 6 Free", serif;
                        font-weight: 900;
                        content: "\f101";
                    }
                }
            }
        }

        & .tableActionOnTop {
            grid-area: right;
            justify-content: flex-end;
            flex: 1;
            align-items: center;
            @media screen and (max-width: 1024px) {
                order: 2;
                width: 100%;
            }
            .actionsDropdown {
                justify-content: flex-end;
            }
            .actionsDropdownArrow {
                display: none;
            }
            .ui-selectmenu-button.ui-button {
                width: max-content !important;
                margin-right: .2rem;
            }
            button {
                margin-right: 5px;
                &:last-of-type {
                    margin-right: 10px;
                }
            }
        }

        & .tableTabsOnTop {
            grid-area: bottom;
        }
    }