/* Activity Indicator */
@-webkit-keyframes ui-activity-indicator-keyframe-u07851365 {
	0% {
		opacity: 0.25;
	}

	to {
		opacity: 1;
	}
}

@keyframes ui-activity-indicator-keyframe-u07851365 {
	0% {
		opacity: 0.25;
	}

	to {
		opacity: 1;
	}
}

ui-activity-indicator.standard {
	display: inline-block;
	position: relative;
	width: 32px;
	height: 32px;
}

ui-activity-indicator.standard ui-spinner-nib {
	position: absolute;
	left: 50%;
	top: 0;
	width: 3px;
	height: 9px;
	border-radius: 1.5px;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-animation-name: ui-activity-indicator-keyframe-u07851365;
	animation-name: ui-activity-indicator-keyframe-u07851365;
	animation-direction: reverse;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(0.33333,
			0,
			0.66667,
			0.33333);
	animation-timing-function: cubic-bezier(0.33333, 0, 0.66667, 0.33333);
	background-color: #fff;
}

ui-activity-indicator.standard ui-spinner-nib:first-of-type {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
	-webkit-transform: translateY(16px) rotate(0deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(0deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(2) {
	-webkit-animation-delay: -0.91667s;
	animation-delay: -0.91667s;
	-webkit-transform: translateY(16px) rotate(30deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(30deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(3) {
	-webkit-animation-delay: -0.83333s;
	animation-delay: -0.83333s;
	-webkit-transform: translateY(16px) rotate(60deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(60deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(4) {
	-webkit-animation-delay: -0.75s;
	animation-delay: -0.75s;
	-webkit-transform: translateY(16px) rotate(90deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(90deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(5) {
	-webkit-animation-delay: -0.66667s;
	animation-delay: -0.66667s;
	-webkit-transform: translateY(16px) rotate(120deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(120deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(6) {
	-webkit-animation-delay: -0.58333s;
	animation-delay: -0.58333s;
	-webkit-transform: translateY(16px) rotate(150deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(150deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(7) {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
	-webkit-transform: translateY(16px) rotate(180deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(180deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(8) {
	-webkit-animation-delay: -0.41667s;
	animation-delay: -0.41667s;
	-webkit-transform: translateY(16px) rotate(210deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(210deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(9) {
	-webkit-animation-delay: -0.33333s;
	animation-delay: -0.33333s;
	-webkit-transform: translateY(16px) rotate(240deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(240deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(10) {
	-webkit-animation-delay: -0.25s;
	animation-delay: -0.25s;
	-webkit-transform: translateY(16px) rotate(270deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(270deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(11) {
	-webkit-animation-delay: -0.16667s;
	animation-delay: -0.16667s;
	-webkit-transform: translateY(16px) rotate(300deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(300deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(12) {
	-webkit-animation-delay: -0.08333s;
	animation-delay: -0.08333s;
	-webkit-transform: translateY(16px) rotate(330deg) translateY(-16px) translateX(-1.5px);
	transform: translateY(16px) rotate(330deg) translateY(-16px) translateX(-1.5px);
}

/*
<div class="spinner-wrapper">
	<ui-activity-indicator id="cloudos-loading-spinner" class="standard">
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
		<ui-spinner-nib></ui-spinner-nib>
	</ui-activity-indicator>
</div>
*/
.spinner-wrapper {
	display: none;
}

/* spinner */

.userinfo {
	text-align: center;
	margin-bottom: 20px;
}

.userinfo span {
	font-size: 15px;
	color: rgba(var(--font-color), .6);
}

.userinfo h1 {
	margin: 0;
	font-size: 24px;
}

.userinfo .avatar img {
	margin-bottom: 10px;
	max-width: 128px;
	border-radius: 50%;
}


:root {
	--background-color: 255, 255, 255;
	/* --background-color: 223, 223, 223; */
	--font-color: 26, 26, 26;
	--invert: 0, 0, 0;

	--systemRed: 255, 59, 48;
	--systemOrange: 255, 149, 0;
	--systemYellow: 255, 204, 0;
	--systemGreen: 40, 205, 65;
	--systemMint: 0, 199, 190;
	--systemTeal: 89, 173, 196;
	--systemCyan: 85, 190, 240;
	--systemBlue: 0, 122, 255;
	--systemIndigo: 88, 86, 214;
	--systemPurple: 175, 82, 222;
	--systemPink: 255, 45, 85;
	--systemBrown: 162, 132, 94;
	--systemGrey: 142, 142, 147;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: 30, 30, 30;
		--font-color: 230, 230, 230;
		--invert: 255, 255, 255;

		--systemRed: 255, 69, 58;
		--systemOrange: 255, 159, 10;
		--systemYellow: 255, 214, 10;
		--systemGreen: 50, 215, 75;
		--systemMint: 102, 212, 207;
		--systemTeal: 106, 196, 220;
		--systemCyan: 90, 200, 244;
		--systemBlue: 10, 132, 255;
		--systemIndigo: 94, 92, 230;
		--systemPurple: 191, 90, 242;
		--systemPink: 255, 55, 95;
		--systemBrown: 172, 142, 104;
		--systemGrey: 152, 152, 157;
	}
}

.type-xl {
	font-size: 60px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
}

.type-l {
	font-size: 35px;
	font-weight: bold;
	line-height: 1.32;
	letter-spacing: .02em;
}

.type-xm {
	font-size: 30px;
	font-weight: bold;
	line-height: 1.32;
	letter-spacing: .02em;
}

.type-m {
	font-size: 20px;
	line-height: 1.45;
	letter-spacing: .001em;
}

.type-m.is-bold {
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.002em;
}

.type-s {
	font-size: 19px;
	line-height: 1.45;
	letter-spacing: -0.002em;
}

.type-xs {
	font-size: 17px;
	line-height: 1.45;
	letter-spacing: -0.002em;
}

.type-xss {
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: -0.002em;
}

.type-xxs {
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: -0.002em;
}

* {
	box-sizing: border-box;
}

a {
	color: rgb(var(--systemBlue));
}

html {
	font-family: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
	color: rgb(var(--font-color));
	background: rgb(var(--background-color));
	word-break: break-word;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


html,
body {
	padding: 0;
	margin: 0;
}

.horizontal-line {
	border-top: .5px solid rgba(var(--font-color), .3);
	/* margin-right: 50px !important; */
	/* margin-left: 50px !important; */
	margin-bottom: 20px;
	margin-top: 20px;
}


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

.container-neutral {
	width: calc(100% - 80px);
	box-sizing: content-box;
	padding: 0 40px;
	color: rgb(var(--font-color));
}

.page-nav {
	margin-top: 10px;
}

.page-nav-inner .page-nav-link:last-child .download-icon {
	display: none;
}

.page-nav-inner {
	display: flex;
	align-items: center;
}

.page-nav-link.is-active {
	opacity: .56;
	pointer-events: none;
}

.page-nav-link {
	font-size: 14px;
	color: rgb(var(--font-color));
	line-height: 15px;
	letter-spacing: -0.005em;
	opacity: .85;
	transition: opacity 130ms ease-in-out;
}

.page-nav-link+.page-nav-link {
	margin-left: 15px;
}

.page-nav-inner .page-nav-link:last-child {
	display: block;
	padding: 0 11px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	line-height: 24px;
	letter-spacing: -0.01em;
	background-color: #ff4169;
	border: 0;
	border-radius: 30px;
	cursor: pointer;
	will-change: auto;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: background 130ms ease-in-out;
}

/* .action-button {
	/* padding: 2px 4px; */
	/* display: inline-block;
	margin-left: 6px;
	margin-right: 6px;
	text-decoration: none;
	
	font-size: 18px;
	
	color: #ff4169; */
} */

/* .action-buttons .action-button:after {
	content: "";
	font-size: 18px;
	text-decoration: none;
} */


.page-nav-inner .page-nav-link:last-child:hover {
	background-color: #ff6482;
}

.container-default {
	margin-top: -20px;
	color: rgb(var(--font-color));
}

.container-default .constrained {
	padding: 0 50px;
	width: 100%;
}
.container-default .desktops.constrained {
	padding: 0 25px;
	width: 100%;
}

@media (max-width: 700px) {
	.container-default .constrained {
		padding: 0 30px;
	}
	.container-default .desktops.constrained {
		padding: 0 5px;
	}

	.footer {
		padding: 0 20px !important;
	}

	.container-neutral .page-nav-inner .page-nav-link:last-child span {
		display: none;
	}
	
	.container-neutral .page-nav-inner .page-nav-link:last-child .download-icon {
		display: block;
		height: 16px;
		width: 16px;
		fill: #fff;
		margin: 4px 3px 4px;
	}
}

.container-centered {
	width: 100%;
	height: calc(100% - 100px);
	display: flex;
	justify-content: center;
	align-items: center;
}

#authorise .container-centered .forgot:last-child {
	margin-top: 10px;
}

#authorise .forgot {
	font-size: 14px;
	display: block;
}
#authorise .forgot::after {
	content: " ";
}

.header .logo {
	max-width: 30px;
	max-height: 30px;
	width: 100%;
	margin-right: 5px;
	fill: rgb(var(--font-color));
	display: inline-block;
}

.header a {
	text-decoration: none;
}

.header .left {
	flex: 1;
}

.header .left a {
	display: flex;
	align-items: center;
}

.header .left .title-name,
.header .left .title-sectionname,
#authorise .title-name {
	font-size: 24px;
	font-weight: 600;
	color: rgba(var(--font-color));
	line-height: 50px;
	letter-spacing: -0.02em;
}

.header .left .title-sectionreport {
	color: rgba(var(--systemBlue));
}

.header .avatar img {
	max-width: 42px;
	
	border-radius: 50%;
}

.header .avatar {
	border-radius: 8px;
	/* padding: 8px 12px; */
}

.header .avatar:hover {
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .05);
}

.header {
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 18px;
	padding-bottom: 20px;
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	position: relative;
	z-index: 500;
}

remoto-auth .information {
	text-align: center;
}

#authorise .title {
	display: inline-block;
	font-size: 25px;
	font-weight: 500;
	letter-spacing: -0.02em;
	vertical-align: middle;
}

#authorise .subtitle {
	margin-top: 3px;
	display: block;
	font-size: 14px;
}

#authorise .verified {
	fill: rgb(var(--font-color));
	vertical-align: middle;
	display: inline-block;
	margin-left: 3px;
	width: 15px;
}

#authorise .title-location {
	display: block;
	font-size: 17px;
	color: rgba(var(--font-color), .8);
	letter-spacing: -0.02em;
}

#authorise remoto-auth .credentials {
	margin-top: 20px;
}

#authorise .logo-container {
	text-align: left;
	margin-bottom: 13px;
}

@media (max-width: 500px) {
	/* #landing .header {
		display: block;
	} */

	.hero-title {
		font-size: 80px !important;
	}

	.hero-name {
		font-size: 20px !important;
	}

	.hero-description {
		font-size: 15px !important;
	}
}

/* #landing .header,
#releases .header {
	background: none;
	padding: 0;
	border: 0;
	margin-top: 25px;

	/* position: fixed; */
	/* top: 0; */
	/* left: 0; */
	/* z-index: 2; */
	/* width: 100%; */
	/* padding-top: 68px; */
	/* padding-bottom: 24px; */
	/* background-color: rgba(255, 255, 255, 0.209); */
	/* opacity: 0; */
	/* visibility: hidden; */
	/* transform: translateY(-100%); */
	/* transition: transform .55s cubic-bezier(0.5, 0.15, 0.25, 1),opacity .55s cubic-bezier(0.5, 0.15, 0.25, 1); */
} */


.header-device .details {
	text-align: center;
}

.sip-status {
	max-height: 15px;
	max-width: 14px;
	display: inline-block;
	fill: rgb(var(--font-color));
}

.footer {

	/* background: rgba(0, 0, 0, .2); */
	/* background: red; */
	/* padding: 15px 26px; */
	padding: 0 50px;
	/* border-top: .5px solid rgba(var(--font-color), .3); */
	display: block;
	/* text-align: center; */
	color: rgba(var(--font-color), 0.5);
	bottom: 0;
	margin-top: 30px;
	margin-bottom: 20px;
}

/* #landing { */

/* background-size: cover; */
/* } */

@keyframes bounce {

	0%,
	20%,
	53%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}

	40%,
	43% {
		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
		transform: translate3d(0, -30px, 0) scaleY(1.1)
	}

	70% {
		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
		transform: translate3d(0, -15px, 0) scaleY(1.05)
	}

	80% {
		-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translateZ(0) scaleY(.95);
		transform: translateZ(0) scaleY(.95)
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
		transform: translate3d(0, -4px, 0) scaleY(1.02)
	}
}


@keyframes slidein {
	0% {
		margin-left: 100px !important;
	}

	100% {
		margin-left: auto !important;
	}
}

/* @keyframes slidein-right {
	0% {
		padding-left: 500px;
	}

	100% {
		padding-left: 0px;
	}
} */

#landing .hero-title {
	font-size: 120px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
}

#landing .hero-title {
	animation-duration: 2s;
	animation-name: slidein;
	animation-iteration-count: 1;

	max-width: 800px;
	padding-top: 70px;
	margin: 0 auto 0;
	text-align: center;
}

#landing .hero-name {

	margin: 0;
	margin-top: -7px;
	font-size: 25px;
	font-weight: 600;
	/* color: var(--black); */
	line-height: 1.45;
	letter-spacing: -0.002em;
	text-align: center;
}

#landing .hero-description {
	font-size: 18px;
	line-height: 1.45;
	letter-spacing: .001em;
}

#landing .hero-description {
	max-width: 550px;
	margin: 23px auto 0;
	/* color: #333; */
	text-align: center;
}

#releases>div {
	margin-top: 30px;
	margin-bottom: 30px;
}

#releases .version a {
	color: inherit;
	text-decoration: none;
}

#releases .version-name {
	margin-bottom: 5px;
	display: block;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: 0em;
	font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

#releases .version-name:hover {
	text-decoration: underline;
}

#releases .version-date {
	display: block;
	color: rgba(var(--invert), .5);
	font-size: 14px;
	line-height: 24px;
}

#releases li {
	font-size: 17px;
	line-height: 1.47059;
	font-weight: 400;
	letter-spacing: -.022em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-style: normal;
}

/* #releases span {
	display: block;
} */

/* #releases .version {
	margin-top: 15px;
	margin-bottom: 5px;
	font-weight: 600;
}

#releases .version a {
	color: inherit;
} */

/* #authorise {
	text-align: center;
	max-width: 328px;
	max-width: 250px;
} */

#authorise .apple {
	max-height: 64px;
	max-width: 64px;
	margin-bottom: 20px;
	display: inline-block;
	fill: rgb(var(--font-color));
	vertical-align: middle;
}

#authorise {
	text-align: center;
}

#authorise a {
	color: #0070c9;
	text-decoration: none;
}

/* #authorise a:hover {
	text-decoration: underline;
} */

#authorise a>span {
	font-size: 14px;
}

#authorise .separator {
	background-image: url(/icon/hl-gradient.png);
	background-size: cover;

	width: 100%;
	max-width: 328px;
	margin-top: 20px;
	margin-bottom: 20px;
	height: 1px;
}

/* #authorise form {
	margin: 0;
	text-align: left;
} */

/* #authorise form div {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 8px;
	margin-bottom: 8px;
} */

.user-auth-icon:before {
	font-family: 'shared-icons';
	font-size: 82px;
	font-weight: bold;
	content: '';
	text-align: center;
	display: block;
	margin-bottom: 14px;
}

#authorise .profile {
	/* display: inline-block; */
	background: rgba(var(--invert), .1);
	margin: 0 auto;
	margin-bottom: 20px;
	border-radius: 50%;
	overflow: hidden;
	width: 100px;
	height: 100px;

	display: flex;
	justify-content: center;
	align-items: center;
}

#authorise .profile img {
	display: inline-block;
	max-width: 90px;
	padding: 18px;
}

/* #authorise input {
	outline: none;
	background: none;
	box-sizing: border-box;
	color: var(--font-color);
	display: block;
	width: 100%;
	
	font-family: inherit;
	font-weight: normal;
	
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
	
	
	font-size: 17px;
	line-height: 1.29412;
	border: 1px solid rgba(var(--font-color), .3);
	border-radius: 6px;
	margin: 0;
	
	margin-bottom: 8px;
} */

/* #authorise input {
	outline: none;
	background: none;
	box-sizing: border-box;
	color: var(--font-color);
	display: inline-block;
	width: 100%;
	
	font-family: inherit;
	font-weight: normal;
	
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
	
	
	font-size: 17px;
	font-size: 15px;
	line-height: 1.29412;
	border: 1px solid rgba(var(--font-color), .3);
	border-radius: 30px;
	border-radius: 6px;
	margin: 0;
	
	width: 200px;
} */



#authorise .continue {
	max-height: 25px;
	margin-left: 5px;
}

@-moz-keyframes fade-in {
	0% {
		opacity: 0
	}

	to {
		opacity: .6
	}
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0
	}

	to {
		opacity: .6
	}
}

