html, body {
    height: 100%;
    overflow: hidden;
    margin: 0pt;
    font-family: 'Times New Roman', Times, serif;
    /*text-shadow: 1px 1px 1px rgba(0,0,0,0.005);*/
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
:root {
    --main-color: black;
    --main-bcolor: rgb(243, 243, 243);
    --special-color: darkred;
    --special-bcolor: rgb(223, 221, 221);

    --hover-bcolor: rgb(255, 207, 167);
    --highlight-bcolor: yellow;
    
    --heading-color: brown;
    --icon-color: rgb(70, 70, 170);
    --border-color: rgb(255, 199, 176);
    --link-color: darkblue;

    --coll-value: 40%;
    --mula-color: hsl(20, 95%, var(--coll-value));  --atta-color: hsl(244, 95%, var(--coll-value));
    --tika-color: hsl(101, 100%, var(--coll-value)); --anya-color: hsl(283, 55%, var(--coll-value));

    color: var(--main-color); 
    background-color: var(--main-bcolor);
}
:root.dark { /* dark mode variables */
    --main-color: white;
    --main-bcolor: rgb(51, 51, 51);
    --special-color: rgb(173, 216, 250);
    --special-bcolor: rgb(90, 90, 90);

    --hover-bcolor: rgb(0, 0, 0);
    --highlight-bcolor: rgb(105, 105, 2);
    
    --heading-color: rgb(235, 223, 220); /* specific uses */
    --icon-color: rgb(255, 253, 220);
    --border-color: rgb(122, 122, 122);
    --link-color: lightblue;

    --coll-value: 80%;

    color: var(--main-color); 
    background-color: var(--main-bcolor);
}

i { font-style: normal; }

.title-bar {
    padding: 6pt 8pt 6pt 8pt; 
    background-color: var(--special-bcolor);
    font-size: 1.25rem;
    cursor: pointer; display: flex; flex-direction: row; flex-flow: row nowrap; align-items: center;
}

#menu-list { position: absolute; z-index: 9999; display: none; background-color: var(--main-bcolor); text-align: left; 
    box-shadow: -8px 9px 42px 8px rgba(0,0,0,0.19); border: 1px solid var(--border-color); }
.menu-list-item { font-size: 1rem; display: block; padding: 5pt 8pt 5pt 5pt; text-decoration: none; cursor: pointer; }
.menu-list-item:hover { background-color: var(--hover-bcolor); }
.menu-list-item i.far { color: var(--icon-color); }

#search-bar-div { display: flex; flex-flow: row nowrap; box-shadow: 0px 10px 25px -3px rgba(0,0,0,0.2);
    z-index: 40; position: relative; font-size: 1.25rem; border-bottom: 0.5px solid var(--border-color);
}
.search-bar { flex: 1 1; font-size: 1.25rem; margin: 2pt 1pt 2pt 1pt; padding: 0.33rem 0.33rem 0.33rem 0.33rem; max-width: 350pt; min-width: 70pt;
    max-height: 1.4rem;
    border: 1px solid var(--border-color);
    background-color: var(--main-bcolor);
    color: var(--main-color);
}

a[href] { color: var(--link-color); }
a.button {
    margin: 2pt 1pt 2pt 1pt; padding: 6px 5px 6px 5px; text-align:center; text-decoration: none; line-height: 1; cursor: pointer; display: inline-block;
    border: 1px solid var(--border-color);
}
a.button:hover { background-color: var(--hover-bcolor);  }
/*a.button:active, a.button.pressed { background-color: lightgrey; box-shadow: none; }*/

.top-pane { width: 100%; overflow-y: auto; } /* flex: 1 1 auto; display: flex; flex-direction: column; }*/
.top-pane-status.selected { background-color: var(--special-bcolor); }

