a {
	color: #673ab7;
}

body {
	font-family: 'Source Sans Pro', sans-serif;
	background: #eee;
	color: #111;
	font-size: 20px;
}

h1, h2, h3, h4, h5 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
}

header {
	background: #7e56c1;
	height: 65px;
	width: 100%;
	position: fixed;
	box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
	z-index: 4;
}

header h1 {
	display: inline;
	color: #fff;
	font-size: 1.6em;
	position: relative;
	top: -3px;
}

input[type='radio'] {
	accent-color: #673ab7;
}

input[type='file'] {
	background: none !important;
}

textarea {
	width: 100%;
	min-height: 4em;
}

hr {
	border: 1px solid #d2d2d2;
}

.btn {
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
	padding: .4em .7em;
	text-transform: uppercase;
}

.btn-low {
	background: transparent;
	border: none;
	color: #673ab7;
}

.btn-med {
	background: transparent;
	border: 1px solid #d2d2d2;
	color: #673ab7;
}

.btn-low:hover, .btn-low:focus, .btn-med:hover, .btn-med:focus {
	background: rgba(126, 86, 193, .15);
}

.btn-high {
	background-color: #673ab7;
	border: none;
	color: #fff !important;
}

.btn-high:hover {
	background: #5d34a8;
}

.menu-btn {
	font-size: 2em;
	position: relative;
	margin: .2em;
	background: transparent;
	color: #fff;
	height: 50px;
	width: 50px;
	border: none;
	z-index: 5;
	border-radius: 30px;
	outline: none;
	cursor: pointer;
	transition: .1s;
}

.menu-btn:hover {
	background: rgba(77,43,144,.3);
}

#outside-menu {
	width: 0;
	height: 0;
	position: fixed;
	z-index: 2;
}

#menu {
	width: 15em;
	display: block;
	position: fixed;
	margin-left: -16em;
	top: 65px;
	bottom: 0;
	padding: 0 0 1em;
	background: #eee;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
	transition: .2s ease-out;
	z-index: 3;
	overflow-y: auto;
}

#menu a, #menu p, #menu label, button.menu-item {
	background-color: transparent;
	color: #111;
	text-decoration: none;
	display: list-item;
	list-style-type: none;
	margin: .3em;
	padding: .3em;
}

#menu label {
	max-height: 23px;
	cursor: pointer;
	user-select: none;
}

#menu p {
	padding-bottom: 0;
}

#menu a, #game-filter-settings label.option-name, button.menu-item {
	border-radius: 4px;
}

#menu a:hover, #game-filter-settings label.option-name:hover, button.menu-item:hover {
	background: rgba(0, 0, 0, .04);
}

button.menu-item {
	border: none;
	cursor: pointer;
	text-align: left;
	width: 96%;
}

.menu-section {
	margin: .4em .8em;
	border-bottom: 1px solid #d2d2d2;
	padding-bottom: .2em;
	overflow: hidden;
	transition: .2s;
}

.menu-section.collapsed .game-parent, .menu-section.collapsed .game-parent button, .menu-section.collapsed .game-parent label {
	z-index: -1;
}

.section-heading {
	font-size: 14px;
	font-weight: normal;
	color: #555;
	margin: .7em .95em 0;
}

.section-toggle-arrow {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	background: transparent;
	border-top: none;
	border-left: none;
	border-right: 2px solid #aaa;
	border-bottom: 2px solid #aaa;
	outline: none;
	cursor: pointer;
	float: right;
	transition: .2s;
	z-index: 4;
}

.section-heading + .section-toggle-arrow {
	top: -10px;
	right: 10px;
	background: transparent;
	transform: rotate(225deg);
}

.section-heading + .section-toggle-arrow + label {
	position: absolute;
	margin: -1.5em 0 0 0 !important;
	padding: .5em !important;
	width: 85%;
	height: 23px;
	z-index: 4;
}

.menu-icon {
	height: 1em;
	margin-right: .5em;
	vertical-align: bottom;
}

.game-parent {
	margin-bottom: 0 !important;
}

.game-parent .section-toggle-arrow {
	top: 5px;
	transform: rotate(45deg);
}

.game-parent .section-toggle-arrow + label {
	position: absolute;
	margin: -1.65em 0 0 1.1em !important;
	width: 73%;
	height: 23px;
	z-index: 4;
}

#game-filter-settings input {
	margin-right: 5px;
	display: none;
}

#game-filter-settings input + .option-name::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: transparent;
	position: relative;
	top: 3px;
	left: -3px;
	margin: 0 !important;
	border-radius: 3px;
	border: 1px solid #777;
	transition: .2s;
	cursor: pointer;
}

#game-filter-settings input + .option-name::after {
	border-radius: 3px;
	background: transparent;
	color: #fff;
	display: block;
	position: relative;
	top: -18px;
	font-size: 15px;
	transition: .2s;
	cursor: pointer;
	visibility: hidden;
}

