/*
//	Code below this line:
//	Copyright 2022-2023 William C. Byrd All Rights Reserved - written for iServeItUp.com
//	Company: iServeItUp.com
//	Author: William C. Byrd
//	Email: support@iserveitup.com
//	Use of this code without written permission from iServeItUp.com or William C. Byrd is strictly prohibited.
//
*/

:host, :root{
	--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"
	--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free";
	--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free";
	--isiu-black:#03081e;
	--isiu-black-rgb:3, 8, 30;
	--isiu-white:#ecfff2;
	--isiu-white-rgb:236, 255, 242;
	--isiu-green:#89e075;
	--isiu-green-rgb:137, 224, 117;
	--isiu-blue:#75dce0;
	--isiu-blue-rgb:117, 220, 224;
}
/* NON CLASS ================================================================ NON CLASS */
*, ::before, ::after {
	box-sizing: border-box;
}
*{
	color:inherit;
	font-size:inherit;
	font-family:inherit;
	line-height:inherit;
	padding:0;
	margin:0;
	border-collapse: collapse;
	border: none;
	text-decoration:inherit;
}
html{
	color:var(--isiu-white);
	background-color:var(--isiu-black);
}
body{
	font-family:"Avenir", "Nunito", Helvetica, Arial, sans-serif;
	width:100vw;
	height:100vh;
	font-size:16px;
	overflow:hidden;
}
table{
	width:100%;
}
.green{color:var(--isiu-green);}
.lightblue{color:var(--isiu-blue);}
.vortex, .bg{
	position:absolute;
	left:0;
	top:0;
	width:101vw;
	height:100vh;
}
.bg{
	background-size:cover;	
	background-repeat:no-repeat;
	background-position:center;
}
.bg.off{display:none;}
.vortex > div.bg{ z-index:1; }
.left{text-align:left;}
.right{text-align:right;}
.centered{text-align:centered;}
.justified{text-align:justified;}
.words{
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	overflow:hidden;
	text-align:center;
	z-index:10;
	transition: color 2s ease;
	color:rgba(var(--isiu-white-rgb),0);
}
.words > div{
	position:absolute;
	top:0;
	left:0;
	display:flex;
	justify-content:space-evenly;
	margin:10px;
	pointer-events:none;
}
.controls{
	position:absolute;
	width:100vw;
	bottom:0;
	left:0;
	text-align:center;
	justify-content:space-evenly;
	background-color:rgba(var(--isiu-black-rgb),0.8);
	margin:0 auto;
	transition:opacity 0.5s ease;
	z-index:15;
}
.controls > div{
	width:100vw;
	display:block;
	text-align:center;
	float:left;
}
.controls > div > div{
	float:left;
}
.controls.off{opacity:0;pointer-events:none;}
.controls i{pointer-events:none;font-size:200%;}
.controls .buttons > div{
	cursor:pointer;
	padding:10px 20px;
}
.controls .buttons > div:hover{
	background-color:rgba(var(--isiu-blue-rgb),0.1);
}
.controls .buttons.small i{
	font-size:100%;
	padding:10px;
}
.controls .buttons.medium i{
	font-size:150%;
	padding:5px;
}
.controls .five > div{ width:20%; }
.controls .four > div{ width:25%; }
.controls .three > div{ width:33.33%; }
.controls .two > div{ width:50%; }
.controls .one > div{ width:100%; }
.controls .buttons .play > i:nth-child(1){
	display:block;
}
.controls .buttons .repeat{
	color:var(--isiu-green);
}
.controls .buttons .repeat.off{
	color:var(--isiu-white);
}
.controls.playing .buttons .play > i:nth-child(1){
	display:none;
}
.controls .buttons .play > i:nth-child(2){
	display:none;
}
.controls.playing .buttons .play > i:nth-child(2){
	display:block;
}
.controls .buttons .expand > i:nth-child(1){
	display:block;
}
.controls.expanded .buttons .expand > i:nth-child(1){
	display:none;
}
.controls .buttons .expand > i:nth-child(2){
	display:none;
}
.controls.expanded .buttons .expand > i:nth-child(2){
	display:block;
}
.controls .statusInfo{
	color:var(--isiu-green);
	padding:10px 0;
}
.UI{
	position:absolute;
	text-align:center;
	transition:opacity 1s ease;
	opacity:1;
	background-color:rgba(var(--isiu-black-rgb),0.8);
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	overflow-x:hidden;
	z-index:110;
}
.UI > div{margin:10px;}
.UI.off{opacity:0;pointer-events:none;}
.UI .clear{clear:both;}
.UI .s25{width:calc(25% - 5px);margin-right:10px;float:left;}
.UI .s50{width:calc(50% - 5px);margin-right:10px;float:left;}
.UI .s75{width:calc(75% - 5px);margin-right:10px;float:left;}
.UI .s100{width:100%;}
.UI .s25:last-child, .UI .s50:last-child, .UI .s75:last-child{margin-right:0;}

