:root{
--font-base:clamp(
	15px,
	0.42vw + 1.42vh,
	22px
	);
--app-height:100vh;
--panel-opacity:.82;
--panel-opacity-active:1;
--font-title:1.35rem;
--font-section:1.05rem;
--font-body:1rem;
--font-meta:0.88rem;
--font-utility:0.74rem;
--available-bg:#ffffff;
--conflict-bg:#d7d7d7;
--selected-bg:#8db9ff;
--today-border:#2f80ff;
--blue-dot:#2f80ff;
--panel-bg:#f2f2f2;
--border-color:#bdbdbd;
--text-color:#222;
--year-fast-bg:#00ff00;
--year-fast-fg:#990000;
--year-normal-fg:#222;
--ui-font-size:16px;
--details-font-scale:1rem;
--utility-button-font:15px;

	/* -------------------------------------------------- */
	/* Z-INDEX											*/
	/* -------------------------------------------------- */
	--z-base:1;
	--z-details:1000;
	--z-tooltip:2000;
	--z-lightbox:4000;
	--z-modal:5000;
	/* -------------------------------------------------- */
	/* TYPOGRAPHY													  */
	/* -------------------------------------------------- */
	--font-xs:.78rem;
	--font-sm:.92rem;
	--font-md:1rem;
	--font-lg:1.14rem;
	--font-xl:1.45rem;
	/* -------------------------------------------------- */
	/* LAYOUT											 */
	/* -------------------------------------------------- */
	--details-width:48%;
	/* -------------------------------------------------- */
	/* MORE MENU										  */
	/* -------------------------------------------------- */
	--more-timeout:5000ms;

}

