:root {
  --background-color: rgb(26, 26, 26);
  --second-background-color: rgb(182, 182, 182);
  --main-color: white;
  --accent-color: rgb(5, 2, 182);
  --second-accent-color: rgb(124, 171, 207);
  --second-accent-color-half: rgba(124, 171, 207, 0.5);
  --warning-color: red;
  --warning-color-half: rgba(255, 0, 0, 0.5);
  --header-height: 50px;
  --main-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: var(--background-color);
  color: var(--main-color);
  font-family: var(--main-font);
}
body button,
body input {
  font-family: var(--main-font);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1;
  font-size: 0;
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
  background-color: var(--accent-color);
  overflow-x: auto;
}

.header button {
  padding: 0 20px;
  margin: 0;
  border: none;
  outline: none;
  border-bottom: 2px solid transparent;
  border-top: 4px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  background-color: var(--second-background-color);
  color: var(--accent-color);
  transition: 50ms linear;
}

.header button:hover,
.header button:focus,
.header button.selected {
  border-bottom-color: var(--accent-color);
  opacity: 0.8;
}

.header button:active {
  border-bottom: 4px solid var(--accent-color);
}

.content {
  position: fixed;
  left: 0;
  width: 100%;
  height: calc(100% - var(--header-height));
  top: var(--header-height);
}

.content > * {
  width: 100%;
  height: 100%;
}

.citationOptionsPage,
.arrestOptionsPage,
.configPage,
.licenseOptionsPage {
  width: 100%;
  height: calc(100% - var(--header-height));
  background-color: var(--background-color);
  position: fixed;
  top: var(--header-height);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px;
  width: calc(100% - 40px);
}

.citationOptionsPage .options,
.arrestOptionsPage .options,
.licenseOptionsPage .options,
.configPage .options {
  font-size: 20px;
  font-weight: 600;
  overflow-y: auto;
  padding-bottom: 20px;
  padding-right: 10px;
  height: calc(100% - 20px - 20px);
}

.citationOptionsPage .options summary,
.arrestOptionsPage .options summary {
  cursor: pointer;
  margin-top: 5px;
  margin-bottom: 5px;
  outline: none;
}

.citationOptionsPage .options summary:focus,
.arrestOptionsPage .options summary:focus,
.citationOptionsPage .options summary::marker,
.arrestOptionsPage .options summary::marker {
  color: var(--second-accent-color);
}

.citationOptionsPage .options details button,
.arrestOptionsPage .options details button,
.licenseOptionsPage .options button,
.configPage .options button {
  font-size: 16px;
  font-weight: 400;
  font-family: monospace;
  padding: 5px;
  border: 2px solid var(--second-accent-color);
  color: var(--main-color);
  outline: none;
  cursor: pointer;
  transition: 50ms linear;
  background-color: transparent;
  width: calc(100% - 4px);
  margin: 2px;
  text-align: left;
}

.citationOptionsPage .options details button:focus,
.arrestOptionsPage .options details button:focus,
.licenseOptionsPage .options button:focus,
.citationOptionsPage .options details button:hover,
.arrestOptionsPage .options details button:hover,
.licenseOptionsPage .options button:hover,
.configPage .options button:hover,
.configPage .options button:focus {
  background-color: var(--second-accent-color-half);
}

.citationOptionsPage .result,
.arrestOptionsPage .result,
.licenseOptionsPage .result,
.configPage .result {
  border: 2px solid var(--second-accent-color-half);
  height: calc(100% - 40px);
}

.citationOptionsPage .result .title,
.licenseOptionsPage .result .title,
.arrestOptionsPage .result .title {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 10px;
}

.citationOptionsPage .result button,
.arrestOptionsPage .result button,
.licenseOptionsPage .result button,
.configPage .result button {
  font-size: 16px;
  font-weight: 400;
  font-family: monospace;
  padding: 5px;
  border: 2px solid var(--second-accent-color);
  color: var(--main-color);
  outline: none;
  cursor: pointer;
  transition: 50ms linear;
  background-color: transparent;
  margin: 2px;
  text-align: left;
}

