body .showOnLive {
    display: none;
}

body[isLIVE="1"] .showOnLive {
    display: inline;
}


.encoder-feed {
    color: #d8d8d8;
    font-size: 0;
    vertical-align: top;
}

#phone-box.active,
#perve-box.active,
#perve-box.private
{
    background: var(--privateColour);
    padding: 8px;
    border-radius: 3px;
}

#phone-box.active
{
    background: #258bbb;
}

._columns[hasFTA="1"][hasPAYWALL="1"] #perve-box {
    margin-top: 10px;
}

#phone-box.active[adult="2"],
#phone-box.active-adult-call:not([adult="2"])
{
    background: #fee41a;
    color: #000000;
}

#phone-box.active-non-adult-call:not([adult="2"])
{
    background: #258bbb;
}

#phone-box.active[adult="2"] ._column-header-row ._column-title
{
    color: #000000;
}

#perve-box.active {
    background: var(--pervColour);
    background: #388e3c;
}

._column[encoder] ._column-header-row ._column-title {
    width: calc(100% - (var(--headerButtonCount) * 32px));
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.encoder-feed .encoder-control button {
    background: none;
    border: none;
    outline: 0;
    padding: 2px 4px;
    text-align: center;
    transition: color .5s ease;
    color: #ffffff50;
    background: rgba(255,255,255, .5);
}

.encoder-feed .encoder-feed-header-row button {
    background: none;
    border: none;
    outline: 0;
    padding: 2px 4px;
    text-align: center;
    transition: color .5s ease;
    color: #ffffff50;
}

body[isLIVE="0"] .encoder-feed .encoder-feed-header-row button[name^="encoder1VideoDisplay-"],
body[isLIVE="0"] .encoder-feed .encoder-feed-header-row button[name="encoder1CameraFlip"],
.encoder-feed[activeSETTINGS="1"] .encoder-feed-header-row button[name="settings"],
.encoder-feed .encoder-feed-header-row button:hover
{
    color: #ffffff;
}

/****************************************************************************************************
    column state denote
****************************************************************************************************/

.encoder-feed .encoder-feed-header-row button[name="resize"]
{
    cursor: col-resize;
}

.encoder-feed .encoder-feed-header-row button[name="resize"]:hover
{
    width: 24px;
    height: 24px;
}

.encoder-feed .encoder-feed-header-row button[name="resize"]:hover .material-icons
{
    display: none;
}

.encoder-feed .encoder-feed-header-row button[name="resize"][active="1"]
{
    color: #ffffff;
}

.chatframe-placeholder {
    display: none;
    width: calc(100% - 4px);
    height: calc(100% - var(--columnHeaderHeight));
    border: 2px solid #666666;
    background: url('images/dot.png') 50% 0;
}

/****************************************************************************************************
    audio state denote
****************************************************************************************************/

.encoder-feed .encoder-feed-header-row .audioState {
    display: inline;
}

.encoder-feed .encoder-feed-header-row .audioState button[name="audioToggle"][active="0"] .material-icons {
    color: #cc0000;
}

.encoder-feed .encoder-feed-header-row .audioState button[name="audioToggle"][active="1"] .material-icons {
    color: #388e3c;
}

.encoder-feed.active .encoder-feed-header-row .audioState button[name="audioToggle"][active="1"] .material-icons {
    color: #ffffff;
}

.encoder-feed .encoder-feed-header-row .audioState[active="0"] button[name="audioToggle"][active="1"],
.encoder-feed .encoder-feed-header-row .audioState[active="1"] button[name="audioToggle"][active="0"]
{
    display: none;
}

/****************************************************************************************************
    feed details
****************************************************************************************************/

.encoder-feed .encoder-feed-video {
    display: block;
    width: 100%;
    overflow: hidden;
    vertical-align: top;
}



.encoder-feed .encoder-feed-video .encoder-feed-video-resetting
{
    position: absolute;
    display: block;
    background: rgba(0,0,0, .75);
    width: var(--width);
    height: var(--height);
    padding-top: calc((var(--height) - (55px + 20px)) / 2);

    color: #ffffff80;
    font-size: 14px;
    font-family: monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
}

.encoder-feed .encoder-feed-video .encoder-feed-video-resetting .material-icons
{
    animation: spinner 2s linear infinite;
    font-size: 48px;
}

.encoder-feed .encoder-feed-video object {
    width: 100%;
    height: 100%;
}

.channel-details {
    display: none;
    vertical-align: top;
}

body[isLIVE="1"] .channel-details {
    display: block;
}

.channel-details .channel-detail {
    display: block;
    width: 100%;
    height: 59px;
    vertical-align: top;
    background: #8e1769;
    border: 1px solid #303030;
    padding: 12px;
    color: #ffffff;
    font-family: 'Segoe UI', 'Arial';
    font-size: 0;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	vertical-align: middle;
}

#perve-box.channel-details .channel-detail {
    background: var(--prevColour);
}

