/* static main content area (when logged in) */
main#staticDoc { --available-max-height: calc(100vh - var(--top-pad) - var(--bottom-pad)); padding: var(--top-pad) 0 var(--bottom-pad) 0; }
main#staticDoc > section { z-index: 0; padding: var(--top-pad) var(--right-pad) var(--bottom-pad) var(--left-pad); }
main#staticDoc > section[data-on-top="1"] { z-index: 10; opacity: 1; }
main#staticDoc > section > div.container { z-index: 0; padding: var(--top-pad) var(--right-pad) var(--bottom-pad) var(--left-pad); }
main#staticDoc > section > div.container[data-on-top="1"] { z-index: 1; }
main#staticDoc > section > div.container > article { }
main#staticDoc > section > div.container > article[data-on-top="1"] { z-index: 1; }
main#staticDoc > section > div.container > article.constraint { padding-top: var(--top-pad); padding-bottom: var(--bottom-pad); }
main#staticDoc > section > div.container > article.constraint.extended { top: 0; bottom: 0; height: 100wv; padding-top: 0; padding-bottom: 0; }
main#staticDoc > section > div.container > article.constraint.extended.top_padded { padding-top: var(--top-pad); }
main#staticDoc > section > div.container > article.constraint.extended.bottom_padded { padding-bottom: var(--bottom-pad); }
main#staticDoc > section > div.container > article.fwvs { padding-top: var(--top-pad); padding-bottom: var(--bottom-pad); }
main#staticDoc > section > div.container > article.fwvs::-webkit-scrollbar {
    width: 8px;
    border: solid 0px transparent;
}

main#staticDoc > section > div.container > article.fwvs::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px 8px transparent;
    border: solid 2px transparent;
}

main#staticDoc > section > div.container > article.fwvs::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 8px 8px #4444;
    border: solid 2px transparent;
    border-top-width: calc(var(--top-pad) + var(--top-fixed-height) + 2px);
    border-bottom-width: calc(var(--bottom-pad) + var(--bottom-fixed-height) + 2px);
}

main#staticDoc > section > div.container > article.fwvs::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 8px 8px #6666;
}

main#staticDoc > section > div.container > article.fwvs::-webkit-scrollbar-thumb:active {
    box-shadow: inset 0 0 8px 8px #AAA8;
}

@media all and (min-height: 700px) and (min-width: 740px) {
main#staticDoc > section:not(.modal) > div.container { align-items: center; }
main#staticDoc > section:not(.modal) > div.container.v_inline { flex-direction: column; flex-wrap: wrap; }
main#staticDoc > section:not(.modal) > div.container:not(.v_inline) { flex-direction: row; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; justify-content: space-evenly; overflow-y: visible; }
main#staticDoc > section:not(.modal):not([data-on-top=""]) > div.container { display: flex; }
main#staticDoc > section:not(.modal) > div.container > article:not(.constraint, .fwvs, [data-for-new="1"]) { width: -moz-available; width: -webkit-fill-available; width: stretch; min-width: 320px; max-width: min(var(--on-screen-limit-width), calc(var(--available-max-width) / 2)); }
main#staticDoc > section:not(.modal) > div.container.v_inline > article:not(.constraint, .fwvs, [data-for-new="1"]) { }
main#staticDoc > section:not(.modal) > div.container:not(.v_inline) > article:not(.constraint, .fwvs, [data-for-new="1"]) { --scalable-method: vertical; --margin-t: var(--top-pad); --margin-b: var(--bottom-pad); position: relative; height: calc(100% - var(--margin-t) - var(--margin-b)); flex-grow: 1; overflow-y: overlay; }
main#staticDoc > section:not(.modal) > div.container > article:not(.constraint, .fwvs, .v_inline)[data-for-new="1"] { width: fit-content; flex-grow: 0; margin-left: 12px; }
}

main#staticDoc > section > div.container > .container_master_float { padding-bottom: var(--bottom-pad); }


