:root {
  --codemirror-height: 100vh;
}

body {
  font-family: "Nunito Sans";
  font-weight: 400;
  margin: 0;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#titleimg {
  margin-left: 2em;
  margin-right: 2em;
  margin-top: 1ex;
  margin-bottom: 1ex;
}

sidebar p {
  font-size: 11pt;
}

#editor-pane {
  flex: 1 1 70%;
  min-width: 70%;
}

button#reparse {
  border: 0.5ex solid green;
  border-radius: 1ex;
  background-color: green;
  color: white;
}

div.warning {
  border: 1ex solid red;
  border-radius: 1rem;
  width: 75%;
  margin-top: 1ex;
  margin-left: auto;
  margin-right: auto;
  padding: 3em;
}

.cm-content {
  /* font-family: "Source Code Pro", monospace; */
  /* font-family: "Operator Mono Book", monospace; */
  /* font-family: "Crimson Pro", serif; */
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  /* height: 100%; */
  /* height: 100vh; */
}

.cm-editor {
  height: var(--codemirror-height);
}

.cm-scroller {
  overflow: auto;
}

/*style for source labels, sans color*/
.cm-source-label {
  border-radius: 0.5ex 0 0 0.5ex;
}

.cm-source-label::before {
  content: "　"; /* Ideographic full-pitch space*/
}

.cm-source-label:hover {
  box-shadow: inset 0 0 0 0.25ex rgba(255, 255, 255, 0.8);
}

.cm-panel {
  border-bottom: 1px solid lightgray;
}

.cm-line {
  position: relative;
}

.cm-line:not(
    :has(
        .serifu-page-token,
        .serifu-panel-token,
        .serifu-text-origin,
        .serifu-sfx-line,
        .serifu-sfx-translation,
        .serifu-sfx-source,
        .serifu-note
      )
  ) {
  padding-left: 8.6rem;
}

/* Custom token highlighter classes */

.serifu-text-content {
  color: black;
}

.serifu-page-token {
  border-radius: 0 0 0.75ex 0;
  border-width: 2px;
  border-style: none solid solid none;
  border-color: indianred;
  padding-right: 0.5ex;
  font-weight: bold;
  font-style: italic;
  color: black;
  min-width: 6rem;
  display: inline-block;
  text-align: right;
  background-color: rgba(255, 228, 225, 0.7); /* mistyRose	*/
}

.serifu-panel-token {
  font-weight: bold;
  color: purple;
  border-radius: 0 0 0.75ex 0;
  border-width: 2px;
  border-style: none solid solid none;
  border-color: cadetBlue;
  padding-right: 0.5ex;
  min-width: 6rem;
  display: inline-block;
  text-align: right;
  background-color: rgba(220, 210, 230, 0.4); /* aliceBlue */
}

.serifu-sfx-line {
  font-weight: bold;
  font-style: italic;
  color: darkslategray;
}

.serifu-sfx-translation {
  font-weight: bold;
  font-style: italic;
  color: darkslategray;
}

.serifu-sfx-source {
  fontstyle: italic;
  color: lightslategray;
}

.serifu-text-origin {
  background-color: rgba(200, 200, 200, 0.25);
  border-color: rgb(255, 255, 255, 0);
  color: black;
  padding-left: 0.5ex;
  padding-right: 0.5ex;
  border-radius: 0 0.5ex 0.5ex 0;
  min-width: 7rem;
  text-align: right;
  margin: auto;
  display: inline-block;
}

.serifu-text-style {
  color: mediumvioletred;
}

.serifu-note {
  background-color: papayawhip;
  font-style: italic;
}

.serifu-italic {
  font-style: italic;
}

.serifu-bold {
  font-weight: bold;
}

.serifu-bold-italic {
  font-style: italic;
  font-weight: bold;
}

.serifu-block-literal {
  font-family: "Source Code Pro", monospace;
  color: black;
  background-color: mintcream;
}

modal-background {
  z-index: 3;
  background-image: url("modalstripes.svg");
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  display: flex;
  /* display: none; */
  justify-content: space-around;
  align-items: center;
}

modal {
  text-align: center;
  position: fixed;
  background-color: slateblue;
  border-radius: 0.7ex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

modal#saveslotsmodal {
  min-width: 30rem;
}

modal#loadconfirmmodal {
  min-width: 15rem;
  max-width: 15rem;
  display: none;
}

modal#saveconfirmmodal {
  min-width: 13rem;
  max-width: 13rem;
  /* display: none; */
}

modal div.modaltitle {
  font-weight: bold;
  font-variant-caps: small-caps;
  color: white;
  flex: 3 3 100%;
}

modal div.slot {
  background-color: white;
  padding: 0.5ex;
  border: 0.5ex solid slateblue;
  border-radius: 0.9ex;
  text-align: center;
  flex: 0 1 30%;
}

div.modalcontrols {
  margin: 1ex;
}

modal div.msg {
  background-color: white;
  padding: 1ex;
  border: 0.5ex solid slateblue;
  border-radius: 0.9ex;
  text-align: left;
  flex: 0 1 100%;
}