#perve-box.channel-details .channel-detail[content="perve"] {
    background: #388e3c;
}

#perve-box.channel-details .channel-detail[content="private"] {
    background: var(--privateColour);
}

.channel-details .channel-detail .channel-detail-number,
.channel-details .channel-detail .channel-detail-minutes
{
    display: inline-block;
    width: 60px;
    height: 100%;
    vertical-align: middle;
    font-size: 32px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-details .channel-detail .channel-detail-text {
    display: inline-block;
    width: calc(100% - 60px);
    font-size: 10px;
    vertical-align: middle;
    text-align: center;
}

.channel-details .channel-detail .channel-detail-minutes {
    font-size: 22px;
    padding: 5px 0;
}

/**********/

.encoder-feed .channel-details .channel-detail {
    display: inline-block;
    width: 25%;
    padding: 0;
    text-align: center;
}

.encoder-feed .channel-details .channel-detail .channel-detail-number,
.encoder-feed .channel-details .channel-detail .channel-detail-minutes
{
    display: block;
    width: 100%;
    height: auto;
    text-align: center;

    /* animation-name: fade-out-in; */
    animation-duration: 0.25s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
}


@keyframes fade-out {
	0% {
        opacity: 1;
    }
	100% {
        opacity: 0;
	}
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
	100% {
        opacity: 1;
	}
}


.encoder-feed .channel-details .channel-detail:first-child
{
    border-left-width: 2px;
}

.encoder-feed .channel-details .channel-detail:last-child
{
    border-right-width: 2px;
}

.encoder-feed .channel-details .channel-detail .channel-detail-text {
    display: block;
    width: 100%;
}

/**********/

@media only screen and (max-width: 640px)
{

    .channel-details .channel-detail {
        width: calc(100% - 2px);
        height: 40px;
        padding: 6px;
        border: 0;
        margin: 1px;
    }

    .channel-details .channel-detail:not(:nth-child(1)) {
        display: inline-block;
        width: calc(50% - 2px);
    }

    .channel-details .channel-detail .channel-detail-number,
    .channel-details .channel-detail .channel-detail-minutes
    {
        font-size: 22px;
        padding: 0;
    }

}

/****************************************************************************************************
    feed details
****************************************************************************************************/

body[encoder="closed"] .channel-details .channel-detail {
    height: 34px;
    padding-top: 5px;
}

body[encoder="closed"] .channel-details .channel-detail .channel-detail-number {
    font-size: 18px;
}

body[encoder="closed"] .channel-details .channel-detail .channel-detail-minutes {
    font-size: 14px;
    padding: 2px 0;
}

body[encoder="closed"] .channel-details .channel-detail .channel-detail-text {
    display: none;
}

/****************************************************************************************************
    column state denote
****************************************************************************************************/

body[encoder="closed"] .encoder-feeds-container .encoder-feed .encoder-feed-video {
    width: calc(100% - 36px);
}

/****************************************************************************************************
    column state denote
****************************************************************************************************/

.encoder-feed .encoder-feed-header-row button[name="quality"] {
    padding-top: 5px;
    vertical-align: top;
}

.encoder-feed .encoder-feed-header-row button[name="quality"] .icon {
    width: 100%;
    height: 14px;
    padding: 0 3px;
    background: #ffffff50;
    border-radius: 2px;
    color: #363636;
    font-size: 14px;
    font-family: monospace;
    font-weight: bold;
    font-style: normal;
    text-align: center;
    text-transform: uppercase;
    transition: background .5s ease;
}

.encoder-feed .encoder-feed-header-row button[name="quality"]:hover .icon {
    background: #ffffff;
}

.encoder-feed .encoder-feed-header-row button:hover {
color: #ffffff;
}

body[isLIVE="1"] .encoder-feed[quality="1"] .encoder-feed-header-row button[name="quality"]:not([type="HD"]),
body[isLIVE="1"] .encoder-feed[quality="2"] .encoder-feed-header-row button[name="quality"]:not([type="HI"]),
body[isLIVE="1"] .encoder-feed[quality="3"] .encoder-feed-header-row button[name="quality"]:not([type="MED"])
{
    display: none;
}


/****************************************************************************************************
    active callers
****************************************************************************************************/

#phone-box.encoder-feed.active .channel-details .channel-detail {
    width: calc(100% / var(--detailCount));
}

