#channels .channel
{
	vertical-align: top;
	display: inline-block;
	width: 100px;
	color: #ffffff;
	text-align: center;

    background: #000000;

    --width: calc(((var(--vw) - 4px) / var(--performerCount)) - 4px);
    --rowHeight: calc(((var(--width) - (4 * 2px)) / 5));
    width: calc(var(--width) + var(--rowHeight));
    width: calc(var(--width) + 4px);

    font-size: 12px;
    font-family: 'Roboto Condensed', sans-serif;
    cursor: pointer;

	border-right: 4px solid #252525;
	border-bottom: 4px solid #252525;

}

#channels .channel .channel-performer-image-container
{
    width: 100%;
    height: var(--width);
    overflow: hidden;
}

#channels .channel .channel-performer-image-blur
{
	width: 100%;
	height: 100%;
	filter: blur(5px);
	overflow: hidden;
}

#channels .channel .channel-performer-image-actual-container
{
    position: relative;
    top: calc(0px - var(--width));
    width: var(--width);
    height: var(--width);
    background: #00000050;
}

#channels .channel .channel-performer-image
{
    width: auto;
    height: var(--width);
    margin: 0 auto;
}

#channels .channel:hover .channel-performer-image
{
	transition: all 2s;
    transform: scale(1.1);
}

#channels .channel[performer-image-orientation="landscape"] .channel-performer-image
{
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
}

#channels .channel[performer-image-orientation="landscape"]:hover .channel-performer-image
{
    transform: translate(-50%, 0) scale(1.1);
}

#channels .channel[performer-image-orientation="portrait"] .channel-performer-image
{
    width: var(--width);
    height: auto;
    margin: 0 auto;
}


#channels .channel .channel-detail-container
{
    position: relative;
    margin-top: calc(0px - var(--width));
    width: 100%;
    height: var(--width);

    display: grid;
    grid-template-columns: 1fr var(--rowHeight);
    grid-template-rows: 20px 1fr var(--rowHeight) 4px var(--rowHeight);
}

#channels .channel .channel-isACTIVE,
#channels .channel .channel-inPRIVATE,
#channels .channel .channel-isnew,
#channels .channel .channel-viponly,
#channels .channel .channel-ppv,
#channels .channel .channel-phoneonly
{
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;

	width: 40px;
	height: 20px;
	background: #0daa27;
    color: #ffffff;
    font-size: 10px;
    letter-spacing: 0.6px;
    font-family: sans-serif;
    line-height: 20px;
	text-shadow: 1px 1px rgba(0,0,0, .5);
}

#channels .channel .channel-isnew
{
    background: #ea148c;
}

#channels .channel .channel-isACTIVE
{
	width: 70px;
    background: #3aa5d7;
}

#channels .channel .channel-inPRIVATE
{
	width: 70px;
    background: #942767;
}

#channels .channel .channel-phoneonly
{
	width: 80px;
    background: #8e1769;
}

#channels .channel .channel-ppv,
#channels .channel .channel-viponly
{
    width: 40px;
    border: 1px solid #ffcb19;
    color: #ffcb19;
    background: #000000;
}

#channels .channel .channel-viponly
{
    width: 70px;
}

#channels .channel[isACTIVE="0"] .channel-isACTIVE,
#channels .channel:not([inPRIVATE="1"]) .channel-inPRIVATE,
#channels .channel:not([isNEW="1"]) .channel-isnew,
#channels .channel:not([isCALLINGONLY="1"]) .channel-phoneonly,
#channels .channel:not([channeltype="1"]) .channel-ppv,
#channels .channel:not([vipONLY="1"]) .channel-viponly
{
    display: none;
}

#channels .channel .channel-favourite
{
	grid-row-start: 5;
	grid-row-end: 6;
    grid-column-start: 2;
    grid-column-end: 3;

    background: #cc000080;
	color: #ffffff50;
	text-align: left;
}

#channels .channel .channel-favourite svg
{
	width: 16px;
	height: 16px;
    margin: 2px;
    fill: #ffffff50;
}

#channels .channel[isFAVOURITE="1"] .channel-favourite svg
{
    fill: #ffffff;
}

#channels .channel .channel-option
{
    display: block;
    background: #00000050;
    height: var(--rowHeight);
    margin: 0;
    margin-bottom: 2px;
    transition: background .5s;
}

