:root {
 	--idg-green: #97c249;
 	--pri-blue: #045392;
 	--sec-blue: #0453ffb0;
 	--steel-blue: #223a5e;
 	--pri-orange: #ff9f1c;
 	--sec-orange: #F98D29;
 	--white: whitesmoke;
 	--gray: #dee0e4;
 	--med-gray: #5b6574;
 	--err-red: #ff4a4a;
 	--black: #212427;
 	--pri-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
 	--sec-box-shadow: 10px 9px 6px -8px rgba(0, 0, 0, 0.49);
 	--sec-box-shadow-white: 0 0 9px 0 var(--white);
 	--button-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.49);


 	--nav-color: var(--idg-green);
 	--nav-active-underline-color: var(--white);
 	--inline-nav-active-underline-color: var(--idg-green);
 	--toolbar-color: var(--pri-blue);
 	--toolbar-img-color: var(--med-gray);
 	--modal: rgb(0, 0, 0, 0.8);


 }

 * {
 	box-sizing: border-box;
 	font-family: Arial, Helvetica, sans-serif;
 	font-size: 12pt;
 	border-collapse: collapse;
 }

 body {
 	color: var(--black);
 	text-align: center;
 	margin: 0px;
 	padding: 0px;
 }

 #nav {
 	display: block;
 	width: 100%;
 	background-color: var(--nav-color);
 }

 .nav {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
 	width: 100%;

 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
 	justify-content: flex-start;
 	align-items: left;
 }

 .nav li {
 	padding: 8px 0px 2px 0px;
 	margin: 5px 10px 2px 10px;
 	cursor: pointer;
 }

 .nav .current-page {
 	border-bottom: 2px inset var(--nav-active-underline-color);
 	font-weight: bold;
 }

 .inline-nav .current-page {
 	border-bottom: 2px inset var(--inline-nav-active-underline-color);
 }

 .nav li a {
 	display: block;
 	/* padding: 8px; */
 	text-decoration: none;
 	color: var(--black);
 }

 input[type="text"],
 input[type="date"],
 input[type="number"],
 input[type="datetime-local"],
 select,
 input[type="password"] {
 	height: 36px;
 	color: var(--black);
 	border: 1px solid var(--gray);
 	padding: 0 15px;
 }

 button,
 .btn {
 	cursor: pointer;
 	padding: 5px;
 	color: var(--white);
 	box-shadow: var(--button-box-shadow);
 	background: var(--steel-blue);
 	transition: background-color 0.2s;
 	-webkit-user-select: none;
 	-khtml-user-select: none;
 	-moz-user-select: -moz-none;
 	-o-user-select: none;
 	user-select: none;
 	margin: 5px;
 }

 button:active,
 .btn:active {
 	box-shadow: none;
 }

 #toolbar {
 	display: flex;
 	align-items: center;
 	flex-direction: row;
 	width: 100%;
 	color: var(--black);
 	justify-content: center;
 	align-content: center;
 	background: var(--toolbar-color);
 	height: 40px;
 }

 #toolbar img,
 .toolbar-img {
 	height: 30px;
 	/* opacity: .7; */
 	cursor: pointer;
 	filter: invert(1);
 	margin-left: 10px;
 	margin-right: 10px;
 	border-radius: 20px;
 	background: var(--toolbar-img-color);
 	padding: 5px;
 }

 #toolbar span {
 	margin-left: auto;
 	margin-right: auto;
 	font-weight: bold;
 	font-size: 14pt;
 	color: var(--white);
 	user-select: none;
 }

 #main table {
 	border-collapse: collapse;
 	min-width: 300px;
 }

 #main table tr:nth-child(even) {
 	background: var(--gray);
 }

 #main table .action-img {
 	height: 20px;
 	cursor: pointer;
 	margin-left: 2px;
 	margin-right: 2px;
 }

 .modal {
 	display: none;
 	position: fixed;
 	z-index: 1;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	overflow: auto;
 	background-color: var(--modal);
 	justify-content: center;
 }

 .modal-content {
 	background-color: var(--gray);
 	margin: 5% auto;
 	padding: 30px;
 	border: none;
 	min-width: 40%;
 	/* max-height: 90vh; */
 	overflow-y: auto;
 	display: inline-flex;
 	flex-direction: column;
 	border-radius: 5px 5px 5px 5px;
 	box-shadow: var(--pri-box-shadow);
 	justify-content: center;
 }

 .modal-content p {
 	color: var(--black);
 }

 .modal-close {
 	color: var(--sec-blue);
 	align-self: flex-end;
 	font-size: 28px;
 	font-weight: bold;
 }

 .actionBtn {
 	margin-left: 10px;
 	text-decoration: underline;
 	color: var(--pri-blue);
 	cursor: pointer;
 }

 .modal-close:hover,
 .modal-close:focus {
 	color: var(--sec-blue);
 	text-decoration: none;
 	cursor: pointer;
 }

 #main {
 	display: flex;
 	text-align: center;
 	justify-content: flex-start;
 	width: 90%;
 	min-width: 300px;
 	flex-direction: column;
 	margin-top: 15px;
 	margin-left: auto;
 	margin-right: auto;
 	align-content: center;
 	align-items: center;
 }

 .sport-tile,
 .tile {
 	display: flex;
 	text-align: center;
 	position: relative;
 	margin: 15px 15px 15px 15px;
 	flex-direction: column;
 	align-content: center;
 	justify-content: flex-start;
 	align-items: center;
 	box-shadow: var(--pri-box-shadow);
 	padding-bottom: 15px;
 	/* width: 90%; */
 	/* min-width: 40%; */
 	min-width: 300px;

 }

 .sport-tile .title {
 	display: inline-block;
 	width: 98%;
 	height: 40px;
 	padding: 10px;
 	font-weight: bold;
 	background-color: var(--pri-blue);
 	color: var(--white);
 	margin: 5px;
 }


 .add-sport {
 	width: fit-content;
 	height: fit-content;
 	margin-left: auto;
 	display: inline-flex;
 	align-content: flex-start;
 	align-items: center;
 	padding-right: 10px;

 	opacity: .6;
 	box-shadow: none;
 	background: none;
 	color: var(--black);
 }

 .add-sport img,
 .add-league img {
 	height: 24px;
 	width: 24px;
 	margin-right: 5px;
 }

 .add-league {
 	opacity: .5;
 	display: inline-flex;
 	align-content: center;
 	flex-direction: row;
 	justify-content: flex-start;
 	align-items: center;
 	margin-top: 10px;
 	margin-bottom: 10px;
 }


 .sport-tile .edit {
 	position: absolute;
 	top: 12px;
 	right: 10px;
 	height: 24px;
 	filter: invert(1);
 	/* opacity: .6; */
 	cursor: pointer;
 }

 .delete {
 	height: 24px;
 	/* opacity: .6; */
 	cursor: pointer;
 }

 .sport-tile .delete {
 	position: absolute;
 	top: 12px;
 	right: 40px;
 	filter: invert(1);
 }

 .sport-tile .league,
 .session {
 	display: inline-flex;
 	align-content: center;
 	align-items: center;
 	flex-direction: row;
 	justify-content: center;
 	width: 200px;
 	background: var(--gray);
 	color: var(--black);
 	border-radius: 6px;
 	user-select: none;
 }

 .league-edit {
 	height: 16px;
 	margin-left: auto;
 }

 .delete-btn {
 	background: #952525;
 }

 .stat-cell {
 	border: 1px solid black;
 	width: 40px;
 }