/*
*
*/

#side-menu
{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;

	border-right: 1px solid var(--border);
	background: var(--lbg);
	z-index: 9;
}

#side-menu.collapsed
{
	display: block;
}

#side-menu .interior
{
	width: 220px;
	transition-duration: 0.5s;
	padding: 0 10px;
	position: relative;
	box-sizing: border-box;
	height: 100vh;
	text-align: center;
}

#side-menu.collapsed .interior
{
	width: 0;
}

#side-menu.open
{
	display: block;
}

#side-menu.collapsed .marquee
{
	display: none;
}

#side-menu .marquee
{
	height: 20px;
	text-align: left;

}

#side-menu .marquee span
{
	position: absolute;
	top: 10;
	white-space: nowrap;
	padding: 0 25px;
}

.marquee span.animate {
    animation-name: marquee;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 12s;
}

.marquee span:nth-child(1) {
	animation-delay: -7.5s;
}

.marquee span:nth-child(2) {
	animation-delay: 0s;
}

@keyframes marquee
{
	0% {
		left: 200%;
	}

	45%, 55% {
		left: 0;
	}

	100% {
		left: -200%;
	}
}

/*
* Interior
*/

#side-menu .interior .content
{
	overflow: hidden;
	width: 100%;
	height: 100%;
}

#side-menu .upper
{
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	padding: 20px 10px 0;
	box-sizing: border-box;
	overflow: hidden;
}

#side-menu .upper img
{
	width: 100%;
}

#side-menu .upper h6
{
	position: absolute;
	margin: 0;
	top: 25px;
	left: 22px;
	background: linear-gradient(135deg, rgba(255,204,49,1) 0%, rgba(255,204,53,1) 18%, rgba(255,223,135,1) 33%, rgba(240,185,40,1) 42%, rgba(240,185,40,1) 100%);
	color: white;
	padding: 1px 5px 2px;
	font-size: 9px;
	box-shadow: 2px 2px 2px rgb(0 0 0 / 50%);
}

#side-menu .upper h6::after
{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 14px 0 0;
	border-color: rgb(240, 185, 40) transparent transparent transparent;
	position: absolute;
	top: 0;
	left: 100%;
}

#side-menu .upper h6::before
{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 8px 0;
	border-color: transparent rgb(208, 160, 32) transparent transparent;
	position: absolute;
	top: 100%;
	left: 0;
}

#side-menu .upper .title
{
	font-size: 22px;
	text-align: left;
	padding-left: 10px;
	box-sizing: border-box;
}

#side-menu .upper .title .small
{
	font-size: 60%;
}

#side-menu .upper .title p
{
	margin: 0;
}

#side-menu .upper .nav
{
	padding-top: 10px;
}

#side-menu.collapsed .upper
{
	width: 0;
}

#side-menu.collapsed .nav
{
	overflow: hidden;
}

