/*
**
**
**
**
**
** Desktop System Navigation
** =================================
*/

#TL-System-Nav {
	position: fixed;
	z-index: 50;
	top: 0;
	left: 0;
	margin: 0;
	width: 66px;
	height: 100vh;
	padding: 0;
	background-color: #fafafc;
	overflow: visible;
	box-shadow: -1px 1px 3px 0 rgba(20, 20, 22, 0.22);
}

/* Nav Logo */

#TL-System-Nav > a.logo {
	display: none;
	position: absolute;
	width: 100%;
	height: 70px;
	background-color: grey;
	cursor: pointer;
}

/* Active App */

#TL-System-Nav > .active-app {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 54px;
	padding: 12px 0 0 0;
	background-color: transparent;
	text-align: center;
	opacity: 0;
	cursor: pointer;
	-webkit-transition: -webkit-transform 220ms cubic-bezier(0.28, 0.28, 0.12, 1.28), opacity 180ms ease;
	-moz-transition: -moz-transform 220ms cubic-bezier(0.28, 0.28, 0.12, 1.28), opacity 180ms ease;
	transition: transform 220ms cubic-bezier(0.28, 0.28, 0.12, 1.28), opacity 180ms ease;
	-webkit-transform: translateX(-50px);
	-moz-transform: translateX(-50px);
	transform: translateX(-50px);
}
#TL-System-Nav > .active-app > img {
	width: 38px;
	height: auto;
}
#TL-System-Nav > .active-app.active {
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
}

/* Primary Navigation Options */

#TL-System-Nav > .primary-options {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto 0;
	width: 100%;
	height: 300px;
	padding: 0;
}
#TL-System-Nav > .primary-options > button.option {
	display: block;
	position: relative;
	margin: 3px auto;
	width: 100%;
	height: 52px;
	padding: 0;
	background-color: transparent;
}
#TL-System-Nav > .primary-options > button.option[data-option="profile"] {
	height: 64px;
}
#TL-System-Nav > .primary-options > button.option > .inner {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	width: 50px;
	height: 50px;
	padding: 0;
	background-color: #fafafc;
	border-radius: 8px;
	-webkit-transition: -webkit-transform 240ms cubic-bezier(0.42, 0.12, 0, 1.38), background-color 2s ease;
	-moz-transition: -moz-transform 240ms cubic-bezier(0.42, 0.12, 0, 1.38), background-color 2s ease;
	transition: transform 240ms cubic-bezier(0.42, 0.12, 0, 1.38), background-color 2s ease;
}
body[data-home="true"] #TL-System-Nav > .primary-options > button.option[data-option="home"]:not(:hover) > .inner {
	background-color: #e4e2ff;
}
#TL-System-Nav > .primary-options > button.option[data-option="profile"] > .inner {
	background-color: transparent;
}
#TL-System-Nav > .primary-options > button.option:hover > .inner {
	z-index: 5;
	-webkit-transform: translateX(12px) scale(1.1);
	-moz-transform: translateX(12px) scale(1.1);
	transform: translateX(12px) scale(1.1);
}
#TL-System-Nav > .primary-options > button.option:not([data-option="profile"]):hover > .inner {
	background-color: #fff;
	box-shadow: 0 6px 18px -1px rgba(20, 20, 22, 0.22);
}
#TL-System-Nav > .primary-options > button.option > .inner > img {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 32px;
	height: 32px;
}
#TL-System-Nav > .primary-options > button.option[data-option="profile"] > .inner > figure {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 100%;
	box-shadow: 0 1px 3px 0 rgba(20, 20, 22, 0.38);
}
#TL-System-Nav > .primary-options > button.option[data-option="profile"]:hover > .inner > figure {
	box-shadow: 0 6px 18px 0 rgba(20, 20, 22, 0.38);
}
#TL-System-Nav > .primary-options > button.option > .title-tag {
	display: inline-block;
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: 10px;
	margin: auto 0;
	width: auto;
	height: 16px;
	padding: 3px 6px 0 6px;
	background-color: #fff;
	font-size: 12px;
	color: #28282a;
	font-weight: 500;
	line-height: 12px;
	border-radius: 4px;
	box-shadow: 0 1px 3px -1px rgba(20, 20, 22, 0.28);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: left 320ms cubic-bezier(0.42, 0.12, 0, 1.18), opacity 100ms ease;
	-moz-transition: left 320ms cubic-bezier(0.42, 0.12, 0, 1.18), opacity 100ms ease;
	transition: left 320ms cubic-bezier(0.42, 0.12, 0, 1.18), opacity 100ms ease;
}
#TL-System-Nav > .primary-options > button.option:hover > .title-tag {
	left: calc(100% + 10px);
	opacity: 1;
}
#TL-System-Nav > .primary-options > button.option .nav-option-count {
	display: inline-block;
	position: absolute;
	z-index: 5;
	top: 0;
	right: 0;
	width: auto;
	min-width: 12px;
	height: 12px;
	padding: 2px;
	background-color: #e11717;
	font-size: 11px;
	color: #fff;
	font-weight: 500;
	line-height: 12px;
	opacity: 0;
	border-radius: 5px;
	box-shadow: 0 1px 3px 0 rgba(40, 20, 100, 0.28);
	transition: transform 180ms cubic-bezier(0.42, 0.12, 0, 1.18), opacity 100ms ease;
	transform: rotate(-90deg) scale(0);
}
#TL-System-Nav > .primary-options > button.option .nav-option-count:not([count="0"]) {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/*
**
**
**
**
**
** Desktop Secondary Options
** =================================
*/