@-o-keyframes fade-in {
	0% {
		opacity: 0
	}

	to {
		opacity: .6
	}
}

@-ms-keyframes fade-in {
	.signin-form.fed-auth~.si-button.fed-ui.fed-ui-animation-show 0% {
		opacity: 0
	}

	.signin-form.fed-auth~.si-button.fed-ui.fed-ui-animation-show to {
		opacity: .6
	}
}

@-khtml-keyframes fade-in {
	.signin-form.fed-auth~.si-button.fed-ui.fed-ui-animation-show 0% {
		opacity: 0
	}

	.signin-form.fed-auth~.si-button.fed-ui.fed-ui-animation-show to {
		opacity: .6
	}
}

popover {
	/* margin: auto; */
	/* max-width: 100px;
	width: 100%; */
	display: none;
	/* -webkit-animation: fade-in .2s ease-in-out;
	-moz-animation: fade-in .2s ease-in-out;
	-ms-animation: fade-in .2s ease-in-out;
	-o-animation: fade-in .2s ease-in-out;
	animation: fade-in .2s ease-in-out; */
	z-index: 20000000000;
}

popover span {
	font-size: 15px;
}

@-webkit-keyframes headShake {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	6.5% {
		-webkit-transform: translateX(-6px) rotateY(-9deg);
		transform: translateX(-6px) rotateY(-9deg)
	}

	18.5% {
		-webkit-transform: translateX(5px) rotateY(7deg);
		transform: translateX(5px) rotateY(7deg)
	}

	31.5% {
		-webkit-transform: translateX(-3px) rotateY(-5deg);
		transform: translateX(-3px) rotateY(-5deg)
	}

	43.5% {
		-webkit-transform: translateX(2px) rotateY(3deg);
		transform: translateX(2px) rotateY(3deg)
	}

	50% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes headShake {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	6.5% {
		-webkit-transform: translateX(-16px) rotateY(-22deg);
		transform: translateX(-16px) rotateY(-22deg)
	}

	18.5% {
		-webkit-transform: translateX(14px) rotateY(18deg);
		transform: translateX(14px) rotateY(18deg)
	}

	31.5% {
		-webkit-transform: translateX(-10px) rotateY(-14deg);
		transform: translateX(-10px) rotateY(-14deg)
	}

	43.5% {
		-webkit-transform: translateX(8px) rotateY(10deg);
		transform: translateX(8px) rotateY(10deg)
	}

	50% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

.animateHeadShake {
	-webkit-animation-name: headShake;
	animation-name: headShake;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}

@-webkit-keyframes jello {

	0%,
	11.1%,
	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}

	22.2% {
		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
		transform: skewX(-12.5deg) skewY(-12.5deg)
	}

	33.3% {
		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
		transform: skewX(6.25deg) skewY(6.25deg)
	}

	44.4% {
		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
		transform: skewX(-3.125deg) skewY(-3.125deg)
	}

	55.5% {
		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
		transform: skewX(1.5625deg) skewY(1.5625deg)
	}

	66.6% {
		-webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
		transform: skewX(-.78125deg) skewY(-.78125deg)
	}

	77.7% {
		-webkit-transform: skewX(.390625deg) skewY(.390625deg);
		transform: skewX(.390625deg) skewY(.390625deg)
	}

	88.8% {
		-webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
		transform: skewX(-.1953125deg) skewY(-.1953125deg)
	}
}

@keyframes jello {

	0%,
	11.1%,
	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}

	22.2% {
		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
		transform: skewX(-12.5deg) skewY(-12.5deg)
	}

	33.3% {
		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
		transform: skewX(6.25deg) skewY(6.25deg)
	}

	44.4% {
		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
		transform: skewX(-3.125deg) skewY(-3.125deg)
	}

	55.5% {
		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
		transform: skewX(1.5625deg) skewY(1.5625deg)
	}

	66.6% {
		-webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
		transform: skewX(-.78125deg) skewY(-.78125deg)
	}

	77.7% {
		-webkit-transform: skewX(.390625deg) skewY(.390625deg);
		transform: skewX(.390625deg) skewY(.390625deg)
	}

	88.8% {
		-webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
		transform: skewX(-.1953125deg) skewY(-.1953125deg)
	}
}

