@charset "UTF-8";
/* reset */
* { padding:0; margin:0; box-sizing: border-box; }
ul{ list-style-type:none; }

/* * { outline: 1px solid red; } /* for debugging */

:root {
  --text: #212529;
  --bg1: #F8EFD3;
  --bg2: #FCF8EA;
  --bg3: #F5E7C7;
  --bar: #ECE2C3;
  --brown: #694F10;
  --red: #900C00;
  --gold: #ffd700;
  --gray: #808080;
  --white: #FFFFFF;
  --black: #000000;
  --shadow: rgba(128,128,128,0.5);
}

.dark {
  --text: #f1f1f1;
  --bg1: #1e1e1e;
  --bg2: #2a2a2a;
  --bg3: #333333;
  --bar: #3a3a3a;
  --brown: #bdb76b; /*#d2b48c;*/
  --red: #ff6b6b;
  --gold: #f6c400;
  --gray: #aaaaaa;
  --white: #1e1e1e;
  --black: #FFFFFF;
}

body {
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: var(--text);
 background-color: var(--bg2);
 width: 100%;
 margin: 9em auto;
 box-shadow: 0 .5rem 1rem var(--shadow);
}

a {
 color: var(--brown);
 text-decoration: none;
}

@media (max-width: 600px) { /* very small screens */
 #logo img { display: none; }
 body { margin: 5em auto; }
 header { height: 4rem; }
 #search input { width: initial; }
}

@media (max-width: 767px) { /* default mobile */
 html { font-size: 75%; }
 /* body { width: fit-content; } */
 header { width: 100%; max-width: 100%; }
 #main { grid-template-columns: 1fr;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
 }
 #left, #center {
  display: contents; /* direct */
 }
 #breadcrumbs  { order: -3; }
 #title { order: -2; }
 #float_left  { order: -1; }
 #summary { width: 80%; margin: 0 auto; line-height:2rem; }
 #lang_select { display: none; }
 .features { grid-template-columns: 1fr; }
 #forms input, #forms select {
  font-size: 1.6rem !important;
  height: 2.5rem !important;
  max-width: 90vw !important;
 }
 li a { line-height: 2rem; }
}

@media (min-width: 768px) { /* desktop small */
 html { font-size: 75%; }
 /* body { width: fit-content; } */
 header { width: 100%; max-width: 100%; }
 #main { grid-template-columns: minmax(320px, 1fr) 2fr; }
 .features { grid-template-columns: repeat(3, 1fr); }
 #mobile_app { display: none; }
}

@media (min-width: 1000px) {
  body { width: 90%; max-width: 90%; }
  header { width: 90%; max-width: 90%; }
}

@media (min-width: 1200px) {
  html { font-size: 87.5%; }
  body { width: 80%; max-width: 80%; }
  header { width: 80%; max-width: 80%; }
}

@media (min-width: 1600px) {
  html { font-size: 75%; }
  body { width: 70%; max-width: 1200px; }
  header { width: 70%; max-width: 1200px; }
}

header {
 position: fixed;
 top: 0;
 width: 100%;
 background: var(--bg2);
 z-index: 1000;
 transition: height 0.3s ease;
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
}

header #logo img {
 height: 8rem;
 transition: height 0.3s ease;
 vertical-align: middle;
}

header.shrink {
 height: 4rem;
}

header.shrink #logo img {
  height: 3rem;
}


#logo a {
 white-space: nowrap;
 font-size: 2.5rem;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-variant: small-caps;
 font-weight: bold;
 padding: 0 1rem;
 text-decoration: none;
 color: var(--brown);
}

#logo span.ext {
 font-size: 1rem;
}

#search {
 text-align: center;
 display: contents;
}

#search input {
 flex-grow: 1.5;
 padding: 0.5rem 1rem;
 border: 1px solid var(--brown);
 border-radius: 0.8rem;
 background-color: var(--white);
 color: var(--text);
}





.dots {
 height: 1rem;
 aspect-ratio: 4;
 background: radial-gradient(circle closest-side,var(--brown) 90%, transparent) 0/calc(100%/3) 100% space;
 clip-path: inset(0 100% 0 0);
 animation: dots-anim 0.5s steps(4) infinite;
}

@keyframes dots-anim {
  to{clip-path: inset(0 -34% 0 0)}
}