#TL-System-Nav > .secondary-options-toggle {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 56px;
	background-color: transparent;
	text-align: center;
	cursor: pointer;
}
#TL-System-Nav > .secondary-options-toggle > .secondary-action {
	position: absolute;
	box-sizing: border-box;
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	padding: 0 0 0 8px;
	background-color: #6573ff;
	overflow: hidden;
	text-align: left;
	border-radius: 50px;
	box-shadow: 0 1px 3px 0 rgba(20, 20, 22, 0.28);
	-webkit-transition: transform 360ms cubic-bezier(0.42, 0.12, 0, 1.18), width 120ms ease, height 120ms ease;
	-moz-transition: transform 360ms cubic-bezier(0.42, 0.12, 0, 1.18), width 120ms ease, height 120ms ease;
	transition: transform 360ms cubic-bezier(0.42, 0.12, 0, 1.18), width 120ms ease, height 220ms ease;
}
#TL-System-Nav > .secondary-options-toggle > .secondary-action:nth-child(3) {
	background-color: #4597ff;
	transform: translate(15px, 22px);
}
#TL-System-Nav > .secondary-options-toggle:not(.expanded):hover > .secondary-action:nth-child(3) {
	transform: translate(15px, 18px);
}
#TL-System-Nav > .secondary-options-toggle > .secondary-action:nth-child(2) {
	background-color: #457dff;
	transform: translate(29px, 22px);
}
#TL-System-Nav > .secondary-options-toggle:not(.expanded):hover > .secondary-action:nth-child(2) {
	transform: translate(29px, 18px);
}
#TL-System-Nav > .secondary-options-toggle > .secondary-action:nth-child(1) {
	background-color: #456aff;
	transform: translate(43px, 22px);
}
#TL-System-Nav > .secondary-options-toggle:not(.expanded):hover > .secondary-action:nth-child(1) {
	transform: translate(43px, 18px);
}
#TL-System-Nav > .secondary-options-toggle > .secondary-action > span {
	display: none;
	vertical-align: top;
	padding: 2px 0 0 5px;
	font-size: 12px;
	color: #28282a;
	font-weight: 500;
}
#TL-System-Nav > .secondary-options-toggle > .secondary-action > img {
	display: none;
	vertical-align: top;
	width: 20px;
}
#TL-System-Nav > .secondary-options-toggle.expanded > .secondary-action {
	width: 106px;
	height: 28px;
	background-color: #fff;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 1px 3px 0 rgba(20, 20, 22, 0.2);
}
#TL-System-Nav > .secondary-options-toggle.expanded > .secondary-action:nth-child(1) {
	transform: translate(76px, -60px);
}
#TL-System-Nav > .secondary-options-toggle.expanded > .secondary-action:nth-child(2) {
	transform: translate(76px, -27px);
}
#TL-System-Nav > .secondary-options-toggle.expanded > .secondary-action:nth-child(3) {
	transform: translate(76px, 6px);
}
#TL-System-Nav > .secondary-options-toggle.expanded > .secondary-action > span {
	display: inline-block;
}
#TL-System-Nav > .secondary-options-toggle.expanded > .secondary-action > img {
	display: inline-block;
}

/*
**
**
**
**
**
** Desktop Page Navigation
** =================================
*/

#TL-App-Nav {
	position: fixed;
	z-index: 45;
	top: 0;
	left: 66px;
	margin: 0;
	width: calc(100vw - 66px);
	height: 52px;
	padding: 0;
	background-color: #f0f0f2;
	border-bottom: 1px solid #d8d8da;
	-webkit-transition: top 220ms ease;
	-moz-transition: top 220ms ease;
	transition: top 220ms ease;
}
#TL-App-Nav.hidden {
	top: -70px;
}
#TL-App-Nav > .page-options {
	position: relative;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 12px 12px;
	text-align: center;
	background-color: transparent;
	white-space: nowrap;
	overflow: hidden;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
