/* Nunito font-weights */

/* 

200: extra-light
300: light
400: regular
600: semi-bold
700: bold
800: extra-bold
900: black

*/


a {
    color: #fff;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	position: relative;
}


html,
body {
	color: white;
	font-size: 16px;
	-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
			-ms-text-size-adjust: none;
				text-size-adjust: none;
}

body {
	background: #181818;
	font-family: "Nunito", Helvetica, Arial, sans-serif;
	font-weight: 400;
	height: 100%;
	margin: 0;
	overflow: hidden;
	padding: 0;
	-webkit-user-select: none;
		-moz-user-select: none;
			-ms-user-select: none;
				user-select: none;
	width: 100%;
}

body.bodyBrowse {
	background-repeat: no-repeat;
	background-position: center top;
	/* background-image: url(../img/header-pngs/Settings-Starter7@2x.png); background-size: 375px 812px;*/
	/* background-image: url(../img/header-pngs/Settings-Starter5-A@2x.png); background-size: 375px 812px;*/
	/* background-image: url(../img/header-pngs/Settings-Empty@2x.png); */
	/* background-image: url(../img/header-pngs/Browse-Starter-Program-InfoB@2x.png);background-size: 375px 982px; */
	/* background-image: url(../img/header-pngs/Browse-Starter1-5Tabs@2x.png); background-size: 375px 812px; */
	/* background-image: url(../img/header-pngs/ACME-Browse-Tenant-Sort-Team-Count@2x.png); background-size: 375px 1812px; */
	/* background-image: url(../img/header-pngs/MyTeam-Member-George-Read@2x.png); background-size: 375px 1262px; */
}

h1, h2, h3, h4, h5, h6 {
	color: #A0A0A0;
}

#app {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto 1fr auto;
	height: 100vh;
	overflow: hidden;
}



/* HEADER START  */


header {
	height: auto;
}

.header-wrapper {
	width: 100%;	
}

.header-container,
.tabs-container,
.view-container,
.global-navigation-container {
	width: 100vw;
	max-width: 720px;
	margin-right: auto;
	margin-left: auto;
}

.header-container {
	height: 100%;
	/* min-height: 43px; */
	text-align: center;

	/* max-width: 375px; */
}

.page-title,
.header-button-section {
	font-size: 18px;
	letter-spacing: 0.02em;
	/* line-height: 43px; */
	line-height: 44px;
	margin-bottom: -1px;
}

.header-button-section {
	z-index: 10;
	position: absolute;
	top: 0px;
	/* height: 100%; */
	/* min-height: 43px; */
	width: 88px;
}
.header-button-section-back {	left: 0px; text-align: left; /* background-color: rgba(0,255,0,0.5); */}
.header-button-section-action {	right: 0px; text-align: right; /* background-color: rgba(0,255,255,0.5); */}


.header-button,
.tab-item {
	cursor: pointer;
	transition: background-color 0.10s ease-out;
}
.header-button {
	display: block;
	width: auto;
	min-width: 32px;
	/* min-height: 43px; */
	min-height: 2.6875rem;
	padding-right: 16px;
	padding-left: 16px;
	/* background-color: rgba(0,0,255,0.5); */
}
.header-button:hover {
	background-color: rgba(255,255,255,0.08);
}
.header-button:active {
	background-color: rgba(255,255,255,0.16);
	transition: none;
}

.header-button-section-back .header-button {	float: left;}
.header-button-section-action .header-button {	float: right;}

.button-primary {	font-weight: 700;}
.button-secondary {	font-weight: 400;}

