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

:root
{

	/* page background */
	--pagebg: #0f0f0f;

	/* page header text */
	--pageheader: #ffffff;

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

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

	/* */
	--color12: #cccccc;

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

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

	/* yes */
	--color15: color-mix(in srgb, var(--color01), #ffffff 80%);

	/* yes highlight */
	--color16: color-mix(in srgb, var(--color01), #ffffff 70%);

	/* main text */
	--fontcolor01: #505050;

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

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

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

	--fontsize01: 1.0rem;
	--fontsize02: 1.2rem;

	/* subtle shadow on buttons and panels */
	--shadow01: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	/* deeper shadow on dialogboxes, oppups and topline */
	--shadow02: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
	--shadow03: 0px 10px 5px -7px rgba(0, 0, 0, 0.2), 0px 14px 28px 28px rgba(0, 0, 0, 0.1), 0px 9px 16px 8px rgba(0, 0, 0, 0);

	--transition01: 200ms;
	/*dialogbox slide */
	--transition02: 400ms;


	--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%);

	--borderradius: 4px;
}

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

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

html
{
	font-size: 100%;
	/* make scrollbar always visible to prevent page layout jumping */
	overflow-y: scroll;
	/* prevent text resizing when switching orientation on iPhone */
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body
{
	background-color: white;
	color: var(--fontcolor01);
	font-family: var(--fontfamily01);
	font-size: var(--fontsize01);
}

h1
{
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0 15px;
	color: var(--pageheader);
	font-family: Roboto, sans-serif;
	font-size: 1.3rem;
	font-family: 'Marcellus', Georgia, serif;
	font-size: min(calc(1.2rem + 1vw), 30pt);
	font-weight: normal;
	text-align: left;
}

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

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

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;
}

p
{
	margin-bottom: 15px;
}

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

a
{
	color: var(--fontcolor04);
	text-decoration: none;
	cursor: pointer;
}

ol
{
	padding-inline-start: 15px;
}

ol>li
{
	margin-bottom: 15px;
}

@media (min-width: 900px)
{
	body
	{
		overflow-x: initial;
		background-color: var(--pagebg);
		max-width: unset;
	}

	h1
	{
		padding: 0;
		font-family: 'Marcellus', Georgia, serif;
		font-size: min(calc(1.3rem + 1vw), 30pt);
		color: var(--pageheader);
		text-align: left;
	}

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

	ol
	{
		padding-inline-start: 30px;
	}
}

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

.link
{
	display: inline-block;

}

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

#logo.link::after
{
	background-color: var(--color02);
	bottom: -7px;
}

#membername .link::after,
.panelheaderbold .link::after
{
	background-color: var(--color02);
}

#footer .link::after
{
	background-color: var(--color02);
}

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

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

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

#topline
{
	position: sticky;
	position: -webkit-sticky;
	top: 0px;
	height: 57px;
	min-height: 57px;
	max-height: 57px;
	padding: 10px 0 10px 5px;
	background-color: var(--color01);
	color: var(--color02);
	z-index: 10160;
}

.toplineshadow
{
	box-shadow: var(--shadow02);
}

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

.mb
{
	padding: 4px 3px;
	background-color: var(--color02);
	color: var(--color01);
	border-radius: var(--borderradius);
	margin-right: 7px;
	font-weight: bold;
	font-size: 1.5rem;
}

#footer .mb
{
	font-size: 1.5rem;
}

#logo
{
	font-family: 'Marcellus', serif;
	font-size: 1.5rem;
	cursor: pointer;
}

#footer #logo
{
	position: absolute;
	left: 0;
}

#header
{
	background-color: var(--pagebg);
	min-width: 100%;
	margin: auto;
	transition: all var(--transition02);
}

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

.headermessage
{
	margin-top: 20px;
	margin-left: -15px;
	margin-right: -15px;
	background-color: rgb(156, 12, 12);
	color: white;
	padding: 15px;
	font-family: var(--fontfamily01);
	font-size: var(--fontsize02);
}

.headermessage .button
{
	font-size: var(--fontsize01);
}

#renewsubs
{
	margin-top: 10px;
}

#body
{
	display: flex;
	flex-direction: column;
	max-width: 100%;
	transition: all var(--transition02);
	;
}

#mainframe
{
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-height: 500px;
	background-color: var(--color10);
	padding: 15px 10px;
}

#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;
	width: 100%;
	background-color: var(--color10);
	padding: 0px;
}

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

#flexframe,
.flexframe
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	clear: both;
	margin: -7.5px;
}

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

#footer
{
	min-width: 100%;
	background-color: var(--color01);
	padding: 14px 15px 15px 10px;
	color: var(--color02);
	text-align: right;
	z-index: 1009;
	transition: all var(--transition02);
}

#footer a
{
	margin-bottom: 5px;
}

#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;
}

.narrowspace
{
	word-spacing: -3.5px;
}

@media (min-width: 900px)
{

	#page
	{
		padding: 0 20px;
		overflow: unset;
	}

	#topline
	{
		min-width: 100%;
		margin-left: -20px;
		margin-right: -20px;
		padding: 10px 20px;
		height: 64px;
		min-height: 64px;
		max-height: 64px;
	}

	.mb
	{
		font-weight: bold;
		font-size: 1.5rem;
	}

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

	#header
	{
		margin: auto;
		width: 100%;
		min-width: auto;
		max-width: 1140px;
		background-color: var(--pagebg);
	}

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

	.headermessage
	{
		margin-left: 0;
		margin-right: 0;
		border-radius: var(--borderradius);
		padding: 15px 20px;
	}

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

	#mainframe
	{
		clear: both;
		border-bottom-right-radius: var(--borderradius);
		border-bottom-left-radius: var(--borderradius);
		padding: 15px;
	}

	#mainframe.nomenu
	{
		border-radius: var(--borderradius);
	}

	#pageframe
	{
		border-radius: var(--borderradius);
	}

	#flexframe,
	.flexframe
	{
		margin: -7.5px;
	}

	#footer
	{
		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;
	}
}

/*
-------------------------------------------------------
	Mobile Footer
-------------------------------------------------------
*/