/* fixed top include app bar (top) */
header#fixedTop { --common-bg-color: transparent; position: fixed; z-index: 130; top: 0; left: 0; right: 0; height: calc(var(--appbar-height) + var(--top-safe-pad)); box-sizing: border-box; margin: 0; padding: var(--top-safe-pad) var(--right-pad) 0 var(--left-pad); background-color: transparent; backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); user-select: none; }
header#fixedTop > section { position: absolute; display: flex; flex-direction: row; flex-wrap: nowrap; top: 0; left: 0; right: 0; width: 100vw; height: 100%; box-sizing: border-box; padding: var(--top-safe-pad) var(--right-pad) 0 var(--left-pad); }
header#fixedTop > section > div.container { padding-bottom: 0; }
header#fixedTop > section > div.container[data-on-top="1*"] { z-index: 130; }
header#fixedTop > section > div.container:is([data-on-top="1"], [data-on-top="0"]) { z-index: 131; }
header#fixedTop > section > div.container:not(:is([data-on-top^="1"], [data-on-top^="0"])) { display: none; }
header#fixedTop > section > div.container:not([data-on-top="1"]) { opacity: 0; }
header#fixedTop > section > div.container > article { }
header#fixedTop > section > div.container > article[data-on-top="1"] { z-index: 131; }
header#fixedTop > section > div.container > article button { position: relative; height: 100%; margin: 0; font-size: 1rem; }
header#fixedTop > section > div.container > article button.square { aspect-ratio: 1; }
header#fixedTop > section > div.container > article button#mainMenuBtn { overflow: hidden; }
header#fixedTop > section > div.container > article button#mainMenuBtn dotlottie-player { --extend: 24px; --size: calc(var(--appbar-height) + (var(--extend) * 2)); width: var(--size); height: var(--size); margin: calc(var(--extend) * -1); translate: 0 3.8%; }
header#fixedTop > section > div.container > article button#mainMenuBtn.closer dotlottie-player { --extend: -8px; }
header#fixedTop > section > div.container > article button > .square_icon { display: inline-block; width: 1em; aspect-ratio: 1; }
header#fixedTop > section > div.container > article hr { display: inline-block; position: relative; width: 1px; height: 10px; min-width: 1px; margin: auto 6px; border-style: none; background-color: rgb(0 0 0 / 10%); }
header#fixedTop > section#appbar { user-select: none; }
header#fixedTop > section#appbar > div.container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; }
header#fixedTop > section#appbar > div.container > .float_area { position: absolute; top: 0; bottom: 0; margin: 0; }
header#fixedTop > section#appbar > div.container > .float_area.left { left: 0; }
header#fixedTop > section#appbar > div.container > .float_area.right { right: 0; }
header#fixedTop > section#appbar > div.container > .float_area.center { left: 0; right: 0; width: max-content; }
header#fixedTop > section#appbar > div.container > article { display: flex; width: max-content; }
header#fixedTop > section#appbar > div.container > article > *:not(nav.tool_set) { max-height: 100%; flex-shrink: 0; margin-top: auto; margin-bottom: auto; }
header#fixedTop > section#appbar > div.container > article > *:not(nav.tool_set) > * { max-height: 100%; }
header#fixedTop > section#appbar > div.container > article > nav.tool_set { display: flex; width: max-content; height: 100%; align-items: center; }
header#fixedTop > section#appbar > div.container > article > nav.tool_set > * { width: max-content; max-height: 100%; flex-shrink: 0; margin-top: auto; margin-bottom: auto; }
header#fixedTop > section#appbar > div.container > article > nav.tool_set > * > * { min-width: max-content; max-height: 100%; }
header#fixedTop > section#appbar > div.container > article.appbarCenter { flex-direction: row; flex-wrap: nowrap; flex-grow: 0; flex-shrink: 0; }
header#fixedTop > section#appbar > div.container > article.appbarCenter > nav.tool_set { flex-direction: row; flex-wrap: nowrap; }
header#fixedTop > section#appbar > div.container > article:is(.appbarLeft, .appbarRight) { width: 0%; flex-grow: 1; flex-shrink: 1; }
header#fixedTop > section#appbar > div.container:has(> article.appbarCenter:not(:has(> *))):is(:has(> article.appbarCenter > *:not(nav.tool_set)), :has(> article.appbarCenter > nav.tool_set:not(:has(> *)))) > article:is(.appbarLeft, .appbarRight) { width: 40%; }
header#fixedTop > section#appbar > div.container > article.appbarLeft { flex-direction: row; flex-wrap: nowrap; }
header#fixedTop > section#appbar > div.container > article.appbarLeft > nav.tool_set { flex-direction: row; flex-wrap: nowrap; }
header#fixedTop > section#appbar > div.container > article.appbarRight { flex-direction: row-reverse; flex-wrap: nowrap; }
header#fixedTop > section#appbar > div.container > article.appbarRight > nav.tool_set { flex-direction: row-reverse; flex-wrap: nowrap; }
header#fixedTop > section#appbar > div.container > button#home { }
header#fixedTop > section#appbar > div.container > button#home img { height: 86%; }