@keyframes pulsate {
 0%   { opacity: 1; }
 50%  { opacity: 0.25; }
 100% { opacity: 1; }
}

.pulsate {
  animation: pulsate 0.5s ease-in-out 5;
}




#lang_select {
  text-align:center;
  padding: 0 0.5rem;
}

main {
  background-color: var(--bg1);
}

section {
 clear:both;
}

#main {
  display: grid;
}



#button_menu_burger {
 font-size: 3rem;
 padding: 0 0.5rem;
 cursor: pointer;
}

#menu {
 display: none;
 flex-direction: column;
 background: var(--bg1);
 padding: 0.5em;
 position: absolute;
 top: 100%;
 left: 0;
 box-shadow: 0 .5rem 1rem var(--shadow);
}

#menu.active {
 display: flex;
}

#menu .form {
 font-size: 1.2rem;
}

#menu .form::before {
  content: "►";
  color: var(--red);
  padding-right: 0.5rem;
}
#menu .question::before {
  content: "►";
  color: var(--gold);
  padding-right: 0.5rem;
}

#menu li{
 padding: 0.25rem;
 margin: 0.25rem;
}

#menu ul li:hover {
  background-color: var(--bg2);
}

#menu ul li a::before {
  content: "■";
  color: var(--gold);
  padding-right: 0.5rem;
}

#menu ul li a {
  display: block; /* whole row */
  font:bold 1rem/1.2rem Arial, Helvetica, sans-serif;
  color:var(--red);
  text-decoration:none;
}


#search_results {
 display: none;
 position: absolute;
 top: 100%;
 flex-direction: column;
 background: var(--white);
 border: 1px solid var(--gray);
 box-shadow: 0 0.2rem 0.5rem var(--shadow);
 overflow-y: scroll;
 max-height: 75vh;
 left: 0;
 right: 0;
}

#search_results.active {
 display: flex;
}


#search_results ul li{
 font-size: 1.25rem;
 line-height: 2rem;
}
#search_results li:nth-child(even) {
  background-color: var(--bg2);
}

#search_results ul li:hover{
 background-color: var(--bg1);
}

#search_results ul li a{
 text-decoration: none;
 font-weight: bold;
 color: var(--red) !important;
 cursor: pointer;
}

#search_results ul li a::before{
 content: '►';
 padding-right: 0.5rem;
 color: var(--gold);
}

#search_results .caption {
 font-size: 1.5rem;
}
#search_results .note {
 font-size: 1.25rem;
}

/* body */


button {
 background-color:var(--bg2);
 border-radius: 0.5rem;
 border-width: thin;
 padding: 0.1rem 0.4rem;
 text-transform:uppercase;
 color: var(--text);
 font:normal 1rem/1.8rem Arial, Helvetica, sans-serif;
 cursor:pointer;
}

button.center {
 display: block;
 margin: 0 auto;
}

input[type=button], input[type=submit], input[type=reset] {
 cursor:pointer;
}

span.reset {
 display: inline-flex;
 align-items: center;
}

span.reset span.x {
 display: block;
 width: 1.2rem;
 height: 1.2rem;
 border-radius: 50%;
 color: var(--red);
 background-color: var(--bar);
 font: 1rem monospace;
 text-align: center;
 line-height: 1rem;
 cursor: pointer;
 margin-left: -1.5rem;
}

label::before {
  content: "•";
  color: var(--gold);
  padding-right: 0.25rem;
}

label {
  font-size: 1.2rem;
  line-height: 2rem;
  color:var(--red);
  font-variant:small-caps;
  padding-right: 0.5rem;
}

label.nostar::before {
 content: none;
}

label > i, label > span, label > .MathJax {
 font-variant-caps: normal;
}

dfn {
 font-style: normal;
 font-weight: bold;
}

#announcement {
 font-size: 1.6rem;
 font-weight: bold;
 border: 0.2rem solid var(--red);
 padding: 0.2rem;
}

.error {
	box-shadow: 0 0.1rem 0.3rem var(--red);
}

p.error {
	font-variant:small-caps;
	text-align: center;
}


samp {
 font-family: "Lucida Console", monospace;
 border: 1px dashed var(--gray);
 padding: 1px;
 word-break: break-all;
}

