:root {
	--blue: #8ECAEE;
	--grey: #EDEDED;
	--border: solid 0.3vw var(--grey);
	font-family: "Geist", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	--navbar: 13vw;
	--left: 7vw;
}

html,body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background: var(--blue);
	overflow: hidden;
}

input,
textarea,
select,
button {
	font-family: "Geist", sans-serif;
}

.import {
	width: inherit;
	height: inherit;
}

.launch {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: var(--blue);
}

.launch .loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	--width: 35vw;
	width: var(--width);
}

@media (min-width: 450px) {
	.launch .loader {
		--width: 12vw;
	}
}

.launch .restricted {
	position: absolute;
	height: auto;
	width: 70%;
	overflow: hidden;
}

.launch .icon {
	position: relative;
	width: var(--width);
	height: auto;
	opacity: 0.3;
}

.launch .restricted .icon {
	opacity: 1;
	width: var(--width);
}

.edition {
	position: relative;
	width: 100%;
	height: 100%;
	display: none;
}

.edition[e="app"] {
	background: white;
}

.edition[e="website"] {
	color: white;
}

[edition="website"] .edition[e="website"],
[edition="app"] .edition[e="app"] {
	display: block;
}



/* WEBSITE */
.edition[e="website"] {
	overflow: hidden;
}

.edition[e="website"] .logo {
	position: absolute;
	margin: 1.5vw 2.5vw;
	font-size: 0;
	cursor: pointer;
	border: 0.1vw solid hsla(0,0%,100%,0.3);
	border-radius: 50%;
	width: 5vw;
	height: 5vw;
}

.edition[e="website"] .logo > svg {
	position: absolute;
	width: 58.5%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}


.hero {
	position: absolute;
	top: 45%;
	transform: translateY(-45%);
	margin-left: 8.5vw;
	max-width: 50vw;
}

.hero .title {
	font-size: 7.5vw;
	font-weight: 700;
	line-height: 7.5vw;
}

.hero .description {
	font-size: 1.85vw;
	font-weight: 500;
	margin-top: 0.7vw;
}

.hero .badges {
	font-size: 0;
	margin-top: 1vw;
}

.hero .badge {
	position: relative;
	display: inline-block;
	width: auto;
	height: 5vw;
	margin-right: 2.5vw;
	margin-top: 3.5vw;
	cursor: pointer;
}

.hero .badge:last-child {
	margin-right: 0;
}

.phone {
	position: absolute;
	right: 0;
	bottom: 0;
/*	margin-right: 7.5vw;*/
	height: auto;
	width: 72.5vw;
	margin-bottom: 0vw;
	margin: -15vw -17.5vw;
}

.phone img {
	width: 100%;
	height: auto;
}

.contact {
	position: absolute;
	font-size: 1.5vw;
	font-weight: 700;
	right: 0;
	top: 0;
	margin: 2.5vw;
	text-transform: uppercase;
	cursor: pointer;
}

[edition="website"] .bottom {
	position: absolute;
	bottom: 0;
	margin: 1.5vw 2.5vw;
	text-transform: uppercase;
	font-size: 1.2vw;
	font-weight: 600;
	white-space: nowrap;
}

[edition="website"] .bottom > div {
	position: relative;
	display: inline-block;
	margin-right: 2.5vw;
	opacity: 0.3;
}

[edition="website"] .bottom > div:not([b="disclaimer"]) {
	cursor: pointer;
}

[edition="website"] .bottom > div:not([b="disclaimer"]):hover {
	opacity: 0.5;
}



/* APP */
.edition[e="app"] .logo {
	position: relative;
	width: 15vw;
	height: 15vw;
	margin: 10vw 0 0 10vw;
	z-index: 99;
	cursor: pointer;
	transition: all 0.2s;
	border: 0.1vw solid #fff;
	border-radius: 50%;
}

