/* START SSML HELP PANEL */
.contextmenu {
    z-index: 2;
    position: absolute;
    top: 0; left: 0;
    /* height: 70vh; */
    opacity: 0.9;
    /* background-color: #DDD; */
    background-color: var(--ui-bg-color-opaque);
    color: var(--ui-text-color);
    /* border: 1px solid #AAAD; */
    border: 1px solid var(--ui-fg-color);
    border-radius: 0.2em;
    /* box-shadow: 20px 20px 15px #AAAD; */
    box-shadow: 20px 20px 15px var(--shadow-color);
    transform-origin: top center;
    --per: 500px;
    transform: perspective(var(--per));
    will-change: transform;
    transition: transform 150ms, opacity 150ms;
}
.contextmenu.hidden {
    /* display: none; */
    pointer-events: none;
    opacity: 0;
    transform: perspective(var(--per)) rotateX(-89deg);
}
.contextmenu.growing-menu {
    box-shadow: none;
    border-radius: 0.4em;
    border-top-left-radius: 0.15em;
    transform-origin: 0 0;
    transform: scale(1);
    transition: transform 300ms, opacity 300ms;
}
.contextmenu.hidden.growing-menu {
    /* transform: scale(0); */
    transform: scale(0.01) skew(25deg, 25deg);
    /* scale(0) is best for chrome but broken for safari  */
    /* transform: scale(0) skew(25deg, 25deg);  */
}
/* .contextmenu:not(.hidden).fancy { /\* animate consecutive right clicks...feels too tacky tho ngl *\/ */
/*     transition: top 150ms, left 150ms; */
/* } */
.reduce-transparency .contextmenu:not(.hidden) {
    opacity: 1;
}
/* BETA feature, flip context menu if user clicks really low */
/* .contextmenu.lower { */
/*     margin-top: -70vh; */
/* } */
/* .contextmenu.lower #ssml-button-container { */
/*     flex-direction: column-reverse; */
/* } */
/* .contextmenu.lower #ssml-button-container > button:first-of-type { */
/*     bottom: 0; */
/*     padding-top: 0.6em; */
/*     padding-bottom: 0.4em; */
/* } */
/* .contextmenu.lower #ssml-button-container > button:first-of-type:after { */
/*     bottom: auto; */
/*     top: 0; */
/* } */
/* .contextmenu.lower.growing-menu { */
/*     transform-origin: 0 100%; */
/* } */


#ssml-tooltip {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    --arrow-size: 0.8em;
    margin-left: -1em;
    padding: 0.15em 0.4em;
    overflow: visible;
    text-align: left;
    font-size: 14px;
    font-weight: 100;
    color: var(--selection-color);
    background-color: var(--ui-bg-color-opaque);
    opacity: inherit;
    border-radius: 5px;
    box-sizing: border-box;
    /* text-align: right; */
    /* transition: width 200ms, opacity 500ms linear; */
    transition: opacity 150ms ease-in-out, transform 200ms;
    /* transition: width 100ms, opacity 150ms; */
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none; /* <- pretty important */
}
#ssml-tooltip:after { /* arrow */
    content: '';
    position: absolute;
    /* top: 15%; */
    /* left: 8vw; */
    top: 0px; 
    left: calc(100% - 2px);
    /* transform: translateX(-4px); */
    display: inline-block;
    border-top: var(--arrow-size) solid #0000;
    border-left: var(--arrow-size) solid var(--ui-bg-color-opaque);
    border-right: var(--arrow-size) solid transparent;
    border-bottom: var(--arrow-size) solid transparent;
}
#ssml-tooltip.hidden {
    /* z-index: -1; */
    opacity: 0;
}
.growing-menu #ssml-tooltip {
    transition: width 100ms ease-in-out,
                height 100ms ease-in-out,
                opacity 150ms ease-in-out,
                transform 200ms;
}
.disable-ssml-helptext #ssml-tooltip {
    display: none;
}

/* NEW/beta horizontal switch for effects menu */
.contextmenu.horiz {
    /* z-index: 3; /\* since it can cover title & save buttons *\/ */
    /* transform: translateY(-105%); */
    /* border-radius: 0.2em; */
    /* left: 0.3vw !important; */
    z-index: 4; /* since it can cover title, save, and settings btn */
    position: fixed;
    top: 0.3vw !important;
    left: 0.3vw !important;
    /* transform: translateY(0.3vw); */
    transform: none;
    border-radius: 0.2em;
    box-shadow: 0 15px 10px -10px var(--ui-bg-color);
}
.contextmenu.hidden.horiz {
    transform: translateY(-100%);
}
.contextmenu.horiz #ssml-tooltip {
    height: min-content !important;
    width: max-content !important;
    max-width: 100% !important;
    transform: translateY(105%) !important;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
.contextmenu.horiz #ssml-tooltip:after {
    display: none;
}
.contextmenu.horiz #ssml-button-container {
    flex-direction: row;
    height: min-content;
    width: 99vw;
}
.contextmenu.horiz #ssml-button-container > button {
    /* padding: 0.15em 0.4em; */
    padding: 0.6em;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: var(--ui-fg-color);
    border-right-color: var(--ui-fg-color);
}
.contextmenu.horiz #ssml-button-container > button:first-of-type {
    padding-bottom: unset;
    /* padding-right: 0.6em; */
    padding-right: 0.9em;
}
.contextmenu.horiz #ssml-button-container > button:first-of-type:after {
    /* width: 0.4em; */
    width: 0.6em;
    height: 100%;
    top: 0;
}
/* END horizontal contextmenu */

