main.css

:root {
    /* Discord Greys - Dark to Lighter */
    --discord-grey-0: #121212;
    --discord-grey-1: #1e1f22;
    --discord-grey-2: #232428;
    --discord-grey-3: #2c2c2d;
    --discord-grey-4: #2e3035;
    --discord-grey-5: #313338;
    --discord-grey-6: #383a40;
    --discord-grey-7: #404249; /* primary */
    --discord-grey-8: #5e6064;
	
    --discord-text: hsl( 210 calc(1 * 9.1%) 92% /1);

    --darktheme-red: rgb(161, 45, 45);
    --darktheme-blue: rgb(33, 69, 114);
    --darktheme-green: rgb(36, 88, 49);
    --darktheme-lightgreen: #008770;
    --darktheme-brown: rgb(96, 58, 25);
    --darktheme-yellow: rgb(84, 70, 9);

    /* Lightmode white - Darker to lighter */
    --lighttheme-1: #fff;
    --lighttheme-2: #f3f3f3;
    --lighttheme-3: #ddd;
    --lighttheme-4: #ccc; /* primary */
    --lighttheme-5: #bbb;
    --lighttheme-6: #aaa;
    --lighttheme-7: #7e7e7e;
    --lighttheme-8: #373737;
    --lighttheme-text: black;

    /* Director v2 - General colors */
    /* -- Links */
    --a-dark-link: #69aadc;
    --a-dark-visited: #69aadc;
    --a-dark-hover: #6da5dd;
    --a-dark-focus: #6da5dd;
    --a-dark-active: #3a80c6;
	
	--a-darker-link: #b9dff9;
    --a-darker-visited: #b9dff9;
    --a-darker-hover: #048ae8;
    --a-darker-focus: #d9e4eb;
    --a-darker-active: #d9e4eb;

    --a-lighter-link: #9ed0e1;
    --a-lighter-visited: #9ed0e1;
    --a-lighter-hover: #8acee4;
    --a-lighter-focus: #8acee4;
    --a-lighter-active: #89d5ee;
	
	--a-link:  #144267;
    --a-visited: #144267;
    --a-hover: #38668c;
    --a-focus: #38668c;
    --a-active: #0165b5;

    /* -- Box colors */
    --director-box: rgb(165 119 18);
    --codirector-box: rgb(67 122 213);

    --director-dark-box: rgb(165 119 18);
    --codirector-dark-box: rgb(129 127 127);


    /* Original colors */
	--background-color: #141926;
	--dark-background-color: #02050c;
	--container-color: #373737;
	--button-color: #2A2A2A;
	--blue-accent: #4a4c63;
	--red-accent: #553737;
	--light-grey: #ddd;
	--near-black: #02050c; 
	--green-accent: #3f4f50;
	--olive-accent: #535D32;
	--regular-margin: 10px;
	--director-margin: 15px 20px 0 0;
	--fit-style: contain;
	--fadein-speed: 0;
	--video-margin: 0px;
	--video-rounded: 0px;
	--video-border: 0px;
	--video-border-color: #0000;
	--video-rounded: 0px;
	--button-radius: 2px;
	--myvideo-max-width: min(800px,100vw);
	--myvideo-width:unset;
	--myvideo-height:auto;
	--myvideo-background: #FFF1;
	--video-background-image: url("data:image/svg+xml,%3Csvg viewBox='-42 0 512 512.002' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m210.351562 246.632812c33.882813 0 63.222657-12.152343 87.195313-36.128906 23.972656-23.972656 36.125-53.304687 36.125-87.191406 0-33.875-12.152344-63.210938-36.128906-87.191406-23.976563-23.96875-53.3125-36.121094-87.191407-36.121094-33.886718 0-63.21875 12.152344-87.191406 36.125s-36.128906 53.308594-36.128906 87.1875c0 33.886719 12.15625 63.222656 36.132812 87.195312 23.976563 23.96875 53.3125 36.125 87.1875 36.125zm0 0'/%3E%3Cpath d='m426.128906 393.703125c-.691406-9.976563-2.089844-20.859375-4.148437-32.351563-2.078125-11.578124-4.753907-22.523437-7.957031-32.527343-3.308594-10.339844-7.808594-20.550781-13.371094-30.335938-5.773438-10.15625-12.554688-19-20.164063-26.277343-7.957031-7.613282-17.699219-13.734376-28.964843-18.199219-11.226563-4.441407-23.667969-6.691407-36.976563-6.691407-5.226563 0-10.28125 2.144532-20.042969 8.5-6.007812 3.917969-13.035156 8.449219-20.878906 13.460938-6.707031 4.273438-15.792969 8.277344-27.015625 11.902344-10.949219 3.542968-22.066406 5.339844-33.039063 5.339844-10.972656 0-22.085937-1.796876-33.046874-5.339844-11.210938-3.621094-20.296876-7.625-26.996094-11.898438-7.769532-4.964844-14.800782-9.496094-20.898438-13.46875-9.75-6.355468-14.808594-8.5-20.035156-8.5-13.3125 0-25.75 2.253906-36.972656 6.699219-11.257813 4.457031-21.003906 10.578125-28.96875 18.199219-7.605469 7.28125-14.390625 16.121094-20.15625 26.273437-5.558594 9.785157-10.058594 19.992188-13.371094 30.339844-3.199219 10.003906-5.875 20.945313-7.953125 32.523437-2.058594 11.476563-3.457031 22.363282-4.148437 32.363282-.679688 9.796875-1.023438 19.964844-1.023438 30.234375 0 26.726562 8.496094 48.363281 25.25 64.320312 16.546875 15.746094 38.441406 23.734375 65.066406 23.734375h246.53125c26.625 0 48.511719-7.984375 65.0625-23.734375 16.757813-15.945312 25.253906-37.585937 25.253906-64.324219-.003906-10.316406-.351562-20.492187-1.035156-30.242187zm0 0'/%3E%3C/svg%3E");
	--background-main-image: unset;
	--show-codirectors: inline-block;
	--full-screen-button: inherit;
	--color-mode: light;
	--video-background-image-size: auto 30%;
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-mode: dark;
	}
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	border: 0;
}

