body {
  /* remove margins and scroll bars */
  margin: 0;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
}

.splashScreenBlock {
  position: fixed;
  height: 45em;
  width: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  box-shadow: 0 0 2em 0.5em rgb(20, 20, 20);
  z-index: 1000;
  min-width: 67em;
  max-width: 78.2em;
}

.splashScreenImage {
  position: relative;
  height: 66%;
  width: 100%;
  background-image: url(assets/images/97efbf2424728fe17df4689be4a23fb8.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.splashScreenWelcome {
  position: relative;
  height: 34%;
  width: 100%;
  background-color: rgb(66, 66, 66);
  color: rgb(200, 200, 200);
  font-size: small;
  padding-left: 3em;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-right: 2em;
  overflow-y: auto;
}

#splashHead {
  font-size: 3em;
  /* font-family: sans-serif; */
  font-weight: bolder;
  color: rgb(236, 236, 236);
}

.splashScreenBackground {
  position: fixed;
  height: 100vh;
  width: 100vw;
  background-color: rgb(158, 158, 158);
  opacity: 0.2;
  z-index: 999;
}

.splashScreenItems {
  width: 100%;
  padding-left: 0.3em;
  padding-right: 0.3em;
}

.splashScreenItems:hover {
  background-color: #1e88e5;
}
.splashScreenItems.disabled,
.splashScreenItems.disabled button {
  cursor: not-allowed;
}
.splashScreenItems.disabled:hover {
  background-color: #3b3b3b;
}

#bannerFiller {
  height: 3vh;
}

#applicationBanner {
  z-index: 800;
  position: fixed;
  top: 0;
  background-color: rgb(168, 168, 168);
  color: rgb(22, 22, 22);
  font-size: small;
  height: 3vh;
  width: 100%;
  /* font-family: sans-serif; */
}

#applicationTitle {
  position: fixed;
  display: inline-block;
  padding-left: 1em;
  padding-top: 0.5em;
}

#applicationSettings {
  position: fixed;
  z-index: 1000;
}

#settingsPanelBackDrop {
  position: fixed;
  z-index: 10;
  height: 100vh;
  width: 100vw;
  background: #141414;
  opacity: 0.6;
}

#settingsPanelContainer {
  position: fixed;
  z-index: 20;
  height: 50em;
  width: 46em;
  top: calc(50vh - 25em);
  left: calc(50vw - 23em);
  background-color: #505050;
  border: 1px solid #707070;
  border-radius: 0.3em;
  box-shadow: 0 0 2em 0.2em #000000;
  user-select: none;
}

#settingsPanelHeader {
  display: block;
  height: 2em;
  width: 100%;
  font-size: small;
  color: #1c1c1c;
  background-color: #b2b2b2;
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
}

#settingsPanelBody {
  display: block;
  top: 2em;
  width: 100%;
  height: calc(100% - 2em);
}

.settingsTab {
  float: left;
  width: 25%;
  height: calc(100% - 2px);
  background-color: #202020;
  border-bottom-left-radius: 0.3em;
}

.settingsTabLinks {
  display: block;
  width: 100%;
  height: 2.5em;
  border: none;
  padding-left: 1.5em;
  font-size: small;
  font-family: inherit;
  outline: none;
  text-align: left;
  background-color: #202020;
  transition: 0.3s;
  color: #9f9f9f;
  cursor: default;
}

.activeSettingsTabLinks {
  display: block;
  width: 100%;
  height: 2.5em;
  border: none;
  padding-left: 1.5em;
  font-size: small;
  font-family: inherit;
  outline: none;
  text-align: left;
  background-color: #505050;
  transition: 0.1s;
  color: #f3f3f3;
  cursor: default;
}

.settingsTabLinks:hover {
  background-color: #3f3f3f;
  color: #e3e3e3;
}

.settingsTabContent {
  float: left;
  width: 75%;
  height: calc(100% - 2px);
  border: none;
  border-bottom-right-radius: 0.3em;
}

.settingsTabContentBody {
  width: 100%;
  height: 90%;
  padding: 1em;
  overflow-x: hidden;
  overflow-y: auto;
}

.settingsContentSpecificControls {
  height: 3em;
  width: 100%;
}

.settingsTabContentFooter {
  width: 100%;
  height: 10%;
  padding-top: 1em;
  padding-right: 1em;
}

.settingsButton {
  display: inline-block;
  float: right;
  width: 6em;
  height: 2em;
  border: 1px solid #202020;
  font-size: 1em;
  font-family: inherit;
  outline: none;
  text-align: center;
  background-color: #6e6e6e;
  cursor: pointer;
  transition: 0.1s;
  color: #f9f9f9;
  border-radius: 0.4em;
  margin-right: 1em;
}

.settingsButton:hover {
  background-color: #8f8f8f;
  color: #fefefe;
  border: 1px solid #dddddd;
}

.settingsButtonInActive {
  display: block;
  float: right;
  width: 6em;
  height: 2em;
  border: 1px solid #363636;
  font-size: 1em;
  font-family: inherit;
  outline: none;
  text-align: center;
  background-color: #484848;
  cursor: default;
  transition: 0.1s;
  color: #969696;
  border-radius: 0.4em;
  margin-right: 1em;
}

.settingsTabContentTable {
  width: 100%;
}
.settingsRow {
  height: 3em;
}

.settingsTabLabel {
  font-size: 1em;
  color: #f0f0f0;
  text-align: right;
  padding-right: 0.5em;
  width: 40%;
}

.settingsTabInput {
  width: 60%;
  padding-left: 1em;
  padding-right: 1em;
}

.settingsTabInputSelect {
  outline: none;
  display: block;
  text-align: left;
  width: 100%;
  padding-left: 1em;
  font-size: 1em;
  border-radius: 0.3em;
  background-color: #2c2c2c;
  color: rgb(245, 245, 245);
  border: 1px solid black;
}

.settingsTabContentSubHead {
  height: 1.5em;
  width: 100%;
  font-size: 1em;
  color: #c5c5c5;
  font-family: sans-serif;
  border-bottom: 1px solid #c5c5c5;
}

.listheader {
  height: 2em;
  color: white;
  padding-left: 1em;
  font-size: 1em;
  padding-top: 0.2em;
  background-color: #282828;
  border-bottom: 1px solid #858585;
  cursor: pointer;
}

.listViewerBlock {
  width: 100%;
  height: 15em;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #898989;
  background-color: #2e2e2e;
  border-radius: 0.3em;
}

.listViewerItemDisabled {
  height: 1.8em;
  width: 99%;
  background-color: #414141;
  color: #b7b7b7;
  margin: 0.2em;
  border: 1px solid #4d4d4d;
  padding-left: 2em;
  cursor: default;
  border-radius: 0.2em;
}

.listViewerItem {
  height: 1.8em;
  width: 99%;
  background-color: #505050;
  color: #c6c6c6;
  margin: 0.2em;
  border: 1px solid #5e5e5e;
  padding-left: 2em;
  cursor: default;
  border-radius: 0.2em;
  transition: 0.2s;
}

.listViewerItem:hover {
  border: 1px solid rgb(76, 166, 255);
  box-shadow: 0 0 0.3em 0.1em dodgerblue;
  color: #ffffff;
}

.listViewerItemSelected {
  height: 1.8em;
  width: 99%;
  background-color: dodgerblue;
  color: #ffffff;
  margin: 0.2em;
  border: 1px solid #5e5e5e;
  padding-left: 2em;
  cursor: default;
  border-radius: 0.2em;
}

.managePaletteEmpty {
  position: relative;
  color: #c1c1c1;
  margin-left: 1em;
  margin-top: 1em;
  top: 1em;
}

.manageShowPaletteEditButton {
  height: 1.5em;
  width: 5em;
  border: 1px solid #383838;
  outline: none;
  text-align: center;
  background-color: #707070;
  cursor: pointer;
  color: #c5c5c5;
  border-radius: 0.3em;
}

.manageShowPaletteEditButton:hover {
  background-color: #8f8f8f;
  border: 1px solid #454545;
  color: #d0d0d0;
}

.manageShowPaletteName {
  width: 30%;
  padding-left: 1em;
}

.manageShowPaletteNo {
  width: 15%;
  padding-left: 1em;
}

.manageShowPaletteEdit {
  width: 25%;
  padding-left: 1em;
}

.manageShowPaletteReplace {
  width: 30%;
  padding-left: 1em;
}
.manageShowPaletteRowHeader {
  height: 2em;
  font-size: 1em;
  color: #a1a1a1;
  background-color: #1e1e1e;
  border: 1px solid #0e0e0e;
  border-radius: 0.2em;
}

.manageShowPaletteActiveRow {
  height: 2.4em;
  width: 100%;
  font-size: 1em;
  color: #bdbdbd;
  background-color: #606060;
  border: 1px solid #646464;
  border-radius: 0.2em;
  transition: 0.2s;
}