#ssml-button-container {
    /* display: block; */
    display: flex;
    flex-direction: column;
    height: 70vh;
    /* height: 100%; */
    width: min-content;
    overflow-x: visible;
    overflow-y: scroll;
    -webkit-user-select: none;
    user-select: none; /* important since if selection disappears button is useless */
    border-radius: inherit;
}
#ssml-button-container > button {
    width: 100%;
    min-height: -moz-fit-content;
    min-height: fit-content;
    margin: 0;
    padding: 0.15em 0.4em;
    /* font: 15px sans-serif; */
    font-size: 14px;
    font-weight: 100;
    text-transform: capitalize;
    /* text-shadow: 0 0 1px black; */
    color: inherit;
    background-color: transparent;
    /* border: 1px solid #AAA; */
    /* border-left: none; */
    /* border-right: none; */
    border: 1px solid;
    /* border-color: #AAA; */
    border-color: var(--ui-fg-color);
    border-left-color: transparent;
    border-right-color: transparent;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    /* transition: background-color 300ms, color 300ms; */
}
#ssml-button-container > button:hover {
    background-color: var(--selection-color);
    color: var(--font-color);
    /* border: 1px solid rgb(0, 0, 120); */
    /* border-color: rgb(0, 0, 120); */
    /* border-left-color: transparent; */
    /* border-right-color: transparent; */
    /* color: white; */
    /* text-decoration: underline; */
}
#ssml-button-container > button.disabled {
    pointer-events: none;
    background-color: #aaa;
    color: #777;
    cursor: not-allowed;
}
#ssml-button-container > button:first-of-type {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    left: 0;
    display: block;
    padding-bottom: 0.6em;
    text-shadow: 0 0 1px;
    /* background-color: lightblue; */
    background-color: var(--font-color);
    color: var(--selection-color);
    border: none;
    border-radius: inherit;
    /* color: black; */
    /* margin-bottom: 10px; */
}
#ssml-button-container > button:first-of-type:hover {
    background-color: var(--selection-color);
    color: var(--font-color);
    border: none;
}
#ssml-button-container > button:first-of-type::after {
    content: ''; /* fake divider (sticky tho) */
    height: 0.4em;
    width: 100%;
    position: absolute;
    bottom: 0;
    /* left: 0; */
    right: 0; /* right works for .horiz as well */
    display: block;
    background-color: grey;
}
#ssml-button-container > button:first-of-type + .divider {
    display: none; /* hide real unsticky divider */
}
#ssml-button-container > .divider {
    display: block;
    min-height: 0.4em;
    min-width: 0.4em;
    /* height: 0.4em; */
    background-color: grey;
}
/* END SSML HELP PANEL */

/* START SIDE PANEL */
.side-panel {
    z-index: 2;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    right: 0;
    /* width: 20%; */
    min-width: 20%;
    width: min-content;
    height: 100%;
    /* padding-top: 2em; */
    padding-top: 7px;
    padding-bottom: 15px;
    color: var(--font-color);
    /* background-color: var(--sidepanel-color); */
    background-color: transparent;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    /* border-radius: 20px 0 0 20px; */
    border-left: 2px solid rgba(227, 227, 227, 0.5);
    overflow: visible;
    /* overflow: scroll; */
    /* overflow-x: hidden; */
    will-change: transform;
    transform: translateX(0);
    transition: transform 0.5s, background-color 0.3s, width 0.5s; 
}
/* .side-panel.hidden:hover, */
/* .side-panel.hidden:focus-within { */
/*     transform: translateX(0) !important; */
/* } */
.side-panel.hidden {
    /* transform: translateX(calc(100% - 1rem)); */
    transform: translateX(100%);
}
.hide-ui .side-panel,
.loading-app .side-panel {
    transform: translateX(100%);
    /* transform: translateX(calc(100% + 10px)); */
}
.reduce-transparency .side-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.side-panel:before {
    content:'';
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: var(--panel-color); */
    background-color: var(--bg-color);
    opacity: 0.5;
    transition: opacity 0.5s;
    /* filter: invert(); */
}
.reduce-transparency .side-panel:before {
    /* cool css hack to get "darker" color without js */
    background-color: var(--font-color);
    opacity: 1.0;
    filter: invert() hue-rotate(315deg);
    /* filter: invert(); */
}

/* BEGIN SIDE PANEL CONTENTS */

.side-panel h3 {
    margin: 0;
}
.side-panel #extras-container {
    /* border: 1px solid red; */
    width: calc(100% - 35px);
    font-family: var(--menu-font);
    transition: width 0.3s;
}
#extras-container .title {
    font-size: 1.15em;
    font-weight: bold;
}
#extras-container .content {
    margin: 12px auto; /* half the hamburger button size to accomodate downwards arrow */
    padding-left: 0.5em;
    /* text-align: left; */
    font-size: 0.35em;
}

.side-panel .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* width: min-content; */
    /* width: 80%; */
    margin: 0.2em auto 0 auto;
    padding: 0 0.5em;
    border: 1px solid;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    font-family: var(--menu-font);
    font-weight: 100;
    /* text-decoration: underline; */
    /* text-decoration-style: double; */
}
.side-panel .title:before, .side-panel .title:after {
    /* content: '\261f'; */
    content: '\2193';
    display: inline-block;
    position: relative;
    font-size: 1.5em;
    font-weight: 100;
    transform-origin-y: 100%;
    transform: translateY(-10%) scale(0.5, 0.7);
}
.side-panel:not(.hidden) .title:before, .side-panel:not(.hidden) .title:after {
    animation: arrow-down 1s 2;
}
@keyframes arrow-down {
    50% {
        /* transform: translateY(1em) scale(0.4, 1.7); */
        transform: translateY(0) scale(0.5, 0.7);
    }
}
.side-panel hr {
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    border-top: 3px double;
}
.side-panel .alt-text {
    font: inherit;
    font-size: 0.75em;
}


