/*
-------------------------------------------------------
    Variables
-------------------------------------------------------
*/

:root {

	/* page background */
	--pagebg: #000000;
	/* page header text */
	--pageheader: #ffffff;

	/* content background */
	--color10: #ffffff;

	/* light border */
	--color11: #dddddd;

	/* dark border, clicked button */
	--color12: #777777;

	/* row hover  */
	--color14: #eeeeee;

	/* yes */
	--color15: #faf8e4;

	/* yes highlight */
	--color16: #ebe8cf;

	/* main text */
	--fontcolor01: #3C4043;

	/* tab text, header text */
	--fontcolor02: #ffffff;

	/* link text */
	--fontcolor04: #e21313;

	--fontfamily01: Helvetica, Arial, sans-serif;

	--fontsize01: 1.1
	+---------------rem;
	--fontsize02: 1.2rem;

	--shadow01: 0px 0px 15px rgba(0, 0, 0, 0.2);
	--shadow02: 5px 5px 10px rgba(0, 0, 0, 0.2);

	--transition01: 200ms;

	--col01: calc(1/12*100%);
	--col02: calc(2/12*100%);
	--col03: calc(3/12*100%);
	--col04: calc(4/12*100%);
	--col05: calc(5/12*100%);
	--col06: calc(6/12*100%);
	--col07: calc(7/12*100%);
	--col08: calc(8/12*100%);
	--col09: calc(9/12*100%);
	--col10: calc(10/12*100%);
	--col11: calc(11/12*100%);
	--col12: calc(12/12*100%);
}

/*
-------------------------------------------------------
    Global
-------------------------------------------------------
*/
* {
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*
-------------------------------------------------------
    Basic Tags
-------------------------------------------------------
*/

html {
	font-size: 100%;
	/* make scrollbar always visible to prevent page layout jumping */
	overflow-y: scroll;
}

body {
	background-color: var(--pagebg);
	color: var(--fontcolor01);
	font-family: var(--fontfamily01);
	font-size: var(--fontsize01);
	line-height: 20px;
}

h1 {
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 0 15px;
	color: var(--pageheader);
	font-family: 'Marcellus', Georgia, serif;
	font-size: calc(1.3rem + 1vw);
	font-weight: normal;
	line-height: 150%;
}

h2 {
	margin-top: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	font-size: var(--fontsize01);
	font-weight: normal;
}

h3 {
	width: 100%;
	margin: 0;
	border-radius: 5px;
	background-color: var(--color01);
	padding: 10px 15px;
	color: var(--color02);
	font-size: var(--fontsize02);
	font-weight: normal;
	box-shadow: var(--shadow01);
}

h4 {
	font-size: var(--fontsize01);
	font-weight: bold;
}

h5 {
	font-family: 'Marcellus', Georgia, serif;
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.25;
	margin-bottom: 1rem;
}

h5:last-child
{
	margin-bottom: 0;
}

p {
	line-height: 1.5;
	margin-bottom: 10px;
	;
}

a,
a:link,
a:hover,
a:active,
a:visited
{
	color: var(--fontcolor04);
	text-decoration: none;
	cursor: pointer;
}

li
{
	margin-left: 20px;
}

table
{
	width: 100%;
	border-collapse: collapse;
}

td
{
	padding: 5px;
	border: 1px solid #cccccc;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	body {
		overflow-x: initial;
	}

	h1 {
		padding: 0;
	}

	h3 {
		padding: 15px;
	}

	h4 {
		font-size: var(--fontsize01);
	}

	table
	{
		width: 400px;
	};
}

/*
-------------------------------------------------------
    Basic Layout
-------------------------------------------------------
*/

#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#topline {
	xposition: -webkit-sticky;
	/* Old Safari */
	xposition: sticky;
	top: 0px;
	box-shadow: var(--shadow01);
	xmin-height: 150px;
	background-color: var(--color01);
	color: var(--color02);
	transition: all var(--transition01);
	z-index: 1000;
}

#logo {
	xposition: absolute;
	top: 10px;
	left: 15px;
	font-family: 'Marcellus', serif;
	font-size: 1.5rem;
	cursor: pointer;
}

#mainmenu {
	position: relative;
}

#header {
	display:none;
	position: relative;
	background-color: var(--pagebg);
	min-width: 100%;
	margin: auto;
}

#header>div {
	padding: 0 15px 5px 15px;
}

#header h1 {
	flex: 1;
	flex-basis: 90%;
	max-width: 90%;
}

#facebook {
	display: flex;
	position: absolute;
	top: 0;
	right: 10px;
	height: 100%;
	width: 30px;
	justify-content: center;
	align-items: center;
}

#facebook img {
	transition: all 500ms;
}

#facebook img:hover {
	transform:scale(120%);
}

#mainframe {
	min-height: 500px;
	background-color: var(--color10);
	padding: 10px 0;
}

#mainframe>p {
	margin: 0 15px;
}

#mainframe>p:first-child {
	margin-top: 10px;
}

#pageframe {
	background-color: var(--color10);
	padding: 20px;
}

#subframe {
	clear: both;
	min-height: 400px;
	background-color: var(--color10);
	padding: 10px 0;
}

#subframe>p {
	margin: auto 15px;
}

#flexframe {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 15px;
	background-color: #eeeeee;
}

#body {
	flex: 1;
	min-width: 100%;
	margin: auto;
}

#footer {
	min-width: 100%;
	background-color: var(--color01);
	padding: 10px 10px 15px 10px;
	color: var(--color02);
	text-align: center;
}

#footer a {
	margin-left: 10px;
}

#footer a:link,
#footer a:active,
#footer a:visited {
	color: var(--color02);
}

.copyright {
	margin-top: 3px;
	font-size: 0.8rem;
}

#wideindicator {
	display: none;
}

.img-fluid {
	max-width: 100%;
	height: auto;
}