::selection {
	background-color: #0447c888;
	color: #FFF;
}

button:hover,[role="button"]
:not(.column)
:not(.controlsGrid)
:not(#controlButtons)
:hover{
	filter: brightness(98%);
}

table {
	display: inline-block;
	padding:10px;
	margin:10px;
}

.promptModalLabel{
	cursor: pointer;
	font-weight: normal;
	font-size: 1.0em;
	display:block;
	margin: 17px 20px 15px 20px;
}

#bigPlayButton {
	margin:0 auto;
	background-color: #0000;
	cursor:pointer;
	font-family: Cousine, monospace;
	font-size: 4em;
	line-height: 1.5em;
	letter-spacing: 0.0em;
	text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1);
	width:100%;
	height:100vh;
	z-index: 1;
	vertical-align: top;
	text-align: center;
	top: 0;
	position: fixed;
	overflow-wrap: anywhere;
	padding:3%;
}

.playButton {
	border-radius: 50vh;
	width: min(30vw, 30vh);
	cursor: pointer;
	opacity: 100%;
	background-color: #bbb;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 122.88 122.88' style='enable-background:new 0 0 122.88 122.88' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill-rule:evenodd;clip-rule:evenodd;%7D%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M61.44,0c33.93,0,61.44,27.51,61.44,61.44s-27.51,61.44-61.44,61.44S0,95.37,0,61.44S27.51,0,61.44,0L61.44,0z M83.31,65.24c3.13-2.02,3.12-4.27,0-6.06L50.98,40.6c-2.55-1.6-5.21-0.66-5.14,2.67l0.1,37.55c0.22,3.61,2.28,4.6,5.32,2.93 L83.31,65.24L83.31,65.24z M61.44,12.48c27.04,0,48.96,21.92,48.96,48.96c0,27.04-21.92,48.96-48.96,48.96S12.48,88.48,12.48,61.44 C12.48,34.4,34.4,12.48,61.44,12.48L61.44,12.48z'/%3E%3C/g%3E%3C/svg%3E");
	display: inline-block;
	height: min(30vw, 30vh);
	background-repeat: no-repeat;
	border: #bbb 3vh solid;
	position: absolute;
}

