/* Created by Rick Tress Sep-15-2022 */
@import url('https://fonts.googleapis.com/css?family=Outfit&display=swap');
@import url('https://fonts.googleapis.com/css?family=Mulish&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

/*
<span class="material-symbols-outlined">
home
</span>
*/
#mainSpan {
	border: 0px solid #ccc;
	padding: 6px;
	border-collapse: collapse;
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 6px;
	right: 6px;
}

.material-symbols-outlined {
	font-size: 48px;
	font-size: 10vmin;
}

body,
table,
button {
	font-size: 16px;
	font-size: 4.5vmin;
}

.foot {
	font-size: 2.0vmin;
}

a {
	cursor: pointer;
	border-radius: 10px;
    border: 0;
    target: "_blank";
    overflow:hidden;
    perspective: 1px;
}

body {
	color: rgb(255, 255, 255);
	background-color: rgb(50, 50, 50);
}

body,
a {
	font-family: Mulish, Outfit, Arial;
}

table,
tr,
td {
	border: 1px solid #ccc;
	text-align: center;
	padding: 0px;
	border-collapse: collapse;
	vertical-align: middle;
}

.nobr {
	white-space: nowrap;
}

.bars,
.barComp,
.barPast {
	height: 100%;
	text-align: left;
	stroke-width: 0;
	stroke: rgb(0, 0, 0);
}

#progBars {
	width: 70%;
}

.red {
	fill: rgb(255, 050, 050);
	fill: #1E439C;
	/* wood blue */
	color: rgb(255, 150, 150);
	/* time bar text red */
}

.green {
	fill: rgb(050, 255, 050);
	fill: #FED008;
	/* wood gold */
	color: rgb(150, 255, 150);
	/* time bar text green */
}

.blue {
	fill: rgb(050, 050, 255);
	color: rgb(150, 150, 255);
	/* time bar text blue */
}

.CEMS {
	color: #fff;
	background-color: #a00;
}

.SRP {
	color: #fff;
	background-color: #F37B00;
}

.FLine {
	color: #fff;
	background-color: #7E4082;
}

.flex {
	color: #FED008;
	background-color: #1E439C;
}

#table02 {
	table-layout: auto;
	width: 100%;
	height: 98%;
}

.cell {
    position: relative;
}

.fspan {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    padding:5px;
}