.manageShowPaletteRow {
  height: 2.4em;
  width: 100%;
  font-size: 1em;
  color: #bdbdbd;
  background-color: #3a3a3a;
  border: 1px solid #0e0e0e;
  border-radius: 0.2em;
  transition: 0.2s;
}

.manageShowPaletteRow:hover {
  color: #d0d0d0;
  background-color: #434343;
  border: 1px solid #7b7b7b;
}

.paletteViewer {
  width: 100%;
  height: 10em;
  border: 1px solid #7e7e7e;
  border-radius: 0.3em;
  margin-bottom: 0.7em;
  background-color: #222222;
  box-shadow: 0 0 1em 0.5em #1c1c1c inset;
  overflow-y: auto;
  overflow-x: hidden;
}

.colorViewer {
  height: 2.2em;
  width: 4em;
  border-radius: 0.2em;
}

.paletteEditorColorInput {
  width: 4em;
  height: 2.2em;
  background-color: #222222;
  border-radius: 0.2em;
  -webkit-appearance: none;
}

.paletteViewerCell {
  padding: 0.6em;
}

.paletteEditorBlock {
  height: 2.5em;
  width: 100%;
  margin-bottom: 0.7em;
  border: 1px solid #7e7e7e;
  background-color: #222222;
  box-shadow: 0 0 0.5em 0.1em #121212 inset;
  border-radius: 0.3em;
  white-space: nowrap;
}

.paletteEditorLabel {
  float: left;
  color: #e7e7e7;
  height: 100%;
  padding-left: 1em;
  padding-top: 0.4em;
  width: calc(100% - 9em);
  font-size: 1em;
}

.paletteEditorInputBlock {
  float: left;
  color: #e7e7e7;
  height: 100%;
  width: calc(100% - 12em);
  font-size: 1em;
}

.paletteEditorLabelInput {
  float: left;
  color: #ffffff;
  height: 100%;
  width: 100%;
  font-size: 1em;
  background-color: #222222;
  box-shadow: 0 0 0.5em 0.1em #121212 inset;
  caret-color: dodgerblue;
  padding-left: 1em;
  border-radius: 0.3em;
  outline: none;
}

.paletteEditorButtonInActive {
  float: right;
  height: 100%;
  width: 3em;
  border: 1px solid #363636;
  font-size: 1em;
  font-family: inherit;
  outline: none;
  text-align: center;
  background-color: #484848;
  cursor: default;
  color: #969696;
  border-radius: 0.2em;
}

.paletteEditorButtonRed {
  float: right;
  height: 100%;
  width: 3em;
  border: 1px solid #363636;
  font-size: 1em;
  font-family: inherit;
  outline: none;
  text-align: center;
  background-color: #6e6e6e;
  cursor: pointer;
  color: #c5c5c5;
  border-radius: 0.2em;
}

.paletteEditorButtonRed:hover {
  background-color: #ff3939;
  border: 1px solid #ff8e8e;
}

.paletteEditorButton {
  float: right;
  height: 100%;
  width: 3em;
  border: 1px solid #363636;
  font-size: 1em;
  font-family: inherit;
  outline: none;
  text-align: center;
  background-color: #6e6e6e;
  cursor: pointer;
  color: #c5c5c5;
  border-radius: 0.2em;
}

.paletteEditorButton:hover {
  background-color: #9d9d9d;
  border: 1px solid #828282;
}

.presetEditorButton {
  float: right;
  margin-right: 1em;
  height: 85%;
  width: 3em;
  border: 1px solid #b5deff;
  font-size: 1em;
  font-family: inherit;
  outline: none;
  text-align: center;
  background-color: #57acff;
  cursor: pointer;
  color: #ffffff;
  border-radius: 0.45em;
}
.presetEditorButtonRed {
  float: right;
  margin-right: 1em;
  height: 85%;
  width: 3em;
  border: 1px solid #b5deff;
  font-size: 1em;
  font-family: inherit;
  outline: none;
  text-align: center;
  background-color: #57acff;
  cursor: pointer;
  color: #ffffff;
  border-radius: 0.45em;
}

.presetEditorButton:hover {
  background-color: #85c2ff;
  border: 1px solid #d2ebff;
}

.presetEditorButtonRed:hover {
  background-color: #ff3939;
  border: 1px solid #ff8e8e;
}

.presetNameInput {
  width: 65%;
  height: 80%;
  border-radius: 0.3em;
  color: black;
  padding-left: 1em;
  border: 1px solid #c9e4ff;
}

#paletteEditorControlsPanel {
  position: sticky;
  bottom: 0;
  height: 2.7em;
  width: 100%;
  border: 1px solid #666666;
  border-radius: 0.3em;
}

#valueInputMenuPopUp {
  position: fixed;
  height: 36em;
  width: 35em;
  top: calc(50vh - 18em);
  left: calc(50vw - 17em);
  background: #2e2e2e;
  border: 1px solid #a5a5a5;
  border-radius: 0.5em;
  opacity: 0.95;
  box-shadow: 0 0 1.5em 0.1em #000000;
}

#valueInputMenuHeader {
  height: 2em;
  color: #c9c9c9;
  background: #5c5c5c;
  padding-left: 1em;
  padding-top: 0.3em;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}

#valueInputMenuBody {
  height: calc(100% - 5.5em);
  padding: 1em;
}

#inputValueForPalette {
  width: 100%;
  border-radius: 0.2em;
  resize: none;
  height: 11em;
}

#inputValuePaletteNameInput {
  float: left;
  color: #ffffff;
  height: 100%;
  width: 100%;
  font-size: 1em;
  background-color: #222222;
  box-shadow: 0 0 0.5em 0.1em #121212 inset;
  caret-color: dodgerblue;
  padding-left: 1em;
  border-radius: 0.3em;
  outline: none;
}

#valueInputOptions {
  height: 3.5em;
}

#replaceMenuPopUp {
  position: fixed;
  height: 36em;
  width: 28em;
  top: calc(50vh - 18em);
  left: calc(50vw - 8em);
  background: #2e2e2e;
  border: 1px solid #a5a5a5;
  border-radius: 0.5em;
  opacity: 0.95;
  box-shadow: 0 0 1.5em 0.1em #000000;
}

#replaceMenuHeader {
  height: 2em;
  color: #c9c9c9;
  background: #5c5c5c;
  padding-left: 1em;
  padding-top: 0.3em;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}

#replaceMenuBody {
  height: calc(100% - 5.5em);
  padding: 1em;
}

#replaceMenuPaletteListContainer {
  height: 100%;
  padding: 0.3em;
  border: 1px solid #6c6c6c;
  box-shadow: 0 0 2em 0.1em black inset;
  border-radius: 0.5em;
  overflow-y: auto;
  overflow-x: hidden;
}

.replaceMenuPaletteListItem {
  margin-bottom: 0.2em;
  padding-left: 1em;
  padding-top: 0.2em;
  height: 2.1em;
  border: 1px solid #000000;
  border-radius: 0.2em;
  background: #1c1c1c;
  color: #f7f7f7;
  transition: 0.3s;
}

.replaceMenuPaletteListItemActive {
  margin-bottom: 0.2em;
  padding-left: 1em;
  padding-top: 0.2em;
  height: 2.1em;
  border: 1px solid #a1a1a1;
  border-radius: 0.2em;
  background: #393939;
  color: #f7f7f7;
  transition: 0.3s;
}

.replaceMenuPaletteListItem:hover {
  border: 1px solid #9f9f9f;
}

.replaceMenuPaletteCheckContainer {
  display: inline-block;
  height: 90%;
  width: 2em;
  margin-right: 0.5em;
  cursor: pointer;
  /* font-size: 22px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#replaceMenuOptions {
  height: 3.5em;
}

#userActionConfirmation {
  z-index: 50;
  position: fixed;
  margin: auto;
  height: 15em;
  width: 30em;
  top: calc(50vh - 7.5em);
  left: calc(50vw - 15em);
  background-color: #101010;
  opacity: 0.9;
  border-radius: 0.3em;
  border: 1px solid #000000;
  box-shadow: 0 0 0.8em 0.1em black;
  padding: 1em;
}

#userActionConfirmationBackDrop {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 30;
}

#userActionConfirmationMessage {
  color: white;
  text-align: center;
  font-size: small;
}
.userActionButton {
  width: 80%;
  height: 2.2em;
  border-radius: 0.3em;
}

.userActionButton:hover {
  background-color: dodgerblue;
}

.userActionButtonInActive {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: rgb(30 30 30);
  color: rgb(141 141 141);
  border-radius: 0.3em;
  border: 1px solid black;
}

.userActionButtonCell {
  width: 50%;
  vertical-align: middle;
  text-align: center;
}

#applicationWindow {
  display: block;
  width: 100%;
  height: 97vh;
  background-color: black;
  filter: blur(0.4em);
}

#northPanelArea {
  display: flex;
  background-color: rgb(41, 41, 41);
  box-shadow: 0 0 2em 1em rgb(27, 27, 27) inset;
  height: 70vh;
  width: 100%;
}

#toolsPanel {
  width: 15%;
  height: 100%;
  background-color: #272727;
  /* box-shadow: 0 0 2em 1em rgb(27, 27, 27) inset; */
  overflow-x: hidden;
}

