/* Baseline styles - common for all themes */
body, .btn, .card, .login, .meter-container, .theme-selector-container, .tab-button {
    transition: background-color 0.2s, color 0.2s;
}

/* Default Theme */
body.default-theme {
    background: #15161b;
    color: rgba(255, 255, 255, 0.7);
}

.btn.default-theme, .login.default-theme, .tab-button.default-theme {
    background-color: #3b3b4d;
    color: #fff;
}

.card.default-theme, .toggle-button.default-theme {
    background-color: #202029;
}

.copyright.default-theme {
    color: #4f4f66;
}

h3.default-theme {
    color: #807d7d;
}

h6.default-theme {
    color: #aaa;
    border-bottom: 1px solid #aaa;
}

/* Blue Theme */
body.blue-theme {
    background: #2a2b31;
    color: rgba(214, 207, 207, 0.7);
}

.btn.blue-theme, .login.blue-theme, .tab-button.blue-theme {
    background-color: #4F4F6E;
    color: #fff;
}

.card.blue-theme, .toggle-button.blue-theme {
    background-color: #383a46;
}

.copyright.blue-theme {
    color: #807d7d;
}

h3.blue-theme {
    color: #807d7d;
}

h6.blue-theme {
    color: #aaa;
    border-bottom: 1px solid #aaa;
}


/* Stream-Butler Theme */
body.stream-butler-theme {
    background: #e8e8e8;
    color: #1e3148;
}

.btn.stream-butler-theme, .login.stream-butler-theme, .tab-button.stream-butler-theme {
    background-color: #649f9f;
    color: #ffffff;
}

.card.stream-butler-theme, .toggle-button.stream-butler-theme {
    background-color: #dcdcdc;
    border: 1px solid #7a98bd;
    color: #1e3148; /* Dunkle Schriftfarbe für Karteninhalte */
}

.card-title.stream-butler-theme {
    font-size: 20px;
    color: #1e3148; /* Dunkle Schriftfarbe für Kartentitel */
    margin-bottom: 1.5rem;
}

.card-title.stream-butler-theme .oi {
    margin-right: 0.5rem;
    font-size: 0.9rem;
    color: #1e3148; /* Dunkle Schriftfarbe für Icon */
}

.copyright.stream-butler-theme {
    color: #1e3148;
}

h3.stream-butler-theme {
    color: #1e3148;
}

h6.stream-butler-theme {
    color: #1e3148;
    border-bottom: 1px solid #1e3148;
}

.jconfirm-box.stream-butler-theme {
    color: rgba(0, 0, 0, 0.7);
}

.badge.stream-butler-theme {
    background-color: #649f9f;
}

.status-online.stream-butler-theme {
    background-color: #00b672;
    color: white;
}

.status-offline.stream-butler-theme {
    background-color: #c21b34;
    color: white;
}

nav.stream-butler-theme {
    background-color: #a6a6a6;
    color: #1e3148;
}

nav ul li a.stream-butler-theme {
    color: #1e3148;
}

nav ul li a.stream-butler-theme:hover {
    background-color: #649f9f;
    color: #ffffff;
}

/* Stream-Butler Theme */
body.stream-butler-theme {
    background: #e8e8e8;
    color: #1e3148;
}

.btn.stream-butler-theme, .login.stream-butler-theme, .tab-button.stream-butler-theme {
    background-color: #649f9f;
    color: #ffffff;
}

.card.stream-butler-theme, .toggle-button.stream-butler-theme {
    background-color: #dcdcdc;
    border: 1px solid #7a98bd;
    color: #1e3148; /* Dunkle Schriftfarbe für Karteninhalte */
}

.card-title.stream-butler-theme {
    font-size: 20px;
    color: #1e3148; /* Dunkle Schriftfarbe für Kartentitel */
    margin-bottom: 1.5rem;
}

.card-title.stream-butler-theme .oi {
    margin-right: 0.5rem;
    font-size: 0.9rem;
    color: #1e3148; /* Dunkle Schriftfarbe für Icon */
}

.card-title.mb-0.clickable.stream-butler-theme {
    color: #1e3148; /* Dunkle Schriftfarbe für Kartentitel */
}

.copyright.stream-butler-theme {
    color: #1e3148;
}

h3.stream-butler-theme {
    color: #1e3148;
}

h6.stream-butler-theme {
    color: #1e3148;
    border-bottom: 1px solid #1e3148;
}

.jconfirm-box.stream-butler-theme {
    color: rgba(0, 0, 0, 0.7);
}

