#page-container
{
    background-color: #c0c0c0;
    /* background-image: url("../characters/ika/front-standing.svg"); */
    background-image: url("/images/background.svg");
    background-blend-mode: soft-light;
    background-size: 60vw;
    background-position-x: calc(100% - 50px);
    background-position-y: calc(100% - 50px);
    background-repeat: no-repeat;
    font-family: IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','ＭＳ Ｐゴシック',submona,sans-serif;
    font-size: 16px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

header {
    margin: 5px 20px 20px 20px;
    height: 50px
}

header h1 {
    margin: 0;
}

header h2 {
    margin: 0;
    font-size: medium;
}

header h1 a {
    color: black;
    text-decoration: none;
}

input[type='range']
{
    appearance: none;
    background-color: #afb1b1;
    width: 120px;
    height: 4px;
    font-size: 18px;
}

input
{
    /* This is the default accent color on firefox and chrome, I'm setting it explicitly here
       so that edge also uses it instead of its default gray color. */
    accent-color: #0075ff; 
}

#login-page
{
    padding: 5px;
}

#login-form {
    display: block;
    margin: 20px;
}

#login-form > div {
    margin-left: 3px;
    margin-right: 3px;
}

#username-selection span.error {
    margin-left: 5px;
}

#login-form span.error {
    color: #b11030;
}

#login-footer {
    font-family: 'Courier New', Courier, monospace;
    margin: 12px;
}

#login-footer h3
{
    margin-bottom: 5px;
}

[v-cloak]
{
    display: none;
}

#room
{
    position: relative;
}

#chatLog
{
    background-color: white;
    height: 150px;
    overflow-y: auto;
    resize: vertical;
}

.underlined-usernames .message-author
{
    text-decoration: underline;
    text-decoration-color: #929292;
}

.message
{
    overflow: hidden;
    line-height: 20px;
    padding-left: 5px;
}

.message span
{
    unicode-bidi: isolate;
}

.timestamps-in-copied-log .message .message-timestamp
{
    display: inline-block;
}

.log-dividers .message
{
    padding-top: 3px;
    padding-bottom: 3px;
}

.log-dividers .message:not(:first-child)
{
    border-top: 1px solid #c0c0c0;
}

.message .message-timestamp
{
    display: none;
    width: 1px; /* must be at least 1px for chrome to include its content when copy-pasting */
    height: 1px; /* must be at least 1px for chrome to include its content when copy-pasting */
    white-space: nowrap;
    overflow: hidden; /* overflow: clip doesn't work on safari */
}

.message .message-mention
{
	font-weight: bold;
    text-decoration: underline;
}