.side-panel #speaker-select-container {
    /* max-height: 60%; */
    max-height: calc(65% - 6em);
    padding-bottom: 2em;
    overflow: scroll;
    overflow-x: hidden;
    /* border-bottom: 1px solid; */
    border-bottom: none;
}
/* #speaker-select-container::-webkit-scrollbar {
    display: default;
} */
/* #speaker-select-container select { */
/*     -webkit-appearance: none; */
/*     outline: none; */
/*     margin: 0 0.1em; */
/*     border-radius: 0px; */
/*     border: none; */
/*     border-bottom: 2px dotted; */
/*     text-align: center; */
/*     width: min-content; */
/*     max-width: min-content; /\**\/ */
/*     font: inherit; */
/*     color: inherit; */
/*     /\* text-decoration: underline; *\/ */
/*     /\* text-decoration-thickness: 2px; *\/ */
/*     /\* text-decoration-style: dashed; *\/ */
/*     cursor: pointer; */
/*     transition: width 300ms; */
/* } */
#speaker-select-container select {
    max-width: 70%;
    font-size: 14px;
    margin-left: 4px;
    text-align: center;
}
#speaker-select-container .speaker-helptext {
    display: block;
    margin-top: 1em;
    font-weight: 900;
    font-family: var(--script-font);
    transition: color 1s;
}
.side-panel .speaker-helptext:first-child {
    margin-top: 0;
}
.side-panel .speaker-helptext.playing {
    color: orange;
}
.side-panel .speaker-helptext:after {
    content: '';
    /* animation-fill-mode: forwards; */
    display: block;
    margin: auto;
    width: 60%;
    height: 3px;
    opacity: 0;
    background-color: lightcoral;
    border-radius: 2px;
    transition: background-color 1s;
}
.side-panel .speaker-helptext.playing:after {
    opacity: 1;
    animation: empty;
    animation-timing-function: linear;
    animation-duration: inherit;
    /* animation-delay: 200ms; */
}
.side-panel .speaker-helptext.anim-ended:after {
    opacity: 0;
}
.side-panel .speaker-helptext.anim-paused:after {
    animation-play-state: paused;
}
@keyframes empty {
    to {
        transform: scaleX(0);
        background-color: darkmagenta;
    }
}

.expandable .exp-wrapper {
    display: grid;
    --expander-icon-transform: none;
    --expander-visibility: hidden;
    overflow: hidden;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1s;
    /* transition-delay: 0.3s; */
}
.exp-wrapper .exp-body {
    min-height: 0;
    visibility: var(--expander-visibility);
    transition: visibility 1s;
}
.exp-body > *:first-child {
    margin-top: 1em;
}
.exp-body > *:last-child {
    margin-bottom: 1em;
}
.expandable .exp-icon {
    display: inline-block;
    transform: var(--expander-icon-transform);
    transition: transform 0.3s;
}
.expandable:hover .exp-wrapper {
    grid-template-rows: 1fr;
    --expander-visibility: visible;
    /* transition-delay: 0s; */
}
.expandable:hover {
    --expander-icon-transform: rotate(45deg);
}

/* CUSTOM VOICE STUFF STARTS HERE */
#voice-studio-container {
    font-size: 0.9em;
    /* max-height: 100%; */
    border: 0.07em solid;
    border-radius: 1em;
    margin: 0.2em;
    /* overflow: hidden;
    max-height: 3em;
    transition: max-height 0.3s; */
}
#voice-studio-container .exp-body {
}
/* #voice-studio-container .alt-text {
    overflow: visible;
    height: 0;
} */
/* #voice-studio-container:hover {
    max-height: 100%;
} */

.side-panel #voice-studio-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25em;
    font-weight: bold;
    /* font-size: 0.9em; */
    padding: 0.5em;
    border: none;
}
/* #voice-studio-title:before, #voice-studio-title:after {
    content: '\2193';
    display: inline-block;
    position: relative;
} */

.side-panel #scan-studio-btn {
    /* font-size: 1em; */
    /* margin: 0; */
    /* margin-top: 0.5em; */
    padding: 0.2em 0.5em;
    display: inline-flex;
    align-items: center;
    font: inherit;
    color: inherit;
    background-color: inherit;
    border: 2px solid #777;
    border-radius: 0.5em 0.5em 0 0;
    border-bottom: none;
    cursor: pointer;
    transition: border-color 0.3s;
}
#scan-studio-btn:active {
    border-color: currentcolor;
}
.refresh-icon {
    width: 0.75em;
    margin-left: 0.25em;
    display: inline-block;
    fill: currentColor;
    animation: rotate-refresh 0.3s linear;
}
#scan-studio-btn:active .refresh-icon {
    transform: rotate(-20deg);
    transition: transform 0.2s;
    animation: none;
}
@keyframes rotate-refresh {
    to {
        transform: rotate(180deg);
    }
}

.side-panel #voice-studio-text {
    max-height: 6.5em;
    overflow: scroll;
    margin: 0 0.5em;
    padding: 0.5em;
    font: inherit;
    color: inherit;
    background-color: inherit;
    border: 2px solid #777;
    border-radius: 1em;
    -webkit-user-select: auto;
    user-select: auto;
    cursor: default;
    /* box-shadow: inset 0 2px 2px 2px var(--shadow-color); */
    /* border: 1px solid orange; */
}

.side-panel #voice-studio-link {
    display: inline-block;
    /* margin: 0; */
    padding: 0.3em;
    color: #1a73e8;
    border-radius: 0 0 0.5em 0.5em;
    border: 2px solid #777;
    border-top: none;
    text-decoration: underline;
    text-shadow: 0 0 1px var(--fg-color);
    /* box-shadow: inset 0 0 2px 3px #1a73e8; */
    /* outline-color: #1a73e8; */
    /* outline-style: dotted; */
    /* outline-width: 2px; */
    /* outline-offset: 0.2em; */
    /* transition: outline-style 0.5s; */
    transition: border-color 0.3s, color 0.3s;
}
#voice-studio-link:hover {
    color: inherit;
    /* outline-style: none; */
}
#voice-studio-link:active {
    border-color: #1a73e8;
}



/* "TECHNICALLY" END SIDE PANEL */