.edition[e="app"] .logo > svg {
	position: absolute;
	width: 58.5%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.activated .edition[e="app"] .logo path {
	fill: var(--blue) !important;
}

.sector {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: scroll;
	box-sizing: border-box;
	padding-bottom: calc(var(--navbar) + env(safe-area-inset-bottom));
	font-size: 0;
	display: none;
}

.sector[s="request"] {
	padding-bottom: var(--left);
}

.showPopout .sector,
.sector[s="chat"] {
	overflow: hidden !important;
}

.sector[s="intro"],
.sector[s="email"],
.sector[s="password"],
.sector[s="onboard"] {
	background: var(--blue);	
}

.sector[s="intro"] {
	display: block;
}

.sector .top {
	position: relative;
	display: inline-block;
	font-size: 3vw;
	text-transform: uppercase;
	color: white;
	margin-left: 10vw;
	margin-top: 13.5vw;
	font-weight: 800;
	border: 0.05vw solid #fff;
	text-align: center;
	padding: 1.75vw 3vw;
	margin-top: 28.5vw;
	border-radius: 5vw;
	cursor: pointer;
}

.sector[s="email"] .top,
.sector[s="password"] .top {
	margin-top: 7.5vh;
}

.sector[s="request"] .top {
	color: black;
	border: none;
	padding: 0;
	margin-left: var(--left);
	margin-top: 21.5vw;
	font-size: 4vw;
	font-weight: 600;
	/*padding: 2vw 4vw;
	border-radius: 10vw;
	border: 0.25vw solid hsla(0,0%,0%);*/
}

.sector .title {
	position: relative;
	font-size: 15vw;
	text-transform: uppercase;
	color: white;
	margin-left: 10vw;
	width: 80vw;
	margin-top: 13.5vw;
	font-weight: 800;
}

.sector[s="new"] .title {
	position: relative;
	color: black;
    margin-top: 3.5vw;
    font-size: 12vw;
    font-weight: 800;
    margin-left: var(--left);
    top: 0;
}

.sector[s="email"] .title,
.sector[s="password"] .title {
	margin-top: 7.5vh;
	font-size: 13.5vw;
}

.sector .top + .title {
	margin-top: 3.5vw;
}

.sector[s="dashboard"] .title,
.sector[s="alerts"] .title,
.sector[s="request"] .title,
.sector[s="fetchers"] .title,
.settings .title,
.sector[s="profile"] .title {
	margin-left: var(--left);
	font-size: 13.5vw;
	color: black;
}

.sector[s="alerts"] .title1 {
	text-align: center;
    margin-top: 3.5vw;
    font-size: 4vw;
}

.sector[s="dashboard"] .title,
.sector[s="profile"] .title,
.settings .title,
.sector[s="fetchers"] .title,
.sector[s="alerts"] .title.head {
	margin-top: 21.5vw;
}

.sector[s="request"] .title {
	margin-top: 2vw;
	font-size: 8.5vw;
}

.sector[s="request"] .bullets .title {
	margin: 0;
	font-size: 6vw;
}

.sector[s="dashboard"] .divider + .title {
	font-size: 11vw;
	line-height: 15vw;
}

.group .title {
	font-size: 7vw;
	line-height: normal;
}

.sector .description {
	position: relative;
	font-size: 5vw;
	font-weight: 600;
	margin-left: var(--left);
	width: calc(100% - (var(--left) * 2));
	text-transform: uppercase;
	color: black;
	margin-top: 0.5vw;
	vertical-align: middle;
}

.sector[s="intro"] .description,
.sector[s="email"] .description,
.sector[s="password"] .description ,
.sector[s="onboard"] .description {
	font-size: 5.25vw;
	font-weight: 500;
	margin-left: 10vw;
	text-transform: none;
	color: white;
	margin-top: 5vw;
	width: 80%;
}

.sector[s="request"] .description {
	margin-top: 1.2vw;
}

.sector .description svg {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-right: 2vw;
	width: 7.25vw;
	height: auto;
}

.sector[s="alerts"] .description svg {
	height: 6vw;
	width: auto;
	margin-top: -1vw;
}

.sector[s="profile"] .description svg {
	height: 7vw;
	width: auto;
	margin-top: -1vw;
	margin-right: 2.5vw;
}

.sector[s="dashboard"] .description {
	font-size: 5vw;
	font-weight: 600;
	margin-left: var(--left);
}

.sector[s="request"] .description {
	font-size: 5.5vw;
	text-transform: none;
	white-space: pre-line;
}

.sector[s="request"] .fetchers > .description {
	font-size: 4vw;
	text-transform: uppercase;
	width: 75%;
	margin-top: 2vw;
}

.sector .subdescription {
	position: relative;
	font-size: 3vw;
	text-transform: uppercase;
	font-style: italic;
	margin-left: var(--left);
	color: black;
	margin-top: 2vw;
	color: hsl(0,0%,0%,0.5);
}

.comments .subdescription {
	text-align: center;
	margin: 15vw 0;
}

.sector .subtitle {
	font-size: 6vw;
	font-weight: 600;  /* confirm */
	margin-left: var(--left);
	text-transform: uppercase;
	color: black;
	margin-top: 12.5vw;
}

.sector[s="settings"] .subtitle {
	font-weight: 700;
	font-size: 8.5vw;
	max-width: 70vw;
}

.sector[s="settings"] .group:first-child .subtitle {
	margin-top: 0;
}

.current .subtitle,
.fetchers .subtitle,
.comments .subtitle {
    margin-top: 7.5vw;
}

.current .subtitle {
	margin: 0;
	font-size: 3.5vw;
}

.sector .container .subtitle {
	font-size: 12.5vw;
	margin-bottom: 2.5vw;
}

.sector .paragraph {
	font-size: 4.5vw;
	text-transform: uppercase;
	font-weight: 700;
	margin-left: var(--left);
	width: calc(100% - (var(--left) * 2));
	margin-top: 5vw;
}

.sector .input2,
.popout .input2 {
	position: relative;
	width: 80vw;
	border-radius: 5vw;
	height: 17.5vw;
	background: hsla(0,0%,100%,0.3);
	margin-left: 10vw;
	margin-top: 5vw;
	overflow: hidden;
}

.popout .input2 {
	height: 15vw;
	border-radius: 4vw;
	margin-left: var(--left);
}

.popout [b="change"] .input2 {
	background: transparent;
	padding: 0;
}

.sector .input2 {
	margin-top: 32.5vw;
}

.sector[s="new"] .input2 {
	position: relative;
	width: 84vw;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 0;
}

.sector[s="dashboard"] .input2,
.sector[s="settings"] .input2,
.popout .input2 {
	background: hsla(0,0%,93%,1);
}

.sector[s="settings"] .input2 {
	margin-top: 0;
}

.fetching .sector[s="dashboard"] .input2[i="fetch"] {
	height: 35vw;
}

.duo  {
	margin-left: var(--left);
	width: calc(100vw - (var(--left) * 2));
	font-size: 0;
	margin-top: 5vw;
}

.duo .input2 {
	position: relative;
	display: inline-block;
	width: calc(50% - 2.5vw);
	margin: 0;
	margin-right: 5vw;
	margin-top: 2.5vw;
}

.duo .input2:last-child {
	margin-right: 0;
}

.triple {
	margin-left: var(--left);
	width: calc(100vw - (var(--left) * 2));
	margin-top: 10vw;
}

.triple .title {
	font-weight: bold;
	font-size: 4vw;
	margin-bottom: 2.5vw;
}

.triple .group {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 5vw 5vw; /* Row-gap 5vw, Column-gap 2.5vw */
	box-sizing: border-box;
}

.triple .input2 {
	flex: 1 1 calc(33% - 5vw);
	min-width: 80px;
	margin: 0;
}

.quad {
	margin-left: var(--left);
	width: calc(100vw - (var(--left) * 2));
	margin-top: 10vw;
}

.quad .title {
	font-weight: bold;
	font-size: 4vw;
	margin-bottom: 2.5vw;
}

.quad .group {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 5vw 5vw; /* Row-gap 5vw, Column-gap 5vw */
	box-sizing: border-box;
}

.quad .input2 {
	flex: 1 1 calc(25% - 3.75vw); /* 👉 25% (four across), minus small gap correction */
	min-width: 60px; /* smaller min-width if needed */
	margin: 0;
}

.duo .input2 input,
.uno .input2 input {
/*	padding: 0 2vw !important;*/
}

.uno .input2[i="zip"] input,
.uno .input2[i="cvc"] input,
.duo .input2[i="month"] input,
.duo .input2[i="year"] input {
	padding: 0 2vw !important;
	text-align: center;
}

.uno .input2[i="cvc"] input1 {
	text-align: center;
}

.quad .input2 input {
	text-align: center !important;
	padding: 0 2vw !important;
}

.row {
	position: relative;
	font-size: 0;
	white-space: nowrap;
	margin-left: var(--left);
	width: calc(100vw - (var(--left) * 2));
	vertical-align: top;
}

.row .duo {
	position: relative;
	display: inline-block;
	width: 50%;
	margin-left: 0;
	vertical-align: top;
}

.row .duo .input2:first-child {
	margin-left: 0;
}

.row .uno {
	position: relative;
	display: inline-block;
	width: 20%;
	margin-left: 30%;
	margin-top: 5vw;
}

.uno .input2 {
	margin-top: 2.5vw;
	margin-left: 0;
	width: 100%;
}

.sector .input2:focus-within {
	background: hsla(0,0%,100%,0.4);
}

.popout .input2:focus-within {
	background: hsla(0,0%,0%,0.1);
}

.sector[s="dashboard"] .input2:focus-within,
.sector[s="settings"] .input2:focus-within {
	background: hsla(0,0%,90%,1);
}

.sector[s="settings"] .input2:focus-within {
	background: transparent;
/*	border-color: hsl(0,0%,80%);*/
}

.sector .input2 input,
.popout .input2 input,
.sector .input2 textarea,
.popout .input2 textarea,
.sector .input2 select,
.popout .input2 select {
	position: absolute;
	outline: 0;
	border: none;
	background: transparent;
	font-size: 6.5vw;
	font-weight: 700;
	height: 100%;
	width: 100%;
	color: hsl(0,0%,45%);
	padding: 0 5vw;
	box-sizing: border-box;
	text-align: left;
}

.popout .input2 input {
	font-size: 5vw;
	color: hsl(0,0%,47.5%);
}

.pop[c="last4"] .input2 input {
	text-align: center;
}

.sector .input2 textarea {
	margin-top: 5vw;
	height: 25vw;
}

.sector .input2 svg:not(.peek) + input {
	margin-left: 10vw;
}

.sector[s="dashboard"] .input2 input,
.sector[s="dashboard"] .input2 textarea {
	color: hsl(0,0%,0%);
}

.sector .input2 input::placeholder,
.sector .input2 textarea::placeholder {
	color: hsla(0,0%,0%,0.3) !important;
}

.popout .input2 input::placeholder {
	color: hsl(0,0%,70%);
}

.sector .input2 svg {
	position: absolute;
	display: inline-block;
	margin-left: 5vw;
	width: 6vw;
	height: auto;
	top: 50%;
	transform: translateY(-50%);
}

.sector .input2 svg path {
 	opacity: 0.3;
 }

 .sector .error {
 	position: relative;
 	width: 80%;
 	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	margin-top: 5vw;
	color: white;
	font-size: 4vw;
	font-weight: 500;
	font-style: italic;
	display: none;
 }

.sector .button,
.baseboard .button {
	position: fixed;
	bottom: 0;
	margin-bottom: 7.5vw;
	width: 80vw;
	margin-left: 10vw;
	padding: 4vw 0;
	border-radius: 30vw;
	font-size: 4.25vw;
	font-weight: 900;
	background: white;
	color: #A6ACAF;
	text-align: center;
	cursor: pointer;
}

.sector .button.pleaseWait,
.popout .button.pleaseWait {
	pointer-events: none !important;
	background: #F2F2F2 !important;
	color: #D9D8D8 !important;
}

.popout [b="enroll"] .button1 {
	position: relative;
	margin-top: 35vw;
}

.fetcher .button,
.popout [b="enroll"] .button,
.popout [b="change"] .button {
	background: var(--blue);
	color: #fff;
}

.overview .button {
	position: relative;
	display: inline-block;
	background: hsla(0,0%,93%,0.93333);
	font-size: 6vw;
	width: auto;
	padding: 3.5vw 7.5vw;
	color: black;
	margin-top: 7.5vw;
	line-height: 5vw;
}

.input2 .peek {
	position: absolute;
	right: 0;
	margin-right: 5vw;
	top: 50%;
	transform: translateY(-50%);
	opacity: 1;
	z-index: 1;
	cursor: pointer;
}

.input2.peeking .peek {
	opacity: 0.6;
}

.sector .input2 svg.peek path {
	opacity: 1;
}

.sector[s="dashboard"] .divider {
	margin-top: 20vw;
}

.avatar {
	position: absolute;
	right: 0;
	margin: 3.5vw;
	background: #e1e1e1;
	border-radius: 50%;
	overflow: hidden;
	width: 13.5vw;
	height: 13.5vw;
	z-index: 1;
	top: 0;
	cursor: pointer;
}

.sector[s="profile"] .avatar {
	width: 20vw;
	height: 20vw;
}

.avatar .upload {
	position: absolute;
	z-index: 1;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
}

.avatar.empty .upload,
.sector[s="settings"] .avatar .upload1 {
	background: hsla(0,0%,48%,0.7);
	display: block;
}

.fetching .upload1 {
	display: none !important;
}

.avatar .upload svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 6vw;
	height: 6vw;
	display: none;
}

.popout .avatar .upload svg {
	width: 12vw;
	height: 12vw;
}

.sector[s="settings"] .avatar .upload svg[i="outline"] {
	display: block;
}

.avatar.empty .upload svg {
	display: none;
}

.avatar.empty .upload svg[i="solid"] {
	display: block;
}

.avatar img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.avatar.empty img {
	display: none;
}

.navbar {
	position: fixed;
	z-index: 9;
	bottom: 0;
	width: 100%;
	text-align: center;
	height: var(--navbar);
	border-top: 0.5vw solid #ECEDEE;
	border-bottom: white env(safe-area-inset-bottom) solid;
	background: white;
	display: none;
}

[sector="dashboard"]:not(.fetching) .navbar,
[sector="alerts"]:not(.fetching) .navbar,
[sector="settings"] .navbar {
	display: block;
}