.hidden{display:none !important;}
#tripModal{
	position:fixed;
	inset:0;
	display:none;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.45);
	z-index:var(--z-modal);
}
#tripModal.show{
	display:flex;
}
#tripForm{
	width:min(95vw,700px);
	max-height:90vh;
	overflow:auto;
	padding:1rem;
	border-radius:12px;
	background:rgba(
		255,
		255,
		255,
		var(--panel-opacity-active)
	);
	backdrop-filter:blur(2px);
	box-shadow:
		0 18px 60px rgba(0,0,0,.35);
}
#pageBackgroundImg{
	width:100vw;
	height:var(--app-height);
	object-fit:cover;
}
td	{background-color:rgba(255,255,255,0.3);}
td:hover{background-color:#fff;}
td.noHover	{background-color:rgba(255,255,255,0.0);}
td.noHover:hover	{background-color:rgba(255,255,255,0.0);}
td.selected			{background-color:rgba(255,255,96,0.8);}
.style13 {
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, sans-serif;
}
.style16 {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 13px;
}
.style19 {color: #666666}
.style23 {	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
}
.style25 {font-family: "Lithos Pro Regular"}
.style26 {font-family: "Comic Sans MS"}
.style29 {
	font-family: Verdana;
	font-size: xx-large;
}
.style30 {font-family: "CG Omega"; font-size: 24px; }
.style31 {color: #EFEFEF}
.style32 {font-size: larger; font-family: "Century Gothic";}
.style35 {font-family: "OCR B MT"}
.style49 {font-family: Impact}
.style56 {
	color: #000000;
	font-weight: bold;
}
.style68 {
	font-family: Coronet;
	font-size: 24px;
}
.style72 {color: #000000; font-size: 12px; }
.style79 {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 18px;
	color: #FF3399;
	font-weight: bold;
}
.style81 {
	color: #FF3399;
	font-weight: bold;
}
.style83 {font-size: 13px}
.style86 {
	font-size: 8px;
	color: #FF0000;
	font-weight: bold;
}
SELECT#trip{
		font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	border: 1px solid #444;
	padding: 6px 10px;
}
SELECT#trip  option {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000;
	background-color: #fff;
}
#pageBackground{
position:fixed;
inset:0;
z-index:-1;
overflow:hidden;
}
#pageBackground object{
width:100vw;
height:var(--app-height);
pointer-events:none;
}
.btnSecondary{
	padding:.35em .8em;
	border:1px solid #888;
	border-radius:6px;
	background:
		rgba(
			255,
			255,
			255,
			.75
		);
	cursor:pointer;
	font-size:.9em;
	white-space:nowrap;
}
.btnSecondary:hover{
	background:white;
}
.dashboard{
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:10px;
	box-sizing:border-box;
}
.dashboard-card{
	background:rgba(255,255,255,.90);
	border-radius:12px;
	padding:12px;
	margin-bottom:12px;
	box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.dashboard-card h2{
	margin:0 0 10px 0;
	font-size:1.1rem;
}
.action-required{
	border-left:5px solid #d97706;
}
.btnPrimary{
	width:100%;
	padding:10px;
	border:none;
	border-radius:8px;
	cursor:pointer;
	background:#15803d;
	color:#fff;
	font-weight:bold;
}
/*
when.css
*/
*{
	box-sizing:border-box;
}

body{
	min-height:100%;
	min-height:100dvh;
	min-height:-webkit-fill-available;
	font-size:var(--font-base);
	overflow:hidden;
}
html,
body{
	color:var(--text-color);
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overscroll-behavior-y:auto;
	font-family:Arial,Helvetica,sans-serif;
}
/*	overflow:hidden;		*/
#app{
	display:flex;
	width:100%;
	height:100dvh;
	overflow-y: hidden;
	height: var(--app-height);
}
/* ========================================================================= */
/* GRID																	  */
/* ========================================================================= */
#yearGrid{
	display:grid;
	gap:14px;
}
@media (min-width:1700px){
	#yearGrid{
		grid-template-columns:repeat(3,1fr);
	}
}
@media (min-width:1100px) and (max-width:1699px){
	#yearGrid{
		grid-template-columns:repeat(2,1fr);
	}
}
@media (max-width:1099px){
	#yearGrid{
		grid-template-columns:1fr;
	}
}
/* ========================================================================= */
/* YEAR SEPARATOR															*/
/* ========================================================================= */
.yearSeparator{
	grid-column:1/-1;
	margin-top:0px;
	margin-bottom:5px;
	padding:15px 0px;
	border-top:6px solid #666;
	background:
		linear-gradient(
			to right,
			#d0d0d0,
			#ececec
		);
	color:var(--year-normal-fg);
	font-size: 1.8em;
	font-weight:bold;
	text-align:center;
	opacity:1;
	transition:
		background 140ms ease,
		color 140ms ease,
		opacity 140ms ease,
		border-color 140ms ease;
}
.yearSeparator.fastScroll{
	background-color:var(--year-fast-bg);
	color:var(--year-fast-fg);
	border-top:6px solid #ffffff;
	opacity:1;
}
.yearSeparatorInner{
	letter-spacing:16px;
}
/* ========================================================================= */
/* MONTH CARD																*/
/* ========================================================================= */
.monthCard{
	background:white;
	border:1px solid var(--border-color);
	border-radius:6px;
	padding:6px;
}
.monthHeader{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:6px;
}
.monthToggle{
	border:1px solid #888;
	background:white;
	padding:4px 8px;
	border-radius:4px;
	cursor:pointer;
}
/* ========================================================================= */
/* DAY HEADERS																*/
/* ========================================================================= */
.dayHeaderRow,
.dayGrid{
	display:grid;
	grid-template-columns:42px repeat(7,1fr);
}
.dayHeader{
	text-align:center;
	padding:5px 0;
	font-size:.82em;
	font-weight:bold;
}
.monthToggleHeader{
	background:#ececec;
	border:1px solid #ccc;
	cursor:pointer;
}
/* ========================================================================= */
/* WEEK BUTTON																*/
/* ========================================================================= */
.weekButton{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:34px;
	border:1px solid #ccc;
	background:#f5f5f5;
	cursor:pointer;
	font-size:.78em;
	font-weight:bold;
}
/* ========================================================================= */
/* DAY CELL																  */
/* ========================================================================= */
.dayCell{
	aspect-ratio:1/1;
	min-height:34px;
	border:1px solid #ddd;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	cursor:pointer;
	user-select:none;
	transition:background 100ms ease;
}
.dayCell.available{
	background-color:var(--available-bg);
}
.dayCell.conflict{
	background-color:var(--conflict-bg);
}
.dayCell.selected{
	outline:3px solid #2f80ff;
	outline-offset:-3px;
}
.dayCell.today{
	border:2px solid var(--today-border);
}
.dayCell.empty{
	background:#f4f4f4;
	cursor:default;
}
.dayCell:hover{
	outline:1px solid #8db9ff;
}
.dayNumber{
	pointer-events:none;
	font-size:.92em;
}
/* ========================================================================= */
/* BLUE DOT																  */
/* ========================================================================= */
.conflictDot{
	width:9px;
	height:9px;
	border-radius:50%;
	background-color:var(--blue-dot);
	position:absolute;
	top:4px;
	left:4px;
}
/* ========================================================================= */
/* DETAILS																	*/
/* ========================================================================= */
.detailsHeader{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:10px;
	font-size:var(--font-title);
	margin-bottom:10px;
}
.detailsBlock{
	background:white;
	border:1px solid #ccc;
	border-radius:6px;
	padding:10px;
	margin-bottom:12px;
}
.detailsLabel{
	font-weight:bold;
	margin-bottom:4px;
	font-size:.95em
}
.constraintItem{
	border-top:1px solid #ddd;
	margin-top:10px;
	padding-top:10px;
}
.constraintMeta{
	font-size:.82em;
	color:#555;
	margin-top:4px;
}
.groupNoteTextarea,
.privateNoteTextarea{
	width:100%;
	resize:vertical;
	padding:8px;
	margin-top:6px;
	font-family:inherit;
	font-size:inherit;
	border-radius: 6px;
	border:1px solid #bbb;
}
/* ========================================================================= */
/* STATUS BANNER															 */
/* ========================================================================= */
.statusBanner{
	padding:12px;
	border-radius:6px;
	margin-bottom:12px;
	font-weight:bold;
}
.statusAvailable{
	background:white;
	border:1px solid #aaa;
}
.statusConflict{
	background:#d7d7d7;
	border:1px solid #888;
}