div#saveslots {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

div#saveslots .slot {
  padding-left: 0.5ex;
  margin: 0.125rem;
  color: black;
  background-color: white;
  border: 2px solid darkcyan;
  border-radius: 0.5ex;
  flex: 0 1 30%;
}

div#saveslots .slot-active {
  padding-left: 0.5ex;
  margin: 0.125rem;
  color: white;
  background-color: darkcyan;
  border: 2px solid darkcyan;
  border-radius: 0.5ex;
  flex: 0 1 30%;
}

div#saveslots .slot span {
  padding-left: 0.5rem;
}
div#saveslots .slot-active span {
  padding-left: 0.5rem;
}

sidebar-left {
  font-size: small;
  position: sticky;
  top: 0;
  height: 100%;
  background-color: whitesmoke;
  flex: 0 0 10em;
  padding-left: 0.5ex;
  padding-right: 0.5ex;
  border: 1px solid lightgray;
  border-radius: 0.5ex 0 0 0.5ex;
}

docname {
  font-weight: bold;
  font-size: small;
  background-color: lavender;
  text-align: center;
  display: block;
  width: 100%;
}

sidebar-right {
  position: sticky;
  top: 2rem;
  height: calc(100vh - 4rem);
  max-height: calc(100vh - 4rem);
  background-color: whitesmoke;
  flex: 0 0 8em;
  padding-left: 0.5ex;
  padding-right: 0.5ex;
  border: 1px solid lightgray;
  border-radius: 0 0.5ex 0.5ex 0;
  overflow-y: scroll;
  -webkit-overflow-y: scroll;
}

/* hack to make minimap scrollbar appear properly*/
sidebar-right::-webkit-scrollbar {
  -webkit-appearance: none;
}

sidebar-right::-webkit-scrollbar:vertical {
  width: 11px;
}

sidebar-right::-webkit-scrollbar:horizontal {
  height: 11px;
}

sidebar-right::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid whitesmoke; /* should match background, can't be transparent */
  background-color: rgba(0, 0, 0, 0.5);
}

sidebar-right::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 8px;
}

section {
  border-top: 1px dotted lightgray;
  padding: 0.5ex;
}

section#charbuttons {
  display: flex;
  flex-wrap: wrap;
}

section#charbuttons button {
  flex: 4 2 auto;
  width: 3em;
}

section#sourcelist ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

section#sourcelist li {
  font-size: small;
  display: inline-block;
  color: white;
  background-color: darkmagenta;
  padding-left: 0.5ex;
  padding-right: 0.5ex;
  border-left: 2px solid darkmagenta;
  border-right: 2px solid darkmagenta;
  border-radius: 0.5ex;
  margin: 0.1rem;
}

section#stylelist ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

section#stylelist li {
  font-size: small;
  display: inline-block;
  color: white;
  background-color: mediumvioletred;
  padding-left: 0.5ex;
  padding-right: 0.5ex;
  border-left: 2px solid mediumvioletred;
  border-right: 2px solid mediumvioletred;
  border-radius: 0.5ex;
  margin: 0.1rem;
}

.minimap {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}

.page-spacer {
  border-radius: 0.5ex;
  padding: 0.25ex;
  margin-top: 0.5ex;
  min-height: 4.5em;
  min-width: 45%;
  max-height: 4.5em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.pageframe {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 48%;
}

.pagenumber {
  background: gray;
  border-radius: 0.5ex 0.5ex 0 0;
  color: white;
  display: block;
  font-size: small;
}

.page {
  border: 2px solid gray;
  border-radius: 0 0 0.5ex 0.5ex;
  /* padding: 0.25ex; */
  margin-bottom: 0.5ex;
  min-height: 4.5em;
  max-height: 4.5em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  overflow: hidden;
}

.spreadframe {
  margin: 0;
  padding: 0;
  text-align: center;
  min-width: 100%;
}

.spread {
  border: 2px solid gray;
  border-radius: 0 0 0.5ex 0.5ex;
  /* width: 7.75em; */
  /* padding: 0.25ex; */
  margin-bottom: 0.5ex;
  min-height: 4.5em;
  max-height: 4.5em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  overflow: hidden;
}

.panel {
  flex: 1 3 35%;
  margin: 1px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  border: 1.5px solid black;
  border-radius: 0.5ex;
}

.line {
  flex: 1 3 35%;
  margin: 1px;
  max-width: 4ex;
  max-height: 0.5ex;
  background-color: gray;
  border: 1px solid black;
  border-right: 1ex solid turquoise;
  border-radius: 0.3ex;
}

.line::before {
  border-right: 1em solid skyblue;
}

.sfx {
  margin: 0.25ex;
  padding: 0.25ex;
  min-width: 1ex;
  max-height: 1ex;
  background-color: color(srgb 1 0.41 0);
  border: 2px magenta;
  border-radius: 0.7ex;
}

/* line::before {
  content: "💬";
}

sfx::before {
  content: "💥";
} */