.video-container,
.audio-stream-controls-spinner
{
    z-index: 150;
    width: 219px;
    /* "height: auto" is needed because resizing the the video container with the mouse (with jquery.ui) defines
       both height and width via javascript, but since the video's aspect ratio isn't always constant (example, when sharing
       a window that gets resized) we need at least one between height and width to stay "auto", so that the container's size stays
       flexible in respect to the contained video's size */ 
    height: auto !important;
    background-color: #7e7e7e;
    background-image: url("/spinner.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px;
    margin: 4px 0px;
    overflow: hidden;
}

video {
    width: 100%;
    /* not sure why, video-container seems to be always 4px taller than it should be to neatly contain the <video>  */
    margin-bottom: -4px;
}

.highlighted-username
{
    color: red;
    text-shadow: #939393 0px 0px 1px;
}

.username
{
    cursor: pointer;
}

.stream-title
{
    font-weight: bold;
}

.stream-is-active .stream-title
{
    font-weight: normal;
}

/* div[id^="received-video-"]
{
    position: absolute;
    top: 18px;
    left: 0px;
}


/* --- canvas triangle buttons --- */

.canvas-button-top-right
{
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.canvas-button-top-right
    {background: linear-gradient(to bottom left, transparent 50%, #787878 50%);}
.canvas-button-top-right:active
    {background: linear-gradient(to bottom left, transparent 50%, #ffffff 50%);}

/* --- infobox with names and stats etc --- */

#infobox-container
{
    position: absolute;
    top: 7px;
    right: 7px;
}

#infobox-button
{
    position: absolute;
    top: 2px;
    right: 2px;
}

#infobox
{
    position: absolute;
    top: 0;
    right: 0;
    min-width: 170px;
    background-color: rgba(120, 120, 120, 0.1);
    color: #ffffff;
    padding: 3px;
    font-size: 12px;
    text-shadow: #000 0 0 1px;
}

#infobox td
{
    white-space: nowrap;
}

#infobox-streamcount
{
    position: absolute;
    bottom: 6px;
    right: 6px;
} 

.big-red-alert
{
    position: absolute;
    z-index: 100;
    color: #d00;
}

#stage
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px;
    min-height: 100%;
    box-sizing: border-box;
}

#main-section
{
    flex-grow: 1;
    width: 70%;
    position: relative;
    padding-right: 7px;
    display: flex;
    flex-direction: column;
}

/* #main-section::after
{
    cursor: e-resize;
    width: 3px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    content: '';
} */

@media (min-width: 947px)
{
    #main-section
    {
        flex-grow: initial;
    }
    #video-streams
    {
        flex-wrap: nowrap;
    }
}

#video-streams{
    padding: 5px;
    flex-grow: 1;
    box-sizing: border-box;
    min-width: 200px;
}

#room-canvas
{
    position: absolute;
    width: 100%;
    height: 100%;
}

#canvas-container
{
    position: relative;
    height: 511px;
    font-family: Arial, Helvetica, sans-serif;
    resize: vertical;
    overflow: auto;
    order: 1;
}

#toolbar
{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    overflow: auto;
    order: 2;
}

.log-above-toolbar #toolbar
{
    order: 3;
}

#chat-log-container
{
    order: 3;
}

.log-above-toolbar #chat-log-container
{
    order: 2;
    display: flex;
}

.log-above-toolbar #chatLog
{
    flex-grow: 1;
    margin: 3px;
}

#login-page button,
#toolbar button,
.stream-buttons button,
.slot-wrapper button,
.popup button
{
    border: 1px solid #959595;
    padding: 3px 10px;
    margin: 1px;
    min-height: 32px;
    border-radius: 3px;
    white-space: nowrap;
    color: black;
}

#login-page button:hover:enabled,
#toolbar button:hover:enabled,
.stream-buttons button:hover:enabled,
.slot-wrapper button:hover:enabled,
.popup button:hover:enabled
{
    border-color: black;
}

#login-page button:disabled,
#toolbar button:disabled,
.stream-buttons button:disabled,
.slot-wrapper button:disabled,
.popup button:disabled
{
    color :rgb(109, 109, 109);
}

.mute-unmute-button span.fas {
    width: 17px;
}

.preferences-percentage
{
    display: inline-block;
    width: 36px;
    text-align: right;
}

#toolbar-text-input
{
    flex-grow: 1;
    display: flex;
    align-items: stretch;
    flex-basis: 200px;
}
#toolbar-buttons
{
    display: flex;
    align-items: stretch;
}

#input-textbox
{
    /*
        HACK(?): text areas can't seem to get shrunk more than a certain amount, and it broke the
        layout on mobile. because it's in a flex container, "width: 0px" doesn't really make it 0 pixels wide,
        but at least it allows the text area to shrink as much as needed.
    */
    width: 0px;
    flex-grow: 1;
    resize: vertical;
    min-width: 180px;
    /* Strangely, the font-family rule applied to #vue-app in theory is effective on #input-textbox, but in practice
       the text is rendered with the browser's default font unless I explicitly redefine the font-family rule here too. */
    font-family: IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','ＭＳ Ｐゴシック',submona,sans-serif;
}

.tooltip-section
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
}

.tooltip-section > button
{
    flex-grow: 1;
}

.tooltip-section > label
{
    white-space: nowrap;
}

.non-wrappable-buttons
{
    display: flex;
}

.tooltip-section-title
{
    flex-grow: 1;
    display: flex;
    align-items: end;
    justify-content: center;
}

.tooltip-volume-section
{
    min-height: 80px;
    align-items: center;
}

#toolbar button.arrow-button
{
    font-weight: bold;
    font-size: 20px;
    padding: 3px 8px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px;
    width: 34px;
    height: 34px;
}
.arrow-button-left
{
    background-image: url("/images/north_west_black_24dp.svg");
}
.arrow-button-up
{
    background-image: url("/images/north_east_black_24dp.svg");
}
.arrow-button-down
{
    background-image: url("/images/south_west_black_24dp.svg");
}
.arrow-button-right
{
    background-image: url("/images/south_east_black_24dp.svg");
}


#rula-popup {
    max-width: 600px;
    width: 90%;
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    transform: translate(-50%,-50%);
    
    max-height: 100%;
    overflow: auto;

    outline: 2px solid #afb1b1;
    background-color: #ffffff;
    z-index: 201;
    /* Need to clear padding, margin and border esplicitly for popups that are <fieldset>s */
    padding: 0;
    margin: 0;
    border: 0;
}

#dialog-popup
{
    z-index: 204;
}

@media (max-width: 600px) {
    .popup {
        width: 90%;
    }
}

.popup-overlay
{
    content: "";
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:rgba(77,77,77,.4);
}

#dialog-popup-overlay
{
    z-index: 203
}

.popup-titlebar
{
    background-color: #fafafa;
    border-bottom: 2px solid #afb1b1;
    display: flex;
    flex-direction: row;
}

.popup-title
{
    display: flex;
    flex: auto;
    font-size: 20px;
    margin: 10px;
}

.popup-titlebar-item
{
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.popup-titlebar-item label
{
    white-space: pre-wrap;
}

.popup-content
{
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 400px;
    margin: 5px;
    border: 2px solid #afb1b1;
}

.popup-section:not(:first-child)
{
    border-top: 2px solid #afb1b1;
}

.popup-header
{
    margin: 10px 10px 10px 20px;
    font-size: 18px;
}

.popup-item
{
    margin: 10px;
    white-space: pre-line;
}

.popup-subsection
{
    margin-left: 20px;
}

.popup-notice
{
    white-space: pre-wrap;
    font-size: 12px
}

.popup-table
{
    width: 100%;
    border-collapse: collapse;
}

.popup-table col
{
    border-right: 1px solid #afb1b1;
}

.popup-table col:last-of-type
{
    border-right: 0;
}

.popup-table th
{
    text-align: left;
    font-weight: normal;
    background-color: #f3f3f3;
    border-bottom: 1px solid #afb1b1;
}

.popup-table td,
.popup-table th
{
    padding: 2px 5px;
}

.popup-selectable-table tr:hover td
{
    background-color: #e6ffe0;
    cursor: pointer;
}

.popup-row-is-selected td
{
    background-color: #cdffc1;
}

.popup-row-is-selected .user-not-in-room-warning
{
    padding-right: 6px;
    font-size: 13px
}

.inactive-user-icon
{
    height: 15px;
    margin-right: 5px;
    /* this strange filter is a way to turn a black image into a sort of light blue. */
    /* no idea of how it actually does that. */
    filter: brightness(90%) invert(57%) sepia(52%) hue-rotate(152deg) saturate(275%);
}

.enabled-disabled-listener-icon
{
    height: 15px;
    margin-right: 5px;
}

.popup-sortable-table th
{
    cursor: pointer
}

.popup-buttons
{
    text-align: right;
    margin: 5px 20px 5px 20px;
}

.popup-buttons button
{
    display: inline-block;
    margin-left: 5px;
}

#character-selection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

#character-selection label {
    width: 60px;
    height: 60px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #999999;
    position: relative;
}

#character-selection img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}


#character-selection .character-selected {
    border: solid 1px blue;
    outline: solid 1px blue;
}

#character-selection input {
    display: none;
}

