/* SIDEBAR */

div#aside_wrap {
	position: fixed;
    height: 100vh;
    z-index: 15;
    width: 448px;
	--aside-width: 448px;
    top: 0;
    right: -448px;
	overflow-y: scroll;
	transition: 0.5s all;
	box-shadow: -2px -2px 10px rgba(0,0,0,0.35);
}

div#aside_wrap.open {
	right: 0;	
}

div#aside_wrap aside .habits_wrap, div#aside_wrap aside .wrap {
	display: none;
    background: #3a595c;
    padding-top: 80px;
	padding-bottom: 100px;
    z-index: 12;
    box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4);
    transition: 0.5s all;
	min-height: 100vh;
	width: 436px;
	overflow-x: clip;
	position: absolute;
	right: 0;
	top: 0;
	height: max-content;
}

div#aside_wrap aside .wrap * {
	position: relative;
	z-index: 13;
}


aside .innerwrap {
	z-index: 20;
	position: relative;
}

aside .innerwrap.transition {
	animation: 0.3s transition;	
}

aside .armory-buttons p {
	background: rgba(0,0,0,0.2);
	padding: 0;
}

aside .armory-buttons p a {
	padding: 8px 25px;	
	display: block;
}

aside .armory-buttons p a:hover {
	text-decoration: none;	
}

aside:not(#help) p + p {
	margin-top: -25px;
}

aside#help p {
	margin: 0px 25px 1.2em 0;	
}

@keyframes transition {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

div#aside_wrap aside .habits_wrap::before, div#aside_wrap aside .wrap::before {
    width: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 45%);
    z-index: 13;
    height: 500px;
}

div#aside_wrap aside.active .habits_wrap, div#aside_wrap aside.active .wrap {
	display: block;
}

div#aside_wrap::-webkit-scrollbar {
  width: 12px;
}

/* Track */
div#aside_wrap::-webkit-scrollbar-track {
  background: #203133; 
	border-left: 1px solid black;
}
 
/* Handle */
div#aside_wrap::-webkit-scrollbar-thumb {
  background: #486568; 
	border-left: 1px solid black;
}

/* Handle on hover */
div#aside_wrap::-webkit-scrollbar-thumb:hover {
  background: #61888c; 
}

div#aside_wrap.closed {
	right: -448px;
} 

aside#habits::before {
	content: "\f44b";
	display: block;
	background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0) 45%);
	height: 100px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#aside_wrap aside.disabled .tab {
	pointer-events: none;
	opacity: 0.5;
	filter: grayscale(1);
}

#aside_wrap .tab {
	position: fixed;
    bottom: 20px;
	right: 0;
    padding: 9px 13px 8px 13px;
    border-radius: 3px 0 0 3px;
    color: white;
	transition: 0.5s all;
	cursor: pointer;
	background: #182526;
	width: 44px;
	box-shadow: 0 0 6px rgba(0,0,0,0.3);
	z-index: 10;
	border-right: 1px solid rgba(0,0,0,0.3);
	display: flex;
	height: 43px;
	align-items: center;
}

#aside_wrap.disabled .tab {
	pointer-events: none;
	opacity: 0.5;
}

#aside_wrap aside .tab {
	bottom: 60px;
}

#aside_wrap aside + aside .tab {
	bottom: 107px;	
}

#aside_wrap aside + aside + aside .tab {
	bottom: 154px
}

#aside_wrap aside + aside + aside + aside .tab {
	bottom: 201px;
}

#aside_wrap aside + aside + aside + aside + aside .tab {
	bottom: 248px;	
}

#aside_wrap aside .tab:hover {
	background: #3c5d61 !important;	
}

#aside_wrap aside.active .tab {
	background: #3c5d61; 
}

#aside_wrap.open aside .tab {
	right: var(--aside-width);	
}

#aside_wrap.open aside .tab {
	bottom: 30px;
}

#aside_wrap.open aside + aside  .tab {
	bottom: 79px !important;
}