/* PERSISTENT SIDE PANEL MODE (BETA) */
body.persistent-menus #center-button-container,
body.persistent-menus #top-container,
body.persistent-menus #wrapper {
    max-width: 70%; /* we transition max-width not width */
    --editor-width: 90%;
}
@media (max-width: calc(35em)) {
    body.persistent-menus #center-button-container {
        max-width: 100%;
    }
}
body.persistent-menus #mini-settings-panel {
    display: none;
}

/* body.persistent-menus #textContainer {
    max-width: 90%;
} */

body.persistent-menus .side-panel { /* repeat of .hide-ui .sidepanel */
    z-index: 0;
    border-left-style: dashed;
    width: 33%;
    /* width: calc(30% + 0.6em); */
    transform: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.persistent-menus .side-panel:before {
    z-index: 1;
    background-color: transparent;
    opacity: 1;
    -webkit-backdrop-filter: grayscale();
    backdrop-filter: grayscale();
    /* backdrop-filter: blur(15px); */
    /* -webkit-backdrop-filter: blur(15px); */
    /* transition-delay: 0.1s; */
}
body.persistent-menus .side-panel:hover:before {
    opacity: 0;
    pointer-events: none; /* to allow clickthru */
}
body.persistent-menus .side-panel.hidden {
    transform: none;
}
body.persistent-menus .side-panel #extras-container {
    width: 100%;
}
.side-panel #side-panel-pin {
    position: absolute;
    top: 7px; right: 10px;
    width: 1.5em;
    height: 1.5em;
    box-sizing: border-box;
    border-radius: 0.2em;
    border: 0.5px solid;
    border-color: var(--fg-color);
    --bg: transparent;
    --fg: var(--fg-color);
    --fg-o: 0.5;
    background-color: var(--bg);
    transform: translateY(125%);
    /*background-image: url('./svg/pushpin.svg');*/
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}
/* https://icons.getbootstrap.com/icons/pin-fill/
https://icons.getbootstrap.com/icons/pin/ */
.side-panel #side-panel-pin:after {
    content: '';
    width: 75%;
    height: 75%;
    -webkit-mask-image: url('./svg/pushpin.svg');
    mask-image: url('./svg/pushpin.svg');
    background-color: var(--fg);
    opacity: var(--fg-o);
    transition: background-color 0.3s, opacity 0.3s;
}
.side-panel #side-panel-pin:hover {
    --fg-o: 1;
}
.side-panel #side-panel-pin:active {
    --bg: rgba(0,0,0,0.3) !important;
}
body.persistent-menus .side-panel #side-panel-pin {
    --bg: var(--fg-color);
    --fg: var(--bg-color);
    --fg-o: 1;
    transform: none;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/* hide sidepanel button when it's persistent */
body.persistent-menus #toggle-side-panel.toggleable-x {
    opacity: 0;
    pointer-events: none;
}

/* END "PERSISTENT MENUS" (Permanent Sidepanel) mode */

.loading-app #toggle-side-panel.toggleable-x,
.hide-ui #toggle-side-panel.toggleable-x {
    pointer-events: none;
    transform: translateX(calc(100% + 10px));
}
/* END SIDE PANEL */

/* START SAVE PANEL */
#save-panel {
    /**/
    display: flex;
    flex-wrap: wrap;
    /**/
    /* width: 100%; */
    /* height: max(120px, 25vh); */
    text-align: center;
    padding: 1em;
    background-color: var(--save-color) !important;
    box-sizing: border-box;
    border: 2px dashed var(--save-color-dark);
    border-radius: 0.3em;
    box-shadow: 0 0 0 5px var(--save-color);
    outline: none;
    /* will-change: transform; */
}
#save-panel #title-helptext {
    /* --title-height: calc(1.2 * var(--font-size) + 0.8em); */
    font-family: var(--text-font);
    font-size: var(--title-height);
    padding-bottom: var(--title-height);
}
#save-panel > div {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-top: 0.5em;
    width: 90%;
}

#save-panel > div label[for="save-title-input"] {
    flex-grow: 1;
    font-size: 1.2em;
    font-family: var(--menu-font);
    text-align: center;
    margin: auto;
    height: 1.7rem;
    background-color: var(--save-color);
    color: var(--save-color-dark);
    border-radius: 30px 0 0 30px;
    border: 1px solid;
    border-right-style: dashed;
    box-sizing: border-box;
    /* cursor: pointer; */
    cursor: e-resize;
}

/* #save-panel .close-button { */
/*     font-size: 2em; */
/*     margin: 0; */
/*     height: 1em; */
/*     display: flex; */
/*     place-items: center; */
/*     color: red; */
/* } */
#save-panel button {
    cursor: pointer;
}

#save-button, #save-button-local {
    /* width: 30%; */
    width: 45%;
    /* height: 2.2em; */
    margin: 0 auto;
    white-space: normal;
    padding: 0.25em;
    /* font-size: 3.5vw; */
    font-size: var(--ui-size);
    color: var(--text-color);
    background-color: var(--save-color);
    border: 3px solid var(--save-color-dark);
    /* border-radius: 30px 5px 5px 30px; */
    /* border: none; */
    border-radius: 0.3em;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.2s, color 0.3s;
}
#save-panel button:hover, #save-panel button:active {
    background-color: var(--save-color-border);
}
#save-panel button:active {
    color: var(--save-color-dark);
}

/* #save-panel #save-button { */
/*     max-width: 100%; */
/*     flex-grow: 1; */
/*     transition: max-width 300ms; */
/* } */
/* #save-panel #save-button.saving { */
/*     max-width: 8em; */
/*     cursor: default; */
/* } */
/* #save-panel #save-button-local { */
/*     width: min(7em, 30%); */
/*     flex-grow: 0.25; */
/*     border-radius: 5px 30px 30px 5px; */
/* } */
/* #save-panel #save-button-local[data-overwrite=true] { */
/*     width: 8em; */
/* } */
#save-panel #save-button-local.error {
    background-color: grey;
}
#save-panel #save-button-local.success {
    background-color: grey;
}