#game-filter-settings input:checked + .option-name::before, #game-filter-settings input:indeterminate + .option-name::before {
	background-color: #7e57c2;
	border-color: #7e57c2;
}

#game-filter-settings input:checked + .option-name::after {
	content: "✓";
	visibility: visible;
}

#game-filter-settings input:indeterminate + .option-name::after {
	content: "—";
	font-weight: bold;
	top: -20px;
	visibility: visible;
}

#game-filter-settings[style="height: 36px;"] label:nth-of-type(2) {
	margin-top: 1em;
	transition-delay: .2s;
}

#game-filter-settings.collapsed .option-name {
	display: none;
}

.game-children {
	width: 90%;
	margin-left: 9%;
	height: 0;
	overflow: hidden;
	transition: .2s;
}

#filter-search-box {
	border-radius: 3px;
	border: none;
	position: relative;
	width: 25%;
	top: 12px;
	right: .6em;
	float: right;
	outline: none;
	padding: .5em;
	box-shadow: 0 1px 9px 1px rgba(0,0,0,.3);
	transition: .3s;
}

#filter-search-box:focus {
	box-shadow: 0 1px 9px 2px rgba(0,0,0,.5);
}

#filter-search-open {
	float: right;
	display: none;
	margin: .2em;
}

#current-local {
	margin: auto;
	text-align: center;
	padding-top: 80px;
}

#current-local h2 {
	margin: 0;
}

#current-local p {
	margin-block-start: .2em;
	margin-block-end: .2em;
}

#current-local-time {
	font-size: 2em;
}

#results-container {
	padding-top: 1em;
	width:97%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.game-container {
	margin: auto;
	padding: 1em 1em 2.7em;
	margin: .5em;
	width: 25%;
	background: #f8f8f8;
	box-shadow: 0 2px 7px 0 rgba(0,0,0,0.4);
	text-align: initial;
	border-radius: 4px;
	position: relative;
}

.game-header, .game-times {
	display: table;
	width: 100%;
}

.game-header h3 {
	display: table-cell;
	font-size: 1.4em;
	padding-right: .3em;
}

.game-header h4 {
	display: table-cell;
	text-align: right;
	color: #555;
	font-size: 18px;
}

.game-icon {
	display: table-cell;
	width: 40px;
	vertical-align: top;
	padding-right: 6px;
}

.game-icon img {
	width: 35px;
	border-radius: 6px;
}

.game-times p:nth-of-type(odd) {
	font-weight: bold;
	margin-block-end: 5px;
}

.game-times p:nth-of-type(even) {
	margin-block-start: 5px;
	margin-block-end: 0;
}

.game-times div {
	width: 49%;
	display: table-cell;
}

.local-times {
	padding-right: .3em;
}

.server-times {
	padding-left: .3em;
}

.option-name {
	width: 91%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.game-parent span {
	width: 85%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
}

.game-parent::before {
	top: -1px !important;
}

.game-parent::after {
	top: -22px !important;
}

#game-filter-settings input:indeterminate + .game-parent::after {
	top: -24px !important;
}

#main-settings .option-name {
	overflow: visible;
	max-height: 46px;
	white-space: normal;
}

#main-settings span {
	width: 80%;
	display: inline-block;
}

.switch {
	position: relative;
	width: 38px;
	height: 18px;
	padding: 0 !important;
	top: 2px;
	float: right;
	margin: 0 !important;
}

.switch input {
	display: none;
}

.slider {
	width: 100% !important;
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #999;
	border-radius: 14px;
	transition: .2s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 24px;
	width: 24px;
	left: -6px;
	bottom: -3px;
	background-color: #fff;
	border-radius: 50%;
	transition: .2s;
	box-shadow: 0 0 5px 1px rgba(0,0,0,.2);
}

input:checked + .slider {
	background-color: #4d2b90;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
	background-color: #b084f4;
}

.game-container .buttons {
	position: absolute;
	bottom: 0;
	margin-bottom: .6em;
}

.buttons .btn:not(:first-of-type) {
	margin-left: .5em;
}

.buttons .btn-med {
	padding: .2em .5em;
}

#dialog-holder-bg {
	background: rgba(0, 0, 0, .7);
	position: fixed;
	display: none;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.dialog {
	background: #eee;
	border-radius: 4px;
	box-shadow: 0 0 20px 10px rgba(0,0,0,0.2);
	margin-top: 100px;
	max-height: calc(93vh - 65px);
	overflow-y: auto;
	padding: 1.5em;
}

.dialog h2 {
	font-size: 1.4em;
	margin-block-start: 0;
}

.dialog input[type="text"], .dialog input[type="time"], .dialog select, .dialog textarea {
	border: 1px solid #999;
	border-radius: 3px;
	padding: .2em;
}

.dialog input[type="text"]:focus, .dialog input[type="time"]:focus, .dialog select:focus, .dialog textarea:focus {
	outline: none;
	border: 2px solid #673ab7
}