/* main menu (left/right float) */
nav#mainMenu { --grab-x: 0px; --menu-area-blur: 8px; position: fixed; z-index: 120; display: flex; flex-direction: row; flex-wrap: nowrap; top: 0; bottom: 0; justify-content: flex-start; user-select: none; }
nav#mainMenu.right { right: 0; flex-direction: row-reverse; }
nav#mainMenu[data-opened="1"] { width: 100vw; }
nav#mainMenu > section { --padding-top: 4px; --padding-bottom: 0px; height: 100vh; box-sizing: border-box; padding: calc(var(--top-pad) + var(--padding-top)) 0 calc(var(--bottom-pad) + var(--padding-bottom)) 0; }
nav#mainMenu > section#menuArea { --grab-ax: var(--grab-x); --max-width: 360px; --opened-width: 60vw; width: 0; margin: 0; background-color: rgba(var(--cabr) / 40%); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); overflow: hidden overlay; transition-duration: 0.3s; }
nav#mainMenu[data-on-grab="1"] > section#menuArea { width: max(calc(0vw + var(--grab-x)), 0px); transition-delay: 0s; transition-duration: 0s; }
nav#mainMenu[data-on-grab="1"].right > section#menuArea { width: max(calc(0vw - var(--grab-x)), 0px); }
nav#mainMenu[data-opened="1"] > section#menuArea { width: min(var(--opened-width), var(--max-width)); backdrop-filter: blur(var(--menu-area-blur)); -webkit-backdrop-filter: blur(var(--menu-area-blur)); }
nav#mainMenu[data-opened="1"].right > section#menuArea { padding-right: var(--right-pad); }
nav#mainMenu[data-opened="1"]:not(.right) > section#menuArea { padding-left: var(--left-pad); }
nav#mainMenu[data-opened="1"][data-on-grab="1"] > section#menuArea { width: calc(min(var(--opened-width), var(--max-width)) + var(--grab-x)); }
nav#mainMenu[data-opened="1"][data-on-grab="1"].right > section#menuArea { width: calc(min(var(--opened-width), var(--max-width)) - var(--grab-x)); }
nav#mainMenu > section#menuArea > div.container { padding-top: var(--top-pad); background-color: transparent; }
nav#mainMenu > section#menuArea > div.container:not([data-on-top^="1"]) { display: none; }
nav#mainMenu > section#menuArea > div.container > article { background-color: transparent; }
nav#mainMenu > section#menuArea .maxWidth { width: min(var(--max-width), var(--opened-width)); }
nav#mainMenu > section#menuArea ul { margin: 0 0 0; padding: 0; list-style: none; }
nav#mainMenu > section#menuArea ul > li { }
nav#mainMenu > section#menuArea ul > li > button { width: 100%; padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); text-align: left; font-size: 1.125rem; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 0 4px var(--color-anti-text); }
nav#mainMenu > section#menuArea section.grouped { flex-direction: column; flex-wrap: nowrap; }
nav#mainMenu > section#menuArea section.grouped > label { }
nav#mainMenu > section#menuArea section.grouped > ul {  }
nav#mainMenu > section#menuArea section.grouped > ul > li {  }
nav#mainMenu > section#grabArea { width: 3vw; max-width: 12px; }
nav#mainMenu[data-opened="1"] > section#grabArea { flex-grow: 1; max-width: none; background-color: rgb(var(--cadm) / 20%); }
nav#mainMenu > section#grabArea div.pad { height: 100%; transition-duration: 0.3s; }
nav#mainMenu[data-opened="1"] > section#grabArea div.pad { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
@media all and (min-height: 700px) {
    @media all and (min-width: 740px) {
nav#mainMenu[data-opened="1"] > section#grabArea div.pad { backdrop-filter: unset; -webkit-backdrop-filter: unset; }
    }
}