#TL-App-Nav > .page-options::-webkit-scrollbar-track {
	background-color: transparent;
}
#TL-App-Nav > .page-options::-webkit-scrollbar {
	width: 4px;
	height: 5px;
	background-color: #f5f5f5;
}
#TL-App-Nav > .page-options::-webkit-scrollbar-thumb {
	background-color: #a8a8ad;
	border-radius: 3px;
}
#TL-App-Nav > .page-options > .page-option {
	display: inline-block;
	position: relative;
	margin: 0 4px;
	vertical-align: top;
	box-sizing: border-box;
	width: auto;
	height: 28px;
	padding: 2px 12px 4px 10px;
	white-space: normal;
	scroll-snap-align: center;
	border-radius: 30px;
	box-shadow: 0 1px 3px -1px rgba(20, 20, 22, 0.22);
}
#TL-App-Nav > .page-options > .page-option.selected {
	background: var(--Theme-Gradient);
	box-shadow: 0 1px 6px -1px rgba(60, 70, 180, 0.72);
}
#TL-App-Nav > .page-options > .page-option > .display-name {
	display: inline-block;
	vertical-align: top;
	padding: 5px 0 0 4px;
	font-size: 12px;
	color: #28282a;
	font-weight: 500;
	line-height: 12px;
}
#TL-App-Nav > .page-options > .page-option.selected > .display-name {
	color: #fff;
}
#TL-App-Nav > .page-options > .page-option > img {
	display: inline-block;
	vertical-align: top;
	width: 20px;
	height: auto;
}

/*
**
**
**
**
**
** Browser Loading Bar
** =================================
*/

#TL-Browser-Loading-Bar {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	width: 0;
	height: 5px;
	background: linear-gradient(90deg, #d0b9ff, #412280 17%, #4b3ac1 34%, #8674ff 51%, #d0b9ff 68%, #412280 85%, #4b3ac1);
	background-size: 300% 100%;
	overflow: hidden;
	-webkit-transition: width 380ms ease;
	-moz-transition: width 380ms ease;
	transition: width 380ms ease;
}
body[data-loading="true"] #TL-Browser-Loading-Bar {
	width: 100%;
	-webkit-animation: TL-Loading-Bar 2s linear infinite;
	-moz-animation: TL-Loading-Bar 2s linear infinite;
	animation: TL-Loading-Bar 2s linear infinite;
}
body[data-loading="end"] #TL-Browser-Loading-Bar {
	left: initial;
	right: 0;
	width: 0;
}
@-webkit-keyframes TL-Loading-Bar {
	0% {
		background-position: 100%;
	}
	100% {
		background-position: 0;
	}
}
@-moz-keyframes TL-Loading-Bar {
	0% {
		background-position: 100%;
	}
	100% {
		background-position: 0;
	}
}
@keyframes TL-Loading-Bar {
	0% {
		background-position: 100%;
	}
	100% {
		background-position: 0;
	}
}

/*
**
**
**
**
**
** Mobile System Navigation
** =================================
*/

#TL-Mobile-Nav {
	display: none;
	position: fixed;
	z-index: 50;
	bottom: 0;
	left: 0;
	margin: 0;
	width: 100vw;
	height: 60px;
	padding: 0;
	background-color: #fafafc;
	overflow: visible;
	box-shadow: 0 1px 6px 0 rgba(20, 20, 22, 0.28);
}

/* Primary Navigation Options */

#TL-Mobile-Nav > .primary-options {
	position: relative;
	margin: auto;
	width: 400px;
	height: 100%;
	padding: 0;
	text-align: center;
}
#TL-Mobile-Nav > .primary-options > button.option {
	display: inline-block;
	position: relative;
	margin: 0 3px;
	vertical-align: top;
	width: 70px;
	height: 100%;
	padding: 0;
	background-color: transparent;
}
body[data-home="true"] #TL-Mobile-Nav > .primary-options > button.option[data-option="home"]::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 5;
	bottom: 2px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 90%;
	height: 5px;
	padding: 0;
	background-color: #28282a;
	border-radius: 30px;
}
#TL-Mobile-Nav > .primary-options > button.option > .inner {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	width: 50px;
	height: 50px;
	padding: 0;
	background-color: #fafafc;
	border-radius: 2px;
	-webkit-transition: -webkit-transform 240ms cubic-bezier(0.42, 0.12, 0, 1.38);
	-moz-transition: -moz-transform 240ms cubic-bezier(0.42, 0.12, 0, 1.38);
	transition: transform 240ms cubic-bezier(0.42, 0.12, 0, 1.38);
}
#TL-Mobile-Nav > .primary-options > button.option[data-option="profile"] > .inner {
	background-color: transparent;
}
#TL-Mobile-Nav > .primary-options > button.option > .inner > img {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 32px;
	height: 32px;
}
#TL-Mobile-Nav > .primary-options > button.option[data-option="profile"] > .inner > figure {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 100%;
	box-shadow: 0 1px 3px 0 rgba(20, 20, 22, 0.38);
}

/*
**
**
**
**
**
** Desktop Guest Navigation
** =================================
*/

#TL-Guest-Nav {
	position: fixed;
	box-sizing: border-box;
	z-index: 50;
	top: 0;
	left: 0;
	margin: 0;
	width: 66px;
	height: 100vh;
	padding: 0;
	background: #f2f2f2;
	border-right: 1px solid #d8d8d8;
	overflow: visible;
}

/* Nav Logo */

#TL-Guest-Nav > .logo {
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