.badge.stream-butler-theme {
    background-color: #649f9f;
}

.status-online.stream-butler-theme {
    background-color: #00b672;
    color: white;
}

.status-offline.stream-butler-theme {
    background-color: #c21b34;
    color: white;
}

nav.stream-butler-theme {
    background-color: #a6a6a6;
    color: #1e3148;
}

nav ul li a.stream-butler-theme {
    color: #1e3148;
}

nav ul li a.stream-butler-theme:hover {
    background-color: #649f9f;
    color: #ffffff;
}

/* Specific Stream-Butler Theme Adjustments */

body.stream-butler-theme .nav-container {
    background-color: #ffffff; /* Hintergrundfarbe der Navigation */
    color: #1e3148; /* Schriftfarbe der Navigation */
}

body.stream-butler-theme .logo {
    margin-right: auto;
}

body.stream-butler-theme .language-switcher {
    position: relative;
    display: inline-block;
    padding-right: 15px;
}

body.stream-butler-theme .language-switcher img {
    width: 30px;
    height: auto;
    cursor: pointer;
}

body.stream-butler-theme .dropdown-content {
    display: none;
    position: absolute;
    background-color: #e8e8e8;
    min-width: 50px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    left: 50%;
    transform: translateX(-60%);
}

body.stream-butler-theme .dropdown-content a {
    color: #1e3148;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
}

body.stream-butler-theme .dropdown-content a:hover {
    background-color: #649f9f;
    color: #ffffff; /* Schriftfarbe beim Hover */
}

body.stream-butler-theme .language-switcher:hover .dropdown-content {
    display: block;
}

body.stream-butler-theme nav{
    background-color: #ffffff;
    color: #1e3148;
}

body.stream-butler-theme nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    color: #1e3148;
}

body.stream-butler-theme nav ul li {
    margin-left: 20px;
    background-color: #ffffff;
    color: #1e3148;
}

body.stream-butler-theme nav ul li a {
    color: #1e3148; /* Schriftfarbe der Links */
}


body.stream-butler-theme nav ul li.username-item-right, 
body.stream-butler-theme nav ul li.nav-item-right {
    margin-left: auto;
    margin-right: 5px;
    
}

body.stream-butler-theme nav ul li.nav-item-right {
    margin-left: 5px;
    margin-right: 5px;
}

body.stream-butler-theme .table {
    color: #1e3148; /* Schriftfarbe für Tabelleninhalt */
}

body.stream-butler-theme .table th,
body.stream-butler-theme .table td {
    border-bottom: 1px solid #1e3148; /* Farbe der waagerechten Linien */
}

body.stream-butler-theme .table th span.toggle-button {
    color: #1e3148; /* Schriftfarbe für Sortier-Icons */
}

#start-server.stream-butler-theme {
    background-color: #00b67a;
}

#stop-server.stream-butler-theme {
    background-color: #c21b34;
}

.button-group.stream-butler-theme {
    display: flex;
    gap: 10px;
}

#toggle-record.stream-butler-theme {
    background: #4F4F6E;
}

#toggle-record.stream-butler-theme .oi {
    margin-right: 5px;
}

.blinking.stream-butler-theme {
    animation: blink 1s steps(2, start) infinite;
    color: red;
}

/* Ensure card.dark-mode in stream-butler-theme is styled correctly */
body.stream-butler-theme .card.dark-mode,
body.stream-butler-theme .card.dark-mode1 {
    background-color: #dcdcdc;
    border: 1px solid #7a98bd;
    color: #1e3148;
}

body.stream-butler-theme .card.dark-mode .card-title,
body.stream-butler-theme .card.dark-mode1 .card-title {
    color: #1e3148;
}

body.stream-butler-theme .card.dark-mode .card-title.mb-0.clickable,
body.stream-butler-theme .card.dark-mode1 .card-title.mb-0.clickable {
    color: #1e3148; /* Dunkle Schriftfarbe für Kartentitel */
}

.card-title.dark-mode.stream-butler-theme {
    color: #1e3148;
}

.card-title.stream-butler-theme .oi {
    color: #1e3148;
}

.scene-header.stream-butler-theme {
    cursor: pointer;
    user-select: none;
}

.scene-container.hidden-content.stream-butler-theme {
    display: none;
}

.rtmp-columns.stream-butler-theme {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 100%;
}

.sStatus.stream-butler-theme {
    font-weight: 500;
    text-transform: uppercase;
}

.sStatus.on.stream-butler-theme {
    color: #00d200;
}