#toolsSceneResizer {
  width: 0.5em;
  background-color: rgb(15, 15, 15);
}

#scene-container {
  width: 70%;
  height: 100%;
  background-color: black;
  z-index: 1;
  position: relative;
}

#stats-container {
  position: absolute;
  display: inline;
  z-index: 2;
}

#scenePatternsResizer {
  cursor: col-resize;
  width: 0.5em;
  background-color: rgb(15, 15, 15);
  /* z-index: 1000; */
}

#patternsPanel {
  width: 15%;
  height: 100%;
  background-color: rgb(41, 41, 41);
  box-shadow: 0 0 2em 1em rgb(27, 27, 27) inset;
  /* overflow: scroll;
  overflow-x: hidden;
  overflow-y: auto; */
  user-select: none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 1em;
}

/* Track */
::-webkit-scrollbar-track {
  background: #181818;
  border-radius: 1em;
  border: 1px solid black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(41, 41, 41);
  border-radius: 1em;
  border: 1px solid black;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(71, 71, 71);
}

::-webkit-scrollbar-corner {
  background: #181818;
}

#northSouthResizer {
  cursor: row-resize;
  background-color: rgb(15, 15, 15);
  height: 0.5em;
  width: 100%;
  z-index: 1000;
  text-align: center;
}

#northSouthResizerKnob {
  color: rgb(233, 233, 233);
  font-size: 0.5em;
  vertical-align: middle;
  margin-top: -5em;
}

#southPanelArea {
  position: relative;
  background-color: rgb(41, 41, 41);
  box-shadow: 0 0 2em 1em rgb(27, 27, 27) inset;
  height: 26.4vh;
}

#timeline-controls {
  height: 100%;
}

#animationControlPanel {
  height: 3.2em;
  background-color: #383838;
  border: 1px solid #1b1b1b;
}

#animationControlGrid {
  display: grid;
  place-items: baseline center;
  grid-template-columns: repeat(3, 1fr);
  -webkit-box-align: baseline;
  -webkit-box-pack: justify;
  justify-content: space-between;
  height: 100%;
  padding: 0em 2em 0em 2em;
}

#animationControlColumn1 {
  grid-column: 1 / auto;
  height: 100%;
  -webkit-box-pack: justify;
  justify-content: space-between;
  justify-self: start;
  -webkit-box-align: center;
  align-items: center;
  padding: 0.5em;
}

#animationControlColumn2 {
  grid-column: 2 / auto;
  height: 100%;
  width: 30em;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  padding: 0.5em;
  margin-left: 15em;
}

#animationControlColumn3 {
  grid-column: 3 / auto;
  height: 100%;
  width: 20em;
  -webkit-box-pack: justify;
  justify-content: space-between;
  justify-self: end;
  -webkit-box-align: center;
  align-items: center;
  padding: 0.5em;
}

#animationFrameDisplay {
  width: 5em;
  margin-left: 2em;
  height: 1.4em;
  position: relative;
  top: -0.3em;
}

#timelineScaleBlock {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.zoomContainer {
  height: 100%;
  width: 2.5em;
  padding: 0 0.2em;
}

#zoomSliderDiv {
  width: 15em;
  height: 100%;
  padding-right: 0.5em;
}

#slider {
  height: 5px;
  background-color: #1e88e5;
  width: 100%;
  margin-top: 5px;
  padding: 0 1em;
}

.animationControllButton {
  user-select: none;
  padding: 0.3em;
  border-radius: 0.3em;
  transition: background-color 0.15s ease-in-out 0s,
    border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.animationControllButton:hover {
  background-color: #575757;
  box-shadow: 0 0 0.1em 0.3em #363636;
}

#clockdiv {
  color: rgb(202, 201, 201);
  position: relative;
  padding: 0 0 0 1.5em;
  top: -0.2em;
}

#timelinePanelContainer {
  position: relative;
  height: calc(100% - 3.2em);
  width: 100%;
  white-space: nowrap;
}

#TimelineHeaderBlock {
  position: relative;
  height: 2.5em;
  min-height: 2.5em;
  border: 1px solid #1b1b1b;
}

#timelineinforesizerdummy {
  height: 100%;
  width: 0.5em;
  background-color: #383838;
  border-left: 1px solid #141414;
  border-right: 1px solid #141414;
}

#timelineBlock {
  height: calc(100% - 2.5em);
  width: 100%;
  overflow: auto;
  white-space: nowrap;
}

#timelineInfoHeader {
  display: inline-block;
  width: 30%;
  min-width: 30%;
  height: 100%;
  background-color: rgb(58, 58, 58);
  overflow: hidden;
  border-right: 0.5em solid rgb(25 25 25);
}

#timelineHeader {
  display: inline-block;
  height: 100%;
  width: 70%;
  background-color: rgb(58, 58, 58);
  white-space: nowrap;
}

#timelineInfoOptionSpace {
  height: 50%;
}

#timelineInfoPanelHeader {
  position: sticky;
  z-index: 11;
  top: 0;
  left: 0;
  height: 2.5em;
}

#timelineInfoPanel {
  position: relative;
  height: calc(100% - 2.5em);
  background: #272727;
}

#timelinegraphcontainer {
  position: relative;
  height: calc(100% - 2.5em);
}

#timelineInfoDiv {
  display: block;
  float: left;
  position: sticky;
  z-index: 15;
  left: 0;
  top: 0;
  width: 30vw;
  min-width: 30vw;
  min-height: 97%;
  height: 97%;
  border-right: 0.5em solid rgb(25 25 25);
}

#timelineDiv {
  position: relative;
  display: inline-block;
  position: sticky;
  width: 69.9vw;
  height: 97%;
  min-height: 97%;
  min-width: 69.9vw;
}

#timelineinforesizer {
  height: 100%;
  width: 1em;
  background-color: #383838;
  border-left: 1px solid #141414;
  border-right: 1px solid #141414;
  cursor: col-resize;
}

#timelineunitcontrolpanel {
  height: 100%;
  width: 100%;
}

.fadeControl {
  padding-top: 0.5em;
  padding-right: 1em;
  height: 100%;
  width: 19em;
  display: inline-block;
}

.fadeControlLabel {
  float: left;
  color: rgb(163, 163, 163);
  padding-left: 1em;
  user-select: none;
}

.fadeControlSVG {
  float: right;
  padding-right: 0.5em;
}

.fadeControlKnob:hover {
  stroke: rgb(56, 56, 56);
  fill: #a3a3a3;
}

#timelinescalepanel {
  position: sticky;
  z-index: 3;
  top: 0;
  height: 2.5em;
  user-select: none;
}

#timelinegraph {
  position: relative;
}

.timelinepointer {
  background-color: yellow;
}

.timelinepointer:hover {
  cursor: e-resize;
}

.panelHeader {
  position: relative;
  background-image: linear-gradient(
    #272727 2%,
    #505050 10%,
    #5c5c5c 50%,
    #505050 90%,
    #272727 98%
  );
  /* z-index: 1; */
  color: rgb(163, 163, 163);
  font-size: small;
  /* font-family: sans-serif; */
  padding-left: 1em;
  padding-top: 0.1em;
  height: 1.8em;
  vertical-align: middle;
  border: 1px solid black;
  box-shadow: 1px 1px 0.1em 0px black;
}

#previewBlock {
  height: calc(30% - 1.8em);
  border: 1px solid rgb(58, 58, 58);
}

#previewPanel {
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

#previewHeader {
  position: relative;
  background-color: rgb(58, 58, 58);
  color: rgb(163, 163, 163);
  font-size: 1em;
  padding-top: 0.2em;
  padding-left: 0.9em;
  height: 2em;
  vertical-align: middle;
  overflow: hidden;
}

#previewContainer {
  height: calc(100% - 2em);
  overflow: hidden;
}

#previewPatternResizer {
  cursor: row-resize;
  height: 0.2em;
  background-color: #111111;
}

#showmaker-controls {
  position: relative;
  color: rgb(163, 163, 163);
  z-index: 100;
  height: 70%;
  /* overflow: scroll;
  overflow-x: hidden;
  overflow-y: auto; */
}
/*

#southPanelArea{
  display: flex;
  background-color: blue;
  height: 100%;
}

#infoTimeLinePanel{
  display: block;
  width: 100%;
  background-color: blue;
}*/

