body[page^="channel"]
{
    margin: 0;
    --scrollbarWidth: 20px;
    --vw: calc(100vw - var(--scrollbarWidth));
}

body[isiPad="1"]
{
    --vw: 100vw;
}

body[page^="channel"][browser="chrome"],
body[page^="channel"][browser="edge"],
body[page^="channel"][browser="safari"]
{
    --scrollbarWidth: 8px;
}

body[page^="channel"][browser="firefox"] {
    --scrollbarWidth: 8px;
}

body[page^="channel"][browser="firefox"] .web-container {
  height: calc(100vh - var(--navHeight));
  overflow-y: scroll;
  scrollbar-color: #444444 #d8e0e7;
  scrollbar-width: thin;
}

body[page^="channel"]::-webkit-scrollbar {
  width: var(--scrollbarWidth);
}
body[page^="channel"]::-webkit-scrollbar-track {
  background: none;
}
body[page^="channel"]::-webkit-scrollbar-thumb {
    background: rgba(146,146,146, 0.2);
    background: #444444;
    background: rgba(146,146,146,0.8);
}

/****************************************************************************************************
	THE GRID LAYOUT
****************************************************************************************************/

.channel-grid
{
    display: grid;
	--firecallHeight: 60px;
    --termsHeight: 30px;
    --chatWidth: 280px;
    --gridHeight: calc((((var(--vw) - var(--chatWidth)) / 16) * 9) + 30px + var(--firecallHeight));
    height: var(--gridHeight);
    max-height: 80vh;
    margin-top: 3px;

    grid-template-columns: 1fr var(--chatWidth);
    grid-template-rows: var(--firecallHeight) 1fr var(--termsHeight);

}

body[isEXPANDED="1"] .channel-grid
{
    --gridHeight: calc(100vh - var(--navHeight));
    max-height: none;
}

#player-cams.channel-grid
{
    grid-template-columns: auto;
    grid-template-rows: auto;
}

#player-cams.channel-grid[style]
{
    --gridHeight: var(--camsHeight);
}

.channel-grid-firecall
{
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
}

.channel-grid-player
{
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
}

.channel-grid-chat
{
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}

#chatframe {
	height: calc(var(--gridHeight) - var(--termsHeight));
}

.channel-grid-terms
{
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
    overflow: hidden;

	font-size: 12px;
	font-weight: 400;
	text-align: center;
	color: #757575;
    line-height: var(--termsHeight);

	display: grid;
	grid-template-columns: 42px 1fr;
    grid-template-rows: 30px;
}

@media (min-aspect-ratio: 8/5) {
    .channel-grid
    {
        --gridHeight: 70vh;
        --chatWidth: calc(var(--vw) - (((var(--gridHeight) - (var(--firecallHeight) + 30px)) / 9) * 16));
    }
	body[isEXPANDED="1"] .channel-grid
	{
	    --gridHeight: calc(100vh - var(--navHeight));
	    max-height: none;
	}
}

@media (min-aspect-ratio: 16/9) {
    .channel-grid
    {
        --gridHeight: 70vh;
        --chatWidth: calc(var(--vw) - (((var(--gridHeight) - (var(--firecallHeight) + 30px)) / 9) * 16));
    }
	body[isEXPANDED="1"] .channel-grid
	{
	    --gridHeight: calc(100vh - var(--navHeight));
	    max-height: none;
	}
}

/****************************************************************************************************
	SWAP BUTTON
****************************************************************************************************/

body[isUSER="1"] .channel-grid .channel-grid-terms button[name^="column"]
{
	vertical-align: top;
	grid-row-start: 1;
    grid-row-end: 2;
	grid-column-start: 1;
    grid-column-end: 2;
	height: 30px;
	padding: 0;
	border: 0;
	font-size: 0;
	outline: 0;
	background: #000000;
	background: linear-gradient(
		to bottom,
		#282828 0%,
		#0b0b0b 100%
	);
	border-left: 1px solid rgba(255,255,255, 0.14);
	border-right: 1px solid rgba(255,255,255, 0.14);
	text-align: center;
}

body[isUSER="1"] .channel-grid .channel-grid-terms button[name^="column"] .material-icons
{
	vertical-align: top;
	display: block;
	transform: rotate(270deg);
	width: 40px;
	position: relative;
	height: 30px;
}

body[isUSER="1"] .channel-grid .channel-grid-terms button[name="column-expand"] .material-icons
{
	transform: rotate(90deg);
}

body[isUSER="1"] .channel-grid .channel-grid-terms button[name^="column"] .material-icons:nth-child(1)
{
	margin: 0 0 0 -1px;
}

body[isUSER="1"] .channel-grid .channel-grid-terms button[name^="column"] .material-icons:nth-child(2)
{
	margin: -30px 0 0 5px;
}

body[isUSER="1"] .channel-grid .channel-grid-terms button[name="column-expand"] .material-icons:nth-child(1)
{
	margin-left: -5px;
}

body[isUSER="1"] .channel-grid .channel-grid-terms button[name="column-expand"] .material-icons:nth-child(2)
{
	margin-left: 1px;
}

body[isUSER="1"] .channel-grid .channel-grid-terms button[name^="column"]:hover
{
	color: #ffffff;
}


body .channel-grid .channel-grid-terms marquee
{
	vertical-align: top;
	grid-row-start: 1;
    grid-row-end: 2;
	grid-column-start: 1;
    grid-column-end: 4;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
}


body[isUSER="1"] .channel-grid .channel-grid-terms marquee
{
	grid-column-start: 2;
    grid-column-end: 4;
}

body .channel-grid button[name^="column"]
{
	display: none;
}