.animateJello {
	-webkit-animation-name: jello;
	animation-name: jello;
	-webkit-transform-origin: center;
	transform-origin: center
}

.animate {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}


popover content {
	/* --tw-bg-opacity: 0.7;
	--tw-backdrop-blur: blur(24px);
	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); */

	z-index: 90;
	/* box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset; */
	/* box-shadow: rgba(var(--invert), .3) 0px 0px 0px 1px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 5px 15px 0px; */
	/* border: 1px solid rgba(var(--invert), .3); */
	position: absolute;
	/* bottom: 20px; */
	left: 0%;
	/* border-radius: 10px; */
	/* background-color: rgb(30 30 55/var(--tw-bg-opacity)); */
	/* padding: 10px 20px 10px; */
	/* padding: 5px 10px 5px; */
	/* text-align: left; */
	font-size: 14px;
	line-height: 1.25rem;
	/* color: rgb(255 255 255); */
	margin-top: 8px;
	color: rgba(var(--font-color), 0.8);

	/* background-color: rgba(var(--background-color));
	position: absolute;
	min-width: 50px; */
	/* margin-left: -50%; */
	/* border-radius: 5px;
	left: 0%; */
	/* left: 50%; */
	/* border: 1px solid rgba(var(--font-color), .3);
	box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .1);
	margin-top: 10px;
	padding: 8px 11px;
	color: var(--font-color); */
}