.button-active {	color: #88BEFF;}
.button-inactive {	color: #A0A0A0;}

.button-icon::before {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	background-repeat: no-repeat;
	background-position: left top;
}

.button-backer {	padding-left: 27px;}
.button-backer::before {
	left: 8px;
	/* top: 12px; */
	margin-top: -10px;
	background-image: url(../img/icons/icon-chevron-left.svg);
	background-size: 13px 21px;
	width: 13px;
	height: 21px;
	/* background-color: rgba(0,255,0,0.5); */
}

.button-account {
	width: 64px;

	/* background-color: rgba(0,255,0,0.5); */
}
.button-account::before {
	left: 16px;
	margin-top: -16px;
	background-image: url(../img/icons/icon-account.svg);
	background-size: 32px 32px;
	width: 32px;
	height: 32px;

	/* background-color: rgba(0,255,0,0.5); */
}





.page-title {
	font-weight: 700;
	color: #fff;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	max-width: calc(100% - 176px);

	/* background-color: rgba(255,0,255,0.5); */
}



.letter-initial {
	width: 40px;
	/* height: 26px; */
	min-height: 2.6875em;
	margin-bottom: -1px;
	margin-right: auto;
	margin-left: auto;
	background-repeat: no-repeat;
	background-size: 40px 26px;
	background-position: left center;
	top: -1px;
	/* top: 7px; */
	/* margin-bottom: 16px; */

	/* background-color: rgba(0,0,255,0.5); */
}
.letter-initial-a {		background-image: url(../img/icons/initial-a.svg);}


.group-name {
	font-weight: 700;
	color: #fff;
	text-align: center;
	font-size: 20px;
	letter-spacing: 0.02em;
	line-height: 1.1;
	padding-right: 16px;
	padding-left: 16px;
	margin: 0;
	/* height: 200px; */

	/* background-color: rgba(255,0,255,0.5); */
}


.enterprise-logo {
	max-width: 160px;
	height: 54px;
	margin-right: auto;
	margin-left: auto;
	background-repeat: no-repeat;
	background-position: center top;
	top: 1px;
	/* background-color: rgba(255,0,255,0.5); */
}
.logo-acme {	background-image: url(../img/icons/logo-acme.svg); background-size: 57px 54px;}
.logo-usaa {	background-image: url(../img/icons/logo-usaa.svg); background-size: 47px 54px;}
.logo-testco {	background-image: url(../img/icons/TestCo.svg); background-size: 70px 54px;}


.group-subtitle {
	font-weight: 600;
	color: #a0a0a0;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.02em;
	line-height: 1.1;
	padding-right: 16px;
	padding-left: 16px;
	margin: 0;
	/* height: 200px; */

	/* background-color: rgba(255,0,255,0.5); */
}
.group-name + .group-subtitle {			margin-top: 0.35em;}
.enterprise-logo + .group-subtitle {	margin-top: 1.2em;}



.person-avatar {
	margin-right: auto;
	margin-left: auto;
	border-radius: 500px;
	width: 60px;
	height: 60px;
	margin-bottom: 14px;
	top: 4px;
	background-color: #a0a0a0;

	/* background-color: rgba(0,255,0,0.5); */
}
.person-avatar::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 4;
	top: -4px;
	left: -4px;
	border-radius: 500px;
	border-width: 2px;
	border-style: solid;
	width: 68px;
	height: 68px;
}
.person-avatar.person-associate::before {		border-color: transparent;}
.person-avatar.person-nonassociate::before {	border-color: #ff9600;}

.person-avatar::after {
	content: '';
	display: block;
	position: absolute;
	z-index: 5;
	top: 0px;
	left: 0px;
	border-radius: 500px;
	width: 60px;
	height: 60px;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 60px 60px;
}

.person-avatar::after {	background-image: url(../img/portraits/hatzikotelis-george.jpg);}

.person-initials {
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	text-align: center;
	color: #0d0d0d;
	font-weight: 900;
	font-size: 24px;
	line-height: 1;
}


.person-name {
	font-weight: 700;
	color: #fff;
	text-align: center;
	font-size: 20px;
	letter-spacing: 0.02em;
	line-height: 1.1;
	padding-right: 16px;
	padding-left: 16px;
	margin: 0;
	padding-bottom: 10px;
	text-align: center;
}






.tabs-wrapper {
	margin-top: 6px;

	/* background-color: rgba(255,0,255,0.5); */
}

.tabs-container {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	padding-right: 4px;
	padding-left: 4px;
	
	/* max-width: 375px; */
	/* background-color: rgba(0,255,0,0.5); */
}


.tab-item {
	cursor: pointer;
	text-align: center;
	width: 20%;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.02em;
	padding-top: 54px;
	padding-bottom: 16px;
	color: #a0a0a0;

	/* background-color: rgba(0,255,255,0.5); */
}
.tab-item.tab-selected {
	color: #fff;
	cursor: default;
}
.tab-item:hover {
	color: #fff;
	background-color: rgba(255,255,255,0.08);
}
.tab-item:active {
	background-color: rgba(255,255,255,0.16);
	transition: none;
}
.tab-item.tab-selected:hover {
	background-color: transparent;
}

.tab-item::before,
.tab-item::after {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.tab-item::before {
	z-index: 3;
	top: 12px;
	width: 37px;
	height: 37px;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 37px 37px;
	-webkit-filter: invert(74%) sepia(1%) saturate(0) hue-rotate(348deg) brightness(87%) contrast(88%);
		filter: invert(74%) sepia(1%) saturate(0) hue-rotate(348deg) brightness(87%) contrast(88%);
}
.tab-item.tab-selected::before,
.tab-item.tab-selected:hover::before {
	-webkit-filter: none;
		filter: none;
}
.tab-item.tab-groups::before {background-image: url(../img/icons/circle-icon-groups.svg);}
.tab-item.tab-info::before {background-image: url(../img/icons/circle-icon-info.svg);}

.tab-item:hover::before {
	-webkit-filter: brightness(0) saturate(100%) invert(99%) sepia(31%) saturate(1%) hue-rotate(149deg) brightness(106%) contrast(101%);
		filter: brightness(0) saturate(100%) invert(99%) sepia(31%) saturate(1%) hue-rotate(149deg) brightness(106%) contrast(101%);
}



.tab-item::after {
	z-index: 2;
	top: 12px;
	width: 37px;
	height: 37px;
	border-radius: 600px;
	background-color: #000;
	border: 1px solid rgba(255,255,255,0.04);
}
.tab-item.tab-selected::after {
	background-color: #fff;
}


/* HEADER END  */








.router-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.router-wrapper::before,
.router-wrapper::after {
	content: '';
 	background: rgba(255,255,255,0.12);
	height: 1px;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1000;
}
.router-wrapper::before {		top: 0;}
.router-wrapper::after {		bottom: 0;}

.router-container {
	background: #0d0d0d;
	/* display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center; */
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	-webkit-overflow-scrolling: touch;
	width: 100%;
}

.view-container {
	background: #0d0d0d;
	box-sizing: border-box;
	margin-top: -1px;
	/* min-height: 1000px; */
	overflow-y: auto;
	overflow-x: hidden;
	padding: 1rem;
	width: 100vw;
}





/* CONTENT BUTTONS START */


.button-wrapper {
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	background-color: #181818;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	padding: 0.7em 1.5em;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.10s ease-out;
	min-width: 240px;
	max-width: 340px;
}
.button-wrapper:hover {
	background-color: #232323;
}
.button-wrapper.button-text-destructive {		color: #ea4e3d;}

.button-container {
	/* display: inline-block; */
	min-height: 18px;
}
.button-icon-displacer {
	padding-left: 28px;
}

.button-icon-displacer::before {
	display: block;
	content: '';
	width: 18px;
	height: 18px;
	position: absolute;
	left: 0px;
	top: 50%;
	margin-top: -9px;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-position: left top;
}
.button-icon-add .button-icon-displacer::before {	background-image: url(../img/icons/icon-add-green-outlined.svg);}


/* CONTENT BUTTONS END */







.view-container {
	padding-top: 30px;
	padding-bottom: 80px;
}
/* .view-container.edge-to-edge {		padding-top: 0px;} */




.category-header {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	margin-bottom: 6px;
}

.item-group-category,
.view-container li p.item-group-category {
	text-transform: uppercase;
	font-size: 10px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 4px;

	/* white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; */
}







/* CONTENT LIST START */

.group-list {
	background: #181818;
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
	margin-right: -1rem;
	margin-left: -1rem;
	margin-bottom: 20px;
	border-top: 1px solid #2a2a2a;
	border-bottom: 1px solid #2a2a2a;
}
/* .group-list::before,
.group-list::after {
	content: '';
	position: absolute;
	background-color: rgba(255,255,255,0.12);
	display: block;
	z-index: 15;
	right: auto;
	bottom: auto;
	left: 0;
	height: 1px;
	width: 100%;
}
.group-list::before {	top: -1px;}
.group-list::after {	bottom: -1px;} */



/* .group-list-item {
	position: relative;
	box-sizing: border-box;
	padding-right: 1rem;
	padding-left: 1rem;
	padding-top: 14px;
	padding-bottom: 14px;
}
.group-list-item.indentation0 {		padding-left: 0;}
.group-list-item.indentation1 {		padding-left: 2.25rem;}
.group-list-item.indentation2 {		padding-left: 3.5rem;}
.group-list-item.indentation3 {		padding-left: 4.75rem;} */

.group-list li {
	/* padding-right: 1rem;
	padding-left: 1rem;
	padding-top: 14px;
	padding-bottom: 14px; */
}

/* .group-list li.indentation0 {		padding-left: auto;}
.group-list li.indentation1 {		padding-left: 2.25rem;}
.group-list li.indentation2 {		padding-left: 3.5rem;}
.group-list li.indentation3 {		padding-left: 4.75rem;} */

.group-list li a {
	/* padding-right: 1rem;
	padding-left: 1rem; */
	display: block;
	padding: 14px 16px;
}
.group-list li a:hover {
	text-decoration: none;
	background-color: rgba(255,255,255,0.06);
}
.group-list li a:active {
	outline: none;
	text-decoration: none;
	background-color: rgba(255,255,255,0.10);
}
.group-list li a:focus {
	outline: none;
}


.group-list li.indentation0 a {		padding-left: auto;}
.group-list li.indentation1 a {		padding-left: 2.25rem;}
.group-list li.indentation2 a {		padding-left: 3.5rem;}
.group-list li.indentation3 a {		padding-left: 4.75rem;}


.group-list li a::after {
	content: '';
	position: absolute;
	background-color: rgba(255,255,255,0.08);
	display: block;
	/* z-index: 15; */
	right: auto;
	bottom: 0px;
	left: 16px;
	/* left: 1rem; */
	right: 0;
	height: 1px;
}
.edge-to-edge .group-list li a::after {	left: 0;}
.group-list li:last-child a::after {		display: none;}


.group-list-item {
	padding-left: 50px;

	background: red;
}


/* .group-list-item.flexer-yes {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
} */

/* .group-list-item::after {
	content: '';
	position: absolute;
	background-color: rgba(255,255,255,0.08);
	display: block;
	z-index: 15;
	right: auto;
	bottom: 0px;
	left: 1rem;
	right: 0;
	height: 1px;
} */
/* .view-container.edge-to-edge li::after {	left: 0;}
.view-container li:last-child::after {		display: none;} */

.view-container li h3,
.view-container li p {
	/* display: flex;
	flex-direction: column; */
	box-sizing: border-box;
	margin: 0;
	margin-bottom: 4px;
	padding: 0;
	align-items: center;
	font-weight: 600;
	line-height: 20px;
}
.view-container li.flexer-yes h3,
.view-container li.flexer-yes p {
	display: flex;
	flex-direction: column;
}

.view-container li h3 {
	font-size: 20px;
	/* font-size: 18px; */
	color: #fff;
}

.view-container li p {
	font-size: 18px;
	line-height: 1.2;
	color: #a0a0a0;

	/* white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; */
}

.item-parentage,
.view-container li p.item-parentage {
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.hierarchy-separator {
	padding-left: 0.4em;
	padding-right: 0.4em;
}


/* CONTENT LIST END */












/* GLOBAL NAV START */



.global-navigation-wrapper {
	/* -ms-flex-line-pack: center;
	align-content: center; */
	/* background: #181818; */
	/* display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center; */
}

.global-navigation-container {
	/* -webkit-box-align: top;
	-ms-flex-align: top;
	align-items: top; */
	/* cursor: pointer; */
	display: grid;
	height: 48px;
	/* justify-items: center; */
	overflow: hidden;

	/* max-width: 375px;
	background-image: url(../img/MyTeam-iPhone6-2x.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 375px 962px; */
}



.global-navigation-container li,
.global-navigation-container li a {
	height: 100%;
	box-sizing: border-box;
}

.global-navigation-container li {
    /* display: grid; */
    /* grid-template-rows: repeat(2, 31px 20px);
    justify-items: center; */
	/* width: 100%; */
}

.global-navigation-container li a {
	color: #a0a0a0;
	cursor: pointer;
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	/* width: 100%; */
	max-width: 140px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	padding-top: 33px;
}
.global-navigation-container li a::before {
	background-repeat: no-repeat;
	content: '';
	display: block;
	height: 32px;
	width: 40px;
	position: absolute;
	top: 2px;
	left: 50%;
	margin-left: -20px;
	z-index: 10;
}
.global-navigation-container li.my-team a::before {		background-image: url(../img/icons/nav-button-my-team.svg);}
.global-navigation-container li.browse a::before {		background-image: url(../img/icons/nav-button-browse.svg);}
.global-navigation-container li.search a::before {		background-image: url(../img/icons/nav-button-search.svg);}
.global-navigation-container li.settings a::before {	background-image: url(../img/icons/nav-button-settings.svg);}


.global-navigation-container li a:hover {
	color: #fff;
	text-decoration: none;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.08)), color-stop(40%, rgba(255, 255, 255, 0.0)));
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.0) 40%);
}
.global-navigation-container li a:active {
	color: #fff;
	text-decoration: none;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.16)), color-stop(60%, rgba(255, 255, 255, 0.0)));
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.0) 60%);
}