/* ========================================================================= */
/* DETAILS PANE															  */
/* ========================================================================= */
#detailsPane{
	display:flex;
	position:relative;
	font-size:1em;
	flex-direction:column;
	flex-shrink:0;
	overflow-x:hidden;
	min-height:0;
	background:var(--panel-bg);
/*	z-index: 1000;	*/
}
#detailsPaneInner{
	flex:1;
	position:relative;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	flex-direction:column;
	min-height:0;
	overflow-y:hidden;
}
/* ========================================================================= */
/* TABS																	  */
/* ========================================================================= */
#detailsTabs{
	display:flex;
	flex-shrink:0;
	font-size:1em;
	border-bottom:1px solid #bbb;
	gap:2px;
	padding-bottom:2px;
}
.detailsTab{
	border:none;
	background:#ddd;
	padding:.62em .9em;
	cursor:pointer;
	border-radius:8px 8px 0 0;
	font-size:1em;
}
.detailsTab.active{
	background:white;
	font-weight:bold;
}
/* ========================================================================= */
/* TAB PANELS																*/
/* ========================================================================= */
.detailsTabPanel{
	display:none;
	min-height:0;
	flex:1;
	overflow:hidden;
}
.detailsTabPanel.active{
	display:flex;
	flex-direction:column;
	flex:1;
	min-height:0;
	height:100%;
	overflow:hidden;
}
#calendarTab{
	overflow-y:auto;
	overflow-x:hidden;
}
/* ========================================================================= */
/* DETAILS CONTENT															*/
/* ========================================================================= */
#detailsContent{
	display:flex;
	flex-direction:column;
	gap:12px;
}
/* ========================================================================= */
/* EVENTS TAB																*/
/* ========================================================================= */
#eventsToolbar{
	flex-shrink:0;
	margin-bottom:10px;
}
#eventsList{
	display:flex;
	flex-direction:column;
	gap:2px;
	flex:1;
	min-height:120px;
	overflow-y:auto;
	overflow-x:hidden;
	padding-right:4px;
	border:1px solid #bbb;
	background:white;
}
#eventsTab{
	min-height:0;
}
#eventsTab.active{
	display:flex;
	flex-direction:column;
	flex:1;
	min-height:0;
	overflow:hidden;
}
#eventEditor{
	flex:0 0 auto;
	border-top:1px solid #bbb;
	background:#f2f2f2;
	padding-top:10px;
}