.active-callers {
    display: none;
    margin: 2px 0;
    text-align: left;
    font-size: 0;
    vertical-align: middle;
}

#phone-box.active .active-callers
{
    display: grid;
    row-gap: 2px;
    background: rgb(0 0 0 / .8);
}

.active-callers .active-caller
{
    width: 100%;
    height: 26px;
    font-weight: normal;
    text-align: left;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	vertical-align: middle;
    font-weight: bold;
    user-select: none;

    display: grid;
    grid-template-columns: 30px 1fr 30px 80px;
    align-items: center;


    --mainColour: #000000;
    --mainColour: rgb(25 25 25 / 1);
    /*
    color: rgba(0,0,0, .8);
    */
}

.active-callers .active-caller[adult="0"]
{
    background: #2d32cc;
    --mainColour: rgb(225 225 225 / .9);
}

.active-callers .active-caller[adult="1"]
{
    background: #fee41a;
}

.active-callers .active-caller[adult="2"]
{
    background: #fee41a;
}

.active-callers .active-caller .active-caller-classification
{
    display: none;
    width: fit-content;
    height: fit-content;
    margin: auto;
    padding: 1px;
    background: #ffff00;
    border: 1px solid #000000;
    border-radius: 2px;
    color: #000000;
    font-weight: normal;
    text-align: left;
    font-family: monospace;
    font-size: 12px;
}

.active-callers .active-caller .active-caller-classification.show-on-adult
{
    color: #ffffff;
    background: #aa0000;
    border-color: #ffffff;
}

.active-callers .active-caller[adult="0"] .active-caller-classification.hide-on-adult,
.active-callers .active-caller:not([adult="0"]) .active-caller-classification.show-on-adult
{
    display: block;
}

.active-callers .active-caller .active-caller-icon,
.active-callers .active-caller .active-caller-position
{
    height: 100%;
    background: rgb(25 25 25 / .2);
}


.active-callers .active-caller .material-icons
{
    display: none;
    width: 26px;
    height: 100%;
    margin: auto;
    color: var(--mainColour);
}

.active-callers .active-caller[position="loading"] .material-icons[icon="loading"],
.active-callers .active-caller[position="welcome"] .material-icons[icon="welcome"],
.active-callers .active-caller[position="menu"] .material-icons[icon="menu"],
.active-callers .active-caller[position="external"] .material-icons[icon="external"],
.active-callers .active-caller[position="conversation"] .material-icons[icon="conversation"],
.active-callers .active-caller[position="queuing"] .material-icons[icon="queuing"],
.active-callers .active-caller[position="listening"] .material-icons[icon="listening"],
.active-callers .active-caller[position="left chat"] .material-icons[icon="left chat"],
.active-callers .active-caller[position="call ended"] .material-icons[icon="call ended"]
{
    display: block;
}