#mobilefooter
{
	position: sticky;
	position: -webkit-sticky;
	bottom: 0;
	min-width: 100%;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
	background-color: rgb(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	padding: 0px 10px 15px 10px;
	color: var(--fontcolor01);
	color: #777777;
	font-size: .75rem;
	text-align: center;
	transition: bottom 500ms;
	z-index: 10200;
}

#mobilefooter>table
{
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
}

#mobilefooter td
{
	padding: 10px 5px 5px 5px;
	cursor: pointer;
}

#mobilefooter td>div
{
	height: 25px;
}

#mobilefooter td *
{
	color: #252525;
}

#mobilefooter td:hover *
{
	xfill: blue;
	color: blue;
}

#mobilefooter>table
{
	height: 20px;
}

#mobilefooter .calendaricon
{
	padding: 0px;
	width: 100%;
	height: 100%;
}

.danceicon,
.practiceicon
{
	padding: 0px;
	width: 100%;
	height: 100%;

}

.documentsicon
{
	padding: 0px;
	width: 100%;
	height: 100%;
}

.membersicon
{
	padding: 0px;
	width: 100%;
	height: 100%;
}

.libraryicon
{
	padding: 0px;
	width: 120%;
	height: 120%;
	margin-left: -7px;
	margin-top: -2px;
}

.linkicon
{
	margin-left: 3px;
	margin-right: -1px;
}

.updateothersicon
{
	padding: 5px;
}

@media (min-width: 900px)
{

	#mobilefooter
	{
		display: none;
	}
}

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

.box,
.bigbox,
.smallbox,
.tinybox
{
	display: flex;
	flex-basis: 100%;
	min-width: 100%;
	padding: 7.5px;
}

.tinybox
{
	flex-basis: 50%;
	min-width: 50%;
}

.adminbox
{
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
}

.admin
{
	display: none;
}

@media (min-width: 700px)
{

	.smallbox
	{
		flex-basis: 50%;
		min-width: 50%;
		padding: 7.5px;
	}

	.tinybox
	{
		flex-basis: 33.3333%;
		min-width: 33.3333%;
	}
}

@media (min-width: 900px)
{

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

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

@media (min-width: 1000px)
{
	.smallbox
	{
		flex-basis: 33.333%;
		min-width: 33.333%;
	}

	.tinybox
	{
		flex-basis: 25%;
		min-width: 25%;
	}
}

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

.panel
{
	display: flex;
	flex-direction: column;
	width: 100%;
	box-shadow: var(--shadow01);
	border: 1px solid #dddddd;
}

.panelheader
{
	border-radius: var(--borderradius) var(--borderradius) 0 0;
	background-color: white;
	color: var(--fontcolor01);
	padding: 8px 15px;
	font-weight: bold;
}

.panelheaderbold,
.filterheader
{
	padding: 8px 15px;
	background-color: var(--color01);
	color: var(--color02);
	font-weight: normal;
}

.panelheaderbold a
{
	color: var(--color02);
	font-weight: normal;
}

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

.panelrow:first-child
{
	border-top-left-radius: var(--borderradius);
	border-top-right-radius: var(--borderradius);
	border-top: none;
}

.panelrow:last-of-type
{
	border-bottom-left-radius: var(--borderradius);
	border-bottom-right-radius: var(--borderradius);
}

.panelrow ul
{
	padding-left: 20px;
}

.helpindex
{
	display: flex;
	flex-direction: row;
	cursor: pointer;
}

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

@media (min-width: 900px)
{

	.panel
	{
		border-radius: var(--borderradius);
	}

	.panelrow
	{
		padding: 15px 15px;
	}

	.panelheader,
	.panelheaderbold
	{
		padding: 15px 15px;
	}

	.filterheader
	{
		padding: 15px;
		background-color: white;
		color: var(--fontcolor01);
		font-weight: bold;
	}
}

/*
-------------------------------------------------------
	Member Banner
-------------------------------------------------------
*/
#memberbanner
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	min-width: 100%;
}

#topright
{
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	justify-content: end;
}

#notificationbell
{
	xheight: 30px;
	xwidth: 30px;
	padding: 2px 5px 0px 5px;
	border-radius: var(--borderradius);
}

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

.notificationcount
{
	position: absolute;
	top: -40px;
	right: 0px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 2px solid var(--color01);
	xbox-shadow: rgba(99, 99, 99, 0.2) 0px 0px 8px 8px;
	background-color: var(--color02);
	color: var(--color01);
	font-weight: bold;
	font-size: .9rem;
	display: none;
	align-content: center;
	justify-content: center;
	xtransform: translateY(-40px);
}

.bounce
{
	animation: bounce 20s ease infinite;
}

@keyframes bounce
{
	7%
	{
		transform: translateY(0px);
	}

	7.5%
	{
		transform: translateY(40px);
	}

	8.5%
	{
		transform: translateY(30px);
	}

	9%
	{
		transform: translateY(40px);
	}

	9.5%
	{
		transform: translateY(35px);
	}

	10%
	{
		transform: translateY(40px);
	}

	10.5%
	{
		transform: translateY(39px);
	}

	11%
	{
		transform: translateY(40px);
	}

	95%
	{
		transform: translateY(40px);
	}
}

#mobilemembername
{
	flex-grow: 1;
	padding: 10px 45px 10px 15px;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#membername
{
	display: none;
}

@media (min-width: 900px)
{

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

	#memberbanner.memberbannernumbers
	{
		position: sticky;
		position: -webkit-sticky;
		margin: unset;
		padding: 15px 0px;
	}

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

	#membername
	{
		display: inline-block;
		white-space: nowrap;
		transition: all var(--transition01);
		border-radius: var(--borderradius);
		padding: 10px 28px 10px 15px;
	}

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

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

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

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

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

	#mobilemembername
	{
		display: none;
	}

	#notificationbell
	{
		width: unset;
		height: unset;
	}
}

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

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

#membermenu.membermenunumbers
{
	right: 0px;
}

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

#membermenu table
{
	width: 100%;
	border-collapse: collapse;
	border-top-left-radius: var(--borderradius);
	border-bottom-left-radius: var(--borderradius);
	border-bottom-right-radius: var(--borderradius);
	box-shadow: var(--shadow02);
}

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

#membermenu tr:first-child .membermenu-option
{
	border-top-left-radius: var(--borderradius);
	border-top-right-radius: var(--borderradius);
}

#membermenu tr:last-child .membermenu-option
{
	border-bottom-left-radius: var(--borderradius);
	border-bottom-right-radius: var(--borderradius);
}

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

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

@media (min-width: 900px)
{

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

	#membermenuwide
	{
		right: 0px;
	}
}

/*
-------------------------------------------------------
	Notifications List
-------------------------------------------------------
*/
#mobilenotiflist
{
	position: fixed;
	top: 0px;
	right: 0;
	min-height: 100vh;
	max-height: 100vh;
	height: 100vh;
	overflow-y: scroll;
	overscroll-behavior: none;
	background-color: rgb(255, 255, 255, 1);
	transform: translateX(100%);
	transition: all var(--transition02);
	min-width: 300px;
	max-width: 300px;
	width: 300px;
	background-color: white;
	padding: 15px 15px 20px 15px;
	color: var(--fontcolor01);
	z-index: 10109;
}

.notiflistheader
{
	padding: 65px 0px 8px 0px;
	border-bottom: 1px solid #eeeeee;
	font-size: 1.2rem;
}

#notiflist::-webkit-scrollbar
{
	display: none;
}

#closenotiflist
{
	position: absolute;
	top: 71px;
	right: 8px;
}

.notifitem
{
	padding: 5px 0px 0 0px;
	border-bottom: 1px solid #dddddd;
	cursor: pointer;
	transition: all 400ms;
}

.notifitem:hover
{
	background-color: #eeeeee;
}

.notifago
{
	text-align: right;
	font-size: .7rem;
}

.unseen::after
{
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	min-height: 100%;
	height: 100%;
	min-width: 5px;
	width: 5px;
	border-radius: 0;
	background-color: var(--fontcolor04);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	z-index: 99;
}

.xseen::after
{
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	min-height: 100%;
	height: 100%;
	min-width: 5px;
	width: 5px;
	border-radius: 0;
	background-color: var(--color10);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	z-index: 99;
}

.notifdatetime
{
	margin-top: 15px;
	text-align: right;
	font-size: .8rem;
}

@media (min-width: 900px)
{
	#notiflist
	{
		display: none;
		position: absolute;
		right: 0px;
		top: 60px;
		width: 300px;
		z-index: 1009;
		border-radius: var(--borderradius);
		border-bottom-right-radius: var(--borderradius);
		box-shadow: var(--shadow02);
		background-color: white;
		padding: 10px 15px 20px 15px;
		color: var(--fontcolor01);
		max-height: 90vh;
		overflow-y: scroll;
		overscroll-behavior: contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.notiflistheader
	{
		padding: 10px 0px 8px;
	}

	#closenotiflist
	{
		position: absolute;
		top: 10px;
		right: 8px;
	}
}

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

}

.menu ul
{
	list-style: none;
}

.menu li
{
	display: none;
	width: 100%;
}

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

.menu li a
{
	display: inline-block;
	width: 100%;
	background-color: var(--color03);
	padding: 10px 15px;
	color: var(--color04);
	text-decoration: none;
	transition: background-color var(--transition01);
}

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

.menu li a:hover
{
	background-color: color-mix(in srgb, var(--color03), #000000 30%);
	background-color: color-mix(in srgb, var(--color03), var(--color04) 10%);
	color: var(--color04);
}

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

#tabsindicator
{
	display: none;
}

.formhelp,
.settingshelp
{
	display: flex;
	position: absolute;
	right: 0px;
	top: 0px;
	height: 100%;
	width: 50px;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	font-family: var(--fontfamily01);
	font-size: 20pt;
}

.formhelp>span,
.settingshelp>span
{
	display: flex;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	color: var(--color02);
	border: 2px solid var(--color02);
	padding: 2px 8px;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
	font-size: 15pt;
	transition: all var(--transition01);
}

.formhelp>span:hover
{
	border-color: var(--color03);
	background-color: var(--color03);
	color: var(--color04);
}

.settingshelp>span
{
	border-color: var(--color04);
	color: var(--color04)
}

.settingshelp>span:hover
{
	border-color: var(--color01);
	background-color: var(--color01);
	color: var(--color02);
}

.pageicons
{
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}

@media (min-width: 900px)
{
	/* border for black tabs
	#mainmenu
	{
		border: 1px solid #eeeeee;
		border-bottom: none;
	}
	*/

	#mainmenucontainer
	{
		position: sticky;
		left: 20px;
		width: 100%;
	}

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

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

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

	.menu li a
	{
		display: flex;
		align-items: center;
		width: unset;
		border-bottom: 0;
		padding: 20px 30px;
		line-height: 1;
		font-size: var(--fontsize02);
		font-weight: normal;
	}

	.menu li:first-child a
	{
		border-top-left-radius: var(--borderradius);
	}

	#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);
	}

	.settingshelp
	{
		right: 10px;
	}

	.pageicons
	{
		margin-right: 7.5px;
	}
}

/*
-------------------------------------------------------
	Submenu
-------------------------------------------------------
*/

.submenu>div
{
	width: 100%;
}

.submenuitems::-webkit-scrollbar
{
	width: 0;
	height: 0
}

.submenuitems::-webkit-scrollbar-thumb
{
	background: transparent
}

.submenuitems::-webkit-scrollbar-track
{
	background-color: transparent
}

.submenuitems
{
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	scroll-behavior: smooth;
	/* padding and margin required at bottom to not hide the bottom shadow */
	padding-bottom: 15px;
	margin-bottom: -15px;
}

.submenuitems div
{
	display: block;
	float: left;
	margin-right: 10px;
}

.submenuitems div:last-child
{
	margin-right: 1px;
}

.submenuitems div a
{
	display: inline-block;
	width: 100%;
	box-shadow: var(--shadow01);
	border-radius: var(--borderradius);
	background-color: white;
	background-color: var(--color03);
	padding: 8px 15px;
	color: var(--fontcolor01);
	color: var(--color04);
	font-size: var(--fontsize01);
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
	transition: background-color var(--transition01);
}

.submenuitems div a:hover
{
	background-color: color-mix(in srgb, var(--color03), #000000 30%);
	background-color: color-mix(in srgb, var(--color03), var(--color04) 10%);
	color: var(--color04);
}

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

.submenuleftarrow
{
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	margin: 0;
	padding: 13px 10px 13px 5px;
	left: 0px;
	bottom: 2px;
	border: 0;
	background-color: var(--color03);
	background-color: #eeeeee;
	border-top-right-radius: var(--borderradius);
	border-bottom-right-radius: var(--borderradius);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	box-shadow: none;
	border-right: 1px solid var(--color04);
	cursor: pointer;
}

.submenurightarrow
{
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	margin: 0;
	padding: 13px 5px 13px 10px;
	right: 0px;
	bottom: 2px;
	border: 0;
	background-color: var(--color03);
	background-color: #eeeeee;
	color: var(--color04);
	border-top-left-radius: var(--borderradius);
	border-bottom-left-radius: var(--borderradius);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: none;
	border-left: 1px solid var(--color04);
	cursor: pointer;
}

.submenuleftarrow:hover,
.submenurightarrow:hover
{
	background-color: white;
}

.submenuleftarrow *,
.submenurightarrow *
{
	border-color: var(--fontcolor01) !important;
}

@media (min-width: 900px)
{
	.submenuitems div a
	{
		font-size: var(--fontsize02);
	}
}

/*
-------------------------------------------------------
	Mobile Menu
-------------------------------------------------------
*/

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

#mobilemenu ul
{
	width: 100%;
	list-style: none;
	border-bottom: 1px solid var(--fontcolor01);
	padding: 5px 0;
}

#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: 8px 60px 8px 20px;
}

#mobilemenu .pageicons
{
	display: none;
}

@media (min-width: 900px)
{
	#mobilemenu
	{
		display: none;
	}
}

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

#mobiletitle
{
	background-color: var(--color03);
	color: var(--color04);
	font-size: var(--fontsize02);
	padding: 7.5px 0px 7.5px 15px;
	white-space: nowrap;
	overflow: hidden;
}

.back
{
	display: flex;
	align-items: center;
	cursor: pointer;
}

@media (min-width: 900px)
{
	#mobiletitle
	{
		display: none;
	}
}

/*
-------------------------------------------------------
	Buttons
-------------------------------------------------------
*/
.button
{
	display: block;
	align-items: center;
	justify-content: center;
	xmin-width: 100px;
	border-radius: 35px;
	box-shadow: var(--shadow01);
	background-color: var(--color03);
	padding: 12px 22px;
	line-height: 1;
	color: var(--color04);
	text-align: center;
	text-decoration: none !important;
	transition: all 300ms;
}

.button:not(.disabled):hover
{
	background-color: color-mix(in srgb, var(--color03), #000000 30%);
	background-color: color-mix(in srgb, var(--color03), var(--color04) 30%);
	color: var(--color04);
	cursor: pointer;
}

.button.clicked,
.button.clicked:hover
{
	background-color: var(--color03);
	color: var(--color04);
	cursor: default;
}

.button:has(.plusicon),
.button:has(.xdownloadicon)
{
	padding-left: 35px;
}

.button .plusicon
{
	position: absolute;
	left: 12px;
}

.xdownloadicon
{
	padding: 5px;
}

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

.helpbutton
{
	display: flex;
	align-content: center;
	justify-content: center;
}

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

.leftbutton
{
	position: absolute;
	left: -10px;
}

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

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

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

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

.button.checked,
#dialogbox .button.checked
{
	background-color: var(--color01);
	color: var(--color02);
}

.button.disabled
{
	background-color: #dddddd;
	color: #888888;
	cursor: default;
	box-shadow: none;
}

.downloadbutton
{
	display: none;
}

.topbuttons
{
	justify-content: flex-end;
	padding: 0;
}

.adminbuttons
{
	height: 0;
	transition: all 500ms ease;
}

.dialogbuttons
{
	display: flex;
	min-width: 100%;
	margin: 0 -25px 10px;
	justify-content: flex-end;
	padding: 0;
	background-color: white;
	z-index: 2;
}

.topbuttons>div
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.topbuttons .button,
.dialogbuttons .button
{
	margin-top: 7.5px;
	margin-bottom: 7.5px;
	margin-left: 10px;
}

.topbuttons .button:last-child,
.dialogbuttons .button:last-child
{
	margin-right: 10px;
}

.optionbuttons
{
	width: 100%;
	margin-bottom: 15px;
}

.optionbuttons .button,
.optionnote .button
{
	width: 140px;
	margin: 15px 15px 15px 0;
}

.optionbuttons2
{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.optionnote
{
	margin-top: -15px;
}

.optionnote textarea
{
	margin-top: 5px;
	height: 100px;
}

.optionfiller.hasnote::after
{
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	min-height: 8px;
	height: 8px;
	min-width: 8px;
	width: 8px;
	border-radius: 0;
	background-color: var(--color01);
	padding-right: 9px;
	padding-bottom: 9px;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
	z-index: 99;
}

.editnote
{
	max-width: 192px;
	min-width: 192px;
	margin-top: 10px;
	margin-top: 15px;
	float: right;
}

#editnote
{
	height: 150px;
}

@media (min-width: 900px)
{
	.dancebutton
	{
		margin-right: 10px !important;
	}

	.info
	{
		right: -17px;
	}

	.downloadbutton
	{
		display: unset;
	}

	.topbuttons
	{
		padding: 7.5px;
	}

	.topbuttons .button
	{
		margin-top: 0;
		margin-left: 10px;
		margin-right: 0;
		margin-bottom: 0;
	}

	.topbuttons .button:last-child
	{
		margin-right: 0;
	}

	.submenu~.topbuttons
	{
		padding-top: 0;
		padding-bottom: 0;
	}

	.submenu~.topbuttons>div
	{
		position: absolute;
		top: -50px;
	}

	.adminbuttons
	{
		height: unset;
	}

	.optionbox
	{
		display: flex;
		flex-direction: row;
		margin-top: 0;
	}

	.option.hasnote::after
	{
		content: "";
		position: absolute;
		top: 0px;
		right: 0px;
		min-height: 8px;
		height: 8px;
		min-width: 8px;
		width: 8px;
		border-radius: 0;
		background-color: var(--color01);
		padding-right: 9px;
		padding-bottom: 9px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
		z-index: 99;
	}

}

/*
-------------------------------------------------------
	Icon Buttons
-------------------------------------------------------
*/

.icon
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	box-shadow: none;
	background-color: var(--color10);
	color: var(--fontcolor01);
	fill: var(--fontcolor01);
}

.icon:not(.disabled):hover
{
	background-color: var(--color03);
}

.icon *
{
	fill: #666666;
}

.icon:hover *
{
	fill: var(--color04);
}

.icon:hover .arrow
{
	border-color: var(--color04);
}

.pageicons>div
{
	margin-right: 7.5px;
	border-radius: 50%;
	width: 35px;
	height: 35px;
	min-width: 35px;
	min-height: 35px;
	background-color: var(--color03);
	box-shadow: none;
	border: none;
	cursor: pointer;
	transition: all 200ms;
}

.pageicons>div *
{
	fill: var(--color04);
}

.pageicons>div:not(.disabled):hover
{
	background-color: var(--color04);
}

.pageicons>div:not(.disabled):hover *
{
	fill: var(--color03);
}

.pageicons>div.active
{
	background-color: var(--color04);
}

.pageicons>div.active *
{
	fill: var(--color03);
}

.editbutton,
.diarynote,
.reminderbutton
{
	position: absolute;
	top: -5px;
	right: -5px;
	border-radius: 50%;
	border: none;
	background-color: var(--color03);
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
	xbox-shadow: var(--shadow01);
	padding: 2px;
}

.reminderbutton
{
	right: 40px;
	padding: 7px;
	width: 40px;
	height: 40px;
	transform: rotate(90deg);
}

.libraryrow .editbutton
{
	top: 0;
	right: 0;
}

#filebox .editbutton
{
	position: relative;
	top: unset;
	right: unset;
}

.editbutton *,
.diarynote *,
.reminderbutton *
{
	fill: var(--color04);
}

.editbutton:not(.disabled):hover,
.diarynote:not(.disabled):hover,
.reminderbutton:not(.disabled):hover
{
	background-color: color-mix(in srgb, var(--color03), #000000 30%);
	background-color: color-mix(in srgb, var(--color03), var(--color04) 10%);
}

.bookicon
{
	padding: 5px;
	width: 100%;
	height: 100%;
}

.docicon
{
	width: 25px;
	min-width: 25px;
	max-width: 25px;
	margin-right: 10px;
	margin-top: 3px;
}

.attachmenticon
{
	width: 25px;
	min-width: 25px;
	max-width: 25px;
	margin-top: -5px;
	margin-right: 10px;
	margin-bottom: -10px;
}

.downloadicon
{
	padding: 4px;
	width: 100%;
	height: 100%;
}

.fileicon
{
	padding: 1px;
	width: 100%;
	height: 100%;
}

.pencilicon
{
	padding: 5px;
}

.plusicon
{
	width: 20px;
	height: 20px;
}

.plusicon path
{
	stroke: var(--color04);
}

.settingsicon
{
	padding: 5px;
	width: 100%;
	height: 100%;
}

#deletesite *
{
	fill: var(--fontcolor01);
}

.deleteicon
{
	padding: 3px;
	height: 90px;
	width: 90px;
}

.filtericon
{
	padding: 5px;
}

.icon .deleteicon
{
	padding: 6px;
}

.linkaccounticon
{
	position: absolute;
	top: 6px;
	right: 55px;
	width: 25px;
	border: none;
	border-radius: 50%;
	background-color: transparent;
	color: var(--color02);
	padding: 3px;
}

.linkaccounticon *
{
	fill: var(--color02);
}

.lockicon *
{
	fill: var(--fontcolor01);
}

.emergencybutton
{
	position: absolute;
	right: 10px;
	bottom: 10px;
	box-shadow: none;
}

.icon.emergencybutton:hover
{
	box-shadow: none;
}

.emergencyicon
{
	padding: 5px;
	width: 100%;
	height: 100%;
}

.helpicon
{
	padding: 3px;
	color: #666666;
	stroke: #666666;
}

.helpicon:hover
{
	color: var(--color04);
	stroke: var(--color04);
}

.fullscreenicon
{
	padding: 3px;
}

.fullscreenicon *
{
	stroke-width: 2.75px;
}

.adminbutton,
.libraryrow .adminbutton
{
	display: flex;
	visibility: hidden;
	opacity: 0;
	transition: all var(--transition02);
}

.remindericon
{
	position: absolute;
	top: -49px;
	right: 32px;
	padding: 7px;
	width: 40px;
	height: 40px;
	z-index: 10;
}

.remindericon *
{
	stroke-width: 20.75px;
}

.bellicon
{
	padding: 3px;
	width: 35px;
	height: 35px;
}

.bellicon *
{
	fill: var(--color02);
}

.bellicon:hover
{
	cursor: pointer;
}

.icon.checkbox.selected
{
	background-color: #3374fb;
	color: white;
}

.icon.checkbox:not(.selected):hover
{
	background-color: #dddddd;
	color: var(--fontcolor01);
}

.icon.checkbox.selected:not(.fixed):hover
{
	background-color: color-mix(in srgb, #3374fb, white 30%);
}

.icon.checkbox.fixed
{
	cursor: default;
}

@media (min-width: 900px)
{
	.pageicons>div
	{
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
		border-radius: 50%;
	}

	.libraryrow .editbutton
	{
		top: 0;
		right: 0;
	}

	.bellicon
	{
		padding: 3px;
		width: 40px;
		height: 40px;
	}
}

/*
-------------------------------------------------------
	Boxes
-------------------------------------------------------
*/

#dialogmodal,
#popupmodal
{
	display: none;
	z-index: 10110;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	transition: all 400ms;
}

#dialogbox,
#filebox
{
	position: fixed;
	top: 0px;
	left: 0;
	min-height: 100vh;
	max-height: 100vh;
	height: 100vh;
	overflow-y: scroll;
	overscroll-behavior: none;
	background-color: rgb(255, 255, 255, 1);
	z-index: 10110;
	transform: translateX(100%);
	transition: all var(--transition02);
	padding: 0px 25px 500px 25px;
	min-width: 100%;
	max-width: 100%;
	width: 100%;
}

#filebox
{
	top: 57px;
	z-index: 10300;
}

#popupbox
{
	display: none;
	z-index: 10170;
	position: fixed;
	min-width: 90%;
	max-width: 90%;
	background-color: white;
	box-shadow: var(--shadow02);
	border-radius: var(--borderradius);
	padding: 20px 25px 30px 25px;
	transition: all 400ms ease;
}

#popupbox
{
	z-index: 10301;
	min-width: 90%;
	max-width: 90%;
}

#dialogbox h3,
#dialogbox .togglediv
{
	margin: 0px -15px 15px;
	box-shadow: none;
	padding: 10px 15px;
	background-color: var(--color10);
	color: unset;
	font-weight: normal;
	transition: all var(--transition01);
}

#dialogbox .togglediv
{
	padding-right: 25px;
	cursor: pointer;
}

.formrow
{
	transition: opacity 400ms;
}

#dialogbox h3.togglediv:hover
{
	background-color: #dddddd;
}

#dialogbox>h3,
#filebox>h3,
.panelrow>h3:first-child
{
	margin: 0px -25px 0px -25px;
	padding: 67px 10px 10px 15px;
	font-family: Roboto, sans-serif;
	font-size: 1.3rem;
	font-family: 'Marcellus', Georgia, serif;
	font-size: min(calc(1.2rem + 1vw), 30pt);
	text-align: left;
	border-radius: 0;
	background-color: var(--pagebg);
	color: var(--pageheader);
}

#filebox>h3
{
	padding-top: 10px;
}

.panelrow>h3:first-child
{
	margin: -20px -20px 0 -20px;
	padding: 20px;
	border-top-left-radius: var(--borderradius);
	border-top-right-radius: var(--borderradius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background-color: var(--color01);
	color: var(--color02);
	text-align: center;
}

#popupbox>h3
{
	margin: -20px -25px 0px -25px;
	padding: 15px 5px;
	font-family: Roboto, sans-serif;
	font-weight: normal;
	font-size: 1.3rem;
	text-align: center;
	border-top-left-radius: var(--borderradius);
	border-top-right-radius: var(--borderradius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.closedialog
{
	display: flex;
	justify-content: end;
	margin-top: -10px;
	margin-right: -10px;
	margin-bottom: -10px;
}

br-line
{
	display: block;
	width: 100%;
	height: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid var(--color11);
}

.progressbar
{
	height: 20px;
	background-color: #dddddd;
	border-radius: var(--borderradius);
}

.progressbar>div
{
	width: 0%;
	height: 100%;
	background-color: var(--color01);
	border-radius: var(--borderradius);
}

@media (min-width: 600px)
{
	#popupbox
	{
		max-width: 500px;
		min-width: 500px;
	}
}

@media (min-width: 900px)
{
	#dialogbox
	{
		display: none;
		z-index: 10170;
		position: fixed;
		background-color: white;
		box-shadow: var(--shadow02);
		border-radius: var(--borderradius);
		padding: 20px 25px 30px 25px;
		transition: all 400ms ease;
		max-width: 700px;
		min-width: 700px;
		min-height: unset;
		min-height: unset;
		max-height: unset;
		height: unset;
		overflow-y: unset;
	}

	#filebox
	{
		display: none;
		top: 64px;
		width: 100vw;
		min-width: unset;
		max-width: 1140px;
		min-height: unset;
		min-height: 100vh;
		max-height: unset;
		height: unset;
		overflow-y: unset;
		border-radius: var(--borderradius);
		box-shadow: var(--shadow02);
		padding: 20px 25px 30px 25px;
		background-color: white;
		transition: all 400ms ease;
	}

	#filebox>h3
	{
		margin-top: -20px;
		padding: 10px 25px;
		border-top-left-radius: var(--borderradius);
		border-top-right-radius: var(--borderradius);
	}

	#dialogbox>h3,
	#popupbox>h3,
	.panelrow>h3:first-child
	{
		margin: -20px -25px 0px -25px;
		padding: 25px 40px 25px 40px;
		font-family: Roboto, sans-serif;
		font-weight: normal;
		font-size: 18pt;
		text-align: center;
		border-top-left-radius: var(--borderradius);
		border-top-right-radius: var(--borderradius);
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		background-color: var(--color01);
		color: var(--color02);
	}

	.panelrow>h3:first-child
	{
		margin: -20px -20px 0 -20px;
	}
}

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

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

.panelrow>form
{
	padding-left: 10px;
}

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

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

.label
{
	padding-top: 10px;
	font-weight: bold;
	-ms-flex-align: start;
}

sub-label
{
	font-weight: normal;
}

.emptylabel
{
	display: none;
}

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

input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type='file'],
input[type='url'],
textarea,
select,
.textbox
{
	width: 100%;
	outline: none;
	border: 1px solid var(--color12);
	border-radius: var(--borderradius);
	padding: 5px 10px;
	background-color: white;
	font-size: var(--fontsize01);
	color: #3374fb;
	/* background gradiant to prevent inner shaow on old mobile safari */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(0, 0%, 100%, 0)), to(hsla(0, 0%, 100%, 0)));
	background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0));
	transition: all 300ms;
}

select
{
	padding: 8px;
}

input:focus,
textarea:focus,
select:focus
{
	border-color: #3374fb;
}

input[type="date"]
{
	font-family: var(--fontfamily01);
}

textarea
{
	font-family: var(--fontfamily01);
	resize: vertical;
	transition: all 500ms;
	height: 60px;
}

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

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

input:disabled,
textarea:disabled,
.textbox.disabled
{
	color: #999999;
}

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

.buttons
{
	display: flex;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	width: 100%;
}

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

.buttons.mobilewidth
{
	display: block;
}

.buttons.mobilewidth .button
{
	float: unset;
	margin: unset;
}

.yearbuttons
{
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
}

.yearbuttons .yearbutton
{
	float: left;
	margin: 0px 10px 0px 0px;
}

.mandatory::before
{
	content: "\2022";
	position: absolute;
	top: 3px;
	left: -13px;
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--fontcolor04);
}

.disabled
{
	color: #999999;
}

#formsubmit
{
	display: none;
	z-index: 100999;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.singlerow
{
	flex-direction: row;
}

.singlerow .label
{
	flex-basis: var(--col03);
	max-width: var(--col03);
	padding-top: 0;
	align-self: center;
}

.singlerow .mandatory::before
{
	top: -7px;
}

@media (min-width: 900px)
{
	#subframe>.form
	{
		padding: 0;
	}

	.onerow
	{
		flex-direction: row;
	}

	.onerow .label
	{
		flex-basis: var(--col03);
		max-width: var(--col03);
		padding-top: 0;
		align-self: center;
	}

	.onerow .mandatory::before
	{
		top: -7px;
	}

	.buttons.mobilewidth
	{
		display: flex;
	}

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

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

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

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

.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: none;
}

@media (min-width: 900px)
{
	.helptable td:first-child
	{
		white-space: nowrap;
	}
}

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

.manageavailability
{
	justify-content: flex-end;
}

.eventrow
{
	display: flex;
	flex-direction: column;
	padding: 10px;
	cursor: pointer;
	transition: all var(--transition01);
}

.eventrow:hover
{
	background-color: #f4f4f4;
}

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

.eventrow.hasnote::after
{
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	min-height: 8px;
	height: 8px;
	min-width: 8px;
	width: 8px;
	border-radius: 0;
	background-color: var(--color01);
	padding-right: 9px;
	padding-bottom: 9px;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
	z-index: 99;
}

.event-details h4
{
	width: 80%;
}

.event-status
{
	display: flex;
	position: absolute !important;
	top: 0px;
	right: 0px;
	height: 100%;
	width: 30px;
	justify-content: center;
	-webkit-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: var(--borderradius);
}

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

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

.addtocalendar
{
	float: right;
	margin-bottom: 15px;
}

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

add-tocalendar-button
{
	width: 165px;
	float: right;
}

.thumbsup
{
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 0.8rem;
	padding: 1px 6px 0;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

.confirmed
{
	background-color: var(--color01);
	background-color: var(--fontcolor01);
	background-color: #444444;
	color: white;
}

.undecided
{
	background-color: #999999;
	color: white;
}

.turneddown,
.cancelled
{
	border: 1px solid #bbbbbb;
	color: #aaaaaa;
}

.panelrow:has(.teamcolours1)
{
	padding-left: 30px;
}

.panelrow:has(.hideteam)
{
	padding-right: 30px;
}

.teamcolours1
{
	position: absolute;
	top: 0;
	left: 0;
	min-width: 20px;
	min-height: 50%;
	border-top-left-radius: var(--borderradius);
}

.teamcolours2
{
	position: absolute;
	bottom: 0;
	left: 0;
	min-width: 20px;
	min-height: 50%;
	border-bottom-left-radius: var(--borderradius);
}

.teamhidden .panelrow,
.teamhidden .teamcolours1,
.teamhidden .teamcolours2
{
	background-color: #f0f0f0 !important;
}

.teamhidden .teamcolours1,
.teamhidden .teamcolours2
{
	border-right: 1px solid #cccccc;
}

.hideteam
{
	display: flex;
	align-items: center;
	justify-items: center;
	position: absolute;
	top: 0;
	right: 5px;
	min-width: 30px;
	min-height: 100%;
}

.hideteam .closeicon
{
	width: 20px;
}

.hideteam .closeicon *
{
	fill: var(--fontcolor01);
}

.eventmap
{
	margin-top: 5px;
	height: 200px;
}

.copytext
{
	background-color: #0c5dd6;
	color: white;
}

.deleteattachmentbutton
{
	width: 100%;
	height: 0;
}

.deleteattachmentbutton>a
{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

.eventattachment
{
	display: flex;
	flex-direction: row;
	justify-items: center;
	align-items: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

.attachment
{
	transition: opacity var(--transition01);
}

@media (min-width: 900px)
{
	.eventrow
	{
		flex-direction: row;
	}

	.eventrow:last-child .event-status
	{
		border-bottom-right-radius: var(--borderradius);
	}

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

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

	.eventmap
	{
		height: 300px;
	}

	.deleteattachmentbutton
	{
		width: 100%;
		height: 45px;
	}
}

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

#numbersframe
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: -7.5px;
}

#numbersmessage
{
	clear: both;
	padding: 0 0px 10px 5px;
}

.eventblock
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-basis: 100%;
	margin: 7.5px 0;
	border-radius: var(--borderradius);
	box-shadow: var(--shadow01);
}

.eventblock:last-child
{
	margin-bottom: 0;
}

.extragap
{
	margin-top: 20px;
}

.groupblock
{
	display: none;
}

.eventheader
{
	display: none;
	flex-basis: 100%;
	min-width: 100%;
	border-bottom: 1px solid var(--color11);
	border-top-left-radius: var(--borderradius);
	border-top-right-radius: var(--borderradius);
	background-color: white;
	padding: 10px 15px !important;
	color: var(--fontcolor01);
	cursor: pointer;
	transition: background-color 500ms, color 500ms;
	z-index: 101;
}

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

.eventblockactive .eventheader
{
	position: sticky;
	position: -webkit-sticky;
	top: 55px;
}

.eventblockactive .groupheadercontainer
{
	position: sticky;
	position: -webkit-sticky;
	top: 123px;
}

.eventtitle
{
	font-weight: bold;
	width: 80%;
}

.eventdate
{
	width: 90%;
}

.timesbreak
{
	display: none;
}

.timesdash
{
	display: inline-block;
}

.eventlock
{
	position: absolute;
	bottom: 10px;
	right: 30px;
	width: 20px;
	height: 20px;
}

.eventlocktick
{
	position: absolute;
	top: -12px;
	left: -12px;
	font-weight: bold;
	font-size: 1.5rem;
}

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

.eventshadow
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mobiledetails
{
	position: relative;
	display: none;
	min-width: 100%;
	border-bottom: 1px solid #777777;
	background-color: white;
	padding: 5px 15px;
	cursor: pointer;
}

.groupheadercontainer
{
	min-width: 100%;
	display: none;
	z-index: 100;
}

.groupheader
{

	display: flex;
	flex-direction: row;
	flex-basis: 100%;
	width: 100%;
	transition: box-shadow 300ms;
}

.groupheadertext
{
	display: none;
	flex-basis: 100%;
	min-width: 100%;
	border-top: 1px solid var(--color11);
	border-bottom: 1px solid var(--color11);
	padding: 10px 15px;
}

.groupheadertext.expanded
{
	position: sticky;
	position: -webkit-sticky;
}

.plusminus
{
	display: flex;
	position: absolute !important;
	top: 0;
	right: 0;
	width: 30px;
	height: 100%;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	border-bottom: 1px solid #888888;
	background-color: #ffffff;
}

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

.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-bottom: 1px solid var(--color11);
	border-right: 1px solid var(--color11);
	background-color: white;
	padding: 5px 5px 5px 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color 250ms;
}

.name:last-child
{
	border-bottom: 1px solid #888888;
}

.lastnameslist .name:last-child
{
	border-bottom-left-radius: var(--borderradius);
	border-bottom: none;
}

.nameslist0 .name.myrow
{
	display: block;
	border-bottom-left-radius: var(--borderradius);
}

.eventblockactive .name.myrow
{
	border-radius: 0;
}

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

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

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

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

.option:last-child
{
	border-bottom: 1px solid #888888;
}

.lastnameslist .option:last-child
{
	border-bottom: none;
}

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

.lastoptionslist .option:last-child
{
	border-bottom: none;
	;
}

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

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

.myrow
{
	border-bottom: 1px solid #bbbbbb !important;
}

.eventblockactive .myrow,
.mypreviousrow
{
	border-bottom: 1px solid #777777 !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;
}

.optionnoteflag
{
	position: absolute;
	top: 0px;
	left: 0px;
	min-height: 20px;
	height: 20px;
	min-width: 20px;
	width: 20px;
	border-radius: 0;
	background-color: var(--color01);
	padding-right: 9px;
	padding-bottom: 9px;
	clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
	z-index: 99;
}

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

.totallabel
{

	flex-basis: calc(66% - 30px);
	min-width: calc(66% - 30px);
	max-width: calc(66% - 30px);
	border-right: 1px solid #bbbbbb;
	border-bottom: 1px solid #888888;
	background-color: white;
	padding: 8px 5px 8px 15px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	z-index: 100;
}

.lastgroup:not(.opengroup) .totallabel
{
	border-bottom-left-radius: var(--borderradius);
	border-bottom: none;
}

.lastgroup:not(.opengroup) .plusminus
{
	border-bottom-right-radius: var(--borderradius);
	border-bottom: none;
}

.totalamount
{
	display: flex;
	justify-content: center;
	-webkit-justify-content: center;
	flex-basis: 34%;
	min-width: 34%;
	max-width: 34%;
	border-right: 1px solid #bbbbbb;
	border-bottom: 1px solid #888888;
	background-color: #f0f0f0;
	background-color: white;
	font-weight: bold;
	padding: 8px 0px;
	color: #000000;
	text-align: center;
	z-index: 100;
}

.lastgroup:not(.opengroup) .totalamount
{
	border-bottom: none;
}

.totalamount>.split
{
	border-right: 1px solid #bbbbbb;
	margin-top: -8px;
	margin-bottom: -8px;
	z-index: 98;
}

.totallabel.expanded
{
	position: sticky;
	position: -webkit-sticky;
}

.totalamount.expanded
{
	position: sticky;
	position: -webkit-sticky;
}

.totalamount.expanded>.split
{
	border-right: 1px solid #bbbbbb;
}

.split
{

	flex: 1;
	margin-top: -5px;
	margin-bottom: -5px;
	padding: 1px 0px 9px 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);
}

.split:last-child
{
	border: 0;
}

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

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

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

.optionfiller:last-child
{
	border-bottom: 1px solid #888888;
}

.lastoptionfillerslist .optionfiller:last-child
{
	border-bottom-right-radius: var(--borderradius);
	border: none;
}

.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;
	border-bottom-right-radius: var(--borderradius);
}

.eventblockactive .optionfiller.myrow
{
	border-radius: 0;
}

.eventstatus
{
	font-weight: bold;
}

.eventmore
{
	position: absolute;
	top: 6px;
	right: 3px;
}

.eventmore>.moreicon
{
	width: 25px;
	fill: var(--fontcolor01);
	border-radius: 50%;
	transition: all 400ms;
}

.eventmore>.moreicon:hover
{
	background-color: #ffffff;
}

.eventheader>.eventmore
{
	display: none;
}

@media (min-width: 900px)
{

	#numbersframe
	{
		flex-direction: row;
		margin-top: -20px;
	}

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

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

	.groupheadercontainer
	{
		display: flex;
		position: sticky;
		position: -webkit-sticky;
	}

	.groupheader
	{
		box-shadow: none;
	}

	.groupheadertext
	{
		position: sticky;
		position: -webkit-sticky;
		top: 60px;
		margin-top: 20px;
		border-top: 0;
		border-bottom: none;
		padding: 15px;
		background-color: var(--color01);
		color: var(--color02);
		font-size: var(--fontsize01);
		font-weight: normal;
	}

	.groupheaderblank
	{
		margin-top: 20px;
	}

	/* names Block */

	.namesblock
	{
		display: flex;
		flex-direction: column;
		position: sticky;
		position: -webkit-sticky;
		left: 0;
		width: 170px;
		border-bottom-left-radius: var(--borderradius);
		z-index: 102;
	}

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

	.namesblock>.groupheaderblank
	{
		display: none;
	}

	.namesblock>.namesheader
	{
		display: block;
		position: sticky;
		position: -webkit-sticky;
		top: 115px;
		flex-basis: 100% !important;
		min-width: 100% !important;
		background-color: #ffffff;
		z-index: 101;
	}

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

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

	.namesblock .name:first-child
	{
		border-top: none;
	}

	.namesblock .name:last-child
	{
		border-bottom-left-radius: var(--borderradius);
	}

	.namesblock>.totallabel
	{
		position: sticky;
		position: -webkit-sticky;
		display: block;
		flex-basis: 100% !important;
		min-width: 100% !important;
		border-right: 1px solid #bbbbbb;
		border-bottom: 1px solid #bbbbbb;
		background-color: #dddddd;
		font-weight: normal;
		color: #000000;
		z-index: 101;
	}

	/* Event Block */

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

	.extragap
	{
		margin: 0;
	}

	.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;
	}

	.eventtitle
	{
		width: 100%;
	}

	.eventdate
	{
		width: 100%;
		font-size: 0.95rem;
	}

	.meettime
	{
		font-size: 0.95rem;
	}

	.eventshadow
	{
		display: none;
	}

	.eventlock
	{
		position: absolute;
		bottom: 10px;
		right: 10px;
	}

	.groupheadertext
	{
		display: none;
	}

	.groupheaderblank
	{
		display: block;
		position: sticky;
		position: -webkit-sticky;
		top: 60px;
		background-color: var(--color01);
		padding: 15px;
		z-index: 102;
	}

	.thumbsup
	{
		position: absolute;
		top: unset;
		right: unset;
		bottom: 9px;
		left: 13px;
		font-size: 0.8rem;
		padding: 1px 8px 1px 6px;
		border-top-right-radius: 5px;
		border-bottom-left-radius: 0;
		border-radius: 5px;
	}

	.eventrow .thumbsup
	{
		top: unset;
		left: unset;
		bottom: 10px;
		right: 10px;
	}

	.eventblock:last-child .groupheaderblank
	{
		border-top-right-radius: var(--borderradius);
	}

	.eventblock:last-child .option:last-child
	{
		border-bottom-right-radius: var(--borderradius);
	}

	.groupheaderblank2
	{
		margin-top: 20px
	}

	.plusminus
	{
		display: none;
	}

	.togglenames
	{
		display: none;
	}

	/* Events Header */

	.namesheader
	{
		display: none;
		flex-basis: 50%;
		min-height: 200px;
		min-width: 50%;
		max-width: 50%;
		border-bottom: 1px solid #bbbbbb;
		border-right: 1px solid var(--color11);
		z-index: 101;
	}

	.eventheader
	{
		display: block;
		position: sticky;
		position: -webkit-sticky;
		top: 115px;
		margin-top: 0px;
		min-height: 200px;
		border-radius: 0;
		border-bottom: 1px solid #bbbbbb;
		border-right: 1px solid var(--color11);
		padding-top: 30px !important;
		padding-bottom: 40px !important;
		overflow: hidden;
	}

	.eventheader:hover
	{
		background-color: #eeeeee;
	}

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

	/* Names List */

	.nameslist
	{
		display: none;
	}

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

	.name:last-child
	{
		border-bottom: none;
	}

	.nameslist0 .name.myrow
	{
		display: block;
		border-bottom-left-radius: 0;
	}

	/* Options List */

	.optionslist
	{
		display: block;
	}

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

	.option:last-child
	{
		border-bottom: none;
	}

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

	.option>.split:first-child
	{
		border-left: 1px solid var(--color11);
	}

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

	.optionfillerslist
	{
		display: none;
	}

	/* Totals */

	.totallabel
	{
		display: none;
	}

	.totalamount
	{
		position: sticky;
		position: -webkit-sticky;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		border-radius: 0;
		border-right: 1px solid #bbbbbb;
		border-bottom: 1px solid #bbbbbb;
		background-color: #dddddd;
		color: var(--fontcolor01);
		color: #000000;
		font-weight: normal;
	}

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

	.totalamount>.split
	{
		border-right: 1px solid #bbbbbb;
		padding: 6px 0 10px 0;
		z-index: 100;
	}

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

	.lastgroup:not(.opengroup) .totalamount
	{
		border-bottom: 1px solid #bbbbbb;
	}

	.myrow,
	.mypreviousrow
	{
		border-bottom: 1px solid #777777 !important;
	}

	.eventmore
	{
		position: absolute;
		top: 3px;
		right: 3px;
	}

	.eventmore>.moreicon
	{
		width: 35px;
		fill: var(--color04);
		fill: var(--fontcolor01);
		border-radius: 50%;
		transition: all 400ms;
		padding: 5px;
	}

	.eventmore>.moreicon:hover
	{
		background-color: #ffffff;
	}

	.eventheader>.eventmore
	{
		display: block;
	}

	/* Order */

	.groupheadertext0
	{
		order: 1;
	}

	.groupheaderblank0
	{
		order: 2;
	}

	.namesheader0
	{
		order: 3;
	}

	.eventheader0
	{
		order: 4;
	}

	.nameslist0
	{
		order: 7;
	}

	.optionslist0
	{
		order: 8;
	}

	.groupheadercontainer0
	{
		order: 5;
	}

	.totallabel0
	{
		order: 6;
	}

	.groupheadertext1
	{
		order: 11;
	}

	.groupheaderblank1
	{
		order: 12;
	}

	.namesheader1
	{
		order: 13;
	}

	.eventheader1
	{
		order: 14;
	}

	.nameslist1
	{
		order: 17;
	}

	.optionslist1
	{
		order: 18;
	}

	.groupheadercontainer1
	{
		order: 14;
	}

	.totallabel1
	{
		order: 15;
	}

	.groupheadertext2
	{
		order: 21;
	}

	.groupheaderblank2
	{
		order: 22;
	}

	.namesheader2
	{
		order: 23;
	}

	.eventheader2
	{
		order: 24;
	}

	.nameslist2
	{
		order: 27;
	}

	.optionslist2
	{
		order: 28;
	}

	.groupheadercontainer2
	{
		order: 25;
	}

	.totallabel2
	{
		order: 26;
	}

	.groupheadertext3
	{
		order: 31;
	}

	.groupheaderblank3
	{
		order: 32;
	}

	.namesheader3
	{
		order: 33;
	}

	.eventheader3
	{
		order: 34;
	}

	.nameslist3
	{
		order: 37;
	}

	.optionslist3
	{
		order: 38;
	}

	.groupheadercontainer3
	{
		order: 35;
	}

	.totallabel3
	{
		order: 36;
	}
}