/*
**
**
**
**
**
** Mobile System Navigation
** =================================
*/

#TL-Mobile-Guest-Nav {
	display: none;
	position: fixed;
	z-index: 50;
	bottom: 0;
	left: 0;
	margin: 0;
	width: 100vw;
	height: 60px;
	padding: 0;
	background-color: #fafafc;
	overflow: visible;
	box-shadow: 0 1px 6px 0 rgba(20, 20, 22, 0.28);
}

/*
**
**
**
**
**
** Search
** =================================
*/

#TL-Search {
	position: fixed;
	top: -10px;
	left: 0;
	z-index: 50;
	width: 0;
	height: 0;
	padding: 0;
	background-color: #e8e8ea;
	background-image: var(--Frosted-Glass-Backdrop);
	overflow: auto;
	pointer-events: none;
	opacity: 0;
	-webkit-transition: opacity 100ms ease;
	-moz-transition: opacity 100ms ease;
	transition: opacity 100ms ease;
}
#TL-Search.active {
	top: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: all;
	opacity: 1;
}
#TL-Search > header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	margin: 0 auto;
	width: 96%;
	max-width: 1100px;
	min-width: 400px;
	height: auto;
	padding: 20px 0 0 0;
	background-color: transparent;
}
#TL-Search > header > .search-bar {
	display: block;
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 50px;
	background-color: #fff;
	overflow: hidden;
	opacity: 0;
	border-radius: 12px;
	box-shadow: 0 1px 3px 0 rgba(20, 20, 22, 0.16);
	-webkit-transition: -webkit-transform 280ms cubic-bezier(0.42, 0.12, 0, 1.28), opacity 180ms ease;
	-moz-transition: -moz-transform 280ms cubic-bezier(0.42, 0.12, 0, 1.28), opacity 180ms ease;
	transition: transform 280ms cubic-bezier(0.42, 0.12, 0, 1.28), opacity 180ms ease;
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	transform: translateY(-50px);
}
#TL-Search.active > header > .search-bar {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	transform: translateY(0);
}
#TL-Search > header > .search-bar > input {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0 0 0 12px;
	background-color: #fff;
	font-size: 14.5px;
	color: #28282a;
	font-weight: 500;
	letter-spacing: 0;
}
#TL-Search > .results {
	position: relative;
	margin: 50px auto 0 auto;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	min-width: 430px;
	height: auto;
	padding: 12px 0 0 0;
	font-size: 0;
}
.TL-Search-Category {
	position: relative;
	margin: 0 auto 32px auto;
	box-sizing: border-box;
	width: 92%;
	min-width: 380px;
	max-width: 1100px;
	height: auto;
	min-height: 200px;
	padding: 0 12px;
	/*background-color:#F0F0F2;*/
	overflow: visible;
	border-radius: 8px;
	/*box-shadow:0 1px 3px 0 rgba(20, 20, 22, 0.16);*/
}
.TL-Search-Category > header {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 24px);
	height: 32px;
	padding: 0;
	background-color: transparent;
}
.TL-Search-Category > header > h3 {
	font-family: var(--Theme-Font);
	font-size: 30px;
	color: #28282a;
	font-weight: 600;
	line-height: 34px;
}
.TL-Search-Category > .results {
	position: relative;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 10px 0 32px 0;
	overflow: auto;
}

/* Zero Results Message */

#TL-Search.zero-results .TL-Search-Category > .results {
	display: none;
}
#TL-Search > .zero-results {
	display: none;
	position: relative;
	margin: 50px auto;
	width: 400px;
	height: 300px;
	padding: 0;
	text-align: center;
}
#TL-Search.zero-results .zero-results {
	display: block;
}
#TL-Search > .zero-results > img {
	width: 100%;
	height: auto;
}
#TL-Search > .zero-results > h4 {
	transform: translateY(-30px);
	font-size: 22px;
	color: #28282a;
	font-weight: 700;
	letter-spacing: 0.4px;
	line-height: 26px;
}
#TL-Search > .zero-results > h4 > span {
	font-size: 18px;
	color: #68686a;
	font-weight: 500;
}

/* Initial Message */

#TL-Search > .initial-message {
	display: none;
	position: relative;
	margin: 50px auto;
	width: 400px;
	height: 300px;
	padding: 0;
	text-align: center;
}
#TL-Search.initial-message > .initial-message {
	display: block;
}
#TL-Search > .initial-message > img {
	width: 100%;
	height: auto;
}
#TL-Search > .initial-message > h4 {
	font-size: 22px;
	color: #28282a;
	font-weight: 700;
	letter-spacing: 0.4px;
	line-height: 26px;
	transform: translateY(-50px);
}
#TL-Search > .initial-message > h4 > span {
	font-size: 18px;
	color: #68686a;
	font-weight: 500;
}

/* User Search Result */