#bigPlayButton>.playButton {
	width: min(50vw, 50vh);
	margin-top: 10vh;
	background-color: #646262;
	height: min(50vw, 50vh);
	border: #646262 7vh solid;
	position: unset;
	position: static;
}
.paused {
	cursor: pointer;
}

tr {
	padding:4px;
}
th {
	padding:4px;
}

.popupSelector_constraints .preSelectbutton {
    display: inline-block;
    margin: 4px 0 4px 3px;
    padding: 2px 8px 1px 8px;
}
.advancedVideoSettings .preSelectButton {
    display: inline-block;
    margin: 4px 0 4px 3px;
    padding: 2px 8px 1px 8px;
}
.meter {
	display: inline-block;
	width: 0px;
	height: 10px;
	background: green;
	transition: all 100ms linear;
}
.meter2 {
	display: inline-block;
	width: 0px;
	height: 10px;
	background: yellow;
	transition: all 50ms linear;
}
.meter3 {
	display: inline-block;
	width: 0px;
	height: 10px;
	background: red;
	transition: all 25ms linear;
}
.meter4 {
	display: inline-block;
	width: 2px;
	height: 10px;
	background: black;
	position:relative;
	float:left;
}
#mynetwork {
	width: 600px;
	height: 400px;
	border: 1px solid lightgray;
}

.email {
	unicode-bidi: bidi-override;
	direction: rtl;
	user-select: none;
}


a:link {
	color: var(--a-link);
}
a:visited {
	color: var(--a-visited);
}
a:hover {
	color: var(--a-hover);
}
a:focus {
	color: var(--a-focus);
}
a:active {
	color: var(--a-active);
}


a.soloLink:link {
    cursor: grab;
    font-size: 1.2em;
    font-weight: 700;
    padding: 4px 0 2px 0;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	color: #b4d7f6;
}
a.soloLink:visited{
	color: #b4d7f6;
}

/* Links */
a {
	-webkit-app-region: no-drag;
	text-decoration: none;
}
.darktheme a:link {
	color: var(--a-dark-link);
}
.darktheme a:visited {
	color: var(--a-dark-visited);
}
.darktheme a:hover {
	color: var(--a-dark-hover);
}
.darktheme a:focus {
	color: var(--a-dark-focus);
}
.darktheme a:active {
	color: var(--a-dark-active);
}

.directorContainer a:link {
	color: var(--a-lighter-link);
}
.directorContainer a:visited {
	color: var(--a-lighter-visited);
}
.directorContainer a:hover {
	color: var(--a-lighter-hover);
}
.directorContainer a:focus {
	color: var(--a-lighter-focus);
}
.directorContainer a:active {
	color: var(--a-lighter-active);
}

.infoblob a:link {
	color: var(--a-lighter-link);
}
.infoblob a:visited {
	color: var(--a-lighter-visited);
}
.infoblob a:hover {
	color: var(--a-lighter-hover);
}
.infoblob a:focus {
	color: var(--a-lighter-focus);
}
.infoblob a:active {
	color: var(--a-lighter-active);
}

.darktheme .infoblob a:link {
	color: var(--a-darker-link);
}
.darktheme .infoblob a:visited {
	color: var(--a-darker-visited);
}
.darktheme .infoblob a:hover {
	color: var(--a-darker-hover);
}
.darktheme .infoblob a:focus {
	color: var(--a-darker-focus);
}
.darktheme .infoblob a:active {
	color: var(--a-darker-active);
}



input {
	border-radius: 4px;
	padding: 2px;
	-webkit-app-region: no-drag;
}

button.grey {
	-webkit-app-region: no-drag;
	padding: 10px;
	margin: 10px 0px;
	cursor: pointer;
	border-radius: 2px;
	background-color: var(--button-color);
	color: white;
}

button.hint {
	-webkit-box-shadow: inset 0px 0px 25px #0004;
	-moz-box-shadow: inset 0px 0px 25px #0004;
	box-shadow: inset 0px 0px 25px #0004;
}

#miniPerformer > video, #miniPerformer > canvas{
	width: 80px;
	height: 45px;
	margin: 5px;
	background-color: #464749 !important;
	background-size: 50%;
}

