/* Theme DropDown Styling */

#themedropdown {
  background-color: transparent;
  box-shadow: none;
  display: flex;
  transform: translateX(-25%) !important;
}

#themedropdown a {
  color: #2196F3;
  transition: all 0.3s ease;
}

#themedropdown a:hover {
  color: #1E88E5;
  background-color: transparent;
  transition: all 0.3s ease;
}


/* Dark Mode */

.dark .blue {
  background-color: #022363 !important;
}

.dark #canvas {
  background-color: #1c1c1c !important;
}

.dark .blue.darken-1 {
  background-color: #01143b !important;
}

.dark #floatingWindows>.windowFrame {
  border: 2px solid #000000;
  background-color: #454545;
}

.dark .wfbtItem {
  background-color: #225a91;
}

.dark #floatingWindows>.windowFrame>.wfTopBar .wftTitle {
  color: #e8e8e8;
}

.dark .popupMsg {
  background-color: #084e86;
  color: #e8e8e8;
}

.dark #printText {
  border-color: #000000;
}

.dark #loading-image-container {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
}

.dark #loadingText {
  color: white !important;
}

.dark .language-link {
  color: #fff;
}

.dark .modal-content {
  background-color: #1c1c1c;
  color: #fff;
}

.dark #submitLilypond {
  background-color: rgb(0, 102, 255);
}

.dark #search,
#helpfulSearch,
.ui-autocomplete {
  background-color: #1c1c1c !important;
  color: #fff !important;
}

.dark .ui-autocomplete li:hover {
  background-color: #225a91 !important;
}

.dark #helpfulSearchDiv {
  background-color: transparent !important;
}

.dark #crossButton {
  color: #fff;
}

.dark #chooseKeyDiv {
  background: #333;
}

.dark #movable {
  background: #333;
  color: white;
}

.dark .dropdown-content li>a {
  background-color: #1c1c1c;
  color: #3fe0d1;
}

.dark .dropdown-content li>a:hover {
  background-color: #333;
}

.dark .dropdown-content {
  background-color: #1c1c1c;
}

.dark .modalBox {
  background-color: #1C1C1C;
}

.dark .modal-message {
  color: #e2e2e2;
  background-color: #1C1C1C;
}

.dark #newdropdown {
  border: #000000;
  background-color: #1c1c1c;
}

.dark #newdropdown li {
  background-color: #1c1c1c;
}

.dark #confirmation-message {
  color: #e2e2e2;
}

/* Your Custom Theme can go here if you don't want to modify the existing dark mode */