:root {
    height: 100%;
    font-family: "Segoe UI", sans-serif;
    text-wrap: nowrap;
}

body {
    --line-color: #939393;;

    display: flex;
    gap: 1px;
    margin: 0;
    height: 100%;
    background-color: var(--line-color);

    & > .content {
        --max-width: 40rem;
        --color: #2d2d2d;

        display: flex;
        flex-direction: column;
        gap: 1px;
        flex: var(--max-width);
        max-width: var(--max-width);
        height: 100%;
        background-color: #c5c5c5;

        & > header {
            display: flex;
            gap: .75rem;
            align-items: center;
            padding: 1rem;
            font-size: calc(1rem + 3px);
            background-color: #f5f5f5;

            & > svg {
                width: calc(1em + 7px);
                height: calc(1em + 7px);
            }

            & > h1 {
                margin: 0;
                font-size: 1em;
                font-weight: 600;
                color: var(--color);
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    & > .whitespace {
        flex: 1;
        background-color: white;
    }
}

main {
    --background-color: #f9f9f9;
    --line-color: #d9d9d9;

    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    background-color: var(--line-color);
    overflow-y: hidden;

    & > header {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        background-color: var(--background-color);

        & > nav > ol {
            margin: 0;
            padding-inline-start: 0;

            & > li {
                padding: .75rem;
                font-size: calc(1rem + 2px);
                font-weight: 600;
                color: var(--color);
                list-style: none;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        & > .carousel {
            display: flex;
            gap: .25em;
            align-items: center;
            color: var(--color);

            margin: .25rem;
            border-radius: 0.25em;
            border: 1px solid #c1c1c1;
            padding: .5rem;
            font-size: 1rem;
            text-decoration-line: none;
            background-color: #fbfbfb;

            & > .icon {
                padding-block-start: .15rem;
                width: 1em;
                height: 1em;
            }

            &:hover {
                background-color: #ececec;
            }
        }
    }

    & > ol {
        display: flex;
        flex-direction: column;
        gap: 1px;
        flex: 1;
        margin: 0;
        padding-inline-start: 0;
        background-color: var(--line-color);
        background-color: #e7e7e7;
        overflow-y: auto;

        & > li {
            list-style: none;
            background-color: white;

            & > a {
                display: flex;
                gap: .75rem;
                align-items: flex-start;
                padding: 1rem;
                text-decoration-line: none;

                & > .icon {
                    width: calc(1rem + 41px);
                    height: calc(1rem + 41px);
                    color: var(--color);
                }

                & > .information {
                    display: flex;
                    flex-direction: column;
                    gap: .25rem;

                    & > .name {
                        font-size: calc(1rem + 5px);
                        font-weight: 600;
                        color: var(--color);
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    & > .zone {
                        display: flex;
                        gap: .25em;
                        align-items: center;
                        color: #737373;

                        & > .icon {
                            width: 1em;
                            height: 1em;
                        }

                        & > .name {
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }

                &:hover {
                    background-color: #f4f4f4;
                }
            }

            &.whitespace {
                flex: 1;
                background-color: white;
            }
        }
    }
}