a.help:before {
    content: '?';
    display: inline-block;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    width: 1.8ex;
    height: 1.8ex;
    font-size: 1.2rem;
    line-height: 1.2rem;
    border-radius: 1rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    padding: 1px;
    color: var(--red);
    background: var(--white);
    border: 1px solid var(--red);
    text-decoration: none;
    cursor: pointer;
}
a.help:hover:before {
    color: var(--white);
    background: var(--red);
    border-color: var(--white);
    text-decoration: none;
}

#share {
  text-align: center;
}

/* left */

#left {
 font:normal 1.3rem "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#left h2, #left div.heading_bar {
 background-color: var(--bar);
 width:100%;
 padding:0 0 0 1rem;
 margin:0 0 0.5rem 0;
 font:normal 1.8rem/2.7rem Georgia, "Times New Roman", Times, serif;
 color:var(--text);
}

#left p {
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 margin: 0.5em;
}

#breadcrumbs {
 padding: 0 0.1rem;
}
#breadcrumbs li a {
 font-weight: normal;
}
#breadcrumbs ol, #breadcrumbs li {
 display: inline-block;
 padding: 0.2rem;
 color: var(--text);
}
#breadcrumbs li::before {
 content:' › ';
}
#breadcrumbs li:first-child::before {
 content:'';
}

#float_left {
 max-width: 360px;
}




#results_title{
 display: none;
}

#results_icons{
 float: right;
 padding: 0.2rem 0.8rem 0 0;
 font: normal 1rem/1.2rem "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: var(--text);
}

#results_icons button {
 height: 2rem;
 width: 2rem;
}

#results{
 width: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: 16rem;
  
 padding: 0 0.4rem 0.2rem 0.4rem;
 font-size: 1.2rem;
 line-height: 1.5;
 font-family: "Lucida Console", monospace;
 position: relative;
 word-wrap: break-word;
 overflow-wrap: break-word;
 word-break: break-word;
}

#results .caption{
 font: normal 1.1rem/1.6rem "Lucida Console", monospace;
 text-align: center;
 background-color: var(--bg3);
 border-bottom: 1px solid var(--bg2);
 border-top: 1px solid var(--bg2);
 width: 100%;
}

#results .notice{
  padding: 0 0.5rem;
  font: normal 1rem/1.8rem "Trebuchet MS",Arial,Helvetica,sans-serif;
  background-color: var(--bg3);
  border-bottom: 1px solid var(--bg2);
  border-top: 1px solid var(--bg2);
  width: 100%;
}

#results .notice::before {
  content: "⚠️";
  left: 1rem;
}



#results table {
 margin-left:auto;
 margin-right:auto;
 word-wrap: break-word;
 overflow-wrap: break-word;
 word-break: break-word;
}

#results table th{
 border:none;
 background-color: var(--bar);
}
#results table tr:nth-child(even) > td {
 background-color: var(--bg1);
}
#results table tr:nth-child(odd) > td {
 background-color: var(--bg2);
}

#results table th[data-sort]::after {
 /*content: '↑↓';*/
 content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='1.2rem' fill='%23000000' viewBox='-96 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3E%3C/svg%3E");
 opacity: 0.3;
}

#results table th[data-sort]:hover::after {
 opacity: 1;
}

#results table th.sorting-asc::after {
 /*content: '↓';*/
 content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='1.2rem' fill='%23000000' viewBox='-96 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'/%3E%3C/svg%3E%0A");
}
#results table th.sorting-desc::after {
 /*content: '↑';*/
 content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='1.2rem' fill='%23000000' viewBox='-96 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z'/%3E%3C/svg%3E%0A");
}

#results table.indexes tbody {
 counter-reset: rowNumber;
}

#results table.indexes tbody tr {
 counter-increment: rowNumber;
}

#results table.indexes tbody tr th.row_index::before {
 content: counter(rowNumber);
 display: inline-block;
 text-align: right;
}

#results > div.result {
 word-wrap: break-word;
 overflow-wrap: break-word;
 word-break: break-word;
}


#results .number{
 text-align:right;
 padding-left:0.3rem;
}

#results .row_index{
 font-size: 0.8rem;
}

#results c {
 font-size: 0.8rem;
 font-weight: normal;
 color: var(--text);
}

#results li a{
 font: bold 1.3rem/1.8rem "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: var(--text);
 background-color: var(--bg2);
 text-decoration: none;
}