.navbar > div {
	position: relative;
	display: inline-block;
	margin-right: 15vw;
	width: 7vw;
	height: 7vw;
	vertical-align: top;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.navbar > div:last-child {
	margin-right: 0;
}

.navbar > div svg {
	position: relative;
	width: 100%;
	height: auto;
	display: none;
	transition: all .5s;
	height: 7vw;
	width: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.navbar > div svg.outline {
	display: inline-block;
}

.navbar > div.active svg {
	display: none;
}

.navbar > div.active svg.solid {
	display: inline-block;
}

.navbar > div svg path {
	opacity: 1;
/*	fill: hsla(0,0%,0%,0.4);*/
	fill: #D9D9D9;
	transition: all 0.28s;
}

.navbar > div.active svg path {
	fill: var(--blue)
}

/*.navbar > div.active svg.filled {
	display: block;
}

.navbar > div.active svg.outline {
	display: none;
}

.navbar > div.active svg path {
	fill: var(--blue);
}*/

.sort {
	position: relative;
	display: inline-block;
	color: hsla(0,0%,0%,0.4);
	background: #eee;
	padding: 2.25vw 5vw;
	border-radius: 10vw;
	font-size: 5.25vw;
	margin-left: 10vw;
	margin-top: 1.25vw;
	cursor: pointer;
}

.sort div {
	position: relative;
	display: inline-block;
	margin-left: 1vw;
	font-size: 5vw;
	margin-top: 1vw;
	vertical-align: middle;
}

.sort svg {
	position: relative;
	height: 5vw;
	width: auto;
	vertical-align: middle;
}

.list {
	margin-top: 7.5vw;
}

.list[l="comments"] {
	margin-top: 5vw;
}

.sector[s="profile"] .list {
    margin-top: 6vw;
}

.list[l="open"] .blob,
.list[l="requests"] .blob,
.sector[s="profile"] .list .blob {
	position: relative;
    width: calc(100% - (7vw * 2));
    margin-left: var(--left);
    height: auto;
    background: #eee;
    margin-bottom: 7.5vw;
    padding: 0;
    box-sizing: border-box;
    border-radius: 10vw;
}

.sector[s="dashboard"] .list .blob,
.sector[s="profile"] .list .blob {
	background: transparent;
	text-align: center;
	border: 0.25vw solid #EEEEEE;
	cursor: pointer;
}

.sector[s="profile"] .list .blob {
	border-radius: 10vw;
	text-align: left;
}

.list[l="open"] .blob.own1 {
	border: 1vw solid hsla(203,74%,75%,0.25);
}

.list .blob .top {
	font-size: 3.85vw;
	font-weight: 600;
	margin: 0;
	padding: 0;
	margin-bottom: 0.2vw;
	margin-top: 3.5vw;
	border: none;
	color: black;
	cursor: default;
}

.sector[s="profile"] .list .blob .top {
	margin-left: 5vw;
}

.list .blob .title {
	margin: 0;
	font-size: 6.85vw;
	font-weight: 700;
	padding: 0 5%;
	box-sizing: border-box;
	width: 100%;
	cursor: default;
	/*display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;*/
}

.list .blob .details {
	position: relative;
	font-size: 3.5vw;
	font-weight: 600;
	margin-top: 0.2vw;
	text-transform: uppercase;
	width: 90%;
	left: 50%;
	transform: translateX(-50%);
	cursor: default;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.sector[s="profile"] .list .blob .details {
	margin-bottom: 4vw;
}

.sector[s="profile"] [g="inprogress"] .list .blob .details {
	margin-bottom: 1.5vw;
}

.list .blob .user {
	margin-top: 2.1vw;
	margin-bottom: 3.5vw;
}

.groups .blob.own .user {
	display: none;
}

.groups [g="inprogress"] .list .blob .user {
	margin-top: 2vw;
	padding-left: 5vw;
	box-sizing: border-box;
	display: block;
}

.list .blob .user .image {
	position: relative;
	display: inline-block;
	width: 7vw;
	height: 7vw;
	object-fit: cover;
	border-radius: 50%;
	vertical-align: middle;
	border: solid 0.2vw #eee;
}

.groups [g="inprogress"] .list .blob .user .image {
	display: none;
}

.list .blob .user .name {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	text-transform: uppercase;
	font-size: 3.65vw;
	font-weight: 800;
	margin-left: 2vw;
}

.groups [g="inprogress"] .list .blob .user .name {
	margin-left: 0;
	font-style: italic;
}

.list .blob .button {
	position: relative;
	background: var(--blue);
	color: white;
	margin: 0;
	margin-top: -0.35vw;
	width: 80%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 4vw;
	height: 5vw;
	text-transform: uppercase;
	margin-bottom: 3.5vw;
}

.sector[s="dashboard"] .list .blob .button {
	padding: 2.85vw 0;
	font-size: 3.5vw;
}

.sector[s="profile"] .list .blob .button {
	width: 90%;
}

.list[l="fetchers"] .blob .button {
	position: absolute;
	right: 0;
	width: 8.5vw;
	height: 8.5vw;
	padding: 0;
	margin: 0;
	margin-right: 10vw;
	top: 50%;
	transform: translateY(-50%);
}

.list[l="fetchers"] .blob .button svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.list .blob.requested .button {
	background: #ECECEC;
	color: #B5B5B5;
}

.list .blob.own .button {
	background: #BABABA;
	color: white;
	width: calc(100% - 10vw);
	height: auto;
	padding: 3vw 0;
	font-size: 3.5vw;
}

[g="inprogress"] .list .blob.own .button {
	display: none;
}

.list .blob .button span {
	pointer-events: none;
	display: none;
}

.sector[s="dashboard"] .list .blob .button span {
	margin-top: 0;
}

.list .blob .button span[s="accept"] {
	display: block;
}

.list .blob.requested .button span {
	display: none;
}

.list .blob.requested .button span[s="requested"] {
	display: block;
}

.list .blob.own .button span {
	display: none;
}

.list .blob.own .button span[s="cancel"] {
	display: block;
}

.list[l="fetchers"] .blob .image {
	position: relative;
	display: inline-block;
	width: 12vw;
	height: 12vw;
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
}

.sector[s="request"] .bullets {
	margin-left: var(--left);
	margin-top: 7vw;
	width: calc(100vw - (var(--left) * 2));
}

.sector[s="request"] .bullets > div {
	position: relative;
	display: block;
	white-space: nowrap;
	margin-bottom: 2.8vw;
}

.sector[s="request"] .bullets > div:last-child {
	margin-bottom: 0;
}

.sector[s="request"] .bullets .dashes  {
	position: absolute;
	height: 100%;
	border: 0.5vw dashed #D9D9D9;
	margin-top: 2.5vw;
	margin-left: .5vw;
}

.sector[s="request"] .bullets .dot {
	position: relative;
	display: inline-block;
	background: black;
	width: 2vw;
	height: 2vw;
	border-radius: 50%;
	vertical-align: top;
	margin-top: 2.5vw;
}

.sector[s="request"] .bullets .value {
	position: relative;
	display: inline-block;
	width: calc(100% - 2vw - 2.5vw);
	font-size: 5vw;
	margin-left: 2.5vw;
	vertical-align: middle;
	text-transform: uppercase;
	font-weight: 700;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.sector[s="request"] .bullets .value .description {
	width: 85%;
	margin-left: 0;
	white-space: normal;
	overflow: auto;
	font-size: 4.25vw;
	font-weight: 700;
}

.sector[s="request"] .bullets .value .description u {
	font-size: 3.5vw;
	font-weight: 500;
	cursor: pointer;
}

.sector[s="request"] .user {
	margin-left: var(--left);
	margin-top: 7vw;
	width: calc(100% - (var(--left) * 2));
}

.sector[s="request"][t="creator"] .user {
	display: none;
	margin-bottom: 0;
}

.sector[s="request"] .user .image {
	position: relative;
	display: inline-block;
	width: 11vw;
    height: 11vw;
	border-radius: 50%;
	vertical-align: middle;
	object-fit: cover;
	overflow: hidden;
}

.sector[s="request"] .user .text {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: 2.725vw;
}

.sector[s="request"] .user .text .top {
	margin: 0;
	font-size: 3.2vw;
	font-weight: 600;
}

.sector[s="request"] .user .text .name {
	font-size: 4.75vw;
	font-weight: 800;
	text-transform: uppercase;
	margin-top: 0.2vw;
}

.sector[s="request"] .buttons {
	margin-top: 7vw;
	margin-left: var(--left);
	width: calc(100% - (var(--left) * 2));
	font-size: 0;
	white-space: nowrap;
	display: none;
}

.sector[s="request"][t="creator"] .buttons,
.sector[s="request"][t="fetcher"] .buttons {
	display: block;
}

.sector[s="request"] .buttons > div {
	position: relative;
	display: inline-block;
	padding: 2.5vw 5vw;
	border: solid #E6E6E6 0.5vw;
	height: 12vw;
	width: 20vw;
	border-radius: 10vw;
	margin-right: 3.5vw;
	box-sizing: border-box;
	text-align: center;
	text-transform: uppercase;
	font-size: 4vw;
	font-weight: 800; /* confirm */
	color: hsla(0,0%,0%,0.3);
	vertical-align: middle;
	cursor: pointer;
}

.sector[s="request"] .buttons > div[b="complete"],
.sector[s="request"] .buttons > div[b="cancel"] {
	background: var(--blue);
	color: white;
	height: 12vw;
	width: 37.5vw;
	border: none;
}

.sector[s="request"] .buttons > div[b="complete"],
.sector[s="request"] .buttons > div[b="chat"] {
	display: none;
}

/* IF REQUEST HAS FETCHER, AND CREATOR LOGGED IN */
.sector[s="request"][t="creator"].hasFetcher .buttons > div[b="cancel"],
.sector[s="request"][t="creator"].hasFetcher .buttons > div[b="fetchers"] {
	display: none;
}

.sector[s="request"][t="creator"].hasFetcher .buttons > div[b="complete"] {
	display: inline-block;
	width: 63.5vw;
}

/* IF REQUEST IN DELIVERY, AND IS FETCHER */
.sector[s="request"][t="fetcher"] .buttons > div[b="cancel"],
.sector[s="request"][t="fetcher"] .buttons > div[b="fetchers"] {
	display: none;
}

.sector[s="request"][t="fetcher"] .buttons > div[b="chat"] {
	display: inline-block;
}

.sector[s="request"][t="fetcher"] .buttons > div[b="complete"] {
	display: inline-block;
/*	width: 63.5vw;*/
}

.sector[s="request"] .buttons > div:last-child1 {
	margin-right: 0;
	width: 15vw;
	height: 12vw;
	background: #E6E6E6;
}

.sector[s="request"] .buttons > div .text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.sector[s="request"] .buttons > div svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.sector[s="request"] .comments {
	display: none;
}


/* UPLOAD */
.invisible {
	position: absolute;
	opacity: 0 !important;
	pointer-events: none;
}


/* SETTINGS */
.signout {
	font-size: 3.5vw;
	margin-left: 10vw;
	margin-top: 15vw;
	text-transform: none;
	cursor: pointer;
}

.sector[s="settings"] .version {
	position: relative;
	color: black;
	opacity: 1;
	margin: 0;
	margin-left: 10vw;
	margin-top: 5vw;
	font-size: 2.5vw;
}


/* POPOUT */
.popout {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: none;
}

.showPopout .popout {
	display: block;
}

.pop {
    position: relative;
	overflow-y: scroll;
    height: 100%;
    padding-bottom: 26.5vw;
    box-sizing: border-box;
}

.popout .shield {
	position: absolute;
	background: hsla(0,0%,0%,0.6);
	-webkit-backdrop-filter: blur(2vw);
	backdrop-filter: blur(2vw);
	width: 100%;
	height: 100%;
	opacity: 0;
}

.popout .box {
	position: absolute;
	height: 90%;
	width: 100%;
	bottom: 0;
	background: white;
	border-radius: 10vw 10vw 0 0;
	overflow-y: scroll;
	margin-bottom: -100vh;
}

.popout .pop[c="address"] .input2s {
	margin-top: 5vw;
	margin-bottom: 15vh;
}

.popout .line,
.more .line {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	height: 2vw;
	width: 100%;
	padding-top: 5vw;
	padding-bottom: 5vw;
	cursor: pointer;
}

.popout .line div,
.more .line div {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	height: 2vw;
	width: 15vw;
	background: #d9d9d9;
	border-radius: 25vw;
}

.popout .image {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 40vw;
	height: 40vw;
	border-radius: 50%;
	background: black;
	margin-top: 10vw;
	object-fit: cover;
}

.popout [b="fetcher"] .image {
	margin-top: 5vw;
}

.popout .title {
	position: relative;
	font-size: 10vw;
	text-transform: uppercase;
	margin-top: 5vw;
}

.popout [b="fetcher"] .title {
	text-align: center;
	font-weight: 700;
}

.popout [b="title"] .title {
	text-align: left;
	height: 100%;
	overflow-y: scroll;
	margin-left: 10vw;
	width: 80vw;
	font-size: 10vw;
}

.popout [b="enroll"] .title,
.popout [b="change"] .title {
	text-align: left;
	margin-left: var(--left);
	width: calc(100vw - (var(--left) * 2));
	font-weight: 700;
}

.popout [b="enroll"] .top + .text .title {
	margin-top: 2vw;
}

.popout [b="enroll"] .input2s .title,
.popout [b="change"] .input2s .title {
	font-size: 5.25vw;
	margin-left: 0;
	width: auto;
}


.popout .description {
	position: relative;
	font-size: 5vw;
	margin-left: var(--left);
	width: calc(100vw - (var(--left) * 2));
	margin-top: 5vw;
	font-weight: 600;
}


.popout [b="fetcher"] .description {
	text-align: center;
	text-transform: uppercase;
	max-width: 80%;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	margin-top: 2vw;
}

.popout .stars {
	margin-top: 10vw;
	text-align: center;
}

.popout .stars svg {
	padding: 0 1.5vw;
	width: auto;
	height: 10vw;
}

.popout .count {
	text-align: center;
	text-transform: uppercase;
	font-size: 5vw;
	margin-top: 10vw;
	color: #BEB9B9;
	font-weight: 700;
}



/* OVERVIEW */
.sector[s="profile"] .menu {
	position: relative;
	display: inline-block;
	padding-left: var(--left);
	padding-right: var(--left);
	margin-top: 10vw;
/*	border-radius: 25vw;*/
	width: 100%;
	overflow-x: scroll;
	white-space: nowrap;
	box-sizing: border-box;
}

.sector[s="profile"] .menu::-webkit-scrollbar {
	display: none;
}

.sector[s="profile"] .menu > div {
	position: relative;
	display: inline-block;
	text-transform: uppercase;
	font-size: 4vw;
	font-weight: 600;
	margin-right: 0vw;
	opacity: 0.3;
	cursor: pointer;
	border: 0.3vw solid transparent;
	border-radius: 10vw;
	padding: 2.5vw 5vw;
}

.sector[s="profile"] [m="inprogress"] {
	display: none;
}

.sector[s="profile"].inProgress [m="inprogress"] {
	display: inline-block;
}

.sector[s="profile"] .menu > div.active {
	border-color: #EEEEEE;
	opacity: 1;
}

.sector[s="profile"] .menu > div:last-child {
	margin-right: 0;
}


/* FETCHERS */
.fetchers {
	display: none;
}

.isCreator .fetchers {
	display: block;
}

.sector[s="alerts"] .divider {
	width: 100%;
    border-top: 0.5vw solid #ECEDEE;
    margin-top: 3.5vw;
}

.sector[s="profile"] .close,
.sector[s="request"] .close,
.sector[s="fetchers"] .close,
.sector[s="new"] .close {
	position: absolute;
	margin: 7vw 7vw;
	width: 4vw;
	height: auto;
	cursor: pointer;
}

.sector[s="profile"] .close,
.sector[s="fetchers"] .close {
	width: 5.85vw;
	height: auto;
}

.sector[s="new"] .close {
	position: relative;
	margin-top: var(--left);
}

.sector[s="request"] .close path {
	opacity: 1;
}

.sector[s="profile"] .head.bio {
	margin-left: var(--left);
	margin-top: 8vw;
	font-size: 4.25vw;
	font-weight: 600;
	width: calc(100% - (var(--left) * 2));
	white-space: pre-wrap;
}


/* SETTINGS */
.sector[s="settings"] .menu {
	position: relative;
	width: 100vw;
	padding-left: var(--left);
	box-sizing: border-box;
	overflow-x: scroll;
	white-space: nowrap;
	margin-top: 2.5vw;
}

.sector[s="settings"] .menu::-webkit-scrollbar {
  display: none;
}

.sector[s="settings"] .menu > div {
	position: relative;
	display: inline-block;
	text-transform: uppercase;
	font-size: 4vw;
	font-weight: 600;
	margin-right: 2.5vw;
	opacity: 0.3;
	cursor: pointer;
	border: 0.3vw solid transparent;
	border-radius: 10vw;
	padding: 2.5vw 5vw;
}

.sector[s="settings"] .menu > div.active {
	border-color: #EEEEEE;
	opacity: 1;
}

.sector[s="settings"] .menu > div:last-child {
	margin-right: 7%;
}

.sector[s="settings"] .divider {
	position: relative;
	width: 100%;
	border-top: 0.5vw solid #ECEDEE;
	margin-top: 4vw;
}

.intake {
	display: none;
}

.sector[s="request"] .divider {
	position: relative;
	width: 100%;
	border-top: 5vw solid #ECEDEE;
	margin-top: 8vw;
}

.sector[s="request"] .comments .divider {
	margin-top: var(--left);
}



/* FETCHER */
.fetcher {
/*	margin-top: 18vw;*/
}

.fetcher .input2 {
	border-bottom: 0.25vw solid #eee;
	border-radius: 0;
	margin-top: 5vw;
	height: auto;
}

.fetcher .input2[i="due"] {
	display: none;
}

.fetcher.custom .input2[i="due"] {
	display: block;
}

.fetcher .input2 .title {
	position: relative;
	text-align: left;
	font-size: 4vw;
	margin: 0;
	margin-left: 0;
	margin-top: 3.5vw;
	font-weight: 700;
}

.fetcher .input2 input,
.fetcher .input2 select,
.fetcher .input2 textarea {
	position: relative;
	font-size: 4vw;
	padding-left: 0;
	padding-bottom: 2vw;
	margin-top: 4vw;
	font-weight: 600;
	text-align: left;
}

.fetcher .input2 textarea {
	width: 100%;
	margin-bottom: 2vw;
	resize: vertical;
}

.fetcher .input2 textarea {
	height: 25vw;
}

.sector[s="new"] .cost {
	position: relative;
	width: 80%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	margin-top: 8.5vw;
	opacity: 0.3;
	font-weight: 600;
	font-size: 3.5vw;
}

.sector[s="new"] .cost span[s="value"] {
	font-weight: 900;
}

.sector[s="new"] .cost svg[s="info"] {
	width: 4vw;
	height: auto;
	margin-left: 0.5vw;
	cursor: pointer;
	vertical-align: middle;
	margin-top: -0.3vw;
}

.sector[s="new"] .cost svg[s="info"] path {
	fill: #000;
}

.sector[s="new"] .button {
	position: relative;
	background: var(--blue);
	color: white;
	margin: 0;
	margin-top: 8.5vw;
	left: 50%;
	transform: translateX(-50%);
}

.sector[s="new"] .button .text {
	text-transform: uppercase;
}

.sector[s="new"] .button .text[t="charge"] {
	position: absolute;
	padding-left: 6.5%;
}

.sector[s="new"] .button .text[t="card"] {
	text-align: right;
	padding-right: 6.5%;
}

.sector[s="new"] .change {
	text-align: center;
    font-weight: 600;
    font-size: 3.5vw;
    opacity: 0.3;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 6vw;
    transition: all 0.2s;
}

.sector[s="new"] .change:hover {
	opacity: 0.45;
}

.results {
	position: relative;
	width: 100%;
	margin-top: -4vw;
	font-weight: 500;
	margin-bottom: 3.5vw;
	padding-right: 5vw;
	box-sizing: border-box;
}

.result {
	position: relative;
	margin-bottom: 1.25vw;
	font-size: 4vw;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.8;
	color: hsl(0,0%,45%);
	transition: all 0.2s;
	cursor: pointer;
}

.result:hover {
	opacity: 1;
}

.sector[s="new"] .header {
/*	position: fixed;*/
	width: 100%;
/*    border-bottom: 0.5vw solid #ECEDEE;*/
/*	box-shadow: 0 0 2vw hsla(0,0%,0%,0.1);*/
    padding-bottom: 3.5vw;
/*    background: white;*/
    z-index: 4;
}


.baseboard {
	position: fixed;
	bottom: 0;
	background: -webkit-linear-gradient(to top, hsla(0,0%,100%,1), hsla(0,0%,100%,0));
	background: linear-gradient(to top, hsla(0,0%,100%,1), hsla(0,0%,100%,0));
	z-index: 2;
	width: 100%;
	padding-top: 7vh;
	pointer-events: none;
	text-align: center;
}

.baseboard .board {
	position: relative;
	text-align: center;
	width: calc(100% - (var(--left) * 2));
	margin-left: var(--left);
	display: none;
}

[r="fetcher"] .baseboard .board[b="fetcher"],
[r="fetcher-selected"] .baseboard .board[b="fetcher-selected"],
[r="requested"] .baseboard .board[b="requested"],
[r="creator"] .baseboard .board[b="creator"],
[r="creator-selected"] .baseboard .board[b="creator-selected"],
[r="creator-unselected"] .baseboard .board[b="creator-unselected"] {
	display: block;
}

.baseboard .button {
	position: relative;
	display: inline-block;
	pointer-events: all;
	text-transform: uppercase;
	border: solid 0.2vw #E6E6E6;
	width: 20vw;
	margin-left: 0;
	pointer-events: all;
	height: 12.5vw;
	padding: 0;
	vertical-align: middle;
}

.board[count="3"] .button {
	margin-right: 5.25vw;
}

.board[count="3"] .button:last-child {
	margin-right: 0;
}


.enroll .baseboard .button {
	background: var(--blue);
	color: white;
	margin-bottom: 16vw;
	width: 80%;
	font-size: 3.765vw;
}

.popout .baseboard .button {
	width: 80%;
}

.popout .baseboard .button {

}

.baseboard .button:first-child {
	margin-left: 0;
}

.baseboard .button[b="requested"] {
	background: #ECECEC;
	color: #B5B5B5;
	width: 100%;
}

.baseboard .button[b="done"],
.baseboard .button[b="accept"],
.baseboard .button[b="cancel"] {
	background: var(--blue);
	color: white;
}

.baseboard .button[b="accept"],
.baseboard .button[b="cancel"] {
	width: 100%;
}

.baseboard .button[b="cancel"] {
	background: #BABABA;
}

.baseboard .button[b="done"] {
	width: 40%;
}

.baseboard .board[b="creator-unselected"] .button[b="cancel"] {
	width: 70%;
}

.baseboard .button .text,
.baseboard .button .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.enroll .baseboard .button .text {

}

.baseboard .button svg {
	width: 8vw;
	height: auto;
}

.baseboard .button svg path {
	fill: #BFBEBE;
}

.sector[s="request"] .offer {
	position: relative;
	margin-left: var(--left);
	font-size: 8.275vw;
	font-weight: 800;
	text-transform: none;
	margin-top: 2.5vw;
}

.radio {
	margin: 0 7vw;
	margin-top: 6vw;
	width: calc(100% - (7vw * 2));
	display: flex; /* ADDED */
	align-items: center; /* ADDED to vertically align checkbox and text */
	box-sizing: border-box;
	cursor: pointer;
}

.radio .checkbox {
	flex-shrink: 0; /* prevents checkbox from shrinking */
	flex-grow: 0;   /* prevents checkbox from growing */
	position: relative;
	display: inline-block;
	border: var(--border);
	box-sizing: border-box;
	width: 8vw;
	height: 8vw;
	border-radius: 3vw;
}

.radio .checkbox > div {
	position: absolute;
	background: var(--blue);
	width: 50%;
    height: 50%;
	border-radius: 1.5vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: none;
}

.radio.active .checkbox > div {
	display: block;
}

.radio .text {
	margin-left: 4vw;
	flex: 1;
	font-weight: 700;
	font-size: 3vw;
}

.popout .top {
	position: relative;
	margin-left: var(--left);
	margin-top: 3.5vw;
	text-transform: uppercase;
	font-size: 5vw;
	font-weight: 700;
	cursor: pointer;
}

.popout .top svg {
	margin-right: 2vw;
	vertical-align: middle;
	height: 5vw;
	width: auto;
	margin-top: -1vw;
}

.pop[c="picture"] .avatar {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	margin-top: 15vw;
	width: 60vw;
	height: 60vw;
}

.license {
	position: relative;
	width: 80vw;
	height: 50vw;
	border-radius: 3.5vw;
	background: #D9D9D9;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	margin-top: 7vw;
	overflow: hidden;
	display: none;
}

.license[l="front"] {
	display: block;
}

.license .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	pointer-events: none;
	width: 12vw;
	height: auto;
}

.license .icon[i="outline"] {
	display: none;
}


.license img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.license.empty img {
	display: none;
}

.pop .submenu {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	margin-top: 12vw;
	font-size: 0;
}

.pop .submenu > div {
	position: relative;
    display: inline-block;
    padding: 2vw 4vw;
    border-radius: 8vw;
    margin-right: 2vw;
    font-size: 3.75vw;
    font-weight: 600;
    color: #AA9F9F;
    cursor: pointer;
}

.pop .submenu > div:last-child {
	margin-right: 0;
}

.pop .submenu > div.active {
	border: 0.1vw solid #AA9F9F;
	color: black;
}

.pop[c="address"] .uno {
	position: relative;
	display: inline-block;
	width: calc(100vw - (var(--left) * 2));
	margin-left: var(--left);
}

.pop[c="address"] .row .uno {
	margin-left: 0;
	width: auto;
}

.pop[c="address"] .uno .input2[i="state"] {
	width: 50vw;
	margin-left: 0;
	margin-right: 5vw;
}

.pop[c="address"] .row .uno:last-child {
	margin-left: 6vw;
}

.pop[c="address"] .uno .input2[i="zip"] {
	width: 25vw;
}

.none {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 65vw;
    height: 73.5vw;
	margin-top: 28.5vw;
/*	opacity: 0.8;*/
/*	border: 0.1vw solid #000;*/
	border-radius: 50%;
	pointer-events: none;
	display: none;
}

.none img {
	position: relative;
	border-radius: inherit;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.preload {
	margin-top: 7vw;
	display: none;
}

.preload > div {
	position: relative;
	width: calc(100% - (var(--left) * 2));
	height: 38.5vw;
	margin-left: var(--left);
	margin-bottom: 7.5vw;
	background: #EEEEEE;
	border-radius: 10vw;
	overflow: hidden;
}

.preload > div::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #EEEEEE 0%, hsla(0,0%,100%,0.8) 50%, #EEEEEE 100%);
	animation: shimmer 1.5s infinite;
}

.preload > div:nth-child(1)::after {
	animation-delay: 0s;
}
.preload > div:nth-child(2)::after {
	animation-delay: 0.2s;
}
.preload > div:nth-child(3)::after {
	animation-delay: 0.4s;
}
.preload > div:nth-child(4)::after {
	animation-delay: 0.6s;
}
.preload > div:nth-child(5)::after {
	animation-delay: 0.8s;
}

@keyframes shimmer {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}


/* SETTINGS */
.sector[s="settings"] .setting {
	position: relative;
	margin-top: 8vw;
}

.sector[s="settings"] .setting[s="bio"] {
	position: relative;
	margin-top: 4vw;
}

.sector[s="settings"] .setting[s="avatar"] {
	margin-top: 0;
}

.sector[s="settings"] .group > .title {
	font-size: 8vw;
}

.sector[s="settings"] .action {
	margin-left: var(--left);
	font-weight: 700;
	font-size: 5vw;
	text-transform: uppercase;
	margin-bottom: 4vw;
	cursor: pointer;
}

.sector[s="settings"] .action:last-child {
	margin-bottom: 0;
}

.sector[s="settings"] .version {
	margin-left: var(--left);
	font-weight: 700;
	font-size: 3vw;
	text-transform: uppercase;
	opacity: 0.3;
	margin-bottom: 8.5vw;
}

.sector[s="settings"] .picture-container {
	position: relative;
	margin-left: var(--left);
	width: calc(100% - (var(--left) * 2));
	margin-top: 5vw;
}

.sector[s="settings"] .picture {
	position: relative;
	display: inline-block;
	width: 53.5vw;
    height: 53.5vw;
	border-radius: 50%;
	background: #F7F7F7;
	vertical-align: middle;
	border: #eee solid 0.25vw;
	z-index: 0;
	cursor: pointer;
}

.sector[s="settings"] .picture img {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	display: none;
}

.sector[s="settings"] .picture.hasPicture img {
	display: block;
}

.sector[s="settings"] .change {
	position: relative;
	display: inline-block;
	margin-left: 3.5vw;
	vertical-align: middle;
	border: 0.25vw solid #eee;
	padding: 1.5vw 2vw;
	font-weight: 600;
	border-radius: 10vw;
	text-transform: uppercase;
	font-size: 2.5vw;
	cursor: pointer;
	white-space: nowrap;
}

.sector[s="settings"] .picture .change {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	margin: 0;
	opacity: 1;
	border: 0vw solid #eee;
	color: black;
}

.sector[s="settings"] .picture.hasPicture .change {
	color: white;
}

.sector[s="settings"] .setting > .title {
	font-size: 3.5vw;
	margin-top: 0;
	max-width: calc(100% - 32.5vw);
}

.sector[s="settings"] .group[g="personal"] .setting > .title {
	font-size: 4vw;
	font-weight: 700;
	text-align: left;
}

.sector[s="settings"] .setting > .description {
	font-size: 3vw;
	margin-top: 0;
	max-width: calc(100% - 32.5vw);
	margin-top: 2vw;
}

.setting .value {
	position: relative;
	font-size: 6vw;
	font-weight: 700;
	margin-left: var(--left);
	width: calc(100vw - (var(--left) * 2));
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-top: 2vw;
	text-transform: uppercase;
}

.setting[s="bio"] .value {
	white-space: normal;
}

.setting[s="email"] .change,
.setting[s="password"] .change,
.setting[s="name"] .change,
.setting[s="bio"] .change {
	margin-left: var(--left);
	margin-top: 3vw;
}

.sector[s="settings"] .group {
	margin-top: 7.5vw;
}

.sector[s="settings"] .group[g="personal"] {
	text-align: center;
}

.sector[s="settings"] .group[g="activity"],
.sector[s="settings"] .group[g="login"] {
	margin-top: 20vw;
}

.sector[s="settings"] .bundle {
	display: none;
}

.sector[s="settings"] .bundle[b="account"] {
	display: block;
}

.setting .input2-group {
	margin-left: var(--left);
	width: calc(100vw - (var(--left) * 2));
	margin-top: 4vw;
	font-size: 0;
}

.setting .input2-group .input2-box {
	position: relative;
	width: 100%;
	height: 12.5vw;
	border-radius: 5vw;
	background: transparent;
	border: #eee solid 0.25vw;
	box-sizing: border-box;
}

.setting .input2-group[count="2"] .input21 {
	position: relative;
	display: inline-block;
	width: calc(50% - 2.5vw);
	margin-left: 5vw;
}

.setting .input2-group .input2:first-child {
	margin-left: 0;
}

.setting input,
.setting textarea  {
/*	pointer-events: none;*/
	font-weight: 600 !important;
	font-size: 4.15vw !important;
	text-transform: uppercase;
	color: black !important;
}

.setting .input2[i="bio"] {
	height: 45vw;
}

.setting .input2[i="bio"] textarea {
	height: 100%;
	padding: 5vw;
	margin-top: 0;
}

.setting .slider {
	position: absolute;
	right: 0;
	width: 12vw;
	height: 6vw;
	border: solid hsla(0,0%,0%,0.3) 0.1vw;
	border-radius: 15vw;
	top: 50%;
	transform: translateY(-50%);
	margin-right: var(--left);
	transition: all 0.2s;
}

.setting .slider.on {
	border: solid hsla(0,0%,0%,0.3) 0.1vw;
}

.setting .slider .circle {
	position: absolute;
	width: 4vw;
	height: 4vw;
	border-radius: 50%;
	background: hsla(0,0%,0%,0.2);
	margin: 1vw;
	transition: all 0.2s;
}

.setting .slider.on .circle {
	margin-left: calc(12vw - 1vw - 4vw);
	background: var(--blue);
}

.sector[s="settings"] .new {
	position: absolute;
	right: 0;
	margin-right: var(--left);
	vertical-align: middle;
	border: 0.1vw solid #eee;
	padding: 1.5vw 2vw;
	font-weight: 600;
	border-radius: 10vw;
	text-transform: uppercase;
	font-size: 2.5vw;
	cursor: pointer;
	margin-top: 1.5vw;
}

.sector[s="settings"] .add {
	position: relative;
	font-size: 3.5vw;
	line-height: 5vw;
	font-weight: 600;
	opacity: 0.3;
	text-transform: uppercase;
	width: 50vw;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	margin-top: 15vw;
	margin-bottom: 25vw;
}

.hasCards .add {
	display: none;
}

.bundle[b="billing"] .list {
	position: relative;
	width: 100%;
	margin-top: 5vw;
}

.bundle[b="billing"] .blob {
	margin-left: var(--left);
	width: calc(100% - (var(--left) * 2));
	font-size: 0;
	white-space: nowrap;
	margin-bottom: 3.5vw;
}

.bundle[b="billing"] .blob > div {
	position: relative;
	display: inline-block;
	font-size: 3.5vw;
	font-weight: 600;
	vertical-align: middle;
	margin-top: 0;
}

.bundle[b="billing"] .blob > div:nth-child(1) {
	width: 15%;
/*	font-size: 2.35vw;*/
/*	margin-top: 0.45vw;*/
	font-size: 3vw;
    font-weight: 500;
}

.bundle[b="billing"] .blob:hover > div:nth-child(1) {
	font-style: italic;
}

.bundle[b="billing"] .blob > div:nth-child(2) {
	width: 60%;
	margin-left: 2%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.bundle[b="billing"] .blob > div:nth-child(3) {
	width: 20%;
	margin-left: 2%;
	text-align: right;
	font-weight: 700;
	font-size: 3vw;
    font-weight: 500;
}

.bundle[b="billing"] .banner {
	position: relative;
	display: inline-block;
	width: 86vw;
	height: 45vw;
	border-radius: 7.5vw;
	border: var(--border);
	margin-left: var(--left);
	margin-top: 0vw;
}

.banner .card {
	position: absolute;
	right: 0;
	top: 0;
	border: var(--border);
	font-size: 2.5vw;
	text-transform: uppercase;
	color: black;
	font-weight: 700;
	padding: 1vw 2vw;
	border-radius: 5vw;
	margin: 5vw;
	cursor: pointer;
}

.banner .card svg {
	width: 2vw;
	height: auto;
	margin-left: 1vw;
}

.banner .title {
	margin: 5vw;
	font-size: 4vw;
}

.banner .balance {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 5vw;
}

.banner .balance .title {
	margin: 0;
	font-size: 10vw;
	font-weight: 700;
}

.banner .balance .description {
	margin: 0;
	font-weight: 600;
	font-size: 3vw;
	display: none;
}

.banner .balance .description b {
	font-weight: 800;
}

.banner .balance .description span[s="date"],
.banner .balance .description span[s="amount"],
.banner .balance .description span[s="lowercase"] {
	font-weight: 600;
}

.banner .balance .description span[s="lowercase"] {
	text-transform: lowercase;
}

.banner .balance .disclaimer {
	position: relative;
	font-size: 2vw;
	margin: 0;
	margin-top: 1vw;
	display: none;
}

.banner .balance .disclaimer svg {
	position: relative;
    display: inline-block;
    margin-right: 1vw;
    width: 2.5vw;
    height: auto;
    vertical-align: bottom;
}

.banner .balance .disclaimer span {
	position: relative;
	display: inline-block;
	display: none;
}

.banner .balance .disclaimer span[s="first"] {
	display: inline-block;
}


/* ALERTS */
.sector[s="alerts"] .list .blob {
	position: relative;
	margin-left: var(--left);
	width: calc(100% - (var(--left) * 2));
	margin-bottom: 5vw;
	font-size: 0;
}

.sector[s="alerts"] .list .blob:last-child1 {
	margin-bottom: 0;
}

.sector[s="alerts"] .list .blob .image {
	position: relative;
	display: inline-block;
	width: 9vw;
    height: 9vw;
	border-radius: 50%;
	background: var(--blue);
	overflow: hidden;
	vertical-align: top;
}

.sector[s="alerts"] .list .blob .image > * {
	pointer-events: none;
}

.sector[s="alerts"] .list .blob .image img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sector[s="alerts"] .list .blob .image svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 50%;
	height: auto;
}

.sector[s="alerts"] .list .blob .title {
	position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    width: calc(100% - 30vw);
    font-size: 3.8vw;
    font-weight: 600;
    margin-top: 0.2vw;
    margin-left: 2.825vw;
}

.sector[s="alerts"] .list .blob .time {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 3vw;
    font-weight: 500;
    text-transform: uppercase;
    width: 12.5vw;
    text-align: right;
    text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.notice {
	position: fixed;
	top: 0;
	font-size: 4.25vw;
	background: hsla(0,0%,100%,0.8);
	padding: 2.5vw 6vw;
	z-index: 999;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 15vw;
	backdrop-filter: blur(3vw);
	box-shadow: 0px 2vw 5vw hsla(0,0%,0%,0.25);
	margin-top: -150vw;
	transition: all 0.2s;
	white-space: nowrap;
	max-width: 70vw;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	cursor: pointer;
}

.showNotice .notice {
	margin-top: calc(5vw + env(safe-area-inset-top));
	opacity: 1;
}

.notice .text {
	text-transform: uppercase;
	opacity: 0.4;
	font-weight: 700;
}

.popout [b="change"] .input2 {
	border-radius: 0;
	height: auto;
}

.popout [b="change"]1 input,
.popout [b="change"]1 textarea {
	position: relative;
	width: auto;
	height: auto;
	background: hsla(0,0%,93%,1);
	padding: 5vw;
	border-radius: 5vw;
	width: 100%;
	margin-top: 2vw;
}

.popout [b="change"]1 input,
.popout [b="change"]1 input::placeholder,
.popout [b="change"]1 textarea,
.popout [b="change"]1 textarea::placeholder {
	color: black;
	font-size: 5vw;
}

.pop[b="enroll"][c="complete"] .illustration {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	margin-top: 65vw;
}

.pop[b="enroll"][c="complete"] .title {
	font-size: 6vw;
	text-align: center;
	margin: 0;
	margin-top: 10vw;
	width: 85%;
	left: 50%;
	transform: translateX(-50%);
}

.pop[b="enroll"][c="complete"] .description {
	font-size: 4vw;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
}

.blob .buttons {
	margin-left: calc(8vw + 3.5vw);
	font-size: 0;
	margin-top: 0.2vw;
}

.blob .buttons .button {
	position: relative;
	display: inline-block;
	width: 28.5vw;
	transform: none;
	left: auto;
	box-sizing: border-box;
	margin-left: 2.5vw;
	margin-bottom: 0;
	padding: 2vw 0;
	height: auto;
	font-size: 2.85vw;
	font-weight: 800;
}

.blob .buttons .button:first-child {
	margin-left: 0;
}

.blob .buttons .button:last-child {
	border: solid #eee 0.25vw;
	background: transparent;
	color: #BEB9B9;
}

.alert {
	position: fixed;
	width: 100%;
	height: 100%;
	background: hsla(0,0%,0%,0.7);
	pointer-events: none;
	z-index: 999;
	top: 0;
	opacity: 0;
	backdrop-filter: blur(2vw);
}

.showAlert .alert {
	opacity: 1;
	pointer-events: all;
}

.alert .box {
	position: absolute;
	width: 80vw;
	background: white;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 12vw;
	padding: 5vw;
	box-sizing: border-box;
	text-align: center;
	display: none;
}

.alert .text {
	position: relative;
	font-size: 4.75vw;
	font-weight: 700;
	opacity: 0.4;
	padding-top: 3.5vw;
	width: 95%;
	left: 50%;
	transform: translateX(-50%);
}

.alert .text .title {
	font-weight: 900;
}

.alert .text .description {
	position: relative;
	margin-top: 2vw;
	font-size: 3.2vw;
}

.alert .text .detail {
	font-size: 2.75vw;
	margin-top: 4vw;
	opacity: 0.4;
	font-style: italic;
}

.alert .options {
	margin-top: 6vw;
	text-align: center;
}

.alert .options > div {
	position: relative;
	display: inline-block;
	width: 20vw;
	padding: 3vw 0;
	border: var(--border);
	box-sizing: border-box;
	border-radius: 10vw;
	margin-right: 2.5vw;
	text-transform: uppercase;
	cursor: pointer;
	font-size: 3vw;
	font-weight: 900;
	color: #C4B6B6;
}

.alert .options > div:last-child {
	background: var(--blue);
	border: none;
	margin-right: 0;
	width: 40VW;
	color: white;
}

.alert .box .close {
	position: relative;
	display: inline-block;
	background: #C3C3C3;
	padding: 2.5vw 7vw;
	border-radius: 5vw;
	margin-top: 5vw;
	font-size: 3.5vw;
	font-weight: 900;
	color: white;
	margin-bottom: 2.5vw;
}

.commenter {
	position: relative;
	margin-left: var(--left);
	border: solid #ededed 0.5vw;
	width: calc(100% - (var(--left) * 2));
	border-radius: 5vw;
	margin-top: 5vw;
}

.commenter input {
	position: relative;
	border: none;
	outline: none;
	padding: 2.5vw 4vw;
	background: transparent;
	font-size: 4vw;
	font-weight: 500;
	width: calc(100% - 15vw);
}

.commenter input::placeholder {
	font-weight: 500;
	color: hsl(0,0%,70%);
}

.commenter .submit {
	position: absolute;
	right: 0;
	background: var(--blue);
	width: 7.5vw;
	height: 7.5vw;
	border-radius: 50%;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 1.5vw;
}

.commenter .submit svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 45%;
	height: auto;
}

.fetchers .blob {
	position: relative;
	margin-left: var(--left);
	width: calc(100vw - (var(--left) * 2));
	margin-bottom: 5vw;
}

.fetchers .blob:last-child {
	margin-bottom: 0;
}

.fetchers .blob .image {
	position: relative;
	display: inline-block;
	width: 10vw;
	height: 10vw;
	border-radius: 50%;
	object-fit: cover;
}

.list[l="fetchers"] .blob .text {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: 2.5vw;
}

.list[l="fetchers"] .blob .title {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 4.5vw;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0;
}

.fetchers .blob .description {
	margin-left: 0;
	width: 100%;
	font-size: 2vw;
	margin-top: 1vw;
}

.fetchers .blob .stars {
	position: relative;
	display: inline-block;
}

.fetchers .blob .stars > svg {
	height: 4vw;
	width: auto;
	margin-right: 0.5vw;
}

.fetchers .blob .stars > svg path {
	fill: black;
}

.fetcher .blob .button {
	background: var(--blue);
}

.fetchers .blob .actions {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.fetchers .blob .action {
	position: relative;
	display: inline-block;
	width: 8.5vw;
	height: 8.5vw;
	border-radius: 50%;
	background: transparent;
	border: 0.2vw solid #C8C8C8;
	margin-right: 2.5vw;
	box-sizing: border-box;
}

.fetchers .blob .action:last-child {
	margin-right: 0;
	background: var(--blue);
	border: none;
}

.fetchers .blob .action * {
	pointer-events: none;
}

.fetchers .blob .action svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 35%;
	width: auto;
}

.fetchers .blob .action svg path {
	fill: #DAD1D1;
}

.fetchers .blob .action:last-child svg path {
	fill: white;
}

.sector[s="request"] .current {
	position: fixed;
	bottom: 0;
	z-index: 9;
	width: 100%;
	background: white;
	border-top: 0.25vw solid #EEEEEE;
	display: none;
}

.sector[s="request"][t="creator"] .current {
	display: block;
}

.sector[s="request"] .current .box {
	position: relative;
	margin-top: 3.5vw;
	padding-bottom: 3.5vw;
}

.sector[s="request"] .current .image {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 12.5vw;
	height: 12.5vw;
	border-radius: 50%;
	margin-left: var(--left);
	object-fit: cover;
}

.sector[s="request"] .current .text {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: calc(100% - 40vw);
	margin-left: 2vw;
}

.sector[s="request"] .current .text .top {
	font-size: 3vw;
	text-transform: uppercase;
	margin: 0;
}

.sector[s="request"] .current .text .title {
	margin-top: 2vw;
	font-size: 5vw;
	width: 100%;
	font-weight: 700;
	margin-left: 0;
	margin-top: 0;
}

.current .choices {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 1.5vw;
	margin-right: 5vw;
}

.current .choices .choice {
	position: relative;
	display: inline-block;
	margin-left: 3.5vw;
	border-radius: 50%;
	border: 0.5vw #E6E6E6 solid;
	width: 8.5vw;
	height: 8.5vw;
}

.current .choices .choice svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 4.5vw;
	height: auto;
}

.current .choices .choice svg path {
	fill: hsl(0,0%,0.3);
}

.current .choices .choice .unread {
	position: absolute;
	right: 0;
	width: 2.5vw;
	height: 2.5vw;
	margin: -0.25vw;
	border-radius: 50%;
	background: #F75555;
	display: none;
}

.current .choices .choice.isUnread .unread {
	display: block;
}

.sector[s="request"] .current .eject {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 9.25vw;
	height: 9.25vw;
	border-radius: 50%;
	margin-right: var(--left);
	background: #E93B3B;
	right: 0;
}

.sector[s="request"][t="creator"] .eject {
	display: block;
}

.sector[s="request"] .current .eject svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 40%;
	width: auto;
}

.more {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
	display: none;
}

.showMore .more {
	display: block;
}

.more .shield {
	position: absolute;
	width: 100%;
	height: 100%;
	background: hsla(0,0%,0%,0.25);
	backdrop-filter: blur(1.5vw);
}

.more .box {
	position: absolute;
	width: calc(100% - 10vw);
	margin-left: 5vw;
	height: auto;
	bottom: 0;
	background: white;
	border-radius: 10vw;
	margin-bottom: calc(5vw + env(safe-area-inset-bottom));
}

.more .options {
	position: relative;
	width: 100%;
	overflow-x: scroll;
	white-space: nowrap;
	padding: 3.5vw 7vw;
	box-sizing: border-box;
	margin-top: 2vw;
}

.more .options::-webkit-scrollbar {
	display: none;
}

.more .option {
	position: relative;
	display: inline-block;
	text-align: center;
	margin-right: 5vw;
	cursor: pointer;
}

.more .option .cube {
	position: relative;
	width: 20vw;
	height: 20vw;
	border-radius: 50%;
	border: #EDEDED solid 0.5vw;
	transition: all 0.2s;
}

.more .option:active .cube {
	border-color: #A6A6A6;
}

.more .option .cube svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.more .option .text {
	font-size: 3.5vw;
	text-transform: uppercase;
	opacity: 0.3;
	margin-top: 2vw;
	font-weight: 800;
}


/* ENROLLMENT */
.enrollment {
	position: fixed;
	width: 100%;
	height: 100%;
	background: white;
	color: black;
	z-index: 99;
	display: none;
}

.showEnroll .enrollment {
	display: block;
}

.enrollment .enroll {
	display: none;
}

.enroll {
	display: none;
}

.enrollment[e="guide"] .enroll[e="guide"] {
	display: block;
}

.enroll .title {
	position: relative;
	font-size: 10vw;
	font-weight: 800;
	text-transform: uppercase;
	margin-top: 7.5vh;
	text-align: left;
	margin-left: var(--left);
	width: 80vw;
}

.enroll .description {
	position: relative;
	font-size: 5vw;
	margin-left: var(--left);
	width: calc(100vw - (var(--left) * 2));
	margin-top: 5vw;
	font-weight: 600;
}

.enroll .subdescription {
	position: relative;
    font-size: 3vw;
    margin-left: var(--left);
    width: calc(100vw - (var(--left) * 2));
    margin-top: 6vw;
    font-weight: 600;
    opacity: 0.3;
    font-style: italic;
}

.enroll .bubbles {
	margin-top: 15vw;
}

.enroll .bubble {
	margin-left: var(--left);
	width: calc(100% - (var(--left) * 2));
	background: #EFEFEF;
	border-radius: 6.5vw;
	padding: 3.5vw;
	box-sizing: border-box;
	margin-bottom: 10vw;
}

.enroll .bubble .circle {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	background: #D9D9D9;
	width: 15vw;
	height: 15vw;
	border-radius: 50%;
}

.enroll .bubble .circle svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 5vw;
	height: auto;
}

