
:root{
	--cy-navy:#0b2932;
	--cy-navy-dark:#071f26;
	--cy-teal:#208d7b;
	--cy-teal-bright:#29bba3;
	--cy-blue:#2385bd;

	--cy-bg:#f3f6f7;
	--cy-surface:#ffffff;
	--cy-border:#dce4e7;
	--cy-border-dark:#cad5d9;

	--cy-text:#17242b;
	--cy-muted:#66747c;

	--cy-success:#27805f;
	--cy-warning:#a37413;
	--cy-danger:#ad4048;
	--cy-info:#3675a5;

	--cy-sidebar:238px;

	--cy-shadow:
		0 2px 8px rgba(7,31,38,.035),
		0 10px 28px rgba(7,31,38,.045);

	--cy-shadow-hover:
		0 6px 16px rgba(7,31,38,.06),
		0 18px 34px rgba(7,31,38,.07);
}

*{
	box-sizing:border-box;
}

html{
	background:var(--cy-bg);
}

body{
	margin:0!important;

	min-height:100vh;

	background:
		radial-gradient(
			circle at 95% 0,
			rgba(41,187,163,.055),
			transparent 30rem
		),
		var(--cy-bg)!important;

	color:var(--cy-text)!important;

	font-family:
		Inter,
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif!important;

	-webkit-font-smoothing:antialiased;
}

a{
	color:#167666;
	text-underline-offset:3px;
}

a:hover{
	color:var(--cy-blue);
}

h1,
h2,
h3,
h4{
	color:var(--cy-text);
	letter-spacing:-.018em;
}

.muted,
small{
	color:var(--cy-muted);
}


/* BRAND */

.cy-brand-lockup{
	display:flex!important;
	align-items:center;

	gap:10px;

	margin:0 0 12px!important;
	padding:9px 8px!important;

	border:0!important;

	background:transparent!important;
	color:#fff!important;

	text-decoration:none!important;
}

.cy-brand-lockup:hover{
	background:rgba(255,255,255,.055)!important;
	color:#fff!important;
}

.cy-brand-mark{
	display:block;

	width:40px;
	height:40px;

	flex:0 0 40px;
}

.cy-brand-copy{
	display:flex;
	flex-direction:column;

	min-width:0;

	line-height:1;
}

.cy-brand-name{
	color:#fff;

	font-size:16px;
	font-weight:850;

	letter-spacing:.08em;
}

.cy-brand-product{
	margin-top:5px;

	color:#8dd7c9;

	font-size:10px;
	font-weight:750;

	letter-spacing:.16em;

	text-transform:uppercase;
}


/* DESKTOP NAV */

@media(min-width:1180px){

	body.cy-has-nav{
		padding-left:var(--cy-sidebar)!important;
	}

	body > .cy-nav{
		position:fixed!important;
		z-index:1000!important;

		inset:0 auto 0 0!important;

		width:var(--cy-sidebar)!important;
		max-width:none!important;
		height:100vh!important;

		margin:0!important;
		padding:16px 12px!important;

		display:flex!important;
		flex-direction:column!important;
		align-items:stretch!important;

		gap:4px!important;

		overflow-y:auto;

		border:0!important;
		border-radius:0!important;

		background:
			radial-gradient(
				circle at 30% 0,
				rgba(41,187,163,.13),
				transparent 19rem
			),
			linear-gradient(
				180deg,
				var(--cy-navy),
				var(--cy-navy-dark)
			)!important;

		box-shadow:
			8px 0 30px
			rgba(7,31,38,.07)!important;
	}

	body > .cy-nav >
	a:not(.cy-brand-lockup){
		position:relative;

		display:flex!important;
		align-items:center!important;

		min-height:41px;

		padding:9px 12px!important;

		border:
			1px solid transparent!important;

		border-radius:10px!important;

		background:transparent!important;

		color:#c9dadd!important;

		font-size:13px!important;
		font-weight:650!important;

		text-decoration:none!important;
	}

	body > .cy-nav >
	a:not(.cy-brand-lockup):hover{
		color:#fff!important;

		background:
			rgba(255,255,255,.06)!important;
	}

	body > .cy-nav >
	a.is-active:not(.cy-brand-lockup){
		color:#fff!important;

		background:
			linear-gradient(
				90deg,
				rgba(41,187,163,.19),
				rgba(35,133,189,.07)
			)!important;
	}

	body > .cy-nav >
	a.is-active:not(.cy-brand-lockup)::before{
		content:"";

		position:absolute;

		left:0;
		top:9px;
		bottom:9px;

		width:3px;

		border-radius:99px;

		background:
			var(--cy-teal-bright);
	}

	body > .cy-nav form{
		margin-top:auto!important;

		padding-top:14px!important;
	}

	body > .cy-nav form button{
		width:100%!important;

		border-color:
			rgba(255,255,255,.08)!important;

		background:
			rgba(255,255,255,.055)!important;

		color:#dce8ea!important;
	}

	body > main{
		width:min(
			1440px,
			calc(100% - 40px)
		)!important;

		max-width:none!important;

		margin:
			20px
			auto
			50px!important;
	}
}


