/*
 * @import 'editMenu.css';
@import 'dialogue.css';
 */@import 'editMenu.css';
@import 'dialogue.css';
:root {
    --color-bg-normal: #FFF;
    --color-bg-raised: #EEE;
    --color-bg-raised2: #FAFAFA;
    --color-fg-normal: #000;
    --color-fg-less: #212121;
    --color-borders: #D6D6D6;
    --color-borders-dark: #646464;

    --color-accent-normal: #1976D2;
    --color-accent-hover: #0D47A1;

    --color-green: #388E3C;
    --color-red: #D32F2F;
}

@media (prefers-color-scheme: dark) {

    :root {
        --color-bg-normal: #000;
        --color-bg-raised: #273000;
        --color-bg-raised2: #121212;
        --color-fg-normal: #FFF;
        --color-fg-less: #EEE;
        --color-borders: #37474F;
        --color-borders-dark: #BDBDBD;

        --color-accent-normal: #FFC107;
        --color-accent-hover: #FFA000;

        --color-green: #81C784;
        --color-red: #EF5350;
    }

}

/* ==============
|  Load fonts
|================ */

@font-face {
    font-family: sourceSansPro;
    src: local('Source-Sans-Pro'), local('Source Sans Pro'),
         url(../fonts/SourceSansPro-Regular.woff2) format('woff2'),
         url(../fonts/SourceSansPro-Regular.ttf) format('truetype');
    font-display: swap;
}

/* ==============
|  General
|================ */

* { box-sizing: border-box; z-index: 1; }

body { margin: 0; background: var(--color-bg-normal); color: var(--color-fg-normal);
       font-family: sourceSansPro, Arial, Helvetica, Times; font-size: 1.2em; line-height: 1.5em; }
#contentWrapper { display: grid; grid-template-columns: auto auto; grid-gap: 2em 2em; }

a { text-decoration: none; color: inherit; }

h1     { display: block; width: 100%; text-align: center; margin: 0 auto .8em auto;
    padding: 1em 0;
    font-size: 2.5em; line-height: 1.2em; }
h1 > * { display: inline-block; vertical-align: middle; color: var(--color-fg-less); }
h1 img { margin-right: .5em; border-radius: .1em; opacity: .7; transition: opacity .4s; }
h1 img:hover { opacity: 1; }

main,
#contentWrapper > section,
#contentWrapper > div,
#contentWrapper > form { grid-row: auto; grid-column: 1 / span 2; display: block; width: 90%; margin: 0 auto 3em auto; }

div#uploader #uploaderMenu { display: block; padding: .5em 0; }

#parserList { display: block; margin: 0 0; padding: 0 0; }
#parserList > li { display: grid; grid-template-columns: 15fr 1fr;
    margin: 0 0; padding: 0 0; border-bottom: 1px solid var(--color-borders);
    cursor: pointer;
    transition: .2s ease-out; }
#parserList > li > :first-child:before { content: " > "; margin-right: .5em; }
#parserList > li > * { display: inline-block; grid-column: auto; grid-row: 1;
    margin: 0 0; padding: .3rem 1em; }
#parserList > li:hover { background: var(--color-bg-raised); color: var(--color-accent-hover); }

main p,
section p:not(.threeCol p) { white-space: pre-wrap; }

@media screen and (min-width: 768px) {
    #contentWrapper { grid-template-columns: 400px 1fr; }
    #contentWrapper > div#uploader { position: relative; min-width: initial; }
    #contentWrapper > main { padding-left: 2em; border-left: 1px dashed var(--color-fg-normal); }
    div#uploader #uploaderMenu { position: sticky; top: 0; }
    #contentWrapper > div#uploader, #contentWrapper > main { grid-column: auto; width: initial; }
    #contentWrapper > div#uploader { margin-left: 5vw; }
    #contentWrapper > main { margin-right: 5vw; }
}

form > div { margin-bottom: 1em; }
label      { display: block; font-weight: bold; margin-bottom: .5em; }

form > h4 { margin-top: 0; }

body > footer { padding: 1em 5% 3em 5%; background: var(--color-fg-normal); color: var(--color-bg-normal); border-top: .1em solid var(--color-borders); }

body > footer > div { display: block; }
body > footer > div a,
body > footer > div span { display: block; font-weight: bold; cursor: pointer;
    color: inherit; transition: color .4s; }
body > footer > div a:hover,
body > footer > div span:hover { color: var(--color-accent-hover); }

.invisible { display: none !important; opacity: 0; }

.buttonLike,
select,
button,
textarea,
input   { display: block; width: 100%; padding: .5em .5em; border: 2.5px solid var(--color-bg-raised);
          background: inherit; color: var(--color-fg-less); font-family: sourceSansPro; font-size: 1em;
          border-radius: .2em; transition: border .2s; }