.hide {
	display: none;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	#page {
		padding: 0 20px;
	}

	#topline {
		min-width: 100%;
		margin-left: -20px;
		margin-right: -20px;
		padding: 0 20px;
	}

	#logo {
		top: 15px;
		left: 0px;
		font-size: 2rem;
		;
	}

	#header {
		display:block;
		margin: auto;
		width: 100%;
		min-width: auto;
		max-width: 1140px;
	}

	#header>div {
		padding: 0 0 5px 0;
	}

	#facebook {
		right: 0px;
	}

	#body {
		width: 100%;
		min-width: auto;
		max-width: 1140px;
	}

	#mainframe {
		clear: both;
		box-shadow: var(--shadow01);
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		padding: 20px 20px 25px 20px;
	}

	#mainframe.nomenu {
		border-radius: 5px;
	}

	#pageframe {
		border-radius: 5px;
	}

	#subframe {
		box-shadow: var(--shadow01);
		border-radius: 5px;
		padding: 20px 20px 25px 20px;
	}

	#subframe>p {
		margin: auto;
	}

	#flexframe {
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		padding: 10px;
		background-color: #eeeeee;
	}

	#footer {
		position: relative;
		margin-top: 30px;
		margin-left: -20px;
		margin-right: -20px;
		padding: 15px 20px;
		text-align: right;
	}

	#footer>div {
		margin: auto;
		width: 100%;
		min-width: auto;
		max-width: 1140px;
	}

	.copyright {
		margin-top: 10px;
	}

	#wideindicator {
		display: inline-block;
		position: absolute;
		bottom: 0;
		left: 0;
		content: '';
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	.text {
		padding: 0 10px;
	}
}

/*
-------------------------------------------------------
    box
-------------------------------------------------------
*/

.box,
.bigbox {
	display: flex;
	flex-basis: 100%;
	min-width: 100%;
	padding-bottom: 20px;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.box {
		flex-basis: 50%;
		min-width: 50%;
		padding: 10px;
	}

	.bigbox {
		flex-basis: 100%;
		min-width: 100%;
		padding: 10px;
	}
}

/*
-------------------------------------------------------
    Panel
-------------------------------------------------------
*/

.panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-shadow: var(--shadow01);
	border-radius: 5px;
}

.panel:first-child {
	margin-top: 0;
}

.panelheader {
	background-color: var(--color01);
	padding: 10px 15px;
	color: var(--color02);
	border-radius: 5px 5px 0 0;
}

.panelrow {
	flex: 1;
	border-top: 1px solid var(--color11);
	background-color: var(--color10);
	padding: 20px;
	transition: background-color 300ms;
}

.panelrow:first-child {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.panelrow:last-of-type {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.panelrow:not(.nohover):hover {
	xbackground-color: var(--color14);
}

.helpindex {
	display: flex;
	flex-direction: row;
	position: relative;
	padding-top: 20px;
	cursor: pointer;
}

.helpindex:hover {
	color: var(--fontcolor04);
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.panel {
		box-shadow: var(--shadow01);
		border-radius: 5px;
		margin-top: 20px;
	}

	.panelheader {
		border-radius: 5px 5px 0 0;
		padding: 15px;
		font-size: var(--fontsize02);
	}

	.panelrow:first-child {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.panelrow:last-of-type {
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}

}

/*
-------------------------------------------------------
    Member Banner
-------------------------------------------------------
*/
#memberbanner {
	position: relative;
	margin: auto;
	min-width: 100%;
	padding: 10px 0px;
}

#membername {
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 10px 28px 10px 15px;
	white-space: nowrap;
	transition: all var(--transition01);
}

#membername:hover {
	background-color: var(--color03);
	color: var(--color04);
	cursor: pointer;
}

#membername.active {
	border-radius: 0px;
	background-color: var(--color03);
	color: var(--color04);
}

#membername.disabled:hover {
	box-shadow: 0 0 0;
	background-color: transparent;
	cursor: default;
	color: white;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	#memberbanner {
		position: relative;
		left: 0;
		min-width: auto;
		max-width: 1140px;
		margin: auto;
		padding: 15px 0px;
	}

	#memberbanner.memberbannernumbers {
		xposition: sticky;
		/* Old Safari */
		position: -webkit-sticky;
		margin: unset;
		padding: 15px 0px;
	}

	#membernamenumbers {
		position: absolute;
		right: 0px;
		top: 0px;
	}

	#membername {
		position: absolute;
		right: 0px;
		top: 0px;
		padding: 15px 28px 15px 15px;
	}

	#membername.membernamenumbers {
		position: absolute;
		right: 0px;
		top: 0px;
	}

	#memberbanner.memberbannerwide>#membername {
		right: 20px;
	}
}

/*
-------------------------------------------------------
    Member Menu
-------------------------------------------------------
*/

#membermenu {
	z-index: 1000;
	display: none;
	position: absolute;
	right: 0px;
	top: 40px;
	width: 250px;
	z-index: 1000;
}

#membermenu.membermenunumbers {
	right: 0px;
}

#memberbanner.memberbannerwide>#membermenu {
	right: 20px;
}

#membermenu table {
	width: 100%;
	border-collapse: collapse;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	box-shadow: var(--shadow01);
}

/*
#membermenu-title {
	margin-right: 7px;
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 5px 30px 5px 10px;
	cursor: pointer;
	color: white;
}
*/

.membermenu-option {
	margin: 0;
	background-color: var(--color10);
	padding: 10px;
	color: var(--fontcolor01);
	cursor: pointer;
	white-space: nowrap;
}

#membermenu tr:last-child .membermenu-option {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.membermenu-option:hover {
	background-color: var(--color01);
	color: var(--color02);
}

.additionaluser {
	border-top: 1px solid var(--color11);
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	#membermenu {
		top: 50px;
		right: 0px;
	}

	#membermenuwide {
		right: 0px;
	}
}

/*
-------------------------------------------------------
    Menu
-------------------------------------------------------
*/
.menu {
	display: none;
	width: 100%;
	position: relative;
}

.menu ul {
	list-style: none;
}

.menu li {
	display: none;
	width: 100%;
	margin-left: 0;
}

.menu li.currenttab {
	display: inline-block;
}

.menu li a {
	display: inline-block;
	width: 100%;
	border-right: 1px solid black;
	background-color: var(--color03);
	padding: 10px 15px;
	color: var(--color04);
	font-weight: bold;
	text-decoration: none;
	transition: background-color var(--transition01);
}

.menu li:last-child a {
	border-bottom: 0;
}

.menu li a:hover {
	background-color: var(--color01);
}

.menu li.currenttab a,
.menu li.currenttab a:hover {
	display: inline-block;
	background-color: var(--color01);
	cursor: default;
	color: var(--color02);
}

#tabsindicator {
	display: none;
}