.TL-User-Search-Result {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	vertical-align: top;
	margin: 0 18px 18px 0;
	width: 250px;
	height: 330px;
	background-color: #fff;
	overflow: hidden;
	cursor: pointer;
	border-radius: 12px;
	box-shadow: 0 1px 3px 0 rgba(20, 20, 22, 0.12);
}
.TL-User-Search-Result[is-minor="true"]::after {
	content: "MINOR";
	display: block;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 22px;
	padding: 4px;
	background-color: #fabf20;
	text-align: center;
	font-size: 12.5px;
	color: #936d09;
	font-weight: 500;
}
.TL-User-Search-Result > .backdrop {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.TL-User-Search-Result > .title {
	position: absolute;
	top: 18px;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	height: 64px;
	padding: 0 4px;
	background: transparent;
	text-align: center;
	font-size: 60px;
	color: rgba(255, 255, 255, 0.82);
	font-weight: 700;
	line-height: 64px;
}
.TL-User-Search-Result > .user-info {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	height: 200px;
	padding: 62px 8px 0 8px;
	text-align: center;
}
.TL-User-Search-Result > .user-info > figure[user-photo] {
	position: relative;
	margin: 0 auto;
	width: 72px;
	height: 72px;
	box-shadow: 0 1px 2px 0 rgba(10, 10, 10, 0.38);
}
.TL-User-Search-Result > .user-info > .content {
	position: relative;
	width: 100%;
}
.TL-User-Search-Result > .user-info > .content > .full-name {
	display: inline-block;
	width: 100%;
	padding: 8px 0 0 0;
	font-family: var(--Theme-Font);
	font-size: 16px;
	color: #28282a;
	font-weight: 500;
	line-height: 20px;
}
.TL-User-Search-Result > .user-info > .content > .job-title {
	font-family: var(--Primary-Font);
	font-size: 14px;
	color: #68686a;
	font-weight: 400;
	line-height: 18px;
}
.TL-User-Search-Result > .user-info > .content > .user-id {
	display: inline-block;
	margin: 4px 0 0 0;
	width: auto;
	height: auto;
	padding: 2px 8px;
	font-family: var(--Theme-Font);
	font-size: 13.5px;
	color: #fff;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.4px;
	border-radius: 4px;
}

.TL-User-Search-Result > .user-info > .content > .hire-date {
	position: relative;
	width: 100%;
	height: auto;
	padding: 16px 0 0 0;
}
.TL-User-Search-Result > .user-info > .content > .hire-date > img {
	width: 22px;
	height: auto;
	opacity: 0.3;
}
.TL-User-Search-Result > .user-info > .content > .hire-date > span {
	padding: 2px 0 0 0;
	font-size: 14px;
	color: #424242;
	font-weight: 500;
	line-height: 16px;
	border-radius: 5px;
}

/* Employee card - Footer */

.TL-User-Search-Result > .user-info > .content > .footer-info {
	position: relative;
	margin: 12px auto 0 auto;
	width: 100%;
	height: auto;
	padding: 0;
	text-align: center;
}
.TL-User-Search-Result > .user-info > .content > .footer-info > div {
	display: inline-block;
	margin: 0;
	vertical-align: top;
	box-sizing: border-box;
	width: 50%;
	height: auto;
	padding: 2px;
}
.TL-User-Search-Result > .user-info > .content > .footer-info > div.status {
	border-right: 1px solid #d2d2d4;
}
.TL-User-Search-Result > .user-info > .content > .footer-info > div > span.key {
	font-size: 12px;
	color: #68686a;
	font-weight: 400;
	line-height: 16px;
}
.TL-User-Search-Result > .user-info > .content > .footer-info > div > span.value {
	font-size: 13.5px;
	color: #282828;
	font-weight: 500;
	line-height: 18px;
}
.TL-User-Search-Result > .user-info > .content > .footer-info > .status:not([status="ACTIVE"]) > span.value {
	display: inline-block;
	box-sizing: border-box;
	width: 92px;
	height: 18px;
	padding: 1px 5px 0 5px;
	background-color: #e4b513;
	font-size: 12px;
	color: #fff;
	line-height: 16px;
	border-radius: 30px;
}
.TL-User-Search-Result > .user-info > .content > .footer-info > .status[status="TERMINATED"] > span.value {
	background-color: #de3c25;
}

/* Store Search Result */

.TL-Store-Search-Result {
	display: inline-block;
	position: relative;
	margin: 6px;
	width: 250px;
	height: 250px;
	padding: 0;
	background-color: #fff;
	cursor: pointer;
	overflow: hidden;
	text-align: center;
	border-radius: 12px;
	box-shadow: 0 1px 3px 0 rgba(20, 20, 22, 0.28);
}
.TL-Store-Search-Result figure {
	position: relative;
	margin: 0 auto 0 auto;
	width: 100%;
	height: 100%;
	padding: 0;
	background-color: #fff;
	overflow: hidden;
}
.TL-Store-Search-Result .text-body {
	position: absolute;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100px;
	padding: 32px 0 0 12px;
	background: linear-gradient(0deg, #000, transparent);
	text-align: left;
	-webkit-transition: height 220ms ease, padding 220ms ease;
	-moz-transition: height 220ms ease, padding 220ms ease;
	transition: height 200ms ease, padding 230ms ease;
}
.TL-Store-Search-Result:hover .text-body {
	height: 100%;
	padding: 162px 0 0 12px;
}
.TL-Store-Search-Result .text-body > h1 {
	display: inline-block;
	width: 100%;
	height: auto;
	overflow: hidden;
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 26px;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 30px;
}
.TL-Store-Search-Result .text-body > h2 {
	display: inline-block;
	width: 100%;
	height: auto;
	overflow: hidden;
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 18px;
}

/* App Search Result */

.TL-App-Search-Result {
	display: block;
	box-sizing: border-box;
	position: relative;
	margin: 0 auto 12px auto;
	box-sizing: border-box;
	width: calc(100% - 12px);
	height: 88px;
	padding: 0 0 0 88px;
	background-color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	border-radius: 12px;
	box-shadow: 0 1px 3px -1px rgba(10, 10, 10, 0.38);
}
.TL-App-Search-Result > .doc-icon {
	display: none;
	position: absolute;
	top: 0;
	left: 32px;
	z-index: 4;
	width: 32px;
	height: 32px;
	-webkit-filter: drop-shadow(0 2px 2px rgba(20, 20, 22, 0.38));
	-moz-filter: drop-shadow(0 2px 2px rgba(20, 20, 22, 0.38));
	filter: drop-shadow(0 1px 1px rgba(20, 20, 22, 0.38));
}
.TL-App-Search-Result > figure.icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 12px;
	margin: auto 0;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	padding: 11px 0 0 0;
	background-color: #fff;
	text-align: center;
	border-radius: 12px;
	box-shadow: 0 1px 3px 0 rgba(10, 10, 10, 0.38);
}
.TL-App-Search-Result > figure.icon > img {
	width: 42px;
	height: auto;
}
.TL-App-Search-Result > .text-body {
	position: relative;
	width: 100%;
	height: 32px;
	padding: 22px 0 8px 0;
	text-align: left;
}
.TL-App-Search-Result > .text-body > h1 {
	display: inline-block;
	width: 100%;
	font-size: 16px;
	color: #181818;
	font-weight: 700;
	line-height: 20px;
}
.TL-App-Search-Result > .text-body > h2 {
	display: inline-block;
	width: 100%;
	font-size: 16px;
	color: #484848;
	font-weight: 400;
	line-height: 20px;
}

/* File Search Result */

.TL-File-Search-Result {
	display: inline-block;
	margin: 2px;
	vertical-align: top;
	width: 180px;
	height: 200px;
	background-color: #f2f2f4;
	cursor: pointer;
	border-radius: 3px;
	box-shadow: 0 1px 3px 0 rgba(20, 20, 22, 0.16);
	font-size: 14px;
	color: #28282a;
	font-weight: 500;
	letter-spacing: 0;
}

/*
**
**
**
**
**
** To Do Board
** =================================
*/

#TL-Tasks {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 75;
	width: 100vw;
	height: 100vh;
	padding: 0;
	background-color: rgba(0, 0, 0, 0.6);
	overflow: hidden;
}
#TL-Tasks > .board {
	position: absolute;
	top: 12px;
	left: 0;
	width: 100%;
	max-width: 500px;
	height: calc(100% - 24px);
	padding: 0;
	background-color: #f8f8f8;
	overflow: auto;
	opacity: 0;
	border-radius: 16px;
	box-shadow: -1px 0 12px 0 rgba(0, 0, 0, 0.32);
	-webkit-transform: translateX(-520px);
	-moz-transform: translateX(-520px);
	transform: translateX(-520px);
	-webkit-transition: -webkit-transform 220ms cubic-bezier(0.28, 0.28, 0.12, 1.06), opacity 180ms ease;
	-moz-transition: -moz-transform 220ms cubic-bezier(0.28, 0.28, 0.12, 1.06), opacity 180ms ease;
	transition: transform 220ms cubic-bezier(0.28, 0.28, 0.12, 1.06), opacity 180ms ease;
}
body.TL-Task-Expanded #TL-Tasks > .board {
	opacity: 1;
	-webkit-transform: translateX(12px);
	-moz-transform: translateX(12px);
	transform: translateX(12px);
}
#TL-Tasks > .board::-webkit-scrollbar-track {
	background-color: transparent;
}
#TL-Tasks > .board::-webkit-scrollbar {
	background-color: transparent;
}
#TL-Tasks > .board::-webkit-scrollbar-thumb {
	background-color: transparent;
}
#TL-Tasks > .board:hover::-webkit-scrollbar-thumb {
	background-color: #a0a0a0;
}

