details summary {
    cursor: pointer;
}

details summary>* {
    display: inline;
}

.main_content_pane:has(.server_error_mesg) {
    max-width: unset !important;
}

.appUserManualLink {
    z-index: 1101;
    position: fixed;
    top: 2px;
    right: 150px;
    border: 1px yellow solid !important;
    border-radius: 40px !important;
    font-size: 1rem !important;

    &:hover {
        border-radius: 140px;
        font-size: larger;
    }

    &:disabled {
        opacity: 0.3;
        border: 1px solid #999;
        background-color: #ccc;
        /* color: #666666; */
        color: #999;
    }
}

#lbBottomLeft {
    font-size: smaller;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* <span class='tick-mark'></span> abc */
.tick-mark {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;

    &::before {
        position: absolute;
        left: 0;
        top: 50%;
        height: 50%;
        width: 3px;
        background-color: #336699;
        content: "";
        transform: translateX(10px) rotate(-45deg);
        transform-origin: left bottom;
    }

    &::after {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 100%;
        background-color: #336699;
        content: "";
        transform: translateX(10px) rotate(-45deg);
        transform-origin: left bottom;
    }
}

/* <button id="fs-toggle">Toggle Fullscreen</button> */
#fs-toggle:not(:fullscreen) {
    background-color: #afa;
}

#fs-toggle:fullscreen {
    background-color: #faa;
}


.pageNavigator {
    text-align: center;
    font-size: 1.1em;
}

.pageNavigatorControl {
    display: inline-block;
    margin-left: 10px;
}

/* ============================================================= */
.appMenuItemSelected {
    text-decoration: underline;
    font-size: larger;
    color: yellow;
    text-shadow: 1px 2px green;
}

.sql-statements-pane {
    padding: 4px;
    background-color: var(--sql-statements-pane-bgcolor);
}

a.link-external {
    background-image: url(https://en.wikibooks.org/w/skins/Vector/resources/skins.vector.styles.legacy/images/link-external-small-ltr-progressive.svg?fb64d);
    /* background-image: url(/images/icons/link-external.svg); */
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1.2rem;
}

.link_to_external::after {
    /* content: url(https://en.wikibooks.org/w/skins/Vector/resources/skins.vector.styles.legacy/images/link-external-small-ltr-progressive.svg?fb64d); */
    /* content: '\f35f'; */
    content: '*';
}

/* ============================================================= */
.appx-header-row {
    color: #fff;
    display: flex;
    gap: 15px;
    justify-content: space-between;
    font-size: larger;
    padding: 9px;

    & a {
        color: inherit;
    }

    & a:hover {
        text-decoration: none;
        border-bottom: 2px solid lightsalmon;
    }

    &>* {
        background-color: inherit;
    }
}

.appx-desktop-menu {
    padding-top: 2px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.6rem;
    row-gap: 0.6rem;
    justify-content: end;
}

.appx_desktop_submenu {
    max-width: calc(var(--vw100, 1vw) * 100);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: end;
    padding-block-start: 0.5rem;
    padding-inline-end: 0.9rem;
}

.hamburger-menu-toggler-container {
    margin-bottom: -5px;
    padding-left: 11px;
}

.hamburger-menu-popup-container {
    position: absolute;
    top: 100%;
    right: 0px;
    z-index: 1001;
    background-color: inherit;
    overflow: hidden;
    font-size: 1.167rem;
    box-sizing: border-box;
    transition: height .3s ease-in-out;
    height: 0px;
    will-change: height;
}

menu.appx-hamburger-menu {
    margin: 0px;
    padding: 2px 10px 1px 10px;
    border: 1px solid #ccc;

    & li {
        line-height: 1.8rem;
    }
}

/* ************************** Multimedia */
.videoContainer {
    margin: auto;
    background-color: lightblue;
    display: block;
    text-align: center;
}

.videoContainer video {
    width: 50vw;
}

.videoContainer button {
    font-size: 1rem;
    margin: 5px;
}

.videoControlPanel {
    background-color: lightcoral;
    margin: auto;
    display: inline-block;
}

.record_future_row {
    background-color: var(--record_future_bgcolor) !important;
}

.record_archived_row {
    background-color: var(--record_archived_bgcolor) !important;
}

.full_height_on_hover {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 500ms ease-out;

    &>div {
        overflow: hidden;
    }

    :hover {
        grid-template-rows: 1fr;
    }
}

/*  HTML tables */
.appx_body thead {
    position: sticky;
    top: -1px;
}

.position_sticky_top {
    position: sticky;
    top: 0px;
}

.table-cells-light-border {
    border: 1px solid silver;

    & td,
    & th {
        border: 1px solid silver;
    }
}

.fieldsetx {
    border: 1px solid silver;

    & legend {
        font-weight: 700;
        padding: 0px 6px;
    }
}

#trace_info_pane {
    max-width: 96vw;
    background-color: var(--my-bgcolor) !important;

    * {
        background-color: inherit;
    }

    th,
    td {
        /* important is needed b/c of specificity, not just ordering */
        padding: 5px !important;
    }

    zth {
        border-color: var(--my-th-border-color) !important;
    }

    ztd {
        border-color: var(--my-td-border-color) !important;
    }
}