#saved-url-container {
    display: flex; /* for inheritance */
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
    white-space: normal;
    /* font-size: 14px; */
    font-family: var(--menu-font);
    height: 3.3em;
    margin-top: 0 !important;
    padding: 0.25em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    border-radius: 0.75em;
    /* text-align: left; */
    color: var(--fg-color);
    /* background-color: var(--save-color-border); */
    /* color: white; */
    /* background-color: var(--save-color-dark); */
    opacity: 0.9;
    transition: opacity 300ms;
}
/* #saved-url-container.hidden { */
/*     opacity: 0; */
/* } */
#saved-url-container.hidden a#saved-url {
    display: none;
}
#saved-url-container a#saved-url {
    /* padding: 0 0.5em; */
    padding: 0.2em 0.5em;
    font-family: 'Courier New', 'Courier';
    /* box-shadow: inset 0 0 0 1em #FFF5, */
    /*             0 0 2px 1px #FFF5; */
    box-shadow: inset 0 0 0 1em #FFF6,
                0 0 2px 1px #FFF;
    border-radius: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: opacity 0.3s;
}
/* END SAVE PANEL */

#nav-panel, #save-panel {
    max-height: 37vh;
}
.papertexture {
    background: url(data:image/png;base64,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);
}

/* START NAV PANEL */
#nav-panel {
    z-index: 3;
    position: fixed;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
    /* height: 205px; */
    height: 305px;
    overflow: hidden;
    overflow-y: scroll;
    font-size: 1.5em;
    outline: none;
    /* border-radius: 5px 5px 0 0; */
    border-radius: 0.3em;
    /* border: 3px solid rgb(18, 163, 225); */
    border: 1.5px dashed;
    /* border-bottom: none; */
    border-color: var(--load-color-dark);
    /* background-color: rgba(215, 249, 215, 1); */
    background-color: var(--load-color) !important;
    box-shadow: 0 0 0 4px var(--load-color), 0px 4px 8px 4px var(--fg-color);
    color: inherit;
    /* will-change: transform; */
    /* transition: transform 700ms, border-radius 700ms, opacity 700ms; */
    transition: transform 0.3s, opacity 0.3s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* #nav-panel.hidden:hover { */
/*     opacity: 1; /\**\/ */
/*     transform: translateY(0) !important; /\* competing with hide-ui *\/ */
/*     border-radius: 5px 5px 0 0; */
/* } */
#nav-panel:not(.hidden),
#nav-panel.hidden:focus-within {
    /* outline: 2px solid var(--load-color-dark); */
    opacity: 1; /**/
    transform: translateY(-10vh) !important; /* competing with hide-ui */
    pointer-events: auto;
}

/* #nav-panel.hidden, */
/* .hide-ui #nav-panel { */
/* NEW: now we enforce nav-panel be explicitly hidden so users can see loading happen in background */
#nav-panel.hidden {
    opacity: 0; /**/
    /* transform: scale(2); */
    transform: translateY(50%) scale(1.3);
    pointer-events: none;
}

/* nav control (local/global controls) */
#nav-panel input#local-toggle {
    /* display: none; */ /* no display none so we can focus() on it */
    display: block;
    opacity: 0;
    margin: 0;
    height: 0;
}
#nav-panel input#local-toggle ~ span {
    display: inline-block;
    width: 8em;
    max-width: 40%; /* to prevent line wrap */
    margin: 0 0.5em;
    margin-bottom: 1em;
    flex-grow: 1;
    font-family: var(--menu-font);
    font-weight: 500;
    font-size: min(1em, 6vw);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 255, 0, 0.2);
}
#nav-panel input#local-toggle ~ #local-label {
    position: relative; /* for :after bar */
}
#nav-panel input#local-toggle ~ #global-label {
}
/* label bar (:after) */
#nav-panel input#local-toggle ~ #local-label:after {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 4px solid var(--load-color-dark);
    transform: translateX(0);
    transition: transform 300ms;
}
#nav-panel input#local-toggle:not(:checked) ~ #local-label:after {
    transform: translateX(calc(100% + 1em));
}
/* to make bar inch forward */
/* #nav-panel input#local-toggle:checked ~ #local-label:after { */
/*     transform-origin-x: 0%; */
/*     transform: translateX(0%); */
/* } */
/* #nav-panel input#local-toggle:not(:checked) ~ #local-label:after { */
/*     transform-origin-x: 100%; */
/*     transform: translateX(100%); */
/* } */

/* nav window (slides between local and global) */
#nav-window {
    display: grid;
    /* grid-template-columns: 3fr 1fr 1fr 1fr; */
    grid-template-columns: 50% repeat(3, 1fr);
    position: absolute;
    width: 200%;
    font-size: min(1em, 7vw);
    will-change: transform; /* wow makes a visual diff */
    transition: transform 300ms;
    transform: translateX(-50%);
}
input#local-toggle:not(:checked) ~ #local-label:hover ~ #nav-window {
    transform: translateX(-45%);
}
input#local-toggle:not(:checked) ~ #local-label:active ~ #nav-window {
    transform: translateX(-40%);
}
input#local-toggle:checked ~ #global-label:hover ~ #nav-window {
    transform: translateX(-5%);
}
input#local-toggle:checked ~ #global-label:active ~ #nav-window {
    transform: translateX(-10%);
}
#nav-panel input#local-toggle:checked ~ #nav-window {
    transform: translateX(0);
}

/* style inner elements */
#nav-panel .nav-title {
    padding: 0 0.1em;
    /* font-size: 18px; */
    font-size: 0.9em;
    letter-spacing: -1;
    text-shadow: 0 0 2px var(--load-color-dark);
    color: var(--fg-color);
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: double;
}