.enroll .bubble .circle svg[c="done"] {
	display: none;
}

.enroll .bubble .text {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 5vw;
	font-weight: 600;
	margin-left: 3.5vw;
}

.enroll .skip {
	position: absolute;
    bottom: 0;
    margin-bottom: calc(6vw + env(safe-area-inset-bottom));
    text-align: center;
    text-transform: uppercase;
    opacity: 0.3;
    font-size: 3.5vw;
    font-weight: 700;
    cursor: pointer;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}



/* CHAT */
.sector[s="chat"]::-webkit-scrollbar {
	display: none;
}

.sector[s="chat"] .header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 15vw;
	border-bottom: solid #D9D9D9 0.1vw;
	box-sizing: border-box;
	z-index: 5;
	background: white;
}

.sector[s="chat"] .header .image {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: 5vw;
	margin-top: 2.5vw;
	border-radius: 50%;
	background: #ededed;
	width: 10vw;
	height: 10vw;
	object-fit: cover;
}

.sector[s="chat"] .header .title {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 5vw;
	color: black;
	width: calc(100% - 30vw);
	margin: 0;
	margin-top: 3vw;
	margin-left: 3.5vw;
}

.sector[s="chat"] .header .down {
	position: absolute;
	right: 0;
	margin-right: 6vw;
	margin-top: 6vw;
	width: 5vw;
	height: auto;
	cursor: pointer;
}

