/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
/* fontawesome */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");

/* create variables */
:root {
    --bg: #1e1e1e;
    --bg-l: #252525;
    --bg-vl: #2b2b2b;
    --acc: #3c3c3c;
    --acc-l: #454545;
    --acc-vl: #808080;
    --acc-vl-rgb: 127, 127, 127;
    --text: #dddddd;
    
    --red: rgb(237, 66, 69);
    --red-rgb: 237, 66, 69;
    --green: rgb(59, 165, 93);
    --green-rgb: 59, 165, 93;
    --yellow: rgb(206, 196, 56);
    --yellow-rgb: 206, 196, 56;
}
/*  
!==============================================================
!        General
!==============================================================
*/
html {
    scroll-behavior: smooth;
    width: 100%;
}
body {
    font-family: 'Montserrat', sans-serif;
    background: var(--bg);
    min-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    color: var(--text);
}
main {
    width: 100vw;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
}
/* normalize margins and paddings */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}
/* states */
.hidden, [hidden] {
    opacity: 0%;
    display: none !important;
}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
code, .code {
    font-family: 'Fira Code', monospace;
    font-size: 13px;
}
.center {
    align-self: center;
}

/*  
!==============================================================
!        Global Styles
!==============================================================
*/
.generic-container {
    background: var(--bg-l);
    border-radius: 4px;
    border: 1px solid var(--acc-l);
    color: var(--text);
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}
.generic-container:hover,
.generic-container:focus {
    border-color: var(--acc-vl);
}
.generic-container.ghost {
    background: transparent;
    border: none;
    transition: background-color 0.2s ease;
}
.generic-container.ghost:hover,
.generic-container.ghost:focus {
    background-color: var(--bg-l);
}
/*! inputs */
.input-general {
    padding: 0.25rem;
}
/*! buttons */
button {
    cursor: pointer;
}
.button-general {
    padding: 0.3rem 0.45rem;
}
.button-general:active {
    background: var(--acc);
    border-color: var(--acc-vl);
}
.button-general.ghost:active {
    background: var(--acc);
}
/*! button sizes */
button.small {
    padding: 0 0.3rem;
    height: 22px;
}

/*! button colors */
/* green */
button.green:hover,
button.green:focus,
.button-green:hover,
.button-green:focus {
    border-color: var(--green);
    color: var(--green);
}
button.green.green:active,
.button-green.button-green:active {
    border-color: var(--green);
    color: var(--green);
    background-color: rgba(var(--green-rgb), 0.2);
}
/* red */
button.red:hover,
button.red:focus,
.button-red:hover,
.button-red:focus {
    border-color: var(--red);
    color: var(--red);
}
button.red.red:active {
    border-color: var(--red);
    color: var(--red);
    background-color: rgba(var(--red-rgb), 0.2);
}
/*! opacity animation */
.opacity-anim {
    transition: 0.2s opacity ease;
}
/*! plus icons */
.plus-icon {
    background: transparent;
    border: none;
    position: relative;
}
.plus-icon::before {
    content: '';
    width: 100%;
    position: absolute;
    border-bottom: 1px solid var(--acc-vl);
    left: 0;
    top: 50%;
}
.plus-icon::after {
    content: '';
    width: 100%;
    position: absolute;
    border-bottom: 1px solid var(--acc-vl);
    left: 0;
    top: 50%;
    transform: rotate(90deg);
}
.plus-icon.rotated::before {
    transform: rotate(45deg);
}
.plus-icon.rotated::after {
    transform: rotate(-45deg);
}
/*  
!==============================================================
!        Uploads Section
!==============================================================
*/
section.uploads {
    width: 100%;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}