.help {
	position: absolute;
	right: 50px;
	top: 6px;
	color: var(--color02);
	font-size: 1.3rem;
	font-style: italic;
	font-weight: bold;
	font-family: "times new roman";
	border: 2px solid var(--color02);
	padding: 2px 10px;
	border-radius: 5px;
	cursor: pointer;
	transition: all var(--transition01);
}

.help:hover {
	background-color: var(--color03);
	color: var(--color04);
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.menu {
		display: flex;
		background-color: var(--color03);
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.menu li:not(.currenttab) {
		display: block;
	}

	.menu li {
		float: left;
		width: unset;
	}

	.menu li a {
		width: unset;
		border-bottom: 0;
		padding: 15px 25px;
		font-size: var(--fontsize02);
		font-weight: normal;
	}

	.menu li:first-child a {
		border-top-left-radius: 5px;
	}

	#tabsindicator {
		display: block;
		content: '';
		width: 0px;
		height: 0px;
		overflow: hidden;
	}

	.help {
		right: 10px;
		top: 10px;
		color: var(--color04);
		border-color: var(--color04);
	}

	.help:hover {
		background-color: var(--color01);
		color: var(--color02);
	}
}

/*
-------------------------------------------------------
    Menu 2
-------------------------------------------------------
*/
.menu2 {
	display: flex;
	width: auto;
	margin-top: -10px;
	margin-bottom: 10px;
	position: relative;
	background-color: var(--color03);
}

.menu2 ul {
	list-style: none;
	width: 100%;
}

.menu2 li {
	display: block;
	float: left;
	width: 33.333333%;
}

.menu2 li:first-child {
	border-left: 0;
}

.menu2 li a {
	display: inline-block;
	width: 100%;
	border-right: 1px solid black;
	background-color: var(--color03);
	padding: 10px 15px;
	color: var(--color04);
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: all var(--transition01);
}

.menu2 li:last-child a {
	border-right: none;
}

.menu2 li a:hover {
	background-color: var(--color01);
}

.menu2 li.currenttab a,
.menu2 li.currenttab a:hover {
	display: inline-block;
	background-color: var(--color01);
	cursor: default;
	color: var(--color02);
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.menu2 {
		display: flex;
		width: auto;
		margin: -20px -20px 20px -20px;
		background-color: var(--color03);
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.menu2 li:not(.currenttab) {
		display: block;
	}

	.menu2 li {
		float: left;
		min-width: unset;
		width: unset;
		border-left: 0;
	}

	.menu2 li a {
		width: none;
		border-bottom: 0;
		padding: 15px 25px;
		font-size: var(--fontsize02);
		font-weight: normal;
		text-align: center;
	}

	.menu2 li:first-child a {
		border-top-left-radius: 5px;
	}

	.menu2 li:last-child a {
		border-right: 1px solid black;
	}
}

/*
-------------------------------------------------------
    Mobile menu
-------------------------------------------------------
*/


#mobilemenu {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 50%;
	background-color: rgba(0, 0, 0, 0.85);
	z-index: 10020;
	transform: translateX(100%);
	transition: all 300ms;
	padding-top: 270px;
}

#mobilemenu ul {
	width: 100%;
	list-style: none;
}

#mobilemenu li {
	width: 100%;
}

#mobilemenu li a:hover {
	background-color: var(--color01);
}

#mobilemenu li a {
	display: inline-block;
	color: var(--fontcolor02);
	text-decoration: none;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	padding: 15px 20px;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	#mobilemenu {
		display: none;
	}
}

/*
-------------------------------------------------------
    Mobile title
-------------------------------------------------------
*/

#mobiletitle {
	position: relative;
	background-color: var(--color03);
	color: var(--color04);
	xfont-weight: bold;
	padding: 10px 0px 10px 15px;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	#mobiletitle {
		display: none;
	}
}

/*
-------------------------------------------------------
    Buttons
-------------------------------------------------------
*/
.button {
	display: block;
	min-width: 100px;
	border-radius: 20px;
	background-color: var(--color03);
	padding: 7px 20px;
	font-weight: normal;
	color: var(--color04);
	text-align: center;
	text-decoration: none !important;
	transition: all var(--transition01);
}

.button:not(.disabled):hover {
	background-color: var(--color01);
	color: var(--color02);
	cursor: pointer;
}

.button.clicked {
	background-color: var(--color12);

}

.hidden {
	height: 0;
	width: 0;
	background-color: transparent;
	color: transparent;
	border: transparent;
}

.printerfriendly {
	float: right;
	margin-top: 15px;
}

.info {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 0;
	box-shadow: var(--shadow01);
	border: 2px solid white;
	padding: 2px 10px;
	font-family: Georgia;
	font-style: italic;
}

.icon {
	min-width: 0;
	border-radius: 5px;
	padding: 4px 6px 2px;
}

.plus {
	padding: 5px 5px;
	font-size: 1.7rem;
}

.adminbutton {
	clear: both;
	float: right;
	margin: 5px 5px 10px;
}

.helpbutton {
	margin-right: auto;
}

.dancebutton,
.documentbutton {
	float: left;
	margin-top: 0px !important;
	margin-right: 5px !important;
	border-radius: 5px;
	padding: 7px 10px;
	min-width: 0;
}

.left {
	float: left;
	margin-right: 10px;
}

.right {
	float: right;
	margin-left: 10px;
}

.checked {
	background-color: var(--color01);
}

.button.disabled {
	background-color: #bbbbbb;
	cursor: default;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.adminbutton {
		margin: 0 0 20px 0;
	}

	.dancebutton {
		margin-top: 7px !important;
	}

	.info {
		right: -17px;
	}
}

/*
-------------------------------------------------------
    Dialog Box
-------------------------------------------------------
*/

#modal {
	display: none;
	z-index: 10010;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
}

#dialogbox {
	display: none;
	z-index: 10020;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 90%;
	background-color: var(--color10);
	box-shadow: var(--shadow01);
	border-radius: 5px;
	padding: 15px;
}

#dialogbox .button {
	margin-bottom: 0;
}

.dialogboxdetails {
	padding: 20px 5px;
}

@media (min-width: 700px) {
	#dialogbox {
		max-width: 600px;
		min-width: 600px;
	}
}

/*
-------------------------------------------------------
    Form
-------------------------------------------------------
*/
.form {
	width: 100%;
	margin-top: 10px;
}