/* To Do Board - Header */

#TL-Tasks > .board > header {
	position: sticky;
	z-index: 5;
	top: -66px;
	margin: 0 auto;
	width: 92%;
	height: auto;
	padding: 0;
	text-align: left;
	background: inherit;
}
#TL-Tasks > .board > header > .utility-name {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 20px 0 12px 46px;
}
#TL-Tasks > .board > header > .utility-name > img {
	position: absolute;
	top: 22px;
	left: 0;
	width: 40px;
	height: auto;
}
#TL-Tasks > .board > header > .utility-name > h1 {
	font-family: var(--Theme-Font);
	font-size: 20px;
	color: #181818;
	font-weight: 600;
	line-height: 24px;
}
#TL-Tasks > .board > header > .utility-name > h2 {
	font-size: 16px;
	color: #585858;
	font-weight: 400;
	line-height: 20px;
}
#TL-Tasks > .board > header > .date {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 64px;
	padding: 8px 0 0 88px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px 0 rgba(20, 20, 22, 0.16);
}
#TL-Tasks > .board > header > .date > h2.day {
	font-family: var(--Theme-Font);
	position: absolute;
	top: 4px;
	left: 12px;
	font-size: 52px;
	color: #181818;
	font-weight: 400;
	line-height: 56px;
}
#TL-Tasks > .board > header > .date > h2.weekday {
	font-size: 20px;
	color: #181818;
	font-weight: 500;
	line-height: 24px;
}
#TL-Tasks > .board > header > .date > h2.month-year {
	font-size: 20px;
	color: #181818;
	font-weight: 700;
	line-height: 24px;
}

