/* 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 Theme Dropdown */
.dark #themedropdown {
    background-color: transparent !important;
}

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

.dark #themedropdown li a {
    background-color: transparent !important;
}

/* 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 var(--border);
    background-color: var(--bg);
}

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

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

.dark #floatingWindows > .windowFrame > .wfWinBody .wfbWidget {
    color: #ccc !important;
    background-color: #505050 !important;
}

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

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

.dark #loading-image-container {
    background-color: var(--bg) !important;
}

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

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

.modal-content {
    background-color: var(--panel-bg);
    color: var(--fg);
}

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

.dark #search,
.dark #helpfulSearch,
.dark .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 #newdropdown li:hover {
  background-color: transparent !important;
}

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

body {
    --border: #cccccc;
    --bg: #ffffff;
    --fg: #666666;
    --panel-bg: #f5f5f5;
    --accent: #2196f3;
}

body.dark {
    --border: #000000;
    --bg: #1d1d20;
    --fg: #e8e8e8;
    --panel-bg: #1c1c1c;
    --accent: #3fe0d1;
}

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

/* Selected language highlight in language dropdown */
#languagedropdown li a.selected-language {
  background-color: rgba(33, 150, 243, 0.15);
  border-left: 3px solid #2196F3;
  font-weight: 600;
}

.dark #languagedropdown li a.selected-language {
  background-color: rgba(33, 150, 243, 0.25);
  border-left: 3px solid #64B5F6;
}

/* Dark Mode Tooltip Styling - Slightly lighter background for better contrast */
.dark .material-tooltip {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

.dark .material-tooltip .backdrop {
    background-color: #3a3a3a !important;
}

.dark .material-tooltip span {
    color: #ffffff !important;
}