#subframe>.form {
	padding: 0 15px;
}

.formrow {
	display: flex;
	flex-direction: column;
}

.label,
.input,
.errormessage {
	flex: 1;
	padding: 5px 0;
}

.label {
	padding-top: 10px;
	xwhite-space: nowrap;
}

.emptylabel {
	display: none;
}

#formtable .button {
	margin-top: 20px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type='file'],
input[type='number'],
textarea {
	width: 100%;
	outline: none;
	border: 1px solid var(--color12);
	xborder: none;
	border-radius: 5px;
	padding: 10px;
	xbackground-color: var(--color11);
	font-size: var(--fontsize01);
	color: red;
}

textarea {
	line-height: 1.5;
	font-family: var(--fontfamily01);
}

input[type="radio"] {
	margin-right: 10px;
}

input[type="checkbox"] {
	margin-right: 10px;
}

.errormessage {
	color: red;
	font-weight: bold;
	width: 100%;
	text-align: right;
	margin-top: 10px;
}

.buttons {
	display: flex;
	justify-content: right;
}

.buttons .button {
	float: left;
	margin: 20px 0 15px 10px;
}

.mandatory {
	font-weight: bold;
}

.disabled {
	color: #bbbbbb;
}

#formsubmit {
	display: none;
	z-index: 10010;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.1);
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	#subframe>.form {
		padding: 0;
	}

	.onerow {
		flex-direction: row;
	}

	.onerow .label {
		flex-basis: var(--col03);
		max-width: var(--col03);
		padding-top: 20px;
	}

	.onerow .input input[type="checkbox"] {
		margin-top: 20px;
	}
}

/*
-------------------------------------------------------
    Tables
-------------------------------------------------------
*/

.table td {
	padding: 5px 10px 0px 0;
	vertical-align: top;
}

.helptable,
.listtable {
	border-collapse: collapse;
}

.helptable tr:first-child,
.listtable tr:first-child {
	background-color: var(--color03);
	color: var(--color04);
}

.helptable td,
.listtable td {
	border-bottom: 1px solid #cccccc;
	padding: 10px 20px 10px 20px;
	vertical-align: top;
	;
}

.listtable td {
	text-align: center;
}

.helptable tr:first-child td .listtable tr:first-child td {
	border-bottom: 0;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.helptable td:first-child {
		white-space: nowrap;
	}
}

/*
-------------------------------------------------------
    Events
-------------------------------------------------------
*/

#submenu {
	clear: both;
}

.eventrow {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 10px;
	cursor: pointer;
}

.eventrow>div {
	flex: 1;
	padding: 0 5px;
}

.event-status {
	display: flex;
	position: absolute !important;
	top: 0px;
	right: 0px;
	height: 100%;
	width: 30px;
	justify-content: center;
	align-items: center;
}

.event-status.accepted {
	background-color: var(--color01);
	color: var(--color02);
}

.event-status.undecided {
	background-color: var(--color03);
	color: var(--color04);
}

.event-status.declined {
	border-left: 1px solid var(--color01);
	background-color: var(--color10);
	color: var(--fontcolor01);
}

.editevent {
	margin-top: 5px;
	border-radius: 5px;
}

.deleteevent {
	margin-top: -5px;
	margin-right: 22px;
	margin-left: 5px;
	border-radius: 5px;
}

.eventbutton {
	float: right;
	margin-top: 20px;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.eventrow {
		flex-direction: row;
	}

	.eventrow:last-child .event-status {
		border-bottom-right-radius: 5px;
	}

	.event-details {
		order: 2;
		flex-basis: var(--col08);
		min-width: var(--col08);
	}

	.event-date {
		order: 1;
		flex-basis: var(--col04);
		min-width: var(--col04);
	}
}

/*
-------------------------------------------------------
	Numbers
-------------------------------------------------------
*/

#numbersframe {
	display: flex;
	flex-direction: column;
}

#numbersmessage {
	padding: 0 15px 10px 15px;
}

.eventblock {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-basis: 100%;
	min-width: 100%;
	box-shadow: var(--shadow01);
}

.groupblock {
	display: none;
}

.eventheader {
	display: none;
	position: -webkit-sticky;
	position: sticky;
	top: 38px;
	flex-basis: 100%;
	min-width: 100%;
	xmargin-top: 20px;
	background-color: var(--color01);
	xborder-top: 1px solid white;
	padding: 10px 15px !important;
	color: var(--color02);
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 200ms;
	z-index: 100;
}

.eventheader:hover {
	background-color: var(--color03);
}

.eventheader:first-child {
	display: block;
}

.eventheader.expanded {
	xposition: -webkit-sticky;
	/* Old Safari */
	xposition: sticky;
	xtop: 40px;
}

.eventtitle {
	font-weight: bold;
}

.eventblock:nth-child(2)>.eventheader:first-child {
	xmargin-top: 10px;
}

.numeventstatus {
	display: flex;
	position: absolute !important;
	top: 0;
	right: 0;
	width: 30px;
	height: 100%;
	border-left: 1px solid var(--color01);
	justify-content: center;
	align-items: center;
}

.numeventstatus.accepted {
	background-color: var(--color01);
}

.numeventstatus.undecided {
	background-color: var(--color03);
}

.eventshadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

.groupheader {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	z-index: 99;
}

.groupheadertext {
	display: none;
	position: relative;
	flex-basis: 100%;
	min-width: 100%;
	border-top: 1px solid var(--color11);
	border-bottom: 1px solid var(--color11);
	xbackground-color: white;
	padding: 10px 15px;
	font-weight: bold;
}

.groupheadertext.expanded {
	position: -webkit-sticky;
	/* Old Safari */
	position: sticky;
}

.plusminus {
	display: flex;
	position: absolute !important;
	top: 0;
	right: 0;
	width: 30px;
	height: 100%;
	justify-content: center;
	align-items: center;
	border-top: 1px solid var(--color12);
	background-color: var(--color14);
	font-size: 2rem;
}

.togglenames {
	display: flex;
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 100;
}

.groupheaderblank {
	display: none;
}

.namesblock {
	display: none;
}

.namesheader {
	display: none;
}

.nameslist {
	flex-basis: calc(66% - 30px);
	min-width: calc(66% - 30px);
	max-width: calc(66% - 30px);
}

.optionslist {
	flex-basis: 34%;
	min-width: 34%;
	max-width: 34%;
}