/* 
popover content:before {
	width: 15px;
	height: 15px;

	background-color: rgba(var(--background-color));
	content: "";
	position: absolute;
	left: 47.2%;
	-webkit-transform: rotate(135deg) skewX(5deg) skewY(5deg);
	-ms-transform: rotate(135deg) skewX(5deg) skewY(5deg);
	-o-transform: rotate(135deg) skewX(5deg) skewY(5deg);
	transform: rotate(135deg) skewX(5deg) skewY(5deg);
	top: -8px;
	border-left: 1px solid rgba(var(--font-color), .3);
	border-bottom: 1px solid rgba(var(--font-color), .3);
	box-shadow: -1px 1px 2px -1px rgba(var(--font-color), .3);
} */

/* #device popover content:before {
	left: 10%;
} */

.code {
	display: block;
	font-family: monospace;
	white-space: pre;
	margin-top: 1em;
	margin-right: 0px;
}

.label-full {
	text-transform: uppercase;
	font-size: 0.65em !important;
	color: rgb(var(--background-color));
	display: inline-block !important;
	padding: 1px 3.5px;
	/* make spacing more */
	font-weight: 500;
	/* letter-spacing: 1; */
	/* border: 1px solid rgb(var(--font-color), .6); */
	background: rgba(var(--invert), 0.5);
	border-radius: 3px;
}

