:root {
--primary: 75, 54, 124;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1em;
}

:focus-visible {
outline: none;
}

html, body {
width: 100%;
height: 100%;
font-family: monospace;
font-size: 16px;
}

body {
position: relative;
background-color: Gray;
}

a {
color: White;
text-decoration: none;
}

div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}

input[name="layout"] {
position: fixed !important;
top: -999px;
left: -999px;
z-index: -1;
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
border: none !important;
background-color: Transparent !important;
}

iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0 solid Transparent;
}

.player, .chat, .menu, .submenu {
transition: all 0.25s ease;
}

.player {
z-index: 1;
display: none;
min-width: var(--player-min-width);
min-height: var(--player-min-height);
}

.chat {
z-index: 2;
display: none;
min-width: var(--chat-min-width);
min-height: var(--chat-min-height);
overflow: hidden;
}

.chat > iframe {
top: -40px;
height: calc(100% + 40px);
}

.menu {
top: 0;
right: 0;
bottom: auto;
left: auto;
z-index: 9;
display: none;
width: var(--menu-size);
height: var(--menu-size);
background-color: rgb(var(--primary));
opacity: 0;
}

.menu a {
position: relative;
display: block;
width: 100%;
height: 100%;
}

.menu a:before, .menu a:after {
content: '';
position: absolute;
top: 47%;
left: 35%;
width: 30%;
height: 6%;
background-color: CurrentColor;
}

.menu a:after {
top: 35%;
left: 47%;
width: 6%;
height: 30%;
}

.p1:hover ~ .m1,
.p2:hover ~ .m2,
.p3:hover ~ .m3,
.p4:hover ~ .m4 {
opacity: 0.5;
}

.menu:hover {
opacity: 1;
}

.submenu, .channels {
top: 0;
right: 0;
bottom: auto;
left: auto;
z-index: 9;
display: none;
background-color: Black;
color: White;
}

.submenu {
right: var(--menu-size);
direction: rtl;
}

.channels {
top: var(--menu-size);
}

.menu:hover + .submenu,
.menu:hover + .submenu + .channels,
.submenu:hover,
.channels:hover {
display: block;
}

.submenu > div,
.channels > div {
position: relative;
height: var(--menu-size);
line-height: var(--menu-size);
border: 1px solid Transparent;
}

.submenu > div {
display: inline-block;
border-bottom-width: 0;
direction: ltr;
}

.channels div {
box-sizing: content-box;
border-left-width: 0;
}

.submenu > div > span,
.channels > div > a {
display: block;
width: 100%;
height: var(--menu-size);
line-height: var(--menu-size);
padding: 0 1em;
}

.submenu > div > span {
cursor: default;
}

.submenu > div:hover,
body .submenu .langs div span,
.channels > .active,
.channels > div:hover {
background-color: rgba(var(--primary), 0.5);
}

#layout1:checked ~ .submenu label[for="layout1"],
#layout2:checked ~ .submenu label[for="layout2"],
#layout3:checked ~ .submenu label[for="layout3"],
#layout4:checked ~ .submenu label[for="layout4"] {
background-color: rgba(var(--primary), 0.5);
cursor: default;
}

.submenu > div:hover,
.channels > div:hover {
border-color: Gray;
}

.submenu > div > div,
.channels > div > div {
position: absolute;
display: none;
background-color: Black;
}

.submenu > div > div {
top: 100%;
right: -1px;
bottom: auto;
left: -1px;
}

.channels > div > div {
top: -1px;
right: 100%;
bottom: auto;
left: auto;
}

.submenu > div:hover div,
.channels > div:hover div {
display: block;
}

.submenu > div > div > *,
.channels > div > div > * {
position: relative;
display: block;
padding: 0 1em 0 var(--menu-size);
line-height: var(--menu-size);
border: 1px solid Gray;
border-width: 0 1px;
white-space: nowrap;
cursor: pointer;
}

.channels > div > div > *:first-child {
border-width: 1px 0 0 1px;
}

.langs > div > *:last-child,
#layout4 + .player + .chat + .menu ~ .submenu > div > .layout > label[for="layout1"],
#layout4 + .player + .chat + .player + .chat + .menu ~ .submenu > div > .layout > label[for="layout2"],
#layout4 + .player + .chat + .player + .chat + .player + .chat + .menu ~ .submenu > div > .layout > label[for="layout3"],
.player ~ .player ~ .player ~ .player ~ .submenu > div > .layout > label[for="layout4"],
#layout4 + .player + .chat + .menu ~ .submenu + .channels > div > div > .refresh + .refresh,
.player ~ .player ~ .channels > div > div > .remove {
border-bottom-width: 1px;
}

.submenu > div > div > *:hover,
.channels > div > div > *:hover {
background-color: rgb(var(--primary));
font-weight: bold;
}