.active-callers .active-caller .active-caller-position {
    display: grid;
    align-items: center;

    width: 100%;
    padding: 0 0 0 4px;
    font-size: 10px;
    text-align: center;
    text-align: left;
    text-transform: lowercase;
    color: var(--mainColour);

}

.active-callers .active-caller .active-caller-username
{
    display: block;
    width: 100%;
    height: fit-content;
    padding-left: 4px;
    color: var(--mainColour);
    font-size: 11px;
    text-align: left;
}

/**********/

@media only screen and (max-width: 640px)
{



}


/****************************************************************************************************
    encoder control
****************************************************************************************************/

.encoder-control .form-step {
    padding: 14px;
    vertical-align: top;
}

.encoder-control .form-step .form-step-title {
    margin-bottom: 0;
}

.encoder-control .form-step radiogroup {
    display: block;
    margin-top: 10px;
}

.encoder-control .form-step button[name="edit"] {
    vertical-align: top;
    margin-left: 10px;
}

body[encoder="closed"] .encoder-control .form-step button[name="edit"] {
    vertical-align: top;
    margin: 10px 0 0 0;
    display: block;
    width: auto;
}

.encoder-control label
{
    display: block;
    margin-bottom: 2px;
    color: #ffffff;
    font-size: 12px;
}


.encoder-control button,
.encoder-control select
{
    display: inline-block;
    border-radius: 4px;

}

.encoder-control .audio-level-box
{
    display: block;
    width: 100%;
    margin-top: 10px;
}

.encoder-control .audio-level-box .material-icons
{
    color: #ffffff25;
}

.encoder-control .audioLevel
{
    display: inline-block;
    vertical-align: top;
    width: calc(100% - (24px + 5px));
    margin: 2px 0 0 5px;
    background-color: #00000025;
	border: 1px solid #ffffff10;
}

/****************************************************************************************************
    encoder control
****************************************************************************************************/

.encoder-control select.streamOptions,
.encoder-control select.cameraSelect,
.encoder-control select[name="camera"],
.encoder-control select[name="microphone"]
{
    display: block;
    width: calc(100% - 4px);
    height: auto;
    margin-top: 0;
    padding: 8px 4px;
    color: #000000;
    font-size: 12px;
}

.encoder-control select[disabled="disabled"]
{
    background: linear-gradient(to bottom,
        #222222,
        #333333
    );
    box-shadow: none;
    color: #cccccc25;
    text-shadow: none;
    cursor: not-allowed;
}

.encoder-feed[onTV="0"] .channel-details .channel-detail.web-live,
.encoder-feed[onTV="1"] .channel-details .channel-detail.tv-live
{
    display: inline-block;
}

.channel-details .channel-detail.web-live {
    --background: #64b95e;
}
.channel-details .channel-detail.tv-live {
    --background: #e02239;
}

.channel-details .channel-detail.web-live .material-icons,
.channel-details .channel-detail.tv-live .material-icons
{
    font-size: 22px;
    padding: 5px 0;
}

.channel-details .channel-detail.web-live,
.channel-details .channel-detail.tv-live
{
    display: none;
    opacity: 0;
    background: #ffffff;

    animation: tv-display 1s linear 1 forwards;
}

@keyframes tv-display {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
        background: var(--background);
		opacity: 1;
	}
}

/****************************************************************************************************
    encoder control
****************************************************************************************************/

#encoder0detail,
#encoder1detail {
    display: none;
}

.encoder-control {
    padding: 1px 10px 10px 10px;
    background: #00000020;
    font-size: 0;
}

.encoder-feed[activeSETTINGS="0"] .encoder-control {
    display: none;
}

._column[content="encoders"] .encoder-control ._column-header-row ._column-title {
    width: 100%;
}



/****************************************************************************************************
    online timer
****************************************************************************************************/

.channel-detail[content="online-timer"]
{
    background: #00000075;
}

/****************************************************************************************************
    settings display changes
****************************************************************************************************/