.optionfillerslist {
	flex-basis: 30px;
	min-width: 30px;
	max-width: 30px;
}

.name {
	display: none;
	border-top: 1px solid var(--color11);
	border-right: 1px solid var(--color11);
	background-color: white;
	padding: 8px 5px 8px 15px;
	white-space: nowrap;
	overflow: hidden;
	transition: background-color 250ms;
}

.nameslist0 .name.myrow {
	display: block;
}

.name.yes {
	background-color: var(--color15);
}

.name:hover,
.name:not(.yes).highlight {
	background-color: var(--color14);
}

.name.yes.highlight {
	background-color: var(--color16);
}

.option {
	display: flex;
	display: none;
	justify-content: center;
	border-top: 1px solid var(--color11);
	border-right: 1px solid var(--color11);
	background-color: white;
	padding: 8px 0px;
	text-align: center;
	transition: all 250ms;
}

.optionslist0 .option.myrow {
	display: flex;
}

.option:not(.yes).highlight {
	background-color: var(--color14);
}

.option.yes.highlight {
	background-color: var(--color16);
}

.myrow {
	border-top: 1px solid var(--color12) !important;
}

.mynextrow {
	border-top: 1px solid var(--color12) !important;
}

.option.clickable:hover {
	background-color: var(--color03);
	color: var(--color04);
	cursor: pointer;
}

.option.clicked,
.option>.clicked {
	background-color: var(--color03) !important;
	color: var(--color04) !important;
}

