/*
 * This stylesheet defines STRUCTURAL formatting rules for the document.
 * For formatting rules regarding font and color, please refer to the
 * THEME.CSS stylesheet.
 *
 * For consistency and clarity, it is important that the stylesheet retain
 * the structure in which it is written!
 *
 * The code written below should NOT be modified unless making changes to
 * the general document structure.
 *
 * The following source code may be used in accordance to the licensing
 * terms as provided in the GNU General Public License, provided that credit
 * is provided to Jeff Walker. For more information, please feel free to
 * send an email to info@jeffwalker.dev.
 */

/* Document at-large */
*
{
    background-position: center  !important;
    background-repeat: no-repeat !important;
}

html, body
{
    margin: 0;
    padding: 0;
    
    max-width: 100vw !important;
    height: 100dvh !important;

    /*overflow-x: hidden !important;
    overflow-y: auto !important;*/
}

/* General config */
div.wrapper
{
    display: table;

    margin-bottom: -50px;
    padding-top: 48px !important;
    
    width: 100vw;
    max-width: 100vw;
    min-height: 100%;
}

div.wrapper.sticky-bcrumb
{
    padding-top: calc(48px + 53px) !important;
    margin-bottom: calc(-50px - 53px);
}

div.wrapper.nopadding
{
    padding-top: 0 !important;
}

div.article,
article
{
    display: table-row;
    width: 100vw;
    max-width: 100vw;

    z-index: -1;
}

div.section,
section
{
    display: block;
    width: 100vw;
    max-width: 100vw;
    height: auto;
}

hr
{
    height: 1px !important;
    max-height: 1px !important;
    margin: 0;
}

div.left
{
    text-align: left;
}

div.center
{
    text-align: center;
}

div.right
{
    text-align: right;
}

div.justify
{
    text-align: justify;
}

.flex
{
    display: flex;
}

.flex > *
{
    display: flexbox;
}

/* Header and contents */
div.header, div.dropdown,
header, div.dropdown
{
    display: table;
    
    position: fixed;
    table-layout: fixed;
    
    left: 0;
    top: 0;
    
    height: 48px;
    
    /*margin: 0 0 10px 0;*/
    margin: 0;
    padding: 0;
    
    width: calc(100%);
    
    z-index: 1;
}

div.header.hidden,
header.hidden
{
    top: -48px;
}

div.header > a,
header > a
{
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    cursor: pointer;
    
    outline: none;
    
    vertical-align: middle;
}

header.default > a
{
    border-bottom: 3px solid transparent;
    color: white;
    
    display: table-cell;
    text-align: center;
    
    padding: 10px;
    
    text-decoration: none;
}

header.mobile > a,
header.titlebar > a
{
    border-bottom: 3px solid transparent;
    color: white;
    
    display: table-cell;
    text-align: center;
    
    padding: 10px;
    
    text-decoration: none;
    
    width: 100%;
}

header.mobile > a:not(.home),
header.titlebar > a:not(.home)
{
    padding: 0;
    width: 48px;
}

div.header > a *,
header > a *
{
    display: inline-block;
    text-align: center;
}

header > a
{
    background-repeat: no-repeat !important;
    background-size: 2em !important;
}
/*div.header > a.menu { background: url("img/icons/24/menu-white.png"); }
div.header > a.home { background: url("img/icons/sidera-logo-white.png"); }
div.header > a.search { background: url("img/icons/48/magnifying-glass-white.png"); }
div.header > a.shop { background: url("img/icons/24/shop-white.png"); }*/
header *, div.dropdown *
{
    user-drag: none;
    user-select: none;
    -moz-user-drag: none;
    -mos-user-select: none;
    -ms-user-drag: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    
    vertical-align: middle;
}

header > input
{
    display: table-cell;
    border-radius: 0;
    box-sizing: border-box;
    background: transparent;
    color: inherit;
    
    border: none;
    border-bottom: 3px solid transparent;
    
    font: inherit;
    text-align: center;
    
    margin: 0;
    padding: 14px;
    
    width: 100%;
    height: 100%;
}

header img
{
    height: 1.5em;
}

/*div.header > a:link[href="/andromeda/index.html"] { background: url('img/icons/48/andromeda-logo-white.png'); }
div.header > a:link[href="/universe/index.html"] { background: url('img/icons/48/shopping-bag-white.png'); }
div.header > a:link[href="/support/index.html"] { background: url('img/icons/48/cross-white.png'); }
div.header > a:link[href="/news/index.html"] { background: url('img/icons/48/newspaper-white.png'); }
div.header > a:link[href="/sites/index.html"] { background: url('img/icons/48/map-white.png'); }*/

