body {
  background-color: #191929;
  margin: 0;
  font-family: "Lato", sans-serif;
  line-height: 1.5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 14px;
}

@media screen and (min-width: 2141px) {
  .LargeText {
    font-size: 30px;
  }

  .SmallText {
    font-size: 18px;
  }
}

@media screen and (max-width: 2140px) {
  .LargeText {
    font-size: 26px;
  }

  .SmallText {
    font-size: 14px;
  }
}

@media screen and (max-width: 1740px) {
  .LargeText {
    font-size: 22px;
  }

  .SmallText {
    font-size: 12px;
  }
}

@media screen and (max-width: 1430px) {
  .LargeText {
    font-size: 18px;
  }

  .SmallText {
    font-size: 12px;
  }
}

.OverlayWelcomeWindow {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  background-color: #000;
  z-index: 99956;
  display: none;
  opacity: 0;
}

.OverlayAppWindow {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  background-color: #000;
  z-index: 99954;
  display: none;
  opacity: 0;
}

.OverlayMsgWindow {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  background-color: #000;
  z-index: 99952;
  display: none;
  opacity: 0;
}

.OverlayWindow {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  background-color: #000;
  z-index: 99950;
  display: none;
  opacity: 0;
}

.Window {
  width: 40%;
  min-width: 340px;
  margin: 0 auto;
  position: absolute;
  background-color: #191929;
  color: #fffffe;
  overflow: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  display: none;
  opacity: 0;
}

.WindowTitle {
  width: 100%;
  padding: 2% 0;
  text-align: center;
  font-size: 14pt;
  background-color: #12121e;
}

.WindowMessage {
  padding: 5%;
  text-align: center;
}

.Buttons {
  padding: 5%;
  text-align: center;
}

.Button {
  position: relative;
  display: inline-block;
  margin: 0 10px 10px 10px;
  padding: 10px;
  min-width: 160px;
  text-align: center;
  font-size: 16px;
}

.ButtonColourStandard {
  background-color: #12121e;
  color: #fffffe;
}

.ButtonColourStandardHover {
  background-color: #30344f;
  color: #fffffe;
  cursor: pointer;
}

.ButtonPushed {
  padding: 6px;
  margin: 4px 14px 14px 14px;
}

.ButtonColourGreen {
  background-color: #00b67a;
  color: #fffffe;
}

.ButtonColourGreenHover {
  background-color: #06c888;
  color: #fffffe;
}

.ButtonColourGreenPushed {
  background-color: #fffffe;
  color: #fffffe;
}

.ButtonColourRed {
  background-color: #ff2b35;
  color: #00b67a;
}

.ButtonColourRedHover {
  background-color: #f44f57;
  color: #fffffe;
}

.ButtonColourRedPushed {
  background-color: #fffffe;
  color: #ff2b35;
}

.MsgWindowButtonOkay,
.MsgWindowButtonCancel,
.AppWindowButtonOkay,
.AppWindowButtonCancel {
  display: none;
}

.WelcomeWindow {
  width: 80%;
  min-width: 500px;
  max-width: 1000px;
  z-index: 99957;
}

.WelcomeImage {
  height: 100%;
  width: 100%;
  position: relative;
  display: inline-block;
  padding-top: 30px;
  text-align: center;
}

.PixelRichieImage img {
  height: 100%;
  width: auto;
}

.AppWindow {
  z-index: 99955;
}

.MsgWindow {
  z-index: 99953;
}

.MsgWindowDisableOverlay {
  z-index: 99953;
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
}

.MsgHighlightedText {
  color: #00b67a;
}

.ActivityWindow {
  width: 80%;
  min-width: 500px;
  max-width: 1000px;
  z-index: 99951;
}

.ActivitySelection {
  min-height: 150px;
  position: relative;
}

.ActivityTopics,
.ActivityItems {
  min-height: 100%;
}

.ActivityTopics {
  min-height: 150px;
  max-height: 200px;
  position: relative;
  display: inline-block;
  padding: 20px 0 40px 0;
  vertical-align: top;
  background-color: #434374;
  overflow-y: scroll;
}

.ActivityItems {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #2a2a47;
  overflow-y: scroll;
}

.ActivityItems::-webkit-scrollbar-track {
  border: 1px solid #2a2a47;
  background-color: #2a2a47;
}

