header {
    display: grid;
    width: 100%;
    height: var(--headerHeight);
    background: #363636;
    border-bottom: 2px solid #323232;
    color: #d8d8d8;
    font-size: 0;

    --headerLeftWidth: calc(8px + (var(--headerHeight) - 16px) + 8px + var(--widthPaywallButton));
    --headerRightWidth: 400px;

    grid-template-columns: 1fr var(--headerRightWidth);
    grid-template-rows: auto;


}

header .header-left {
    display: grid;
    grid-template-columns: repeat(7, max-content);
    grid-template-rows: var(--sq);

    row-gap: 5px;
    margin: 5px;
    margin-left: 0;



    vertical-align: top;

    --gap: 5px;
    --sq: calc(var(--headerHeight) - (2 * var(--gap)));

}

.broadcast-header-button
{
    vertical-align: top;
    width: fit-content;
    margin-left: var(--gap);
    padding: 0;
    background: #e02239;
    border: 2px solid #e02239;

    --fontColour: 255,255,255;
    --fontAlpha: .8;
    color: rgba(var(--fontColour), var(--fontAlpha));
}

body[inPRIVATE="1"] .broadcast-header-button
{
    width: calc(100% - var(--gap));
    min-width: var(--sq);
}

.broadcast-header-button[active="1"]
{
    border-color: #64b95e;
}

.broadcast-header-button > *
{
    pointer-events: none;
}



.broadcast-header-button[name="settings"],
body:not([isPAUSED="1"]) .broadcast-header-button[name="pause"]
{
    width: var(--sq);
    outline: 0;
    background: #4d4d4d;
    border: 0;
    padding: 0;
}

.broadcast-header-button .button-grid
{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    align-items: center;
    vertical-align: top;
    column-gap: 10px;
    column-gap: 0px;

/*
    min-width: 200px;
    */
    height: 100%;
}

.broadcast-header-button[name="goldshow"] .button-grid,
.broadcast-header-button[name="private-counter"] .button-grid
{
    grid-template-columns: 32px auto;
}

.broadcast-header-button[name="private-counter"] .button-grid,
body[inPRIVATE="2"] .broadcast-header-button[name="private-slate"] .button-grid
{
    grid-template-columns: 48px auto;
}

.broadcast-header-button.broadcast-header-button-toggle .button-grid
{
    column-gap: 10px;
}

.broadcast-header-button .button-grid .button-disabled,
.broadcast-header-button .button-grid .button-text
{
    padding-right: calc(2 * var(--gap));
    padding-left: calc(2 * var(--gap));
}

.broadcast-header-button[disabled] .button-grid
{
    grid-template-columns: unset;
}

.broadcast-header-button[disabled] .button-grid .button-disabled,
.broadcast-header-button[disabled] .button-grid .button-text
{
    grid-area: 1 / -1;
}

.broadcast-header-button:not([disabled]) .button-grid .button-disabled
{
    display: none;
}

.broadcast-header-button[name="goldshow"] .button-grid .button-icon
{
    grid-column: 1 / 2;
}

.broadcast-header-button[name="goldshow"] .button-grid .button-text,
body[inPRIVATE="2"] .broadcast-header-button[name="private-slate"] .button-grid .button-text
{
    grid-column: 2 / 3;
    padding-left: 0;
}

.broadcast-header-button .button-grid .button-icon .material-icons
{
    line-height: inherit;
}

.broadcast-header-button .button-disabled .material-icons
{
    color: #ffffff;
	animation: spinner 2s linear infinite;
}