.sStatus.off.stream-butler-theme {
    color: red;
}

.screenshotPreview.stream-butler-theme {
    max-width: 100%;
    height: auto;
}

.divider.stream-butler-theme {
    width: 100%;
    height: 1px;
    background-color: #3b3b4d;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Volumemeter */
#volumeMetersContainer.stream-butler-theme {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    height: 210px;
}

.meter-container.stream-butler-theme {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 80px;
    gap: 10px;
    height: 120px;
}

.meter.stream-butler-theme, .meter-background.stream-butler-theme {
    position: absolute;
    bottom: 0;
    width: 15px;
    height: 120px;
    border-radius: 5px;
    transition: height 0.5s ease;
    transform: scaleY(-1);
}

.db-fader.stream-butler-theme {
    position: absolute;
    left: 35px;
    top: 0;
    width: 5px;
    height: 120px;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transform: rotate(270deg);
}

.db-label.stream-butler-theme, .mute-button.stream-butler-theme {
    text-align: center;
    width: 100%;
    top: 130px;
}

.meter-container label.stream-butler-theme {
    text-align: center;
    margin-bottom: -30px;
    margin-left: 0;
}

.mute-button.stream-butler-theme {
    padding: 5px 10px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

.mute-button:hover.stream-butler-theme {
    background-color: #ff6666;
}

body.stream-butler-theme .btn-default.raised {
    background-color: #649f9f; /* Weißer Hintergrund */
    color: #ffffff; /* Blaue Schriftfarbe */
    border: 1px solid #ffffff; /* Blauer Rahmen */
}

body.stream-butler-theme .btn-default.raised:hover {
    background-color: #1e3148; /* Blauer Hintergrund */
    color: #ffffff; /* Weiße Schriftfarbe */
    border: 1px solid #ffffff; /* Weißer Rahmen */
}

body.stream-butler-theme .btn.btn-sm.btn-third.raised.mt-2.mb-0:hover span {
    color: #ffffff; /* Icon-Farbe beim Hover */
}



/* IRL Theme */
body.irl-theme {
    background: #1e3148;
    color: #ffffff;
}

.btn.irl-theme, .login.irl-theme, .tab-button.irl-theme {
    background-color: #1e3148;
    color: #ffffff;
}

.card.irl-theme, .toggle-button.irl-theme {
    background-color: #1e3148;
    border: 1px solid #ffffff;
    color: #ffffff; /* Helle Schriftfarbe für Karteninhalte */
}

.card-title.irl-theme {
    font-size: 20px;
    color: #ffffff; /* Helle Schriftfarbe für Kartentitel */
    margin-bottom: 1.5rem;
}

.card-title.irl-theme .oi {
    margin-right: 0.5rem;
    font-size: 0.9rem;
    color: #ffffff; /* Helle Schriftfarbe für Icon */
}

.card-title.mb-0.clickable.irl-theme {
    color: #ffffff; /* Helle Schriftfarbe für Kartentitel */
}

.copyright.irl-theme {
    color: #ffffff;
}

h3.irl-theme {
    color: #ffffff;
}

h6.irl-theme {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
}

.jconfirm-box.irl-theme {
    color: rgba(255, 255, 255, 0.7);
}

.badge.irl-theme {
    background-color: #1e3148;
    color: #ffffff;
}

.status-online.irl-theme {
    background-color: #00b672;
    color: white;
}

.status-offline.irl-theme {
    background-color: #c21b34;
    color: white;
}

/* Specific IRL Theme Adjustments */

body.irl-theme .nav-container {
    background-color: #ffffff; /* Hintergrundfarbe der Navigation */
    color: #1e3148; /* Schriftfarbe der Navigation */
}

body.irl-theme .logo {
    margin-right: auto;
}

body.irl-theme .language-switcher {
    position: relative;
    display: inline-block;
    padding-right: 15px;
}

body.irl-theme .language-switcher img {
    width: 30px;
    height: auto;
    cursor: pointer;
}

body.irl-theme .dropdown-content {
    display: none;
    position: absolute;
    background-color: #1e3148;
    min-width: 50px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    left: 50%;
    transform: translateX(-60%);
}

body.irl-theme .dropdown-content a {
    color: #ffffff;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
}

body.irl-theme .dropdown-content a:hover {
    background-color: #ffffff;
    color: #1e3148; /* Schriftfarbe beim Hover */
}

body.irl-theme .language-switcher:hover .dropdown-content {
    display: block;
}

body.irl-theme nav {
    background-color: #ffffff;
    color: #1e3148;
}

body.irl-theme nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    color: #1e3148;
}