.label-round {
	font-size: 0.75em !important;
	color: rgba(var(--font-color), .6);
	display: inline-block !important;
	padding: 1px 12px;
	border: 1px solid rgb(var(--font-color), .6);
	border-radius: 10px;
	line-height: normal;
}

.label {
	font-size: 0.75em !important;
	color: rgba(var(--font-color), .6);
	display: inline-block !important;
	padding: 1px 12px;
	border: 1px solid rgb(var(--font-color), .6);
	border-radius: 3px;
}


/* DEVICE / DEVICES */

.devices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
	grid-gap: 15px;  
	position: relative;
	-webkit-transition: resize .2s linear;
	-o-transition: resize .2s linear;
	transition: resize .2s linear;
}




.devices-recent {
	--default-margin: -50px;
	--default-ratio: 3;
	--laptop-margin: -80px;
}

@media (min-width: 1000px) {
	.devices-recent {
		--default-ratio: 2.8;
	}
}

@media (max-width: 670px) {
	.devices-recent {
		--default-ratio: 4;
	}
}

@media (max-width: 570px) {
	.devices-recent {
		--default-ratio: 5;
	}
}

@media (max-width: 400px) {
	.devices-recent {
		--default-ratio: 6;
	}
}

@media (max-width: 300px) {
	.devices-recent {
		--default-ratio: 8;
	}
}

@media (max-width: 250px) {
	.devices-recent {
		--default-ratio: 9;
	}
}

@media (max-width: 200px) {
	.devices-recent {
		--default-ratio: 10;
	}
}


.devices-recent a,
.devices-recent .mockup {
	display: inline-block;
}

.devices-recent a:nth-child(2) .mockup {
	margin-left: calc(var(--default-margin) / var(--default-ratio));
	margin-right: calc(var(--default-margin) / var(--default-ratio));
}

.devices-recent a:nth-child(1) div[class*="macbook"] {
	margin-right: calc(calc(var(--laptop-margin) / 1.5) / var(--default-ratio));
}
.devices-recent a:nth-child(2) div[class*="macbook"] {
	margin-left: calc(calc(var(--laptop-margin) / var(--default-ratio)) + calc(var(--default-margin) / var(--default-ratio)));
	margin-right: calc(calc(var(--laptop-margin) / var(--default-ratio)) + calc(var(--default-margin) / var(--default-ratio)));
}
.devices-recent a:nth-child(3) div[class*="macbook"] {
	margin-left: calc(calc(var(--laptop-margin) / 1.5) / var(--default-ratio));
}

.devices-recent a:nth-child(1) .icon-device,
.devices-recent a:nth-child(3) .icon-device {
	width: calc(var(--default-width) / calc(var(--default-ratio) * 1.5));
	height: calc(var(--default-height) / calc(var(--default-ratio) * 1.5));
}

.devices-recent a:nth-child(1) .macstudio .icon-device,
.devices-recent a:nth-child(1) .macmini-unibody-silver .icon-device,
.devices-recent a:nth-child(1) .macmini-unibody-spacegrey .icon-device,
.devices-recent a:nth-child(3) .macstudio .icon-device,
.devices-recent a:nth-child(3) .macmini-unibody-silver .icon-device,
.devices-recent a:nth-child(3) .macmini-unibody-spacegrey .icon-device {
	width: calc(var(--default-width) / calc(var(--default-ratio) + 2.3 * 2));
	height: calc(var(--default-height) / calc(var(--default-ratio) + 2.3 * 2));
}

.devices-recent a:nth-child(2) .icon-device {
	width: calc(var(--default-width) / var(--default-ratio));
	height: calc(var(--default-height) / var(--default-ratio));
}

.devices-recent a:nth-child(1) .mockup,
.devices-recent a:nth-child(3) .mockup {
	z-index: -100;
}
.devices-recent a:nth-child(2) .mockup {
	z-index: 1;
}

.devices-recent {
	text-align: center;
	margin-bottom: 35px;
}





.header-device .status {
	margin-top: 8px;
}

.header-device .status .icon {
	max-width: 7px;
	margin-right: 4px;
	vertical-align: middle;
	display: inline-block;
}

.device a {
	text-decoration: none;
	color: inherit;
}

.images .mockup:active,
.images .mockup:focus,
.details .mockup:active,
.details .mockup:focus {
	opacity: .7;
}

.device .images .icon-device-loading {
	max-height: 60px;
	margin-bottom: 4px;
}

.device .status {
	/* margin-bottom: 2px !important; */
	display: inline-block;
	/* margin-bottom: 5px; */
}

.device .status .icon {
	margin: 0;
	margin-right: 4px;
}

.device .id {
	font-size: 13px !important;
	color: rgba(var(--font-color), .6);
}

.device .details .name {
	font-size: 16px;
	letter-spacing: -0.002em;
	font-weight: 550;
	max-width: 135px;
	vertical-align: middle;
	display: inline-block;
}


.device .images {
	display: inline-block;
	margin-bottom: -2px;
}

#devices .device .container {
	text-align: center;
}

/* #devices .device:hover .details {
	padding: 5px 7px;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .2);
} */

#devices .device .details:active,
#devices .device .details:focus {
	/* display: inline-block; */
	/* padding: 5px; */
	/* text-align: center; */
	/* background-color: rgba(0,0,0,.1); */
	/* border-radius: 8px; */
}

#devices .device .details div {
	display: inline-block;
}

#devices .device .details {
	/* width: 100%; */
	display: inline-block;
	padding: 5px 7px;
	border-radius: 8px;
}

.error .description {
	display: block;
	font-family: monospace;
}

.incomplete-message {
	display: block;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 15px;
}

/* HEADER */

.header-device {
	text-align: center;
	margin-bottom: 25px;
}

.header-device .title {
	font-size: 25px;
	font-weight: bold;
	letter-spacing: .02em;
	vertical-align: middle;
	cursor: pointer;
}

.header-device .icon-device {
	display: inline-block;
	width: auto;
	height: auto;
	margin-bottom: 0.3em;
	vertical-align: bottom;
}