.refresh:before {
content: '';
position: absolute;
top: 1em;
left: 1em;
width: 1em;
height: 1em;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABgElEQVQ4y4WTPWtVQRCGn7vEQgJXrfQPWImW4UZDUBRnGgWxGkFsomJtaWev2FxQSxGmEEWtZsEURhOQgG3yDxILEWLARqJF9uBw8JC32d1nZ+djd3ZkIWeAeWCPfxoBK8A34LRrXWFAIwAL+QBc7O3dda3PLWQMTIE54LFrfWYhuFYASltcApZ7Dv60cce13gTuAE8tZBc41xmVlsEssPi/FLtIrvUjcB2YBT5byFWA0gxeA4c4QK71DbDalu8sZFws5CQgye5IMyp9BxYC8CihBwW4l8AT17rjWheA9YFyviS0OAOcTeBFi4Jr/TpQya80PzoDnEhgs7u0gfQBTiW8XYDvCRweODxxrV0Jt9LWamkd12k+RcqaWMgnCzkOLCU+LcDDBO4PlLAHLADbib1yrVvFtf4ArjV4wUKucLB2gRsWsv/WrvVta8+fwHsLOd+7uL7WXOtves2y5lrHwG1gaiEvgWO55ZMuW8iya93/jUOykAmw0Z56Ln2wzun6Xx87flPweouxAAAAAElFTkSuQmCC');
filter: grayscale(1);
}

.refresh:hover:before {
filter: none;
}

.remove:before, .remove:after {
content: '';
position: absolute;
top: calc(1.5em - 1px);
left: 1em;
display: block;
width: 1em;
height: 2px;
background-color: Gray;
transform-origin: 0.5em 1px;
}

.remove:before {
transform: rotate(45deg);
}

.remove:after {
transform: rotate(-45deg);
}

.remove:hover:before, .remove:hover:after {
background-color: Red;
}

.submenu > div > div > .remove,
.submenu > div > .layout > label + label + label,
.channels > div > div > .remove {
display: none;
}

.langs > div > * {
display: block;
}

.submenu > .layouts {
display: none;
}

.layouts > span,
.langs > span {
padding-left: var(--menu-size) !important;
}

.langs > div > span {
cursor: default;
}

.layouts > span:before {
content: '';
}

#layout1:checked ~ .submenu .layouts > span:before {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 32 32" stroke="White"><title>1 stream</title><rect x="0" y="7" width="25" height="17" /><rect x="27" y="7" width="4" height="17" /></svg>');
}

#layout2:checked ~ .submenu .layouts > span:before {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 32 32" stroke="White"><title>2 streams</title><rect x="0" y="7" width="4" height="17" /><rect x="6" y="7" width="19" height="7" /><rect x="6" y="17" width="19" height="7" /><rect x="27" y="7" width="4" height="17" /></svg>');
}

#layout3:checked ~ .submenu .layouts > span:before {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 32 32" stroke="White"><title>3 streams</title><rect x="0" y="7" width="14" height="8" /><rect x="0" y="17" width="14" height="7" /><rect x="16" y="17" width="15" height="7" /><rect x="16" y="7" width="15" height="8" /><path d="M21,7.5 v7 m5,0 v-7" /></svg>');
}

#layout4:checked ~ .submenu .layouts > span:before {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 32 32" stroke="White"><title>4 streams</title><rect x="0" y="7" width="14" height="7" /><rect x="17" y="7" width="14" height="7" /><rect x="0" y="17" width="14" height="7" /><rect x="17" y="17" width="14" height="7" /><path d="M4,7.5 v6 m23,0 v-6 m0,10 v6 m-22,0 v-6" /></svg>');
}

.layouts > span:before,
.layout svg,
.langs img {
position: absolute;
top: 0.5em;
left: 0.5em;
width: 2em;
height: 2em;
}

.layout svg rect,
.layout svg path {
stroke: CurrentColor;
fill: Transparent;
}

.player ~ .player ~ .submenu > .layouts {
display: inline-block;
}

.player ~ .player ~ .player ~ .submenu > div > .layout > label[for="layout3"],
.player ~ .player ~ .player ~ .player ~ .submenu > div > .layout > label[for="layout4"],
.player ~ .player ~ .channels > div > div > .remove {
display: block;
}

#add_channel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999999999;
background-color: rgba(0, 0, 0, 0.5);
}

#add_channel > div {
position: fixed;
top: 50%;
right: auto;
bottom: auto;
left: 50%;
width: 50%;
min-width: 20em;
max-width: 30em;
padding: 3em;
border-radius: 0.6rem;
background-color: White;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0px 4px rgba(0, 0, 0, 0.05);
transform: translate(-50%, -50%);
}

#add_channel input[type="text"],
#add_channel select {
display: block;
width: 100%;
box-sizing: border-box;
margin-bottom: 2em;
padding: 0.5em;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 0.4rem;
background-color: rgba(0, 0, 0, 0.1);
}

#add_channel input[type="text"]:hover,
#add_channel select:hover {
border-color: rgba(0, 0, 0, 0.2);
}

#add_channel input[type="text"]:focus,
#add_channel select:focus {
border-color: rgb(var(--primary));
background-color: White;
}

#add_channel input[type="text"].error {
background-color: rgba(255, 0, 0, 0.2);
}

#add_channel input[type="button"] {
padding: 0.5em 1em;
border: none;
border-radius: 0.4rem;
}

#add_channel input[value="OK"] {
background-color: rgba(var(--primary), 0.9);
color: White;
}

#add_channel input[value="OK"]:hover {
background-color: rgb(var(--primary));
}

#add_channel input[value="OK"]:active {
background-color: rgba(var(--primary), 0.9);
}

#add_channel input[value="Annuler"] {
float: right;
background-color: rgba(0, 0, 0, 0.05);
color: Black;
}

#add_channel input[value="Annuler"]:hover {
background-color: rgba(0, 0, 0, 0.1);
}

#add_channel input[value="Annuler"]:active {
background-color: rgba(0, 0, 0, 0.05);
}

#add_channel input[type="button"]:disabled {
background-color: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.3);
cursor: not-allowed;
}