h1 {
  /* position the heading */
  position: absolute;
  width: 100%;

  /* make sure that the heading is drawn on top */
  z-index: 1;
}

/*
    Set the container's background color to the same as the scene's
    background to prevent flashing on load
  */

/* #htmlControls {
  color: white;
  height: 100%;
  width: 20em;
  right: 0%;
  font-size: larger;
  background-color: honeydew;
  position: absolute;
  z-index: 100;

} */

#controlHead {
  background-color: rgb(28, 164, 255);
  color: white;
  font-size: 2em;
  border: solid rgb(28, 164, 255);
  border-radius: 0.5em;
  margin: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

#controls {
  padding: 1em;
  font-size: large;
  color: rgb(0, 77, 121);
}

#backdroplabel {
  font-size: small;
}

#treebackdrop {
  -webkit-appearance: none;
  border: none;
  border-color: transparent;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  height: 2em;
  width: 50%;
  float: right;
  border-radius: 5%;
}

#treebackdrop::-webkit-color-swatch {
  border: none;
}

#treebackdrop::-webkit-color-swatch {
  border: none;
}

.checkBoxButtonPattern {
  font-family: sans-serif;
  font-size: x-small;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  vertical-align: middle;
  border: 2px solid rgb(185, 185, 185);
  border-radius: 0.2em;
  background-color: #959595;
}

.checkBoxButtonPatternChecked {
  font-family: sans-serif;
  font-size: x-small;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  vertical-align: middle;
  border: 2px solid dodgerblue;
  border-radius: 0.2em;
  background-color: dodgerblue;
}

.checkBoxButtonPreference {
  font-family: sans-serif;
  font-size: x-small;
  width: 1.8em;
  height: 1.8em;
  text-align: center;
  vertical-align: middle;
  border: 2px solid rgb(30, 30, 30);
  border-radius: 0.2em;
  background-color: #2c2c2c;
  margin-top: 0.5em;
}

.checkmarkPattern {
  font-size: inherit;
  font-weight: bold;
  height: 1.5em;
  color: white;
  font-family: monospace;
  display: block;
}

#addPatternMenuBox {
  position: fixed;
  display: none;
  background-color: #141414;
  opacity: 0.98;
  top: 12em;
  left: 30em;
  padding-top: 1em;
  z-index: 1100;
  border: 1px solid #1a1a1a;
  box-shadow: 0 0 0.5em 0.1em #101010;
  border-radius: 0.3em;
  width: 34em;
  height: 40em;
}

#addPatternFilterBox {
  width: 96%;
  height: 2em;
  display: flex;
  padding-left: 1em;
  margin: 0 auto;
  background-color: #222222;
  border: 1px solid #252525;
  border-radius: 0.35em;
  margin-bottom: 0.2em;
}

.filterIcon {
  width: 1em;
}

.filterBar {
  /* width: 96%; */
  /* height: 2em; */
  padding-left: 1em;
  background-color: #222222;
  color: rgb(182, 182, 182);
  caret-color: dodgerblue;
  outline: none;
}

.filterBar::placeholder {
  color: rgb(114, 114, 114);
}

#addPatternMenu {
  display: flex;
  padding-top: 1em;
  width: 100%;
  height: 36.5em;
  overflow-y: auto;
  overflow-x: hidden;
}

.addMenuPatternList {
  display: inline-table;
  color: #5d5d5d;
  min-width: 10em;
}

.addMenuPatternListItem {
  color: rgb(231, 231, 231);
  padding-left: 1em;
  padding-right: 1em;
  line-height: 1.8em;
}

.addMenuPatternListItem:hover {
  background-color: #1e88e5;
}

.addMenuNoMatchMsg {
  color: rgb(112, 112, 112);
  padding-left: 1em;
  padding-right: 1em;
  line-height: 1.8em;
}
/* #addPattern {
  position: relative;
  border:none;
  text-decoration: none;
  background-image: linear-gradient(to bottom, #ff7777, #ff2525  5%, #ff7777 200%);
  color:white;
  font-size: larger;
  font-weight: bolder;
  width: 100%;
  height: 1.5em;
  text-align: center;
  background-size: 200% auto;
  border-radius: 0.2em;
}

#addPattern:hover{
  background-image: linear-gradient(to top, #ff7777 0%, #ff6d6d  20%, #ff7777  90%);
} */

.currentPatternHeader {
  background-color: rgb(0, 153, 255);
  color: white;
  font-weight: bold;
  font-size: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

.currentPatternHeader:hover {
  background-color: rgb(77, 184, 255);
}

.currentPatternOptions {
  background-color: #0d101a;
}

.removePatternBtn {
  float: right;
  margin-top: 0;
  background-color: transparent;
  z-index: 151;
  border-radius: 50%;
}

.removePatternBtn:hover {
  background-color: rgb(77, 184, 255);
}

.currentPatternOptions {
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 0.5em;
  overflow: hidden;
}

.patternOptionLabel {
  font-size: 1em;
  padding-right: 1em;
  margin-left: 0.5em;
  vertical-align: middle;
  color: rgb(202, 201, 201);
  width: 40%;
}

#startRecordButton {
  position: absolute;
  bottom: 1em;
  z-index: 100;
  color: white;
  background: grey;
  width: 5em;
  height: 2em;
  border-radius: 5%;
}

#startRecordButton:hover {
  color: red;
}

#stopRecordButton {
  position: absolute;
  bottom: 1em;
  z-index: 100;
  color: white;
  background: red;
  width: 5em;
  height: 2em;
  border-radius: 5%;
  animation: blinker 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}

@keyframes blinker {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.4;
  }
}

#stopRecordButton:hover {
  background: rgb(255, 97, 97);
}

#image-picker {
  z-index: -100;
  display: none;
}

.CollapseCanvasTools {
  position: relative;
  display: block;
  width: 90%;
  padding-bottom: 1em;
  margin: auto;
}

.CanvasTools {
  position: relative;
  display: block;
  width: 100%;
  padding-left: 1.5em;
  padding-bottom: 1em;
}

.canvasToolLabel {
  text-align: right;
  color: rgb(179, 179, 179);
  padding-right: 1em;
  padding-top: 0.6em;
  width: 8.5em;
  user-select: none;
}

.settingsSectionHeader {
  position: relative;
  /* background-color: rgb(58, 58, 58); */
  /* z-index: 100; */
  color: rgb(233, 230, 230);
  font-size: 1em;
  /* font-family: sans-serif; */
  padding-top: 0.5em;
  padding-left: 1em;
  height: 2.2em;
  user-select: none;
}

.settingsItemRow {
  overflow-x: hidden;
  height: 2.5em;
}

.settingsSeparater {
  height: 0;
  width: 95%;
  border-bottom: 1px solid #424242;
  margin: auto;
  margin-bottom: 0.5em;
}

#exportContainer {
  position: absolute;
  bottom: 1em;
  padding-left: 2em;
  padding-right: 2em;
  width: 100%;
}

#exportContainerCollapsed {
  position: absolute;
  bottom: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  width: 100%;
}

#exportWindow {
  position: fixed;
  z-index: 1000;
  height: 25em;
  width: 50em;
  top: calc(50vh - 18em);
  left: calc(50vw - 25em);
  background-color: #363636;
  border: 1px solid #707070;
  border-radius: 0.3em;
  box-shadow: 0 0 2em 0.2em #000000;
  user-select: none;
}

#exportPanelHeader {
  display: block;
  height: 2em;
  width: 100%;
  font-size: small;
  color: #1c1c1c;
  background-color: #b2b2b2;
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
}

#exportPanelBody {
  width: 100%;
  height: calc(100% - 2em);
  padding-left: 1em;
  padding-right: 1em;
}

.exportWindowLabel {
  width: 17%;
  color: rgb(222, 222, 222);
  font-size: small;
  font-family: sans-serif;
}

.exportMenuTextItem {
  color: rgb(222, 222, 222);
  font-size: small;
  font-family: sans-serif;
  padding-left: 0.2em;
}

#exportFileName {
  float: left;
  color: #ffffff;
  height: 2em;
  width: 100%;
  font-size: 1em;
  background-color: #1a1a1a;
  box-shadow: 0 0 0.5em 0.1em #121212 inset;
  caret-color: dodgerblue;
  padding-left: 1em;
  border-radius: 0.3em;
  outline: none;
}

#exportProgressBarContainer {
  height: 1.2em;
  width: 100%;
  box-shadow: 0 0 0 0.1em #bfbfbf;
  background: #e9e9e9;
  border-radius: 0.3em;
}
#exportProgressBar {
  background: #6e6e6e;
  height: 1.2em;
  width: 50%;
  border-radius: 0.3em;
  transition: 0.5s;
}

@keyframes animProgressTree {
  from {
    background-position: 0px;
  }
  to {
    background-position: -5973px;
  }
}