.header-device .age {
	margin-top: 5px;
}

#device .subtitle {
	display: block;
	font-size: 18px;
	font-weight: 520;
	line-height: 1.32;
	letter-spacing: .02em;
	margin-bottom: 10px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
	gap: 15px;
}

.grid.information {
	display: flex;
	flex-wrap: wrap;
}

.networks {
	gap: 15px;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.users {
	gap: 15px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* SERVICE / SERVICES */

#device .services {
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	grid-gap: 25px;
	text-align: center;
}

#device .shortcuts {
	text-align: center;
	gap: 25px;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

#device .shortcut {
	/* border: 1px solid rgb(var(--font-color), .5); */
	/* background-color: rgba(0, 0, 0, .09); */
	
	padding: 15px;
	border: 1px solid rgb(var(--font-color), .3);
	border-radius: 15px;
	/* margin-right: 20px; */
	/* margin-bottom: 20px; */
	border-radius: 13px;
	display: inline-block;
	padding: 12px 12px;
	width: 120px;
	/* max-width: 300px; */
	/* max-width: 250px; */
	/* min-width: 250px; */
	/* padding-bottom: 15px; */
	position: relative;
	text-align: center;
}

#device .shortcut .back-image {
	position: absolute;
	max-height: 100%;
	top: 0;
	right: 0;
	display: none;
	/* z-index: -100; */
}

#device .shortcut .size {
	margin-top: 5px;
	display: inline-block;
	font-family: monospace;
	font-sie: 13px;
}

#device .shortcut .displayname {
	font-weight: 600;
	font-size: 17px;
}

#device .shortcut .size {
	margin-top: 5px;
}

#device .shortcut .type {
	/* font-weight: 500; */
	color: rgba(var(--font-color), .6);
	font-size: 12px;
}

#device .shortcut .name {
	font-weight: 600;
	font-size: 15px;
}

#device .actions {
	margin-bottom: 10px;
}

.service .icon,
.action .icon {
	-webkit-transition: -webkit-transform .2s cubic-bezier(.32, .08, .24, 1);
	transition: -webkit-transform .2s cubic-bezier(.32, .08, .24, 1);
	transition: transform .2s cubic-bezier(.32, .08, .24, 1);
	transition: transform .2s cubic-bezier(.32, .08, .24, 1), -webkit-transform .2s cubic-bezier(.32, .08, .24, 1);
}

/* .service .icon:hover,
.action .icon:hover {
	-webkit-transform: scale3d(1.05,1.05,1.05);
	transform: scale3d(1.05,1.05,1.05);
} */

.action .status, .service .status {
	margin-top: -3px;
}

.services .icon,
.services .icon-placeholder {
	max-width: 3.6em;
}

.services .icon:active,
.services .icon:focus,
.shortcut:active,
.shortcut:focus,
.shortcut.loading {
	opacity: .7;
}

.services .name {
	font-size: 15px;
	letter-spacing: -0.002em;
	margin-top: 2px;
	display: block;
}

/* INFORMATION BLOCKS */

.device-incomplete .information {
	margin-top: 10px;
	display: block !important;
}

/* #device .information_new {
	display: block;
	vertical-align: top;
	margin-bottom: -8px;
	background: rgba(var(--font-color), .02);
	border: .5px solid rgba(var(--font-color), .1);
	border-radius: 8px;
	padding: 15px;
	margin: 0 auto;
}


#device .information_new .horizontal-line {
	border-top: .5px solid rgba(var(--font-color), .1);
	margin-bottom: 12px;
	margin-top: 12px;
}

#device .information_new .horizontal-line:last-child {
	display: none;
} */


/* #device .information_new .item_new {
	display: flex;
	justify-content: space-between;
} */

#device .information {
	display: inline-block;
	margin-bottom: -20px;
}

#device .information .item div {
	/* padding: 10px; */
	/* border-radius: 10px; */
	/* background: rgb(var(--invert), .05); */
}

#device .information .item {
	vertical-align: top;
	display: inline-block;
	padding-bottom: 20px;
	padding-right: 20px;
	/* margin: 8px; */
	/* padding: 5px 8px; */
	/* border: 1px solid rgb(var(--font-color), .2); */
	/* border-radius: 10px; */
	width: calc(100% / 4);
}


@media (min-width: 500px) {
	#device .information .item {
		width: calc(100% / 2);
	}
}

@media (min-width: 750px) {
	#device .information .item {
		width: calc(100% / 3);
	}
}

@media (min-width: 800px) {
	#device .information .item {
		width: calc(100% / 4);
	}
}

@media (min-width: 1170px) {
	#device .information .item {
		width: calc(100% / 5);
	}
}

@media (min-width: 1700px) {
	#device .information .item {
		width: calc(100% / 6);
	}
}

@media (min-width: 2000px) {
	#device .information .item {
		width: calc(100% / 7);
	}
}

@media (min-width: 4000px) {
	#device .information .item {
		width: calc(100% / 14);
	}
}



#device .information .content {
	display: block !important;
	font-size: 17px;
	letter-spacing: -0.002em;
}

#device .information .name {
	display: block !important;
	font-size: 14px;
	letter-spacing: -0.002em;
	color: rgba(var(--font-color), .6);
}

.users .user {
	display: flex;
	align-items: center;
}

/* FIND / FINDMY */

.findmy {
	gap: 15px;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.find {
	display: inline-block;
}

.find .status {
	margin-bottom: 3px;
}

.find .name {
	max-width: 8em;
	display: inline-block !important;
}

.find .owner {
	vertical-align: middle;
}

/* SOFTWARE */

.software {
	gap: 15px;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

#software .details .title {
	font-size: 25px;
	font-weight: bold;
	line-height: 1.32;
	letter-spacing: .02em;
}

#software .container-header {
	display: flex;
	justify-content: center;
	align-items: center;
}

#software .container-header .icon {
	max-height: 3.8em;
	display: inline-block;
	width: auto;
	height: auto;
	margin-right: 0.6em;
}

#software .application .name {
	max-width: 7.4em;
}

/* APPLICATION / APPLICATIONS  */