div[id^="vu-meter-container"]
{
    background-color: black;
    height: 5px;
    width: 219px;
    margin: 4px 0px;
}

div[id^="vu-meter-bar-"]
{
    height: 5px;
    width: 0;
    position: relative;
}

div[id^="vu-meter-bar-primary-"]
{
    z-index: 2;
}

div[id^="vu-meter-bar-primary-"].outbound-vu-meter-bar
{
    background-color: red;
}

div[id^="vu-meter-bar-primary-"].inbound-vu-meter-bar
{
    background-color: green;
}

div[id^="vu-meter-bar-secondary-"]
{
    z-index: 1;
    top: -5px;
}

div[id^="vu-meter-bar-secondary-"].outbound-vu-meter-bar
{
    background-color: darkred;
}

div[id^="vu-meter-bar-secondary-"].inbound-vu-meter-bar
{
    background-color: darkgreen;
}

button.checked {
    text-decoration: underline;
}

#poop-page
{
    font-size: 100px;
}

.full-screen-page
{
    font-size: 25px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#user-list-popup td
{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    word-wrap: anywhere;
}

#user-list-popup td button
{
    flex-shrink: 0;
}

#user-list-popup tr div
{
    cursor: pointer;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.pinned-video
{
    position: relative !important;
}

.unpinned-video
{
    position: absolute !important;
}

.unpinned-video .pin-video-button
{
    transform: rotate(90deg);
}

.video-container > .pin-video-button
{
    position: absolute;
    z-index: 1;
    background: rgba(255, 255, 255, 0.7);
    border: 0;
    margin: 7px;
    width: 28px;
    height: 28px;
    font-size: 13px;
    /* visibility: hidden; */
    opacity: 0;
    transition: opacity 0.3s;
}

.video-container:hover > .pin-video-button
{
    /* visibility: visible; */
    opacity: 1;
}

.stream-buttons {
    width: 219px;
    display: flex;
    align-items: center;
}

.stream-buttons .feedback-button {
    /* push the button to the right */
    margin-left: auto;
}

.stream-buttons button,
.slot-wrapper button
{
    background-color: #4d4d9f;
    color: white;
}

.stream-buttons button.red-button,
.slot-wrapper button.red-button,
.slot-wrapper button.slot-button-highlight
{
    background-color: #9f6161;
    color: white;
}

.next-move-chess-player
{
    text-decoration: underline;
    font-weight: bold;
}

.slot-message
{
    margin-top: 5px;
    margin-bottom: 5px;
}

.janken-wrapper
{
    min-height: 260px;
}

@media (min-width: 947px)
{
    .janken-wrapper
    {
        width: 260px;
    }
}

.janken-versus
{
    display: flex;
}

.janken-versus-player1,
.janken-versus-player2
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.janken-versus-player1
{
    text-align: right;
    margin-right: 5px;
}

.janken-versus-player2
{
    text-align: left;
    margin-left: 5px;
}

.janken-hands button
{
    font-size: 40px;
    line-height: 40px;
    width: 60px;
    height: 60px;
    background-size: 50px 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.janken-hand-results
{
    display: flex;
}

.janken-results-hand
{
    width: 120px;
    height: 120px;
    color: black;
    background-color: #e16060;
    margin-left: 10px;
    background-size: 100px 100px;
    border-radius: 5px;
    outline: 1px solid #959595;
}

.janken-hands-draw .janken-results-hand
{
    background-color: #ffd277;
}

.janken-results-hand.janken-hand-winner
{
    background-color: #b7df87;
}

.janken-hand-player1
{
    transform: rotate(90deg);
}

.janken-hand-player2
{
    transform: rotate(-90deg);
}

.janken-hand-rock,
.janken-hand-paper,
.janken-hand-scissors
{
    background-repeat: no-repeat;
    background-position: center;
}

.janken-hand-rock { background-image: url("/images/hand-rock.svg"); }
.janken-hand-paper { background-image: url("/images/hand-paper.svg"); }
.janken-hand-scissors { background-image: url("/images/hand-scissors.svg"); }

button.janken-hand-rock { background-image: url("/images/hand-rock.light.svg"); }
button.janken-hand-paper { background-image: url("/images/hand-paper.light.svg"); }
button.janken-hand-scissors { background-image: url("/images/hand-scissors.light.svg"); }

.system-message
{
    font-weight: bold;
}

.ignored-message
{
    display: none;
    user-select: none;
}

.ignore-indicators-in-log .ignored-message
{
    display: block;
    height: 2px;
    width: 2px;
    margin-bottom: -2px;
    font-size: 0;
    background-color: red;
}

.message-author
{
    cursor: pointer;
}

.message.private-message .message-author,
.message.private-message .message-body
{
    font-style: italic;
    color: #9b59b6;
}

#whisper-indicator
{
    margin-top: 3px;
    font-size: 0.9em;
    color: #9b59b6;
}

#whisper-indicator button
{
    margin-left: 6px;
}

#area-selection
{
    display: flex;
    flex-wrap: wrap;
}

/* make all jquery slider handles round */
#page-container .ui-corner-all
{
    border-radius: 10px;
}

.tooltip-section .ui-slider
{
    margin: 10px 0;
    height: 100%;
    width: 4px;
}

.tooltip-section .ui-slider-vertical .ui-slider-handle
{
    left: -9px;
}

/* Workaround to prevent zoom in iOS when tapping quickly on a button */
button
{
    touch-action: manipulation;
}

#main-section .ui-resizable-handle:hover
{
    background-color: gray;
}

.audio-stream-controls-container
{
    /* position: relative to make it so that the width: 100% and height: 100%;
       in the spinner container div cover only the parent element and not the
       entire page. */
    position: relative;
    width: fit-content;
}

.audio-stream-controls
{
    visibility: hidden;
    display: flex;
    align-items: center;
    width: 219px;
    flex-wrap: wrap;
}

.audio-stream-controls-container.listener-connected > .audio-stream-controls
{
    visibility: visible;
}

.audio-stream-controls-container.listener-connected > .audio-stream-controls-spinner
{
    visibility: hidden;
}

.audio-stream-controls-spinner
{
    display: flex;
    align-items: center;
    visibility: visible;
    position: absolute;
    z-index: 9999999999;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.audio-stream-controls-spinner img
{
    height: 18px;
}

.visible-only-to-specific-users-stream-icon
{
    color: #474747;
    padding-right: 5px;
}

.vtuber-character
{
    position: absolute;
    width: 30%;
    right: 0;
    bottom: -22%;
    transform: scale(-1,1);
    animation: 5s ease-in-out 0s infinite alternate vtuber_character_swaying;
}

.vtuber-character.jumping
{
    animation: 0.1s ease-in 0s infinite alternate vtuber_character_jumping;
}

@keyframes vtuber_character_jumping {
    from { bottom: -22% } to { bottom: -20% }
}

@keyframes vtuber_character_swaying {
    from {
        transform: scale(-1,1) rotate(-5deg);
    } to {
        transform: scale(-1,1) rotate(5deg);
    }
}

.nico-nico-messages-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* pointer-events set to none so that onVideoDoubleClick() isn't called
       with a niconico message as event.target instead of the correct <video> element*/
    pointer-events: none;
}

.nico-nico-messages-container span {
    position: absolute;
    left: 0;
    transform: translate(-100%, 0);
    animation: nico-nico-message-animation 5s linear 1;
    color: white;
    white-space: nowrap;
}

@keyframes nico-nico-message-animation {
    0% {
        left: 100%;
        transform: translate(0, 0);
    }

    100% {
        left: 0;
        transform: translate(-100%, 0);
    }
}

#niconico-message-template {
    display: none;
}

.numeric-value-control
{
    background-color: #4d4d9f;
    color: #F3EFE0;
    border-radius: 3px;
    border: 1px solid #959595;
    display: inline-block;
}

.numeric-value-control button
{
    padding: 0;
    margin: 0;
    min-width: 20px; /* min width because the number can be more than 2 digits */
    height: 20px;
    min-height: auto; /* reset min-height set by the ".stream-buttons button" rule */
    font-size: 14px;
    border-right: 1px solid gray;
    border-top: none;
    border-bottom: none;
    border-left: none;
    background: none;
    color: #F3EFE0;
    cursor: pointer;
    vertical-align: top;
}

/* no border on the last button */
.numeric-value-control button:last-child
{
    border-right: none;
}

.numeric-value-control button.disabled {
    color: gray;
    pointer-events: none;
}

.numeric-value-control button.decrement
{
    background-image: url("/images/minus.svg");
    background-size: 100%;
}

.numeric-value-control button.increment
{
    background-image: url("/images/plus.svg");
    background-size: 100%;
}

.numeric-value-control button.value {
    padding: 0 4px;
}#page-container.theme-dark {
    background-color: #28282b;
    color: #f0f0f0;
    scrollbar-color: #686868 #28282b;
}

.theme-dark h1 a {
    color: #f0f0f0;
}

.theme-dark .message a {
    color: #c2cde1;
}

.theme-dark .message-author {
    padding-right: 2px;
    color: #c2cde1;
}

.theme-dark .log-dividers .message {
    border-color: #666666;
}

.theme-dark .log-dividers .message:nth-child(even) {
    background-color: #28282b;
}

.theme-dark input[type="text"],
.theme-dark textarea,
.theme-dark #chatLog,
.theme-dark #login-page button,
.theme-dark #toolbar button,
.theme-dark .stream-buttons button,
.theme-dark .slot-wrapper button,
.theme-dark .popup button,
.theme-dark .numeric-value-control button {
    background-color: #38383b;
    color: #f0f0f0;
    border: 1px solid #686868;
}

.theme-dark ::-webkit-scrollbar {
    background-color: #28282b;
}

.theme-dark ::-webkit-scrollbar-track {
    background-color: #28282b;
}

.theme-dark ::-webkit-scrollbar-thumb {
    background-color: #686868;
}

.theme-dark ::-webkit-scrollbar-corner {
    background-color: #28282b;
}

.theme-dark .stream-buttons button.red-button,
.theme-dark .slot-wrapper button.red-button,
.theme-dark .slot-wrapper button.slot-button-highlight
{
    background-color: #754848;
}

.theme-dark .popup {
    background-color: #38383b;
    color: #f0f0f0;
}

.theme-dark .popup .popup-titlebar {
    background-color: #38383b;
    color: #f0f0f0;
}

.theme-dark .popup th {
    background-color: #38383b;
    color: #f0f0f0;
}

.theme-dark .popup-selectable-table tr:hover td {
    background-color: #242424;
}

.theme-dark .popup-selectable-table tr.popup-row-is-selected td {
    color: #f0f0f0;
    background-color: #242424;
}

.theme-dark .popup-row-is-selected
{
    color: black;
}

.theme-dark .arrow-button-left
{
    background-image: url("/images/north_west_black_24dp.dark.svg");
}
.theme-dark .arrow-button-up
{
    background-image: url("/images/north_east_black_24dp.dark.svg");
}
.theme-dark .arrow-button-down
{
    background-image: url("/images/south_west_black_24dp.dark.svg");
}
.theme-dark .arrow-button-right
{
    background-image: url("/images/south_east_black_24dp.dark.svg");
}
#page-container.theme-shaddox {
    background-color: #354F52;
    color: #CAD2C5;
}