.sector[s="chat"] .footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	border-top: solid #D9D9D9 0.1vw;
	box-sizing: border-box;
	background: white;
	height: calc(15vw + env(safe-area-inset-bottom));
}

.sector[s="chat"] .footer .attach {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-left: 4vw;
	margin-top: 2.5vw;
	background: #EAEAEA;
	width: 10vw;
	height: 10vw;
	border-radius: 50%;
}

.sector[s="chat"] .footer .attach svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.sector[s="chat"] .footer .sender {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-left: 2.5vw;
	margin-top: 2.25vw;
	background: #EAEAEA;
	width: calc(100% - 20.5vw);
	height: 10vw;
	border-radius: 10vw;
}

.sector[s="chat"] .footer .sender input {
	border: none;
	outline: none;
	background: transparent;
	font-size: 3.5vw;
	font-weight: 600;
	width: 100%;
	height: 100%;
	padding-left: 3.5vw;
	box-sizing: border-box;
}

.sector[s="chat"] .footer .sender .submit {
	position: absolute;
	right: 0;
	margin-right: 2vw;
	top: 50%;
	transform: translateY(-50%);
	background: var(--blue);
	width: 6.5vw;
	height: 6.5vw;
	border-radius: 50%;
}

.sector[s="chat"] .footer .sender .submit svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 3vw;
	height: auto;
}