#popOutChat{
	cursor:pointer;
	text-align:right;
	color:#B3C7F9;
	margin:5px;
	cursor: pointer;
}

/* Clicked buttons overwrite */
.red {
	background-color: #840000 !important;
}
.red:hover {
	background-color: #b30c0c !important;
}

.green {
    background-color: #64c04d !important;
}

.green:hover {
    background-color: #76c762 !important;
}

.blue {
	background-color: #161699 !important;
}

.blue:hover {
    background-color: #2727bb !important;
}

.brown {
	background-color: #8d6418 !important;
}

.brown:hover {
	background-color: #a06d10 !important;
}

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

.orange {
	background-color: #673100 !important;
}

#meshcastMenu{
	display: inline-block;
    color: #e0dfdf;
}
#header {
	width: 100%;
	padding: 1px;
	background-color: #0F131D;
	color: #FFF;
	-webkit-app-region: drag;
}
#head1{
	display: inline-block; 
	padding:1px; 
	position: relative; 
	-webkit-app-region: no-drag;
}
#head5 {
	-webkit-app-region: no-drag;
	display: inline-block;
	text-decoration: none;
	color: white;
	text-align: right;
	margin-right: 10px;
	cursor: help;
	float: right;
	font-size: 90%;
	line-height:100%;
	margin-top:2px;
}
#head6 {
	display: inline-block;
	text-decoration: none;
	color: white;
	text-align: left;
	margin-left: 10px;
	pointer-events: none;
	font-weight: 700;
}

#head7 {
	display: inline-block;
	text-decoration: none;
	color: white;
	text-align: left;
	margin-left: 10px;
	pointer-events: none;
	font-weight: 700;
}
#overlayClockContainer{
	margin: 0 auto;
	background-color: #0000;
	color: white;
	font-family: Cousine, monospace;
	font-size: calc(6vh + 6vw / 2);
	letter-spacing: 0.0em;
	text-shadow: 0.05em 0.05em 0px rgb(0 0 0);
	z-index: 6;
	vertical-align: top;
	text-align: right;
	right:0;
	bottom:0;
	position: fixed;
	overflow-wrap: anywhere;
	cursor: pointer;
	user-select: none;
}
#overlayClockContainer.top {
	top:0%;
	bottom:unset;
}
#overlayClockContainer.vmiddle {
	bottom:48%;
	top:unset;
}
#overlayClockContainer.bottom {
	bottom:0%;
	top:unset;
}
#overlayClockContainer.left {
	right:unset;
	left:0;
}
#overlayClockContainer.hmiddle {
	right:45%;
	left:unset;
}
#overlayClockContainer.right {
	right:0;
	left:unset;
}

#overlayClock{
	padding:2px 20px;
	background-color: #0009;	
}
#overlayClock video {
	width: calc(22vh + 22vw / 2);
	max-width: 100%;
	max-height:25%;
}
#overlayClock:empty{
	display:none;
}
#overlayClockContainer2{
	margin: 0 auto;
	background-color: #0000;
	color: white;
	font-family: Cousine, monospace;
	font-size: calc(3vh + 3vw / 2);
	letter-spacing: 0.0em;
	text-shadow: 0.05em 0.05em 0px rgb(0 0 0);
	z-index: 6;
	vertical-align: top;
	text-align: right;
	position: fixed;
	right:0;
	bottom:0;
	overflow-wrap: anywhere;
	cursor: pointer;
	user-select: none;
}
#overlayClockContainer2.top {
	top:0%;
	bottom:unset;
}
#overlayClockContainer2.vmiddle {
	bottom:48%;
	top:unset;
}
#overlayClockContainer2.bottom {
	bottom:0%;
	top:unset;
}
#overlayClockContainer2.left {
	right:unset;
	left:0;
}
#overlayClockContainer2.hmiddle {
	right:45%;
	left:unset;
}
#overlayClockContainer2.right {
	right:0;
	left:unset;
}