.totalrow {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.totallabel {
	position: relative;
	flex-basis: calc(66% - 30px);
	min-width: calc(66% - 30px);
	max-width: calc(66% - 30px);
	border-right: 1px solid var(--color11);
	border-top: 1px solid var(--color12);
	background-color: var(--color14);
	padding: 8px 5px 8px 15px;
	xfont-weight: bold;
	;
	white-space: nowrap;
	overflow: hidden;
	z-index: 99;
}

.totalamount {
	display: flex;
	justify-content: center;
	flex-basis: 34%;
	min-width: 34%;
	max-width: 34%;
	border-right: 1px solid var(--color11);
	border-top: 1px solid var(--color12);
	background-color: var(--color14);
	padding: 8px 0px;
	text-align: center;
	z-index: 99;
}

.totalamount>.split {
	border-right: 1px solid var(--color11);
	margin-top: -8px;
	margin-bottom: -8px;
	xpadding: 8px 0;
	z-index: 99;
}

.totallabel.expanded {
	position: sticky;
}

.totalamount.expanded {
	position: sticky;
}

.totalamount.expanded>.split {
	border-right: 1px solid var(--color12);
}

.splitcell {
	xpadding-left: 0;
	xpadding-right: 0;
}

.split {
	position: relative;
	flex: 1;
	margin-top: -8px;
	margin-bottom: -8px;
	padding: 6px 0px 10px 0px;
	text-align: center;
}

.split.clickable:hover {
	background-color: var(--color03) !important;
	color: var(--color04);
	cursor: pointer;
}

.option>.split {
	border-right: 1px solid var(--color11);
	background-color: white;
	color: var(--fontcolor01);
	z-index: 98;
}

.option>.split:not(.yes).highlight {
	background-color: var(--color14);
}

.option>.split.yes.highlight {
	background-color: var(--color16);
}

.option.myrow>.split:hover {
	background-color: var(--color03);
	color: var(--color04);
}

.split:first-child {
	xmargin-left: -5px;
}

.split:last-child {
	xmargin-right: -5px;
	border: 0;
}

.option.yes,
.option>.yes {
	background-color: var(--color15);
}

.splitday {
	position: absolute;
	bottom: -3px;
	left: 2px;
	font-size: 9pt;
}

.optionfiller {
	display: none;
	width: 100%;
	border-top: 1px solid var(--color11);
	background-color: white;
	padding: 8px 0px;
	text-align: center;
	transition: all 250ms;
}

.optionfiller.yes {
	background-color: var(--color15);
}

.optionfiller:hover,
.optionfiller:not(.yes).highlight {
	background-color: var(--color14);
}

.optionfiller.yes.highlight {
	background-color: var(--color16);
}


.optionfillerslist0 .optionfiller.myrow {
	display: block;
}

.eventstatus {
	xfont-weight: bold;
	border-radius: 5px;
	background-color: var(--color03);
	padding: 10px 15px;
	color: var(--color04);
}

@media (min-width: 768px) {

	#numbersframe {
		flex-direction: row;
	}

	#numbersmessage {
		padding: 0 15px 0px 15px;
	}

	.groupblock {
		display: block;
		position: absolute;
		box-shadow: var(--shadow01);
		border-radius: 5px;
	}

	.groupheader {
		position: sticky;
	}

	.groupheadertext {
		position: -webkit-sticky;
		/* Old Safari */
		position: sticky;
		top: 45px;
		margin-top: 20px;
		border-top: 0;
		border-bottom: 1px solid var(--color12);
		padding: 15px;
		background-color: var(--color01);
		color: var(--color02);
		font-size: var(--fontsize02);
		font-weight: normal;
	}

	.groupheaderblank {
		margin-top: 20px;
		border-bottom: 1px solid var(--color12);
	}

	/* names Block */

	.namesblock {
		display: flex;
		flex-direction: column;
		position: -webkit-sticky;
		/* Old Safari */
		position: sticky;
		left: 0;
		width: 170px;
		border-bottom-left-radius: 5px;
		z-index: 101;
	}

	.namesblock>.groupheadertext {
		display: block;
		min-width: calc(200% - 20px) !important;
		border-top-left-radius: 5px !important;
		border-top-right-radius: 5px !important;
		white-space: nowrap;
		z-index: 102;
	}

	.namesblock>.groupheaderblank {
		display: none;
	}

	.namesblock>.namesheader {
		display: block;
		position: -webkit-sticky;
		/* Old Safari */
		position: sticky;
		top: 95px;
		flex-basis: 100% !important;
		min-width: 100% !important;
		background-color: var(--color01);
		z-index: 100;
	}

	.namesblock>.nameslist {
		display: block;
		flex-basis: 100% !important;
		min-width: 100% !important;
		z-index: 99;
	}

	.namesblock .name {
		border-right: 1px solid var(--color11);
	}

	.namesblock .name:last-child {
		border-bottom-left-radius: 5px;
	}

	.namesblock>.totallabel {
		position: -webkit-sticky;
		/* Old Safari */
		position: sticky;
		display: block;
		flex-basis: 100% !important;
		min-width: 100% !important;
		border-top: 1px solid var(--color01);
		border-right: 1px solid var(--color01);
		border-bottom: 1px solid var(--color01);
		background-color: var(--color03);
		color: var(--color04);
		font-weight: normal;
	}

	/* Event Block */

	.eventblock {
		flex-basis: 150px;
		min-width: 150px;
		box-shadow: none;
		z-index: 100;
	}

	.eventblock>div {
		flex-basis: 100%;
		min-width: 100%;
	}

	.eventblock:nth-child(2)>.eventheader:first-child {
		margin-top: 0;
	}

	.eventblock:nth-child(2) .eventheader,
	.eventblock:nth-child(2) .option,
	.eventblock:nth-child(2) .totalamount {
		border-left: none;
	}

	.eventshadow {
		display: none;
	}

	.groupheadertext {
		display: none;
	}

	.groupheaderblank {
		display: block;
		position: -webkit-sticky;
		/* Old Safari */
		position: sticky;
		top: 45px;
		background-color: var(--color01);
		padding: 15px;
		z-index: 101;
	}

	.eventblock:last-child .groupheaderblank {
		border-top-right-radius: 5px;
	}

	.eventblock:last-child .option:last-child {
		border-bottom-right-radius: 5px;
	}

	.groupheaderblank2 {
		margin-top: 20px
	}

	.plusminus {
		display: none;
	}

	.togglenames {
		display: none;
	}

	/* Events Header */

	.namesheader {
		display: none;
		flex-basis: 50%;
		min-height: 146px;
		min-width: 50%;
		max-width: 50%;
		border-right: 1px solid var(--color12);
		z-index: 100;
	}

	.eventheader {
		display: block;
		position: -webkit-sticky;
		/* Old Safari */
		position: sticky;
		top: 95px;
		margin-top: 0px;
		min-height: 146px;
		border-top: none;
		border-right: 1px solid var(--color12);
		padding-bottom: 40px !important;
		overflow: hidden;
	}

	.eventtitle {
		font-weight: normal;
	}

	.numeventstatus {
		display: flex;
		position: absolute !important;
		top: unset;
		right: unset;
		bottom: 0;
		right: 0;
		width: 30px;
		height: 30px;
		border-top: 1px solid var(--color12);
		border-left: 1px solid var(--color12);
		justify-content: center;
		align-items: center;
	}

	/* Names List */

	.nameslist {
		display: none;
	}

	.name {
		display: block;
		padding: 5px 5px 5px 15px;
	}

	/* Options List */

	.optionslist {
		display: block;
	}

	.option {
		display: flex;
		border-right: 1px solid var(--color11);
		padding: 5px 0;
	}

	.splitcell {
		xpadding-left: 0;
		xpadding-right: 0;
	}

	.split {
		margin-top: -5px;
		margin-bottom: -5px;
		padding: 1px 0 9px 0;
	}

	.eventblock:last-child .eventheader,
	.eventblock:last-child .option,
	.eventblock:last-child .totalamount {
		border-right: 0;
	}

	.optionfillerslist {
		display: none;
	}

	/* Totals */

	.totallabel {
		display: none;
	}

	.totalamount {
		position: -webkit-sticky;
		/* Old Safari */
		position: sticky;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		border-radius: 0;
		border-top: 1px solid var(--color01);
		border-right: 1px solid var(--color01);
		border-bottom: 1px solid var(--color01);
		background-color: var(--color03);
		color: var(--color04);
	}

	.totalamount:last-child {
		border-bottom-right-radius: 0;
	}

	.totalamount>.split {
		border-right: 1px solid var(--color12);
		padding: 6px 0 10px 0;
		z-index: 99;
	}

	.totalamount>.split:last-child {
		border-right: 0;
	}

	/* Order */

	.groupheadertext0 {
		order: 1;
	}

	.groupheaderblank0 {
		order: 2;
	}

	.namesheader0 {
		order: 3;
	}

	.eventheader0 {
		order: 4;
	}

	.nameslist0 {
		order: 7;
	}

	.optionslist0 {
		order: 8;
	}

	.groupheader0 {
		order: 5;
	}

	.totallabel0 {
		order: 6;
	}

	.groupheadertext1 {
		order: 11;
	}

	.groupheaderblank1 {
		order: 12;
	}

	.namesheader1 {
		order: 13;
	}

	.eventheader1 {
		order: 14;
	}

	.nameslist1 {
		order: 17;
	}

	.optionslist1 {
		order: 18;
	}

	.groupheader1 {
		order: 14;
	}

	.totallabel1 {
		order: 15;
	}

	.groupheadertext2 {
		order: 21;
	}

	.groupheaderblank2 {
		order: 22;
	}

	.namesheader2 {
		order: 23;
	}

	.eventheader2 {
		order: 24;
	}

	.nameslist2 {
		order: 27;
	}

	.optionslist2 {
		order: 28;
	}

	.groupheader2 {
		order: 25;
	}

	.totallabel2 {
		order: 26;
	}

	.groupheadertext3 {
		order: 31;
	}

	.groupheaderblank3 {
		order: 32;
	}

	.namesheader3 {
		order: 33;
	}

	.eventheader3 {
		order: 34;
	}

	.nameslist3 {
		order: 37;
	}

	.optionslist3 {
		order: 38;
	}

	.groupheader3 {
		order: 35;
	}

	.totallabel3 {
		order: 36;
	}
}

/*
-------------------------------------------------------
	Dances
-------------------------------------------------------
*/

.dancegroup {
	clear: both;
}

.dancerow {
	position: relative;
	display: flex;
	flex-direction: row;
	padding: 10px;
}

.dance {
	position: relative;
	flex-basis: 100%;
	min-width: 100%;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--color11);
}

.dance>div {
	float: left;
}

.dancedisplay {
	display: flex;
	flex-direction: column;
}

.editdance {
	position: absolute;
	top: 10px;
	right: 45px;
	border-radius: 5px;
}

.deletedance {
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 5px;
}

.dancerow {
	padding: 10px;
}

.dancevideo {
	max-width: 100%;
	height: auto;
}

.dancedetails {
	display: flex;
	flex: auto;
	flex-direction: column;
	padding-left: 20px;
}