.conversation {
	position: relative;
	margin-top: 15vw;
	height: calc(100% - 15vw);
	overflow-y: scroll;
	padding-bottom: 2vw;
}

.conversation::-webkit-scrollbar {
	display: none;
}

.conversation .message {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 2vw;
	width: 100%;
}

.conversation .message.self {
	display: block;
	text-align: right;
}

.conversation .avi {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 10vw;
	height: 10vw;
	border-radius: 50%;
	object-fit: cover;
}

.conversation .message.self .avi {
	display: none;
}

.conversation .text {
	position: relative;
	display: inline-block;
	margin-left: 3vw;
	color: black;
	font-size: 4vw;
	font-weight: 500;
	padding: 2vw 2.5vw;
	border-radius: 5vw;
	background: #EAEAEA;
}

.conversation .message.self .text {
	background: var(--blue);
	color: white;
}

.conversation .message .time {
	position: relative;
	font-size: 2.6vw;
	opacity: 0.2;
	font-weight: 700;
	margin-top: 1vw;
	margin-right: 2.5vw;
}

.conversation .group {
	position: relative;
	width: 90vw;
	margin-left: 5vw;
	padding-top: 3.5vw;
}

.conversation .group .date {
	position: relative;
	font-size: 3vw;
	font-weight: 700;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 4vw;
	opacity: 0.2;
}