/*
-------------------------------------------------------
	Calendar
-------------------------------------------------------
*/

.calendar
{
	flex: 1;
	box-shadow: var(--shadow01);
	background-color: white;
	border-radius: var(--borderradius);
	width: 100%;
}

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

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

.weekday
{
	flex: 1;
	padding: 5px 0;
	text-align: center;
	border-left: 1px solid #eeeeee;
	font-weight: bold;
}

.month
{
	flex: 1;
	width: 100%;
	height: calc(100vh - 410px);
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #eeeeee;
	border-bottom-left-radius: var(--borderradius);
	border-bottom-right-radius: var(--borderradius);
}

.week
{
	flex: 1;
	display: flex;
	flex-direction: row;
	background-color: white;
}

.week .day
{
	flex: 1;
	display: flex;
	flex-direction: column;
	border-top: 1px solid #eeeeee;
	border-left: 1px solid #eeeeee;
}

.daydate
{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 2px;
	padding-top: 2px;
	padding-bottom: 1px;
	font-size: .85rem;
}

.first
{
	font-weight: bold;
}

.today
{
	background-color: var(--color03);
	color: var(--color04);
	min-width: 30%;
	padding: 0 5px;
	text-align: center;
	border-radius: var(--borderradius);
}

.calevent,
.calmore
{
	position: absolute;
	padding: 5px 3px 0 3px;
}