.danceresource {
	display: flex;
	flex-direction: column;
	white-space: nowrap;
}

.resourcetype {
	flex: 1;
	padding-top: 10px;
	flex-basis: 30%;
	max-width: 30%;
	padding-bottom: 5px;
}

.resourcebuttons {
	flex: 1;
}

#youtubeframe {
	min-width: 100%;
	max-width: 100%;
	height: auto;
}

.youtubethunmbnail {
	display: flex;
	position: relative;
	width: 160px;
	min-width: 160px;
	height: 90px;
	overflow: hidden;
	border-radius: 5px;
	background-color: var(--color01);
	color: var(--color02);
	box-shadow: var(--shadow02);
	justify-content: center;
	align-items: center;
}

.youtubethunmbnail img {
	width: 100%;
	transition: transform 500ms;
	cursor: pointer;
}

.youtubethunmbnail img:hover {
	transform: scale(120%);
}

.playvideo {
	position: absolute;
	right: 5px;
	bottom: 20px;
	width: 30px;
	height: 20px;
	border-radius: 5px;
	cursor: pointer;
}

.dancevideo {
	display: none;
	width: 100%;
	background-color: black;
	padding: 0;
	z-index: 10020;
}

.dancevideoframe {
	min-width: 100%;
	max-width: 100%;
	xbackground-color: var(--color01);
	transition: opacity 2000ms;
}

.dancevideonotes {
	display: none;
}

#loading {
	display: none;
	position: absolute;
	bottom: 15px;
	left: 15px;
	width: calc(100% - 250px);
	height: 35px;
}

#progress {
	margin-bottom: 10px;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background-color: var(--color01);
}

#progressbar {
	width: 0;
	height: 100%;
	border-radius: 5px;
	background-color: var(--color03);
}

@media (min-width: 768px) {
	#dancesframe {
		padding: 0;
	}

	.dancerow {
		padding: 15px;
	}

	.danceresource {
		flex-direction: row;
	}
}

/*
-------------------------------------------------------
	Documents
-------------------------------------------------------
*/

.documentrow {
	position: relative;
	padding: 10px;
}

.editdocument {
	position: absolute;
	top: 10px;
	right: 45px;
	border-radius: 5px;
}

.deletedocument {
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 5px;
}

.filename {
	margin-top: 5px;
	margin-bottom: 5px;
}

@media (min-width: 768px) {
	.documentrow {
		padding: 15px;
	}
}

/*
-------------------------------------------------------
	Members
-------------------------------------------------------
*/

#contactsframe {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	clear: both;
	padding: 10px 0;
}

.contactdetails {
	display: flex;
	flex-basis: 100%;
	min-width: 100%;
	xpadding: 5px 0px;
}

.contactpanel {
	flex: 1;
	background-color: white;
	transition: background-color 300ms;
}

.contactpanel:hover {
	background-color: var(--color14);
}

.contactpanel .panelrow {
	background-color: transparent;
}

.editcontact {
	background-image: url(edit.png);
	background-repeat: no-repeat;
	background-position: right 10px top 10px;
	cursor: pointer;
	transition: background-color 300ms;
}

.editcontact:hover {
	background-color: var(--color03);
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	#contactsframe {
		margin: -10px;
	}

	.contactdetails {
		flex-basis: 50%;
		min-width: 50%;
		margin-bottom: 10px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 1000px) {
	.contactdetails {
		flex-basis: 33.333%;
		min-width: 33.333%;
		padding: 5px 10px;
	}
}

/*
-------------------------------------------------------
	Manage Members
-------------------------------------------------------
*/

.team2hidden {
	display: none;
}

.permissionsframe {
	clear: both;
	box-shadow: none;
	padding: 5px 0;
}

.permissionswideheader {
	display: none;
}

.permissionsblank {
	display: none;
}

.permissionsheader {
	display: flex;
	flex-direction: row;
}

.memberpermissions {
	display: flex;
	flex-direction: column;
	xmargin-bottom: 15px;
	border-radius: 5px;
	box-shadow: var(--shadow01);
}

.permissionname {
	flex-basis: 70%;
	min-width: 70%;
	max-width: 70%;
	border-top: 1px solid var(--color11);
	background-color: white;
	padding: 5px 5px 5px 15px;
	transition: background-color 300ms;
}

.permissionname.highlight {
	background-color: var(--color14);
}

.permissionsmembername {
	display: flex;
	flex-basis: 100%;
	min-width: 100%;
	max-width: 100%;
	background-color: var(--color01);
	padding: 5px 5px 5px 15px;
	color: var(--color02);
	align-items: center;
	transition: background-color 300ms;
}

.permissionsmembername.highlight {
	background-color: var(--color14);
}

.permissionsblock {
	display: flex;
	flex-direction: row;
}

.permissionslist {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-basis: 100%;
	min-width: 100%;
	max-width: 100%;
}

.permissionvalue {
	display: flex;
	flex-basis: 30%;
	min-width: 30%;
	max-width: 30%;
	border-top: 1px solid var(--color11);
	border-left: 1px solid var(--color11);
	background-color: white;
	padding: 5px;
	justify-content: center;
	align-items: center;
	transition: background-color 300ms;
}

.permissionvalue.allowed {
	background-color: var(--color15);
}

.permissionvalue:not(.allowed).highlight,
.permissionvalue:not(.allowed):hover {
	background-color: var(--color14);
}

.permissionvalue.allowed.highlight,
.permissionvalue.allowed:hover {
	background-color: var(--color16);
}

.notallowed {
	display: none;
}

.editmember {
	float: right;
	margin-right: 5px;
}