#exportAnim {
  position: relative;
  margin: auto;
  height: 120px;
  width: 213px;
  background: url(assets/images/1365d2583bfe7abdac332caad188273d.png);
  animation: animProgressTree 4s steps(28) infinite;
}

.checkBoxButtonBlack {
  font-family: sans-serif;
  font-size: x-small;
  width: 1.8em;
  height: 1.8em;
  text-align: center;
  vertical-align: middle;
  border: 2px solid rgb(0, 0, 0);
  border-radius: 0.2em;
  background-color: #1a1a1a;
  margin-top: 0.5em;
}

.checkmark {
  font-size: 1em;
  font-weight: bold;
  color: white;
  font-family: sans-serif;
}

#treeSettingsTool {
  overflow-x: hidden;
}

#treeSettingsPanelTable {
  width: 100%;
}

.settingsItemLabel {
  z-index: 100;
  color: rgb(163, 163, 163);
  padding-left: 0.5em;
  padding-right: 0.1em;
  vertical-align: middle;
  width: 30%;
}

.settingsItem {
  padding-left: 1em;
  padding-right: 1em;
}

.settingsNumberInput {
  width: 100%;
  padding-left: 1em;
  background-color: #2c2c2c;
  color: rgb(245, 245, 245);
  border: 1px solid black;
  border-radius: 0.5em;
  height: 1.8em;
  -webkit-appearance: none;
}

.settingsWorldColorInput {
  width: 100%;
  background-color: transparent;
  border: 1px solid rgb(131, 131, 131);
  /* border-radius: 0.5em; */
  /* box-shadow: 0 0 0.3em 0.1em rgb(22, 22, 22); */
  height: 1.8em;
  -webkit-appearance: none;
}

.settingsColorInput {
  width: 100%;
  background-color: #cbcbcb;
  border: 1px solid rgb(131, 131, 131);
  border-radius: 0.5em;
  box-shadow: 0 0 0.3em 0.1em rgb(22, 22, 22);
  height: 1.8em;
  -webkit-appearance: none;
  appearance: none;
}

.settingsColorInput::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 0.5em;
  box-shadow: 0 0 0.2em 0.1em black inset;
}
.settingsColorInput::-webkit-color-swatch {
  border: none;
  border-radius: 0.5em;
  box-shadow: 0 0 0.2em 0.1em black inset;
}

.settingsRangeInput {
  margin-top: 0.5em;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 80%;
  cursor: pointer;
  border-radius: 0.5em;
  border: 1px solid rgb(131, 131, 131);
  box-shadow: 0 0 0.2em 0.2em rgb(46, 46, 46) inset;
}

.toolsButtons {
  display: block;
  text-align: left;
  width: 100%;
  padding-left: 1em;
  margin-top: 0.5em;
  font-size: 1.2em;
  border-radius: 0.2em;
  background-color: rgb(20, 20, 20);
  color: grey;
  outline: none;
}

.toolsButtons:hover {
  background-color: rgb(151, 151, 151);
  color: white;
}

#fps {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(20, 20, 20);
  color: grey;
  outline: none;
}

#fps:hover {
  background-color: rgb(151, 151, 151);
  color: white;
}

#fps option:hover {
  background-color: rgb(20, 20, 20);
  color: grey;
  outline: none;
}

.toolsDropdown {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(20, 20, 20);
  color: grey;
  outline: none;
}

.toolsDropdown:hover {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background-color: rgb(151, 151, 151);
  color: white;
}

.panelToolsBlock {
  position: relative;
  background-color: rgb(58, 58, 58);
  z-index: 100;
  color: rgb(163, 163, 163);
  font-size: small;
  /* font-family: sans-serif; */
  padding-top: 0.1em;
  padding-left: 0.3em;
  height: 2em;
  vertical-align: middle;
  border: 1px solid black;
  overflow-x: hidden;
}

.timeLineToolsBlock {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: row;
}

#timelineToolsPanelContainer {
  display: flex;
  flex-direction: row;
  height: 2em;
  width: 100%;
  background-color: rgb(58, 58, 58);
  color: rgb(163, 163, 163);
  z-index: 2000;
}

#timeLineInfoToolPanel {
  width: 35em;
  height: 100%;
}

#timeLineToolPanel {
  flex: 1;
  height: 100%;
  border-left: 0.5em solid rgb(31, 31, 31);
}
td > * {
  vertical-align: middle;
}
.bg-button {
  background-color: rgb(92, 92, 92);
}
.timeLinePanelToolsButton {
  margin-top: 0.2em;
  margin-left: 0.2em;
  /* padding-left: 0.3em;
  padding-right: 0.3em; */
  width: 3em;
  /* height: 1.3em; */
  background-color: rgb(92, 92, 92);
  box-shadow: 0 0 0.1em 0.1em rgb(46, 46, 46);
  text-decoration: none;
  color: rgb(163, 163, 163);
  /* font-family: sans-serif; */
  font-size: 1em;
  vertical-align: middle;
  border-radius: 5%;
}
.timeLinePanelToolsButton:hover {
  background-color: rgb(121, 121, 121);
  color: rgb(199, 199, 199);
}

/* #timelinePanelContainer {
  height: 100%;
  overflow-y: auto;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: row;
} */

.timeLineContainer {
  flex: 1;
  height: 100%;
}

.timeLineInfoBlock {
  width: 35em;
  height: 100%;
  /* z-index: 300; */
  box-shadow: 0 0 2em 1em rgb(27, 27, 27) inset;
}

#timeLinePanelSeparator {
  width: 0.5em;
  background-color: rgb(36, 36, 36);
  border-left: 1px solid rgb(65, 65, 65);
  border-right: 1px solid rgb(65, 65, 65);
  box-shadow: 0 0 0.2em 0.1em rgb(22, 22, 22) inset;
  height: 100%;
}

#timeLinePointer {
  position: absolute;
  /* z-index: 200; */
  height: 100%;
  top: 0;
  width: 0.3em;
  background-color: rgb(182, 185, 0);
  border: 1px solid rgb(80, 80, 1);
}

.timeLineToolsTable {
  position: relative;
  /* height: 100%; */
  /* float: left; */
  user-select: none;
}

#timeLineInfoHeaderTable {
  width: 100%;
  height: 100%;
}

#timeLineInfoTable {
  width: 100%;
}

#timeLineTable {
  width: 100%;
}

.timeLineToolHeader {
  background-color: rgb(63, 63, 63);
  z-index: 10;
  color: rgb(163, 163, 163);
  /* font-size: small; */
  font-family: sans-serif;
  height: 2em;
  vertical-align: middle;
  border: 1px solid black;
  width: 100%;
  cursor: pointer;
}

#showHideCellInfoLabel {
  padding-left: 0.5em;
  padding-right: 0.5em;
  text-align: center;
}

.showHideButton {
  font-family: sans-serif;
  font-size: x-small;
  width: 1.6em;
  height: 1.6em;
  text-align: center;
  vertical-align: middle;
  border: 1px solid rgb(86, 86, 86);
  box-shadow: 0 0 0.3em 0.2em rgb(26, 26, 26) inset,
    0 0 0.2em 0.1em rgb(42, 42, 42);
  margin-left: 0.6em;
}

.showHideButton:hover {
  border: 1px solid rgb(146, 146, 146);
  color: rgb(168, 168, 168);
}

.fadeInOutButton {
  width: 1.6em;
  height: 1.1em;
  text-align: center;
  vertical-align: middle;
  border: 1px solid rgb(86, 86, 86);
  box-shadow: 0 0 0.3em 0.2em rgb(26, 26, 26) inset,
    0 0 0.2em 0.1em rgb(42, 42, 42);
  margin-left: 0.7em;
}

#timeLineInforToolHeader {
  cursor: default;
}

.timeLineToolRow {
  left: 0;
  height: 2em;
}

.timeLineEmptyRow {
  flex: 1;
  /* height: -webkit-fill-available; */
}

.showHideCell {
  width: 2em;
}

.slNumCell {
  width: 1em;
  padding-right: 0.5em;
  text-align: center;
}

.timeLinePatternNameCell {
  padding-left: 0.2em;
  width: 18em;
}

.fadeInOutCell {
  width: 2.5em;
}

.timeLineInfoLabel {
  padding-left: 0.5em;
  border-left: 2px solid rgb(37, 37, 37);
}

.fadeInDiv {
  padding-left: 0.2em;
  border-left: 2px solid rgb(37, 37, 37);
}

.fadeOutDiv {
  padding-left: 0.2em;
  border-left: 2px solid rgb(37, 37, 37);
}

.timeLineInfoDetails {
  padding-left: 0.5em;
}

#timelineIndexLabel {
  padding-left: 0.5em;
}