.cf {
 font-size: 1rem;
 padding: 0.2rem 0 0 0.6rem;
}
.cf.goto {
 font-size: 1.2rem;
}
.cf span {
 font-style: italic;
}
.cf a {
 font-weight: bold;
}

img.homeimg {
 float: right;
 border: 1px solid var(--black);
 width: 40%;
 margin: 0.75rem;
 clear: both;
}

/* center */
#center {
 padding: 0.5rem;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 1.25rem;
}

#center h1 {
 padding:0 1rem;
 font:bold 2.5rem/3rem Georgia, "Times New Roman", Times, serif;
 color:var(--brown);
 font-variant:small-caps;
}

#forms .h2_form {
 padding: 0.2rem 0 0 1rem;
 background-color: var(--bar);
 font: bold 1.65rem/2.4rem Georgia, "Times New Roman", Times, serif;
 color: var(--brown);
 font-variant: small-caps;
}

#center h2 {
 scroll-margin-top: 5rem;
 padding: 1rem 0 0 1rem;
 font: bold 1.65rem/2.4rem "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: var(--brown);
}

#center h3 {
 scroll-margin-top: 5rem;
 margin: 0.2rem 1rem;
 padding: 0 1rem;
 display: table;
 background-color: var(--bg2);
 font: bold 1.5rem/2rem "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: var(--brown);
}

#center h4 {
 padding:0 1rem 0 1rem;
 font:bold 1.4rem/1.6rem "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#center p{
 font:normal 1.25rem/2rem "Trebuchet MS", Arial, Helvetica, sans-serif;
 text-indent: 1rem;
 margin: 0 0 0.25rem 0;
}

#center p.info {
 padding: 0.25rem 0.5rem 0 0.5rem;
 overflow: hidden;
}

#center a{
 text-decoration: none;
 color: var(--red);
}

#center a:hover{
 background-color: var(--bg2);
}

#center form {
 background-color: var(--bg2);
 border: 0.1rem solid var(--bar);
 padding: 0.1rem 0.5rem;
}

#forms {
 background-color: var(--bg2);
}

#forms table {
 border-collapse: collapse;
 margin: 0.2rem 0 0 0;
}

#forms table td {
 padding: 0;
}

#forms h3 {
 font: bold 1.4rem/2rem  Georgia, "Times New Roman", Times, serif;
 font-variant: small-caps;
}

#forms textarea {
 border-radius: 0.5rem;
 padding: 0.2rem 1.5rem 0 0.2rem;
 width: 92.5%;
 height: 8rem;
 border: 1px solid var(--bar);
 font:normal 1.2rem "Lucida Console", monospace;
 word-wrap: break-word;
 text-overflow: ellipsis;
 color: var(--text);
 background-color: var(--white);
 caret-color: var(--red);
}

#forms textarea.mini {
 height: 4.5rem;
 padding: 0.25rem 1rem 0 0.25rem;
 line-height: 1.2rem;
}

#forms textarea.math {
 height: 5.5rem;
 line-height: 1.2rem;
 padding: 0.2rem;
 font-size: 1rem;
 text-transform: lowercase;
}

#forms input {
 border-radius: 0.25rem;
 padding: 0 0.3rem;
 color: var(--text);
 background-color: var(--white);
 border: 1px solid var(--bar);
 text-transform: uppercase;
 font:normal 1.25rem/2.2rem "Lucida Console", monospace;
 text-overflow:ellipsis;
}

#forms input.casse {
 text-transform:none;
}

#forms input.double {
 height: 2.5rem;
 font-size: 1.6rem;
}

#forms input.math {
 text-transform: lowercase;
}

#forms [type="checkbox"] {
 vertical-align: middle;
 accent-color: var(--red);
}

#forms [type="radio"] {
 vertical-align: middle;
 accent-color: var(--red);
}

#forms [type="file"] {
 font-family: "Lucida Console", monospace;
}

#forms [disabled] {
 opacity: 0.5;
}

#forms select {
border-radius: 0.25rem;
 padding: 0 0 0 0.25rem;
 color: var(--text);
 background-color: var(--white);
 border: 1px solid var(--bar);
 font: normal 1.25rem/2.2rem  Arial, Helvetica, sans-serif;
}

#center button {
 padding: 0.15rem 0.7rem;
 border: var(--bar) solid 0.15rem;
 background: linear-gradient(var(--bg2),var(--bg1));
 color: var(--brown);
 font:bold 1.3rem/2.5rem "Trebuchet MS", Arial, Helvetica, sans-serif;
 display: block;
 margin: 0 auto;
}