header > a.menu
{
    margin: 0;
    padding: 0;
}

header > a.menu > div.container
{
    display: inline-block;
    
    margin: 0;
    padding: 0;
    
    width: 100%;
    height: 100%;
}

header.titlebar #apptitle
{
    font-size: 1.5em;
    font-weight: bold;
}

/* Dropdown menu icon */
div.header > a.menu > div.container > div,
header > a.menu > div.container > div
{
    display: block;
    position: absolute;
    
    left: 17px;
    
    width: 16px;
    height: 1px;
    
    margin: 0;
    padding: 0;
}

div.header > a.menu > div.container > div.bar1,
header > a.menu > div.container > div.bar1
{
    top: 16px;
}

div.header > a.menu > div.container > div.bar2,
header > a.menu > div.container > div.bar2
{
    top: 23px;
}

div.header > a.menu > div.container > div.bar3,
header > a.menu > div.container > div.bar3
{
    top: 30px;
}

div.header > a.menu.dropdown > div.container > div.bar1,
header > a.menu.dropdown > div.container > div.bar1
{
    top: 23px;
    transform: rotate(45deg);
}

div.header > a.menu.dropdown > div.container > div.bar2,
header > a.menu.dropdown > div.container > div.bar2
{
    opacity: 0;
    width: 0;
}

div.header > a.menu.dropdown > div.container > div.bar3,
header > a.menu.dropdown > div.container > div.bar3
{
    top: 23px;
    transform: rotate(-45deg);
}

header.titlebar div.container > .bar1
{
    transform: rotate(-45deg) translate(-4px, 1.5px);
    width: 10px;
}

header.titlebar div.container > .bar3
{
    transform: rotate(45deg) translate(-4px, -1.5px);
    width: 10px;
}

/* Dropdown and contents */
div.dropdown
{
    display: block;
    
    position: fixed;
    
    width: calc(100%);
    height: 800px;
    
    top: 48px;
    justify-content: center;
    
    visibility: hidden;
    
    width: 100vw;
    
    z-index: 10001;
    
    overflow-x: hidden;
    overflow-y: auto;
    overflow: overlay;
}

div.dropdown *
{
    border-top: 1px solid rgba(255, 255, 255, .25);
    color: white;
    
    display: block;
    text-align: center;
    
    margin: 0;
    padding: 30px 0;
    
    text-decoration: none;
}

div.dropdown > *
{
    display: block;
    width: 100%;
}