body[isUSER="1"]:not([isEXPANDED="1"]) .channel-grid button[name="column-expand"],
body[isUSER="1"][isEXPANDED="1"] .channel-grid button[name="column-contract"]
{
	display: block;
}

/****************************************************************************************************
	THE ACTUAL CHANNEL LAYOUT
****************************************************************************************************/

#channels
{
	margin-bottom: 20px;
	border-left: 4px solid #252525;
	border-top: 4px solid #252525;

	--performerCount: 3;
}

#extended-channels {
	/*margin-bottom: 20px;*/
	border-left: 4px solid #252525;
	border-top: 4px solid #252525;

	--performerCount: 3;
}

#channels .channel:hover,
#channels .channel.active
{
	position: relative;
	top: -2px;
	left: -2px;
	width: calc(var(--width) + 4px);

}

#channels .channel:hover .channel-active-container,
#channels .channel.active .channel-active-container
{
	border: 2px solid rgba(255,255,255, .75);
	margin-right: -4px;
	margin-bottom: -4px;
	border-radius: 2px;
}

#channels .channel.active .channel-active-container
{
	border-color: #ffffff;
}

#channels .channel .channel-favourite svg
{
    margin: 4px 2px;
    margin-top: calc((var(--rowHeight) - 20px) / 2);
    margin-left: calc((var(--rowHeight) - 20px) / 2);
    fill: #ffffff50;
    width: 20px;
	height: 20px;
}

#channels .channel .channel-option svg
{
    width: var(--size);
    height: var(--size);
    margin-left: 5px;
    fill: #ffffff90;
}

@media only screen and (min-width: 600px)
{

    #channels
	{
		--performerCount: 5;
	}

	#extended-channels {
		--performerCount: 4;
	}

    #channels .channel .channel-options-row
    {
        display: block;
    }

    #channels .channel .channel-options-block
    {
        display: none;
    }

}

@media only screen and (min-width: 700px)
{

    #channels
	{
		--performerCount: 6;
	}

	#extended-channels {
		--performerCount: 4;
	}

    #channels .channel .channel-options-row
    {
        display: block;
    }

    #channels .channel .channel-options-block
    {
        display: none;
    }

}

@media only screen and (min-width: 800px)
{

    #channels
	{
		--performerCount: 7;
	}

	#extended-channels {
		--performerCount: 5;
	}

    #channels .channel .channel-options-row
    {
    	display: block;
    }

    #channels .channel .channel-options-block
    {
        display: none;
    }

}

@media only screen and (min-width: 900px)
{
	#channels
	{
		--performerCount: 9;
	}

    #channels .channel .channel-options-row
    {
    	display: block;
    }

    #channels .channel .channel-options-block
    {
        display: none;
    }

	#extended-channels {
		--performerCount: 6;
	}
}

@media only screen and (min-width: 1000px)
{
	#channels
	{
		--performerCount: 9;
	}

    #channels .channel .channel-options-row
    {
    	display: block;
    }

    #channels .channel .channel-options-block
    {
        display: none;
    }

	#extended-channels {
		--performerCount: 7;
	}
}

@media only screen and (min-width: 1100px)
{
	#channels
	{
		--performerCount: 10;
	}

    #channels .channel .channel-options-row
    {
    	display: block;
    }

    #channels .channel .channel-options-block
    {
        display: none;
    }

	#extended-channels {
		--performerCount: 10;
	}
}
@media only screen and (min-width: 1340px)
{

    #channels
	{
		--performerCount: 10;
	}

    #channels .channel .channel-options-row
    {
        display: none;
    }

    #channels .channel .channel-options-block
    {
        display: block;
    }

	#extended-channels {
		--performerCount: 10;
	}
}
@media only screen and (min-width: 1600px)
{
	#channels
	{
		--performerCount: 12;
	}

    #channels .channel .channel-options-row
    {
        display: none;
    }

    #channels .channel .channel-options-block
    {
        display: block;
    }

	#extended-channels {
		--performerCount: 12;
	}

	body[isUSER="1"] .channel-grid.not-confirmed-layout
	{
	    --termsHeight: 30px;
	}

	body[isUSER="1"] .channel-grid.not-confirmed-layout .channel-grid-terms
	{
		grid-template-columns: 42px 1fr 260px 200px;
	}

	body[isUSER="1"] .channel-grid.not-confirmed-layout .channel-grid-terms marquee
	{
		vertical-align: top;
		grid-row-start: 1;
	    grid-row-end: 3;
		grid-column-start: 2;
	    grid-column-end: 3;
	}

	body[isUSER="1"] .i-prefer-the-old-layout-cause-im-weird
	{
		grid-row-start: 1;
	    grid-row-end: 3;
		grid-column-start: 3;
	    grid-column-end: 4;
	}

	body[isUSER="1"] .keep-the-new-layout
	{
		--height: 30px;
		grid-row-start: 1;
	    grid-row-end: 3;
		grid-column-start: 4;
	    grid-column-end: 5;
	}

}



@media only screen and (max-height: 600px)
{
	body[page^="channel"]
	{
		--navHeight: 40px;
	}
	.channel-grid,
	._FIRECALL-HOT-BUTTONS
	{
		--firecallHeight: 50px !important;
	}
    .channel-grid
    {
        --gridHeight: 65vh;
    }
	body[isEXPANDED="1"] .channel-grid
	{
	    --gridHeight: calc(100vh - var(--navHeight));
	    max-height: none;
	}
	#channels
	{
		--performerCount: 11;
	}
	#extended-channels {
		--performerCount: 11;
	}
	.channel icon,
    #channels .channel .channel-option svg
	{
		--size: 16px;
	}
	.channel .channel-options-block .channel-option
	{
		--remain: 0px;
	}
	.channel .channel-option .channel-option-text
	{
	    font-size: 10px;
	}
}