#aside_wrap.open aside + aside + aside  .tab {
	bottom: 128px !important;
}

#aside_wrap.open aside + aside + aside + aside .tab {
	bottom: 177px !important;	
}

#aside_wrap.open aside + aside + aside + aside + aside .tab {
	bottom: 226px !important;	
}


#aside_wrap .tab:hover {
	width: 50px;	
	color: #fac100;
}

#aside_wrap.closed aside .tab:hover {
	width: 48px;	
}

#aside_wrap.closed .tab {
	bottom: 60px;
	right: 0;
    background: #3a595c;
}

aside .tab i {
    font-size: 15px;
    margin: 0 auto;
    justify-content: center;
    display: flex;
    align-items: center;
    height: 27px;
	transition: 0.3s all;
}

aside .tab:hover {
	background: #283e40;
}

aside h2, aside h3 {
	font-family: "museo", "georgia", sans-serif;
    font-size: 22px;
    font-weight: 300;
	color: white;
	text-align: left;
	padding-left: 30px;
	float: left;
	margin-bottom: 10px;
	margin-top: 3px;
	clear: left;
}

aside h3 {
	font-size: 18px;	
	margin: 8px 0 6px 0;
}

aside h2 strong, aside h3 strong {
	font-weight: 600;
}

aside ol {
	color: white;
	clear: both;
	padding-left: 30px;
	counter-reset: my-counter;
	list-style: none;
}

aside ol li {
	counter-increment: my-counter;
	position: relative;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	padding: 11px 7px 11px 47px;
	display: flex;
	align-items: center;
	color: rgba(255,255,255,0.6);
}

aside ol li:nth-of-type(even) {
	background: rgba(0,0,0,0.075);
	color: rgba(255,255,255,0.85);
}

aside ol li:first-of-type {
	border-top: 1px solid rgba(255,255,255,0.3);	
}

aside ol li::marker {
display: none;	
}

aside ol + h3, aside ul + h3 {
	margin-top: 40px;
}

aside ol li::before {
	content: counter(my-counter);
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    left: 8px;
    font-weight: 600;
    font-size: 15px;
	color: white;
}

aside p {
	color: white;
	width: 100;
	clear: both;
	margin: 10px 25px 30px 0;
	padding-left: 30px;
}

aside form {
	clear: left;
}

aside div.links {
	justify-content: end;
    display: flex;
	color: white;
	margin-right: 8px;
}

aside div.links a {
	background: rgba(255, 190, 0, 0.35);
    padding: 3px 10px;
    border-radius: 3px;
	transition: 0.3s all;
	transform: scale(0.97);
}

aside div.links a:hover {
	background: rgba(250, 193, 0, 0.8);
	transform: scale(1);
}

aside div.links span {
	opacity: 0.7;
    margin-right: 5px;
    color: black;
    font-size: 15px;
    vertical-align: 0.5px;
    font-weight: 700;
    font-family: 'museo';
}

aside div.links i {
	color: black;	
	opacity: 1;
 	margin-left: 2px;
	font-size: 16px;
	transition: 0.4s all;
}

aside div.links a + a {
	margin-left: 2px;	
	background: rgba(255,255,255,0.5);
}

aside div.links a + a:hover {
	background: white;	
}

aside div.links a + a i {
	margin: 0;
}

aside section.active-task {
	cursor: default;
}

aside section textarea::placeholder {
	color: rgba(255,255,255,0.35);
	position: absolute;
	top: 50%;
	left: 50%; /* Match textarea's padding */
	width: 100%;
	transform: translate(-50%, -50%);
	pointer-events: none; /* Prevent clicking the placeholder */
	z-index: 0;
}

aside p a {
	color: rgba(250,193,0,0.8);
	transition: 0.25s all;
}

aside p a:hover {
	text-decoration: underline;
	color: rgba(250,193,0,0.8);
}


/*---------- Direction aside ----------*/