.ActivityTopics::-webkit-scrollbar-track {
  border: 1px solid #434374;
  background-color: #434374;
}

.ActivityItems::-webkit-scrollbar,
.ActivityTopics::-webkit-scrollbar {
  width: 12px;
  background-color: #2a2a47;
}

.ActivityItems::-webkit-scrollbar-thumb,
.ActivityTopics::-webkit-scrollbar-thumb {
  width: 8px;
  background-color: #6060a4;
}

.ActivityItems::-webkit-scrollbar-corner,
.ActivityTopics::-webkit-scrollbar-corner {
  background-color: #2a2a47;
}

.ActivityTopic,
.ActivityItem {
  display: block;
  padding: 10px 20px;
}

.ActivityItemPage {
  width: 100%;
  padding: 20px 0 40px 0;
  position: absolute;
  background-color: #2a2a47;
  display: none;
}

.ActivityTopicHover {
  background-color: #4e4e85;
  cursor: pointer;
}

.ActivityTopicSelect {
  background-color: #5a5a9c;
  cursor: pointer;
}

.ActivityItemHover {
  background-color: #333357;
  cursor: pointer;
}

.ActivityItemSelect {
  background-color: #6060a4;
  cursor: pointer;
}

.ActivityWindowDescription {
  padding: 20px 30px 40px 30px;
  height: 50px;
  text-align: left;
  overflow-y: scroll;
}

.ActivityWindowDescription::-webkit-scrollbar-track {
  border: 1px solid #191929;
  background-color: #191929;
}

.ActivityWindowDescription::-webkit-scrollbar {
  width: 12px;
  background-color: #191929;
}

.ActivityWindowDescription::-webkit-scrollbar-thumb {
  width: 8px;
  background-color: #6060a4;
}

.ActivityWindowDescription::-webkit-scrollbar-corner {
  background-color: #191929;
}

.AppHeader {
  width: 100%;
  min-width: 1000px;
  position: relative;
  z-index: 99940;
}

.ActivityPanel {
  width: 100%;
  min-width: 1000px;
  height: auto;
  position: absolute;
  bottom: 0;
  z-index: 99940;
  color: #fffffe;
  background-color: #434374;
  display: none;
}

.ActivityText {
  font-size: 14pt;
  padding: 20px 5%;
}

.StatusPanel {
  width: 100%;
  min-width: 1000px;
  height: auto;
  position: absolute;
  bottom: 0;
  z-index: 99950;
  color: #fffffe;
  background-color: #434374;
  display: none;
}

.StatusText {
  font-size: 14pt;
  padding: 20px 5%;
}

.AppHeaderColour {
  background-color: #12121e;
}

.AppTitle {
  height: 70px;
  line-height: 70px;
  position: relative;
  margin: 0 50px;
  display: inline-block;
  font-size: 20pt;
  color: #6874ff;
}

.AppMenu {
  height: 70px;
  line-height: 70px;
  position: relative;
  vertical-align: top;
  margin: 0 50px;
  top: 0;
  display: inline-block;
  font-size: 14pt;
  color: #87849e;
}

.ActivityDetails {
  width: 100%;
  min-height: 40px;
  position: relative;
  background-color: #434374;
  overflow: hidden;
  z-index: 99940;
  display: none;
}

.ActivityProgress {
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00b67a;
  z-index: 99941;
}

.ActivityName {
  width: 90%;
  line-height: 30px;
  padding: 5px 5%;
  position: relative;
  color: #fffffe;
  font-size: 14pt;
  z-index: 99942;
}

.AppToolBar {
  width: 90%;
  margin: 20px 5% 0 5%;
  position: relative;
  vertical-align: middle;
  overflow: hidden;
  z-index: 99940;
}

.AppTool {
  margin: 0 auto;
  padding: 10px 20px;
  position: absolute;
  display: flex;
  justify-content: center;
}

.SelectColumn {
  margin: 0 5px;
}

.SelectColourTool {
  left: 0;
}

.SelectNoteTool {
  right: 0;
}

.SelectNoteOption {
  width: 34px;
  height: 34px;
  line-height: 34px;
  margin: 0 2px;
  font-size: 16pt;
  display: inline-block;
  color: #fffffe;
  background-color: #12121e;
  text-align: center;
  overflow: hidden;
}

.NoteOptionHover {
  background-color: #4e4e85;
  cursor: pointer;
}