.broadcast-header-button .button-grid .button-text
{
    text-align: center;
    font-family: 'Segoe UI', 'Arial';
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

button[name="fta-stream-blurring-enabled"].broadcast-header-button .button-grid .button-text
{
    font-size: 12px;
    text-align: left;
}

.broadcast-header-button.broadcast-header-button-toggle .button-grid .button-text
{
    text-align: left;
}

.broadcast-header-button .button-grid .button-disclaimer
{
    font-size: 10px;
}

.broadcast-header-button .button-grid .enhanced-text
{
    font-weight: 600;
    color: rgba(var(--fontColour), var(--fontAlpha));
    --fontAlpha: 1;
}

.broadcast-header-button[name="pause"] .button-text,
.broadcast-header-button[name="private-counter"] .button-text
{
    color: #ffffff;
}






















header ul {
    display: inline-block;
    width: var(--headerRightWidth);
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-family: 'Segoe UI', 'Arial';
    border: none;
    vertical-align: top;
    text-align: right;

	grid-column-start: 2;
    grid-column-end: 3;
}

header ul li {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    vertical-align: middle;
}

header ul li .button
{
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    color: #d8d8d8;
    font-size: 0;
    text-transform: uppercase;

    text-align: right;
    vertical-align: middle;
    transition:
        background .2s linear,
        color .3s linear;
}

header ul li .button .header-icon
{
    display: inline-block;
    position: relative;
    top: 0;
    padding-top: 17px;
    font-size: 22px;
    width: 22px;
    height: 57px;
    margin: 0 8px 0 0;
    color: #d8d8d8;
    vertical-align: middle;
    text-align: center;
}

header .profile-container .material-icons[name="arrow_drop_down"]
{
    display: inline-block;
    position: relative;
    top: 0;
    padding-top: 19px;
    font-size: 18px;
    height: 57px;
    margin: 0;
    vertical-align: middle;
    text-align: left;
}

header ul li .button .header-text,
header .profile-container .profile-name
{
    display: inline-block;
    width: auto;
    max-width: calc(100% - (22px + 8px));
    vertical-align: middle;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/****************************************************************************************************
    submenu
****************************************************************************************************/

.submenu {
	display: none;
}

header button:hover .submenu,
header ul li:hover .submenu
{
	display: block;
}

.submenu {
    position: absolute;
    z-index: 2;
    top: 50px;
    left: 8px;
    width: 250px;
    margin: 0;
    color: #cccccc;
    font-size: 14px;
}

.submenu .arrow-top,
.submenu .arrow-bottom
{
	display: block;
	width: 0;
	height: 0;
	border-bottom: 6px solid #4d4d4d;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
    margin-left: calc(((var(--headerHeight) - 16px) / 2) - 3px);
    margin-left: calc(((var(--headerHeight) - 16px) / 2) - 6px);
}

.submenu .arrow-bottom
{
	border-top: 6px solid #4d4d4d;
    border-bottom: 0;
}

.submenu .submenu-content {
    background: #4d4d4d;
    border: 4px solid #4d4d4d;
    box-shadow: 0 3px 8px #00000050;
}

.submenu .submenu-content .broadcast-header-button
{
    margin: 0 0 4px 0;
}

.submenu ul {
    float: none;
    display: block;
    width: 100%;
    max-height: calc(100vh - 96px);
    margin: 0;
    border: none;
    vertical-align: top;

}

.submenu ul li {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
}

.submenu ul li a {
    display: block;
    background: none;
    padding: 6px 0 6px 16px;
    color: #d8d8d8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.submenu ul li a:hover
{
    background: #4d4d4d;
    color: #ffffff;
    text-decoration: none;
}

.submenu button
{
    display: block;
    outline: 0;
}

/****************************************************************************************************
    SETTINGS SUBMENU
****************************************************************************************************/
/*

header .submenu[submenu="settings"] .submenu-content
{
    display: grid;
    grid-template-columns: 1fr var(--rowHeight);
    grid-template-rows: repeat(3, var(--rowHeight));
    gap: 4px 4px;

    --rowHeight: calc(var(--headerHeight) - 16px);
    --maxColumn: 3;
}

header .submenu[lovense_active="1"][lovense_connect="3"] .submenu-content
{
    --maxColumn: 4;
}

header .submenu[submenu="settings"] button
{
    width: 100%;
    height: 100%;

}

header .submenu[submenu="settings"] button#toggleLovense,
header .submenu[submenu="settings"] button#toggleTipgoals,
header .submenu[submenu="settings"] button[name="viponlyenabled"]
{
    margin: 0;
}

header .submenu[submenu="settings"] button#toggleTipgoals
{
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: var(--maxColumn);
}

header .submenu[submenu="settings"] button[name="viponlyenabled"]
{
    background: #edbf3c;
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: var(--maxColumn);
}

header .submenu[submenu="settings"] button[name="viponlyenabled"][active="1"] .toggle .toggle-switch .toggle-slider
{
	background: #edbf3c;
}

*/

#vibrateLovense,
#settingLovense
{
    display: inline-block;
    width: calc(var(--headerHeight) - 16px);
    height: calc(var(--headerHeight) - 16px);
    margin: 0;
    outline: 0;
    vertical-align: top;
    background: #ea148c;
    border: none;
    font-size: 0;
    text-align: center;
}


#vibrateLovense .material-icons,
#settingLovense .material-icons
{
    color: #ffffff90;
    transition:
        color .2s linear;
}

#vibrateLovense:hover .material-icons,
#settingLovense:hover .material-icons
{
    color: #ffffff;
}

#settingLovense
{
    display: none;
}

.submenu[lovense_active="1"][lovense_connect="3"]
{
    width: 275px;
}

.submenu[lovense_active="1"][lovense_connect="3"] #settingLovense
{
    display: block;

    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
}

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

.submenu button[name="qr-load"]
{
    display: none;
}

.submenu[lovense_connect="4"][lovense-connected="1"] .submenu-column-grid
{
    display: grid;
    grid-template-columns: auto 48px;
    column-gap: 4px;

    margin: 0 0 4px 0;
}

.submenu[lovense_connect="4"][lovense-connected="1"] .submenu-column-grid .broadcast-header-button
{
	margin: 0;
}

.submenu[lovense_connect="4"][lovense-connected="1"] button[name="qr-load"]
{
    display: block;
	padding: 0;
    border: 0;
}

.submenu[lovense_connect="4"] button[name="qr-load"] .button-grid
{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;

    width: 48px;
    height: 48px;
}

.submenu[lovense_connect="4"] button[name="qr-load"] .button-grid .material-icons,
.submenu[lovense_connect="4"] button[name="qr-load"] .button-grid .qr-dummy
{
    grid-area: 1 / -1;
    width: 48px;
    height: 48px;
}

.submenu[lovense_connect="4"] button[name="qr-load"] .button-grid .material-icons
{
    color: #000000;
    line-height: 48px;
}

.submenu[lovense_connect="4"] .qr-dummy
{
    position: relative;
    z-index: 2;
	background-image: url('images/qr.jpg');
    background-size: contain;
    opacity: .25;
}

/****************************************************************************************************
    the header paywall button
    I should be able to vertical align middle this
****************************************************************************************************/


.broadcast-header-button[active="1"]
{
    background: #64b95e;
}



.broadcast-header-button[id="toggleLovense"]
{
    display: inline-block;
}

.broadcast-header-button[id="toggleLovense"][connect="3"]
{
    display: inline-block;
    --lovenseButtons: 1;
    width: calc(100% - (var(--lovenseButtons) * ((var(--headerHeight) - 16px) + 4px)));
}

.broadcast-header-button:last-child
{
    margin-bottom: 0;
}

.broadcast-header-button[disabled="disabled"] {
    background: #ff9100;
	cursor: wait;
}

.broadcast-header-button[disabled="disabled"] .button-icon-holder
{
    display: inline-block;
    vertical-align: top;
    width: 35px;
    margin-right: 10px;
    margin-left: 10px;
    padding-top: 4px;
}

.broadcast-header-button.broadcast-header-button-toggle:not([disabled]) .button-disabled,
.broadcast-header-button.broadcast-header-button-toggle[active="0"] .button-text[state="on"],
.broadcast-header-button.broadcast-header-button-toggle[active="1"] .button-text[state="off"]
{
    display: none;
}

.broadcast-header-button.broadcast-header-button-toggle .button-disabled,
.broadcast-header-button.broadcast-header-button-toggle .button-text,

.broadcast-header-button.broadcast-header-button-toggle .button-disabled,
.broadcast-header-button[name="private-slate"] .button-text
{
    grid-area: unset;
}


/*
.broadcast-header-button .button-text,
header .submenu[submenu="settings"] .broadcast-header-button[name="viponlyenabled"] .button-text
{
    display: inline-block;
    width: calc(100% - 80px);
    height: 100%;
    padding-top: 9px;
    vertical-align: middle;
    text-align: left;
    color: #ffffff90;
    font-size: 14px;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
*/


.broadcast-header-button[disabled="disabled"] .material-icons {
    color: #ffffff;
	animation: spinner 2s linear infinite;
}

.broadcast-header-button .material-icons {
	font-size: 32px;
}

/****************************************************************************************************
    IS LIVE
****************************************************************************************************/

body[isLIVE="1"] header
{
    --headerRightWidth: 240px;
}

body[isLIVE="1"] header ul li[name="support"] .header-text,
body[isLIVE="1"] header ul li.profile-container .profile-name
{
    display: none;
}

body[isLIVE="1"] header ul li
{
    padding-right: 8px;
    padding-left: 8px;
}

body[isLIVE="1"] header ul li[name="support"] .button .header-icon
{
    margin: 0;
}

/****************************************************************************************************
    TOGGLE BUTTON
****************************************************************************************************/

.broadcast-header-button.broadcast-header-button-toggle
{
    width: 100%;
    height: 48px;
}

.broadcast-header-button.broadcast-header-button-toggle[active="-1"]
{
	background: #ff9100;
}

.broadcast-header-button.broadcast-header-button-toggle .button-grid
{
    display: grid;
    grid-template-columns: 80px auto;
    height: 100%;
}

.broadcast-header-button.broadcast-header-button-toggle .button-grid .toggle
{
    display: block;
    margin: 0 auto;
}

.broadcast-header-button.broadcast-header-button-toggle[active="1"] .button-grid .toggle .toggle-switch .toggle-slider
{
    margin-left: calc(100% - 20px);
    background: var(--background, #64b95e);
}

.broadcast-header-button.broadcast-header-button-toggle[active="1"] .button-grid .toggle .toggle-switch .toggle-slider .material-icons
{
	display: inline;
	width: 20px;
	height: 20px;
	position: relative;
	top: 2px;
	left: 2px;
    color: #ffffff;
	font-size: 16px;
}

.broadcast-header-button.broadcast-header-button-toggle .button-disabled
{
    text-align: center;
}

.broadcast-header-button.broadcast-header-button-toggle:not([active="-1"]) .button-disabled,
.broadcast-header-button.broadcast-header-button-toggle[active="-1"] .toggle,
.broadcast-header-button.broadcast-header-button-toggle[active="-1"] .button-text
{
    display: none;
}

.broadcast-header-button.broadcast-header-button-toggle[active="-1"] .button-grid
{
    grid-template-columns: auto;
}

.broadcast-header-button.broadcast-header-button-toggle[active="-1"] .button-disabled
{
    display: block;
    width: 100%;
    opacity: 1 !important;
}

/****************************************************************************************************
    BREAK DISPLAY
****************************************************************************************************/

body:not([isPAUSED="1"]) .broadcast-header-button[name="pause"] .button-grid
{
    grid-template-columns: auto;
}

body[isPAUSED="1"] .broadcast-header-button[name="pause"] .button-grid
{
	grid-template-columns: 32px auto;
}

body[isPAUSED="-1"] .broadcast-header-button[name="pause"]
{
	background: #ff9100;
}

body[isPAUSED="1"] .broadcast-header-button[name="pause"] .button-icon
{
    color: #ffffff;
}

body:not([isLIVE="1"]) .broadcast-header-button[name="pause"],
body[isLIVE="1"][goldshow-status="show_started"] .broadcast-header-button[name="pause"],

body:not([isPAUSED="-1"]) .broadcast-header-button[name="pause"] .button-disabled,
body[isPAUSED="-1"] .broadcast-header-button[name="pause"] .button-grid,

body:not([isPAUSED="1"]) .broadcast-header-button[name="pause"] .button-icon[state="on"],
body:not([isPAUSED="1"]) .broadcast-header-button[name="pause"] .button-text,
body[isPAUSED="1"] .broadcast-header-button[name="pause"] .button-icon[state="off"]
{
    display: none;
}

/****************************************************************************************************
    SETTINGS
****************************************************************************************************/

.broadcast-header-button[name="settings"] .button-grid
{
    grid-template-columns: auto;
}

/****************************************************************************************************
    GOLD SHOW DISPLAY
****************************************************************************************************/

.broadcast-header-button[name="goldshow"]
{
    background: rgb(var(--goldColour));
    border-color: rgb(var(--goldColour));
    --fontColour: 0,0,0;
}

.broadcast-header-button[name="goldshow"][disabled]
{
    cursor: not-allowed;
}

.broadcast-header-button[name="goldshow"] .material-icons
{
    font-size: 24px;
}

body:not([goldshow-status]) .broadcast-header-button[name="goldshow"][disabled],
body[goldshow-status]:not([goldshow-status="created"]):not([goldshow-status="canceled"]) .broadcast-header-button[name="goldshow"]:not([disabled]),
body[goldshow-status="created"] .broadcast-header-button[name="goldshow"][disabled],
body[goldshow-status="canceled"] .broadcast-header-button[name="goldshow"][disabled]
{
    display: none;
}

/****************************************************************************************************
    TIP GOALS DISPLAY
****************************************************************************************************/

.broadcast-header-button[name="tipgoals"]
{
	background: var(--background);
	border-color: #e02239;
	--background: #000000;
}

body[hasTIPGOALS="1"] .broadcast-header-button[name="tipgoals"]
{
    border-color: var(--tipGoalsColour);
    --background: var(--tipGoalsColour);
}

body[hasTIPGOALS="-1"] .broadcast-header-button[name="tipgoals"]
{
    --background: #ff9100;
}

body:not([hasTIPGOALS="-1"]) .broadcast-header-button[name="tipgoals"] .button-disabled,
body[hasTIPGOALS="-1"] .broadcast-header-button[name="tipgoals"] .button-text
{
    opacity: 0;
}

body[hasTIPGOALS="1"] .broadcast-header-button[name="tipgoals"] .button-text[state="off"],
body[hasTIPGOALS="0"] .broadcast-header-button[name="tipgoals"] .button-text[state="on"]
{
    display: none;
}

/****************************************************************************************************
    VIP ONLY DISPLAY
****************************************************************************************************/

.broadcast-header-button[name="viponlyenabled"]
{
    background: var(--background);
	border-color: #edbf3c;
    --background: #000000;

    /*
    direction: ltr;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
    margin: 0px;
    display: inline-flex;
    outline: none;
    padding: 0px 4px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 4px 0px;
    transition: background 250ms ease-in-out 0s;
    align-items: center;
    user-select: none;
    border-radius: 2px;
    text-transform: none;
    text-decoration: none;
    min-width: 100%;
    color: rgb(33, 33, 33);
    height: 40px;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    */
}

.broadcast-header-button.broadcast-header-button-toggle[name="viponlyenabled"]
{
    --background: #00000050;
}

body[vipOnlyEnabled="1"] .broadcast-header-button[name="viponlyenabled"]
{
	--background: #edbf3c;
}

body[vipOnlyEnabled="-1"] .broadcast-header-button[name="viponlyenabled"]
{
    --background: #ff9100;
}

body:not([vipOnlyEnabled="-1"]) .broadcast-header-button[name="viponlyenabled"] .button-disabled,
body[vipOnlyEnabled="-1"] .broadcast-header-button[name="viponlyenabled"] .button-text,
body[vipOnlyEnabled="1"] .broadcast-header-button[name="viponlyenabled"] .button-text[state="off"],
body[vipOnlyEnabled="0"] .broadcast-header-button[name="viponlyenabled"] .button-text[state="on"]
{
    opacity: 0;
}

body[hasVIPONLY="0"] .broadcast-header-button[name="viponlyenabled"],
body[vipOnlyEnabled="1"] .broadcast-header-button[name="viponlyenabled"] .button-text[state="off"],
body[vipOnlyEnabled="0"] .broadcast-header-button[name="viponlyenabled"] .button-text[state="on"]
{
    display: none;
}

/****************************************************************************************************
    PAYWALL DISPLAY
****************************************************************************************************/

.broadcast-header-button[name="paywall"]
{
    background: var(--background);
	border-color: #e02239;

    --background: #000000;
}

.broadcast-header-button.broadcast-header-button-toggle[name="paywall"]
{
    --background: #00000050;
}

body[activePAYWALL="1"] .broadcast-header-button[name="paywall"]
{
    border-color: #64b95e;
    --background: #64b95e;
}

body[activePAYWALL="-1"] .broadcast-header-button[name="paywall"]
{
    --background: #ff9100;
}

body:not([activePAYWALL="-1"]) .broadcast-header-button[name="paywall"] .button-disabled,
body[activePAYWALL="-1"] .broadcast-header-button[name="paywall"] .button-text,
body[activePAYWALL="1"] .broadcast-header-button[name="paywall"] .button-text[state="off"],
body[activePAYWALL="0"] .broadcast-header-button[name="paywall"] .button-text[state="on"]
{
    opacity: 0;
}

body[activePAYWALL="1"] .broadcast-header-button[name="paywall"] .button-text[state="off"],
body[activePAYWALL="0"] .broadcast-header-button[name="paywall"] .button-text[state="on"],
body[inPRIVATE="1"] .broadcast-header-button[name="paywall"],
body[inPRIVATE="2"] .broadcast-header-button[name="paywall"],
body[inPRIVATE="1"] .broadcast-header-button[name="viponlyenabled"],
body[inPRIVATE="2"] .broadcast-header-button[name="viponlyenabled"],
body[goldshow-status="show_started"] .broadcast-header-button[name="paywall"],
body[goldshow-status="finished"] .broadcast-header-button[name="paywall"]
{
    display: none;
}

/****************************************************************************************************
    the header private timer
****************************************************************************************************/

header .private-counter
{
    display: none;
    background: #8e1769;
    border: 0;
    cursor: default;
}

.broadcast-header-button[name="private-counter"] .button-text
{
    padding-left: 0;
}

/****************************************************************************************************
    the header private timer
****************************************************************************************************/

header .slate-button
{
    background: #64b95e;
    border-color: #64b95e;
}

header .slate-button small
{
    display: block;
    font-size: 10px;
}

header .slate-button.btn-slate-warning
{
    border-color: #e02239;
	-webkit-animation: unset;
}

body:not([inPRIVATE]) header .slate-button,
body[inPRIVATE="0"] header .slate-button,
body:not([hasManualSlateDrop="1"]) header .slate-button
{
    display: none;
}

body[inPRIVATE="0"] header .slate-button
{
    background: #e02239;
}

body[inPRIVATE="2"] header .slate-button
{
    background: #e02239;
    border-color: #e02239;
    animation: slateButtonGlow 1s infinite ease-in-out;
}

@keyframes slateButtonGlow
{
	0% {
		box-shadow: 0 0 10px rgba(255,255,255, .25);
	}
	50% {
        box-shadow: 0 0 10px rgba(255,255,255, 1);
	}
	100% {
        box-shadow: 0 0 10px rgba(255,255,255, .25);
	}
}

/*
-1 loading
1 in private
2 slate timer
*/

body:not([inPRIVATE="-1"]) .broadcast-header-button[name="private-slate"] .button-disabled,
body:not([inPRIVATE="2"]) .broadcast-header-button[name="private-slate"] .button-icon,
body:not([inPRIVATE="2"]) .broadcast-header-button[name="private-slate"] #slate-warning-countdown,
/*
body:not([inPRIVATE="1"]) .broadcast-header-button[name="private-slate"] .button-text[state="off"],
needed?
*/
body .broadcast-header-button[name="private-slate"] .button-text[state="off"],
body:not([inPRIVATE="2"]) .broadcast-header-button[name="private-slate"] .button-text small,
body[inPRIVATE="0"] .broadcast-header-button[name="private-slate"] .button-text[state="on"]
{
    display: none;
}

body:not([inPRIVATE="-1"]) .broadcast-header-button[name="private-slate"] .button-disabled,
body[inPRIVATE="-1"] .broadcast-header-button[name="private-slate"] .button-text,
body[inPRIVATE="1"] .broadcast-header-button[name="private-slate"] .button-text[state="off"],
body[inPRIVATE="0"] .broadcast-header-button[name="private-slate"] .button-text[state="on"]
{
    opacity: 0;
}

body[inPRIVATE="-1"] .broadcast-header-button[name="private-slate"] .button-grid .button-disabled,
body[inPRIVATE="-1"] .broadcast-header-button[name="private-slate"] .button-grid .button-text
{
    grid-area: 1 / -1;
}

body[inPRIVATE="-1"] .broadcast-header-button[name="private-slate"] .button-disabled
{
    display: block;
}

/****************************************************************************************************
    in private
****************************************************************************************************/

body[inPRIVATE="1"] header .private-counter
{
    display: inline-block;
    width: 170px;
}

.broadcast-header-button[name="private-counter"] .button-text
{
    text-align: left;
}

/*
body[inPRIVATE="1"] header ul {
    width: calc(100% - (var(--widthPaywallButton) + 16px + 8px + 160px + 8px));
}

body[inPRIVATE="1"][privateSlate="1"] header ul {
    width: calc(100% - (var(--widthPaywallButton) + 16px + 8px + 160px + 8px + 220px + 8px));
}

body[inPRIVATE="0"][privateSlate="1"] header ul {
    width: calc(100% - (var(--widthPaywallButton) + 16px + 8px + 220px + 8px));
}
*/

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

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

.broadcast-header-message
{
    margin-bottom: 5px;
    background: rgba(45,136,255, 1);
}

.broadcast-header-message .broadcast-header-message-grid
{
    display: grid;
    grid-template-columns: 44px auto;
    align-items: center;

    height: 100%;
	color: rgba(255,255,255, .8);
}

.broadcast-header-message .material-icons
{
    display: block;
    margin: auto;
}

.broadcast-header-message .broadcast-header-message-text
{
    padding: 5px 0;
    font-size: 12px;
    line-height: normal;
}

/****************************************************************************************************
    current page denote
****************************************************************************************************/

header .profile-container
{
    cursor: pointer;
}

header .profile-container .profile-image,
header .profile-image img
{
    display: inline-block;
    width: 32px;
    height: 32px;
}

header .profile-image img
{
    border: 1px solid #ffffff;
    border-radius: 50%;
}

header .profile-image .profile-state
{
    position: absolute;
    display: block;
    width: 14px;
    height: 14px;
    margin: 20px 0 0 20px;
    background: #cc0000;
    border-radius: 50%;
    border: 2px solid #323232;
}

header .profile-image .profile-state[state="online"]
{
    background: #2dc704;
}

header .profile-container .profile-image,
header .profile-image img
{
    display: inline-block;
    width: 32px;
    height: 32px;
}

header .profile-container .profile-name
{
    width: auto;
    max-width: calc(100% - (32px + 8px));
    margin-left: 8px;
}


body[islive="0"] header .profile-image .profile-state[state="online"],
body[islive="1"] header .profile-image .profile-state[state="offline"]
{
    display: none;
}

/****************************************************************************************************
    mobile
****************************************************************************************************/

@media only screen and (max-width: 640px)
{
    header ul li {
        padding: 0 8px;
    }

    body[inPRIVATE="1"],
    body[privateSlate="1"]
    {
        --headerHeight: 114px;
    }

    body header,
    body header ul
    {
        width: 100%;
        --headerLeftWidth: 100%;
    }

    body header ul
    {
        float: none;
        width: calc(100% - 16px);
        margin-left: 8px;
   }

    body header #settingsBtn,
    body[privateSlate="1"] .broadcast-header-button[name^="paywallBtn-"],
    body[inPRIVATE="1"] .private-counter,
    body[privateSlate="1"] .private-counter,
    body[inPRIVATE="1"] .slate-button,
    body[privateSlate="1"] .slate-button
    {
        height: calc((var(--headerHeight) / 2) - 16px);
    }
}

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

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

    header
    {
        height: calc(2 * var(--headerHeight));
        --headerRightWidth: auto;
    }

    header .header-left {
        grid-template-rows: repeat(2, var(--sq));
    }

    .broadcast-header-button[name="private-slate"]
    {
        grid-column: 1 / 4;

        width: calc(100% - 5px);
    }

    .broadcast-header-button[name="private-slate"] .button-text
    {
        text-align: center;
    }

    header ul li {
        padding: 0 8px;
    }

    header ul li[name="support"] .header-text,
    header ul li.profile-container .profile-name
    {
        display: none;
    }

}


.vibratoy button
{
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
}

.vibratoy button > *
{
    pointer-events: none;
}

.vibratoy
{
    display: grid;
    grid-template-columns: auto 48px;
    grid-template-rows: auto;
    column-gap: 4px;

    width: 100%;
    height: 48px;
    margin: 0 0 4px 0;
}

.vibratoy[vibratoy-device="lush"] button,
.vibratoy[vibratoy-device="nora"] button,
.vibratoy[vibratoy-device="gemini"] button
{
    background: #f23e97;
}

.vibratoy[vibratoy-device="hush"] button,
.vibratoy[vibratoy-device="domi"] button
{
    background: #43306d;
}

.vibratoy[vibratoy-device="xmachine"] button
{
    background: #F2D43F;
    color: #FDFDE4;
    text-shadow: 1px 1px 0 rgba(0,0,0, .2);
}

.vibratoy[vibratoy-enabled="0"][vibratoy-device="lush"] button,
.vibratoy[vibratoy-enabled="0"][vibratoy-device="nora"] button,
.vibratoy[vibratoy-enabled="0"][vibratoy-device="hush"] button,
.vibratoy[vibratoy-enabled="0"][vibratoy-device="domi"] button,
.vibratoy[vibratoy-enabled="0"][vibratoy-device="gemini"] button
{
    background: #00000080;
}

.vibratoy .vibratoy-device-status
{
    width: 48px;
    height: 48px;
}

.vibratoy .vibratoy-device-toggle .vibratoy-device-toggle-grid,
.vibratoy .vibratoy-device-status .vibratoy-device-status-grid
{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr 16px;

    width: 100%;
    height: 100%;
}

.vibratoy .vibratoy-device-toggle .vibratoy-device-toggle-row
{
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 50px auto;
    grid-template-rows: auto;
    column-gap: 5px;
}

.vibratoy .vibratoy-device-toggle .vibratoy-device-loading,
.vibratoy[vibratoy-updating="1"] .vibratoy-device-toggle .vibratoy-device-toggle-grid
{
    display: none;
}

.vibratoy[vibratoy-updating="1"] .vibratoy-device-toggle .vibratoy-device-loading
{
    display: block;
}

.vibratoy .vibratoy-device-toggle .vibratoy-device-loading .material-icons
{
    color: #ffffff50;
	animation: spinner 2s linear infinite;
}

.vibratoy .vibratoy-device-toggle .vibratoy-device-toggle-row .toggle
{
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    margin: 6px 5px;
}

.vibratoy .vibratoy-device-toggle .vibratoy-device-toggle-row .toggle .toggle-switch
{
    width: 40px;
    height: 20px;
    padding: 3px;
}

.vibratoy .vibratoy-device-toggle .vibratoy-device-toggle-row .toggle .toggle-switch .toggle-slider
{
	width: 14px;
	height: 14px;
    background: #ffffff50;
}

.vibratoy[vibratoy-enabled="1"] .vibratoy-device-toggle .vibratoy-device-toggle-row .toggle .toggle-switch .toggle-slider
{
    background: #ffffff50;
	margin-left: calc(100% - 14px);
}

.vibratoy .vibratoy-device-toggle .vibratoy-device-toggle-row .button-text
{
    grid-column: 2 / 3;
    grid-row: 1 / 2;

    padding-top: 6px;
    vertical-align: middle;
    text-align: left;
    font-size: 14px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vibratoy .vibratoy-device-toggle .vibratoy-device-toggle-row .button-text .enhanced-text
{
	font-weight: 600;
	letter-spacing: .05em;
}

.vibratoy .vibratoy-device-status .vibratoy-device-status-icon
{
    grid-row: 1 / 2;
    display: grid;
    align-items: center;
    justify-content: center;
}

.vibratoy .vibratoy-device-toggle .vibratoy-device-toggle-footer,
.vibratoy .vibratoy-device-status .vibratoy-device-status-footer
{
    grid-row: 2 / 3;

    overflow: hidden;
    background: rgba(0,0,0, .5);
    font-size: 10px;
    text-transform: uppercase;
}

.vibratoy .vibratoy-device-status-battery
{
    display: block;
    border: 1px solid var(--colour);
    border-radius: 2px;
    max-width: 30px;
    margin: 4px auto;
    height: 10px;
    padding: 1px;

    position: relative;
    left: 1px;

    --colour: #ffffff80;
}

.vibratoy .vibratoy-device-status-battery::before
{
    content: '';
    display: block;
    background: var(--colour);
    width: 2px;
    height: 6px;
    position: absolute;
    margin: 0 0 0 -4px;
}

.vibratoy .vibratoy-device-status-battery div[vibratoy-battery]
{
    display: block;
    background: var(--colour);
    width: var(--percentage, 0%);
    height: 100%;
    margin: 0 0 0 auto;
    opacity: .8;
    font-size: 0;
}


.vibratoy[vibratoy-enabled="0"] .vibratoy-device-toggle .vibratoy-device-toggle-row .button-text[state="on"],
.vibratoy[vibratoy-enabled="1"] .vibratoy-device-toggle .vibratoy-device-toggle-row .button-text[state="off"],
.vibratoy[vibratoy-online="0"] .vibratoy-device-status .vibratoy-device-status-battery,
.vibratoy[vibratoy-online="1"] .vibratoy-device-status .vibratoy-device-status-offline
{
    display: none;
}

.vibratoy-not-synced
{
    display: grid;
    grid-template-columns: auto 80px;
    grid-template-rows: auto;
    column-gap: 5px;
    align-items: center;

    padding: 5px;
    background: #333333;
    border: 1px solid #f23e97;
}

.vibratoy-not-synced.vibratoy-not-synced-zoomed
{
    grid-template-columns: auto;
    grid-template-rows: repeat(2, auto);
}

.vibratoy-not-synced .vibratoy-not-synced-text
{
    font-size: 12px;
    line-height: 14px;
    padding: 0 10px;
}

.vibratoy-not-synced img[vibratoy-data="QR"]
{
    width: 100%;
    cursor: zoom-in;
}

#vibratoyStatus
{
    margin: 0 0 4px 0;
    padding: 1px 3px;
    background: rgba(0,0,0, .25);

    overflow: hidden;
    font-size: 10px;
    letter-spacing: .5px;
}


li[name="notifications"],
li[name="messenger"],
li[name="support"]
{
    padding: 0;
}

li[name="notifications"] .button,
li[name="messenger"] .button,
li[name="support"] .button
{
	width: var(--sq);
	height: var(--sq);
	margin: var(--gap) 0;
	outline: 0;
	background: #4d4d4d;
	border: 0;
	padding: 0;
    
    display: grid;
    align-items: center;
    cursor: pointer;
	--sq: calc(var(--headerHeight) - (2 * var(--gap)));
	--gap: 0px;
	--gap: 5px;
}

li[name="messenger"] .button > *,
li[name="support"] .button > *
{
    pointer-events: none;
}

li[name="messenger"] .button,
li[name="support"] .button
{
    margin-left: var(--gap);
}

li[name="notifications"] .button .material-icons[data-content="loader"],
li[name="messenger"] .button .material-icons[data-content="loader"]
{
    margin: auto;
    animation: animation-spinner 2s linear infinite;
}

@keyframes animation-spinner {
    to {transform: rotate(360deg);}
}

li[name="notifications"] .button .header-icon,
li[name="messenger"] .button svg,
li[name="support"] .button .header-icon
{
    width: unset;
    height: unset;
    padding: unset;
    margin: auto;
    display: grid;
    grid-area: 1 / -1;
}

li[name="messenger"] .button svg
{
    height: 24px;
    margin: auto;
    fill: rgb(255 255 255 / .8);
}

li[name="notifications"] .button .header-icon
{
    transform: rotate(10deg);
}


.notifications-popover .notification[data-type="messenger"] .notification-avatar .notification-avatar-mask,
.notifications-card .notification[data-type="messenger"] .notification-avatar .notification-avatar-mask
{
	mask-image: url('./images/avatar.mask.svg') !important;
}