/* To Do Board - Results Population */

#TL-Tasks > .board > .population {
	position: relative;
	margin: 0 auto;
	width: 92%;
	padding: 32px 0 64px 0;
}
#TL-Tasks.zero-results > .board > .population {
	display: none;
}

/* Task Card */

.TL-Task-Card {
	position: relative;
	box-sizing: border-box;
	margin: 0 0 60px 0;
	width: 100%;
	height: auto;
	min-height: 130px;
	padding: 12px 12px 12px 132px;
	background-color: #eaf3f7;
	border: 1px solid #b3c7d0;
	cursor: pointer;
	border-radius: 8px;
}
.TL-Task-Card::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	bottom: -50px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 6px;
	height: 40px;
	background-color: #d2d2d2;
	border-radius: 30px;
}
.TL-Task-Card > figure.illustration {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 4px;
	margin: auto 0;
	width: 120px;
	height: 120px;
	background-color: transparent;
}
.TL-Task-Card > figure.illustration > img {
	width: 100%;
	height: auto;
}
.TL-Task-Card > .text-body {
	position: relative;
	width: 96%;
	height: auto;
	padding: 0 0 12px 0;
	text-align: left;
}
.TL-Task-Card > .text-body > h2 {
	font-size: 18px;
	color: #181818;
	font-weight: 700;
	line-height: 22px;
}
.TL-Task-Card > .text-body > h1 {
	padding: 4px 0 0 0;
	font-size: 18px;
	color: #484848;
	font-weight: 500;
	line-height: 22px;
}
.TL-Task-Card > .text-body > h1 > span.count {
	padding: 1px 6px;
	background-color: #7795ca;
	color: #fff;
	border-radius: 6px;
}
.TL-Task-Card > .text-body > p {
	padding: 4px 0 0 0;
	font-size: 14px;
	color: #181818;
	font-weight: 400;
	line-height: 18px;
}

