html, body, #app {width: 100%; height: 100%;}

/* Main definitions */
:root {--video-width: 45vw;}

#page-content {
    display: flex;
    width: 100%;
    height: calc(100% - 61px);
    justify-content: center;
    align-items: center;
}
#page-content-wrapper {width: var(--video-width)}

.video_container {
    width: 100%;
    height: calc(var(--video-width) / 1.777777777777778);

    background: #1a1a1a;
}

video {width: 100%;height: 100%;}
video.hidden {display: none;}
video:focus {outline: none}

/* Titlebar */
.titlebar {white-space: nowrap; height: 41px; background: #1a1a1a; padding: 10px; border-radius: 5px}
.titlebar > * {display: inline-block; width: 50%}
.titlebar > .left {text-align: left; height: 100%; line-height: 41px;}
.titlebar > .right {text-align: right; float: right; height: 100%; line-height: 41px;}

#text_container {width: auto; text-align: center;}
#text_container > .self {font-weight: bold;}

/* Live reminder */
.live_reminder {
    position: absolute;
    right: 10px;
    top: calc(61px + 10px);
    padding: 10px 15px;
    border-radius: 500px;
    animation: 950ms infinite alternate ease-out breathing-color-red;
}

/* Config modal */
#configs_modal select option {background-color: #353535; color:rgba(255,255,255,.7);}
#configs_modal select option.current {color:rgba(255,255,255,1) !important;}

/* User container */
.user {
    display: inline-block;
    border-radius: 5px;
    padding: 15px;
    width: 95px;
}
.user:hover {background: rgba(255, 255, 255, 0.15); cursor: pointer;}
.user:not(:first-child) {margin-left: 15px}
.user.streaming {background: rgba(255, 0, 0, 0.15)}

.user > img {width: 64px; height: 64px; border-radius: 60%; border: 3px solid transparent}
.user.streaming > img {border-color: red}
.user > p {margin: 5px 0px 0px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* General */
.uk-button-primary {background-color: #1e87f0 !important; color: white !important}
.uk-button-danger {background-color: #ec2147 !important; color: white !important}

button[disabled] {opacity: 0.5; border: none}
button[disabled]:hover {color: rgba(255, 255, 255, 0.5) !important;}

@keyframes breathing-color-red {
    from {
        background-color: rgba(255, 0, 0, 0.35)
    }
    to {
        background-color: rgba(255, 0, 0, 0.5)
    }
}

[v-cloak] {display: none;}