.applications {
	gap: 25px;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.frameworks {
	gap: 25px;
	grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}

.music {
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
	word-wrap: break-word;
	word-break: break-word;
}

.album .artwork {
	max-width: 135px;
	border-radius: 8px;
	display: block;
	margin-bottom: 10px;
}

.album .title {
	display: block;
}

.find .model,
.drive .physical,
.application .architecture,
.framework .kind {
	margin-top: 3px;
}

.framework .kind,
.album .artist {
	font-size: 13px !important;
	color: rgba(var(--font-color), .6);
	display: inline-block !important;
	line-height: normal;
}

.framework .name {
	vertical-align: middle;
}
.framework .version {
	vertical-align: middle;
	margin-right: 4px;
}

.application .icon {
	max-width: 72px;
}

.framework .icon {
	max-width: 64px;
}

.framework {
	text-align: left !important;
}


.application,
.framework {
	display: inline-block;
	text-align: center;
}

.application .architecture,
.framework .kind {
	margin-bottom: 4px;
}

.application .name,
.framework .name {
	max-width: 6.6em;
	font-size: 15px;
	letter-spacing: -0.002em;
	margin-bottom: -5px;
	display: inline-block !important;
}

.framework .name {
	margin-bottom: 1px;
	max-width: 185px;
	font-size: 14px;
}

.application .version,
.framework .version {
	max-width: 4.8em;
	margin-top: 0.1em;
	display: inline-block !important;
}
.framework .version {
	max-width: 80px;
}

/* LOGIN */

.login {
	display: flex;
	align-items: safe center;
	scroll-behavior: smooth;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
	/* gap: 20px; */
	/* grid-template-columns: repeat(auto-fill, 225px); */
}

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

.login .user {
	text-align: center;
	border-radius: 5px;
	padding: 20px;
	border: 1px solid transparent;
	background-color: transparent;
}

.login .user-active {
	border: 1px solid rgba(var(--font-color), .3);
	background-color: rgba(var(--font-color), .04);
}

.login .user .icon {
	max-height: 72px;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
}

.login .user .shortname {
	display: block !important;
	font-size: 13px !important;
	font-weight: 450 !important;
	margin-top: 6px;
	display: block;
}

/* DRIVE / STORAGE */

.storage {
	gap: 20px;
	grid-template-columns: repeat(auto-fill, 225px);
}

.drive {
	display: inline-block;
}

.drive .physical {
	max-width: 140px;
}

.drive .quota {
	font-size: 13px;
	letter-spacing: -0.002em;
}

.drive .name {
	max-width: 120px;
	margin-top: 2px;
	font-size: 15.5px;
	letter-spacing: -0.002em;
}

.drive .details {
	vertical-align: middle;
	display: inline-block;
}

.drive .details span {
	display: block;
}

.drive .icon {
	vertical-align: middle;
	max-height: 60px;
	margin-right: 0.5em;
}

/* USER */

.users .user .icon {
	/* max-height: 3.8em; */
	height: 3.8em;
	width: 3.8em;
	border-radius: 50%;
	display: inline-block;
	margin-right: 0.6em;
	
	/* box-shadow: 0 0 0 4px rgba(0,125,250,.2); */
	/* border: 1px solid #0071e3;; */
}

.user .name {
	margin-bottom: 1px;
	max-width: 120px;
	margin-top: 8px;
}

.users .user .icloud {
	color: inherit;
	text-decoration: none;
}

/* NETWORK */

.user .fullname,
.network .ip {
	font-size: 16px !important;
	font-weight: 500;
	max-width: 120px;
	margin-bottom: 3px;
	display: block;
}

.network .manufacturer {
	max-width: 110px;
	display: inline-block;
	color: rgba(var(--font-color), .6);
	font-size: 12px;
	letter-spacing: -0.002em;
	margin-top: 15px;
}

.network .hostname {
	max-width: 100px;
}

.network .details {
	text-align: center;
	margin-bottom: 10px;
}

.network .ip {
	font-size: 15px !important;
	display: inline-block;
	margin-top: -3px;
	margin-bottom: -1px;
}

.network .icon-container {
	display: inline-block;
	display: flex;
	justify-content: center;
	align-items: center;
	/* margin-right: 8px; */
}

.network .icon {
	padding: 15px;
	border: 1px solid rgb(var(--font-color), .3);
	border-radius: 15px;
	max-width: 90px;
	max-height: 90px;
}

@media (max-width: 400px) {

	.user .name,
	.user .fullname,
	.network .manufacturer,
	.network .ip,
	.network .hostname {
		max-width: 200px !important;
	}

	.services .icon {
		max-width: 3.5em;
	}

	.application .icon,
	.find .icon-device {
		max-width: 4em;
		margin-bottom: 0.3em;
	}
}

/* STATUS */

.status {
	display: block;
}

.status .icon,
.status .image {
	width: 7px;
	margin-right: 4px;
	vertical-align: middle;
	display: inline-block;
}

.status .image {
	width: 12px;
}


#device .status .text {
	display: block;
	/* vertical-align: middle; */
	margin-top: 2px;
	color: rgba(var(--font-color), .6);
	font-size: 13px;
	letter-spacing: -0.002em;
	/* line-height: 0; */
}

#devices .details .subtitle,
#software .details .subtitle {
	display: block;
	font-size: 14px;
	letter-spacing: -0.002em;
}

#authorise h1 {
	font-size: 30px;
	font-weight: 550;
}

remoto-auth .credentials {
	min-height: 106px;
	max-width: 300px;
	position: relative;
	margin-bottom: 15px;
	margin: 0 auto;
}

remoto-auth .credentials {
	margin-bottom: 20px;
}

remoto-auth {
	/* max-width: 300px; */
	position: relative;
	flex: 1;
}