.conversation .spacer {
	position: relative;
	display: block;
	width: 100%;
	height: 1vw;
}

.conversation .image {
	position: relative;
	max-width: 65vw;
	height: auto;
	object-fit: cover;
	border-radius: 5vw;
	margin-left: 3vw;
}

.sector[s="fetchers"] .list {
	margin-top: 10vw;
}

.sector[s="fetchers"] .blob {
	position: relative;
	margin-left: var(--left);
	width: calc(100% - (var(--left) * 2));
	margin-bottom: 7.5vw;
}

.sector[s="fetchers"] .blob .image {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 12.85vw;
	height: 12.85vw;
	border-radius: 50%;
}

.sector[s="fetchers"] .blob .text {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: 3.5vw;
}

.sector[s="fetchers"] .blob .text .title {
	margin: 0;
	padding: 0;
	font-size: 4vw;
}

.sector[s="fetchers"] .blob .text .description {
	margin: 0;
	margin-top: 1.5vw;
	width: auto;
	font-size: 2vw;
}

.sector[s="fetchers"] .blob .stars {
	position: relative;
	display: inline-block;
}

.sector[s="fetchers"] .blob svg {
	position: relative;
	display: inline-block;
	width: 3.15vw;
	height: auto;
	margin-right: 1vw;
}