.timeLineItem {
  background-color: rgb(40, 40, 40);
  z-index: 10;
  color: rgb(163, 163, 163);
  /* font-size: small; */
  font-family: sans-serif;
  height: 23px;
  width: 1em;
  vertical-align: middle;
  text-align: left;
  border: 1px solid rgb(21, 21, 21);
  /* width: 100%; */
}

.timeLineItemFocused {
  background-color: rgb(75, 75, 75);
  z-index: 10;
  color: rgb(163, 163, 163);
  /* font-size: small; */
  font-family: sans-serif;
  height: 20px;
  width: 1em;
  vertical-align: middle;
  text-align: left;
  border: 1px solid rgb(21, 21, 21);
  /* width: 100%; */
  box-shadow: 0 0 0.1em 0.1em rgb(117, 117, 117);
}

.timeLineItem:hover {
  border: 1px solid rgb(117, 117, 117);
  box-shadow: 0 0 0.1em 0.1em rgb(117, 117, 117);
}

.timeLineItemFocused:hover {
  border: 1px solid rgb(117, 117, 117);
  box-shadow: 0 0 0.1em 0.1em rgb(117, 117, 117);
}

.timeline {
  font-size: x-small;
}

.timeLineDivision {
  font-size: small;
  color: red;
}

.timelinecell {
  width: 1em;
  padding-left: 0;
}

.emptyTimeLineCell {
  width: 1em;
  color: rgb(58, 58, 58);
}

.emptyTimeLineCell > .timeline {
  color: rgb(63, 63, 63);
}

.timelinestripcell {
  width: 0.5em;
  background-color: rgb(31, 31, 31);
}

.timeLineStripTrack {
  background-color: rgb(31, 31, 31);
  display: flex;
  flex-direction: row;
  height: 2em;
}

.Empty {
  width: 0.5em;
  background-color: rgb(31, 31, 31);
}

.leftEmpty {
  background-color: rgb(31, 31, 31);
  border: none;
  width: 5em;
  height: 100%;
  padding-left: 1em;
  padding-right: 1em;
}

.timelineStrip {
  cursor: default;
}

.timeLineStripPreset {
  background-image: linear-gradient(
    rgb(110, 54, 103) 5%,
    rgb(153, 77, 143) 20%,
    rgb(153, 77, 143),
    rgb(153, 77, 143) 75%,
    rgb(110, 54, 103) 95%
  );
  border: none;
  width: 0.1em;
}

.timelinestripcontainer {
}

.timelineStripContainer:hover {
  stroke: rgb(186, 186, 186) !important;
}

.timeLineStripHidden {
  background-image: linear-gradient(
    rgb(86, 93, 100) 5%,
    rgb(133, 149, 165) 20%,
    rgb(133, 149, 165),
    rgb(133, 149, 165) 75%,
    rgb(86, 93, 100) 95%
  );
  border: none;
  width: 0.1em;
}

.timeLineStripFocused {
  background-image: linear-gradient(
    rgb(60, 110, 160) 5%,
    rgb(117, 186, 255) 20%,
    rgb(143, 199, 255),
    rgb(117, 186, 255) 75%,
    rgb(60, 110, 160) 95%
  );
  border: none;
  width: 0.1em;
}

.timeLineStripPresetFocused {
  background-image: linear-gradient(
    rgb(153, 75, 143) 5%,
    rgb(255, 145, 240) 20%,
    rgb(255, 145, 240),
    rgb(255, 145, 240) 75%,
    rgb(153, 75, 143) 95%
  );
  border: none;
  width: 0.1em;
}

.rightEmpty {
  background-color: rgb(31, 31, 31);
  border: none;
  flex: 1;
  height: 100%;
  padding-left: 1em;
  padding-right: 1em;
}

.leftStripResizer {
  position: relative;
  width: 0.2em;
  height: 1em;
  float: left;
  cursor: ew-resize;
  z-index: 100;
}

.rightStripResizer {
  width: 0.2em;
  height: 1em;
  float: right;
  cursor: e-resize;
}

.panelToolsLabel {
  margin: 0;
  padding-left: 0.3em;
  padding-right: 0.3em;
  background-color: rgb(58, 58, 58);
  border-right: 2px solid rgb(37, 37, 37);
  font-size: smaller;
}

.panelToolsButton {
  margin: 0;
  padding-left: 0.3em;
  padding-right: 0.4em;
  background-color: rgb(58, 58, 58);
  color: rgb(163, 163, 163);
  border-right: 2px solid rgb(37, 37, 37);
  font-size: smaller;
  width: max-content;
}

.panelToolsButton:hover {
  background-color: rgb(98, 98, 98);
}

.panelToolsDropDown {
  margin: 0;
  margin-left: 1em;
  text-align: center;
  padding-left: 1em;
  width: 10em;
  background-image: linear-gradient(
    rgb(51, 51, 51) 5%,
    rgb(58, 58, 58),
    rgb(51, 51, 51) 95%
  );
  border: 2px solid rgb(37, 37, 37);
  border-radius: 0.3em;
  font-size: smaller;
}

.panelToolsDropDown:hover {
  background-image: linear-gradient(
    rgb(58, 58, 58),
    rgb(73, 73, 73),
    rgb(58, 58, 58)
  );
  border: 1px solid rgb(133, 133, 133);
}

.panelToolsDropDown {
  -webkit-appearance: none;
  background-color: rgb(20, 20, 20);
  outline: none;
}

.panelToolsDropDown:hover {
  background-color: rgb(133, 133, 133);
}

.panelToolsDropDown option:hover {
  padding-top: 1em;
  background-color: rgb(20, 20, 20);
  outline: none;
}

.panelToolsDropDownList {
  text-align: left;
  background-color: rgb(44, 44, 44);
  font-size: 1em;
}

.patternsBlock {
  position: relative;
  z-index: 1;
  height: calc(100% - 2em);
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: scroll;
}

.patternList {
  /* position: absolute; */
  /* z-index: 10; */
  top: 0;
  width: 100%;
  /* margin-left: 1em; */
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  opacity: 0.8;
  box-shadow: 0 0 0.5em 0.1em rgb(20, 20, 20);
}

