:root {
  --lightAccent000: #ffffff;
  --lightAccent100: #fafafa;
  --lightAccent200: #f5f5f5;
  --lightAccent300: #f0f0f0;
  --lightAccent400: #dedede;

  --blueAccent50: #e2f1ff;
  --blueAccent100: #b9dcff;
  --blueAccent500: #008eff;
  --blueAccent600: #0080ff;
  --blueAccent700: #146dea;
}

::selection {
  background-color: #b9dcff90;
}

html,
body {
  scroll-behavior: smooth;
  user-select: none;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  background-color: var(--lightAccent100);
  animation-name: initialFadeIn;
  animation-duration: 1s;
}

h1 {
  font-size: 1.75em;
  margin-top: 5px;
  font-weight: normal;
}

h2,
h3,
h4,
h5,
h6 {
  margin-top: 5px;
  font-weight: normal;
}

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

a:hover {
  text-decoration-line: underline;
}

img {
  -webkit-user-drag: none;
}

input[type="text"],
input[type="url"],
input[type="number"] {
  background-color: var(--lightAccent000);
  border-color: var(--lightAccent400);
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  height: fit-content;
  padding: 10px;
}

input[type="number"]:focus,
input[type="number"]:hover,
input[type="text"]:focus,
input[type="text"]:hover,
input[type="url"]:focus,
input[type="url"]:hover,
select:focus,
select:hover {
  outline-style: none;
  border-color: var(--blueAccent500);
}

input[type="text"]::placeholder,
input[type="url"]::placeholder,
input[type="number"]::placeholder {
  filter: opacity(50%);
}

summary {
  padding: 10px;
  border-radius: 5px;
  border-style: solid;
  border-color: var(--lightAccent400);
  border-width: 1px;
  margin-bottom: 5px;
}

summary:hover {
  background-color: var(--lightAccent200);
}

summary:active {
  border-color: var(--blueAccent500);
}

select {
  padding: 10px;
  border-radius: 5px;
  border-style: solid;
  border-color: var(--lightAccent400);
}

progress {
  width: 100%;
  appearance: none;
}

progress::-webkit-progress-bar {
  background-color: var(--lightAccent100);
}

progress::-webkit-progress-value {
  background-color: var(--blueAccent500);
}

textarea {
  background-color: var(--lightAccent000);
}

img.intermediateLoading {
  animation-name: spinProgressIndicator;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

#snackbar {
  animation-name: initialFadeIn;
  animation-duration: 0.5s;
  display: none;
  box-shadow: 1px 1px 10px 1px var(--lightAccent400);
  border-radius: 5px;
  padding: 10px;
  background-color: var(--blueAccent700);
  color: var(--lightAccent000);
  z-index: 10;
  position: fixed;
  margin-top: 10px;
  margin-left: 40%;
}

#appMenu {
  width: 100%;
  position: fixed;
  z-index: 1;
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: var(--lightAccent400);
  background-color: var(--lightAccent100);
}

button.menu {
  padding: 10px;
  cursor: pointer;
  background-color: transparent;
  border-style: solid;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: 1px;
  border-color: transparent;
}

button.menu:hover {
  background-color: var(--blueAccent50);
  border-color: var(--blueAccent500);
}

button.menu:disabled,
button.menu:disabled:hover {
  opacity: 25%;
  cursor: not-allowed;
  background-color: transparent;
  border-color: transparent;
}

div.menu {
  border-style: solid;
  border-color: var(--lightAccent400);
  border-width: 1px;
  width: 22%;
  background-color: var(--lightAccent000);
  position: fixed;
  z-index: 1;
}

img.menu {
  margin-bottom: -2px;
  width: 13px;
}

button.menuDropdown {
  padding: 10px;
  cursor: pointer;
  background-color: transparent;
  border-style: solid;
  border-color: var(--lightAccent100);
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 1px;
  width: 100%;
  text-align: left;
}

button.menuDropdown:hover {
  background-color: var(--lightAccent200);
  border-color: var(--lightAccent200);
}

button.menuDropdown:active {
  background-color: var(--lightAccent300);
}

button.menuDropdown:disabled {
  cursor: not-allowed;
}

button.menuDropdown:disabled:hover {
  background-color: transparent;
  border-color: var(--lightAccent100);
}

hr.menuDropdown {
  margin-top: 0;
  margin-bottom: 0;
  border-style: solid;
  border-color: var(--lightAccent400);
}

span.menuDropdown {
  margin-left: 1%;
  font-size: 10px;
}

button.navButton {
  overflow: hidden;
  padding: 10px;
  text-overflow: ellipsis;
  background-color: var(--lightAccent000);
  border-radius: 5px;
  border-style: solid;
  height: fit-content;
  width: 37px;
  border-width: 1px;
  border-color: var(--lightAccent400);
}

button.navButton:hover {
  background-color: var(--lightAccent200);
}

button.navButton:active {
  border-color: var(--blueAccent500);
}

.navSeparation {
  margin-right: 10px;
}

td.appSection {
  padding: 10px;
  background-color: var(--lightAccent100);
  border-radius: 5px;
  width: 50%;
  height: 100%;
}

button.appSection {
  text-align: left;
  background-color: transparent;
  border-style: solid;
  border-color: var(--lightAccent400);
  border-width: 1px;
  margin-bottom: 5px;
  padding: 10px;
  width: 100%;
  border-radius: 5px;
}

button.appSection:hover {
  background-color: var(--lightAccent200);

  img.appSection {
    filter: grayscale(0%);
  }
}