/* ========================================================================= */
/* TOOLTIP																	*/
/* ========================================================================= */
#calendarTooltip{
	position:fixed;
	z-index:2000;
	background:rgba(0,0,0,.85);
	color:white;
	padding:8px 10px;
	border-radius:8px;
	pointer-events:none;
	opacity:0;
	visibility:hidden;
	transform:translateY(4px);
	transition:
		opacity 120ms ease,
		transform 120ms ease;
}
#calendarTooltip.visible{
	opacity:1;
	transform:translateY(0);
	visibility:visible;
}
.eventRow{
	padding:6px 8px;
	border-radius:4px;
	cursor:pointer;
	font-size:1em;
	transition:
		background 100ms ease,
		opacity 100ms ease;
	border-bottom:1px solid #ddd;
}
.eventRow.dimmed{
	background:#d8d8d8 !important;
	color:#666 !important;
}
.eventRow.selected{
	outline:2px solid #000;
}
.eventRow:last-child{
	border-bottom:none;
}
.readonlyInput{
	width:100%;
	border:none;
	background:transparent;
	font-weight:bold;
	color:#222;
	padding:2px 0;
}
.dateInput{
	padding:4px;
	border:1px solid #bbb;
	border-radius:4px;
}
.dateRangeRow{
	display:flex;
	align-items:center;
	gap:6px;
}
.textInput{
	width:100%;
	padding:6px 8px;
	border:1px solid #aaa;
	border-radius:6px;
	background:#fff;
	color:#111;
	font:inherit;
	box-sizing:border-box;
}
.dateRangeSeparator{
	font-weight:bold;
	padding:0 4px;
}
.eventRowInner{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
}
.eventTitle{
	font-size:1em;
	font-weight:600;
	min-width:0;
	flex:1 1 auto;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.eventDates{
	font-size:.84em;
	opacity:1;
	white-space:nowrap;
	flex:0 0 auto;
}
@media (max-width:420px){
	.eventRowInner{
		flex-direction:column;
		align-items:flex-start;
		gap:2px;
	}
	.eventTitle{
		width:100%;
	}
	.eventDates{
		padding-left:2px;
	}
}
#detailsHandle{
	position:absolute;
	left:-12px;
	top:0;
	width:24px;
	height:100%;
	z-index:3000;
	cursor:col-resize;
	display:flex;
	align-items:center;
	justify-content:center;
	touch-action:none;
	user-select:none;
}
#detailsHandleBar{
	position:absolute;
	left:9px;
	top:50%;
	width:8px;
	height:42px;
	transform:translateY(-50%);
	border-radius:999px;
	background:#5f5f5f;
	opacity:.92;
	overflow:hidden;
	transition:
		background-color 120ms ease,
		transform 120ms ease,
		opacity 120ms ease,
		box-shadow 120ms ease;
}
#detailsHandleBar::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		repeating-linear-gradient(
			135deg,
			transparent 0px,
			transparent 11px,
			rgba(255,255,255,.88) 11px,
			rgba(255,255,255,.88) 18px
		);
}
body.portrait #detailsHandle{
	top:-11px;
	left:0;
	width:100%;
	height:22px;
	cursor:ns-resize;
}
body.portrait #detailsHandleBar{
	width:42px;
	height:8px;
	left:50%;
	top:7px;
	transform:translateX(-50%);
}
body.portrait #detailsPane{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	z-index:1000;
}
body.landscape #detailsHandle,
body.wide #detailsHandle,
body.ultrawide #detailsHandle{
	left:-12px;
	top:0;
	width:24px;
	height:100%;
}
body.sheetDragging #detailsHandleBar{
	box-shadow:
		0 0 0 2px rgba(80,140,255,.22);
	scale:1.08;
}
body.wsDisconnected #detailsPane{
	border-top-color:#cc4444;
}
body.sheetDragging{
	user-select:none;
	cursor:grabbing;
}
.inputError{
	outline:3px solid #cc4444;
	background:#ffe5e5;
}
.detailsZoomControls{
	display:flex;
	align-items:center;
	gap:.28em;
	flex-shrink:0;
}
.detailsZoomControls button{
	font-size:var(--font-utility);
	padding:.16em .38em;
	color:var(--panel-bg);
	background-color:#555;
	border:none;
	border-radius:.32em;
	min-height:1.45em;
	min-width:1.65em;
	line-height:1;
	cursor:pointer;
}
.detailsZoomControls button:hover{
	background-color:#666;
}
.detailsZoomControls button:active{
	background-color:#777;
}
.readonlyInput,
.textInput,
.dateInput,
.groupNoteTextarea,
.privateNoteTextarea{
	font-size:1em;
}
#clearEventSelection{
	font-size:1em;
	padding:.45em .85em;
	min-height:2.2em;
}
#createEventButton{
	font-size:1em;
	padding:.45em .85em;
	min-height:2.2em;
}
.detailsTab,
#clearEventSelection,
#createEventButton{
	font-size:1rem;
}
.monthTitle,
.detailsBlock h2{
	font-weight:bold;
	font-size:var(--font-section);
}
.detailsBlock,
.dayCell,
.eventTitle{
	font-size:var(--font-body);
}
.eventDates,
.constraintMeta{
	font-size:var(--font-meta);
}
.eventEditorButtons{
	display:flex;
	justify-content:flex-end;
	gap:.7em;
	margin-top:1.2em;
}
.eventEditorButtons button{
	padding:.38em .9em;
	font-size:1em;
	cursor:pointer;
}
#saveEvent{
	font-weight:bold;
}
#lightBox{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.45);
	z-index:4000;
	display:none;
}
#lightBox.visible{
	display:block;
}
#modalHost{
	position:fixed;
	inset:0;
	display:none;
	align-items:center;
	justify-content:center;
	z-index:5000;
	pointer-events:none;
}
#modalHost.visible{
	display:flex;
}
.modalEditor{
	pointer-events:auto;
	width:min(92vw,720px);
	max-height:82vh;
	overflow:auto;
	background:white;
	border-radius:12px;
	padding:1.2em;
	box-shadow:
		0 18px 60px rgba(0,0,0,.35);
	animation:
		modalEditorIn 180ms ease;
}
@keyframes modalEditorIn{
	from{
		opacity:0;
		transform:
			translateY(18px)
			scale(.96);
	}
	to{
		opacity:1;
		transform:
			translateY(0)
			scale(1);
	}
}
.dashboard-grid{
	display:grid;
	gap:12px;
	grid-template-columns:
		repeat(
			auto-fit,
			minmax(260px,1fr)
		);
	max-width:1200px;
	margin:0 auto;
	padding:10px;
}
.action-critical{
	color:#900;
}
.dashboardMetric{
	font-size:3rem;
	font-weight:bold;
	text-align:center;
	margin:.3em 0;
}
.dashboardSubtext{
	text-align:center;
	opacity:.8;
}
.dashboard-card{
	cursor:pointer;
	transition:
		transform .12s ease,
		box-shadow .12s ease;
}
.dashboard-card:hover{
	transform:translateY(-2px);
	box-shadow:
		0 8px 24px rgba(0,0,0,.18);
}
.dashboardDetail{
	display:none;
}
.dashboard-card.open
.dashboardDetail{
	display:block;
	margin-top:12px;
}
.dashboard-card-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
}
.dashboard-detail{
	margin-top:12px;
}
.trip-detail{
	padding:12px;
	border-radius:8px;
	background:rgba(255,255,255,.85);
	backdrop-filter:blur(2px);
	margin-bottom:12px;
}
.trip-detail-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	margin-bottom:4px;
	font-size:1.25rem;
}
.trip-detail-header a{
	font-size:1.15rem;
	font-weight:bold;
	text-decoration:none;
}
.trip-detail-status{
	font-weight:bold;
	white-space:nowrap;
}
.trip-detail-dates{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:10px;
	font-size:.95rem;
}
.trip-detail-row{
	display:grid;
	grid-template-columns:70px 1fr;
	gap:10px;
	margin-top:4px;
}
.trip-detail-row a{
	font-weight:bold;
	text-decoration:none;
}
.dashboard{
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:10px;
	box-sizing:border-box;
}
.dashboard-card{
	background:rgba(255,255,255,.90);
	border-radius:12px;
	padding:12px;
	margin-bottom:12px;
	box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.dashboard-card h2{
	margin:0 0 10px 0;
	font-size:1.1rem;
}
.action-required{
	border-left:5px solid #d97706;
}
.dashboard-card.selected{
	background:rgba(255,0,0,.45);
}
.btnPrimary{
	width:100%;
	padding:10px;
	border:none;
	border-radius:8px;
	cursor:pointer;
	background:#15803d;
	color:#fff;
	font-weight:bold;
}
.dashboard-card,
.monthCard,
.detailsBlock,
.modalEditor{
	background:
		rgba(
			255,
			255,
			255,
			var(--panel-opacity)
		);
	backdrop-filter:
		blur(2px);
}
.dashboard-card:hover,
.monthCard:hover,
.detailsBlock:hover,
.modalEditor:hover,
.trip-detail:hover,
#detailsPane:hover,
#eventsList:hover,
.dashboard-card:focus-within,
.monthCard:focus-within,
.detailsBlock:focus-within,
.modalEditor:focus-within,
#detailsPane:focus-within,
#eventsList:focus-within{
	background:rgba(242,242,242,var(--panel-opacity-active));
}
.lastSubject{
	background:#ffff99;
	border-radius:4px;
	padding:2px 4px;
}



