body {
	    background: black;
	    /*background: #B3D7FF; /*Blue*/
	    font:bold 25px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
	    color:white;
		overflow: hidden;
	}

	h1 { margin:0; padding:0; font-size:40px; }

	#wrap > div { 
	overflow:hidden; 
	position:relative;
	bottom:0;
	margin: 0px 0px 0px 20px;
	}
	
	#data {
	margin:5px;
	}
	
	.left  {
	float:left;	
	}	
	
	.datetime  {
		width:26%;
		height:212px; 
		float:left;
		background:#494949;
		color:#f3f3f3;
		overflow:hidden;
		border-radius:15px;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
	}	

	#todo  {
		width:26%;
		height:212px; 
		float:left;
		background:#494949;
		color:#f3f3f3;
		overflow:hidden;
		border-radius:15px;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
	}	

	.clock-span {
		display: block;
		width: 100%;
		height: 50px;
		margin-top: 25px;
		font-style:normal;
		text-align: center;
		font-weight: 300;
		font-size: 60px;
	}

	.date-span {
		display: block;
		width: 100%;
		margin-top: 10px;
		font-style:normal;
		text-align: center;
		font-weight: 300;
		font-size: 30px;
	}

	#todo ul {
	    list-style-type:none;
	    margin: 0px 0px 0px 40px;
	    padding:0;
	    font-size:23px;
	    list-style-type:disc;
	}
	
	#todo li {
	    margin-top:0px;
	    margin-bottom:0px;
	    
	    width:500px;
	    line-height: 1.1em;
	}
		
	#todo em {
	    font-style:normal;
	    background:#aa3636;
	    margin-right:10px;
	    display:inline-block;
	    /*width:50px;*/
	    /*height:30px;*/
	    padding:5px;
	    border-radius:15px;
	    -moz-border-radius:15px;
	    -webkit-border-radius:15px;
	}
	
	#todo small {
	    font-size:12px;
	    color:#bababa;
	    font-style:italic;
	}

	#todo h1 {
	    font-style:normal;
	    margin-right:10px;
	    display:inline-block;
	    padding:0 10px;
		font-size:30px;
	}

	#outside {
		width:25%;
		height:212px; 
		float:left;
		background:#000000f5;
		/*background:#0048ff; /*blue*/
		color:black;
		overflow:hidden;
		border-radius:15px;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		margin-left: 12px;
	}

	#outside > img {
		border-radius: 15px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		margin-bottom: 0;
		margin-right: 0;
		right: 0;
		bottom: 0;
	}	

	#camera {
		width:25%;
		height:212px; 
		float:left;
		background:#000000f5;
		/*background:#0048ff; /*blue*/
		color:black;
		overflow:hidden;
		border-radius:15px;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		margin-left: 12px;
	}

	#camera > img {
		border-radius: 15px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		margin-bottom: 0;
		margin-right: 0;
		right: 0;
		bottom: 0;
	}	

	#weather {
		width: 46%;
		text-align: center;
		float:right;
		color:black;
		overflow:hidden;
		border-radius:15px;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		margin-right: 8px;
		pointer-events:none
	}

	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
	}
	
	#counts  {
	color:white;
	line-height:1.1em;
	}
	
	#counts table {
	    width:100%;
		table-layout:fixed;
		border-spacing:5px 5px;
	}	

	#counts u {
	 font-weight:bold;
	}	
	
	#counts td {
	 	height:64px;
	  /* padding:2px;*/
	    background:#494949;
	    /*background:#0048ff; /*blue*/
	    border-radius:15px;
	    -moz-border-radius:15px;
	    -webkit-border-radius:15px;
		text-align:center;
		font-weight:normal;
	}
	
	#emp table {
    width:100%;
	border-spacing:5px; 
	}		
	
	#emp  {
	margin-bottom:15px;
	color:white;
	}	
	
	#emp h1 {
		text-align: center;
		font-size:30px;
		 color:white;
		 /*color:#0048ff;*/
	}
	
	#emp td {
	    padding:2px;
	    background:#494949;
	    /*background:#0048ff; /*blue*/
	    border-radius:8px;
	    -moz-border-radius:8px;
	    -webkit-border-radius:8px;
	}
	
	#emp th {
	    padding:2px;
	    background:#275D38;
	    border-radius:8px;
	    -moz-border-radius:8px;
	    -webkit-border-radius:8px;
		color:white;
	}
	
	#emp td {
	    text-align:center;
	}
	
	#emp img {
	    vertical-align:middle;
	}
	
	div {
	   overflow:hidden;
	   white-space: nowrap;
	} 
	
	#currprojects  {
		color:white;
		margin-bottom:35px;
		}
		
		#currprojects table {
			width:100%;
			border-spacing:5px; 
		}
		
		#currprojects h1 {
			text-align: center;
			font-size:30px;
			 color:white;
			 /*color:#0048ff;*/
		}
		
		#currprojects td {
			padding:2px;
			background:#494949;
			/*background:#0048ff; /*blue*/
			border-radius:8px;
			-moz-border-radius:8px;
			-webkit-border-radius:8px;
			text-align:center;
			overflow: hidden;
		}
	
		#currprojects tr {
			margin:10px;
		}
		
		#currprojects th {
			padding:2px;
			background:#66CC33;
			border-radius:8px;
			-moz-border-radius:8px;
			-webkit-border-radius:8px;
			color:Black;
		}
		
		#currprojects td:first-child {
			text-align:center;
			height:10px;
			line-height:15px;
			font-size:15px;
		}
		
			#currprojects small {
			font-size:15px;
		}
		
			#currprojects a {
			color:white;
			text-decoration:none;
		}
		
		#currprojects img {
			vertical-align:middle;
		}
		
		#currprojects input { 
			background:#494949;
			border-radius:3px;
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
			color:white;
			height:30px;
			text-align:center;
			margin-bottom:5px;
			font-size:23px;
	} 



	#newprojects  {
		color:white;
		margin-bottom:35px;
		}
		
		#newprojects table {
			width:100%;
			border-spacing:5px; 
		}
		
		#newprojects h1 {
			text-align: center;
			font-size:30px;
			 color:white;
			 /*color:#0048ff;*/
		}
		
		#newprojects td {
			padding:2px;
			background:#494949;
			/*background:#0048ff; /*blue*/
			border-radius:8px;
			-moz-border-radius:8px;
			-webkit-border-radius:8px;
			text-align:center;
			overflow: hidden;
		}
	
		#newprojects tr {
			margin:10px;
		}
		
		#newprojects th {
			padding:2px;
			background:#66CC33;
			border-radius:8px;
			-moz-border-radius:8px;
			-webkit-border-radius:8px;
			color:Black;
		}
		
		#newprojects td:first-child {
			text-align:center;
			height:10px;
			line-height:15px;
			font-size:15px;
		}
		
			#newprojects small {
			font-size:15px;
		}
		
			#newprojects a {
			color:white;
			text-decoration:none;
		}
		
		#newprojects img {
			vertical-align:middle;
		}
		
		#newprojects input { 
			background:#494949;
			border-radius:3px;
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
			color:white;
			height:30px;
			text-align:center;
			margin-bottom:5px;
			font-size:23px;
	} 

	#top5projects  {
	color:white;
	margin-bottom:15px;
	}
	
	#top5projects table {
	    width:100%;
	    border-spacing:5px; 
	}
	
	#top5projects h1 {
		text-align: center;
		font-size:30px;
		 color:white;
		 /*color:#0048ff;*/
	}
	
	#top5projects td {
	    padding:2px;
	    background:#494949;
	    /*background:#0048ff; /*blue*/
	    border-radius:8px;
	    -moz-border-radius:8px;
	    -webkit-border-radius:8px;
		text-align:center;
	}

	#top5projects tr {
	    margin:10px;
	}	
	
	#top5projects th {
    padding:2px;
	background:#66CC33;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
	color:Black;
	}
	
	#top5projects td:first-child {
	    text-align:center;
		height:10px;
		line-height:15px;
		font-size:15px;
	}
	
		#top5projects small {
	    font-size:15px;
	}
	
		#top5projects a {
	    color:white;
		text-decoration:none;
	}
	
	#top5projects img {
	    vertical-align:middle;
	}
	
	#top5projects input { 
	background:#494949;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	color:white;
	height:30px;
	text-align:center;
	margin-bottom:5px;
	font-size:23px;
} 

	#twitter > span { 
		color:white;
	    overflow:hidden;
	    font-size:25px;
	}

	#twitter ul {
	    list-style-type:none;
	    width:5000px;
	    position:relative;
	}
	
		#twitter a:link {
	    color:#0066FF;
	}
	
	#twitter li {
	    float:left;
	    margin-right:10px;
	}
	#twitter img {
	    vertical-align:middle;
	    margin-right:10px;
	    border:0;
	    height:20px;
	    width:20px;
	}
	
	#twitter  {
	width:99%;
	overflow:hidden;
	position:absolute;
	bottom:0;
	}
	