button.appSection:active {
  background-color: var(--lightAccent300);
  border-color: var(--blueAccent500);
}

img.appSection {
  margin-right: 10px;
  width: 32px;
  filter: grayscale(100%);
}

#nothingSavedIndicator {
  margin-top: 5px;
  background-color: var(--lightAccent200);
  padding: 10px;
  border-radius: 5px;
  border-color: var(--lightAccent400);
  border-style: solid;
  border-width: 1px;
}

div.savedNote {
  padding: 10px;
  width: 95%;
  display: flex;
  margin-bottom: 5px;
  background-color: var(--lightAccent200);
  border-color: var(--lightAccent400);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

div.savedNote:hover {
  background-color: var(--lightAccent300);
}

span.savedNoteTitle {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

div.savedNoteTitle {
  display: block;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10px;
}

div.savedNotePreview {
  padding: 15px;
  width: 150px;
  height: 100px;
  background-color: var(--lightAccent000);
  border-radius: 5px;
  margin-bottom: 10px;
  border-style: solid;
  border-color: var(--lightAccent400);
  border-width: 1px;
}

span.savedNotePreview {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

span.buttonHeading {
  font-size: 16px;
}

.helperText {
  padding-top: 7px;
  opacity: 50%;
}

h4.helperText {
  font-weight: normal;
}

img.reducedIntensity {
  opacity: 50%;
}

div.dialogOverlay {
  box-shadow: 1px 1px 10px 1px var(--lightAccent400);
  border-color: var(--lightAccent400);
  border-style: solid;
  border-width: 1px;
  padding: 15px;
  position: fixed;
  background-color: var(--lightAccent000);
  z-index: 2;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 2%;
  width: 50%;
  height: fit-content;
  border-radius: 5px;
  animation-name: initialFadeIn;
  animation-duration: 0.25s;
}

h2.dialogOverlay {
  padding-left: 5px;
  padding-top: 8px;
}

button.primaryButton {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: fit-content;
  padding: 10px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--blueAccent500);
  background-color: var(--blueAccent500);
  color: var(--lightAccent000);
}

button.primaryButton:hover {
  background-color: var(--blueAccent600);
  border-color: var(--blueAccent600);
}

button.primaryButton:active {
  background-color: var(--blueAccent700);
  border-color: var(--lightAccent400);
}

button.dialogOverlay:disabled,
button.primaryButton:disabled {
  cursor: not-allowed;
}

img.primaryButton {
  filter: invert(100%);
  opacity: 75%;
}

button.dialogOverlay {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: fit-content;
  padding: 10px;
  background-color: transparent;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--lightAccent400);
}

button.dialogOverlay:hover {
  background-color: var(--lightAccent200);
}

button.dialogOverlay:active {
  border-color: var(--blueAccent500);
}

a.hyperlinkButton {
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--blueAccent500);
}

a.hyperlinkButton:hover {
  background-color: #008eff10;
  text-decoration: none;
}

span.copyOnClick:hover {
  cursor: pointer;
  background-color: var(--blueAccent50);
}

span.copyOnClick:active {
  background-color: var(--blueAccent100);
}

#mainEditor {
  background-color: var(--lightAccent000);
  height: 60%;
  overflow: auto;
  word-wrap: break-word;
  border-color: var(--lightAccent400);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

#mainEditor:active {
  border-color: var(--blueAccent500);
}

input.pageStyle {
  width: 75%;
}

select.pageStyle {
  width: 100%;
}

nav.statusBar {
  border-style: solid;
  border-width: 1px;
  font-size: 12px;
  border-color: var(--lightAccent400);
  margin-top: 5px;
  border-radius: 5px;
  background-color: var(--lightAccent200);
  padding: 5px;
}

div.saveBeforeClosing {
  left: 0;
  top: 0;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
}

h1.saveBeforeClosing {
  line-height: normal;
  text-align: center;
}

h3.saveBeforeClosing {
  line-height: 25px;
  text-align: center;
}

#dialogFocusBackground {
  left: 0;
  top: 0;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.75);
}

#noteName:focus {
  width: 85%;
}

#noteHTML {
  margin-bottom: 5px;
  width: 100%;
  height: 55%;
}

#viewingHistoryTable {
  width: 100%;
  background-color: var(--lightAccent200);
  border-color: var(--lightAccent400);
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  border-spacing: 10px;
}

button.warningBanner {
  background-color: transparent;
  border-style: none;
  cursor: pointer;
}

div.symbolContainer {
  width: 50px;
  height: 50px;
  border-width: 1px;
  border-style: solid;
  background-color: var(--lightAccent000);
  border-color: var(--lightAccent300);
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
}

div.symbolContainer:hover {
  background-color: var(--lightAccent200);
  transform: scale(150%);
}

#mobileSizeIndication {
  backdrop-filter: blur(10px);
  display: none;
}

#embeddedCode {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  width: 95%;
  height: 100%;
  padding: 5px;
  border-radius: 5px;
  border-style: solid;
  resize: none;
  word-wrap: normal;
  border-color: var(--lightAccent400);
}

#embeddedCode:focus {
  outline: none;
  border-color: var(--blueAccent500);
}

#symbolsDisplay {
  height: 250px;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

@media screen and (max-width: 601px) {
  #mobileSizeIndication {
    display: initial;
  }
}

@keyframes initialFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes spinProgressIndicator {
  from {
    rotate: 0;
  }

  to {
    rotate: 360deg;
  }
}