.calevent>div,
.calmore>div
{
	font-size: 14px;
	padding-left: 5px;
	overflow: hidden;
	display: flex;
	align-items: center;
	white-space: nowrap;
	border-radius: var(--borderradius);
	cursor: pointer;
	transition: all var(--transition01);
	font-family: Roboto, Helvetica, Arial, sans-serif;
}

#popupbox .calevent
{
	position: relative;
}

.calmore
{
	width: calc(1/7*100%);
	display: none;
	padding-top: 4px;
}

.calmore>div
{
	display: flex;
	justify-content: center;
}

.invisible
{
	visibility: hidden;
}

.calevent>.contleft
{
	position: absolute;
	top: 2.5px;
	left: 2.5px;
	width: 15px;
	height: 100%;
	background-color: white;
	z-index: 1;
	clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
}

.calevent>.contright
{
	position: absolute;
	top: 2.5px;
	right: 2.5px;
	width: 15px;
	height: 100%;
	background-color: white;
	z-index: 1;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 100% 50%);
}

.contleft>div
{
	padding-left: 12px;
}

.status0>div:first-child
{
	background-color: #999999;
	color: #ffffff;
}

.status0>div:first-child:hover,
.status0>div:first-child.hover
{
	background-color: #777777;
}

.status1>div:first-child
{
	background-color: #444444;
	color: #ffffff;
}

