/* Default state when body does not have IAmOnline or IAmNOTOnline classes */
.ShowIfIAmOnline, .ShowIfIAmNOTOnline {
    display: none; /* Hide elements by default */
}

/* Show elements only if the body has class 'IAmOnline' */
body.IAmOnline .ShowIfIAmOnline {
    display: block !important; /* Show the element */
}

body.IAmOnline .HideIfIAmOnline {
    display: none !important; /* Hide the element */
}

/* Show elements only if the body has class 'IAmNOTOnline' */
body.IAmNOTOnline .ShowIfIAmNOTOnline {
    display: block !important; /* Show the element */
}

body.IAmNOTOnline .HideIfIAmNOTOnline {
    display: none !important; /* Hide the element */
}

/* Audio Toggle Button Styles */
.audio-toggle-button {
    outline: none;
}

.audio-toggle-button:hover {
    background-color: rgba(115, 133, 159, 0.5);
}

.audio-toggle-button:before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-size: 1.2em;
    line-height: 1.0em;
    font-family: "Font Awesome\ 5 Free";
    font-weight: 900;
}

.audio-toggle-button.video-source:before {
    content: "\f008"; /* Video icon */
}

.audio-toggle-button.audio-source:before {
    content: "\f025"; /* Audio icon */
}