@keyframes menuPulse{
	0%{transform:scale(1);}
	50%{transform:scale(1.5);}
	100%{transform:scale(1);}
}
body.portrait #detailsHandle{
	top:-11px;
	left:0;
	width:100%;
	height:22px;
	cursor:ns-resize;
}
body.portrait #detailsHandleBar{
	width:42px;
	height:8px;
	left:50%;
	top:7px;
	transform:translateX(-50%);
}
body.landscape #detailsHandle,
body.wide #detailsHandle,
body.ultrawide #detailsHandle{
	left:-12px;
	top:0;
	width:24px;
	height:100%;
}

#Obnoxious {font-weight:bold;}
*.veryObnoxious {background-color:#000;color:#8F8;}

div.sectionTitle{
	font-size:1.2rem;
	margin-left:52px;
}

.appMenuInner{
	display:grid;
	gap:8px;
	grid-template-columns:repeat(2,1fr);
}

body.landscape .appMenuInner,
body.wide .appMenuInner,
body.ultrawide .appMenuInner{
	grid-template-columns:repeat(3,1fr);
}
.appMenuFooter{
	margin-top:16px;
	padding-top:12px;
	border-top:1px solid rgba(255,255,255,.2);
	text-align:right;
}
#appMenuButton.menuHint{
	animation: menuPulse 1.5s ease-out 3;
}

#appMenuButton{
	position:fixed;
	left:3px;
	top:0px;
	font-size:24px;

	width:30px;
	height:30px;

	align-items:center;
	justify-content:center;

	z-index:3200;
	cursor:pointer;
	user-select:none;
}

#appMenu{
	position:fixed;
	left:8px;
	top:56px;

	min-width:260px;
	max-width:320px;

	z-index:3199;

	display:none;
	background-color:white;
}

#appMenu.open{
	min-width:260px;
	max-width:320px;
	background-color:#eee;
	border:3px solid black;
	border-radius: 4px;
	display:block;
	box-shadow:4px 5px 5px rgba(0,0,0,0.25);
	padding:5px;
}
body.hideAppMenu #appMenuButton,
body.hideAppMenu #appMenu{
	display:none !important;
}
#appMenuHolder{
	left:1px;
	top:2px;
	position:absolute;
	background-color:#000;
}

.dragon{
	position:absolute;
	cursor:move;
	user-select:none;
	touch-action:none;
}