@keyframes loading {
	0%{
		left: -45%;
	}
	100%{
		left: 100%;
	}
}


body,
html
{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}
h1
{
	font-size: 140%;
	margin: 0;
	padding: .8em;
	border-bottom: solid 1px;
	color: #005908;
}
a
{
	&:not( .item-link ):not( .item-action )
	{
		color: #005908;
		text-decoration: none;
		display: inline-block;
		padding-bottom: .2em;
		border-bottom: solid 1px transparent;
	}
	&:hover
	{
		border-bottom-color: inherit;
	}

	&.item-link,
	&.item-action
	{
		&:hover
		{
			text-decoration: none;
		}
		color: inherit;
		cursor: pointer;
		text-decoration: none;
	}
}

ul.item-list
{
	margin: 0;
	padding: 0;
	list-style: none;
}

:root
{
	--icon-cross: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIC0wLjUgMjUgMjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02Ljk2OTY3IDE2LjQ2OTdDNi42NzY3OCAxNi43NjI2IDYuNjc2NzggMTcuMjM3NCA2Ljk2OTY3IDE3LjUzMDNDNy4yNjI1NiAxNy44MjMyIDcuNzM3NDQgMTcuODIzMiA4LjAzMDMzIDE3LjUzMDNMNi45Njk2NyAxNi40Njk3Wk0xMy4wMzAzIDEyLjUzMDNDMTMuMzIzMiAxMi4yMzc0IDEzLjMyMzIgMTEuNzYyNiAxMy4wMzAzIDExLjQ2OTdDMTIuNzM3NCAxMS4xNzY4IDEyLjI2MjYgMTEuMTc2OCAxMS45Njk3IDExLjQ2OTdMMTMuMDMwMyAxMi41MzAzWk0xMS45Njk3IDExLjQ2OTdDMTEuNjc2OCAxMS43NjI2IDExLjY3NjggMTIuMjM3NCAxMS45Njk3IDEyLjUzMDNDMTIuMjYyNiAxMi44MjMyIDEyLjczNzQgMTIuODIzMiAxMy4wMzAzIDEyLjUzMDNMMTEuOTY5NyAxMS40Njk3Wk0xOC4wMzAzIDcuNTMwMzNDMTguMzIzMiA3LjIzNzQ0IDE4LjMyMzIgNi43NjI1NiAxOC4wMzAzIDYuNDY5NjdDMTcuNzM3NCA2LjE3Njc4IDE3LjI2MjYgNi4xNzY3OCAxNi45Njk3IDYuNDY5NjdMMTguMDMwMyA3LjUzMDMzWk0xMy4wMzAzIDExLjQ2OTdDMTIuNzM3NCAxMS4xNzY4IDEyLjI2MjYgMTEuMTc2OCAxMS45Njk3IDExLjQ2OTdDMTEuNjc2OCAxMS43NjI2IDExLjY3NjggMTIuMjM3NCAxMS45Njk3IDEyLjUzMDNMMTMuMDMwMyAxMS40Njk3Wk0xNi45Njk3IDE3LjUzMDNDMTcuMjYyNiAxNy44MjMyIDE3LjczNzQgMTcuODIzMiAxOC4wMzAzIDE3LjUzMDNDMTguMzIzMiAxNy4yMzc0IDE4LjMyMzIgMTYuNzYyNiAxOC4wMzAzIDE2LjQ2OTdMMTYuOTY5NyAxNy41MzAzWk0xMS45Njk3IDEyLjUzMDNDMTIuMjYyNiAxMi44MjMyIDEyLjczNzQgMTIuODIzMiAxMy4wMzAzIDEyLjUzMDNDMTMuMzIzMiAxMi4yMzc0IDEzLjMyMzIgMTEuNzYyNiAxMy4wMzAzIDExLjQ2OTdMMTEuOTY5NyAxMi41MzAzWk04LjAzMDMzIDYuNDY5NjdDNy43Mzc0NCA2LjE3Njc4IDcuMjYyNTYgNi4xNzY3OCA2Ljk2OTY3IDYuNDY5NjdDNi42NzY3OCA2Ljc2MjU2IDYuNjc2NzggNy4yMzc0NCA2Ljk2OTY3IDcuNTMwMzNMOC4wMzAzMyA2LjQ2OTY3Wk04LjAzMDMzIDE3LjUzMDNMMTMuMDMwMyAxMi41MzAzTDExLjk2OTcgMTEuNDY5N0w2Ljk2OTY3IDE2LjQ2OTdMOC4wMzAzMyAxNy41MzAzWk0xMy4wMzAzIDEyLjUzMDNMMTguMDMwMyA3LjUzMDMzTDE2Ljk2OTcgNi40Njk2N0wxMS45Njk3IDExLjQ2OTdMMTMuMDMwMyAxMi41MzAzWk0xMS45Njk3IDEyLjUzMDNMMTYuOTY5NyAxNy41MzAzTDE4LjAzMDMgMTYuNDY5N0wxMy4wMzAzIDExLjQ2OTdMMTEuOTY5NyAxMi41MzAzWk0xMy4wMzAzIDExLjQ2OTdMOC4wMzAzMyA2LjQ2OTY3TDYuOTY5NjcgNy41MzAzM0wxMS45Njk3IDEyLjUzMDNMMTMuMDMwMyAxMS40Njk3WiIgZmlsbD0iIzYzNjM2MyIvPgo8L3N2Zz4=" );

	--icon-search: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNyAxN0wyMSAyMSIgc3Ryb2tlPSIjMTU1NTMwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTkgMTFDMTkgMTUuNDE4MyAxNS40MTgzIDE5IDExIDE5QzYuNTgxNzIgMTkgMyAxNS40MTgzIDMgMTFDMyA2LjU4MTcyIDYuNTgxNzIgMyAxMSAzQzE1LjQxODMgMyAxOSA2LjU4MTcyIDE5IDExWiIgc3Ryb2tlPSIjMTU1NTMwIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+" );

	--icon-folder: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBmaWxsPSIjMTU1NTMwIiB2aWV3Qm94PSIwIDAgMzYgMzYiIHZlcnNpb249IjEuMSIgIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPmRpcmVjdG9yeS1saW5lPC90aXRsZT4KICAgIDxwYXRoIGNsYXNzPSJjbHItaS1vdXRsaW5lIGNsci1pLW91dGxpbmUtcGF0aC0xIiBkPSJNMzAsOUgxNi40MkwxNC4xMSw1LjgyQTIsMiwwLDAsMCwxMi40OSw1SDZBMiwyLDAsMCwwLDQsN1YyOWEyLDIsMCwwLDAsMiwySDMwYTIsMiwwLDAsMCwyLTJWMTFBMiwyLDAsMCwwLDMwLDlabTAsMjBINlYxM2g3LjMxYTIsMiwwLDAsMCwyLTJINlY3aDYuNDlsMi42MSwzLjU5YTEsMSwwLDAsMCwuODEuNDFIMzBaIj48L3BhdGg+CiAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIGZpbGwtb3BhY2l0eT0iMCIvPgo8L3N2Zz4=" );

	--icon-prev: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTguMzk1NiAxOS43NjkxQzE5LjA1NDEgMjAuMjY4NyAyMCAxOS43OTkgMjAgMTguOTcyNEwyMCA1LjAyNzY0QzIwIDQuMjAxMDYgMTkuMDU0MSAzLjczMTM3IDE4LjM5NTYgNC4yMzA5NUw5LjIwNDc2IDExLjIwMzNDOC42NzcyNyAxMS42MDM1IDguNjc3MjcgMTIuMzk2NSA5LjIwNDc2IDEyLjc5NjdMMTguMzk1NiAxOS43NjkxWk0yMiAxOC45NzI0QzIyIDIxLjQ1MjEgMTkuMTYyNCAyMi44NjEyIDE3LjE4NjggMjEuMzYyNUw3Ljk5NTk4IDE0LjM5MDFDNi40MTM1MyAxMy4xODk2IDYuNDEzNTMgMTAuODEwNCA3Ljk5NTk5IDkuNjA5OTRMMTcuMTg2OCAyLjYzNzU3QzE5LjE2MjQgMS4xMzg4NSAyMiAyLjU0NzkgMjIgNS4wMjc2NEwyMiAxOC45NzI0WiIgZmlsbD0iIzYzNjM2MyIvPgo8cGF0aCBkPSJNMiAzQzIgMi40NDc3MiAyLjQ0NzcyIDIgMyAyQzMuNTUyMjggMiA0IDIuNDQ3NzIgNCAzVjIxQzQgMjEuNTUyMyAzLjU1MjI4IDIyIDMgMjJDMi40NDc3MiAyMiAyIDIxLjU1MjMgMiAyMVYzWiIgZmlsbD0iIzYzNjM2MyIvPgo8L3N2Zz4=" );
	--icon-prev-white: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTguMzk1NiAxOS43NjkxQzE5LjA1NDEgMjAuMjY4NyAyMCAxOS43OTkgMjAgMTguOTcyNEwyMCA1LjAyNzY0QzIwIDQuMjAxMDYgMTkuMDU0MSAzLjczMTM3IDE4LjM5NTYgNC4yMzA5NUw5LjIwNDc2IDExLjIwMzNDOC42NzcyNyAxMS42MDM1IDguNjc3MjcgMTIuMzk2NSA5LjIwNDc2IDEyLjc5NjdMMTguMzk1NiAxOS43NjkxWk0yMiAxOC45NzI0QzIyIDIxLjQ1MjEgMTkuMTYyNCAyMi44NjEyIDE3LjE4NjggMjEuMzYyNUw3Ljk5NTk4IDE0LjM5MDFDNi40MTM1MyAxMy4xODk2IDYuNDEzNTMgMTAuODEwNCA3Ljk5NTk5IDkuNjA5OTRMMTcuMTg2OCAyLjYzNzU3QzE5LjE2MjQgMS4xMzg4NSAyMiAyLjU0NzkgMjIgNS4wMjc2NEwyMiAxOC45NzI0WiIgZmlsbD0iI0ZGRkZGRiIvPgo8cGF0aCBkPSJNMiAzQzIgMi40NDc3MiAyLjQ0NzcyIDIgMyAyQzMuNTUyMjggMiA0IDIuNDQ3NzIgNCAzVjIxQzQgMjEuNTUyMyAzLjU1MjI4IDIyIDMgMjJDMi40NDc3MiAyMiAyIDIxLjU1MjMgMiAyMVYzWiIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4=" );

	--icon-play: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNi42NTgyIDkuMjg2MzhDMTguMDk4IDEwLjE4NjIgMTguODE3OCAxMC42MzYxIDE5LjA2NDcgMTEuMjEyMkMxOS4yODAzIDExLjcxNTIgMTkuMjgwMyAxMi4yODQ3IDE5LjA2NDcgMTIuNzg3OEMxOC44MTc4IDEzLjM2MzggMTguMDk4IDEzLjgxMzcgMTYuNjU4MiAxNC43MTM2TDkuODk2IDE4Ljk0QzguMjk4MDUgMTkuOTM4NyA3LjQ5OTA3IDIwLjQzODEgNi44Mzk3MyAyMC4zODVDNi4yNjUwMSAyMC4zMzg4IDUuNzM4MTggMjAuMDQ2OSA1LjM5NDQgMTkuNTg0QzUgMTkuMDUzIDUgMTguMTEwOCA1IDE2LjIyNjRWNy43NzM1N0M1IDUuODg5MTkgNSA0Ljk0NzAxIDUuMzk0NCA0LjQxNTk4QzUuNzM4MTggMy45NTMxIDYuMjY1MDEgMy42NjExMSA2LjgzOTczIDMuNjE0OUM3LjQ5OTA3IDMuNTYxOSA4LjI5ODA1IDQuMDYxMjYgOS44OTYgNS4wNTk5OEwxNi42NTgyIDkuMjg2MzhaIiBzdHJva2U9IiM2MzYzNjMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=" );
	--icon-play-white: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNi42NTgyIDkuMjg2MzhDMTguMDk4IDEwLjE4NjIgMTguODE3OCAxMC42MzYxIDE5LjA2NDcgMTEuMjEyMkMxOS4yODAzIDExLjcxNTIgMTkuMjgwMyAxMi4yODQ3IDE5LjA2NDcgMTIuNzg3OEMxOC44MTc4IDEzLjM2MzggMTguMDk4IDEzLjgxMzcgMTYuNjU4MiAxNC43MTM2TDkuODk2IDE4Ljk0QzguMjk4MDUgMTkuOTM4NyA3LjQ5OTA3IDIwLjQzODEgNi44Mzk3MyAyMC4zODVDNi4yNjUwMSAyMC4zMzg4IDUuNzM4MTggMjAuMDQ2OSA1LjM5NDQgMTkuNTg0QzUgMTkuMDUzIDUgMTguMTEwOCA1IDE2LjIyNjRWNy43NzM1N0M1IDUuODg5MTkgNSA0Ljk0NzAxIDUuMzk0NCA0LjQxNTk4QzUuNzM4MTggMy45NTMxIDYuMjY1MDEgMy42NjExMSA2LjgzOTczIDMuNjE0OUM3LjQ5OTA3IDMuNTYxOSA4LjI5ODA1IDQuMDYxMjYgOS44OTYgNS4wNTk5OEwxNi42NTgyIDkuMjg2MzhaIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=" );

	--icon-pause: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04IDVWMTlNMTYgNVYxOSIgc3Ryb2tlPSIjNjM2MzYzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=" );
	--icon-pause-white: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04IDVWMTlNMTYgNVYxOSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=" );

	--icon-next: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS42MDQzOSA0LjIzMDkzQzQuOTQ1ODYgMy43MzEzNiA0IDQuMjAxMDUgNCA1LjAyNzYyVjE4Ljk3MjRDNCAxOS43OTkgNC45NDU4NiAyMC4yNjg2IDUuNjA0MzkgMTkuNzY5MUwxNC43OTUyIDEyLjc5NjdDMTUuMzIyNyAxMi4zOTY1IDE1LjMyMjcgMTEuNjAzNSAxNC43OTUyIDExLjIwMzNMNS42MDQzOSA0LjIzMDkzWk0yIDUuMDI3NjJDMiAyLjU0Nzg5IDQuODM3NTggMS4xMzg4MyA2LjgxMzE2IDIuNjM3NTVMMTYuMDA0IDkuNjA5OTNDMTcuNTg2NSAxMC44MTA0IDE3LjU4NjUgMTMuMTg5NiAxNi4wMDQgMTQuMzkwMUw2LjgxMzE2IDIxLjM2MjVDNC44Mzc1OCAyMi44NjEyIDIgMjEuNDUyMSAyIDE4Ljk3MjRWNS4wMjc2MloiIGZpbGw9IiM2MzYzNjMiLz4KPHBhdGggZD0iTTIwIDNDMjAgMi40NDc3MiAyMC40NDc3IDIgMjEgMkMyMS41NTIzIDIgMjIgMi40NDc3MiAyMiAzVjIxQzIyIDIxLjU1MjMgMjEuNTUyMyAyMiAyMSAyMkMyMC40NDc3IDIyIDIwIDIxLjU1MjMgMjAgMjFWM1oiIGZpbGw9IiM2MzYzNjMiLz4KPC9zdmc+" );
	--icon-next-white: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS42MDQzOSA0LjIzMDkzQzQuOTQ1ODYgMy43MzEzNiA0IDQuMjAxMDUgNCA1LjAyNzYyVjE4Ljk3MjRDNCAxOS43OTkgNC45NDU4NiAyMC4yNjg2IDUuNjA0MzkgMTkuNzY5MUwxNC43OTUyIDEyLjc5NjdDMTUuMzIyNyAxMi4zOTY1IDE1LjMyMjcgMTEuNjAzNSAxNC43OTUyIDExLjIwMzNMNS42MDQzOSA0LjIzMDkzWk0yIDUuMDI3NjJDMiAyLjU0Nzg5IDQuODM3NTggMS4xMzg4MyA2LjgxMzE2IDIuNjM3NTVMMTYuMDA0IDkuNjA5OTNDMTcuNTg2NSAxMC44MTA0IDE3LjU4NjUgMTMuMTg5NiAxNi4wMDQgMTQuMzkwMUw2LjgxMzE2IDIxLjM2MjVDNC44Mzc1OCAyMi44NjEyIDIgMjEuNDUyMSAyIDE4Ljk3MjRWNS4wMjc2MloiIGZpbGw9IiNGRkZGRkYiLz4KPHBhdGggZD0iTTIwIDNDMjAgMi40NDc3MiAyMC40NDc3IDIgMjEgMkMyMS41NTIzIDIgMjIgMi40NDc3MiAyMiAzVjIxQzIyIDIxLjU1MjMgMjEuNTUyMyAyMiAyMSAyMkMyMC40NDc3IDIyIDIwIDIxLjU1MjMgMjAgMjFWM1oiIGZpbGw9IiNGRkZGRkYiLz4KPC9zdmc+" );

	--icon-arrow-right: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBjbGFzcz0iaWNvbiIgIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU2IDEyMC43NjhMMzA2LjQzMiA2NCA3NjggNTEybC00NjEuNTY4IDQ0OEwyNTYgOTAzLjIzMiA2NTkuMDcyIDUxMnoiIGZpbGw9IiM5ODk4OTgiIC8+PC9zdmc+" );

	--icon-profile: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMi4xNjA1IDEwLjg3QzEyLjA2MDUgMTAuODYgMTEuOTQwNSAxMC44NiAxMS44MzA1IDEwLjg3QzkuNDUwNTUgMTAuNzkgNy41NjA1NSA4Ljg0IDcuNTYwNTUgNi40NEM3LjU2MDU1IDMuOTkgOS41NDA1NSAyIDEyLjAwMDUgMkMxNC40NTA1IDIgMTYuNDQwNSAzLjk5IDE2LjQ0MDUgNi40NEMxNi40MzA1IDguODQgMTQuNTQwNSAxMC43OSAxMi4xNjA1IDEwLjg3WiIgc3Ryb2tlPSIjNjM2MzYzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik03LjE2MDcgMTQuNTZDNC43NDA3IDE2LjE4IDQuNzQwNyAxOC44MiA3LjE2MDcgMjAuNDNDOS45MTA3IDIyLjI3IDE0LjQyMDcgMjIuMjcgMTcuMTcwNyAyMC40M0MxOS41OTA3IDE4LjgxIDE5LjU5MDcgMTYuMTcgMTcuMTcwNyAxNC41NkMxNC40MzA3IDEyLjczIDkuOTIwNyAxMi43MyA3LjE2MDcgMTQuNTZaIiBzdHJva2U9IiM2MzYzNjMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+" );

	--icon-logout: url( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNC45NDUzIDEuMjVDMTMuNTc3OCAxLjI0OTk4IDEyLjQ3NTQgMS4yNDk5NiAxMS42MDg1IDEuMzY2NTJDMTAuNzA4NCAxLjQ4NzU0IDkuOTUwNDggMS43NDY0MyA5LjM0ODU3IDIuMzQ4MzVDOC44MjM2MyAyLjg3MzI4IDguNTU4MzkgMy41MTgzNiA4LjQxOTE2IDQuMjc2MzVDOC4yODM4NyA1LjAxMjkxIDguMjU3OTkgNS45MTQzIDguMjUxOTYgNi45OTU4M0M4LjI0OTY2IDcuNDEwMDMgOC41ODM1NyA3Ljc0NzY4IDguOTk3NzggNy43NDk5OUM5LjQxMTk5IDcuNzUyMyA5Ljc0OTY0IDcuNDE4MzggOS43NTE5NCA3LjAwNDE4QzkuNzU4MDMgNS45MTA2OCA5Ljc4NjQzIDUuMTM1NiA5Ljg5NDQ4IDQuNTQ3MzVDOS45OTg1OSAzLjk4MDU0IDEwLjE2NTggMy42NTI0NiAxMC40MDkyIDMuNDA5MDFDMTAuNjg2IDMuMTMyMjUgMTEuMDc0NiAyLjk1MTggMTEuODA4MyAyLjg1MzE1QzEyLjU2MzcgMi43NTE1OSAxMy41NjQ4IDIuNzUgMTUuMDAwMiAyLjc1SDE2LjAwMDJDMTcuNDM1NiAyLjc1IDE4LjQzNjcgMi43NTE1OSAxOS4xOTIxIDIuODUzMTVDMTkuOTI1OSAyLjk1MTggMjAuMzE0NCAzLjEzMjI1IDIwLjU5MTIgMy40MDkwMUMyMC44NjggMy42ODU3NyAyMS4wNDg0IDQuMDc0MzUgMjEuMTQ3MSA0LjgwODEyQzIxLjI0ODYgNS41NjM0NyAyMS4yNTAyIDYuNTY0NTkgMjEuMjUwMiA4VjE2QzIxLjI1MDIgMTcuNDM1NCAyMS4yNDg2IDE4LjQzNjUgMjEuMTQ3MSAxOS4xOTE5QzIxLjA0ODQgMTkuOTI1NyAyMC44NjggMjAuMzE0MiAyMC41OTEyIDIwLjU5MUMyMC4zMTQ0IDIwLjg2NzggMTkuOTI1OSAyMS4wNDgyIDE5LjE5MjEgMjEuMTQ2OUMxOC40MzY3IDIxLjI0ODQgMTcuNDM1NiAyMS4yNSAxNi4wMDAyIDIxLjI1SDE1LjAwMDJDMTMuNTY0OCAyMS4yNSAxMi41NjM3IDIxLjI0ODQgMTEuODA4MyAyMS4xNDY5QzExLjA3NDYgMjEuMDQ4MiAxMC42ODYgMjAuODY3OCAxMC40MDkyIDIwLjU5MUMxMC4xNjU4IDIwLjM0NzUgOS45OTg1OSAyMC4wMTk1IDkuODk0NDggMTkuNDUyN0M5Ljc4NjQzIDE4Ljg2NDQgOS43NTgwMyAxOC4wODkzIDkuNzUxOTQgMTYuOTk1OEM5Ljc0OTY0IDE2LjU4MTYgOS40MTE5OSAxNi4yNDc3IDguOTk3NzggMTYuMjVDOC41ODM1NyAxNi4yNTIzIDguMjQ5NjYgMTYuNTkgOC4yNTE5NiAxNy4wMDQyQzguMjU3OTkgMTguMDg1NyA4LjI4Mzg3IDE4Ljk4NzEgOC40MTkxNiAxOS43MjM2QzguNTU4MzkgMjAuNDgxNiA4LjgyMzYzIDIxLjEyNjcgOS4zNDg1NyAyMS42NTE3QzkuOTUwNDggMjIuMjUzNiAxMC43MDg0IDIyLjUxMjUgMTEuNjA4NSAyMi42MzM1QzEyLjQ3NTQgMjIuNzUgMTMuNTc3OCAyMi43NSAxNC45NDUzIDIyLjc1SDE2LjA1NTFDMTcuNDIyNyAyMi43NSAxOC41MjUgMjIuNzUgMTkuMzkyIDIyLjYzMzVDMjAuMjkyMSAyMi41MTI1IDIxLjA0OTkgMjIuMjUzNiAyMS42NTE5IDIxLjY1MTdDMjIuMjUzOCAyMS4wNDk3IDIyLjUxMjcgMjAuMjkxOSAyMi42MzM3IDE5LjM5MThDMjIuNzUwMyAxOC41MjQ4IDIyLjc1MDIgMTcuNDIyNSAyMi43NTAyIDE2LjA1NDlWNy45NDUxM0MyMi43NTAyIDYuNTc3NTQgMjIuNzUwMyA1LjQ3NTIyIDIyLjYzMzcgNC42MDgyNUMyMi41MTI3IDMuNzA4MTQgMjIuMjUzOCAyLjk1MDI3IDIxLjY1MTkgMi4zNDgzNUMyMS4wNDk5IDEuNzQ2NDMgMjAuMjkyMSAxLjQ4NzU0IDE5LjM5MiAxLjM2NjUyQzE4LjUyNSAxLjI0OTk2IDE3LjQyMjcgMS4yNDk5OCAxNi4wNTUxIDEuMjVIMTQuOTQ1M1oiIGZpbGw9IiM2MzYzNjMiLz4KPHBhdGggZD0iTTE1IDExLjI1QzE1LjQxNDIgMTEuMjUgMTUuNzUgMTEuNTg1OCAxNS43NSAxMkMxNS43NSAxMi40MTQyIDE1LjQxNDIgMTIuNzUgMTUgMTIuNzVINC4wMjc0NEw1Ljk4ODA5IDE0LjQzMDZDNi4zMDI1OSAxNC43MDAxIDYuMzM5MDEgMTUuMTczNiA2LjA2OTQ0IDE1LjQ4ODFDNS43OTk4OCAxNS44MDI2IDUuMzI2NCAxNS44MzkgNS4wMTE5MSAxNS41Njk0TDEuNTExOTEgMTIuNTY5NEMxLjM0NTY3IDEyLjQyNyAxLjI1IDEyLjIxODkgMS4yNSAxMkMxLjI1IDExLjc4MTEgMS4zNDU2NyAxMS41NzMgMS41MTE5MSAxMS40MzA2TDUuMDExOTEgOC40MzA1NkM1LjMyNjQgOC4xNjA5OSA1Ljc5OTg4IDguMTk3NDEgNi4wNjk0NCA4LjUxMTkxQzYuMzM5MDEgOC44MjY0IDYuMzAyNTkgOS4yOTk4OCA1Ljk4ODA5IDkuNTY5NDRMNC4wMjc0NCAxMS4yNUgxNVoiIGZpbGw9IiM2MzYzNjMiLz4KPC9zdmc+" );
}

body
{
	> .item-wrapper
	{
		> *
		{
			width: 100%;
		}

		> .item-head
		{
			> .item-wrapper
			{
				&:focus-within
				{
					> .item-title
					{
						display: none;
					}
				}
				> .item-title
				{
					> .item-wrapper
					{
						padding: 0 0 0 .8em;
					}
					font-size: 28px;
				}
				> .item-logo
				{
					> .item-wrapper
					{
						> img
						{
							max-width: 5em;
							max-height: 5em;
						}
					}
					line-height: 0;
				}
				> .item-search
				{
					> .item-wrapper
					{
						> .item-input
						{
							> input[type="text"]
							{
								&:not(:focus)
								{
									border-color: transparent;
									width: 3em;
									background-color: transparent;
								}
								font-family: Arial;
								font-size: 16px;
								padding: .8em 2.8em .8em .8em;
								outline: none;
								line-height: 1em;
								border-radius: 1.4em;
								box-sizing: border-box;
								border: solid 1px #155530;
								width: 100%;
								background-color: transparent;
								transition: border-color ease-in .3s, background-color ease-in .3s, width ease-out .3s;
								background-image: var( --icon-search );
								background-repeat: no-repeat;
								background-size: 2em;
								background-position: calc( 100% - .8em ) center;
								background-color: #e7fbe9;
							}
						}
						padding: 0 0 0 .8em;
					}
					flex: 1 1 auto;
				}

				box-shadow: 0 0 .2em .2em #dbdbdb;
				background: #FFF;
				padding: .8em 1.6em .8em .8em;
				border-radius: 3.5em;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				align-content: center;
				flex-wrap: no-wrap;
			}
			padding: 2em .4em 0 .4em;
			box-sizing: border-box;
		}

		> .item-folders
		{
			> .item-wrapper
			{
				> ul
				{
					> li
					{
						> .item-wrapper
						{
							> .item-title
							{
								line-height: 1em;
							}

							background-color: #FFF;
							padding: 1.2em 1.2em 1.2em 3.8em;
							border-radius: .4em;
							background-image: var( --icon-folder );
							background-size: 2em;
							background-repeat: no-repeat;
							background-position: .8em center;
							box-shadow: 0 0 .2em .2em #dbdbdb;
						}
						flex: 1 1 auto;
						padding: .4em;
						cursor: pointer;
					}
					margin: 0;
					padding: 0;
					list-style: none;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
				}
				background-color: transparent;
			}
			padding: 1em 0 0 0;
		}

		> .item-content
		{
			> .item-wrapper
			{
				background-color: #FFF;
				box-shadow: 0 0 .2em .2em #dbdbdb;

				box-sizing: border-box;
				padding: .6em;
				border-radius: .6em;
				height: 100%;
			}
			padding: .4em;
			box-sizing: border-box;
			flex: 1 1 auto;
			overflow: auto;
		}

		> .item-player
		{
			> .item-wrapper
			{
				background-color: #FFF;
				box-shadow: 0 0 .2em .2em #dbdbdb;
				border-radius: .6em;
			}

			padding: 1em .4em 1em .4em;
			box-sizing: border-box;
		}

		max-width: 1200px;

		margin: 0 auto;

		display: flex;
		align-items: center;
		align-content: center;
		flex-direction: column;
		flex-wrap: nowrap;

		box-sizing: border-box;

		height: 100%;
		position: relative;

		overflow: hidden;
	}

	.UserAvatar
	{
		width: 2em;
		height: 2em;
		background-size: cover;
		border-radius: 50%;
	}

	.Audio-Player
	{
		&[data-state="0"]
		{
			> .item-wrapper
			{
				> .item-base
				{
					> .item-wrapper
					{
						> .item-control
						{
							> ul
							{
								> li
								{
									&[data-action]
									{
										pointer-events: none;
										opacity: .5;
									}
								}
							}
						}


						> .item-about
						{
							> .item-wrapper
							{
								> .item-title
								{
									font-style: italic;
									color: #999;
								}
							}
						}
					}
				}
			}
		}

		&[data-state="2"]
		{
			> .item-wrapper
			{
				> .item-base
				{
					> .item-wrapper
					{
						> .item-control
						{
							> ul
							{
								> li
								{
									&[data-action="play"]
									{
										&:hover
										{
											> .item-wrapper
											{
												background-image: var( --icon-pause-white );
											}	
										}
										> .item-wrapper
										{
											background-image: var( --icon-pause );
										}
									}
								}
							}
						}
					}
				}
			}
		}
		> .item-wrapper
		{
			> .item-base
			{
				> .item-wrapper
				{
					> .item-control
					{
						> ul
						{
							> li
							{
								&[data-action=prev]
								{
									&:hover
									{
										> .item-wrapper
										{
											background-image: var( --icon-prev-white );
										}
									}
									> .item-wrapper
									{
										background-image: var( --icon-prev );
									}
								}
								&[data-action=play]
								{
									&:hover
									{
										> .item-wrapper
										{
											background-image: var( --icon-play-white );
										}
									}
									> .item-wrapper
									{
										background-image: var( --icon-play );
									}
								}
								&[data-action=next]
								{
									&:hover
									{
										> .item-wrapper
										{
											background-image: var( --icon-next-white );
										}
									}
									> .item-wrapper
									{
										background-image: var( --icon-next );
									}
								}
								&:hover
								{
									> .item-wrapper
									{
										background-color: #8e8e8e;
									}
								}
								> .item-wrapper
								{
									width: 2.5em;
									height: 2.5em;
									background-size: 60% 60%;
									background-position: center center;
									background-repeat: no-repeat;
									border-radius: 50%;

									transition: background-color ease-in .3s, background-image ease-in .3s;
								}
								flex: 0 0 auto;
								cursor: pointer;
								padding: .2em;
							}
							margin: 0;
							padding: 0;
							list-style: none;
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							align-items: center;
							justify-content: flex-start;
						}
					}

					> .item-about
					{
						> .item-wrapper
						{
							> .item-title
							{
								padding: 0 0 0 .5em;
								flex: 1 1 auto;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							> .item-time
							{
								padding: 0 0 0 .5em;
								font-weight: bold;
								color: #b0b0b0;
								font-family: monospace;
							}
							display: flex;
							flex-wrap: nowrap;
							flex-direction: row;
							align-items: center;
							justify-content: flex-start;
							padding: 0 .5em 0 0;
						}
						flex: 1 1 auto;
						overflow: hidden;
					}

					display: flex;
					align-items: center;
					flex-wrap: wrap;
					flex-direction: row;
					justify-content: flex-start;
					overflow: hidden;

					padding: .6em .6em 0 .6em;
				}
			}

			> .item-progress
			{
				> .item-wrapper
				{
					> .item-progress-bar
					{
						> .item-wrapper
						{
							> .item-bar
							{
								height: 100%;
								background-color: #00aa92;
								transition: width linear .3s;
							}
							height: 1em;
							background-color: #b0b0b0;
							border-radius: .5em;
							overflow: hidden;
						}
						flex: 1 1 auto;
					}
					> .item-time
					{
						padding: 0 0 0 .6em;
					}
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: flex-start;
					padding: .6em;
				}
				padding: .4em 0 0 0;
			}
		}
		width: 100%;
		overflow: hidden;
	}
	.UI-icon,
	.UI-SVG-icon
	{
		&.UI-SVG-icon
		{
			fill: #636363;
			transition: fill ease-in .2s;
		}
		&.UI-icon
		{
			&[data-icon="logout"]
			{
				background-image: var( --icon-logout );
			}
			&[data-icon="cross"]
			{
				background-image: var( --icon-cross );
			}
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		width: 1.5em;
		height: 1.5em;
		line-height: 0;
	}

	.UI-navigation
	{
		> .item-wrapper
		{
			> ul
			{
				> li
				{
					a.item-link,
					a.item-action
					{
						> .item-wrapper
						{
							> .item-icon
							{
								width: 1.5em;
								height: 1.5em;
								flex: 0 0 auto;

								background-position: center center;
								background-size: 80% 80%;
								background-repeat: no-repeat;
							}
							> .item-title
							{
								padding: .6em;
								flex: 1 1 auto;
							}

							padding: .6em 2.6em .6em .6em;
							box-sizing: border-box;

							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							align-items: center;
							justify-content: flex-start;
						}
					}
					a.item-link
					{
						> .item-wrapper
						{

							background-image: var( --icon-arrow-right );
							background-size: 1em 1em;
							background-repeat: no-repeat;
							background-position: calc( 100% - 1.6em ) 1.2em;
						}	
					}
				}

				list-style: none;
				margin: 0;
				padding: 0;
			}
		}
	}

	.UI-modal-overlay
	{
		background-color: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		transition: opacity ease-out .3s;
	}
	.UI-modal-window
	{
		&:not(:target)
		{
			+ .UI-modal-overlay
			{
				opacity: 0;
				pointer-events: none;
			}
		}
		z-index: 11;
	}
	.UI-Button
	{
		&[data-button="confirm"]
		{
			&:active
			{
				> .item-wrapper
				{
					background-color: #1ac4ac;
				}
			}
			&:not(:active):hover
			{
				> .item-wrapper
				{
					background-color: #009d87;
				}
			}
			> .item-wrapper
			{
				.UI-SVG-icon
				{
					fill: #FFF;
				}

				background-color: #00aa92;
				border-color: #00aa92;
				color: #FFF;
			}
		}
		&:active
		{
			> .item-wrapper
			{
				background-color: #FFF;
			}
		}
		&:not(:active):hover
		{
			> .item-wrapper
			{
				background-color: #BFBFBF;
			}
		}
		> .item-wrapper
		{
			> *
			{
				&:not(:first-child)
				{
					padding-left: .5em;
				}
			}

			> .item-icon
			{
				font-size: .8em;
				line-height: 0;
			}

			padding: 1em 1.6em;
			background-color: #EFEFEF;
			border-radius: .4em;

			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-start;

			box-sizing: border-box;

			transition: background-color .2s ease-in;

			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		display: inline-block;
	}

	.UI-Playlist
	{
		> .item-wrapper
		{
			> ul
			{
				> li
				{
					> a
					{
						&:active
						{
							> .item-wrapper
							{
								background-color: #999;
							}
						}
						&[data-state="0"]:not(:active):hover
						{
							> .item-wrapper
							{
								background-color: #efefef;
							}
						}


						&:not(:active)[data-state="2"],
						&:not(:active)[data-state="1"]
						{
							> .item-wrapper
							{
								> .item-duration,
								> .item-size
								{
									color: #FFF;
								}
								> .item-actions
								{
									> .item-wrapper
									{
										> ul
										{
											> li:not(:hover)
											{
												.UI-SVG-icon
												{
													fill: #FFF;
												}
											}
										}
									}
								}
								color: #FFF;
							}
						}

						&:not(:active)[data-state="1"]
						{
							> .item-wrapper
							{
								background-color: #999;
							}
						}

						&:not(:active)[data-state="2"]
						{
							> .item-wrapper
							{
								background-color: #00aa92;
							}
						}
						&:not(:active)[data-state="3"]
						{
							> .item-wrapper
							{
								&:after
								{
									content: "";
									position: absolute;
									left: -45%;
									height: 100%;
									width: 45%;
									background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
									background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
									background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
									animation: loading 1s infinite;
									z-index: 1;
								}
								overflow: hidden;
								background-color: #efefef;
							}
							pointer-events: none;
						}
						> .item-wrapper
						{
							> .item-title
							{
								padding: .8em 0 .8em .8em;
								flex: 1 1 auto;
								word-break: break-all;
							}
							> .item-duration,
							> .item-size
							{
								padding: .8em 0 .8em .8em;
								font-weight: bold;
								font-size: 12px;
								color: #999;
								white-space: nowrap;
							}
							> .item-actions
							{
								> .item-wrapper
								{
									> ul
									{
										> li
										{
											&:hover
											{
												> .item-wrapper
												{
													background-color: #FFF;
												}
											}
											> .item-wrapper
											{
												padding: .4em;
												transition: background-color .2s ease-in;
												border-radius: 50%;
											}
											line-height: 0;
											padding: .2em;
										}
										display: flex;
										flex-wrap: nowrap;
										align-items: center;
										justify-content: flex-start;
										flex-direction: row;
									}
									padding: .4em .8em .4em .8em;
								}
							}
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							align-items: center;
							justify-content: flex-start;

							transition: background-color ease-out .2s;
							border-radius: .4em;
							position: relative;

							-webkit-user-select: none;
							-ms-user-select: none;
							user-select: none;
						}
					}
				}
			}
		}

		height: 100%;
		overflow: auto;
		box-sizing: border-box;
	}

	#logout
	{
		&:not(:target)
		{
			pointer-events: none;
			opacity: 0;
			transform: translateY(-50%);
		}

		> .item-wrapper
		{
			> .item-head
			{
				> .item-wrapper
				{
					> .item-title
					{
						font-size: 24px;
						flex: 1 1 auto;
						box-sizing: border-box;
						border-bottom: solid 1px #636363;
						padding: .4em;
					}
					> .item-close
					{
						&:hover
						{
							> .item-action
							{
								background-color: #EFEFEF;
							}
						}
						> .item-action
						{
							padding: .4em;
							border-radius: 50%;
							transition: background-color;
							display: block;
						}

						box-sizing: border-box;
						padding: .4em;
					}
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: flex-start;
				}
				
			}
			> .item-about
			{
				padding: 3.6em 1em 2em 1em;
				text-align: center;
			}
			> .item-actions
			{
				> .item-wrapper
				{
					> ul
					{
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: space-between;
					}
				}
				padding: 1em 0 0 0;
			}
			background-color: #FFF;
			padding: .6em;
			border-radius: .6em;
			box-sizing: border-box;
		}

		position: absolute;
		top: 2em;
		width: 500px;
		transition: transform ease-in .2s, opacity ease-in .2s;
	}

	#mainmenu
	{
		&:not(:target)
		{
			pointer-events: none;
			opacity: 0;
			transform: translateX(-100%);
		}
		> .item-wrapper
		{
			> .item-short-profile
			{
				> .item-wrapper
				{
					> .item-avatar
					{
						font-size: 26px;
					}
					> .item-about
					{
						> .item-wrapper
						{
							> .item-title
							{
								font-weight: bold;
							}
							> .item-email
							{
								font-size: 12px;
								color: #999;
							}
						}
						padding: 0 0 0 .6em;
						flex: 1 1 auto;
						box-sizing: border-box;
					}
					> .item-logout
					{
						> .item-link
						{
							&:hover
							{
								> .item-wrapper
								{
									background-color: #EFEFEF;
								}
							}
							> .item-wrapper
							{
								transition: background-color .2s ease-in;
								padding: 1em;
								border-radius: 50%;
							}
						}
						padding: 0 .6em 0 .6em;
					}
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: flex-start;
					padding: .6em;
				}
			}
			> .item-navigation 
			{
				> .item-wrapper
				{
					> ul
					{
						> li
						{
							&[data-item="profile"]
							{
								a.item-link
								{
									> .item-wrapper
									{
										> .item-icon
										{
											background-image: var( --icon-profile );
										}
									}
								}
							}
							&[data-item="close"]
							{
								a.item-action
								{
									> .item-wrapper
									{
										> .item-icon
										{
											background-image: var( --icon-cross );
										}
									}
								}
							}
						}
					}
				}
			}
			background-color: #FFF;
			border-radius: 3.5em .6em .6em .6em;
			box-sizing: border-box;
			border: solid 1px #636363;

			padding: .6em 0 0 .6em;
		}

		position: absolute;
		left: .4em;
		top: 2em;

		width: 300px;

		transition: opacity ease-out .2s, transform ease-in .2s;
	}

	font-family: Arial;
	font-size: 14px;
	/*background: #155530;*/
	background-color: #efefef;
	overflow: hidden;
}

@media screen and (max-width: 500px)
{
	body
	{
		> .item-wrapper
		{
			> .item-head
			{
				> .item-wrapper
				{
					border-radius: 0;
					box-shadow: none;
				}
				padding: 0;
			}
			> .item-content
			{
				> .item-wrapper
				{
					border-radius: 0;
					box-shadow: none;
					padding: 0;
				}
				padding: 0;
				border-bottom: solid 1px #DBDBDB;
			}
			> .item-folders
			{
				> .item-wrapper
				{
					> ul
					{
						> li
						{
							> .item-wrapper
							{
								border-radius: 0;
								box-shadow: none;
							}
							padding: 0;
						}
					}
				}
				border-bottom: solid 1px #DBDBDB;
				padding: 0;
			}


			> .item-player
			{
				> .item-wrapper
				{
					box-shadow: none;
					border-radius: 0;
				}
				padding: 0;
			}
		}
		#mainmenu,
		#logout
		{
			> .item-wrapper
			{
				box-shadow: none;
				border: none;
				border-radius: 0;
				height: 100%;
			}
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#logout
		{
			> .item-wrapper
			{
				> *
				{
					width: 100%;
				}
				height: 100%;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
}