remoto-auth input[type=text],
remoto-auth input[type=password] {
	direction: ltr;
	color: rgba(var(--font-color));
	margin: 0;
	border: 1px solid rgba(var(--invert), .3);
	background-color: transparent;
	text-overflow: ellipsis;
	font-size: 17px;
	line-height: 1.23536;
	font-weight: 400;
	letter-spacing: -.022em;
	font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
	width: 100%;
	height: 3.29412rem;
	border-radius: 12px;
	border-width: 1px;
	border-style: solid;
	box-sizing: border-box;
	padding: 1.05882rem .94118rem 0;
	text-align: left;
	appearance: none;
	padding-right: 43px;
}

remoto-auth input[type=text]:focus,
remoto-auth input[type=password]:focus {
	/* border-color: #0071e3; */
	/* box-shadow: 0 0 0 4px rgba(0, 125, 250, .6); */
	outline: none;
}

remoto-auth .username,
remoto-auth .password {
	position: relative;
	margin: 0;
	box-shadow: none;
	border: 0;
	border-radius: 6px;
	border-color: transparent;
}

remoto-auth .password .form-cell {
	position: relative;
	-webkit-transition: height .2s linear;
	-o-transition: height .2s linear;
	transition: height .2s linear;
}

remoto-auth .password .form-cell {
	height: 0;
	overflow: hidden;
}

remoto-auth .password .field-password {
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.show-password .username .field-username {
	padding-right: 10px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.show-password .password .form-cell {
	height: 53px;
}

remoto-auth .placeholder {
	z-index: 3;
	position: absolute;
	pointer-events: none;
	transition-timing-function: ease-in;
	transition-duration: .125s;
	white-space: nowrap;
	overflow: hidden;
	max-width: calc(100% - 32px);
	left: 1rem;
}

remoto-auth .placeholder-small {
	/* color: #86868c; */
	/* color: #6e6e73; */
	color: rgba(var(--font-color), .8);
	font-size: 12px;
	line-height: 1.33337;
	font-weight: 400;
	letter-spacing: -.01em;
	font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
	top: .58824rem;
}

remoto-auth .placeholder-large {
	/* color: #86868b; */
	/* color: #6e6e72; */
	color: rgba(var(--font-color), .5);
	top: 1.05882rem;
	font-size: 17px;
	line-height: 1.23536;
	font-weight: 400;
	letter-spacing: -.022em;
	font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

remoto-auth .icon {
	font-family: shared-icons;
	display: inline-block;
	font-weight: 400;
	font-style: normal;
	speak: none;
	text-decoration: inherit;
	text-transform: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

remoto-auth .icon-continue {
	font-size: 23px;
	color: rgba(var(--invert), .4);
	vertical-align: middle;
}

remoto-auth .icon-continue:before {
	content: "\f127";
}

remoto-auth .submit {
	transition-timing-function: ease-in;
	transition-duration: .125s;
	animation: fade-in .5s ease-in-out;
	margin: 0;
	position: absolute;
	border: 1px solid transparent;
	background: transparent;
	outline: none;
	cursor: pointer;
	right: 10px;
	padding: 0 1px 0 2px;
	z-index: 101;
}

remoto-auth .submit {
	top: 12px;
}

remoto-auth .submit-small {
	top: 20px;
}

.show-password .submit {
	top: 68px;
}

.show-password .submit-small {
	top: 73px;
}


@-webkit-keyframes autofill {

	0%,
	100% {
		color: rgb(var(--font-color));
		background: rgb(var(--systemYellow), .05);
	}
}

remoto-auth input:-webkit-autofill {
	-webkit-animation-delay: 1s !important;
	/* Safari support - any positive time runs instantly */
	-webkit-animation-name: autofill !important;
	-webkit-animation-fill-mode: both !important;
}










/* desktops */

.desktops {

	/* display: flex; */
	/* flex-wrap: nowrap; */
	/* gap: 25px; */
}

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

.desktops .horizontal_scroll {
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	/* width: 100%; */
	white-space: nowrap;	
	padding: 0 25px;
	padding-bottom: 25px;
}

.desktops .current_application {
	font-size: 18px;
}

.desktops .background-image:last-child {
	margin-right: 0px;
}

.desktops .background-image {
	scroll-snap-align: center;
	margin-right: 40px;
	
	display: inline-block;
	border-radius: .375rem;
	background-size: cover;
	background-position: center;
	/* width: calc(512px / 1.4); */
	width: 100%;
	/* max-width: 200px; */
	height: calc(288px / 1.6);
	/* width: 10em; */
	/* height: 12em; */
}

.desktops .user {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin-bottom: 5px;
	/* position: absolute; */
	/* top: 0; */
	/* right: 0; */
	/* margin: -25px; */
}

.desktops .accessed_date {
	color: rgba(var(--font-color), .8);
	line-height: normal;
	font-size: 13px;
}

.desktops .users_live_activity {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

.desktops .users_live_activity .background-image {
	display: inline-block;
}

.desktops .toast .current_application {
	display: block;
	line-height: normal;
	margin-top: 4px;
	max-width: 14em;
}

.desktops .toast .current_user {
	display: block;
	margin-bottom: 5px;
	color: rgba(var(--font-color), .6);
}

@supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
	.desktops .toast {
		--tw-backdrop-blur: blur(15px);
		-webkit-backdrop-filter: var(--tw-backdrop-blur);
		backdrop-filter: var(--tw-backdrop-blur);

		box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px hsla(0, 0%, 100%, .2), 0 5px 15px 0 rgba(0, 0, 0, .2);
	
		height: 100%;
		width: 100%;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		position: relative;
		
		border-radius: .4rem;
		--tw-bg-opacity: .1;
		background-color: rgb(0, 0, 0, var(--tw-bg-opacity));
		padding: 1.5rem 2rem;
		/* font-size: .875rem; */
		/* line-height: 1.25rem; */
		color: rgb(255 255 255);
	}
}

.desktops .status_buttons_container {
	position: absolute;
	top: 0;
	left: 0;
	margin: 13px;
}

.desktops .status_buttons {
	display: flex;
	align-items: center;
	gap: 7px;
}
.desktops .status_buttons div {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
}
.desktops .status_buttons .quit {
	background: #fd5350;
}
.desktops .status_buttons .minimise {
	background: #fdb23a;
}
.desktops .status_buttons .maximise {
	background: #2cbf44;
}