body[encoder0CameraFlip="1"] .encoder-feed[encoder="encoder0"] .encoder-feed-video video,
body[encoder1CameraFlip="1"] .encoder-feed[encoder="encoder1"] .encoder-feed-video video,
body[encoder1CameraFlip="1"] .encoder-feed[encoder="encoder1"] .encoder-feed-video object
{
    transform: scaleX(-1);
}

body[encoder0VideoDisplay="0"] .encoder-feed[encoder="encoder0"] .encoder-feed-video,
body:not([encoder0VideoDisplay="0"]) .encoder-feed[encoder="encoder0"] .encoder-feed-header-row button[name="encoder0VideoDisplay-hidden"],
body[encoder0VideoDisplay="0"] .encoder-feed[encoder="encoder0"] .encoder-feed-header-row button[name="encoder0VideoDisplay-visible"],

body[encoder1VideoDisplay="0"] .encoder-feed[encoder="encoder1"] .encoder-feed-video,
body:not([encoder1VideoDisplay="0"]) .encoder-feed[encoder="encoder1"] .encoder-feed-header-row button[name="encoder1VideoDisplay-hidden"],
body[encoder1VideoDisplay="0"] .encoder-feed[encoder="encoder1"] .encoder-feed-header-row button[name="encoder1VideoDisplay-visible"],

body[encoder1mute="0"] .display-toggle[name="encoder1Mute"]
{
    display: none;
}

/****************************************************************************************************
    isLIVE display changes
****************************************************************************************************/

body[isLIVE="0"]:not([encodingType="1"]) .encoder-feed .encoder-feed-header-row .audioState,
body[isLIVE="0"] .encoder-feed .encoder-feed-header-row button[name="quality"],
body[isLIVE="0"] .channel-detail[content="online-timer"]
{
    display: none;
}

/****************************************************************************************************
    cellcast
****************************************************************************************************/

/* cellcast */
@media only screen and (max-width: 1022px)
{

    ._columns[hasFTA="1"][hasPAYWALL="1"] #perve-box
    {
    	margin-top: 0;
    }

    body[inPRIVATE="1"] ._columns[hasFTA="1"][hasPAYWALL="1"] #perve-box ._column-header-row {
    	margin-bottom: 0;
    }

    body[inPRIVATE="1"] #phone-box.active,
    body[inPRIVATE="1"] #perve-box.active,
    body[inPRIVATE="1"] #perve-box.private
    {
    	padding-top: 4px;
    }

}

/****************************************************************************************************
    admin
****************************************************************************************************/

.firecast-input-label-container,
.firecast-checkbox-label-container
{
    display: grid;
    grid-template-columns: 60px auto;
    align-items: center;

    margin: 3px 0;
    color: #cccccc;
	text-shadow: 1px 1px 0 #00000050;
	font-size: 10px;
    text-transform: uppercase;
}

.firecast-input-label-container.firecast-checkbox-label-container
{
    grid-template-columns: 20px auto;
}

.firecast-checkbox-label-container input[type="checkbox"]
{
    margin: 0;
}

/****************************************************************************************************
    admin
****************************************************************************************************/

.firecast-admin-encoder-feed-select
{
    display: grid;
    grid-template-columns: repeat(2, 50%);
}


.firecast-admin-encoder select
{
    display: block;
    width: 100%;
    color: #000000;
    font-size: 14px;

	padding: 2px 4px;
	color: #555;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 4px;
}

.firecast-admin-encoder textarea
{
    width: 100%;
    height: fit-content;
    padding: 2px 4px;
    overflow: hidden;
    background: #ffffff80;
    border: 1px solid #00000050;
    border-radius: 4px;
    font-size: 10px;
}

.firecast-admin-encoder textarea:focus
{
    overflow: unset;
}

.firecast-admin-encoder input[type="number"]
{
    display: inline-block;
    width: 50px;
    max-width: fit-content;
	padding: 2px 4px;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 4px;
    color: #555;
    font-size: 14px;
}

.firecast-admin-encoder table tr td
{
    padding: 8px;
	min-height: unset;
}

.firecast-admin-encoder table tr[row="info"] td
{
    padding-top: 0px;
}

.firecast-admin-encoder table tr[row="camera"] td
{
    padding-bottom: 6px;
    border-bottom: 0;
}

