#admin-settings {
    background: #5083;
    display: none;
}

.admin #admin-settings {
    display: block;
}

/* Modal */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    display: flex; justify-content: center; align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.modal.hidden {
    opacity: 0;
    pointer-events: none;
}
.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    color: #000;
    text-align: center;
}
body.light-mode .modal-content {
    background: #fff;
    color: #000;
}
body:not(.light-mode) .modal-content {
    background: #1e1e1e;
    color: #fff;
}

#save-user-btn,
#user-emoji,
#user-name {
    font-size: 1.6em;
    margin: 10px 0px 10px 0px;
}

#save-user-btn { width: 40px; background: #0808; }
#user-emoji {
    width: 30px;
    border-style: dashed;
    outline: none;
    background: none;
} 
#user-name  { 
    width: 230px;
    margin: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.9em;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 3000;
}

.toast.show {
    opacity: 1;
}

body.light-mode .toast {
    background: rgba(255,255,255,0.9);
    color: #000;
}

.leader-user {
  font-weight: bold;
  color: gold;
}
body.light-mode .leader-user {
  color: darkorange;
}


/* Chyron */
/* Base Chyron */
.chyron-wrapper {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
}

.chyron-wrapper.top { font-size: 4em; }
.chyron-wrapper.bottom { font-size: 2em; }

/* Positioning helpers */
.top { top: 0px; }
.bottom { bottom: 0px; }
.left { left: 0; }
.right { right: 0; }

/* Chyron Box */
.chyron-box {
    display: flex;
    align-items: center;
    height: 2em;
    background-color: #000;
    color: white;
    white-space: nowrap;
}

.top .chyron-box { border-bottom: 3px solid red; }
.bottom .chyron-box { border-top: 3px solid red; }

.right .chyron-box { flex-direction: row-reverse; }

.bottom.right .chyron-box { border-radius: 2em 0 0 0; }
.top.right .chyron-box { border-radius: 0 2em 0 0; }
.top.left .chyron-box { border-radius: 0 0 2em 0; }
.bottom.left .chyron-box { border-radius: 0 0 0 2em; }

.chyron-icon,
.chyron-text {
    padding: 0;
    display: inline-block;
    box-sizing: border-box;
    max-width: 0;
    opacity: 0;
    transition: max-width 1s ease-out, padding 1s ease-out 0.5s, opacity 0.5s ease;
}

.chyron-icon.show,
.chyron-text.show {
    padding: 0 1em;
    max-width: 1200px;
    opacity: 1;
    transition: max-width 1s ease-in, padding 0.5s ease-in, opacity 1s ease 0.5s;
}

.left .chyron-icon.show { padding-left: 0.5em; padding-right: 1em; }
.right .chyron-icon.show { padding-right: 0.5em; padding-left: 1em; }

.chyron-text .name {
    color: goldenrod;
}