.status1>div:first-child:hover,
.status1>div:first-child.hover
{

	background-color: #000000;
}

.calicons
{
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}

.calicons>div
{
	margin-right: 7.5px;
	border-radius: 50%;
	width: 35px;
	height: 35px;
	min-width: 35px;
	min-height: 35px;
	background-color: var(--color01);
	box-shadow: none;
	border: none;
	cursor: pointer;
	transition: all 200ms;
}

.calicons>div *
{
	stroke: var(--color02);
}

.calicons .todayicon
{
	border: 2px solid var(--color02);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	min-width: 30px;
	min-height: 30px;
	width: 30px;
	height: 30px;
	font-weight: bold;
}

#fullscreen
{
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	display: none;
	z-index: 10108;
	background-color: #ffffff;
	flex-direction: column;
}

#fullscreen .calheader .panelheader
{
	border-radius: 0;
}

#fullscreen #months
{
	flex: 1;
	display: flex;
	flex-direction: column;
}

#fullscreen .month
{
	height: 100%;
}

#fullscreen .swipe-wrap
{
	flex: 1;
}

.swipe
{
	overflow: hidden;
	visibility: hidden;
	position: relative;
}

.swipe-wrap
{
	overflow: hidden;
	position: relative;
}

.swipe-wrap>div
{
	float: left;
	width: 100%;
	position: relative;
}

