body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;*/
    font-family: Arial, sans-serif;
    height: 100vh;

    display: grid;
    grid-template-columns: 20vw 1fr;
    grid-template-rows: 8vh 1fr;
    grid-template-areas:
    "header header"
    "left-panel cal";


    color: darkslategray;

}

header {
    grid-area: header;

    background: linear-gradient(to right, #e0f2ff, #b3d9ff);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9vw;

    button {
        margin-left: 8px;
        font-size: 10px;
        height: 20px !important;
    }
}

.hero {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 36px;

    .vid-links, .contact {
        font-size: smaller;
    }
}


.entry-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

}

.entry-wrapper > * {
    height: 24px;
}


.code-area form {
    display: grid;
    background: red;
    grid-template-columns: 1fr 1fr 120px;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    align-items: center;

    label {
        text-align: right;
        padding-right: 6px;
    }

    .feedback-area {
        grid-column: 1 / span 3;
    }


}

input {
    width: 300px;
}

svg {
    grid-area: cal;
    width: 100%;
    height: 90vh;

}

#cal-events {
    /*stroke-width: 5px;*/
}

.context-menu {
    position: absolute;
    background: lightgray;
    padding: 6px;
    font-size: small;
}

.dragging {
    fill: lightgreen;
}

.dragging-over {
    fill: blue;
}

.link.delete-mode {
    stroke: red;
    stroke-dasharray: 25, 5;
}

.calevent.delete-mode {
    fill: red;
}

text[tabindex="0"]:focus {
    outline: 1px solid blue; /* Or whatever helps you see it's working */
}

.start-end-line-text-start, .start-end-line-text-end {
    font-size: 10px;
    fill: gray;
}

.left-panel {

    grid-area: left-panel;

    box-sizing: border-box;

    /*position: fixed;*/
    /*left: 0;*/
    /*top: 10vh;*/
    /*bottom: 0;*/
    /*background: lightgray;*/
    background: linear-gradient(to bottom, #e0f2ff, #b3d9ff);

    /*padding: 24px;*/
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    flex-direction: column;

    details {
        margin-bottom: 24px;
    }

    summary {
        cursor: pointer;

    }

    .instruction {
        font-size: small;
        padding: 4px;
    }

    .data-nav {
        margin-top: 12px;
        background: lightblue;
    }

    .data-nav-data-wrapper {
        display: flex;
        flex-direction: column;
        overflow: scroll;
        gap: 1px;
        height: 80vh;

        padding: 8px;
    }

    .data-nav-data-item {
        border-top: thin gray solid;
        padding: 10px;
        box-sizing: border-box;


        /*font-size: smaller;*/
        /*display: flex;*/
        /*gap: 3px;*/
        /*flex-direction: column;*/
        /*align-items: start;*/
        /*justify-content: center;*/

        display: grid;
        grid-template-columns: 1fr 70px;
        grid-template-rows: 1fr 1fr;
        gap: 4px;

        .data-nav-data-item-title {
            cursor: pointer;
        }

        .data-nav-data-item-dates {
            color: gray;
        }

        .data-nav-data-item-dates {
            padding-left: 4px;
            grid-column: 1 / span 2;

            /*padding-right: 5px;*/
        }

        .data-nav-data-item-end {
            /*padding-left: 12px;*/
        }


        select {
            justify-self: start; /* horizontal */
            align-self: center;  /* vertical, optional */
        }

    }

    .breadcrumb.current {
        font-weight: 700;
        /* add whatever else */
    }
}

.data-nav-data-item.selected {
    background: lightgreen;
}

/*.data-nav-data-item-start:after {*/
/*    content: " → ";*/
/*}*/


/*
media query for small screens... even if in landscape mode
     */

@media screen and (max-width: 1000px) {
    body {
    }

    header {
        font-size: smaller;
        gap: 3vw;
    }

}

/*text{*/
/*    outline: none;*/
/*}*/