/* Breadcrumb trail */
.breadcrumb
{
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

.breadcrumb > div
{
    padding: 1em;
    background: rgba(0, 0, 0, .667);
}

.breadcrumb div *
{
    padding: .5em;
}

.breadcrumb.sticky
{
    position: fixed;
    top: 48px;
    z-index: 1;
}

/* .breadcrumb.sticky + *
{
    margin-top: calc(48px + 26px) !important;
} */

/* Document body */
div.article,
article
{
    display: table;
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;
    
    max-width: 100%;
}

div.article > a,
article > a
{
    text-decoration: none;
}

a div.section,
a section
{
    text-decoration: none;
}

div.section,
section
{
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    
    margin: 0 !important;
}

section#title
{
    /* position: fixed;
    left: 0;
    top: 48px !important;
    width: 100vw !important;
    z-index: 1; */
}

div.section.landscape,
section.landscape
{
    background-size: 100vw auto !important;
}

div.section.portrait,
section.portrait
{
    background-size: auto 100dvh !important;
}

.fillheight
{
    min-height: 100dvh;
}

:not(div.section).fillheight,
:not(section).fillheight
{
    display: block;
    height: 100%;
}

div.wrapper div.section.fillheight:first-child,
div.wrapper section.fillheight:first-child
{
    height: calc(100dvh - 48px);
}

div.wrapper div.section.fillheight,
div.wrapper section.fillheight
{
    height: 100dvh;
}

div.wrapper div.section.fillheight:first-child,
div.wrapper section.fillheight:first-child
{
    height: calc(100dvh - 48px);
}

div.wrapper.nopadding div.section.fillheight,
div.wrapper.nopadding section.fillheight
{
    height: calc(100dvh - 48px);
}

div.section > *,
section > *
{
    display: block;
    padding: 10px 40px;
    width: calc(100% - 80px);
}

div.section.bottom > *,
section.bottom > *
{
    position: absolute;
    bottom: 0;
}

div.section.middle,
section.middle
{
    display: flex !important;
    align-items: center;
    width: 100vw;
}

.left
{
    text-align: left;
}

.centered
{
    text-align: center;
}

.right
{
    text-align: right;
}

.justified
{
    text-align: justify;
}

div.section > div.label,
section > div.label
{
    padding: 10px 40px;
    width: calc(100% - 80px);
}

div.section.table,
section.table
{
    display: table;
    table-layout: fixed;
    width: 100%;
}

div.section.table .row,
section.table .row
{
    display: table-row;
    width: 100%;
}

div.section.table .row > .cell,
div.section.table .row > a,
section.table .row > .cell,
section.table .row > a
{
    display: table-cell;
    height: 100%;
}

div.section.table .row .cell *,
section.table .row .cell *
{
    
}

.hidden
{
    display: none;
}

/* Text formatting */
h1, h2, h3, h4, h5, h6, p
{
    /* margin: 0;
    padding: .25em 0; */
}

h1 { font-size: 1.75em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; }
h5 { font-size: .83em; }
h6 { font-size: .67em; }
p { font-size: 1.2em; }

/* Ordered/unordered lists */
ol, ul
{
    display: block;
    width: auto;
    text-align: left;
}

li
{
    margin-bottom: 1em;
}

/* Links */
a
{
    text-decoration: none;
}

/* Anchors */
a[name]:before
{
    display: block;
    content: ' ';
    height: calc(47px + 53px);
    margin-top: calc(-47px - 53px);
    visibility: hidden;
}

/* App tiles */
/* .xscrollable
{
    overflo.w: auto !important;
    width: 1000px !important;
} */

.tilegroup > a
{
    padding: .5em;
    width: calc(100% - 1em);
}

.tilegroup > a
{
    display: inline-table;
    border-radius: .25em;
    color: white !important;
    margin: .5em;
    padding: 1em;
    text-align: center;
    width: 12em;
}

.tilegroup > a > *
{
    display: table-row;
    margin: 1em 0;
    text-align: center;
}

.tilegroup > a > div
{
    display: table-cell;
    font-size: 32px;
    font-weight: bold;
    height: 4em !important;
    text-align: center;
    vertical-align: middle;
}

.tilegroup > a img
{
    height: 32px;
}

.tilegroup > a > span
{
    bottom: 0;
}

/* Images */
img
{
    width: auto;
    max-width: 100%;
}

figure
{
    margin: 0;
    text-align: center;
}

figure img
{
    max-width: 100%;
}

table figure
{
    margin: 1em;
    text-align: left;
}

figcaption
{
    color: rgba(255, 255, 255, .6);
    font-style: italic;
}

img.icon
{
    width: auto;
    height: 1em;
    margin: 0 .5em;
    vertical-align: middle;
}

/* HTML5 frames */
iframe
{
    display: block;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
}

iframe.fillheight
{
    height: 100dvh !important;
}

/* Input fields */
/*input
{
    border: none;
    border-radius: 0;
    font: inherit;
    outline: none;
}*/

input, textarea
{
    background: transparent;
    color: white;
    font: inherit;
    font-size: inherit;
    outline: 0;
    transition: .35s;
}

input
{
    border-radius: 3px;
    margin: .5em .25em;
    padding: .25em;
    border: 3px solid transparent;
    border-bottom-color: rgb(128, 192, 255);
}

input[disabled]
{
    background: rgba(255, 255, 255, .125);
    border: 3px solid transparent;
    color: rgba(255, 255, 255, .5);
}

textarea
{
    display: block !important;
    border: none;
    resize: none;
    width: calc(100% - 4px);
}

textarea:not([disabled])
{
    background: rgba(255, 255, 255, .125);
}

input:not([disabled]):hover,
textarea:not([disabled]):hover
{
    background: rgba(255, 255, 255, .25);
}

input:focus,
textarea:focus
{
    background: rgba(255, 255, 255, .25);
    border-bottom-color: rgb(255, 192, 0);
}

textarea:focus
{
    border-color: rgb(255, 192, 0);
}

input[type="button"]
{
    display: inline-block;
    border: 3px solid transparent;
    cursor: pointer;
    font: inherit;
    font-size: inherit;
    margin: 1em 1em;
    padding: .5em 1em;
    transition: .35s;
    width: auto;
}

.tilegroup > a:focus,
input[type="button"]:focus
{
    box-shadow: 0 3px 30px black;
}

.tilegroup > a:hover,
input[type="button"]:hover
{
    box-shadow: 0 3px 30px black;
}

.tilegroup > a:active,
input[type="button"]:active
{
    box-shadow: 0 3px 10px black inset;
}

input[type="button"].download
{
    background: rgb(24, 196, 24);
    font-weight: bold;
}

input[type="button"].download:focus
{
    background: rgb(32, 255, 32);
    box-shadow: 0 3px 30px black;
}

input[type="button"].download:hover
{
    background: rgb(32, 255, 32);
    box-shadow: 0 3px 30px black;
}

input[type="button"].download:active
{
    background: rgb(16, 128, 32);
    box-shadow: 0 3px 10px black inset;
}

input[type="button"][disabled],
input[type="button"][disabled]:hover
{
    background: rgba(128, 128, 128, .5);
    box-shadow: none;
    color: rgba(255, 255, 255, .5);
    cursor: not-allowed;
}

/* Modals */
div.modal-backdrop
{
    position: fixed;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(5px);
    left: 0;
    top: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 2;
}

div.modal
{
    display: table;
    position: absolute;
    background: #444;
    /*border: 1px solid rgba(255, 255, 255, .35);*/
    border-radius: 6px;
    box-shadow: 0 16px 48px black;
    font-size: 1.0625em;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: calc(70%);
}

div.modal > *
{
    display: table-row;
}

div.modal > * > *
{
    display: table-cell;
}

div.modal > .head
{
    
}

div.modal > .head > .titlebar
{
    display: flex;
    /*border-bottom: 1px solid rgba(255, 255, 255, .35);*/
    font-size: 1.125em;
    font-weight: bold;
    align-content: center;
    text-align: center;
    padding: .5em;
}

div.modal > .head > .titlebar > .title
{
    align-self: center;
    margin: .125em;
    width: 100%;
}

div.modal > .head > .titlebar > a.close .titlebar-button
{
    border-radius: 50%;
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    transition: .35s;
}

div.modal > .head > .titlebar > a.close .titlebar-button div
{
    position: relative;
    background: white;
    
    width: 1em;
    height: 1px;
}

div.modal > .head > .titlebar > a.close .titlebar-button div.bar1
{
    left: .25em;
    top: .75em;
    transform: rotate(-45deg);
}

div.modal > .head > .titlebar > a.close .titlebar-button div.bar2
{
    left: .25em;
    top: calc(.75em - 1px);
    transform: rotate(45deg);
}

div.modal > .head > .titlebar > a.close .titlebar-button:hover
{
    background: rgba(255, 255, 255, .125);
}

div.modal > .head > .titlebar > a.close .titlebar-button:active
{
    background: rgba(255, 255, 255, .25);
}

div.modal > .body
{
    padding: 0 2em;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

div.modal > .body > .message
{
    display: block;
    height: 100%;
    max-height: calc(100dvh - 16em);

    overflow-y: auto;

    padding: .5em 2em;
}

div.modal > .footer
{
    display: block;
    background: transparent;
    font-size: 1.125em;
    padding: 1em 0;
    text-align: center !important;
    width: 100%;
}

div.modal > .footer *
{
    display: inline-block;
    margin: 0 .5em;
}

/* Disclaimers */
.disclaimer
{
    font-size: .85em;
    text-align: left;
    
    padding: 0 1em;
}

.disclaimer h1
{
    font-size: 1.25em;
}

/* Footer and contents */
div.push
{
    height: 50px;
}

div.push.sticky-bcrumb
{
    height: calc(50px + 53px) !important;
}

div.footer > div.sitemap,
footer > .sitemap
{
    display: inline-table;
    table-layout: fixed;
    width: 100%;
}

div.footer > div.sitemap h1,
footer > .sitemap h1
{
    font-size: 1.25em;
}

div.footer div.column,
footer .column
{
    display: table-cell;
    margin: 0;
    padding: 0 10px;
    vertical-align: top;
}

div.rainbow
{
    display: table;
    width: 100%;
    height: 6px;
}

div.rainbow > *
{
    display: table-cell;
    table-layout: fixed;
    height: 100%;
}

/* Mobile mode */
div.header.mobile > a,
header.mobile > a,
header.titlebar > a
{
    border-bottom: 0;
}

/* Scrollbars */
/* (scrollbars.css) */
::-webkit-scrollbar
{
    display: initial;
    
    z-index: 10001;
}