aside#direction .wrap > section {
    border: 1px dashed rgba(255, 255, 255, 0.28);
    max-width: 80%;
    margin: 0 auto 80px;
    border-radius: 6px;
	position: relative;
	padding: 32px 35px 30px;
	background: linear-gradient(180deg, rgba(255,255,255,0.01) 0%, rgba(0,0,0,0.14) 100%);
	box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
	z-index: 15;
	position: relative;
	/* background: rgba(0,0,0,0.05); */
}

aside#direction .wrap > section::before {
    border-left: 1px dashed rgba(255, 255, 255, 0.25);
    position: absolute;
    left: 50%;
    content: "";
    height: 80px;
    bottom: -80px;
    transform: translateX(-50%);
}

aside#direction .wrap > section:last-of-type::before {
	display: none;	
}

aside#direction .wrap > section::after {
	content: "\f0d7";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 28px;
    position: absolute;
    left: 50%;
    bottom: -65px;
    color: #fac100;
    opacity: 1;
    transform: translateX(-50%);
    z-index: 18;
}	

aside#direction .wrap > section:last-of-type::after {
	content: '';
	bottom: 0;
}

aside#direction .wrap > section h2 {
	position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #3a595c;
    padding: 0 10px;
	font-family: museo-sans;
	font-size: 19px !important;
    color: #fac100;
	box-shadow: 0 0 10px 0 #3a595c;
	white-space: nowrap;
}

aside#direction .grow-wrap > textarea, aside#direction .grow-wrap::after, aside#direction p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px !important;
/* 	
	height: 30px; 
    margin: 0;
    overflow: hidden;
*/
	resize: none;
    text-align: center;
	border: none;
	background: none;
	line-height: 1.4em;
    font-family: 'museo-sans', sans-serif !important;
    font-style: italic;
	font-weight: 100;
	box-shadow: none !important;
	padding: 0;
	width: 100%;
	overflow: hidden;
}


aside#direction p {
	height: auto;
	margin: 0;
}

aside#direction #compass {
    max-width: 65px;
    margin: 0 auto 40px;
    display: flex;
    z-index: 10000;
    position: relative;
}

/*
aside#direction section.clarity {
	width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
    background: red;
    display: table;
    text-align: center;
    margin: 0 0 9px;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    top: 26px;
    border: rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
} */

aside#direction .clarity {
    max-width: 65%;
    position: relative;
    margin: -25px auto 50px;
}

aside#direction .clarity .light {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    background: red;
    display: table;
    text-align: center;
    margin: 0 0 9px;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
	border: 1px solid #182526;
	top: 26px;
    box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.7) inset, 
		-2px -2px 5px rgba(0,0,0,0.3) inset, 
		2px 2px 5px rgba(0,0,0,0.2);
}

aside#direction .light::before {
    content: "";
    box-shadow: 2px 2px 2px 1px rgba(255, 255, 255, 0.38) inset;
    display: flex;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

aside#direction .light::after {
    content: "";
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.38) inset;
    display: flex;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

aside#direction .clarity .light[data-rating="1"] {
	background: rgba(255,20,30);	
}

aside#direction .clarity .light[data-rating="2"] {
	background: orange;	
}

aside#direction .clarity .light[data-rating="3"] {
	background: rgb(255,210,0);	
}

aside#direction .clarity .light[data-rating="4"] {
	background: #08c908;
}

aside#direction .light + p {
	padding-top: 70px;	
}/* CSS Document */


/*---------- Loggedin aside ----------*/

aside#loggedin .leaderboard {
	padding: 0 20px 0 28px;
    width: 100%;
    display: flex;
}

aside#loggedin .leaderboard ul {
	margin: 0;	
}

aside#loggedin .leaderboard li {
	background: none;	
	font-size: 16px;
	list-style: none;
	border-top: 1px solid rgba(255,255,255,0.15);
	color: white;
	width: 100%;
	padding: 4px 0 4px 6px;
	margin: 0 30px 0px 0;
}

aside#loggedin .leaderboard li:last-of-type {
	border-bottom: 1px solid rgba(255,255,255,0.15);
}