.global-navigation-container li a:hover::before {
	-webkit-filter: brightness(0) saturate(100%) invert(99%) sepia(31%) saturate(1%) hue-rotate(149deg) brightness(106%) contrast(101%);
		filter: brightness(0) saturate(100%) invert(99%) sepia(31%) saturate(1%) hue-rotate(149deg) brightness(106%) contrast(101%);
}

.global-navigation-container li.selected a {
	color: #88beff;
}
.global-navigation-container li.selected a::before {
	-webkit-filter: brightness(0) saturate(100%) invert(77%) sepia(23%) saturate(3634%) hue-rotate(184deg) brightness(103%) contrast(101%);
		filter: brightness(0) saturate(100%) invert(77%) sepia(23%) saturate(3634%) hue-rotate(184deg) brightness(103%) contrast(101%);
}

.global-navigation-container li.selected-root a,
.global-navigation-container li.selected-root a:hover,
.global-navigation-container li.selected-root a:active {
	color: #88beff;
	background: none;
	cursor: default;
}


/* GLOBAL NAV END */







@media only screen and (min-width: 721px) {
	.view-container {
		/* background: red; */
	}

	.view-container ul {
		border-right: 1px solid #2a2a2a;
		border-left: 1px solid #2a2a2a;
		border-radius: 10px;
	}

	.group-list li:first-child a {
		border-radius: 10px 10px 0 0;
	}
	.group-list li:last-child a {
		border-radius: 0 0 10px 10px;
	}
}




/*
iPhones with no Forehead
*/

/* iPhone 6, 6S, 7, 8 */
/* @media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (display-mode: standalone) {
	.default-header-wrapper {
		padding-top: 20px;
	}
} */

/* iPhone 6 Plus, 6S Plus, 7 Plus, 8 Plus */
/* @media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (display-mode: standalone) {
	.default-header-wrapper {
		padding-top: 20px;
	}
} */


/*
iPhones with Forehead
*/

/* iPhone X, XS */
/* @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (display-mode: standalone) {
	.default-header-wrapper {
		padding-top: 44px;
	}
	.global-navigation-container {
		padding-bottom: 34px;
	}
} */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
	.default-header-wrapper {
		padding-top: 44px;
	}
	.global-navigation-container {
		padding-bottom: 34px;
	}
}

/* iPhone XS Max */
/* @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (display-mode: standalone) {
	.default-header-wrapper {
		padding-top: 44px;
	}
	.global-navigation-container {
		padding-bottom: 34px;
	}
} */

/* iPhone XR */
/* @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (display-mode: standalone) {
	.default-header-wrapper {
		padding-top: 44px;
	}
	.global-navigation-container {
		padding-bottom: 34px;
	}
} */