#channels .channel .channel-option[option="call"]
{
    background: #8e176975;
}

#channels .channel[hasCALLING="1"]:hover .channel-option[option="call"]:hover
{
    background: #8e1769;
}

#channels .channel .channel-option[option="tipgoals"]
{
    background: #DAA52075;
}

#channels .channel[hasTIPGOALS="1"]:hover .channel-option[option="tipgoals"]:hover
{
    background: #DAA520;
}

#channels .channel .channel-option[option="lush2"]
{
    background: #f23e9775;
}

#channels .channel[hasLOVENSE="1"][hasLUSH2="1"]:hover .channel-option[option="lush2"]:hover
{
    background: #f23e97;
}

#channels .channel .channel-option[option="hush"]
{
    background: #43306d75;
}

#channels .channel[hasLOVENSE="1"][hasHUSH="1"]:hover .channel-option[option="hush"]:hover
{
    background: #43306d;
}


#channels .channel .channel-option[option="tipgoals"] .material-icons
{
    transform: rotate(270deg);
}

#channels .channel .channel-favourite .material-icons,
#channels .channel .channel-option .material-icons
{
    line-height: var(--rowHeight);
}

#channels .channel .channel-performer-name
{
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 2;
    vertical-align: top;

    width: 100%;
    height: var(--rowHeight);
    margin: 0;
    padding: 0 5px;
    background: #00000080;
    color: #cccccc;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: calc(var(--rowHeight) + 2px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#channels .channel .channel-performer-name b
{
    color: #ffffff;
}

#channels .channel icon,
#channels .channel .channel-option svg
{
	--size: 20px;
}

#channels .channel icon
{
	display: block;
	position: relative;
	top: calc((var(--rowHeight) - var(--size)) / 2);
	width: var(--size);
	height: var(--size);
	margin: 0 auto;

	background-size: var(--size) var(--size);
	background-repeat: no-repeat;
	background-position: center;
}

#channels .channel icon[name="lush2"]
{
	background-image: url('https://iptv.firestormmedia.tv/iframes/firecall-responsive/css/icons/lush2.svg');
}
#channels .channel icon[name="hush"]
{
	background-image: url('https://iptv.firestormmedia.tv/iframes/firecall-responsive/css/icons/hush.svg');
}

#channels .channel .channel-option icon,
#channels .channel .channel-option .material-icons
{
    opacity: .35;
}

#channels .channel .channel-option[option="call"],
#channels .channel .channel-option[option="tipgoals"],
#channels .channel .channel-option[option="lush2"],
#channels .channel .channel-option[option="hush"]
{
    background: #00000010;
    background: linear-gradient(
        to left,
        #00000010 20%,
        #00000000 100%
    );
}

#channels .channel .channel-option svg,
#channels .channel .channel-options-row svg
{
	display: block;
    width: 14px;
    height: 14px;
    margin: 3px;
    fill: #ffffff;
}

#channels .channel[hasGoldShow="1"] .streamate-golden-show .material-icons,
#channels .channel[hasSpecialShow="1"] .streamate-special-show .material-icons,
#channels .channel[hasPhone="1"] .streamate-phone .material-icons,

#channels .channel[hasCALLING="1"] .channel-option[option="call"] .material-icons,
#channels .channel[hasTIPGOALS="1"] .channel-option[option="tipgoals"] .material-icons,
#channels .channel[hasLOVENSE="1"][hasLUSH2="1"] .channel-option[option="lush2"] icon,
#channels .channel[hasLOVENSE="1"][hasHUSH="1"] .channel-option[option="hush"] icon
{
    opacity: .9;
    transition: opacity 10s;
}

#channels .channel[hasGoldShow="1"]:hover .streamate-golden-show .material-icons,
#channels .channel[hasSpecialShow="1"]:hover .streamate-special-show .material-icons,
#channels .channel[hasPhone="1"]:hover .streamate-phone .material-icons,

#channels .channel[hasCALLING="1"]:hover .channel-option[option="call"] .material-icons,
#channels .channel[hasTIPGOALS="1"]:hover .channel-option[option="tipgoals"] .material-icons,
#channels .channel[hasLOVENSE="1"][hasLUSH2="1"]:hover .channel-option[option="lush2"] icon,
#channels .channel[hasLOVENSE="1"][hasHUSH="1"]:hover .channel-option[option="hush"] icon
{
    opacity: 1;
}

#channels .channel[hasPhone="1"] .streamate-phone,
#channels .channel[hasCALLING="1"] .channel-option[option="call"]
{
    background: linear-gradient(
        to left,
        #8e176975 25%,
        #8e176900 100%
    );
}

#channels .channel[hasPhone="1"]:hover .streamate-phone,
#channels .channel[hasCALLING="1"]:hover .channel-option[option="call"]
{
    background: #8e176975;
}

#channels .channel[hasTIPGOALS="1"] .channel-option[option="tipgoals"]
{
    background: linear-gradient(
        to left,
        #DAA52075 25%,
        #DAA52000 100%
    );
}

#channels .channel[hasTIPGOALS="1"]:hover .channel-option[option="tipgoals"]
{
    background: #DAA52075;
}

#channels .channel[hasLOVENSE="1"][hasLUSH2="1"] .channel-option[option="lush2"]
{
    background: linear-gradient(
        to left,
        #f23e9775 25%,
        #823e9700 100%
    );
}

#channels .channel[hasLOVENSE="1"][hasLUSH2="1"]:hover .channel-option[option="lush2"]
{
    background: #f23e9775;
}

#channels .channel[hasLOVENSE="1"][hasHUSH="1"] .channel-option[option="hush"]
{
    background: linear-gradient(
        to left,
        #43306d75 25%,
        #43306d00 100%
    );
}

#channels .channel[hasLOVENSE="1"][hasHUSH="1"]:hover .channel-option[option="hush"]
{
    background: #43306d75;
}



#channels .channel .channel-options-block
{
    position: relative;
    z-index: 2;
    margin-top: calc(0px - var(--width));
	margin-bottom: var(--rowHeight);
    width: 100%;
    height: calc(var(--width) - var(--rowHeight));
}

#channels .channel .channel-options-block .channel-option
{
    width: var(--rowHeight);
    margin-left: calc(100% - var(--rowHeight));
    font-size: 0;
    transition: width 1s, margin 1s;
	--remain: 20px;
}

#channels .channel[hasGoldShow="1"] .channel-options-block .channel-option:hover,
#channels .channel[hasSpecialShow="1"] .channel-options-block .channel-option:hover,
#channels .channel[hasPhone="1"] .channel-options-block .channel-option:hover,

#channels .channel[hasCALLING="1"] .channel-options-block .channel-option[option="call"]:hover,
#channels .channel[hasTIPGOALS="1"] .channel-options-block .channel-option[option="tipgoals"]:hover,
#channels .channel[hasLOVENSE="1"][hasLUSH2="1"] .channel-options-block .channel-option[option="lush2"]:hover
{
    width: calc(100% - var(--remain));
    margin-left: var(--remain);
}

#channels .channel .channel-option .channel-option-icon
{
    display: inline-block;
    width: var(--rowHeight);
}

#channels .channel .channel-option .channel-option-text
{
    vertical-align: top;
    display: inline-block;
    width: calc(100% - var(--rowHeight));
    line-height: var(--rowHeight);
    font-size: 12px;
    text-align: left;

    font-weight: normal;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/****************************************************************************************************
	CHANNEL OPTIONS ROW
****************************************************************************************************/

#channels .channel .channel-options-row
{
	display: none;
    grid-row-start: 3;
    grid-row-end: 4;
	grid-column-start: 1;
	grid-column-end: 3;
	text-align: left;
    background: #00000080;
    background: none;
    padding: 0 5px;
    text-shadow: 1px 1px 0 #000000;
}

#channels .channel .channel-options-row svg[name="calling"]
{
    fill: #8e1769;
    fill: #ffffff;
}

#channels .channel .channel-options-row svg[name="tipgoals"]
{
    fill: #f23e97;
    fill: #DAA520;
    width: 16px;
    height: 16px;
    margin: 2px;
}

#channels .channel .channel-options-row svg[name="vibratoy"]
{
    fill: #f23e97;
}

#channels .channel .channel-options-row
{
    font-size: 0;
}

#channels .channel .channel-options-row .channel-option-icon,
#channels .channel .channel-options-row .channel-option-icon .channel-option-icon-svg
{
    display: inline-block;
    width: var(--rowHeight);
    height: var(--rowHeight);
    overflow: hidden;
    font-size: 0;
}

#channels .channel .channel-options-row .channel-option-icon
{
    background: #00000050;
    border-radius: 2px;
    margin-right: 4px;
}

#channels .channel .channel-options-row .channel-option-icon .channel-option-icon-svg:nth-child(2)
{
    position: absolute;
    margin-left: calc(0px - var(--rowHeight));
}

#channels .channel .channel-options-row .channel-option-icon .channel-option-icon-svg:nth-child(1) svg
{
    fill: #00000080;
    margin-left: 4px;
    margin-top: 4px;
}

/****************************************************************************************************
	DISPLAY CONTROL
****************************************************************************************************/

#channels .camsmore
{
    display: block;
	width: 100%;
	height: 40px;
	line-height: 40px;
	margin: 2px;
	margin: 0;
	padding: 0;
	background: #000000;
	border: 0;
	outline: 0;
	border-right: 4px solid #252525;
	border-bottom: 4px solid #252525;
	color: #cccccc;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
}

#channels .camsmore:hover
{
	color: #eeeeee;
}

#channels .camsmore[disabled],
#channels .camsmore[disabled]:hover
{
	background: #333333;
	color: #666666;
}

#channels .camsmore .material-icons
{
      animation: spinner 2s linear infinite;
	  position: relative;
	  top: 5px;
}

#channels .camsmore span,
#channels .camsmore div
{
      pointer-events: none;
}

#channels .camsmore:not([disabled]) .material-icons,
#channels .camsmore:not([complete="complete"]) .camsmore-complete,
#channels .camsmore[complete="complete"][disabled] .material-icons,
#channels .camsmore[disabled] .camsmore-text
{
      display: none;
}


/****************************************************************************************************
	DISPLAY CONTROL
****************************************************************************************************/

#channels .show-with-calling,
#channels .hide-with-calling,
#channels .show-with-tipgoals,
#channels .hide-with-tipgoals,
#channels .show-with-vibratoy,
#channels .hide-with-vibratoy,
#channels .show-with-lush2,
#channels .hide-with-lush2,
#channels .show-with-hush,
#channels .hide-with-hush
{
    display: inline;
}

/*STREAMATE options*/
#channels .channel:not([hasGoldShow="1"]) .streamate-golden-show,
#channels .channel:not([hasSpecialShow="1"]) .streamate-special-show,
#channels .channel:not([hasPhone="1"]) .streamate-phone,
/*END STREAMATE options*/
#channels .channel:not([hasCALLING="1"]) .show-with-calling,
#channels .channel:not([hasPERV="1E"]) .show-with-perve,
#channels .channel:not([isPAYWALL="1"]) .show-with-paywall,

#channels .channel:not([hasTIPGOALS="1"]) .show-with-tipgoals,
#channels .channel[hasTIPGOALS="1"] .hide-with-tipgoals,

#channels .channel:not([hasLOVENSE="1"]) .show-with-lush2,
#channels .channel:not([hasLUSH2="1"]) .show-with-lush2,
#channels .channel[hasLOVENSE="1"][hasLUSH2="1"] .hide-with-lush2,

#channels .channel:not([hasHUSH="1"]) .show-with-hush,
#channels .channel[hasHUSH="1"] .hide-with-hush,

#channels .channel:not([hasLOVENSE="1"]) .show-with-vibratoy,
#channels .channel[hasLOVENSE="1"] .hide-with-vibratoy,

#channels .channel:not([isFAVOURITE="1"]) .show-with-favourite,
#channels .channel[isFAVOURITE="1"] .hide-with-favourite,

#channels .channel[isCALLINGONLY="1"] .channel-options-block,

#channels .channel:not([isNEW="1"]) .show-with-new,
#channels .channel[type="cams"] .channel-options-block,
#channels .channel[channeltype="1"] .channel-options-block,
#channels .channel[channeltype="1"] .channel-options-row,
#channels .channel[channeltype="1"] .channel-detail-container .channel-performer-name,
#channels .channel[channeltype="1"] .channel-detail-container .channel-favourite
{
	display: none;
}

#channels .channel img
{
	vertical-align: top;
	display: block;
	width: 100px;
}