#overlayClock2{
	padding:0 5px;
	background-color: #0009;
}
#overlayClock2:empty{
	display:none;
}
#stickyMsgs{
	margin:0 auto;
	background-color: #0000;
	color: white;
	font-family: Cousine, monospace;
	font-size: 6vh;
	line-height: 8vh;
	letter-spacing: 0.0em;
	text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1);
	width:100%;
	z-index: 7;
	vertical-align: top;
	text-align: center;
	position: fixed;
	overflow-wrap: anywhere;
	padding:2% 3%;
}
.avatarSelection{
	vertical-align: top;
    margin: 10px 0;
	width:130px;
	display:inline-block;
	margin:0 1px; 
	text-align: center;
	cursor:pointer;
}
.overlayCloseBtn{
    padding: 0;
    margin: 10px;
    width: 16px;
    height: 16px;
    position: relative;
    bottom: 10px;
    background-color: #DDDD;
}

#overlayMsgs{
	margin:0 auto;
	background-color: #0000;
	color: white;
	font-family: Cousine, monospace;
	font-size: 6vh;
	line-height: 8vh;
	letter-spacing: 0.0em;
	text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1);
	width:100%;
	height:100vh;
	z-index: 7;
	vertical-align: top;
	text-align: center;
	position: fixed;
	overflow-wrap: anywhere;
	padding:2% 3%;
	pointer-events: none
}
#overlayMsgs span{
	background-color: #000B;
	padding: 2px;
	margin: 0.5vh;
	text-align: center;
	width:100%;
	pointer-events: none
}

.credits {
	color: #101020;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: -1;
	font-size: 80%;
	margin-right:100px;
}

.credits>a {
	color: #101020;
}

.credits>a:visited {
	color: #101020;
}



body.darktheme .credits {
	color: #707a93;
}

body.darktheme .credits>a {
	color: #707a93;
}

body.darktheme .credits>a:visited {
	color: #707a93;
}


.label {
	float: left;
	font-size: 1.2em;
	color: white;
	display: inline-block;
	position: absolute;
	bottom: 0;
	align-self: center;
	z-index: 1000;
	margin: 5% 20%;
	padding: 1%;
	background-color: black;
}


.advancedAudioSettings, .advancedVideoSettings {
    display: flex;
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    font-size: 14px;
}

.advancedAudioSettings div {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 4px;
}
.advancedAudioSettings div button {
    padding: 4px;
    height: 24px;
    margin: unset;
    flex: 1;
}

.advancedAudioSettings div select {
    width: 100%;
    border-radius: 4px;
    flex: 2;
    height: 24px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
    font-size: 14px;
}

.advancedAudioSettings div select[data-chosen='false'], .advancedVideoSettings div select[data-chosen='false'] { 
    border: 1px solid red;
}
.advancedAudioSettings div select[data-chosen='true'], .advancedVideoSettings div select[data-chosen='true'] { 
    border: 1px solid green;
}

.advancedAudioSettings > div:nth-child(1) {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: unset;
}

.darktheme .advancedAudioSettings .settingsLabel, .darktheme .advancedVideoSettings .settingsLabel {
    color: var(--lighttheme-3);
}

.advancedAudioSettings .settingsLabel, .advancedVideoSettings .settingsLabel {
    padding: 5px;
    display: block;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 12px;
}

.advancedVideoSettings div:nth-child(2) {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 4px;
}

.advancedVideoSettings div:nth-child(2) select {
    width: 100%;
    flex: 2;
    height: 24px;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
    font-size: 14px;
}

.advancedVideoSettings div:nth-child(2) button { 
    width: 100%;
    flex: 1;
    height: 24px;
    margin: unset;
}
.advancedAudioSettings label, .advancedVideoSettings label {
    color: #000;
}
.darktheme .advancedAudioSettings label, .darktheme .advancedVideoSettings label {
	color: #FFF;
}

.pressed.altpress, .altpress {
	background: #673100 !important;
	-webkit-box-shadow: inset 0px 0px 1px #b90000;
	-moz-box-shadow: inset 0px 0px 1px #b90000;
	box-shadow: inset 0px 0px 1px #b90000;
	outline: none;
	color: white;
}
.pressed.armed, .armed {
	background: #BF3F3F !important;
}
#mainmenu.row {
	align-content: center;
	text-align: center;
	margin-top: 10px;
}
#mainmenu.row:after {
	content: "";
	display: table;
	clear: both;
}

hr {
	height: 2px;
	border-width: 0;
	color: gray;
	background-color: gray;
}