.NoteOptionSelect {
  background-color: #5a5a9c;
  cursor: pointer;
}

.SelectNoteOptionHigherNumber {
  display: none;
}

.SelectButton {
  width: 34px;
  height: 34px;
  line-height: 34px;
  margin: 0 2px;
  display: inline-block;
  align-items: center;
  justify-content: center;
  background-color: #12121e;
  text-align: center;
  overflow: hidden;
}

.SelectHover {
  background-color: #4e4e85;
  cursor: pointer;
}

.SelectSelect {
  background-color: #5a5a9c;
  cursor: pointer;
}

.SelectNotes {
  font-size: 20pt;
  color: #c5c5c5;
}

.SelectSubNotes {
  font-size: 20pt;
  color: #c5c5c5;
}

.SelectUndo {
  font-size: 20pt;
  color: #c5c5c5;
}

.SelectClear {
  font-size: 12pt;
  color: #fff;
}

.SelectNoteOptionScreenShot {
  font-size: 16pt;
  color: #fff;
  line-height: 30px;
}

.SelectColourOption {
  width: 30px;
  height: 30px;
  margin: 0 2px;
  display: inline-block;
}

.SelectColourOptionHover {
  cursor: pointer;
}

.ColourOption0 {
  background-color: #fffffe;
  color: #222;
}

/* Dark */

.SelectColourOption1 {
  background-color: #000000;
  border: 2px solid #000000;
}

.ColourOption1 {
  background-color: #000000;
  color: #fff;
}

.SelectColourOption2 {
  background-color: #003366;
  border: 2px solid #003366;
}

.ColourOption2 {
  background-color: #003366;
  color: #fff;
}

.SelectColourOption3 {
  background-color: #006600;
  border: 2px solid #006600;
}

.ColourOption3 {
  background-color: #006600;
  color: #fff;
}

.SelectColourOption4 {
  background-color: #660066;
  border: 2px solid #660066;
}

.ColourOption4 {
  background-color: #660066;
  color: #fff;
}

.SelectColourOption5 {
  background-color: #990000;
  border: 2px solid #990000;
}

.ColourOption5 {
  background-color: #990000;
  color: #fff;
}

.SelectColourOption6 {
  background-color: #663300;
  border: 2px solid #663300;
}

.ColourOption6 {
  background-color: #663300;
  color: #fff;
}

.SelectColourOption7 {
  background-color: #f37e11;
  border: 2px solid #f37e11;
}

.ColourOption7 {
  background-color: #f37e11;
  color: #fff;
}

.SelectColourOption8 {
  background-color: #006666;
  border: 2px solid #006666;
}

.ColourOption8 {
  background-color: #006666;
  color: #fff;
}

/* Light */

.SelectColourOption9 {
  background-color: #a2a2a2;
  border: 2px solid #a2a2a2;
}

.ColourOption9 {
  background-color: #a2a2a2;
  color: #222;
}

.SelectColourOption10 {
  background-color: #6699cc;
  border: 2px solid #6699cc;
}

.ColourOption10 {
  background-color: #6699cc;
  color: #222;
}

.SelectColourOption11 {
  background-color: #66cc66;
  border: 2px solid #66cc66;
}

.ColourOption11 {
  background-color: #66cc66;
  color: #222;
}

.SelectColourOption12 {
  background-color: #cc66cc;
  border: 2px solid #cc66cc;
}

.ColourOption12 {
  background-color: #cc66cc;
  color: #222;
}

.SelectColourOption13 {
  background-color: #ff6666;
  border: 2px solid #ff6666;
}

.ColourOption13 {
  background-color: #ff6666;
  color: #222;
}

.SelectColourOption14 {
  background-color: #cc9966;
  border: 2px solid #cc9966;
}

.ColourOption14 {
  background-color: #cc9966;
  color: #222;
}

.SelectColourOption15 {
  background-color: #e7d90d;
  border: 2px solid #e7d90d;
}

.ColourOption15 {
  background-color: #e7d90d;
  color: #222;
}

.SelectColourOption16 {
  background-color: #66cccc;
  border: 2px solid #66cccc;
}

.ColourOption16 {
  background-color: #66cccc;
  color: #222;
}

.SelectColourOptionSelected {
  border: 2px solid #fffffe;
}

.SelectColourOptionSelectedDark {
  border: 2px solid #222;
}