/* root tabs (bottom) */
footer#fixedBottom { position: fixed; display: flex; flex-direction: row; flex-wrap: nowrap; z-index: 110; bottom: 0; left: 0; right: 0; height: var(--rootbar-height); margin: 0; padding-bottom: var(--bottom-safe-pad); justify-content: center; background-color: rgb(var(--cwht) / 66.666%); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); justify-content: center; user-select: none; }
footer#fixedBottom nav { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; height: var(--rootbar-height); flex-grow: 1; flex-shrink: 1; user-select: none; }
footer#fixedBottom nav:not(#rootbar) { max-width: 0; }
footer#fixedBottom nav:first-child { justify-content: flex-end; }
footer#fixedBottom nav:last-child { justify-content: flex-start; }
footer#fixedBottom nav#rootbar { width: var(--available-max-width); min-width: var(--rootbar-min-width); max-width: var(--rootbar-max-width); padding-inline: var(--left-pad) var(--right-pad); }
footer#fixedBottom nav > * { max-height: 100%; margin-top: auto; margin-bottom: auto; }
footer#fixedBottom nav > *[data-is-hidden="1"] { display: none; }
footer#fixedBottom nav > * > * { max-height: 100%; }
footer#fixedBottom nav > * > img { --icon-height: 0.6; height: calc(100%* var(--icon-height)); }
footer#fixedBottom nav > * > img:only-child { margin: calc(var(--rootbar-height) * (1 - var(--icon-height)) / 2); }
footer#fixedBottom nav > button { display: flex; flex-flow: column nowrap; height: 100%; flex-grow: 1; justify-content: center; align-items: center; border-radius: 0; font-size: 1.25rem; transition-duration: 0.2s; }
footer#fixedBottom nav > button:has(> .maskable_icon) > .maskable_icon { position: relative; width: fit-content; height: fit-content; }
footer#fixedBottom nav > button:has(> .maskable_icon) > .maskable_icon::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #333; mask-image: var(--src); mask-repeat: no-repeat; }
footer#fixedBottom nav > button:has(> .maskable_icon) > .maskable_icon > img { opacity: 0; }
footer#fixedBottom nav > button:has(> .maskable_icon) > label { color: #999; font-size: 0.625rem; line-height: 0.75rem; }
footer#fixedBottom nav > button:has(> .maskable_icon)[data-active="1"] > .maskable_icon { }
footer#fixedBottom nav > button:has(> .maskable_icon)[data-active="1"] > .maskable_icon::after { background-color: var(--color-point-dark); }
footer#fixedBottom nav > button:has(> .maskable_icon)[data-active="1"] > .maskable_icon > img {  }
footer#fixedBottom nav > button:has(> .maskable_icon)[data-active="1"] > label { color: var(--color-point-dark); }
footer#fixedBottom nav > button:not(:has(> .maskable_icon))[data-active="1"] { background-color: #0004; }
footer#fixedBottom nav > button.fit_for_icon { flex-grow: 0; }
footer#fixedBottom nav > .dummy_spacer { flex-grow: 0; opacity: 0; }
footer#fixedBottom nav > .dummy_spacer > img { margin-inline: 0; }
@media all and (min-height: 700px) and (min-width: 740px) {
footer#fixedBottom nav#rootbar { width: max-content; padding-inline: 0; flex-grow: 0; flex-shrink: 0; }
footer#fixedBottom nav:not(#rootbar) { width: -moz-available; width: -webkit-fill-available; width: stretch; flex-grow: 1; }
footer#fixedBottom nav:not(#rootbar):first-child { padding-left: var(--left-pad); }
footer#fixedBottom nav:not(#rootbar):last-child { padding-right: var(--right-pad); }
}
footer#fixedBottom nav#customFixedSections { }
footer#fixedBottom nav#instantSections { }


/* session manager */
main#staticDoc > section#more { }
main#staticDoc > section#more > .container { }
main#staticDoc > section#more > .container > article.session_manager { }
main#staticDoc > section#more > .container > article.session_manager.session_group_holder { flex-direction: column-reverse; }
main#staticDoc > section#more > .container > article.session_manager.session_group_holder > .sessions_holder .session_list { flex-direction: column-reverse; }
main#staticDoc > section#more > .container > article.session_manager .session_group_holder { flex-direction: column-reverse; }
main#staticDoc > section#more > .container > article.session_manager .session_group_holder > .sessions_holder .session_list { flex-direction: column-reverse; }

.session_group_holder { display: flex; flex-direction: column; flex-wrap: nowrap; }
.session_group_holder > .sessions_holder { }
.session_group_holder > .sessions_holder .session_list { flex-direction: column; }
.session_group_holder > .sessions_holder .session_list > .page_short_cut { border-bottom: none; }
.session_group_holder > .sessions_holder .session_list > .page_short_cut button { width: 100%; padding: 8px; text-align: left; transition-duration: 0.3s; }
.session_group_holder > .sessions_holder .session_list > .page_short_cut button:hover { background-color: rgb(var(--cpl) / 60%); }
.session_group_holder > .sessions_holder .session_list > .page_short_cut button:active { background-color: rgb(var(--cpl) / 80%); }
.session_group_holder > .sessions_holder.fixed_pages { }
.session_group_holder > .sessions_holder.opened_pages { }


/* whole screen content page area */
main#instantDoc { position: fixed; z-index: 200; height: 0; padding-top: 0; padding-bottom: 0; overflow: visible; }
main#instantDoc > section { box-sizing: border-box; }
main#instantDoc > section:is([data-on-top="1"], [data-on-top="0"]) { height: var(--fvh); padding-top: var(--top-safe-pad); padding-bottom: var(--bottom-safe-pad); }
main#instantDoc > section > div.container { }
main#instantDoc > section > div.container[data-on-top="1*"] { z-index: 200; }
main#instantDoc > section > div.container:is([data-on-top="1"], [data-on-top="0"]) { z-index: 201; }
main#instantDoc > section > div.container:not(:is([data-on-top^="1"], [data-on-top^="0"])) { display: none; }
main#instantDoc > section > div.container:not([data-on-top="1"]) { opacity: 0; }
main#instantDoc > section > div.container > article { }
main#instantDoc > section > div.container > article[data-on-top="1"] { z-index: 201; }
main#instantDoc > section > div.container > .container_master_float { z-index: 212; }