/* MOBILE NAV */

@media(max-width:1179px){

	body > .cy-nav{
		position:sticky!important;
		z-index:1000!important;

		top:0!important;

		width:100%!important;
		max-width:none!important;

		margin:0!important;
		padding:7px 9px!important;

		display:flex!important;
		align-items:center!important;

		gap:5px!important;

		overflow-x:auto;

		border:0!important;
		border-radius:0!important;

		background:
			var(--cy-navy)!important;

		box-shadow:
			0 3px 14px
			rgba(7,31,38,.09)!important;

		scrollbar-width:none;
	}

	body > .cy-nav::-webkit-scrollbar{
		display:none;
	}

	.cy-brand-lockup{
		flex:0 0 auto;

		margin:0 5px 0 0!important;
		padding:4px!important;
	}

	.cy-brand-mark{
		width:31px;
		height:31px;

		flex-basis:31px;
	}

	.cy-brand-name{
		font-size:13px;
	}

	.cy-brand-product{
		display:none;
	}

	body > .cy-nav >
	a:not(.cy-brand-lockup){
		flex:0 0 auto;

		padding:7px 9px!important;

		border-radius:8px!important;

		background:transparent!important;

		color:#d8e4e6!important;

		font-size:11px!important;
		font-weight:650!important;

		text-decoration:none!important;
	}

	body > .cy-nav >
	a.is-active:not(.cy-brand-lockup){
		color:#fff!important;

		background:
			rgba(41,187,163,.18)!important;
	}

	body > .cy-nav form{
		flex:0 0 auto;
		margin-left:auto!important;
	}

	body > main{
		width:min(
			1100px,
			calc(100% - 20px)
		)!important;

		margin:
			12px
			auto
			35px!important;
	}
}


/* CARDS */

.card{
	border-color:
		var(--cy-border)!important;

	border-radius:14px!important;

	background:#fff!important;

	box-shadow:
		var(--cy-shadow)!important;
}

.metric{
	border-color:
		var(--cy-border)!important;

	border-radius:12px!important;

	background:#fff!important;
}


/* BUTTONS */

button,
.button,
.action,
input[type="submit"]{
	min-height:39px;

	border:
		1px solid
		#167666!important;

	border-radius:9px!important;

	background:
		linear-gradient(
			180deg,
			#248f7d,
			#197565
		)!important;

	color:#fff!important;

	font-family:inherit!important;
	font-weight:700!important;

	cursor:pointer;

	transition:
		transform .12s ease,
		box-shadow .12s ease;
}

button:hover,
.button:hover,
.action:hover,
input[type="submit"]:hover{
	transform:translateY(-1px);

	background:
		linear-gradient(
			180deg,
			#2a9d89,
			#197565
		)!important;

	box-shadow:
		0 5px 13px
		rgba(22,118,102,.17);
}


/* FORMS */

label{
	color:#405058!important;

	font-size:12px!important;
	font-weight:700!important;
}

input,
select,
textarea{
	width:100%;

	min-height:40px;

	padding:9px 10px!important;

	border:
		1px solid
		var(--cy-border-dark)!important;

	border-radius:9px!important;

	outline:none!important;

	background:#fff!important;

	color:
		var(--cy-text)!important;

	font-family:inherit!important;
	font-size:13px!important;
}

textarea{
	min-height:92px;
	resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
	border-color:
		var(--cy-teal-bright)!important;

	box-shadow:
		0 0 0 3px
		rgba(41,187,163,.12)!important;
}


/* TABLES */

.table-wrap{
	overflow:auto;

	border:
		1px solid
		var(--cy-border);

	border-radius:11px;

	background:#fff;
}

table{
	background:#fff!important;

	border-collapse:
		collapse!important;
}

thead th{
	padding:10px 9px!important;

	background:#f2f7f5!important;

	color:#435159!important;

	border-bottom:
		1px solid
		var(--cy-border)!important;

	font-size:10px!important;
	font-weight:800!important;

	letter-spacing:.045em;

	text-transform:uppercase;
}

tbody td{
	padding:10px 9px!important;

	border-bottom:
		1px solid
		#edf1f2!important;
}

tbody tr:hover td{
	background:#fafcfc!important;
}


/* ACCORDIONS */

details{
	overflow:hidden;

	margin-top:8px;

	border:
		1px solid
		var(--cy-border)!important;

	border-radius:10px!important;

	background:#fff!important;
}

summary{
	position:relative;

	padding:
		11px
		35px
		11px
		13px!important;

	color:#304148;

	font-size:13px;
	font-weight:750;

	cursor:pointer;

	list-style:none;
}

summary::-webkit-details-marker{
	display:none;
}