.firecast-admin-encoder table tr td,
.firecast-admin-encoder table tr:nth-child(even) td
{
    background: #ffffff15;
}

.firecast-admin-encoder label,
.firecast-admin-encoder table tr td:first-child
{
    color: #cccccc;
	text-shadow: 1px 1px 0 #00000050;
	font-size: 10px;
}

.firecast-admin-encoder table tr td:first-child
{
    text-transform: uppercase;
}

.firecast-admin-encoder label
{
    margin-bottom: 2px;
}

.firecast-admin-encoder table tr[row="stream"] td .firecast-input-label-container
{
    margin: 8px 0;
    padding: 5px 0;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.firecast-admin-info
{
    /*
text-shadow: none;
display: block;
width: calc(100% - 75px);
min-height: 75px;
vertical-align: top;
opacity: 0;
font-size: small;
line-height: 1.8;
font-family: 'Segoe UI', 'Arial';
box-sizing: border-box;
color: #ffffff;
*/
    background: #2196f350;
    border: 1px solid #2196f3;
    border-radius: 3px;
    padding: 2px 6px;
    color: rgba(255,255,255, .8);
    font-size: 10px;
    letter-spacing: .5px;
    line-height: inherit;
}

.firecast-admin-encoder button
{
    width: 100%;
	font-size: 10px;

    --height: 34px;
	display: inline-block;
	border-radius: 4px;
	height: var(--height);
	padding: 0;
	background: #ffffff50;
	border: none;
	color: rgba(255,255,255, .25);
	text-align: center;
	font-size: 12px;
	text-shadow: none;
	text-transform: uppercase;
}

.firecast-admin-encoder button *
{
    pointer-events: none;
}

.firecast-admin-encoder button[encoder-action^="playback"]
{
	width: var(--size);
	height: var(--size);
    padding: 0 !important;
	color: rgba(255,255,255, .8);

    --size: 28px;
}

.encoder-feed .firecast-admin-encoder-feed-select button:hover,
.firecast-admin-encoder button[encoder-action^="playback"]:hover,
body[encoder0Display="camera"] .firecast-admin-encoder-feed-select button[name="display"][encoder="encoder0"][value="camera"],
body[encoder0Display="stream"] .firecast-admin-encoder-feed-select button[name="display"][encoder="encoder0"][value="stream"],

body[encoder1Display="camera"] .firecast-admin-encoder-feed-select button[name="display"][encoder="encoder1"][value="camera"],
body[encoder1Display="stream"] .firecast-admin-encoder-feed-select button[name="display"][encoder="encoder1"][value="stream"]
{
	background: #00ACFF;
    color: rgba(255,255,255, 1);
}

.encoder-feed[encoder-player-state="playing"] .firecast-admin-encoder button[encoder-action="playback-play"]
{
	display: none;
}

.firecast-admin-encoder pre
{
    width: 100%;
    margin: 0;
    overflow-x: hidden;
    white-space: pre-wrap;
    background: #1c2833;
    border: 0;
	color: #4fdee5;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
    font-size: 10px;
    text-transform: none;
	line-height: 160%;
}

.firecast-admin-encoder pre:empty
{
    padding: 0;
}

.firecast-admin-encoder .firecast-admin-encoder-row
{
    margin: 5px 0;
}

/****************************************************************************************************
****************************************************************************************************/

.firecast-admin-encoder .firecast-admin-encoder-feed-info
{
    display: grid;
    grid-template-columns: auto 40px;
    grid-template-rows: repeat(2, auto);
}

.firecast-admin-encoder .firecast-admin-encoder-feed-info label
{
    grid-column: 1 / 3;
    font-weight: normal;
    letter-spacing: 1px;
}

.firecast-admin-encoder .firecast-admin-encoder-feed-info textarea
{
    grid-column: 1 / 2;
    height: 34px;
}

.firecast-admin-encoder .firecast-admin-encoder-feed-info button
{
    grid-column: 2 / 3;
    margin: 0;
}

/****************************************************************************************************
****************************************************************************************************/





.firecast-encoder-video-grid
{
    display: grid;
    width: 100%;
    height: 100%;
}

.encoder-feed .encoder-feed-video .firecast-encoder-video-grid video,
.encoder-feed .encoder-feed-video .firecast-encoder-video-grid canvas,
.encoder-feed .encoder-feed-video .firecast-encoder-video-grid .firecast-encoder-filter-controls,
.encoder-feed .encoder-feed-video .firecast-encoder-video-grid .firecast-encoder-free-warning
{
    grid-area: 1 / -1;

    position: relative;
    z-index: auto;
    width: 100%;
    height: auto !important;
}

.encoder-feed .encoder-feed-video .firecast-encoder-video-grid .firecast-encoder-free-warning
{
    display: none;
}

body[activePAYWALL="0"][data-camera_count="1"]:not([clientid="591"]) .encoder-feed .encoder-feed-video .firecast-encoder-video-grid video[id="encoder1"] + .firecast-encoder-free-warning
{
    display: block;
    background: 
        url('/css/firecast/images/free.corner.tl.svg') no-repeat 0 0 / 50px 50px,
        url('/css/firecast/images/free.corner.tr.svg') no-repeat 100% 0 / 50px 50px,
        url('/css/firecast/images/free.corner.bl.svg') no-repeat 0 100% / 50px 50px,
        url('/css/firecast/images/free.corner.br.svg') no-repeat 100% 100% / 50px 50px;
    border: 4px solid rgb(200 0 0 / .5);
}

.encoder-feed .encoder-feed-video .firecast-encoder-video-grid video,
.encoder-feed .encoder-feed-video .firecast-encoder-video-grid canvas
{
    aspect-ratio: 16 / 9;
}

.firecast-encoder-video-grid .firecast-encoder-video-state
{
    grid-area: 1 / -1;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, .5);
    z-index: 2;

    color: #ffffff;
    font-size: 28px;
    align-items: center;
    text-align: center;
}