/* BETA: USING a for fake-btns so link can be right click opened too */
.nav-content .link-btn {
    z-index: 1;
    display: block;
    margin: 5px auto 5px auto;
    width: min-content;
    padding: 3px;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid;
    border-radius: 3px;
    border-color: var(--load-color-border);
    /* background-color: transparent; */
    background-color: var(--load-color-opaque);
    color: inherit;
    /* font-size: 14px; */
    font-size: 0.8em;
    /* font-family: 'Helvetica Neue'; */
    font-weight: 100;
    text-decoration: none;
    transition: background-color 200ms, color 200ms, border 600ms, transform 300ms, opacity 300ms;
}
.nav-content .link-btn:hover, .nav-content .link-btn:active {
    background-color: black;
    color: white;
    transform: scale(1.5);
}
.nav-content .link-btn:visited {
    border-color: var(--load-color-dark);
}
.nav-content .link-btn.selected { 
    pointer-events: none;
    background-color: var(--load-color-border);
    border-color: var(--load-color-dark);
    color: var(--load-color-dark);
    transform: none;
}
.nav-content .link-btn.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
#nav-local .nav-content .link-btn {
    grid-column: 1 / 2;
    width: 100%;
    white-space: normal;
    margin: 5px 0 5px auto;
    transform-origin-x: 0%;
}
#nav-local .nav-content .link-btn.deleted {
    pointer-events: none;
    border-color: transparent;
    text-decoration: line-through;
}
#nav-local .nav-content .link-btn.highlighted {
    animation: highlight 1s 2;
}
@keyframes highlight {
    25% {
        background-color: orange;
        color: white;
    }
    50% {
        background-color: yellow;
        color: black;
    }
}

/* local column  is separate (takes the biggest (half) column)*/
#nav-panel #nav-local {
    grid-column: 1 / 2; /* the big column */
    opacity: 0.5;
    transition: opacity 300ms;
}
#nav-local .nav-title {
    text-transform: Capitalize;
    text-decoration-style: solid; /* ik this is dumb and pointless */
}
#nav-local .nav-content {
    display: grid;
    /* grid-template-columns: 25% 60% 15%; */
    grid-template-columns: 25% 3fr 1fr;
    padding: 0 10px;
}

#nav-local .nav-content div.metadata {
    grid-column: 2 / 3;
    margin: auto 0.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* border: 1px dashed grey; */
    max-width: 100%;
    position: relative;
}
#nav-local .nav-content div.metadata:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 50%;
    width: 100%;
    height: 2px;
    transform-origin-x: 0%;
    background-color: currentcolor;
    transform: scaleX(0);
    transition: transform 400ms;
}
#nav-local .nav-content .deleted + div.metadata {
    opacity: 0.5;
}
#nav-local .nav-content .deleted + div.metadata:before {
    transform: scaleX(1);
}
#nav-local .nav-content button.delete-script {
    grid-column: 3 / 4;
    display: block;
    /* width: 100%; */
    padding: 0 0.1em;
    /* margin: 5px auto 5px -0.5em; */
    border: 1px solid;
    border-radius: 3px;
    border-color: red;
    background-color: orangered;
    color: white;
    /* font-size: 14px; */
    font-size: 0.8em;
    font-weight: 100;
    white-space: nowrap;
    cursor: pointer;
    overflow: visible;
    transform-origin-x: 100%;
    transition: background-color 200ms, color 200ms, transform 300ms, opacity 300ms;
}
#nav-local .delete-script:hover { 
    transform: scale(1.5);
}
#nav-local .delete-script:active {
    transform: scale(1);
    background-color: transparent;
    border-color: red;
    color: red;
}
#nav-local .nav-content .deleted + .metadata + button.delete-script { /* beta */
    border-color: transparent;
    background-color: transparent;
    color: var(--fg-color);
    transform: translateX(-0.25em);
    /* transition: border-color 0.5s, background-color 0.5s, color 0.5s; */
    pointer-events: none;
}
#nav-local .nav-content button.delete-script:after { /* beta */
    content: 'd';
    z-index: -1;
    display: inline-block;
    visibility: hidden;
    padding: 0;
    margin: 0;
    width: 0;
    transform: translateY(-150%);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
    transition-delay: 300ms; /* transform duration on delete-script button */
    pointer-events: none;
}
#nav-local .nav-content .deleted + .metadata + button.delete-script:after { /* beta */
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
}

#nav-panel input#local-toggle:checked ~ #nav-window #nav-local {
    opacity: 1;
}

#nav-panel #nav-global {
    grid-column: 2 / 5;
    display: grid;
    grid-template-columns: 50% 50%;
}
#nav-global #nav-tutorial {
    grid-column: 1 / 2;
}
#nav-global #nav-example {
    grid-column: 2 / 3;
}

/* (DISABLED) Define the 3 columns */
#nav-panel #nav-graph {
    display: none; /* graph browsing temporarily DISABLED */
    grid-column: 2 / 5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
#nav-graph #nav-parent {
    grid-column: 1 / 2;
}
#nav-graph #nav-forks {
    grid-column: 2 / 3;
}
#nav-graph #nav-siblings {
    grid-column: 3 / 4;
}

/* END NAV PANEL */

/* MISC */
#sp_clipboard {
    min-height: 1em;
    max-width: 6em;
    border: 1px solid #00000047;
    border-radius: 1em 0 0 1em;
    border-right: none;
    padding: 0.2em;
    padding-left: 0.4em;
    position: fixed;
    right: 0;
    top: 2em;
    /* z-index: -1; */
    opacity: 0.15;
    display: none;
}