@media (hover:hover)
{
	.calicons>div:hover
	{
		background-color: var(--color02);
		stroke: var(--color02)
	}

	.calicons>div:hover *
	{
		stroke: var(--color01);
	}

	.calicons .todayicon:hover
	{
		color: var(--color01);
		font-weight: bold;
	}
}

@media (min-width: 900px)
{
	.daydate
	{
		font-size: var(--fontsize01);
	}
}

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

.dancesframe
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.dancegroup
{
	clear: both;
}

.dancerow
{

	display: flex;
	flex-direction: row;
	padding: 10px;
}

.dance
{

	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;
}

.dancerow
{
	flex-wrap: wrap;
	padding: 10px;
}

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

.danceresource
{
	padding: 5px 0 0px 0;
	xborder-bottom: 1px solid var(--color11);
	white-space: nowrap;
}

.danceresource:first-child
{
	padding-top: 0;
}

.danceresource:last-child
{
	border-bottom: none;
}

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

.resourcebuttons
{
	display: flex;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	flex: 1;
}

.resourcebuttons .button
{
	box-shadow: none;
}

.resourcebuttons .button:hover
{
	box-shadow: none;
}

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

.youtubethunmbnail
{
	display: flex;
	width: 160px;
	min-width: 160px;
	height: 90px;
	overflow: hidden;
	border-radius: var(--borderradius);
	background-color: var(--color01);
	background-color: var(--color10);
	color: var(--color11);
	box-shadow: var(--shadow01);
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
}