body.irl-theme nav ul li {
    margin-left: 20px;
    background-color: #ffffff;
    color: #1e3148;
}

body.irl-theme nav ul li a {
    color: #1e3148; /* Schriftfarbe der Links */
}

body.irl-theme nav ul li a:hover {
    background-color: #1e3148;
    color: #ffffff;
}

body.irl-theme nav ul li.username-item-right, 
body.irl-theme nav ul li.nav-item-right {
    margin-left: auto;
    margin-right: 5px;
}

body.irl-theme nav ul li.nav-item-right {
    margin-left: 5px;
    margin-right: 5px;
}

body.irl-theme .table {
    color: #ffffff; /* Schriftfarbe für Tabelleninhalt */
}

body.irl-theme .table th,
body.irl-theme .table td {
    border-bottom: 1px solid #ffffff; /* Farbe der waagerechten Linien */
}

body.irl-theme .table th span.toggle-button {
    color: #ffffff; /* Schriftfarbe für Sortier-Icons */
}

#start-server.irl-theme {
    background-color: #00b67a;
}

#stop-server.irl-theme {
    background-color: #c21b34;
}

.button-group.irl-theme {
    display: flex;
    gap: 10px;
}

#toggle-record.irl-theme {
    background: #1e3148;
}

#toggle-record.irl-theme .oi {
    margin-right: 5px;
}

.blinking.irl-theme {
    animation: blink 1s steps(2, start) infinite;
    color: red;
}

/* Ensure card.dark-mode in irl-theme is styled correctly */
body.irl-theme .card.dark-mode,
body.irl-theme .card.dark-mode1 {
    background-color: #1e3148;
    border: 1px solid #ffffff;
    color: #ffffff;
}

body.irl-theme .card.dark-mode .card-title,
body.irl-theme .card.dark-mode1 .card-title {
    color: #ffffff;
}

body.irl-theme .card.dark-mode .card-title.mb-0.clickable,
body.irl-theme .card.dark-mode1 .card-title.mb-0.clickable {
    color: #ffffff; /* Helle Schriftfarbe für Kartentitel */
}

.card-title.dark-mode.irl-theme {
    color: #ffffff;
}

.card-title.irl-theme .oi {
    color: #ffffff;
}

.scene-header.irl-theme {
    cursor: pointer;
    user-select: none;
}

.scene-container.hidden-content.irl-theme {
    display: none;
}

.rtmp-columns.irl-theme {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 100%;
}

.sStatus.irl-theme {
    font-weight: 500;
    text-transform: uppercase;
}

.sStatus.on.irl-theme {
    color: #00d200;
}

.sStatus.off.irl-theme {
    color: red;
}

.screenshotPreview.irl-theme {
    max-width: 100%;
    height: auto;
}

.divider.irl-theme {
    width: 100%;
    height: 1px;
    background-color: #ffffff;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Volumemeter */
#volumeMetersContainer.irl-theme {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    height: 210px;
}

.meter-container.irl-theme {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 80px;
    gap: 10px;
    height: 120px;
}

.meter.irl-theme, .meter-background.irl-theme {
    position: absolute;
    bottom: 0;
    width: 15px;
    height: 120px;
    border-radius: 5px;
    transition: height 0.5s ease;
    transform: scaleY(-1);
}

.db-fader.irl-theme {
    position: absolute;
    left: 35px;
    top: 0;
    width: 5px;
    height: 120px;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transform: rotate(270deg);
}

.db-label.irl-theme, .mute-button.irl-theme {
    text-align: center;
    width: 100%;
    top: 130px;
}

.meter-container label.irl-theme {
    text-align: center;
    margin-bottom: -30px;
    margin-left: 0;
}

.mute-button.irl-theme {
    padding: 5px 10px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

.mute-button:hover.irl-theme {
    background-color: #ff6666;
}

body.irl-theme .btn-default.raised {
    background-color: #ffffff; /* Weißer Hintergrund */
    color: #1e3148; /* Blaue Schriftfarbe */
    border: 1px solid #1e3148; /* Blauer Rahmen */
}

body.irl-theme .btn-default.raised:hover {
    background-color: #1e3148; /* Blauer Hintergrund */
    color: #ffffff; /* Weiße Schriftfarbe */
    border: 1px solid #ffffff; /* Weißer Rahmen */
}

body.irl-theme .btn.btn-sm.btn-third.raised.mt-2.mb-0:hover span {
    color: #ffffff; /* Icon-Farbe beim Hover */
}