.UI > .s25{width:calc(25% - 20px);margin-right:10px;float:left;}
.UI > .s50{width:calc(50% - 20px);margin-right:10px;float:left;}
.UI > .s75{width:calc(75% - 20px);margin-right:10px;float:left;}
.UI > .s100{width:calc(100% - 20px);}
.UI .nopad{padding:0;}
.UI .closeButton{
	position:absolute;
	top:0;
	right:0;
	cursor:pointer;
	font-size:200%;
	border:none;
}
.UI .quickKeys{
	position:relative;
	padding:20px;
}
.UI .title{
	font-size:200%;
	border:none;
	color:var(--isiu-blue);
	background-color:rgba(var(--isiu-blue-rgb),0.1);
	border-radius:10px 10px 0 0;
	padding:2px 0;
}
.bordered{
	border:1px solid rgba(var(--isiu-white-rgb),0.4);
	border-radius:0 0 10px 10px;
}
.bordered.lb{
	border:1px solid rgba(var(--isiu-blue-rgb),0.4);
}
.bordered-top{
	border-top:1px solid rgba(var(--isiu-white-rgb),0.4);
}
.bordered-top.lb{
	border-top:1px solid rgba(var(--isiu-blue-rgb),0.4);
}
.bordered-bottom{
	border-bottom:1px solid rgba(var(--isiu-white-rgb),0.4);
}
.bordered-bottom.lb{
	border-bottom:1px solid rgba(var(--isiu-blue-rgb),0.4);
}
.bordered-tb{
	border-top:1px solid rgba(var(--isiu-white-rgb),0.4);
	border-bottom:1px solid rgba(var(--isiu-white-rgb),0.4);
}
.bordered-tb.lb{
	border-top:1px solid rgba(var(--isiu-blue-rgb),0.4);
	border-bottom:1px solid rgba(var(--isiu-blue-rgb),0.4);
}
.toolBox{
	position:relative;
	width:100%;
	margin-bottom:10px;
	display: flex;
    justify-content:space-around;
    list-style-type:none;
}
.checkButton{
	position:relative;
	float:left;
	margin-right:20px;
	cursor:pointer;
}
.checkButton.selected i{
	color:var(--isiu-green);
}
.musicPlayer{
	position:relative;
	width:50vw;
	height:60vh;
	z-index:10;
	padding:10px;
}
.picker, .playList{
	width:100%;
	height:60vh;
	overflow-x:hidden;
	padding-bottom:40px;
}
.playList .song.selected{
	display:table-row;
}
.picker .song:hover{
	color:rgba(var(--isiu-white-rgb),0.5);
}
.song{
	display:table-row;
	clear:both;
	width:100%;
	overflow:hidden;
	cursor:pointer;
	border-bottom:1px solid rgba(var(--isiu-blue-rgb),0.2);
	padding:5px 0;
}
.song > div{
	display:table-cell;
	padding:5px 20px 0 5px;
	overflow:hidden;
	text-align:left;
	user-select: none;
}
.song.current{
	background-color:rgba(var(--isiu-blue-rgb),0.2);
}
.song.selected i{
	color:var(--isiu-green);
}
.songInfo > div > div{
	padding:5px 3px;
	vertical-align:middle;
}
.songInfo > div > div:first-child{
	background-color:rgba(var(--isiu-blue-rgb),0.1);
	border-right:1px solid rgba(var(--isiu-black-rgb),0.5);
}
.songInfo > div > div:last-child{
	border-right:none;
}
.titleWindow{
	position:relative;
	top:43vh;
	margin:0 auto;
	width:100%;
	text-align:center;
	background-color:rgba(var(--isiu-black-rgb),0.3);
	display:none;
	padding:20px;
	z-index:100;
}
.quickMessage{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	display:none;
	z-index:90;
}
.quickMessage > div{
	position:relative;
	width:100%;
	margin:0 auto;
	background-color:rgba(var(--isiu-black-rgb),0.3);
	padding:20px;
	text-align:center;
}
.messageWindow{
	position:fixed;
	z-index:200;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	overflow:hidden;
	background-color:rgba(var(--isiu-black-rgb),0.9);
	transition:opacity 1s ease, width 1s ease, height 1s ease;
	display:none;
}
.messageWindow.open{
	display:block;
}
.messageBox{
	position:relative;
	top:10vh;
	width:60vw;
	margin:0 auto;
	background-color:rgba(var(--isiu-white-rgb),0.7);
	padding:20px;
}
.messageBox .title, .messageBox .content{
	text-align:center;
	width:100%;
	color:var(--isiu-black);
	border-bottom:rgba(var(--isiu-black-rgb),0.8);
	font-size:200%;
	margin-bottom:40px;
}
.messageBox .content{
	font-size:120%;
}
.messageBox .buttons{
	width:100%;
	text-align:center;
}
.messageBox .buttons .button{
	padding:20px;
	margin:10px 20px;
	border:1px solid rgba(var(--isiu-black-rgb),0.8);
	cursor:pointer;
}
.messageBox .buttons .button:hover{
	background-color:rgba(var(--isiu-black-rgb),0.4);
}
@media screen and (max-width: 480px) {
	.UI{
		margin:0;
		width:100vw;
		height:100vh;
	}
	.UI .closeButton{
		top:-5px;
		right:-5px;
	}
	.UI .s25, .UI .s50, .UI .s75{
		position:relative;
		clear:both;
		width:100%;
		margin-bottom:20px;
	}
	.musicPlayer{
		height:auto;
	}
	.picker,.playList{height:25vh;}
	.UI .title{
		font-size:150%;
	}
}