.youtubethunmbnail.novideo
{
	box-shadow: none;
}

.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: var(--borderradius);
	cursor: pointer;
}

.dancevideo
{
	display: none;
	flex: none;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-top: 20px;
	border-radius: var(--borderradius);
	background-color: var(--color10);
	padding: 0;
	z-index: 10120;
}

.dancevideoframe
{
	min-width: 100%;
	max-width: 100%;
	border-radius: var(--borderradius);
	transition: opacity 2000ms;
}

.dancevideonotes
{
	display: none;
	width: 100%;
	margin-top: 20px;
}

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

#progress
{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	width: 100%;
	height: 100%;
	border-radius: var(--borderradius);
	background-color: var(--color01);
	color: var(--color02);
}

#progressbar
{
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	border-radius: var(--borderradius);
	background-color: var(--color03);
}

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

	.dancerow
	{
		padding: 15px;
	}

	.danceresource
	{
		flex-direction: row;
	}
}

/*
-------------------------------------------------------
	Library
-------------------------------------------------------
*/
#documentframe
{
	display: flex;
	flex-grow: 1;
	width: 100%;
}

#docframe
{
	margin: 0 -25px;
}

#docframe>div,
#docframe>iframe
{
	width: 100%;
	height: 75vh;
	border: none;
}

#txtframe
{
	width: 100%;
	margin: 0 -25px;
	padding: 15px;
}

#txtframe>div,
#txtframe>iframe
{
	xwidth: 100%;
	height: 100vh;
	border: none;
}

#imageframe
{
	display: flex;
	justify-content: center;
	margin: 0 -25px;
}

#imageframe img
{
	max-width: 100%;
}

.libraryrow
{
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	padding: 7px 15px 2px 15px;
}

.libraryrow:hover
{
	background-color: #f4f4f4;
}

.activelibraryrow
{
	background-color: #dddddd;
}

#folderlist
{
	width: 90%;
	min-width: 90%;
	max-width: 90%;
}

.upfolder
{
	display: flex;
	position: absolute;
	right: 0px;
	top: 0px;
	height: 100%;
	width: 50px;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	font-family: var(--fontfamily01);
	transform: rotate(-90deg);
}

.upfolder>span
{
	display: flex;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	width: 35px;
	height: 35px;
	color: var(--color02);
	xborder: 2px solid var(--color02);
	padding: 2px 8px;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
	font-size: 18pt;
	transition: all var(--transition01);
}

.upfolder>span:hover
{
	background-color: var(--color02);
	color: var(--color01);
}

.downloadfile
{
	position: absolute;
	top: 2px;
	right: 5px;
}

.moreicon
{
	width: 35px;
	border-radius: 50%;
	transition: all 300ms;
	padding: 5px;
	margin-top: -5px;
	margin-bottom: -8px;
}

.moreicon:hover
{
	background-color: #ffffff;
}

#videoframe
{
	margin: 0 -25px;
}

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

.emergencycontacts
{
	display: none;
}

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

.team2hidden
{
	display: none;
}

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

.permissionswideheader
{
	display: none;
}

.permissionsblank
{
	display: none;
}

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

.memberpermissions
{
	display: flex;
	flex-direction: column;
	margin: 15px 0px;
	border-radius: var(--borderradius);
	box-shadow: var(--shadow01);
}

.permissionswideheader~.memberpermissions
{
	margin-top: 0px;
}

.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%;
	border-top-left-radius: var(--borderradius);
	border-top-right-radius: var(--borderradius);
	background-color: white;
	padding: 10px 5px 10px 15px;
	color: var(--fontcolor01);
	font-weight: bold;
	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;
	-webkit-justify-content: center;
	align-items: center;
	transition: background-color 300ms;
}

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

.notallowed
{
	display: none;
}

.lastpermissionname
{
	border-bottom-left-radius: var(--borderradius);
}

.lastpermissionvalue
{
	border-bottom-right-radius: var(--borderradius);
}

.deletemessage
{
	margin-bottom: 10px;
	border-radius: var(--borderradius);
	padding: 20px;
	background-color: rgb(156, 12, 12);
	color: white;
}

.lastsignin
{
	position: absolute;
	bottom: 10px;
	left: 15px;
	font-size: .75rem;
}

@media (min-width: 900px)
{

	.pagefixedwidth
	{
		min-width: 1140px;
	}

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

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

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

	.permissionsblock
	{
		margin-bottom: 0px;
	}

	.permissionsmembername
	{
		position: sticky;
		position: -webkit-sticky;
		left: 0;
		flex-basis: 200px;
		min-width: 200px;
		max-width: 200px;
		border-radius: 0;
		border-top: 1px solid var(--color11);
		background-color: white;
		padding: 5px 5px 5px 15px;
		color: var(--fontcolor01);
		font-weight: normal;
		overflow: hidden;
	}

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

	.permissionslist .permissionname
	{
		display: none;
	}

	.permissionname
	{
		flex-basis: 52px;
		min-width: 52px;
		max-width: 52px;
		height: 100px;
		border: 0;
		background-color: unset;
		padding: 5px;
		color: var(--color02);
		font-size: 0.9rem;
		text-align: left;
		overflow: visible;
	}

	.permissionname.odd>p
	{
		top: 10px;
	}

	.permissionname.even>p
	{
		bottom: 10px;
	}

	.permissionname>p
	{
		position: absolute;
		margin-bottom: 0;
		line-height: 1.2;
	}

	.permissionname:last-child
	{
		border-radius: 0 var(--borderradius) 0 0;
	}

	.permissionvalue
	{
		flex-basis: 52px;
		min-width: 52px;
		max-width: 52px;
		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;
	}

	.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);
	}

	.permissionswideheader
	{
		display: flex;
		position: sticky;
		position: -webkit-sticky;
		top: 38px;
		flex-direction: row;
		border-radius: var(--borderradius) var(--borderradius) 0 0;
		background-color: var(--color01);
	}

	.memberpermissions:last-child .permissionsmembername
	{
		border-bottom-left-radius: var(--borderradius);
	}

	.memberpermissions:last-child .permissionvalue:last-child
	{
		border-bottom-right-radius: var(--borderradius);
	}

	.notallowed
	{
		display: block;
	}

	.lastpermissionname
	{
		border-bottom-left-radius: 0px;
	}

	.lastpermissionvalue
	{
		border-bottom-right-radius: 0px;
	}
}