/* TODO: factor out similarities with #nav-panel b/c it's all same but 1-2 lines */
#user-panel {
    z-index: 3;
    position: fixed;
    box-sizing: border-box;
    top: 5rem;
    /* bottom: 0; */
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
    /* height: 205px; */
    min-height: 305px;
    /* height: fit-content; */
    height: -webkit-fill-available;
    max-height: 50%;
    font-size: min(1em, 2vw);
    overflow: hidden;
    /* overflow-y: scroll; */
    outline: none;
    /* border-radius: 5px 5px 0 0; */
    border-radius: 0.3em;
    /* border: 3px solid rgb(18, 163, 225); */
    border: 1.5px dashed;
    /* border-bottom: none; */
    --misc1-color: hsla(0, 0%, 87%, 0.875);
    --misc1-color-dark: grey;
    border-color: var(--misc1-color-dark);
    /* background-color: rgba(215, 249, 215, 1); */
    background-color: var(--misc1-color) !important;
    box-shadow: 0 0 0 4px var(--misc1-color), 0px 4px 8px 4px var(--fg-color);
    color: inherit;
    transform-origin: top center;
    transform: perspective(900px);
    /* will-change: transform; */
    /* transition: transform 700ms, border-radius 700ms, opacity 700ms; */
    transition: transform 0.3s, opacity 0.3s;
    /* transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}

#user-panel.hidden {
    opacity: 0;
    /* transform: scale(2); */
    /* transform: translateY(50%) scale(1.3); */
    transform: perspective(900px) rotateX(90deg) translateY(-35%);
    pointer-events: none;
}

.flap {
    position: absolute;
    top: 0;
    height: 100%;
    max-width: 10%;
    width: 10%;
    min-width: 1.5em;
    background-color: rgba(0,0,0,0.2);
    /* -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); */
    display: flex;
    align-items: center;
    justify-content: center;
    --flap-color: rgb(58, 58, 58);
    --side-rot: 0deg;
    --flap-acuteness: 0.5em;
    opacity: 0.6;
    /* transition: opacity 0.2s; */
    cursor: pointer;
    z-index: 1;
}
.flap:before {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    border-top: 2px solid;
    border-left: 2px solid;
    border-color: var(--flap-color);
    border-top-left-radius: var(--flap-acuteness);
    transform: rotate(calc(var(--side-rot) + 45deg));
    transition: transform 0.3s, border-radius 0.3s;
}
.flap:hover {
    opacity: 0.9;
}
.flap:active {
    opacity: 1;
}
.flap:hover:before {
    border-top-left-radius: calc(0.5 * var(--flap-acuteness));
}
.flap:active:before {
    border-top-left-radius: 0;
}
.flap.right-nav {
    right: 0;
    --side-rot: 90deg;
}
.flap.left-nav {
    left: 0;
    --side-rot: -90deg;
}

#user-panel-window {
    font-size: 1.5em;
    --num-sections: 3;
    --active-section: 1;
    /* display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center; */
    display: grid;
    --section-size: calc(100% / var(--num-sections));
    grid-template-columns: var(--section-size) repeat(calc(1 + var(--num-sections)), var(--section-size));
    width: calc(100% * var(--num-sections));
    height: 100%;
    transform: translateX(calc(var(--active-section) * var(--section-size) * -1));
    transition: transform 0.3s;
}
#user-panel-window .section {
    padding: 0 calc(10% + 0.5em);
    overflow: hidden;
    overflow-y: scroll;
    position: relative;
}