#center button:hover {
 background: linear-gradient(var(--bg1),var(--bg2));
}

#forms button::before {
 content: "▶ ";
}

#forms .smallbutton {
 padding: 0.25rem 0.5em;
 border: 1px solid var(--bar);
 border-radius: 0.2rem;
 background: linear-gradient(var(--bg2),var(--bg1));
 color: var(--brown);
 font: 1rem/1.2rem "Trebuchet MS", Arial, Helvetica, sans-serif;
 cursor: pointer;
}

#center div.example {
 background-color: var(--bg3);
 border-top: 1px solid var(--bg2);
 border-bottom: 1px solid var(--bg2);
 padding:0.25rem 0 0.25rem 1.75rem;
 text-indent: -1rem;
 position: relative;
}

#center div.example::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--bar);
}

#center div.warning {
 border-top: 1px dotted var(--red);
 border-bottom: 1px dotted var(--red);
 padding:0 0.5rem 0 1.5rem;
}

#center div.warning::before {
  content: "⚠️";
}

#center div.warning p {
  display: inline;
}


#center img {
 max-width: 100%;
 vertical-align: middle;
}

#center .code {
 font-family: monospace;
 border: 1px solid var(--bg2);
 display: block;
 padding: 0.5rem;
 min-height: 3.2rem;
 white-space: pre-wrap;
 word-break: break-all;
 overflow-x: auto;
 text-indent: initial;
 background-color: var(--bg2);
}

#center .code .line {
  counter-increment: line;
  display: block;
}

#center .code .line::before {
  content: counter(line);
  display: inline-block;
  width: 2rem;
  margin-right: 1rem;
  text-align: right;
  color: gray;
}





#questions h3 {
 color: var(--text);
}
#questions h3::before {
 content: "⬥ ";
}

#questions table {
 margin: 0 auto;
 font:normal 1.25rem/1.8rem  "Lucida Console", monospace;
 border-collapse: collapse;
 word-wrap: break-word;
}

#questions table th, #questions table td {
 border: 1px solid gray;
 text-align: center;
 min-width: 1rem;
}

#questions table th {
 background: linear-gradient(var(--bg2), var(--bg1));
}

#questions table.crypto th {
 padding: 0 0 0 0.5rem;
}

#questions table.big {
 font-size: 2rem;
}

table.info td, table.info th {
 font:normal 1.25rem/1.8rem "Trebuchet MS", Arial, Helvetica, sans-serif;
 border:1px solid lightgray;
}


#summary {
 font-size: 1.3rem;
}

#summary li{
 padding: 0.2rem;
}

#summary ul li a::before {
  content: "⬥";
  color: var(--gold);
  padding-right: 0.5rem;
}

#summary ul li a {
  font-weight: bold;
  color:var(--red);
  text-decoration:none;
}

#summary ul li a:hover {
  background-color: var(--bg2);
}



#keywords {
  padding: 0.75rem;
}

#keywords a{
  background-color:var(--bg1);
  font: 1.2rem/1.8rem "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:var(--text);
  text-decoration:none;
}
#keywords a:hover{
  background-color: var(--bg2);
}


/* bottom */
#bottom {
 height: 2rem;
 font: normal 1.2rem/1.6rem "Trebuchet MS", Arial, Helvetica, sans-serif;
 text-align: center;
}


section h2 {
 color: var(--brown);
 font-size: 2rem;
 background: var(--bg1);
 padding: 0.5rem 1.5rem;
 border-top: 1px solid var(--bar);
}

.features {
 display: grid;
 padding: 0.25rem 0.75rem;
}
.feature h3 {
 font-size: 1.5rem;
}
.feature {
 background: var(--bg2);
 padding: 1.5rem;
 margin: 0.25rem 1rem;
 border-radius: 0.8rem;
 box-shadow: 0 0.1rem 0.15rem var(--shadow);
 border: 1px solid var(--bar);
}
.feature p {
 text-align: justify;
 text-indent: 1rem;
}
.feature button {
  margin: 1rem auto;
}


#contact {
 font-size: 1.2rem;
}
#contact textarea {
 width: 100%;
 height: 8rem;
 padding: 0 0.25rem;
 background-color: var(--white);
}
#contact_form button {
 margin: 0 auto;
}