/*
-------------------------------------------------------
	Settings
-------------------------------------------------------
*/

.settingspanel
{
	text-align: center;
	cursor: pointer;
}

.settingspanel .panelrow
{
	padding: 30px;
	transition: all 500ms;
}

.settingspanel .panelrow:hover
{
	box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3);
	background-color: var(--color10);
}

div.settingsicon
{
	width: 100px;
	margin: auto;
}

#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;
}

.iconselector
{
	border-radius: var(--borderradius);
	border: 5px solid white;
	cursor: pointer;
}

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

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

	.settingsmenu li
	{
		width: auto;
	}
}

/*
-------------------------------------------------------
	Subscription
-------------------------------------------------------
*/

.subscriptionpanel td
{
	padding: 10px 20px 10px 0;
}

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

.subsrow>div
{
	display: flex;
	flex-grow: 1;
	padding-right: 10px;
	justify-content: end;
	align-items: center;
}

.subsrow>div:first-child
{
	padding-right: 0;
	justify-content: start;
}

.subsrow>div:last-child
{
	text-align: left;
	padding-right: 0;
}

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

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

.memberarrow
{
	display: none;
}

.eventarrow
{
	position: absolute;
	bottom: 15px;
	right: 10px;
	border-color: var(--fontcolor01);
}

.videoarrow
{
	position: absolute;
	bottom: 10px;
	right: 10px;
	border-color: white;
}

.eventdetailsarrow
{
	position: absolute;
	top: 12.5px;
	right: 12px;
	border-color: solid var(--color04);
	transform: rotate(-45deg)
}

.togglearrow
{
	position: absolute;
	top: calc(50% - 5px);
	right: 15px;
}

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

.arrow.link,
.arrow.forward,
.arrow.arrowright
{
	transform: rotate(-45deg);
}

.arrow.back,
.arrow.arrowleft
{
	transform: rotate(135deg);
	border-color: var(--color04);
}

@media (min-width: 900px)
{

	.memberarrow
	{
		display: block;
		position: absolute;
		top: 14px;
		right: 10px;
		border-color: var(--color02);
	}

	#membername:hover .memberarrow,
	#membername.active .memberarrow
	{
		border-color: var(--color04);
	}

	.eventarrow
	{
		display: none;
	}
}

/*******************************************************************
	Library
********************************************************************/

.filename
{
	width: 80%;
	word-wrap: break-word;
}

/*******************************************************************
 Toggle Switch
********************************************************************/
/* The switch - the box around the slider */
.switch
{

	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:hover
{
	background-color: var(--color03);
}

.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%;
}

/*
-------------------------------------------------------
	payments
-------------------------------------------------------
*/

.paymentstable
{
	width: 100%;
	table-layout: fixed;
}

.paymentstable td
{
	border-bottom: 1px solid #eeeeee;
	padding: 3px 10px 3px 0;
	vertical-align: top;
}

.paymentstable td:first-child
{
	padding-right: 20px;
	font-weight: bold;
}

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

#audioframe
{
	display:flex;
	justify-content: center;
	margin: 0 -10px;
}

#audioframe>div
{
	background-color: #dddddd;
	margin: 0 10px;
	width: 600px;
	max-width: 100%;
	padding: 15px 15px 55px 15px;
	border-radius: var(--borderradius);
}

#audioframe .audioplayer
{
	margin: 0 auto;
}

#audiotile
{
	height: 200px;
	width: 200px;
	margin: 20px auto;
	background-color: var(--color01);
	border-radius: 10px;
}

#audiotile svg
{
	padding: 40px;
	fill: color-mix(in srgb, var(--color01), var(--color02) 50%);
}

.audioplayer
{
	width: 90%;
	max-width: 500px;
}

.audiocontrols
{
	width: 80px;
	height: 80px;
	margin: 0 auto;
	cursor: pointer;
}

.audioload
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 15px;
	border-radius: var(--borderradius);
	background-color: white;
	cursor: pointer;
}

.audioplay
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 15px;
	border-radius: var(--borderradius);
	background-color: var(--color03);
	cursor: pointer;
	transition: all 200ms;
}

.audiotime
{
	position: absolute;
	top: -30px;
	left: 0px;
	font-weight: bold;
	color: var(--fontcolor01);
}

.audioleft
{
	position: absolute;
	top: -30px;
	right: 0px;
	font-weight: bold;
	color: var(--fontcolor01);
}

.play
{
	display:none;
}

.pause
{
	display: none;
	padding: 3px;
}



@media (min-width: 900px)
{
	.audioplayer
	{
		margin-left: 15px;
	}
}

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

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

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

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

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

.logdate
{
	white-space: nowrap;
}

a.log
{
	font-family: 'Courier New', Courier, monospace;
	padding: 5px;
}

a.log:hover
{
	background-color: yellow;
}

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

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

.logline
{
	transition: all 200ms;
}

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

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

.username
{
	white-space: nowrap;
}

/*
-------------------------------------------------------
	Animated Ellipsis
-------------------------------------------------------
*/
#uploading
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%)
}

.lds-ellipsis
{
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}

.lds-ellipsis div
{
	position: absolute;
	top: 0px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--color01);
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1)
{
	left: 6px;
	animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2)
{
	left: 6px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3)
{
	left: 26px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4)
{
	left: 45px;
	animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1
{
	0%
	{
		transform: scale(0);
	}

	100%
	{
		transform: scale(1);
	}
}

@keyframes lds-ellipsis3
{
	0%
	{
		transform: scale(1);
	}

	100%
	{
		transform: scale(0);
	}
}

@keyframes lds-ellipsis2
{
	0%
	{
		transform: translate(0, 0);
	}

	100%
	{
		transform: translate(19px, 0);
	}
}

/*
-------------------------------------------------------
	vanillajs datepicker
-------------------------------------------------------
*/

#dialogbox .datepicker-controls .button
{
	min-width: 0;
	margin: calc(0.375rem - 1px) 0.375rem;
}

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

.hide
{
	display: none;
}

#shutter
{
	position: fixed;
	top: 0;
	left: 0;
	padding: 5px 20px;
	text-align: center;
	background-color: red;
	color: white;
	z-index: 1010000;
}

.code
{
	width: 100%;
	border: 1px solid var(--color12);
	border-radius: var(--borderradius);
	padding: 10px;
	word-wrap: break-word;
	font-family: 'Courier New', Courier, monospace;
}

/*
-------------------------------------------------------
	Emails
-------------------------------------------------------
*/

.emailheader,
.emailheader td
{
	cursor: pointer;
	transition: all 500ms;
	vertical-align: top;
}

.emailheader:hover
{
	background-color: #eeeeee;
}

.email
{
	display: none;
}

.emailtable td
{
	vertical-align: top;
}

.emailtable td:first-child
{
	padding-right: 20px;
}

/*
-------------------------------------------------------
	Find Team
-------------------------------------------------------
*/

#namelist
{
	display: none;
	margin-top: 5px;
	border-radius: 5px;
	background-color: white;
	padding: 10px 20px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

#namelist>div
{
	margin: 15px 0;
	padding: 10px 20px;
	border-radius: 20px;
	background-color: var(--color03);
	color: var(--color04);
}

#namelist>div:hover
{
	background-color: var(--color01);
	color: var(--color02);
	cursor: pointer;
}

/*
-------------------------------------------------------
	Loader
-------------------------------------------------------
*/

.loader
{
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	z-index: 1009999;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: inline-block;
	display: none;
	border-top: 10px solid var(--color01);
	border-right: 10px solid transparent;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
	z-index: 1009999;
}

.loader::after
{
	content: '';
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border-left: 10px solid var(--color03);
	border-bottom: 10px solid transparent;
	animation: rotation 0.5s linear infinite reverse;
}

@keyframes rotation
{
	0%
	{
		transform: rotate(0deg);
	}

	100%
	{
		transform: rotate(360deg);
	}
}

#loading
{
	display: none;
	z-index: 10110;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #eeeeee;
}

/*
-------------------------------------------------------
	Loader
-------------------------------------------------------
*/

.tippy-box[data-theme~='morrisbook']
{
	background-color: var(--color01);
	color: var(--color02);
	padding: 5px 8px;
	box-shadow: var(--shadow02);
}

.tippy-box[data-theme~='white']
{
	background-color: #ffffff;
	color: var(--fontcolor01);
	padding: 10px;
	box-shadow: var(--shadow02);
}