#side-menu .middle
{
	width: 100%;
	height: calc(100vh - 284px);
	box-sizing: border-box;
	margin: 134px 0 110px;
	padding: 0 10px;
	position: absolute;
	top: 0;
	left: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

#side-menu.reduced .middle
{
	height: calc(100vh - 324px);
}

#side-menu .lower
{
	position: absolute;
	bottom: 0;
	left: 0;

	width: 100%;
	padding: 10px 10px 20px;
	box-sizing: border-box;
	overflow: hidden;

	background: var(--dbg);
}

#side-menu.collapsed .lower,
#side-menu.collapsed .middle
{
	width: 0;
	padding: 0 0 10px 20px;
	background: var(--lbg);
}

#side-menu .lower p
{
	white-space: nowrap;
}

#side-menu .nav
{
	width: calc(100% + 20px);
	position: relative;
	left: -10px;
}

#side-menu .nav .nav-group
{

}

#side-menu .nav .nav-group:not(:first-of-type)
{
	margin-top: 15px;
}

#side-menu .nav .nav-group .nav-item,
#side-menu .nav .nav-group .nav-item:link,
#side-menu .nav .nav-group .nav-item:visited
{
	padding: 8px 15px 8px 30px;
	text-align: left;
	display: block;
	transition-duration: 0.25s;
	white-space: nowrap;
	overflow: hidden;

	color: var(--t-primary);
	cursor: pointer;

	position: relative;
}

#side-menu.collapsed .nav .nav-group .nav-item,
#side-menu.collapsed .nav .nav-group .nav-item:link,
#side-menu.collapsed .nav .nav-group .nav-item:visited
{
	display: none;
}

#side-menu:not(.collapsed) .nav .nav-group .nav-item.selected
{
	background: var(--t-clink);
	color: white;
}

#side-menu .nav .nav-group .nav-item:hover
{
	background: var(--dbg);
	color: var(--t-strong);
}

#side-menu .lower .nav .nav-group .nav-item:hover
{
	background: var(--ilbg);
}

#side-menu .nav .nav-group .nav-item.disabled,
#side-menu .nav .nav-group .nav-item.disabled:hover
{
	pointer-events: all;
	cursor: not-allowed;
	opacity: 0.4;
	background: transparent;
}

#side-menu .nav .nav-group .nav-item.elevated::after
{
	content: '';
	position: absolute;
	top: 16px;
	left: 14px;
	width: 8px;
	height: 8px;
	border-radius: 100%;

	background-color: var(--tsgreen);
}

#side-menu .nav .nav-group .nav-item i
{
	font-family: "Material Icons";
	font-style: normal;
	vertical-align: middle;
	font-size: 24px;
	display: inline-block;
}

#side-menu .nav .nav-group .nav-item span
{
	font-size: 18px;
	display: inline-block;
	vertical-align: middle;
	padding-left: 10px;
}

#side-menu .nav .nav-group p.title
{
	font-size: 10px;
	margin: 0;
	text-align: left;
	padding: 0 0 0 0px;
	margin: 0 40px 0 35px;
	border-bottom: 1px solid var(--lborder);
	color: var(--t-medium);
	white-space: nowrap;
	overflow: hidden;
	top: 0;
	left: 0;
}

/*
* Resize controls
*/

#side-menu .interior .border-control
{
	position: absolute;
	top: 0;
	right: -1px;
	width: 3px;
	height: 100%;
	z-index: 1;

	transition-duration: 0.25s;
}

#side-menu .interior .border-control:hover
{
	right: -3px;
	width: 7px;
	cursor: w-resize;

	background: var(--tsgreen);
}

#side-menu.collapsed .interior .border-control:hover
{
	cursor: e-resize;
}

#side-menu .interior .border-control .thumb
{
	position: absolute;
	top: 25px;
	right: -11px;
	width: 29px;
	height: 29px;
	border-radius: 100%;
	padding: 1px 0;
	box-sizing: border-box;

	background: var(--llbg);
	border: 1px solid var(--border);
	text-align: center;
	transition-duration: 0.25s;

	cursor: pointer;
}

#side-menu.open .interior .border-control .thumb
{
	display: none;
	opacity: 0;
}

#side-menu.open .interior .border-control .thumb::after
{
	content: 'chevron_left';
	font-family: "Material Icons";
	font-size: 24px;
}

#side-menu.collapsed .interior .border-control .thumb::after
{
	content: 'chevron_right';
	font-family: "Material Icons";
	font-size: 24px;
}

#side-menu.open .interior .border-control:hover .thumb
{
	display: block;
	opacity: 1;
}

/*
* DISPLACEMENT
*/

#side-menu ~ .pwindow
{
	transition-property: padding-left;
	transition-duration: 0.5s;
}

#side-menu.open ~ .pwindow
{
	padding-left: 221px;
}

#side-menu.collapsed ~ .pwindow
{
	padding-left: 21px;
}