.configPage .result button {
  width: calc(100% - 4px);
  margin-bottom: 10px;
}

.citationOptionsPage .remove,
.licenseOptionsPage .remove,
.arrestOptionsPage .remove {
  /* ? tf why would I need that important thing */
  border-color: var(--warning-color) !important;
}

.citationOptionsPage .result button:disabled,
.arrestOptionsPage .result button:disabled,
.licenseOptionsPage .result button:disabled,
.configPage .result button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.citationOptionsPage .result .submit:not(:disabled):hover,
.arrestOptionsPage .result .submit:not(:disabled):hover,
.licenseOptionsPage .result .submit:not(:disabled):hover,
.citationOptionsPage .result .submit:not(:disabled):focus,
.arrestOptionsPage .result .submit:not(:disabled):focus,
.licenseOptionsPage .result .submit:not(:disabled):focus,
.configPage .result button:not(:disabled):hover,
.configPage .result button:not(:disabled):focus {
  background-color: var(--second-accent-color-half);
}

.citationOptionsPage .remove:not(:disabled):hover,
.arrestOptionsPage .remove:not(:disabled):hover,
.licenseOptionsPage .remove:not(:disabled):hover,
.citationOptionsPage .remove:not(:disabled):focus,
.licenseOptionsPage .remove:not(:disabled):focus,
.arrestOptionsPage .remove:not(:disabled):focus {
  background-color: var(--warning-color-half);
}

.citationOptionsPage .result label,
.arrestOptionsPage .result label,
.licenseOptionsPage .result label,
.configPage .result label {
  font-size: 20px;
  font-weight: 600;
  margin-left: 5px;
  margin-bottom: 10px;
}

.citationOptionsPage .result input,
.arrestOptionsPage .result input,
.licenseOptionsPage .result input,
.configPage .result input {
  height: auto;
  width: calc(100% - 10px - 4px - 10px);
  font-size: 20px;
  font-weight: 600;
  padding: 5px;
  margin: 5px;
  border: 2px solid transparent;
  background-color: var(--second-background-color);
  color: var(--accent-color);
  outline: none;
  transition: 50ms linear;
}

.citationOptionsPage .addGroupBtn,
.arrestOptionsPage .addGroupBtn {
  display: block;
  font-size: 16px;
  font-weight: 400;
  font-family: monospace;
  padding: 5px;
  border: 2px solid var(--second-accent-color);
  color: var(--main-color);
  outline: none;
  cursor: pointer;
  transition: 50ms linear;
  background-color: transparent;
  width: calc(100% - 4px - 10px);
  text-align: left;
}

.citationOptionsPage .addGroupBtn:hover,
.arrestOptionsPage .addGroupBtn:hover,
.citationOptionsPage .addGroupBtn:focus,
.arrestOptionsPage .addGroupBtn:focus {
  background-color: var(--second-accent-color-half);
}

.configPage #docsLink {
  color: var(--second-accent-color);
  font-size: 16px;
  font-weight: 400;
  font-family: monospace;
  margin: 2px;
}

.licenseOptionsPage .options .addGroupBtn {
  margin-bottom: 20px;
}

.overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
}

.overlay .EPCLink {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: var(--second-accent-color);
  font-size: 16px;
  font-weight: 400;
  font-family: monospace;
  padding: 2px;
  pointer-events: all;
  background-color: var(--background-color);
}

.pluginsPage .informationLabel .value {
  font-size: 16px;
  font-family: monospace;
  font-weight: 400;
}

.pluginsPage .informationLabel .key {
  position: relative;
}

.pluginsPage .title {
  font-size: 32px;
  font-weight: 800;
  margin: 20px;
}

/* overwrite */
.hidden {
  display: none;
  visibility: hidden;
}