form label, form span {
	display: inline-block;
	font-size: 22px;
	margin-bottom: .3em;
}

.form-close-btn {
	background-color: transparent;
	border: none;
	border-radius: 30px;
	color: #757575;
	cursor: pointer;
	float: right;
	font-size: 28px;
	margin: -.4em -.3em;
	padding: .2em;
	height: 40px;
	width: 40px;
}

.form-close-btn:hover {
	background: rgba(126, 86, 193, .15);
}

.form-info {
	color: #333;
}

.form-info p:first-child {
	margin-block-start: 0;
}

.form-section {
	margin-bottom: 1.5em;
}

.dialog-btns {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.dialog-btns button {
	margin: 1em 0 0 1em;
}

.more-info-btn {
	font-size: 16px;
	padding: 0.3em 0.5em;
}

#dupe-notif-table th, #dupe-notif-table td {
	padding-right: 1em;
}

@media (max-width: 1500px) {
	.game-container {
		width: 30%;
	}
}

@media (max-width: 1200px) {
	.game-container {
		width: 40%;
	}

	#filter-search-box:focus {
		width: 40%;
	}
}

@media (max-width: 768px) {
	.game-container {
		width: 90%;
	}

	#filter-search-open {
		display: block;
	}

	#filter-search-box {
		width: 0%;
		display: none;
	}

	#filter-search-box:focus {
		width: 85%;
	}

	#filter-search-box:focus + h1 {
		display: none;
	}

	#filter-search-box:focus + #filter-search-open {
		display: none;
	}
} 

@media (max-width: 620px) {
	#filter-search-box:focus {
		width: 78%;
	}

	header h1 {
		font-size: 1.2em;
		top: -6px;
	}

	.dialog-btns button {
		width: 100%;
		margin-left: 0;
	}

	form {
		margin-top: 63px !important;
		width: 100%;
	}

	#add-custom-form input[type="text"], #add-custom-form select {
		width: 100%;
	}
}

@media (max-width: 360px) {
	header h1 {
		font-size: 1em;
	}

	#filter-search-box:focus {
		width: 75%;
	}
}

@media (min-width: 380px) {
	.menu-btn {
		margin: .2em .6em .2em .2em;
	}
}

.dark {
	background: #111;
	color: #eee;
}

.dark ::-webkit-scrollbar, .dark::-webkit-scrollbar {
	background: #1d1d1d;
}

.dark ::-webkit-scrollbar-track, .dark::-webkit-scrollbar-track {
	background: #1d1d1d;
}

.dark ::-webkit-scrollbar-thumb, .dark::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.07);
}

.dark ::-webkit-scrollbar-thumb:hover, .dark::-webkit-scrollbar-thumb:hover {
	background:rgba(255,255,255,0.1);
}

.dark ::-webkit-scrollbar-thumb:active, .dark::-webkit-scrollbar-thumb:active {
	background:rgba(126,86,193,0.3);
}

.dark ::-webkit-scrollbar-corner {
	background-color:#323232;
}

.dark a {
	color: #9575cd;
}

.dark header {
	background: #322646;
}

.dark #menu {
	background: #242424;
}

.dark #menu a, .dark #menu p, .dark #menu label, .dark button.menu-item {
	color: #eee;
}

.dark #menu a:hover, .dark #game-filter-settings label.option-name:hover, .dark button.menu-item:hover {
	background: rgba(255, 255, 255, .04);
}

.dark .section-toggle-arrow {
	border-color: #686868;
}

.dark .menu-section {
	border-color: #404040;
}

.dark .section-heading {
	color: #aaa;
}

.dark .game-container {
	background: #1d1d1d;
}

.dark .game-header h4 {
	color: #aaa;
}

.dark .btn {
	color: #9575cd;
}

.dark .btn-med {
	border-color: #404040;
}

.dark .dialog {
	background: #242424;
}

.dark input, .dark select, .dark textarea {
	background: #2c2c2c;
	color: #eee;
}

.dark input[type="time"]::-webkit-calendar-picker-indicator{
	filter: invert(90%);
}

.dark .form-info {
	color: #ccc;
}

.dark .red-text {
    color: #ff4646;
}

.dark hr {
	border-color: #404040;
}

.compact .server-times {
	display: none;
}

.compact .local-times {
	display: grid;
	width: 100%;
	grid-template-columns: 50% 50%;
	padding-right: 0;
}

.compact .local-times p {
	margin-block-start: .5em;
	margin-block-end: .2em;
}

.compact .local-times p:nth-of-type(even) {
	grid-row-start: 2;
	margin: 0;
}

.hide-buttons-hidden .game-container {
	padding: 1em;
}

.hide-buttons-hidden .game-container .buttons {
	display: none;
}

.hidden {
	display: none;
}

.red-text {
	color: #d90000;
}