


html, body {
	overflow-x: hidden;
	-webkit-overflow-scrolling:touch;
}
body {
	padding: 0rem !important;
}
#topbar {
	height: 1.328125em;
	font-size: 1.6em;
	width: 100vw;
	user-select: none;
	border-collapse: collapse;
}
#topbar td {border: none; padding: 0}
#currentpathdir {
	background: rgba(240,240,240,.6);
	border: 2px solid rgba(240,240,240,.3);
	border-radius: .618em;
}
span.pathdirpart {
	cursor: pointer;
}
.navigatebutton {
	display: inliine-block;
	cursor: pointer;
	border-radius: .175em;
	border: 2px solid black;
	margin-left: .125em;
	margin-right: .375em;
	width: 1.328125em;
	box-sizing: border-box;
	transition: background .618s linear;
	background: rgba(255,255,255,.125);
	line-height: 1.0625em;
}
.buttonlabelsize, .navigatebutton {
	height: 1.328125em;
}
.buttonlabelsize {
	width: 3.65625em;
}
@media (max-width: 20em) {
	.buttonlabelsize {
		width: 1.578125em;
		line-height: 1.375em;
	}
	.navigatebutton {
		vertical-align: middle;
		margin: 0 .125em;
	}
}
.navigatebutton:hover {
	background: rgba(255,255,255,.375);
}
.fullwidthbutton {
	display: block;
	overflow: hidden;
	position:relative;
	cursor: pointer;
	margin-bottom: .618rem;
	box-sizing: border-box;
	border: 2px solid;
	border-radius: .5em;
}
.fullwidthbutton:after {
	content:"";
	display:block;
	position:absolute;
	height:100%;
	z-index: -1;
	opacity: .3;
	transition: width 1.618s linear, opacity .309s;
	width: 12.5%;
	top:0;
	left:0;
	background: -webkit-linear-gradient(-35deg,rgba(253,217,181,0.6667),rgba(255,255,255,0.0625));
    background: -moz-linear-gradient(-35deg,rgba(253,217,181,0.6667),rgba(255,255,255,0.0625));
    background: linear-gradient(145deg,rgba(253,217,181,0.6667),rgba(255,255,255,0.0625));
	/*background: -webkit-linear-gradient(-35deg,rgba(253,217,181,0.8),rgba(252,238,224,0.5));
    background: -moz-linear-gradient(-35deg,rgba(253,217,181,0.8),rgba(252,238,224,0.5));
    background: linear-gradient(145deg,rgba(253,217,181,0.8),rgba(252,238,224,0.5));*/
}
.fullwidthbutton:hover:after {
/*	background: -moz-linear-gradient(-35deg,  0%, rgba(252,238,224,0.5) 100%);
	background: -webkit-linear-gradient(-35deg, rgba(253,217,181,0.8) 0%,rgba(252,238,224,0.5) 100%);
	background: linear-gradient(145deg, rgba(253,217,181,0.8) 0%,rgba(252,238,224,0.5) 100%);*/
	opacity: 1;
	width:112.5%;
}

.panelgui {
	top: 0px; left: 0px;
	overflow: visible;
	width: 100vw;
}
.innerpanel {
	box-sizing: border-box;
	padding: 0em 4em;
}
@media (max-width: 48em) { .innerpanel{padding: 0em 3em} }
@media (max-width: 32em) { .innerpanel{padding: 0em 2em} }
@media (max-width: 24em) { .innerpanel{padding: 0em 1em} }
@media (max-width: 12em) { .innerpanel{padding: 0em 1px} }
.hiddenpanel {display: none}

.transpanelin {
	position:absolute;
	top: 2.125rem !important;
	animation: transition_panel_in .618s ease 1;
}
.transpanelout {
	position: relative;
	animation: transition_panel_out .618s ease 1;
}

@keyframes transition_panel_in {
	from {left: 100vw}
	to {left: 0}
}
@keyframes transition_panel_out {
	from {left: 0px}
	to {left: -100vw}
}

.reversepanelin {
	position:absolute;
	top: 2.125rem !important;
	animation: reverse_panel_in .618s ease 1;
}
.reversepanelout {
	position: relative;
	animation: reverse_panel_out .618s ease 1;
}
@keyframes reverse_panel_in {
	from {left: -100vw}
	to {left: 0}
}
@keyframes reverse_panel_out {
	from {left: 0}
	to {left: 100vw}
}