aside#loggedin .leaderboard .name {
	font-size: 16px;	
}

aside#loggedin .leaderboard li span.online, aside#loggedin .leaderboard li span.offline {
	display: none;
}

aside#loggedin .leaderboard li .score {
	font-size: 16px;
    font-weight: 600;
    background: none;
    height: auto;
    justify-content: end;
}

aside#loggedin .leaderboard li .fa-medal {
	display: none;	
}

#users-online {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 50px 0;
    position: relative;
    clear: both;
}

#users-online li {
	font-size: 15px;
	list-style: none;
	border-top: 1px solid rgba(255,255,255,0.15);
	color: white;
	width: 100%;
	padding: 8px 0 8px 15px;
	margin-right: 0px;
	font-family: 'fira sans', 'museo', sans-serif;
	display: flex;
	align-items: center;
	transition: 0.25s all;
	position: relative;
}

#users-online li:hover {
	background-color: rgba(255,255,255,0.1);	
}

#users-online li:last-of-type {
	border-bottom: 1px solid rgba(255,255,255,0.15);
}

#users-online span.signal {
    position: absolute;
    bottom: 10px;
    left: 42px;
}

#users-online span.name {
	margin-left: 10px;
}

#users-online .portrait {
	border-radius: 50%;
	max-width: 35px;
	max-height: 35px;
	position: relative;
	overflow: hidden;
}

/**************** NOTEPAD widget *****************/

aside#notepad button[type='submit'] {
	/* Variables */
	--button_radius: 5px;
	--button_color: #e8e8e8;
	--button_outline_color: #182526;
	font-size: 15px;
	font-weight: bold;
	border: none;
	cursor: pointer;
	border-radius: var(--button_radius);
	background: var(--button_outline_color);
	padding: 0;
	display: table;
	margin: 20px auto 0;
}

aside#notepad button[type='submit'] span {
	display: block;
	box-sizing: border-box;
	border: 1px solid var(--button_outline_color);
	border-radius: var(--button_radius);
	padding: 0.5em 1.8em;
	background: var(--button_color);
	color: var(--button_outline_color);
	transition: transform 0.1s ease;
}

aside#notepad button[type='submit']:hover span {
	/* Pull the button upwards when hovered */
	transform: translateY(-0.33em);
}

aside#notepad button[type='submit']:active span {
	/* Push the button downwards when pressed */
	transform: translateY(0);
	border-width: 1px;
}




/**************** HABITS widget *****************/

aside ul.habits_list li .score {
	grid-area: 1 / 19 / 1 / 22;
}

aside ul.habits_list .input {
	grid-area: 1 / 13 / 1 / 18;	
	justify-content: right;
	position: relative;
}

aside ul.habits_list input.percent {
	position: relative;
}

aside ul.habits_list div.percent::before {
	content: "%";
	position: absolute;
	top: 5px;
	right: 15px;
}

aside div.habits_wrap .score span {
	align-items: flex-end;	
}

aside div.habits_wrap .day-score {
	grid-area: 1 / 19 / 1 / 33;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.08);
	padding: 4px 0;
}

aside ul.habits_list {
	margin-top: 20px;	
}

aside ul.habits_list + ul.habits_list {
	margin-top: 0;	
}

/**************** HELP *****************/

aside#help .wrap {
	padding-left: 6px;
	padding-right: 40px;
}

aside#help h2 {
	margin-bottom: 0.7em;
}

aside#help h3 {
	color: #fac100;	
	font-size: 20px;
}


/**************** ONBOARDING *****************/

aside#onboarding input[type='checkbox']::before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

aside#onboarding input[type='checkbox']::after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

/*********************** NOTEPAD ************************/

aside#notepad .wp-editor-wrap {
	margin: 0 22px 0 22px;
}

aside#notepad h2 {
	padding: 0;
	text-align: center;
	width: 100%;
}

aside#notepad .form {
	clear: both;
}

aside#notepad iframe {
	min-height: 250px;
}