html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

.hidden { display: none !important; }
.flex, .d-flex { display: flex; }
.fw, .fw-wrap { flex-wrap: wrap; }
.ac { display: flex; justify-content: center; align-items: center; }
.fr, .frow { display: flex; flex-direction: row; }
.fc, .fcol { display: flex; flex-direction: column; }
.fr.center { justify-content: center; }
.fr.vertCenter { align-items: center; }
.fr.vend { align-items: flex-end; }
.fc.center { align-items: center; }
.fc.vertCenter { justify-content: center; }
.fc.vend { justify-content: flex-end; }
.fe { display: flex; justify-content: flex-end; align-items: flex-end; }
.fns { flex-shrink: 0; }
.g40 { gap: 40px; }
.g30 { gap: 30px; }
.g20 { gap: 20px; }
.g10, .gap10 { gap: 10px; }
.g5, .gap5 { gap: 5px; }
.g2, .gap2 { gap: 2px; }
.fb100 { flex-basis: 100%; }
.fb50 { flex-basis: 50%; }
.fb50p10 { flex-basis: calc(50% - 10px); }
.fb50p20 { flex-basis: calc(50% - 20px); }
.p20box { padding: 20px; box-sizing: border-box; }
.p10box { padding: 10px; box-sizing: border-box; }
.p5box { padding: 5px; box-sizing: border-box; }
.p10left { padding-left: 10px; box-sizing: border-box; }
.p5left { padding-left: 5px; box-sizing: border-box; }
.p10right { padding-right: 10px; box-sizing: border-box; }
.p5right { padding-right: 5px; box-sizing: border-box; }
.disabled { cursor: not-allowed !important; }
.fullyDisabled { pointer-events: none !important; background-color: #efefef !important; }
.spaceBetween { display: flex; flex-direction: row; justify-content: space-between; gap: 10px; }
.spaceBetweenVert { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.spaceAround { display: flex; flex-direction: row; justify-content: space-around; }
.spaceEvenly { display: flex; flex-direction: row; justify-content: space-evenly; }
.pullRight { flex: 1; display: flex; justify-content: flex-end; }
.fstart { display: flex; justify-content: flex-start; }
.fend { display: flex; justify-content: flex-end; }
.w10 { width: 10%; }
.w20 { width: 20%; }
.w30 { width: 30%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }
.h90 { height: 90%; }
.h100 { height: 100%; }

body {
	font-family: Arial, sans-serif;
	background-color: #f0f0f0;
	color: #333;
}

.masterContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #f0f0f0;
	overflow: auto;
	padding: 10px;
	box-sizing: border-box;
	gap: 15px;
}

.container {
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	width: 100%;
	max-width: 340px;
}

.time-display {
	font-size: 1.2em;
	display: flex;
	flex-direction: row;
}

.tdItem {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
}

.timeframe-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 20px;
}

.timeframe {
	background: #e8e8e8;
	padding: 10px;
	border-radius: 5px;
}

.timeframe.recent-rollover {
	background: #ffcccc;
}

.timeframe.pre-rollover {
	background-color: #ccffcc
}

.timeframe h3 {
	margin: 0;
	font-size: 1em;
}

.timeframe p {
	margin: 5px 0 0;
	font-size: 0.9em;
}

.session-display {
	margin-top: 20px;
	font-size: 1em;
}

.session-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 10px;
}

.session {
	background: #e8e8e8;
	padding: 10px;
	border-radius: 5px;
}

.session.active {
	background: #ccffcc;
}

.session h3 {
	margin: 0;
	font-size: 1em;
}

.session p {
	margin: 5px 0 0;
	font-size: 0.9em;
}

.current-session {
	margin-top: 10px;
	font-weight: bold;
}

.small {
	font-size: 0.8em;
	color: #666;
}

.tiny {
	font-size: 0.7em;
	color: #999;
}

.debug-info {
	margin-top: 20px;
	font-size: 0.8em;
	color: #666;
	text-align: left;
	padding: 10px;
	background-color: #f8f8f8;
	border-radius: 5px;
	display: none;
}

.navigation {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.navLink {
	flex: 1;
	border: 1px solid black;
	padding: 10px;
	box-sizing: border-box;
	text-decoration: none;
	color: #777dcf;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.navLink.active {
	background-color: #777dcf;
	color: white;
}

.page {
	height: 100%;
	overflow-y: auto;
}

#checklist {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.clItem {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: left;
	text-align: left;
}

.clRating {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	justify-content: end;
}

.clItem .title,
.clRating .title {
	font-weight: bold;
}

.clItem .description,
.clRating .description {
	font-size: 0.8em;
	color: #666;
}

.rating {
	font-size: 2em;
	font-weight: bold;
	padding: 10px;
	border-radius: 100%;
	width: 40px;
}

.ratingUnknown {
	color: #FFFFFF;
	background-color: #777dcf;
}

.ratingBMinus {
	color: #FFFFFF;
	background-color: #ffcc00;
}

.ratingB {
	color: #FFFFFF;
	background-color: #ff9900;
}

.ratingBPlus {
	color: #FFFFFF;
	background-color: #ff9900;
}

.ratingAMinus {
	color: #FFFFFF;
	background-color: #ff6600;
}

.ratingA {
	color: #FFFFFF;
	background-color: #ff6600;
}

.ratingAPlus {
	color: #FFFFFF;
	background-color: #ff3300;
}