select:hover,
textarea:hover,
input:hover { border-color: #888;  }

button  { width: 100%; padding: .5em .8em;
    border: 1px solid var(--color-fg-normal); font-weight: bold;
    border-radius: .1em;
    text-transform: uppercase; transition: color .2s, color .2s; }
textarea { line-height: 1.2em; }

button:focus,
button:hover { color: var(--color-accent-hover); border-color: var(--color-accent-hover); }
button.backButton { margin-top: 1.5em; }

button + button  { margin-top: .5em; }
aside > h4:first-child { margin-top: 0; }

select:focus,
textarea:focus,
input:focus { border-color: var(--color-accent-hover); box-shadow: none; }

textarea:invalid,
input:invalid { box-shadow: none; }
textarea:invalid:focus,
input:invalid:focus { border-right-width: 1em; }

textarea { min-height: 30vh; }

table { width: 100%; max-height: 60vh; margin: 2em 0; border-collapse: collapse; overflow: auto; }

th { padding: .3em .5em; text-align: left; border-bottom: 2px solid var(--color-fg-less); }
tbody > tr:nth-child(2n + 1) { background: var(--color-bg-raised2); }
td { padding: .3em .5em; border-bottom: 1px solid var(--color-borders); }

#contentWrapper > div.uploader { margin-bottom: 0; }
#contentWrapper > div.uploader > form { border: 1px solid var(--color-bg-raised); padding: 1em 1em; margin-bottom: 0; }

.loading:before,
.loading:after { content: " "; display: block;
                       position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
                       height: 64px; width: 64px; margin: 0; padding: 0;
                       border-radius: 50%;
                       border: 8px solid var(--color-accent-hover);
                       border-color: var(--color-accent-hover) transparent transparent transparent;
                       z-index: 100;
                       animation: rotating 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation-delay: -0.15s; }

.loading:after { animation-delay: -0.45s; }

@keyframes rotating {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


header     { display: block; width: 100%; padding: 0 2em; font-size: 1rem; z-index: 2; }
header#mainHeader { margin-bottom: 2em;
    background: var(--color-fg-less); color: var(--color-bg-raised2); display: table; }
header#mainHeader > * { display: table-cell; }
@media screen and (max-width: 768px) {
    header#mainHeader > * { min-width: 20%; }
}
header#mainHeader > *:last-child { text-align: right; }

header#mainHeader, header#mainHeader * { z-index: 5; }
header#mainHeader:hover,
header#mainHeader *:hover { z-index: 6; }
header *   { z-index: 2; }
header > * { display: inline-block; vertical-align: middle; }

header h2 { font-size: 1.1em; color: inherit; }
main h2, section h2,
#more h3 { text-transform: uppercase;
  font-weight: normal; }

header select { background: inherit; font-size: .85rem; border: 0; }
header select option { color: var(--color-fg-normal); }

header nav     { color: var(--color-bg-raised2); }
header nav > * { position: relative; display: inline-block; flex: 1; font-size: 1rem; padding: .7em 0; }

header#mainHeader img { display: inline-block; height: 1.9em; margin-right: .5em; vertical-align: middle; filter: invert(1); transition: opacity .4s; }
header#mainHeader h2 { display: inline-block; vertical-align: middle; font-weight: normal; }
header#mainHeader > a:focus > img,
header#mainHeader > a:hover > img { opacity: .7; }


section h2 { margin-top: 2em; }

@media screen and (min-width: 768px) {

    header nav > div > div { display: none; position: absolute; right: 0; top: 100%; width: 300px;
                             background: var(--color-fg-less); text-align: left; }
    header nav > div > a         { padding: .95em 1em; transition: background .4s, color .4s; }
    header nav > div:focus > a,
    header nav > div:hover > a   { color: var(--color-gray); }
    header nav > div > a:focus + div,
    header nav > div:hover > div { display: block; animation: fade-in .4s; }
    header nav > div > a:focus + div > a,
    header nav > div:hover > div > a       { display: block; padding: .5em 1em; cursor: pointer;
                                             transition: background .4s, color .4s; }
    header nav > div > a:focus + div > a:focus,
    header nav > div:hover > div > a:hover { background: var(--color-fg-normal); color: var(--color-bg-normal); }
    header     { padding: 0 10em; }
}

@media screen and (max-width: 768px) {
    body { font-size: 1.08em; }
    h1 img { display: none; }
    header .branding { padding: .7rem; }
    header nav:before { content: " \2630 "; display: inline-block; position: absolute; right: 3rem; top: 0;
                        padding: .8rem 0; font-size: 1.5em; text-align: right; }
    header nav > *    { display: none; }

    header nav:hover:before { display: none; }
    header nav:hover { position: absolute; left: 0; top: 0; display: flex;
                        width: 100%; min-height: 90vh; padding: 2em 1em .5em 1em; background: var(--color-bg-normal); color: var(--color-fg-normal);
                        border-bottom: 1px solid var(--color-borders); box-shadow: 2px 2px 4px var(--color-borders);
                        z-index: 3; animation: fade-in .4s; }

    header nav:hover > *    { display: block; flex: 1; min-width: 40vw; padding: 1em; font-size: 1em; }
    header nav:hover > div a { display: block; padding: .2em 0; }
    header     { padding: 0 1em; }
}

@media (prefers-color-scheme: dark) {
    header#mainHeader,
    body >  footer,
    header nav,
    header nav > div > div { background: inherit; color: inherit; }
    header#mainHeader { border-bottom: 1px solid var(--color-bg-raised2); }
}

@media screen and (min-width: 1600px) {
      #contentWrapper {
          max-width: 1400px; margin: 0 auto;
      }
}

#resultsP { margin: 1em 0; padding: 1em; background: var(--color-bg-raised); }