#tooltip {
	    position: absolute;
	    display:none;
	    padding: 2px 5px;
	    background:#494949;
	    color:#fefefe;
	    border-radius:15px;
	    -moz-border-radius:15px;
	    -webkit-border-radius:15px;
	}

#clock{
	float:right;	
	margin-right:10px;
}

#fancyClock{
	margin:auto;
	margin-top: 20px;
	height:76px;
	width:228px;

}


	#outages table {
	    width:100%;
		border-spacing:5px; 
	}		
	
	#outages  {
		margin-bottom:15px;
		color:white;
	}	
	
	#outages h1 {
		text-align: center;
		font-size:30px;
		 color:white;
		 /*color:#0048ff;*/
	}
	
	#outages td {
	    padding:2px;
	    background:#494949;
	    /*background:#0048ff; /*blue*/
	    border-radius:8px;
	    -moz-border-radius:8px;
	    -webkit-border-radius:8px;
	}
	
	#outages th:not(:first-child) {
	    padding:2px;
	    background:#66CC33;
	    border-radius:8px;
	    -moz-border-radius:8px;
	    -webkit-border-radius:8px;
		color:black;
	}
	
	#outages td {
	    text-align:center;
	}
	
	#outages img {
	    vertical-align:middle;
	}

	#notifications table {
	    width:100%;
		border-spacing:5px; 
	}		
	
	#notifications  {
		margin-bottom:15px;
		color:white;
	}
	
	#notifications h1 {
		text-align: center;
		font-size:30px;
		 color:white;
		 /*color:#0048ff;*/
	}
	
	#notifications td {
	    padding:2px;
	    background:#494949;
	    /*background:#0048ff; /*blue*/
	    border-radius:8px;
	    -moz-border-radius:8px;
	    -webkit-border-radius:8px;
	}
	
	#notifications th:not(:first-child) {
	    padding:2px;
	    background:#78be48;
	    border-radius:8px;
	    -moz-border-radius:8px;
	    -webkit-border-radius:8px;
		color:black;
	}
	
	#notifications td {
	    text-align:center;
	}
	
	#notifications img {
	    vertical-align:middle;
	}

	#song {
		width: 100%;
		display: flex;
		flex-direction: row;
		background-color: #275D38;
		margin-top: 50px;
		margin-bottom: 50px;
		padding-top: 25px;
    	padding-bottom: 25px;
		justify-content: center;
		align-items: center;
	}
	#art {
		/* left side */
		object-fit: contain;
		height: 250px;
		/* width: 100%; */
		/* animation: float 6s ease-in-out infinite; */
		/* border-radius: .5em; */
	}
	@keyframes float {
		0% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(5px);
		}
		100% {
			transform: translateY(0px);
		}
	}
	#songInfo {
		/* right side */
		height: 320px;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
		line-height: 1.2;
		padding-inline: .3rem;
		max-width: 60vw;
	}
	#songArt {
		margin-right: 45px;
		display: flex;
		align-items: center;
		animation: float 6s ease-in-out infinite;
	}
	.title {
		font-style: italic;
		/* use ellipses if it cuts off */
		overflow: visible;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: inherit;
		/* padding-right: 2px; */
		font-size: 3rem;
		position: relative;
	}
	#title {
		position: relative;

	}
	#artist {
		opacity: 0.75;
	}
	#year {
		opacity: 0.5;
	}
	#songBackground {
		position: absolute;
		z-index: -1;
		left: -15%;
		width: 400px; 
		height: 400px;
	}
	#songInfo p {
		font-size: 11px;
		overflow: visible;
		text-wrap: wrap;
	}

	@keyframes scroll-text-anim {
		0%		{left: 0%;}
		30%		{left: 0%;}
		90%		{left: -200%}
		100%	{left: -200%}
	}

	.scroll-text {
		animation-name: scroll-text-anim;
		animation-duration: 10s;
		animation-fill-mode: forwards;
		animation-direction: normal;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-delay: 5s;
	}

	#mission {
		background-image: url("../mission_bg.jpg");
		background-position: center;
		max-width: 100%;
		margin-top: 25px;
		line-height: 1;
	}
	#mission h2 {
		font-size: 25px;
		margin-bottom: 10px;
		margin-top: 50px;
		text-align: center;
		text-transform: uppercase;
		font-weight: 450;
		letter-spacing: 0.15em;
		font-family: "Open Sans", sans-serif;
	}
	#mission h4 {
		font-size: 12px;
		text-align: center;
		text-transform: uppercase;
		font-weight: 500;
		letter-spacing: 0.1em;
		margin-bottom: 50px;
		font-family: "Open Sans", sans-serif;
	}
	#mission svg {
		display: block;
		margin: auto;
		width: 100%;
		max-width: 900px;
		margin-top: 25px;
	}

	#fancyClock {
		margin-top: 40px;
	}