/*#settings-area h1 { color: brown; font-size: 1.5rem;}*/
#settings-area h2 { color: var(--heading-color); font-size: 1.1rem; margin: 1.5rem 0rem 0.2rem 0rem; }
#settings-area h2 .far { color: var(--icon-color); }
.custom-radio { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.custom-radio .name::before { font-family: "Font Awesome 5 Pro"; font-weight: 400; padding-right: 5pt; font-size: 1rem; }
.custom-radio .option,.custom-radio .group { cursor: pointer; padding: 3pt; border: 1px solid var(--border-color); margin: 1pt; transition: 0.3s; 
    display: flex;  align-items: center; background-color: var(--main-bcolor); }
.custom-radio .option.active { background-color: var(--special-bcolor); }
.custom-radio .option .name::before  { content: "\f111"; }
.custom-radio .option.active .name::before { font-weight: 900; }
.custom-radio .option:hover { background-color: var(--hover-bcolor); }
/*.custom-radio .option:hover .name::before { content: "\f192";  font-weight: 400; }*/
.custom-radio img { height: 30px; vertical-align: middle; padding-left: 3pt; mix-blend-mode: multiply; }
.dark .custom-radio img { filter: saturate(50%); mix-blend-mode: screen; }
.custom-radio .option .example { padding-left: 5pt; color: var(--icon-color); font-size: smaller; }
.custom-radio .option.beta-script { color: rgb(138, 138, 138); }
.custom-radio .option.larger { font-size: larger; }

/* option check boxes */
.custom-radio .check .name::before { content: "\f0c8"; }
.custom-radio .check.active .name::before { content: "\f14a"; font-weight: 900; }
/*.custom-radio .check:hover .name::before { content: "\f14a";  font-weight: 400; } hover is not clean on touch devices */

/* option groups */
.custom-radio .group.active { background-color: var(--special-bcolor); }
.custom-radio .group > .name { text-transform: capitalize; font-weight: bold; }
.custom-radio .group > .name::before { content: "\f0a9"; }
.custom-radio .group.open > .name::before { content: "\f0a8"; }
.custom-radio .group.active > .name::before { font-weight: 900; }
.custom-radio .group:hover { background-color: var(--hover-bcolor); }
.custom-radio .group:hover .name::before { font-weight: 900; }
.custom-radio .option[group]:not(.open) { display: none; }

.loading-dlg { padding: 0.5rem; font-size: 1rem; color: var(--main-color); }

.download-software-list img { height: 40px; filter: invert(95%); margin: 2px; }
.dark .download-software-list img { filter: invert(12%); }

.help-button::before { font-family: "Font Awesome 5 Pro"; font-weight: 300; content: "\f059"; padding: 5pt; font-size: 1rem; color: var(--icon-color); }
.help-button:hover::before { cursor: help; font-weight: 900; }
#help-area i { padding: 0rem 0.3rem 0rem 0.3rem; color: var(--icon-color); }
#help-area h2 { text-align: center; color: var(--heading-color); }

.action-icon { font-size: 0.8rem; cursor: pointer; padding-left: 5pt; color: var(--border-color); }
.share-icon { font-weight: 400; }
.share-icon:hover { color: var(--main-color); font-weight: 900; }
.save-icon:hover { color: gold; font-weight: 900; } /* fine with dark theme */
.save-icon.saved { color: gold; font-weight: 900; }
.save-icon.saved:hover { color: gray; }

div.menu-item-dialog { text-align: center; font-size: 1.1rem; }

.jdialog { 
    position: absolute; /*padding: 0.33rem;*/ box-shadow: -8px 9px 42px 8px rgba(0,0,0,0.19); z-index: 100; /*top: 100%;*/ left: 0;
    text-indent: 0rem; /*undo any indent */
    border: 2px solid var(--border-color); 
    background-color: var(--main-bcolor);  
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#toast {
    display: none; /* Hidden by default. Visible on click */
    color: var(--main-bcolor);
    background-color: var(--main-color); /* Black background color */
    text-align: center; /* Centered text */
    border-radius: 5pt; /* Rounded borders */
    padding: 5pt 10pt 5pt 10pt; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1000; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    transform: translateX(-50%);
    bottom: 30pt; /* 30px from the bottom */
}

::-webkit-scrollbar { width: 12px; }
@media screen and (max-width: 600pt) {
    ::-webkit-scrollbar { width: 6px; }
}
::-webkit-scrollbar-track { background-color: var(--main-bcolor); }
::-webkit-scrollbar-thumb { background-color: var(--special-bcolor); }

/** not used */
.tooltip {
    position: fixed;
    background-color:#eeeefe;
    color: black;
    /*border: 1px solid #aaaaca;*/
    padding: 3pt;
    width: auto;
    font-size: 0.8rem;
    z-index: 9999;
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}