#user-stats.section {
    grid-column: 1 / 2;
}
#user-welcome.section {
    grid-column: 2 / 3;
}
#user-pay.section {
    grid-column: 3 / 4;    
}
.section.hidden .section-body {
    -webkit-filter: blur(10px);
    filter: blur(10px);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
.section.hidden::before {
    content: attr(data-hidetext);
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    margin: auto;
    font-size: 1.5em;
    text-shadow: 0px 5px 3px #0000004d;
}
.section-title {
    font-size: 1.5em;
}

#sign-outin-btn-container {
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    padding: 1em;
}
a.sign-in-btn, a.sign-out-btn, a.pay-btn {
    text-decoration: none;
    color: inherit;

}
a.sign-in-btn, a.sign-out-btn {
    width: 5em;
    position: relative;
}
a.sign-in-btn .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    opacity: 0;
    transform: translateX(350%);
    transition: opacity 0.2s, transform 0.2s;
}
a.sign-in-btn:hover .icon {
    opacity: 0.7;
    transform: translateX(150%);
}
.authed .sign-in-btn, .sign-out-btn {
    display: none;
}
.authed .sign-out-btn, .sign-in-btn {
    display: block;
}
a.grad-btn[href], a.glow-btn[href] {
    cursor: pointer;
}
a.grad-btn, a.glow-btn {
    color: white;
}
.grad-btn {
    padding: 0.3em;
    margin: auto;
    background-size: 300% auto;
    color: white;
    box-shadow: 0 0 0.3em 0em var(--ui-bg-color);
    border-radius: 0.3em;
    border: 2px solid;
    border-color: #ffffff75;
    background-image: linear-gradient(to right, #5a99ff 0%, #8adaffcf 51%, #a1c4fd 100%);
    transition: background-position 0.3s, border-color 0.3s;
}
.grad-btn:hover {
    background-position: right center;
    border-color: var(--ui-bg-color);
}
.grad-btn.inv {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-decoration: double underline;
    padding: 0;
    border: none;
    box-shadow: none;
}
.glow-btn {
    /* flex-grow: 1; */
    /* height: fit-content; */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid;
    border-color: #f7f7f796;
    border-radius: 0.3em;
    padding: 0.2em;
    position: relative;
    --glow-offset: 10px;
    margin-bottom: var(--glow-offset);
    background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
    background-size: 900%;
    animation: rotate-bg 16s linear infinite;
}
.glow-btn:before {
    content: '';
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: var(--glow-offset);
    z-index: -1;
    /* background: linear-gradient(-45deg, #ffa43c, #ff3c77, #338bff, #3befc5); */
    /* background: linear-gradient(-45deg, #ffa43c, #ff3c77, #338bff, #3befc5); */
    background: inherit;
    background-size: 900%;
    filter: blur(10px);
    opacity: 0.8;
    /* animation: rotate-bg 16s linear infinite; */
    animation: inherit;
}
@keyframes rotate-bg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.authed .guest-mode-toggle {
    display: block;
}
.guest-mode-toggle {
    display: none;
    font-size: 0.75em;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
}
label.guest-mode-toggle {
    /* display: block; */
    cursor: pointer;
}
.guest-mode-toggle label {
    display: block;
}

.refresh-btn {
    margin: 0 20%;
}

.usage-stats-container {
    display: grid;
    grid-template-columns: 3em 1fr 2em;
    width: -moz-fit-content;
    width: fit-content;
    margin: 1em auto;
}
.usage-stats-container.time-stats {
    grid-template-columns: 1fr;
}
.usage-stats-container > svg {
    margin: 0.5em;
    opacity: 0.6;
    /* width: max-content;
    height: max-content; */
    width: 2em;
    height: auto;
}
.usage-stats-container .sign-in-btn {
    width: max-content;
    display: inline;
}
.usage-stats-container .usage-stats {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    align-items: center;
    justify-items: end;
}
.usage-stats-container .usage-stats .g2 {
    margin-left: 0.5em;
    margin-right: auto;
}
.usage-user.inf {
    /* font-weight: 900;
    font-size: 1.75em;
    line-height: 1em; */
    background: url('./svg/infinity.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150%;
}
.usage-stats .time-stat {
    opacity: 0.4;
    transition: opacity;
    transition-duration: 5s;
    transition-delay: 0s;
}
.usage-stats .time-stat:hover {
    opacity: 1;
    animation: flash-green 0.4s;
    transition-duration: 0.2s;
    transition-delay: 0.2s;
}

/* .usage-stats > div {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 0.5em;
} */


.show-user-menu, 
.show-stats-menu {
    z-index: 1;
    position: fixed;
    top: 0.75em;
    --right-offset: 0.9em;
    /* right: calc(var(--ui-size) + var(--right-offset)); */
    right: var(--right-offset);
    height: 1em;
    width: 1em;
    /* background: url(svg/usericon.svg);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat; */
    /* padding-top: 0.5em;
    padding-bottom: 1em; */
    /* margin: calc(0.2 * var(--ui-size)); */
    cursor: pointer;
    transform: translateY(3em);
    transition: transform 0.3s, right 0.3s;
    fill: var(--ui-bg-color);
}
.show-user-menu svg,
.show-stats-menu svg {
    opacity: 0.5;
    transition: opacity 0.3s;
}
.show-user-menu:hover svg,
.show-stats-menu:hover svg {
    opacity: 0.8;
}

body.persistent-menus .show-user-menu,  body.persistent-menus .show-stats-menu {
    /* --right-offset: 0.5em; */
    transform: none;
    /* right: calc(30% + var(--right-offset)); */
    right: calc(33% - 1.5em);
    /* background-color: var(--bg-color); */
}

.loading-app .hol,
.hide-ui .hol {
    pointer-events: none;
    opacity: 0;
    transform: translateX(200%);
}
.hol {
    transition: transform 0.2s;
}

.show-stats-menu {
    right: default;
    left: calc(var(--right-offset) + 0.2em);
    font-size: 1.5em; /* compensate for smaller icon size */
    margin-top: 0;
}
.show-user-menu .stats-menu {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    max-width: 6rem;
    max-height: 12rem;
    border: 0.15em solid grey;
    border-radius: 0.2em;
    background: var(--bg-color);
    /* box-shadow: -3px 3px 2px 0px currentColor; */
    margin: 0.2em;
    pointer-events: none;
    transform-origin: right center;
    --per: 500px;
    --rot: -90deg;
    /* --x-offset: calc(-1* (var(--ui-size) + 100% - 0.4rem)); */
    --x-offset: calc(-1 * 100% - 0.3rem);
    transform: translate(var(--x-offset)) perspective(var(--per)) rotateY(var(--rot));
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}
.show-user-menu:hover .stats-menu {
    --rot: 0;
    opacity: 1;
    pointer-events: all;
    transition-delay: 0.1s;
}

.stats-menu svg {
    width: 1.5em;
    height: 1.5em;
}

.stats-menu > div {
    font-size: 0.75em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.5em;
}
.stats-menu > div > span {
    display: block;
    font-family: monospace;
}

#user-pay {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.pay-btn-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.pay-btn {
    /* margin: 0 20%;
    margin-top: 1em; */
    background-color: blue;
    display: block;
}
a.pay-btn {
    color: white;
}

.pay-history-container {
    /* border-radius: 0.2em; */
    /* border: 1px solid; */
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    /* border-color: rgba(255,255,255,0.5); */
    /* padding: 0.1em; */
    /* margin: 0.75em 0; */
    align-items: center;
}

.get-receipts-button {
    font-size: inherit;
    background: none;
    border-radius: 0.2em;
    border: 1px solid;
}
.get-receipts-button:before {
    content: 'View ';
}
.get-receipts-button.load1:before {
    content: 'Refresh ';
}

.pay-history, .grant-history {
    font-size: inherit;
    border-radius: 0.2em;
    border: 1px solid;
    border-color: rgba(0,0,0,0.8);
    empty-cells: show;
    margin: auto;
    /* display: grid;
    grid-template-columns: repeat(4, 1fr); */
}

.pay-history th {
    background-color: rgba(0,0,0,0.1);
}

.pay-history th > div {
    resize: horizontal;
    overflow: auto;
    min-width: max-content;
    padding: 0em 0.75em;
}

.pay-history td,
.pay-history th {
    border: inherit;
    border-color: inherit;
    border-top: none;
    border-left: none;
    border-bottom: none;
    text-align: center;
}
.pay-history td:last-child,
.pay-history th:last-child {
    border: none;
}

.pay-history .gridded:nth-of-type(0) {

}
.pay-history .gridded:nth-of-type(1) {

}
.pay-history .gridded:nth-of-type(2) {

}
.pay-history .gridded:nth-of-type(3) {

}

.pay-history-container .tr:first-child {
    display: table-row;
}

.pay-history-container tr {
    border: inherit;
    padding: 0.1em;
}