.sector[s="fetchers"] .blob path {
	fill: #000;
}

.sector[s="fetchers"] .blob .rating {
	position: relative;
	display: inline-block;
	vertical-align: top;
	font-size: 2.65vw;
}

.sector[s="fetchers"] .blob .accept {
	position: absolute;
	right: 0;
	background: var(--blue);
	font-size: 2.75vw;
	font-weight: 600;
	color: white;
	height: 7.5vw;
	box-sizing: border-box;
	width: 18.5vw;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	border-radius: 5vw;
}

.sector[s="fetchers"] .blob .accept div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	pointer-events: none;
}


/* INPUTS */
.input-container {
	position: relative;
	width: calc(100vw - (var(--left) * 2));
	margin-left: var(--left);
}

.popout .input-container {
	margin-top: 10vw;
/*	padding-bottom: 28.5vw;*/
}

.sector[s="email"] .input-container,
.sector[s="password"] .input-container {
	margin-left: 10vw;
	width: calc(100vw - (10vw * 2));
	margin-top: 16vw;
}

.input-group,
.inputs,
.input {
	position: relative;
}

.birth-group {
	margin-top: 8vw;
}

.inputs {
	font-size: 0;
}

.card-details-inputs {
	margin-top: 8vw;
}

.input {
	text-align: left;
}

.popout .input {
	margin-top: 8vw;
}

.popout .input:first-child {
	margin-top: 0;
}

.inputs[count="2"] .input {
	position: relative;
	display: inline-block;
	width: calc(50% - 4vw);
	margin: 0;
	margin-left: 8vw;
}

.setting[s="name"] .inputs[count="2"] .input {
	width: calc(50% - 2vw);
	margin-left: 4vw;
}

.pop[c="address"] .inputs[count="2"] {
	margin-top: 8vw;
}

.inputs[count="2"] .input:first-child {
	margin-left: 0;
}

.setting[s="name"] .inputs[count="2"] .input:first-child {
	margin-left: 0;
}

.inputs[count="3"] .input {
	display: inline-block;
	--w: 2vw;
	width: calc((100%/3) - (var(--w) * 2));
	margin: 0 0 0 calc(var(--w) * 3);
}

.inputs[count="3"][dash="yes"] .input {
	display: inline-block;
	--w: 2vw;
	width: calc((100%/3) - (var(--w) * 2) - (2vw * 2));
	margin: 0 0 0 calc(var(--w) * 2);
	vertical-align: middle;
}

.inputs[count="3"] .input:first-child {
	margin-left: 0;
}

.inputs .dash {
	position: relative;
	display: inline-block;
	width: 2vw;
	height: 0.6vw;
	border-radius: 1vw;
	background: black;
	vertical-align: middle;
	margin-left: 5vw;
	margin-right: 1vw;
	margin-top: 2vw;
	opacity: 0.3;
}

.inputs[count="4"] .input {
	display: inline-block;
	--w: 1.2vw;
	width: calc(25% - (var(--w) * 3));
	margin: 0 0 0 calc(var(--w) * 4);
}

.inputs[count="4"] .input:first-child {
	margin-left: 0;
}

.input-group > .title,
.input .label {
	font-size: 3.5vw;
	font-weight: 700;
	text-transform: uppercase;
	margin-left: 0 !important;
}

.input .label {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.input-box {
	position: relative;
	width: 100%;
	height: 12.5vw;
	margin-top: 2vw;
	border: var(--border);
	border-radius: 5vw;
	box-sizing: border-box;
	overflow: auto;
	padding: 0 3vw;
	overflow: hidden;
}

.sector[s="email"] .input-box,
.sector[s="password"] .input-box {
	margin-top: 0;
	height: 16vw;
	background: hsla(0,0%,100%,0.3);
	border-radius: 5vw;
	padding: 0 4.8vw;
	border: none;
}

.popout .input-box {
	height: 13.5vw;
}

.fetcher .input-box {
	border: none;
	border-bottom: var(--border);
	border-radius: 0;
	margin-bottom: 8vw;
	padding: 0;
	height: 10vw;
	padding-bottom: 2.5vw;
}

.input[i="bio"] .input-box {
	height: 38.5vw;
}

.fetcher .input[i="description"] .input-box,
.pop[c="support"] .input[i="description"] .input-box {
	height: 40vw;
}

.input input,
.input textarea,
.input select {
	position: relative;
	width: 100%;
	height: 100%;
	outline: none;
	border: none;
	padding: 0;
	text-decoration: none;
	resize: none;
	background: transparent;
	font-size: 3.8vw;
	font-weight: 500;
}

.sector[s="email"] input,
.sector[s="password"] input {
	font-size: 5vw;
	font-weight: 700;
	color: hsl(0,0%,45%);
}

.input-box textarea {
	margin-top: 3vw;
}

.settings input,
.settings textarea {
	text-align: center;
}

.inputs[count="3"][dash="yes"] .input input {
	text-align: center;
}

.input svg {
	position: absolute;
	right: 0;
	width: 7vw;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 5vw;
	z-index: 1;
	opacity: 1;
	cursor: pointer;
	transition: all 0.2s;
}

.peeking svg {
	opacity: 0.6;
}

.protected {
	position: relative;
	display: inline-block;
	margin-bottom: 5vw;
	background: #F0F0F0;
	border-radius: 10vw;
	--p: 3.2vw;
	padding: calc(var(--p) * 0.65) var(--p);
	box-sizing: border-box;
}

.protected .icon {
	position: absolute;
	left: 0;
	width: var(--p);
	height: auto;
	margin-left: var(--p);
	top: 50%;
	transform: translateY(-50%);
}

.protected .text {
	position: relative;
	display: inline-block;
	font-size: calc(var(--p) * 1.1);
	font-weight: 700;
	opacity: 0.5;
	margin-left: 5vw;
}

.sector[s="onboard"] .title,
.sector[s="onboard"] .description {
	text-align: center;
}

.sector[s="onboard"] .title {
	font-size: 12vw;
	line-height: 13.5vw;
	margin-top: 10vw;
}

.sector[s="onboard"] .description {
	text-align: center;
	font-size: 5vw;
	width: 80%;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 0;
	margin-top: 6vw;
}

.frame {
	position: relative;
	width: 70vw;
	height: 43.5vw;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 10vw;
	text-align: center;
	background: hsla(0, 0%, 100%, 0.2);
	margin-top: 15vh;
	z-index: 1;
	pointer-events: none;
}

.frame img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	margin-top: -40vw;
	width: 100vw;
	will-change: transform;
}

.sector[p="2"] .frame img {
	width: 90vw;
	margin-top: -35vw;
}

.frame[count="2"] img {
	width: 80vw;
	margin-top: -35vw;
	margin-left: -10vw;
}

.frame[count="2"] img:last-child {
	width: 80vw;
	margin-left: 25vw;
	margin-top: -5vw;
}

.sector[s="onboard"] .skip {
	position: absolute;
	top: 0;
	margin: 5vw;
	right: 0;
	z-index: 1;
	font-size: 4vw;
	color: #fff;
	font-weight: 600;
	opacity: 0.5;
}

/* LEGAL */
.legal {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: hsla(0,0%,0%,0.25);
	-webkit-backdrop-filter: blur(0.5vw);
	backdrop-filter: blur(0.5vw);
	--legal: 2vw;
	opacity: 0;
	pointer-events: none;
	transition: all 0.2s;
}

.showLegal .legal {
	opacity: 1;
	pointer-events: all;
}

.legal .box {
	position: absolute;
	overflow-y: scroll;
	background: white;
	height: 100%;
	margin-left: 100vw;
	transition: all 0.2s;
}

[edition="website"] .legal .box {
	right: 0;
	width: 33vw;
	margin-right: -33vw;
}

[edition="website"].showLegal .legal .box {
	margin-right: 0;
}

[edition="app"] .legal .box {
	right: 0;
	width: 100%;
	margin-top: 100vh;
}

[edition="app"].showLegal .legal .box {
	margin-top: 0;
}

.legal .close {
	position: absolute;
	right: 0;
	margin: 2vw;
	width: 1.25vw;
	height: auto;
	cursor: pointer;
}

[edition="app"] .legal .close {
	margin: 7vw 7vw;
	width: 4vw;
}

.legal .title {
	margin-top: 5vw;
	font-size: 3.5vw;
	font-weight: 700;
	margin-left: var(--legal);
}

[edition="app"] .legal .title {
	margin-left: var(--left);
	margin-top: 15vw;
	font-size: 10vw;
}

.legal .selector {
	position: relative;
	padding-left: var(--legal);
	white-space: nowrap;
	width: 100%;
	overflow-x: scroll;
	margin-top: 1.5vw;
	box-sizing: border-box;
}

[edition="app"] .legal .selector {
	padding-left: var(--left);
	margin-top: 5vw;
}

.legal .selector::-webkit-scrollbar {
	display: none;
}

.legal .selector > div {
	position: relative;
	display: inline-block;
	margin-right: 2vw;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 1.2vw;
	padding-bottom: 0.7vw;
	font-weight: 600;
	opacity: 0.4;
}

[edition="app"] .legal .selector > div {
	margin-right: 6vw;
	font-size: 4vw;
	padding-bottom: 2vw;
}

.legal .selector > div.active {
	font-weight: 800;
	border-bottom: 0.15vw solid hsl(0,0%,50%);
	opacity: 1;
}

[edition="app"] .legal .selector > div.active {
	border-bottom: 0.5vw solid hsl(0,0%,50%);
}

.legal .content {
	margin-top: 2.5vw;
	margin-left: var(--legal);
	width: calc(100% - (var(--legal) * 2));
	font-weight: 500;
	margin-bottom: 2vw;
	font-size: 1.25vw;
}

.legal .content b {
	font-size: 1.5vw;
}

[edition="app"] .legal .content {
	width: calc(100% - (var(--left) * 2));
	margin-left: var(--left);
	margin-top: 7vw;
	margin-bottom: 7vw;
	font-size: 4vw;
}

[edition="app"] .legal .content b {
	font-size: 5vw;
}

.legal .content > div {
	display: none;
}

.legal .content span {
	font-size: 1vw;
}

[edition="app"] .legal .content span {
	font-size: 3vw;
}

.sector[s="alerts"] .empty,
.bundle[b="billing"] .empty {
	font-size: 5vw;
    font-weight: 600;
    margin-top: 0.5vw;
    margin-left: var(--left);
}

.bundle[b="billing"] .empty {
	font-size: 3.5vw;
	margin-top: 1.5vw;
}