.patternListItem {
  position: relative;
  /* z-index: 10; */
  background-color: rgb(20, 20, 20);
  color: white;
  font: small;
  padding-left: 1em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

.patternListItem:hover {
  background-color: gray;
}

.patternsContainer {
  /* position: absolute; */
  /* z-index: 1; */
  top: 0;
  width: 100%;
}

.saveAsNameForm {
  position: absolute;
  background-color: rgb(20, 20, 20);
  color: rgb(187, 187, 187);
  opacity: 0.95;
  padding: 0.5em 1em 1em 1em;
  border-radius: 3%;
  z-index: 1001;
  top: 3em;
  left: 2em;
  overflow-x: hidden;
  overflow-y: hidden;
  border: 1px solid rgb(20, 20, 20);
  box-shadow: 0 0 1em 0.5em rgb(26, 26, 26);
}

.saveAsNamehead {
  padding-bottom: 0.2em;
  padding-right: 11em;
  color: rgb(172, 172, 172);
  border-bottom: 1px solid rgb(139, 139, 139);
  opacity: 0.5;
  margin-bottom: 1em;
}

.input-text {
  text-decoration: none;
  background-color: rgb(226, 226, 226);
  border-radius: 0.2em;
  height: 2em;
  color: black;
}

.saveButton {
  height: 1.8em;
  width: 100%;
  margin-top: 1em;
}

.saveButton:hover {
  background-color: rgb(86, 170, 255);
}

.patternsListBlock {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  user-select: none;
}

.focusedPattern {
  border: 1px solid dodgerblue;
  position: relative;
  z-index: 1;
  margin: 0.5em 0;
  width: 100%;
  background-color: rgb(36, 36, 36);
  border: 1px solid rgb(162, 208, 255);
  box-shadow: 0 0 0.3em 0.2em rgb(85, 85, 85);
  user-select: none;
}

.focusedPattern:hover {
  box-shadow: 0 0 0.3em 0.2em rgb(121, 121, 121);
}

.patternBlock {
  position: relative;
  z-index: 1;
  margin: 0.6em 0;
  width: 100%;
  background-color: rgb(36, 36, 36);
  border: 1px solid rgb(65, 65, 65);
  box-shadow: 0 0 0.5em 0.3em rgb(20, 20, 20);
  user-select: none;
}

.patternBlock:hover {
  border: 1px solid rgb(87, 87, 87);
  box-shadow: 0 0 0.2em 0.1em rgb(121, 121, 121);
}

.patternHeaderTable {
  width: 100%;
}

.patternHeader {
  background-color: rgb(47, 47, 47);
}

.patternHeaderActive {
  background-color: dodgerblue;
  color: white;
  border-bottom: 1px solid rgb(20, 20, 20);
}

.patternHeaderActive:hover {
  background-color: dodgerblue;
}

.patternExpandCollapseCell {
  padding-left: 0.5em;
  width: 5%;
}

.patternExpandCollapseCell:hover {
  color: white;
}

.patternNameCell {
  padding-left: 1em;
  padding-right: 0.2em;
  width: 70%;
}

.patternRemoveCell {
  float: right;
  width: 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.patternPreviewCell {
  padding-right: 1em;
  margin-top: 0.2em;
  /* font-family: sans-serif; */
  font-size: larger;
  vertical-align: middle;
}

.patternPreviewCellDisabled:hover {
  color: white;
}

.patternPreviewCellDisabled {
  padding-right: 1em;
  margin-top: 0.2em;
  /* font-family: sans-serif; */
  font-size: larger;
  vertical-align: middle;
  color: #474747;
}

.patternRemoveCell:hover {
  color: rgb(255, 53, 53);
}

.patternOptionBlock {
  padding-top: 0.5em;
  padding-left: 1em;
  padding-right: 0.1em;
  padding-bottom: 0.5em;
  background-color: #1f1f1f;
  max-height: fit-content;
  min-height: 0px;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
}

.patternOptionRow {
  height: 2.2em;
}

.patternOption {
  width: 100%;
}

.patternPaletteOptionInput {
  width: calc(90% - 1.6em);
  margin-right: 1em;
}

.patternOptionInput {
  width: 90%;
  margin-right: 1em;
}

.patternImage {
  width: 100%;
}

.patternFontSelect {
  border-radius: 0.5em;
  width: inherit;
  color: rgb(46, 46, 46);
  outline: none;
  background-color: rgb(204, 204, 204);
}

.patternPaletteEditorButton {
  /* float: right; */
  height: 100%;
  width: 1.6em;
  border: 1px solid #6a6a6a;
  outline: none;
  text-align: center;
  background-color: #4c4c4c;
  cursor: pointer;
  color: #c5c5c5;
  border-radius: 0.3em;
  margin-left: 0.5em;
}

.patternPaletteEditorButton:hover {
  background-color: #656565;
  border: 1px solid #878787;
}

.patternRangeSelector {
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  width: 90%;
  height: 80%;
  cursor: pointer;
  border-radius: 0.5em;
  border: 1px solid rgb(131, 131, 131);
  box-shadow: 0 0 0.2em 0.2em rgb(46, 46, 46) inset;
}

.rangeSelectorContainer {
  position: relative;
  height: 1.4em;
  display: block;
  width: 90%;
  cursor: e-resize;
  background-color: #7a7a7a;
  border-radius: 0.4em;
  box-shadow: 0 0 0 1px #646464;
  overflow: hidden;
}

.rangeSelectorContainer:hover {
  background-color: rgb(168, 168, 168);
}

.rangeSelectorSlider {
  position: absolute;
  background-color: #3c3c3c;
  height: 1.4em;
  width: 100%;
  border-top-left-radius: 0.4em;
  border-bottom-left-radius: 0.4em;
  transition: 0.1s;
  z-index: 10;
}

.rangeSelectorValueDiv {
  position: absolute;
  margin: auto;
  width: 100%;
  z-index: 20;
  color: rgb(255, 255, 255);
}
.rangeSelectorValue {
  position: relative;
  margin: auto;
  width: 5em;
  display: block;
  text-align: center;
}

.rangeSelectorInput {
  width: 100%;
  height: 90%;
  color: black;
  background-color: rgb(168, 168, 168);
  display: inline;
  padding-left: 0.2em;
  padding-right: 0.2em;
  border-radius: 0.4em;
  /* margin-right: 0.5em; */
}

.rangeSelectorInput:focus {
  outline: 0;
}

.rangeSelectorStepLeft {
  display: none;
  position: absolute;
  width: 1.2em;
  z-index: 30;
  cursor: default;
  transition: 0.1s;
}

.rangeSelectorStepRight {
  display: none;
  position: absolute;
  right: 0;
  width: 1.2em;
  z-index: 30;
  cursor: default;
  transition: 0.1s;
}

.rangeSelectorStepRight:hover {
  background-color: #757575;
}

.rangeSelectorStepLeft:hover {
  background-color: #757575;
}

.rangeSelectorContainer:hover .rangeSelectorStepLeft {
  display: block;
}

.rangeSelectorContainer:hover .rangeSelectorStepRight {
  display: block;
}

.customColorPaletteBlock {
  background-color: #141414;
  border-radius: 0.5em;
}

.customColorPaletteTable {
  margin: 0.5em;
}

.customColorPaletteButton {
  margin: 0;
  background-color: rgb(58, 58, 58);
  color: rgb(163, 163, 163);
  font-size: smaller;
  width: 100%;
  display: flex;
  justify-content: center;
}

.customColorPaletteButton:hover {
  background-color: rgb(98, 98, 98);
}

.customColorPaletteRemoveButton {
  margin: 0;
  background-color: rgb(185, 15, 15);
  color: rgb(163, 163, 163);
  font-size: smaller;
  width: 100%;
  display: flex;
  justify-content: center;
}

.customColorPaletteRemoveButton:hover {
  background-color: rgb(216, 47, 47);
}

::-webkit-slider-runnable-track {
  background-image: linear-gradient(#252525, #313131, #252525);
  border-radius: 0.5em;
}

/*
* 1. Set to 0 width and remove border for a slider without a thumb
*/
::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 1em;
  background: rgb(179, 179, 179);
  box-shadow: 100vw 0 0 100vw rgb(170, 170, 170);
}

::-moz-range-track {
  height: 1em;
  background: rgb(179, 179, 179);
}

::-moz-range-thumb {
  background: rgb(179, 179, 179);
  height: 1em;
  width: 0px;
  border: 0px solid #999;
  border-radius: 0 !important;
  box-shadow: -100vw 0 0 100vw rgb(42, 42, 42);
  box-sizing: border-box;
}

::-ms-fill-lower {
  background: rgb(42, 42, 42);
}

::-ms-thumb {
  background: rgb(179, 179, 179);
  border: 0px solid #999;
  height: 1em;
  width: 0px;
  box-sizing: border-box;
}

::-ms-ticks-after {
  display: none;
}

::-ms-ticks-before {
  display: none;
}

::-ms-track {
  background: rgb(179, 179, 179);
  color: transparent;
  height: 1em;
  border: none;
}

::-ms-tooltip {
  display: none;
}

.colorSelector {
  padding-right: 5em;
  padding-bottom: 0.1em;
  padding-top: 0.1em;
  background-color: black;
  border-radius: 0.4em;
  box-shadow: 0 0 0.2em 0.1em rgb(44, 44, 44) inset;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.numberInput {
  width: 5em;
  height: 90%;
  color: black;
  background-color: rgb(204, 204, 204);
  display: inline;
  padding-left: 0.2em;
  padding-right: 0.2em;
  border-radius: 0.4em;
  margin-right: 0.5em;
}

.numberInput:focus {
  outline: 0;
}

.textInput {
  width: 100%;
  height: 90%;
  color: black;
  background-color: rgb(204, 204, 204);
  display: block;
  padding-left: 0.2em;
  padding-right: 0.2em;
  border-radius: 0.4em;
}

/* Pattern Specific Styles */
.patternSpecificContainer {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.contextMenu {
  background-color: #141414;
  color: rgb(231, 231, 231);
  z-index: 1100;
  padding-top: 1em;
  padding-bottom: 1em;
  border: 1px solid #1a1a1a;
  box-shadow: 0 0 0.5em 0.1em #101010;
  border-radius: 0.3em;
}

.contextMenuSeparator {
  margin-bottom: 0.3em;
  border-bottom: 1px solid rgb(96, 96, 96);
  margin-left: 0.6em;
  margin-right: 0.6em;
}

.contextMenuItemLabel {
  font-size: inherit;
  cursor: default;
}

.contextMenuItemShort {
  color: #616161;
  font-size: smaller;
  float: right;
  cursor: default;
}

.contextMenuItem {
  padding: 0.3em 1em;
}

.contextMenuItemDisabled {
  padding: 0.3em 1em;
  color: #616161;
}
.contextMenuItem:hover {
  background-color: #1e88e5;
  color: white;
}

.contextMenuItem:hover .contextMenuItemShort {
  color: white;
}

#timeLineStripContext {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  height: fit-content;
  width: 18em;
}

#patternPanelContext {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  height: fit-content;
  width: 18em;
}

#paletteEditorContext {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  height: fit-content;
  width: 18em;
}

#contextMenuPatternList {
  display: none;
  height: 20em;
  overflow-y: scroll;
}

#contextMenuPatternList:hover {
  margin-left: 95%;
  z-index: 1000;
  display: block;
}

#addNewMenuItem:hover ul {
  position: absolute;
  top: -10em;
  margin-left: 95%;
  z-index: 1000;
  display: block;
}

/* popover component */