/* Theme - DEFAULT */
.TL-Task-Card[theme="DEFAULT"] {
	background-color: #eaf3f7;
	border: 1px solid #b3c7d0;
}
.TL-Task-Card[theme="DEFAULT"] > .text-body > h1 > span.count {
	background-color: #7795ca;
}
/* Theme - GLITCH */
.TL-Task-Card[theme="GLITCH"] {
	background-color: #fcf2f1;
	border: 1px solid #dbbfbd;
}
.TL-Task-Card[theme="GLITCH"] > .text-body > h1 > span.count {
	background-color: #d34b41;
}
/* Theme - ACHIEVEMENT */
.TL-Task-Card[theme="ACHIEVEMENT"] {
	background-color: #faf7ee;
	border: 1px solid #d3ccb6;
}
.TL-Task-Card[theme="ACHIEVEMENT"] > .text-body > h1 > span.count {
	background-color: #e9bf49;
}
/* Theme - REPAIR */
.TL-Task-Card[theme="REPAIR"] {
	background-color: #e6f5ec;
	border: 1px solid #c3decd;
}
.TL-Task-Card[theme="REPAIR"] > .text-body > h1 > span.count {
	background-color: #518864;
}
/* Theme - MONEY */
.TL-Task-Card[theme="MONEY"] {
	background-color: #ebf9f3;
	border: 1px solid #c0dacf;
}
.TL-Task-Card[theme="MONEY"] > .text-body > h1 > span.count {
	background-color: #39b380;
}
/* Theme - MISHAP */
.TL-Task-Card[theme="MISHAP"] {
	background-color: #fcf2f1;
	border: 1px solid #dbbfbd;
}
.TL-Task-Card[theme="MISHAP"] > .text-body > h1 > span.count {
	background-color: #d34b41;
}
/* Theme - VACATION */
.TL-Task-Card[theme="VACATION"] {
	background-color: #ebf6f9;
	border: 1px solid #cce0e5;
}
.TL-Task-Card[theme="VACATION"] > .text-body > h1 > span.count {
	background-color: #2eb7bd;
}
/* Theme - EXPLORE */
.TL-Task-Card[theme="EXPLORE"] {
	background-color: #dcf1dc;
	border: 1px solid #c3decd;
}
.TL-Task-Card[theme="EXPLORE"] > .text-body > h1 > span.count {
	background-color: #417f4b;
}
/* Theme - DOCUMENT */
.TL-Task-Card[theme="DOCUMENT"] {
	background-color: #f7f2ff;
	border: 1px solid #d5c9e8;
}
.TL-Task-Card[theme="DOCUMENT"] > .text-body > h1 > span.count {
	background-color: #9688ff;
}
/* Theme - PRIORITY DOCUMENT */
.TL-Task-Card[theme="PRIORITY DOCUMENT"] {
	background: linear-gradient(120deg, #feb68a, #cf6126);
	border: 1px solid #b24215;
}
.TL-Task-Card[theme="PRIORITY DOCUMENT"] > .text-body > h1 > span.count {
	background-color: #b83200;
}
.TL-Task-Card[theme="PRIORITY DOCUMENT"] > .text-body > h2 {
	color: #fff;
}
.TL-Task-Card[theme="PRIORITY DOCUMENT"] > .text-body > h1 {
	color: rgba(255, 255, 255, 0.75);
}
.TL-Task-Card[theme="PRIORITY DOCUMENT"] > .text-body > h1 > span.count {
	color: #fff;
}
.TL-Task-Card[theme="PRIORITY DOCUMENT"] > .text-body > p {
	color: #fff;
}
/* Theme - FARM */
.TL-Task-Card[theme="FARM"] {
	background-color: #f6e8df;
	border: 1px solid #e5c3ae;
}
.TL-Task-Card[theme="FARM"] > .text-body > h1 > span.count {
	background-color: #c8652a;
}
/* Theme - Birthday */
.TL-Task-Card[theme="BIRTHDAY"] {
	background-color: #dff6f0;
	border: 1px solid #aee5e3;
}
.TL-Task-Card[theme="BIRTHDAY"] > .text-body > h1 > span.count {
	background-color: #2ac8ae;
}

/* To Do Board - Zero Results Message */

#TL-Tasks > .board > .zero-results {
	display: none;
	position: relative;
	margin: 50px 0;
	width: 100%;
	height: auto;
	text-align: center;
}
#TL-Tasks.zero-results > .board > .zero-results {
	display: block;
}
#TL-Tasks > .board > .zero-results > img {
	width: 350px;
}
#TL-Tasks > .board > .zero-results > h3 {
	margin: -22px 0 0 0;
	font-family: var(--Theme-Font);
	font-size: 26px;
	color: #181818;
	font-weight: 400;
	line-height: 30px;
}

/* To Do Board - Dismiss Button */

#TL-Tasks button.TL-Collapse-Tasks {
	display: none;
	position: fixed;
	bottom: 12px;
	left: 12px;
	margin: 0 auto;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	padding: 0;
	background-color: #000;
	text-align: center;
	border-radius: 100%;
	box-shadow: 0 3px 12px 0 rgba(20, 20, 22, 0.16);
}
#TL-Tasks button.TL-Collapse-Tasks > img {
	width: 24px;
	height: auto;
}

/*
**
**
**
**
**
** Responsive
** =================================
*/

@media only screen and (max-width: 900px) {
	#TL-System-Nav,
	#TL-Guest-Nav {
		display: none;
	}
	#TL-Mobile-Nav
    /* #TL-Mobile-Guest-Nav*/ {
		display: block;
	}
	#TL-App-Nav {
		top: initial;
		bottom: 60px;
		left: 0;
		width: 100vw;
		border-bottom-width: 0;
		border-top: 1px solid #d8d8da;
	}

	/* To Do Board */

	#TL-Tasks > .board {
		top: 0;
		max-width: 550px;
		height: 100%;
		border-radius: 0;
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
	body.TL-Task-Expanded #TL-Tasks > .board {
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		transform: translateX(0);
	}
	#TL-Tasks button.TL-Collapse-Tasks {
		display: block;
	}
}

@media only screen and (max-width: 500px) {
	.TL-User-Search-Result,
	.TL-Store-Search-Result {
		margin: 0 0 18px 0;
		width: calc(100%);
	}

	#TL-App-Nav {
		height: 64px;
	}
	#TL-App-Nav > .page-options > .page-option {
		margin: 0 8px;
		height: 38px;
	}
	#TL-App-Nav > .page-options > .page-option > img {
		width: 24px;
		height: 24px;
	}
	#TL-App-Nav > .page-options > .page-option > .display-name {
		padding: 5px 2px 0 4px;
		font-size: 14.5px;
		color: #181818;
		font-weight: 700;
		line-height: 16px;
	}
}