.firecast-encoder-video-grid .firecast-encoder-video-state[state="detached"]
{
    z-index: 3;
}

.firecast-encoder-video-grid .firecast-encoder-video-state[state="detached"] button
{
    all: unset;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.firecast-encoder-video-grid .firecast-encoder-video-state[state="detached"] button .material-icons
{
    font-size: 72px;
    pointer-events: none;
}

.firecast-encoder-video-grid .firecast-encoder-video-state .firecast-encoder-video-state-error
{
    display: grid;
    grid-template-columns: 40px auto;

    min-height: 50px;
    max-width: 90%;
    margin: auto;
    background: #cc0000;
    border-radius: 3px;
	color: #ffffff;
}

.firecast-encoder-video-grid .firecast-encoder-video-state .firecast-encoder-video-state-error .firecast-encoder-video-state-error-icon
{
	color: #ffffff;
	display: inline-grid;
    align-items: center;
	width: 100%;
	height: 100%;
	background: #00000025;
	text-align: center;
	text-shadow: 0 2px 2px #00000025;
}

.firecast-encoder-video-grid .firecast-encoder-video-state .firecast-encoder-video-state-error .firecast-encoder-video-state-error-text
{
    display: inline-grid;
    align-items: center;

    padding: 8px;
    color: #ffffff;
    font-family: 'Segoe UI', 'Arial';
    letter-spacing: .05em;
    text-align: left;
}

.firecast-encoder-video-grid .firecast-encoder-video-state .firecast-encoder-video-state-error .firecast-encoder-video-state-error-text h6,
.firecast-encoder-video-grid .firecast-encoder-video-state .firecast-encoder-video-state-error .firecast-encoder-video-state-error-text p
{
    margin: 0 0 5px 0;
}

.firecast-encoder-video-grid .firecast-encoder-video-state .firecast-encoder-video-state-error .firecast-encoder-video-state-error-text p
{
    font-size: 12px;
    line-height: initial;
}


.firecast-encoder-video-grid .firecast-encoder-video-state[state="toast"]
{
    background: none;
    z-index: 3;
    align-items: unset;
}

.firecast-encoder-video-grid .firecast-encoder-video-state[state="toast"] .firecast-encoder-video-state-error
{
    width: 100%;
    max-width: unset;
    height: 40px;
    min-height: unset;
    margin: 0;
    background: #cc000090;
    border-radius: unset;
}

.firecast-encoder-video-grid .firecast-encoder-video-state[state="toast"] .firecast-encoder-video-state-error .firecast-encoder-video-state-error-text
{
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

.encoder-feed .encoder-feed-video .firecast-encoder-video-grid .firecast-encoder-filter-controls
{
    margin: auto auto 0 auto;
}

.firecast-encoder-input-grid
{
    display: grid;
    grid-gap: 3px;
    
    height: fit-content;
    margin: 6px;
    padding: 3px;
    background: rgb(0 0 0 / .2);
    border-radius: 3px;
	color: rgb(225 225 225 / .75);
	color: rgb(180 180 180);
    text-shadow: 1px 1px 0 rgb(0 0 0 / .8);
	font-size: 12px;
	font-weight: 600;
}

.firecast-encoder-input-grid label
{
    margin: unset;
}

.firecast-encoder-input-grid:has(input[type="checkbox"])
{
    align-items: center;
    grid-template-areas: "toggle label";
    grid-gap: 6px;

    width: fit-content;
    padding-right: 16px;
}

.firecast-encoder-input-grid input[type="checkbox"]
{
    display: none;
}

.firecast-encoder-input-grid button
{
    grid-area: toggle;
}

.firecast-encoder-input-grid button > *
{
    pointer-events: none;
}

.firecast-encoder-input-grid input[type="checkbox"] + button[type="toggle"]
{
    margin: auto;
}

.firecast-encoder-input-grid:has(input[type="checkbox"]) label
{
    grid-area: label;
}



.encoder-feed:not([encoder-player-state]) .firecast-encoder-video-grid .firecast-encoder-video-state[state="loading"],
.encoder-feed[encoder-player-state="loading"] .firecast-encoder-video-grid .firecast-encoder-video-state[state="loading"],
.encoder-feed[encoder-player-state="stopped"] .firecast-encoder-video-grid .firecast-encoder-video-state[state="stopped"],
.encoder-feed[encoder-player-state="error"][encoder-error="denied"] .firecast-encoder-video-grid .firecast-encoder-video-state[state="camera"],

.encoder-feed[encoder-published-state="unpublished"] .firecast-encoder-video-grid .firecast-encoder-video-state[state="toast"]
{
    display: grid;
}

body:not([isADMIN="1"]) .firecast-admin-encoder table tr[row="admin"],

body:not([encoder0Display="camera"]) .firecast-admin-encoder[encoder="encoder0"] table tr[row="camera"],
body:not([encoder0Display="camera"]) .firecast-admin-encoder[encoder="encoder0"] table tr[row="camera"] + tr[row="info"],
body:not([encoder0Display="stream"]) .firecast-admin-encoder[encoder="encoder0"] table tr[row="stream"],

body:not([encoder1Display="camera"]) .firecast-admin-encoder[encoder="encoder1"] table tr[row="camera"],
body:not([encoder1Display="camera"]) .firecast-admin-encoder[encoder="encoder1"] table tr[row="camera"] + tr[row="info"],
body:not([encoder1Display="stream"]) .firecast-admin-encoder[encoder="encoder1"] table tr[row="stream"],

body[data-fta_stream_blurring="0"] .encoder-feed .encoder-feed-video .firecast-encoder-video-grid .firecast-encoder-filter-controls,
body[data-fta_stream_blurring_enabled="0"] .encoder-feed .encoder-feed-video .firecast-encoder-video-grid .firecast-encoder-filter-controls,
body[vipONLY="1"] .encoder-feed .encoder-feed-video .firecast-encoder-video-grid .firecast-encoder-filter-controls,
body:not([activePAYWALL="1"]) .encoder-feed .encoder-feed-video .firecast-encoder-video-grid .firecast-encoder-filter-controls
{
    display: none;
}