.popover__content {
  position: absolute;
  transform: translate(0, 10px);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  background-color: #000000;
}
.popover__content:before {
  position: absolute;
  z-index: -1;
  content: '';
  left: 108px;
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #000000;
  transition-duration: 0.3s;
  transition-property: transform;
}

/* nav-bar styling */
.flyout-nav ul {
  margin: 0;
  padding: 0.25rem 0;
  position: absolute;
  display: none;
  list-style-type: none;
  white-space: nowrap;
  background: rgba(235, 235, 235, 1);
  border: 1px solid rgba(235, 235, 235, 0.8);
  box-shadow: 2px 2px 3px -3px #333;
  border-radius: 0.5rem;
  transform: translateY(-0.25rem);
  /* z-index: 2999; */
}
.flyout-nav li {
  position: relative;
  display: block;
}
.flyout-nav li.separator {
  margin-bottom: 0.25rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.25rem;
}
.flyout-nav li a {
  text-decoration: none;
  color: #333;
  position: relative;
  display: table;
  width: 100%;
}
.flyout-nav li a .label,
.flyout-nav li a .shortcut {
  display: table-cell;
  padding: 0.25rem 1rem 0.25rem 1.75rem;
}
.flyout-nav li a .shortcut {
  text-align: right;
  color: #999;
}
.flyout-nav li a label {
  cursor: pointer;
}
.flyout-nav li a input[type='checkbox'] {
  display: none;
}
.flyout-nav li a input[type='checkbox']:checked + .label:before {
  content: '✔️';
  position: absolute;
  top: 0;
  left: 0.35rem;
}
.flyout-nav li a:hover,
.flyout-nav li.open > a {
  background: #1e88e5;
}
.flyout-nav li a:hover .label,
.flyout-nav li a:hover .shortcut,
.flyout-nav li.open > a {
  color: #fff;
}
.flyout-nav li.has-children > a {
  margin-right: 2.5rem;
}
.flyout-nav li.has-children > a:after {
  content: '▶';
  text-align: right;
  position: absolute;
  right: 0;
  padding: 0.25rem 1rem 0.25rem 1.75rem;
}
.flyout-nav li.disabled {
  pointer-events: none;
}
.flyout-nav li.disabled .label,
.flyout-nav li.disabled .shortcut {
  color: #999;
}
.flyout-nav li.open > ul {
  display: block;
  top: -1px;
  left: 100%;
}
.flyout-nav > ul {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  border-bottom: 1px solid rgba(235, 235, 235, 0.8);
  box-shadow: 2px 2px 3px -3px #333;
  border-radius: 0;
  padding: 0;
  transform: translateY(0);
}
.flyout-nav > ul > li > a > .label {
  padding-left: 1rem;
}
.flyout-nav > ul > li.open > ul {
  top: 100%;
  left: -1px;
  border-radius: 0 0 0.5rem 0.5rem;
  padding-top: 0;
  transform: translateY(0);
}

#export-status-container-id {
  z-index: 2000;
}
.export-status-container {
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(41, 42, 45, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(
    center,
    ellipse cover,
    rgba(41, 42, 45, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  ); /* Opera 12+ */
  background: -ms-radial-gradient(
    center,
    ellipse cover,
    rgba(41, 42, 45, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  ); /* IE10+ */
  background: radial-gradient(
    ellipse at center,
    rgba(41, 42, 45, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  ); /* W3C */
}

.export-status-container > ul {
  height: 10px;
  /* position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; */
  list-style: none;
  padding: 0;
}
.export-status-container li {
  display: block;
  float: left;
  width: 90px;
  height: 10px;
  margin-right: 10px;
}
.export-status-container li.completed {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5),
    0px 0px 20px rgba(117, 182, 214, 0.5);
}
.export-status-container li {
  box-shadow: inset 0px 0px 10px 1px rgba(117, 182, 255, 0.4),
    0px 0px 20px rgba(117, 182, 255, 0.1);
}
.export-status-container li.pulsate {
  background: rgba(255, 255, 255, 0.9);
  -webkit-animation: pulse 1s alternate infinite;
  -moz-animation: pulse 1s alternate infinite;
}
@-webkit-keyframes pulse {
  0% {
    background: white;
    box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5),
      0px 0px 40px 2px #6987ff;
  }
  100% {
    background: rgba(255, 255, 255, 0);
    box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5),
      0px 0px 30px 2px rgba(105, 135, 255, 0.3);
  }
}
@-moz-keyframes pulse {
  0% {
    background: white;
    box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5),
      0px 0px 40px 2px #6987ff;
  }
  100% {
    background: rgba(255, 255, 255, 0);
    box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5),
      0px 0px 30px 2px rgba(105, 135, 255, 0.3);
  }
}

.p5Canvas {
  display: none;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 3.1em;
  height: 3.1em;
}
.loader {
  display: inline-block;
  position: relative;
  margin: 0;
  text-indent: -9999em;
  border: 0.5em solid rgba(255, 255, 255, 0.2);
  /* border-top: 1.1em solid rgba(255, 255, 255, 0.2); */
  /* border-right: 1.1em solid rgba(255, 255, 255, 0.2); */
  /* border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); */
  border-left: 0.5em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#compassContainer {
  position: absolute;
  right: 0;
  top: 10px;
  height: 7em;
  width: 7em;
  opacity: 0.5;
  transition: 0.5s;
  user-select: none;
}
#compassContainer:hover{
  opacity: 1;
}
#compass{
  position: absolute;
  top:11px;
  right: 13px;
}

#viewManagerContainer{
  position: absolute;
  right: 0;
  top: calc(10px + 7em);
  user-select: none;
}

#openViewManager{
  color: white;
  background-color: #686868;
  width: 1.2em;
  height: 1.5em;
  font-weight: bolder;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  border-radius: 0.3em 0 0 0.3em;
  opacity: 0.4;
  transition: 0.2s;
}
#openViewManager:hover{
  border-top: 1px solid rgb(223, 223, 223);
  border-left: 1px solid rgb(223, 223, 223);
  border-bottom: 1px solid rgb(223, 223, 223);
  opacity: 0.8;
}

#favViewContainer{
  position: absolute;
  right: 0;
  top: calc(10px + 10em);
  width: 3em;
}

.favView{
  background: #dfdfdf;
  color: black;
  font-size: 1.1em;
  font-weight: bold;
  height: 1.8em;
  width: 1.8em;
  padding-top: 0.2em;
  margin-bottom: 1em;
  opacity: 0.3;
  border-radius: 50%;
  margin-left: 0.2em;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  user-select: none;
}
.favView:hover{
  opacity: 0.9;
  margin-left: 0em;
}

#viewManagerWindowContainer{
  position: absolute;
  top: calc(10px + 7em);
  right: 0;
  height: 25em;
  width: 20em;
  border: 1px solid #4f4f4f;
  border-radius: 0.3em;
  background-color: rgb(40,40,40);
  color: rgb(196,196,196);
  opacity: 0.9;
}

#addFavoriteBlock{
  height: 5em;
  width: 100%;
  display: block;
}

.addFavoriteButtonInactive{
  width: 100%;
  border-radius: 0.3em;
  height: 2em;
  color: #878787;
  margin-top: 0.4em;
  background: #3a3a3a;
  border: 1px solid #1d1d1d;
  cursor: default;
}

.addFavoriteButton{
  width: 100%;
  border: 1px solid #1d1d1d;
  border-radius: 0.3em;
  height: 2em;
  margin-top: 0.4em;
  background: #525357;
}

.addFavoriteButton:hover{
  color: white;
  background-color: #656565;
  border: 1px solid #222222;
}

.activeViewListItem{
  margin: auto;
  width: 97%;
  height: 2em;
  background-color: #585858;
  color: #ffffff;
  margin: 0.2em;
  border: 1px solid #848484;
  padding-left: 1em;
  padding-top: 0.1em;
  cursor: default;
  border-radius: 0.2em;
}

.viewListItem{
  margin: auto;
  width: 97%;
  height: 2em;
  background-color: #353535;
  color: #c6c6c6;
  margin: 0.2em;
  border: 1px solid #121212;
  padding-left: 1em;
  padding-top: 0.1em;
  cursor: default;
  border-radius: 0.2em;
  transition: 0.2s;
}
.viewListItem:hover {
  border: 1px solid #848484;
  color: #ffffff;
}

.removeViewButton{
  float: right;
  height: 100%;
  opacity: 0.8;
  transition: 0.2s;
  user-select: none;
}
.removeViewButton:hover{
  opacity: 1;
}

.notification-bg {
  background-color: #3a3a3a;
}

.cameraViewButton {
  margin: 0;
  background-color: rgb(58, 58, 58);
  color: rgb(163, 163, 163);
  font-size: smaller;
  width: 100%;
}

button > img {
  user-select: none;
}