.DropDownOption {
  position: relative;
  min-width: 100px;
  display: inline-block;
  text-align: center;
}

.DropDownOptionHover {
  background-color: #191929;
  color: #fffffe;
  cursor: pointer;
}

.DropDownOption {
  position: relative;
  display: inline-block;
}

.DropDownContent {
  position: absolute;
  background-color: #191929;
  color: #8785a1;
  min-width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 99941;
  display: none;
}

.DropDownSubOption {
  padding: 0 20px;
  text-align: left;
}

.DropDownSubOptionHover {
  background-color: #30344f;
  color: #fffffe;
}

.Disabled {
  opacity: 0.5;
  cursor: default;
}

.GuitarBox {
  width: 100%;
  position: absolute;
  text-align: center;
}

.Guitar {
  width: 100%;
  max-width: 80%;
  min-width: 1000px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  -webkit-transform: translatey(-50%);
  -ms-transform: translatey(-50%);
  transform: translatey(-50%);
  overflow: hidden;
  opacity: 0;
}

.ScreenShotArea {
  width: 100%;
}

.Fretboard {
  width: 100%;
}

.Neck {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.FretBoardColour {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #53371d;
}

.Frets,
.NoteGrid {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: left;
}

.NoteGrid {
  left: 4px;
}

.Strings {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  text-align: left;
  z-index: 1010;
}

.String {
  width: 100%;
  position: relative;
  background-repeat: repeat-x;
  background-position: center;
}

.FirstString {
  background-image: url("../images/first-string.png");
}

.SecondString {
  background-image: url("../images/second-string.png");
}

.ThirdString {
  background-image: url("../images/third-string.png");
}

.FourthString {
  background-image: url("../images/fourth-string.png");
}

.FifthString {
  background-image: url("../images/fifth-string.png");
}

.SixthString {
  background-image: url("../images/sixth-string.png");
}

.Fret,
.NutFret {
  height: 100%;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.Fret {
  border-left: 2px solid #919191;
  z-index: 1000;
}

.GuitarFret.Fret1 {
  border-left: 4px solid #919191;
}

.OutFM {
  width: 100%;
  height: 30px;
  position: relative;
  text-align: left;
  left: 5px;
  color: #fffffe;
  vertical-align: top;
  overflow: hidden;
}

.OutFMBox {
  height: 30px;
  vertical-align: top;
  text-align: center;
  position: relative;
  display: inline-block;
  font-size: 16px;
}

.MarkerBox,
.DoubleMarkerBox {
  position: absolute;
  margin: 0 auto;
}

.Marker {
  background-color: #919191;
  -o-border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  opacity: 0.8;
}

.QuestionNote {
  z-index: 2010;
}

.NameNote {
  z-index: 2020;
}

.SelectableNote,
.SelectableMutedNote {
  z-index: 2030;
}

.SubNote {
  z-index: 2040;
}

.TuneNote {
  z-index: 2050;
}

.InterfaceNote {
  z-index: 2060;
}

.StringRow {
  width: 100%;
  position: relative;
}

.InterfaceNote,
.NoteBox {
  height: 100%;
  position: relative;
  display: inline-block;
}

.HoverCursor {
  cursor: pointer;
}

/*
.InterfaceLightHover {
  background-color: #fffffe;
  opacity: 0.5;
}

.InterfaceDarkHover {
  background-color: #222;
  opacity: 0.5;
}
*/

.Note {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  text-align: center;
  -o-border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border: 1px solid #222;
  opacity: 0;
}

.SelectableMutedNote {
  color: #fffffe;
  border: 1px solid #191929;
}

.SelectableMutedNoteDark {
  color: #222;
  border: 1px solid #fffffe;
}

.NameNote {
  background-color: #fffffe;
}

.NoteLabel,
.QuestionLabel,
.SubNoteLabel {
  position: relative;
}

.TuneNote {
  background-color: #6874ff;
  color: #fffffe;
}

.QuestionNote {
  background-color: #434374;
  color: #fffffe;
}

.Correct {
  background-color: #00b67a;
  color: #fffffe;
}

.Incorrect {
  background-color: #ff2b35;
  color: #fffffe;
}

.QuestionNote .NoteLabel {
  display: none;
}

.SubNote {
  position: absolute;
  -o-border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border: 1px solid #222;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}