/* DEFAULT STYLES */

body {
	background: #fef1b4;
}

header {
	background: #f8f8f8;
	left: 0px;
	position: fixed;
	right: 0px;
	top: 0px;
	z-index: 1;
}

.mobileMenu {
	color: #666;
}

main {
	padding-top: 60px;
}

.tableWrapper {
	overflow-x: auto;
}

table.general {width: 100%;}
table.general thead {border-top: 1px solid #eee;}
table.general tbody {background-color: #FAFAFA; border-top: 1px solid #EEE;}
table.general tbody tr {border-bottom: 1px solid #EEE;}
table.general tbody tr:hover {background-color: #FFF;}
table.general tfoot {background-color: #EEE; font-weight: bold;}
table.general th {background-color: #f4f4f4; color: #444; font-weight: bold; padding: 8px 12px;}
table.general td {color: #444; font-variant-numeric: tabular-nums; padding: 6px 12px; text-wrap:nowrap;}

table.sortable th {cursor: pointer;}
table.sortable th:hover {cursor: pointer;}
table.sortable th.index, table.sortable th.nosort {cursor: auto;}
table.sortable th.index:hover, table.sortable th.nosort:hover {cursor: auto;}
table.sortable .asc {background: #f4f4f4 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAYAAABCxiV9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMi8xOC8xNKNKAtAAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAKElEQVQImVWKsQ0AMAzCcP//2ZlSES8IDGoWQJXtr0Xnlz2cY5IjmgHdyQwLllQqugAAAABJRU5ErkJggg==") 2px center no-repeat;}
table.sortable .desc {background: #f4f4f4 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAYAAABCxiV9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMi8xOC8xNKNKAtAAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAKElEQVQImXWKQQoAMAyDTP7/Z3cajNLlJJoA8lnVbEFNL8wA0Cne4wGH5RL777QVqAAAAABJRU5ErkJggg==") 2px center no-repeat;}

::placeholder {
	color: #767676;
}

/* PLUS HEADER STYLES */

.headerFlex {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.userWrapper {
	position: relative;
}

.userButton {
	background: none;
	border: solid 1px rgba(0, 0, 0, 0);
	border-radius: 6px;
	display: flex;
	gap: 16px;
	padding: 6px 14px 6px 10px;
}

.userButton:hover {
	border: solid 1px rgba(0, 0, 0, 0.1);
}

.iconPerson {
	border: 2px solid #666;
	border-radius: 6px;
	height: 13px;
	padding: 0;
	position: relative;
	text-decoration: none;
	vertical-align: top;
	width: 13px;
}

.iconPerson::after {
	border-top: 2px solid #666;
	border-right: 2px solid #666;
	border-left: 2px solid #666;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	content: "";
	height: 6px;
	position: absolute;
	right: -5px;
	top: 13px;
	width: 14px;
}

/* PLUS BUTTON STYLES */

.btnStandard {	/* Applied to <a> and <button> tags */
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 100px;
	display: inline-block;
	font-weight: bold;
	min-height: 2.5rem;
	padding: 10px 18px;
	transition: background-color 0.3s ease;
}

.btnStandard:hover {
	background: #f0f0f0;
}

.btnStandard.btnSmall {
	padding: 2px 18px;
}

.btnStandard.btnOrange {
	background: #f98c1e;
	border: 0px;
	color: #fff;
}

.btnStandard.btnOrange:hover {
	background: #e07e1b;
}

.btnStandard.btnPDF {
	padding: 5px;
}

a.blue, button.blue {
	background: #1ba4e6;
	border: 1px solid #1ba4e6;
	border-radius: 4px;
	color: #FFF;
	display: inline-block;
	font-weight: bold;
	padding: 8px 16px;
}

a.blue:hover, button.blue:hover {
	background: #0990d3;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

a.turquoise, button.turquoise {
	background: #00C6BA;
	border: 1px solid #00C6BA;
	border-radius: 4px;
	color: #FFF;
	display: inline-block;
	font-weight: bold;
	padding: 10px 16px;
}

a.turquoise:hover, button.turquoise:hover {
	background: #00C6BA;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

a.cancel, button.cancel {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: #888;
}

a.cancel:hover, button.cancel:hover {
	background: #FFF;
}

/* PLUS SECTION STYLES */

.plusSection {
	margin-bottom: 16px;
}

.plusFlex {
	display: flex;
	gap: 12px;
}

/* PLUS DIALOG STYLES */

.plusDialogContainer {
	background-color: #FFF;
	border: 1px #999 solid;
	border-radius: 4px;
	margin: 60px auto 120px;
	max-width: 560px;
	padding: 16px 20px;
}

.plusDialogHeader {
	border-bottom: 1px #999 solid;
	padding-bottom: 14px;
}

.plusDialogContent {
	margin-top: 20px;
}

/* PLUS FORM STYLES */

.plusFormContainer {
	padding: 20px;
}

.plusFormContainer td {
	padding: 4px;
}

.plusFormContainer label {
	margin: 0px 6px;
}

.plusFormContainer hr {
	border: none;
	border-bottom: solid 1px #EEE;
	margin: 10px 0px;
}

.plusFormContainer .label {
	text-align: right;
}

/* PLUS SWITCH STYLES */

.switch {
	background-color: rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	display: inline-block;
	font-size: 0;	/* Hack to set space width to 0. */
}

.switch input {
	height: 0;
	opacity: 0;
	width: 0;
}

.switch label {
	border: 1px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	display: inline-block;
	font-size: 0.75rem;
	font-weight: bold;
	margin: 0px;
	outline: 1px solid transparent;
	padding: 6px 16px;
}

.switch input:checked + label {
	background-color: #ffffff;
	box-shadow: 1px 1px 8px rgb(68 68 68 / 30%);
}

.switch input:disabled + label {
	color: #888;
	cursor: not-allowed;
}

.switch.blue  input:checked + label {
	border: 1px solid #35c0ec;
	outline: 1px solid #35c0ec;
}

.switch.orange  input:checked + label {
	border: 1px solid #ffbc05;
	outline: 1px solid #ffbc05;
}

/* PLUS LOGIN / REGISTER STYLES */

.plusContainer {
	margin: 48px auto 200px;
	max-width:372px;
}

.plusContainer h1 {
	color: #DD7903;
	font-size: 1.5rem;	/* 24px */
	margin-bottom: 1em;
	text-align: center;
}

.plusContainer .box {
	border-radius: 4px;
	padding: 12px;
}

.plusContainer label {
	color: #986401;
	margin-right: 8px;
}

.plusContainer input[type="text"], .plusContainer input[type="password"], .plusContainer select {
	border: solid 1px #e1ac3a;
	margin: 2px 0px;
	padding: 8px 10px;
	width: 100%;
}

.plusContainer input[type="text"]:focus, .plusContainer input[type="password"]:focus, .plusContainer select:focus {
	border: solid 1px #e1ac3a;
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
	outline: none;
}

.plusContainer input[type="checkbox"] {
	position: relative;
	top: 2px;
}

.plusContainer p {
	color: #744C01;
	text-align: center;
}

.plusContainer select {
	margin: 4px 0px;
	width: 80%;
}

/* PLUS GAMEPLAY CONTAINER STYlES */

.plusGameplayContainer {
	height: 512px;
	margin: 0px auto;
	width: 887px;
}



@media screen and (max-width: 760px) {
	header {
		background: #f8f8f8;
		border-bottom: 1px solid #ff9933;
	}

	.logo {
		background: url("//static.arcademics.com/images/sprites/main-20241113.png") 0px 0px;
	}
	
	.userButton .userName {
		display: none;	
	}
	
	footer {
		padding-bottom: 76px;
	}
}