.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

@keyframes rgb {
	0%{background-color: hsl(0 50% 50%);}
	25%{background-color: hsl(90 50% 50%);}
	50%{background-color: hsl(180 50% 50%);}
	75%{background-color: hsl(270 50% 50%);}
	100%{background-color: hsl(359 50% 50%);}
}

/* tr:has(img[alt*="Dave"]) td {
	animation: rgb 1s linear 0s infinite forwards;
} */

.Teams-Available > td:nth-child(2)::before {
	content: url('../icons/teams/presence_available.png');
	float: left;
	width: 25px;
	height: 25px;
}

.Teams-AvailableIdle > td:nth-child(2)::before {
	content: url('../icons/teams/presence_away.png');
	float: left;
	width: 25px;
	height: 25px;
}

.Teams-Away > td:nth-child(2)::before {
	content: url('../icons/teams/presence_away.png');
	float: left;
	width: 25px;
	height: 25px;
}

.Teams-AwayIdle > td:nth-child(2)::before {
	content: url('../icons/teams/presence_away.png');
	float: left;
	width: 25px;
	height: 25px;
}

.Teams-Busy > td:nth-child(2)::before {
	content: url('../icons/teams/presence_busy.png');
	float: left;
	width: 25px;
	height: 25px;
}

.Teams-BusyIdle > td:nth-child(2)::before {
	content: url('../icons/teams/presence_busy.png');
	float: left;
	width: 25px;
	height: 25px;
}

.Teams-DoNotDisturb > td:nth-child(2)::before {
	content: url('../icons/teams/presence_dnd.png');
	float: left;
	width: 25px;
	height: 25px;
}

.Teams-Offline > td:nth-child(2)::before {
	content: url('../icons/teams/presence_offline.png');
	float: left;
	width: 25px;
	height: 25px;
}

tr > td:nth-child(2) {
	border: 5px solid transparent;
}

/* .Teams-Busy > td:nth-child(2) {
	border: 5px dashed red !important;
}

.Teams-BusyIdle > td:nth-child(2) {
	border: 5px dashed red !important;
}

.Teams-DoNotDisturb > td:nth-child(2) {
	border: 5px dashed red !important;
} */

/* .Teams-DoNotDisturb > td:nth-child(2) {
	border: 5px dashed red !important;
} */

/* .Teams-Busy > td:nth-child(1) {
	background-color: red !important;
} */