.uploads-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--acc-vl);
    padding: 1rem;
    padding-top: 0.4rem;
    border-radius: 6px;
}
/*! upload buttons */
.uploads .content {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}
.uploads .content > div {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.uploads .content > div > div {
    margin-top: 0.8rem;
    width: 50%;
}
.uploads .content label {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.3rem;
}
.uploads .content label span {
    opacity: 40%;
    font-size: 80%;
}
.uploads .content input {
    cursor: pointer;
    width: 100%;
}
/*! options */
.uploads .supported-types {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.uploads .supported-types h4 {
    font-weight: 500;
    margin-bottom: 0.4rem;
}
.uploads .supported-types ul {
    margin-left: 1.3rem;
}
.uploads .supported-types li code {
    position: relative;
    left: -0.3rem;
}
/*! buttons */
.uploads .buttons {
    margin-top: 1rem;
    padding-right: 1rem;
    display: flex;
    justify-content: space-between;
}
/*
!==============================================================
!        Keyboard shortcuts
!==============================================================
*/
section.shortcuts {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.shortcuts > table td {
    width: 50%;
}
.shortcuts > table tr td:first-of-type {
    text-align: end;
}
kbd {
    background-color: var(--bg-l);
    border-radius: 3px;
    border: 1px solid var(--acc);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .2) inset;
    color: var(--text);
    display: inline-block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    padding: 4px 4px 2px;
    white-space: nowrap;
    margin: 0 3px;
}
/*
!==============================================================
!        Main table
!==============================================================
*/
section.results {
    margin-top: 2rem;
    margin-bottom: 4rem;
    display: flex;
    justify-content: center;
    padding: 0 2rem;
}
.results-table {
    border-collapse: collapse;
    border: 2px solid var(--acc-l);
}
.results-table th {
    background: var(--bg-l);
    padding: 0.35rem 0.5rem;
}
.results-table .entry-row {
    height: max-content;
    border: 1px solid var(--acc);
    border-left-width: 2px;
    border-right-width: 2px;
}
.results-table .entry-row:focus-within {
    background: #222;
}
/*! numbers */
.results-table .entry-num {
    /* display: flex; */
    padding: 0.5rem;
    text-align: center;
    /* justify-content: center; */
}
/*! "original" column */
.results-table .entry-original {
    padding: 0.2rem;
    min-width: 300px;
}
.results-table .entry-original span {
    display: block;
}
.results-table .entry-original code {
    font-size: x-small;
    color: #aaa;
    display: block;
    margin-top: 0.1rem;
}
/*! input column */
.results-table .entry-input {
    padding: 0.3rem 0.4rem 0.3rem 0;
    width: 50%;
}
.results-table .entry-input textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--acc);
    border-radius: 4px;
    padding: 0.1rem 0.2rem;
    min-width: 300px;
    width: 100%;
    background: rgba(255,255,255,0.02);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: middle;
    resize: vertical;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.results-table .entry-input textarea.filled,
.results-table .entry-input textarea.marked-filled {
    border-color: var(--green);
    background-color: rgba(var(--green-rgb), 0.04);
}
/*! button column */
.results-table .entry-buttons {
    padding: 0 0.4rem 0 0;
}
.results-table .entry-buttons .mark-as-filled {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--green);
    cursor: pointer;
}
.results-table .entry-buttons .mark-as-filled.active {
    border-color: var(--green);
    background-color: rgba(var(--green-rgb), 0.2);
    color: var(--text);
}
.results-table .entry-buttons .mark-as-filled.active:active {
    background-color: rgba(var(--green-rgb), 0.4);
}
/*! gap row */
.results-table .gap-row {
    border-top: 1px solid var(--acc);
    height: 10px;
}
/*! comment row */
.results-table .comment-row {
    border-top: 1px solid var(--acc);
    font-size: small;
}
.results-table .comment-row th {
    padding: 0.25rem;
}
/*
!==============================================================
!        Toolbar
!==============================================================
*/
.toolbar {
    position: fixed;
    top: 10px;
    left: 10px;
    border: 1px solid var(--acc-vl);
    background: var(--bg-l);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
}
.toolbar > hr {
    margin: 0.6rem 0;
    border: none;
    border-top: 1px solid var(--acc);
}
/*! goto */
.toolbar .goto input {
    width: 50px;
    height: 22px;
}
/*! stats */
.toolbar .stats {
    min-width: max-content;
    max-width: 150px;
}
.toolbar .stats table {
    width: 100%;
}
.toolbar .stats td.label {
    width: 70px;
}
.toolbar .stats td.data {
    display: flex;
    justify-content: space-between;
}
.toolbar .stats td.data span {
    margin-left: 1rem;
}
/*! download buttons */
.downloads {
    display: flex;
    position: relative;
    width: max-content;
}
.downloads > button {
    height: 24px;
}
.downloads #download-json {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 3;
}
.downloads #dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    position: relative;
    left: -1px;
}
.downloads #dropdown-toggle:hover,
.downloads #dropdown-toggle:focus,
.downloads #dropdown-toggle:active {
    z-index: 4;
}
.downloads .dropdown-menu {
    display: none; /* changed later */
    flex-direction: column;
    position: absolute;
    top: 28px;
    right: 0;
    border: 1px solid var(--acc-vl);
    border-radius: 4px;
    background: var(--bg-l);
}
.downloads .dropdown-menu.active {
    display: flex;
}
.downloads .dropdown-menu > button {
    background: none;
    border: none;
    color: var(--text);
    padding: 0.3rem 0.5rem;
    margin: 0.2rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.downloads .dropdown-menu > button:hover,
.downloads .dropdown-menu > button:focus {
    background: rgba(255,255,255,0.05);
}
.downloads .dropdown-menu > button:active {
    background: rgba(255,255,255,0.15);
}
/*
!==============================================================
!        Darkboxes
!==============================================================
*/
.darkbox-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}
.darkbox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--acc-vl);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    width: max-content;
}
.darkbox > .close,
.darkbox > .close-self {
    width: 16px;
    height: 16px;
    align-self: flex-end;
}
.darkbox > div {
    margin: 0.75rem 0.5rem;
    display: flex;
}
.darkbox > hr {
    border-color: var(--acc-vl);
}
.darkbox .form {
    display: flex;
    flex-direction: column;
}
.form .formrow {
    display: flex;
    justify-content: space-between;
    min-width: 300px;
}
.form.wide .formrow {
    min-width: 30rem;
}
.formrow:not(:first-of-type) {
    margin-top: 0.5rem;
}
.darkbox span {
    font-size: 0.9rem;
}
/*! select */
.formrow select {
    padding: 0.1rem 0.25rem;
    color: #ccc;
    font-family: monospace;
    height: 24px;
}
/*! checkbox */
.formrow .checkbox-label {
    width: 22px;
    height: 22px;
    border-width: 2px;
}
.formrow input[type="checkbox"]:checked + .checkbox-label {
    background: var(--acc-l);
    position: relative;
}
.formrow input[type="checkbox"]:checked + .checkbox-label::after {
    content: '';
    border: 1px solid #ccc;
    border-width: 0 2px 2px 0;
    position: absolute;
    left: 6px;
    width: 7px;
    height: 14px;
    transform: rotate(45deg);
}
/*! text */
input[type="text"] {
    padding: 0 0.2rem;
    width: 20ch;
    font-family: monospace;
    height: 24px;
    color: #ccc;
}
/*! number */
.custom-number-input {
    display: flex;
    position: relative;
    font-family: monospace;
}
.custom-number-input > * {
    height: 24px;
}
.custom-number-input > *:hover,
.custom-number-input > *:focus {
    z-index: 2;
}
.custom-number-input input {
    border-radius: 0;
    width: 5ch;
    position: relative;
    left: 1px;
    text-align: center;
}
.custom-number-input button {
    width: 2.5ch;
}
.custom-number-input button.minus {
    border-radius: 4px 0 0 4px;
    position: relative;
    left: 2px;
}
.custom-number-input button.plus {
    border-radius: 0 4px 4px 0;
}
/*! ouptut buttons */
.output-buttons {
    display: grid;
    gap: 5px;
    flex-wrap: wrap;
}
/*
!==============================================================
!        Quick Translations Menu
!==============================================================
*/
#add-QT {
    display: flex;
    align-items: center;
    gap: 10px;
}
#add-QT .plus-icon {
    width: 28px;
    height: 28px;
}
#add-QT > span:not([class]) {
    font-size: 1rem;
    color: #aaa;
}
.darkbox h2,
.darkbox h3 {
    font-weight: normal;
    align-self: center;
}