.theme-shaddox #chatLog {
    background-color: #354F52;
}
.theme-shaddox .message {
    background-color: #354F52;
    border-color: gray;
}

.theme-shaddox .message a {
    color: #84A98C;
}

.theme-shaddox .message-author {
    padding-right: 2px;
    color: #84A98C;
}

.theme-shaddox .underlined-usernames .message-author
{
    text-decoration-color: #84A98C;
}

.theme-shaddox .log-dividers .message:nth-child(even) {
    background-color: #2F3E46;
}

.theme-shaddox input[type="text"],
.theme-shaddox textarea {

    background-color: #2F3E46;
    color: #CAD2C5;
}

.theme-shaddox #login-page button,
.theme-shaddox #toolbar button,
.theme-shaddox .stream-buttons button,
.theme-shaddox .slot-wrapper button
.theme-shaddox .popup button,
.theme-shaddox .numeric-value-control button {
    background-color: #2F3E46;
    color: #CAD2C5;
}

.theme-shaddox .stream-buttons button.red-button,
.theme-shaddox .slot-wrapper button.red-button,
.theme-shaddox .slot-wrapper button.slot-button-highlight
{
    background-color: #624a4a;
}

.theme-shaddox .popup {
    background-color: #2F3E46;
    color: #CAD2C5;
}

.theme-shaddox .popup .popup-titlebar {
    background-color: #2F3E46;
    color: #CAD2C5;
}

.theme-shaddox .popup th {
    background-color: #2F3E46;
    color: #CAD2C5;
}

.theme-shaddox .popup-selectable-table tr:hover td {
    background-color: #354F52;
}

.theme-shaddox .popup-selectable-table tr.popup-row-is-selected td {
    color: #CAD2C5;
    background-color: #354F52;
}

.theme-shaddox .popup-row-is-selected
{
    color: black;
}

.theme-shaddox .arrow-button-left
{
    background-image: url("/images/north_west_black_24dp.dark.svg");
}
.theme-shaddox .arrow-button-up
{
    background-image: url("/images/north_east_black_24dp.dark.svg");
}
.theme-shaddox .arrow-button-down
{
    background-image: url("/images/south_west_black_24dp.dark.svg");
}
.theme-shaddox .arrow-button-right
{
    background-image: url("/images/south_east_black_24dp.dark.svg");
}