.deletemember {
	float: right;
	margin-right: 10px;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.pagefixedwidth {
		min-width: 1140px;
	}

	.permissionsframe {
		display: flex;
		flex-direction: column;
		width: fit-content;
		box-shadow: var(--shadow01);
		border-radius: 5px;
		padding: 0;
	}

	.memberpermissions {
		flex-direction: row;
		margin: 0;
		box-shadow: none;
	}

	.permissionsblank {
		display: block;
		flex-basis: 250px;
		min-width: 250px;
		max-width: 250px;
		border-top-left-radius: 5px;
		background-color: var(--color01);
		padding: 10px;
	}

	.permissionsblock {
		margin-bottom: 0px;
	}

	.permissionsmembername {
		position: -webkit-sticky;
		/* Old Safari */
		position: sticky;
		left: 0;
		flex-basis: 250px;
		min-width: 250px;
		max-width: 250px;
		border-radius: 0;
		border-top: 1px solid var(--color11);
		background-color: white;
		padding: 5px 5px 5px 15px;
		color: var(--fontcolor01);
	}

	.permissionslist {
		display: flex;
		flex-direction: row;
	}

	.permissionslist .permissionname {
		display: none;
	}

	.permissionname {
		flex-basis: 70px;
		min-width: 70px;
		max-width: 70px;
		border: 0;
		background-color: var(--color01);
		padding: 5px;
		color: var(--color02);
		font-size: 0.9rem;
		text-align: center;
	}

	.permissionname:last-child {
		border-radius: 0 5px 0 0;
	}

	.permissionvalue {
		flex-basis: 70px;
		min-width: 70px;
		max-width: 70px;
		border-top: 1px solid var(--color11);
		border-left: 1px solid var(--color11);
		background-color: white;
		padding: 5px;
		text-align: center;
	}

	.permissionvalue:last-child {
		border-radius: 0;
	}

	.permissionswideheader {
		display: flex;
		position: -webkit-sticky;
		/* Old Safari */
		position: sticky;
		top: 38px;
		flex-direction: row;
	}

	.memberpermissions:last-child .permissionsmembername {
		border-bottom-left-radius: 5px;
	}

	.memberpermissions:last-child .permissionvalue:last-child {
		border-bottom-right-radius: 5px;
	}

	.notallowed {
		display: block;
	}

	.editmember {
		float: left;
		margin-left: -5px;
		margin-right: 5px;
	}

	.deletemember {
		float: left;
		margin-right: 10px;
	}
}

/*
-------------------------------------------------------
	Settings
-------------------------------------------------------
*/
#settingsform {
	padding: 0 20px;
}

#danceteamnames {
	display: none;
}

.labelnotes {
	font-weight: normal;
}

.settingsrow {
	display: flex;
	flex-direction: row;
}

.settimgsrow>div {
	flex: 1;
}

.settingsname {
	min-width: var(--col04);
	max-width: var(--col04);
	padding-right: 20px;
	;
	font-weight: bold;
}

.settingsmenu li {
	width: 25%;
}

.iconselector {
	xmargin: 5px;
	border-radius: 5px;
	border: 5px solid white;
	cursor: pointer;
}

.iconselected {
	border: 5px solid #666666;
	background-color: #666666;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	#settingsform {
		padding: 0 5px;
	}

	.settingsname {
		min-width: var(--col04);
		font-weight: bold;
	}

	.settingsmenu li {
		width: auto;
	}
}

/*
-------------------------------------------------------
	Arrow
-------------------------------------------------------
*/

.arrow {
	border: solid var(--fontcolor01);
	border-width: 0 2px 2px 0;
	padding: 4px;
	transition: transform 800ms;
	transform: rotate(45deg)
}

.memberarrow {
	position: absolute;
	top: 12.5px;
	right: 10px;
	border: solid var(--color02);
	border-width: 0 2px 2px 0;
	padding: 4px;
	transition: transform 500ms;
	transform: rotate(45deg)
}

.up {
	transform: rotate(-135deg);
}

.link {
	transform: rotate(-45deg);
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.memberarrow {
		top: 17.5px
	}
}

/*******************************************************************
 Toggle Switch
********************************************************************/
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 30px;
	top: -2px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #cccccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.slider {
	background-color: var(--color01);
}

input:focus+.slider {
	box-shadow: 0 0 1px #1C4D64;
}

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

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

/*
-------------------------------------------------------
    audioplayer
-------------------------------------------------------
*/

.audioplayer {
	float: left;
	height: 34px;
	width: 55%;
	max-width: 250px;
	margin-top: 0px;
	border-radius: 5px;
	background-color: var(--color03);
	position: relative;
}

/*
.audiolabel {
	position: absolute;
	top: 8px;
	left: 20px;
	width: 60px;
	color: white;
}
*/

.audiocontrols {
	position: absolute;
	top: 8px;
	left: 20px;
	width: 20px;
	background-image: url('audioplayer-controls.png');
	background-repeat: no-repeat;
	cursor: pointer;
}

.audioload {
	position: absolute;
	top: 10px;
	left: 45px;
	width: calc(100% - 60px);
	max-width: 230px;
	height: 15px;
	background-color: var(--color01);
}

.audioplay {
	position: absolute;
	top: 10px;
	left: 45px;
	width: 0px;
	height: 15px;
	background-color: white;
}


.audiolength {
	position: absolute;
	top: 10px;
	right: 10px;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.audioplayer {
		margin-top: 7px;
	}
}

/*
-------------------------------------------------------
    Refresh Message
-------------------------------------------------------
*/

#refreshmessage {
	display: none;
	position: -webkit-sticky;
	/* Old Safari */
	position: sticky;
	bottom: 0;
	right: 0;
	float: right;
	border-top-left-radius: 5px;
	background-color: var(--color03);
	padding: 10px 20px;
	color: var(--color04);
	cursor: pointer;
	z-index: 1000;
}

#refreshmessage:hover {
	background-color: var(--color01);
	color: var(--color02);
}

/*
-------------------------------------------------------
    Logs
-------------------------------------------------------
*/

.log td {
	padding: 2px;
	vertical-align: top;
}

.logheader td {
	padding-top: 10px;
	font-weight: bold;
}

.logline {
	transition: all 200ms;
}

.logline:hover {
	background-color: white;
}

.logline td {
	font-family: 'Courier New', Courier, monospace;
}

.username {
	white-space: nowrap;
}

/*
-------------------------------------------------------
    Links
-------------------------------------------------------
*/

.href
{
	display: inline-block;
}

.href::after
{
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: red;
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}

.href:hover::after
{
	transform: scaleX(1);
	transform-origin: bottom left;
}

/*
-------------------------------------------------------
    Universal Styles
-------------------------------------------------------
*/

.hide {
	display: none;
}



/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
	#box1
	{
		order: 2;
	}
	#box2
	{
		order: 3;
	}
	#box3
	{
		order: 1;
	}
	#box4
	{
		order: 4;
	}
	#box5
	{
		order: 5;
	}
	#box6
	{
		order: 6;
	}
}