#vue-app
{
    background-color: #c0c0c0;
    /* background-image: url("../characters/ika/front-standing.svg"); */
    background-image: url("../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: 70px
}

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;
}

#login-page
{
    padding: 5px;
}

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

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

#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 */
}

.video-container
{
    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-stream-title
{
    color: red;
    text-shadow: #939393 0px 0px 1px;
}

.active-stream-title
{
    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,
.chessboard-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,
.chessboard-slot-wrapper button:hover:enabled,
.popup button:hover:enabled
{
    border-color: black;
}

#login-page button:disabled,
#toolbar button:disabled,
.stream-buttons button:disabled,
.chessboard-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;
}

.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("../north_west_black_24dp.svg");
}
.arrow-button-up
{
    background-image: url("../north_east_black_24dp.svg");
}
.arrow-button-down
{
    background-image: url("../south_west_black_24dp.svg");
}
.arrow-button-right
{
    background-image: url("../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;
}

.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: block;
    width: 80%;
    overflow-x: auto;
    padding-top: 2px;
    padding-bottom: 2px;
    user-select: none;
}

#character-selection img {
//    display: inline-block;
    object-fit: contain;
    height: 70px;
    width: 60px;
    padding-top: 10px;
    min-width: 10px;
    object-fit: contain;
}

 .character-selected img {
    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 button,
.chessboard-slot-wrapper button
{
    background-color: #4d4d9f;
    color: white;
}


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


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

.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;
}

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

/* make all jquery slider handles round */
#vue-app .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;
}

.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;
}