#htmltoexcel textarea {
	height:12em;
	width:100%;
	box-sizing:border-box;
	border:1px solid;
	white-space:pre;
	font-family:monospace;
	text-overflow:ellipse;
	overflow:hidden;
}
.floatleft {
	float: start;
	float: left;
}
/*.floatright {
	float: end;
	float: right;
}*/

#input>*{display:none!important}
.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}

[aria-disabled] {
	opacity: .333;
	transition: opacity .309s linear;
}
[aria-disabled]:hover {
	opacity: .5;
	cursor: not-allowed!important;
}
[aria-disabled]:active {
	outline: 0px none!important;
}

.inputPasteTextArea {
	min-height: 2.2em;
	height: calc(8em - 8vw);
	width: 100%;
	overflow: hidden;
	contain: strict;
	display:none;
	outline: 1px solid;
	max-width: 80vw;
}
.inputPasteTextArea:empty {
	display: block;
}
.inputPasteTextArea:empty:focus::after {
	content:"Now that you have selected the text box, either press "
			url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAAAgCAMAAADXAP0hAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA8UExURf///+/v7+Xl5ezs7NDQ0LGxsdXV1d3d3dnZ2eLi4p6enujo6AAAALm5ucnJycHBwaWlpaurqy4uLm1tbWBPQcYAAAKeSURBVEjHlZaLbsMgDEWTNjSBOa/2//91+AVOcLrM0jSJ+nJ8DQG6ruvCv6Lz40/FKrFwDBQviinHmCPmeGh4oKB6FbNQZKiYZ6Eox4ImD+RTvnPCPCtovQIpJ17ZKaWq+MwhzDrEWKf54Xj+PDH6Y7iYMofKjfBJo+xmGqMFKYlBzzPHxcylr6pUBY5KCtobb4HiJab09cTBwbwRBVM4BvRsQfn3FiNznDmswmHa74y558jHBC3VWSAcpZTAm+mWo5zjYcI8NRxpHI7y16u7tmReO8oJrhsttV0gHK8YBUVn1xlHFxiag/UflE6fwsHxLuwFMyXIMY5AESP9yyAwjlCkmPyrYMocyAEsEcoC9flDRcy+B/naIQ+sUFPz35jzwTjKmMnBZE45mN5vwbCsx7kJs/OxArV3yIrCeoBZJKzNw2CpqoaRShRRj1MbzEswmMqWPp83aGUCwtqCMDgEs9cDEKQbrEHMqwtbxUhB2D6xNEHUyqqoxZQ5SLwDY3hn9wNjtm3nwxhSaR1M0rnhzWukoAvMpqVKkVC/oB7Pa8JscuoD/gkmuxdLjBEQitq1oVLrVQhgvqAeJy8YImF1lAm2czj6FhCKXMxmr9yPuaJQMViM5hXz5mzQL/YrxlztldMvhEmpYs6gsTmELKaeAsl0xHJGwiyMSQaTEyX1BIp8CmFtDqaW2nB6vLcJkwaf0zhikYdJp8ZXDioWB9M4QpKCLjFpaDmTKi4w145uYAqHq+tXi1nuObqDOS5Qj++qCzeGc9zeQxb9jbELtOD7jVPSeuzp8SJ81OuGHn0+Jg2v8gjkVyBpFpJISomNY+eQt/assfqY7igvSpKQyKRIYrKgcACxZHXe0F84sxTmcvaDobk68sxYTjpwWBa6X1pvUpmwk7hJAAAAAElFTkSuQmCC)
			" (Ctrl+V) or paste (the text on the clipboard) into this box somehow.";
}
.inputPasteTextArea[selectionmessage]:empty:focus::after {
	content attr(selectionmessage);
}
kbd {
	background-color: #eee;
	border-radius: 3px;
	border: 1px solid #b4b4b4;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
	color: #333;
	display: inline-block;
	font-size: .85em;
	font-weight: 700;
	line-height: 1;
	padding: 2px 4px;
	white-space: nowrap;
}

.promptThatItWentWell::before {
	content: "&#x2611 Successfully Copied The Spreadsheet To The ClipBoard!"";
}