.vidcon {
	max-width: 100%;
	border: 0;
}

.tile {
	object-fit: var(--fit-style);
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--video-rounded);
}

#gridlayout,#directorlayout {
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	justify-items: stretch;
	border: 0;
	margin: 0;
}
#gridlayout{
	z-index:-1;
}
.directorsgrid {
	justify-items: normal;
	display: block ! important;
	overflow-y: auto !important;
}

.directorsgrid .vidcon video {
	margin: 0 5px;
	padding:0;
	width: 100%;
    max-height: 148px;
	height:unset;
    max-width: 260px;
	min-height: 80px;
}

.directorsgrid .vidcon {
	display: inline-block;
    width: 269.7px!important;
    background: var(--lighttheme-7);
	color: var(--lighttheme-text);
	vertical-align: top;
}


.directorsgrid .vidcon>.las {
	color: black;
	background: #999999;
	width: 90%;
}
#activeShares>div{
	font-weight: normal;
	font-size: 12px;
	margin: 10px 0 0 0;
}
.pulsate {
	box-shadow: 0 0 0 0 rgba(14, 19, 26, 1);
	transform: scale(1);
	animation: pulse 2s infinite;
}

.minimized {
	float: left;
    position: absolute;
    bottom: 0;
    height: 24px;
	overflow:hidden;
	box-shadow: inset -1px 1px white
}

.minimized:nth-child(1) {
	left:0px;
	z-index:10;
}
.minimized:nth-child(2) {
	left:max(100px, calc(10% - 260px));
	z-index:9;
}
.minimized:nth-child(3) {
	left:max(200px, calc(20% - 260px));
	z-index:8;
}
.minimized:nth-child(4) {
	left:max(250px, calc(30% - 260px));
	z-index:7;
}
.minimized:nth-child(5) {
	left:max(300px, calc(40% - 260px));
	z-index:6;
}
.minimized:nth-child(6) {
	left:max(463px, calc(50% - 260px));
	z-index:5;
}
.minimized:nth-child(7) {
	left:max(500px, calc(60% - 260px));
	z-index:4;
}
.minimized:nth-child(8) {
	left:max(650px, calc(70% - 260px));
	z-index:3;
}
.minimized:nth-child(9) {
	left:max(700px, calc(80% - 260px));
	z-index:2;
}
.minimized:nth-child(10) {
	left:max(850px, calc(90% - 260px));
	z-index:1;
}
.minimized:nth-child(11) {
	left:max(900px, calc(100% - 260px));
	z-index:0;
}
.battery {
	border: 3px solid #4192c5;
	width: 11px;
	height: 19px;
	border-radius: 4px;
	position: absolute;
	left: 27px;
	top: 3px;
	background-color: #FFF2;
	font-size: 1.5em;
	z-index: 2;
	cursor: help;
	display:none;
}

.battery-charging{
	margin: 0;
	left: -1px;
	padding: 0;
	position: absolute;
	font-size: 0.54em;
	display: none;
}

.battery[data-plugged="1"] > .battery-charging {
	display:block;
}
.battery.warn {
	border: 3px solid #EFAF13;
}
.battery.alert {
	border: 3px solid #e81309;
}
.battery-level {
	background: #30b455; 
	position: absolute;
	bottom: 0px;
	right: 0;
	left: 0;
	font-size: 0.7em;
	margin: 0;
	padding: 0;
}

.hasMedia > .battery {
	display:block;
}
.slotsbar {
	border-radius: 6px;
	margin: 3.8px 3.8px 0 3.8px;
	padding: 0 6px;
	box-shadow: 0 0 1px #111;
	cursor:grab;
	color: white;
	text-shadow: 0 0 1px black;
	text-align: center;
}
.slotsbar>button{
	margin: 0;
	padding: 0 10px;
}
.slotsbar:active {
	cursor:grabbing;
}
[data-slot='0'] {
	background: linear-gradient(145deg, #dadada, #b8b8b8);
}
[data-slot='1'] {
	background-color: #00AAAA
}
[data-slot='2'] {
	background-color: #FF0000
}
[data-slot='3'] {
	background-color: #0000FF
}
[data-slot='4'] {