body {
    --hue: 270;
    --s-lim: 1.00;
    --l-lim: 1.00;
}

:focus-visible {
    outline: none;
}

.light {
    --div-bgcolor: transparent;
    --root-bgcolor: #ffffff99;
    --page-bgcolor: #ffffff;
    --inb-sel-bgcolor: #ffffff;
    --div-shadow-color: #66666633;
    --ready-bgcolor: #66cc66;
    --ready-hcolor: #44aa44;
    --ready-acolor: #339933;
    --loading-bgcolor: #ff6666;
    --loading-hcolor: #dd5555;
    --loading-acolor: #cc3333;
    --topping-color: #ffffff;
}

.dark {
    --div-bgcolor: transparent;
    --root-bgcolor: #11111199;
    --inb-sel-bgcolor: #22222299;
    --div-shadow-color: #ffffff33;
    --ready-bgcolor: #339933;
    --ready-hcolor: #117711;
    --ready-acolor: #006600;
    --loading-bgcolor: #993333;
    --loading-hcolor: #771111;
    --loading-acolor: #660000;
    --topping-color: #cccccc;
}

.tp {
    background-color:transparent;
}

div#root_div {
    background-color: var(--root-bgcolor);
    box-sizing: border-box;
    min-width: 60%;
    max-width: 100%;
}

div#root_div p {
    text-align: center;
    text-indent: 0;
}

button {
    background-color: var(--button-bgcolor);
    border: none;
    border-radius: 5pt;
    box-shadow: 0 1pt 3pt var(--button-shadow-color);
    box-sizing: border-box;
    font-size: 1em;
    height: 3em;
    transition: all ease-in 0.15s;
}

button:active,
button:active:hover {
    transform: translateY(2pt);
    background-color: var(--button-act-bgcolor);
}

button:hover,
button:focus-visible {
    background-color: var(--button-hover-bgcolor);
}

button.crypt_operation {
    width: 40%;
    margin: auto 3.3%;
}

button.reset {
    width: 100%;
}

button#upload_button,
button#download_output {
    width: 90%;
}

button.selected {
    background-color: var(--inb-sel-bgcolor);
    border-radius: 5pt;
}

button.selected:hover,
button.selected:focus-visible,
button.selected:active {
    background-color: transparent;
}

.input_type {
    border: none;
    border-radius: 5pt;
    box-shadow: none;
    max-width: 50%;
    float: left;
    height: 72pt;
    width: 50%;
}

#root_div button.input_type {
    font-size: calc(var(--font-size, 12pt) * 1.5);
    font-weight: 700;
}

#root_div p,
#root_div h1,
#root_div h2,
#root_div h3 {
    padding: 0;
}

#root_div select {
    background-color: var(--art-bgcolor);
    border: 1pt solid var(--edge-color);
}

button.loading {
    background-color: var(--loading-bgcolor);
    color: var(--topping-color);
}

button.loading:hover,
button.loading:focus-visible {
    background-color: var(--loading-hcolor);
}

button.loading:active {
    transform: none;
    background-color: var(--loading-acolor);
}

button.reading {
    transition: all ease-in 0.33s;
}

button.reading:hover,
button.reading:focus-visible,
button.reading:active {
    background-color: inherit;
}

button.ready {
    background-color: var(--ready-bgcolor);
    color: var(--topping-color);
}

button.ready:hover,
button.ready:focus-visible {
    background-color: var(--ready-hcolor);
}

button.ready:active {
    background-color: var(--ready-acolor);
}

div {
    box-shadow: 0 1pt 4pt var(--div-shadow-color);
    text-align: center;
}

div.pad {
    height: 2em;
    margin-bottom: 2em;
}

*[hidden] {
    display: none;
}

div.left,
form {
    text-align: left;
}

div.np {
    padding: 0;
}

div.ns {
    box-shadow: none;
}

div#root_div div#div_buttons {
    height: 72pt;
    margin-bottom: 1.5em;
}

input {
    transition: all ease-in 0.15s;
}

input#file_chooser {
    height: 2em;
    margin: 10pt;
}

input#password {
    background-color: var(--art-bgcolor);
    border: 1pt solid var(--edge-color);
    border-radius: 5pt;
    font-family: inherit;
    font-size: 1em;
    margin: 0 auto;
    padding: 5pt 10pt;
    width: 90%;
    min-height: unset;
    height: auto;
    box-sizing: content-box;
}

select:hover,
input#password:hover {
    border: 1pt solid hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 70));
    box-shadow: 0 0 3pt hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 70) / .4);
}

select:focus-visible,
input#password:focus-visible {
    box-shadow: 0 0 5pt hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 70) / .4), inset 0 0 2pt #66666633;
    border: 1pt solid hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 70));
}

table {
    width: 90%;
    margin: auto;
}

textarea:hover {
    border: 1pt solid hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 70));;
    box-shadow: 0 0 6pt hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 70) / .4);
}

textarea:focus-visible {
    box-shadow: 0 0 10pt hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 70) / .4), inset 0 0 3pt #66666633;
    border: 1pt solid hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 70));;
}

textarea.areas {
    margin: 0 auto;
    align-self: center;
    height: 10em;
    width: 90%;
}