.feature li a::before {
  content: "⯁";
  color: var(--gold);
  padding-right: 0.5rem;
}

.feature li a {
  font-weight: bold;
  color:var(--red);
  text-decoration:none;
}





footer {
 background: var(--bg1);
 padding: 1rem;
 text-align: center;
}

#links {
 display: flex;
 justify-content: space-between;
}
#links ul {
 display: flex;
 width: 100%;
 font-size: 1.2rem;
 padding: 1rem;
}
#links li {
 color: var(--bg2);
 flex: 1;
 text-align: center;
}

#dialog_box {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: var(--bg1);
 padding: 1rem 3rem 1rem 1rem;
 box-shadow: 0 0 10px var(--shadow);
 z-index: 10000;
 min-width: 300px;
 font-size: 1.2rem;
}

#dialog_overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background-color: var(--shadow);
 z-index: 9999;
}

#dialog_close {
 position: absolute;
 top: 10px;
 right: 10px;
 border: none;
 background: transparent;
 font-size: 1.2rem;
 cursor: pointer;
}



#up-button {
 display: none;
 background-color: var(--bg3);
 font-size: 2rem;
 line-height: 4rem;
 width: 4rem;
 height: 4rem;
 text-align: center;
 border-radius: 0.2rem;
 position: fixed;
 bottom: 2rem;
 right: 2rem;
 transition: opacity .5s, visibility .5s;
 opacity: 0.7;
 z-index: 10000;
}
#up-button:hover {
 opacity: 1;
}

#slideout {
 position: fixed;
 top: 100px;
 right: 0;
 padding: 1rem 0;
 line-height: 2rem;
 text-align: center;
 background: var(--bar);
 writing-mode: vertical-rl;
 text-orientation: sideways;
}

@media (max-width: 1000px) {
 #slideout {
  display: none;
 }
}


.tooltip {
 position: absolute;
 background: var(--bg2);
 border: 1px solid var(--bar);
 padding: 0.5rem;
 z-index: 1000;
}

.tooltip button {
 min-width: 2rem;
}

.tooltip dt {
 font-weight: bold;
}
.tooltip dd {
 padding-bottom: 0.25rem;
 margin-left: 1.5rem;
}

[contenteditable="true"] {
  background: var(--white);
}


.fullscreen-button {
  transform: scale(3);
  margin: 10% 45%;
  font-size: 1.5em;
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gray);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray);
  box-shadow: 0 0 10px var(--shadow);
  padding: 1rem;
  overflow: auto;
  max-width: 90%;
  max-height: 90%;
}

.modal-close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  z-index: 1000;
}




.highlightarea {
  position: relative;
  display: inline-block;
  width: 92.5%;
}
.highlightarea-container {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  width: 100%;
}
.highlightarea-highlighter {
  position: absolute;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: gray;
  background-color: var(--white);
}
.highlightarea textarea {
  position: relative;
  background: transparent !important;
  color: transparent;
}
.highlightarea mark {
  line-height: inherit;
  border-radius: 0.2rem;
  box-shadow:inset 0 0 0 1px var(--bg2);
  color: var(--black);
}
.highlightarea mark:nth-of-type(odd) { background-color: var(--bg1); }
.highlightarea mark:nth-of-type(even) { background-color: var(--bg3); }


.handsontable:first-child {
 margin: 0 auto;
}




#symbolarea_editor {
	border: 1px solid var(--bar);
	overflow: auto;
	outline: none;
	min-height: 5rem;
	padding: 0.1rem 0.5rem 0.5rem 0.1rem;
}
#symbolarea_editor img, #symbolarea_menu img {
	vertical-align: middle;
	margin: 0 0.15rem 0.1rem 0.15rem;
	border: 0 none;
  background-color: transparent !important;
}
#symbolarea_menu > div {
	overflow: hidden;
	background: var(--white);
	border-radius: 0.3rem;
	box-shadow: 0 0.1rem 0.5rem var(--shadow);
	display: flex;
	flex-wrap: wrap;
}
#symbolarea_menu a {
	margin: -1px 0 0 -1px;
	border: 1px solid var(--gray);
	padding: 0.2rem;
}



/* PRINT */
@media print {
 #comments {
  display:none;
 }
 #slideout {
  display:none;
 }
 #right {
  display:none;
 }
 #lang_select {
  display:none;
 }
}