summary::after{
	content:"+";

	position:absolute;

	right:13px;
	top:50%;

	transform:
		translateY(-50%);

	color:#167666;

	font-size:18px;
}

details[open] summary::after{
	content:"–";
}

details[open] summary{
	border-bottom:
		1px solid
		var(--cy-border);

	background:#f7faf9;
}


/* EMPTY STATES */

.empty{
	border-color:
		#d4dfe2!important;

	border-radius:11px!important;

	background:#f8fbfa!important;

	color:
		var(--cy-muted)!important;
}

.notice{
	border-radius:11px!important;
}


/* PROJECT CONTROL */

.pc-main-v161 .pc-hero{
	background:
		radial-gradient(
			circle at 90% 20%,
			rgba(80,220,194,.18),
			transparent 17rem
		),
		linear-gradient(
			135deg,
			#0d302c,
			#145247
		)!important;

	box-shadow:
		0 13px 34px
		rgba(10,55,48,.12)!important;
}

.pc-main-v161 .pc-hero h1{
	color:#fff!important;
}

.pc-main-v161 .ring{
	background:
		conic-gradient(
			var(--cy-teal-bright)
			calc(var(--p)*1%),
			#e8eeec 0
		)!important;
}

.pc-main-v161 .fill{
	background:
		linear-gradient(
			90deg,
			var(--cy-teal),
			var(--cy-teal-bright)
		)!important;
}

.pc-main-v161 .kpi:hover,
.pc-main-v161 .site:hover{
	box-shadow:
		var(--cy-shadow-hover)!important;
}


/* LOGIN */

body.cy-login-page{
	min-height:100vh!important;

	display:grid!important;

	grid-template-columns:
		minmax(320px,44%)
		minmax(420px,56%)!important;

	padding:0!important;

	background:#fff!important;
}

.cy-login-brand-panel{
	position:relative;

	min-height:100vh;

	display:flex;
	flex-direction:column;
	justify-content:center;

	padding:
		clamp(
			38px,
			6vw,
			82px
		);

	overflow:hidden;

	background:
		radial-gradient(
			circle at 25% 20%,
			rgba(41,187,163,.22),
			transparent 24rem
		),
		radial-gradient(
			circle at 100% 100%,
			rgba(35,133,189,.15),
			transparent 26rem
		),
		linear-gradient(
			145deg,
			var(--cy-navy),
			var(--cy-navy-dark)
		);

	color:#fff;
}

.cy-login-brand-logo{
	width:70px;
	height:70px;

	margin-bottom:19px;
}

.cy-login-brand-panel h1{
	margin:0;

	color:#fff;

	font-size:
		clamp(
			2rem,
			4vw,
			3.2rem
		);

	font-weight:850;

	letter-spacing:.075em;
}

.cy-login-brand-panel h2{
	margin:7px 0 18px;

	color:#76d9c7;

	font-size:1rem;

	letter-spacing:.16em;

	text-transform:uppercase;
}

.cy-login-brand-panel p{
	max-width:470px;

	color:#cadcde;

	font-size:15px;
	line-height:1.65;
}

.cy-login-brand-footer{
	position:absolute;

	left:
		clamp(
			38px,
			6vw,
			82px
		);

	bottom:30px;

	color:#7f9ca1;

	font-size:11px;
}

body.cy-login-page > main{
	align-self:center;

	width:min(
		470px,
		calc(100% - 50px)
		)!important;

	margin:auto!important;
}

body.cy-login-page main .card{
	padding:28px!important;

	border:0!important;
	box-shadow:none!important;
}


/* LOGIN MOBILE */

@media(max-width:850px){

	body.cy-login-page{
		display:block!important;

		background:
			var(--cy-bg)!important;
	}

	.cy-login-brand-panel{
		min-height:auto;

		padding:
			26px
			22px
			30px;
	}

	.cy-login-brand-logo{
		width:51px;
		height:51px;

		margin-bottom:11px;
	}

	.cy-login-brand-panel h1{
		font-size:1.7rem;
	}

	.cy-login-brand-panel h2{
		font-size:.82rem;
	}

	.cy-login-brand-panel p{
		margin-bottom:0;

		font-size:13px;
	}

	.cy-login-brand-footer{
		display:none;
	}

	body.cy-login-page > main{
		width:min(
			500px,
			calc(100% - 20px)
		)!important;

		margin:
			18px
			auto!important;
	}
}


/* MOBILE FIELD */

@media(max-width:650px){

	.card{
		padding:14px!important;
	}

	button,
	.button,
	.action,
	input[type="submit"]{
		min-height:44px;
	}

	input,
	select{
		min-height:44px;
	}
}


/* ACCESSIBILITY */

:focus-visible{
	outline:
		3px solid
		rgba(41,187,163,.27);

	outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){

	*,
	*::before,
	*::after{
		transition:none!important;
		animation:none!important;
		scroll-behavior:auto!important;
	}
}
