/*
    Created on : Jun 27, 2019, 4:15:49 PM
    Author     : ninu
*/

:root {
	--color-primary: #555555;
	--color-primary-dark: #333333;
	--color-primary-light: #777777;
}

/* NgxUiLoader spinner/progress bar color overrides */
.ngx-foreground-spinner .sk-child::before,
.ngx-foreground-spinner .ball-scale > div,
.ngx-foreground-spinner .sk-chase-dot::before,
.ngx-foreground-spinner div,
.ngx-foreground-spinner .line-scale > div,
.ngx-foreground-spinner .line-scale-pulse-out > div {
	background-color: var(--color-primary) !important;
}
.ngx-background-spinner .sk-child::before,
.ngx-background-spinner div {
	background-color: var(--color-primary) !important;
}
.ngx-progress-bar {
	background-color: var(--color-primary) !important;
}

/* --- A. Brand ring spinner (replaces Materialize preloader-wrapper) --- */
.brand-spinner {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: brand-spin 0.65s linear infinite;
}
@keyframes brand-spin {
	to { transform: rotate(360deg); }
}
.brand-spinner-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px 0;
}
.loading-message {
	font-size: 0.9rem;
	color: #666;
	margin: 0;
}

* {
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
}

img {
	max-width: 100%;
	height: auto;
}

body {
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
}

.lhs-grid {
	width: 37%;
	float: left;
	background-color: var(--color-primary);
	position: relative;
}

.lhs-grid h1 {
	padding: 0 10px;
}

.rhs-grid {
	float: left;
	width: 63%;
	padding: 2% 0 3% 0;
}

.have-an-account {
	text-align: center;
	position: absolute;
	width: 100%;
	margin-top: -47px;
}

.have-an-account h1 {
	color: #fff;
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	line-height: 28px;
	margin: 0;
	padding: 0 0 15px 0;
}

.connexa-forms h1 {
	text-align: center;
	clear: both;
	font-size: 28px;
	line-height: 30px;
	text-decoration: underline;
	padding: 0 4% 2% 4%;
}

.connexa {
	margin: 0 auto;
	width: 60%;
	text-align: center;
}

.connexa img {
	max-width: 100%;
	height: auto;
	max-height: 110px;
	margin-top: 10px;
}

.connexa a {
	float: left;
	width: 100%;
	height: 80px;
	background-size: contain;
	margin-top: 10px;
}

.new-reg-form {
	padding: 0 10% 0 10%;
	float: left;
	width: 100%;
}

.new-reg-form h3 {
	clear: both;
	width: 100%;
	text-align: center;
	font-size: 22px;
	line-height: 24px;
	margin: 38px 0 10px 0;
	display: inline-block;
}

h2,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;

	border-bottom: 5px solid black;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;

	border-bottom: 5px solid black;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;

	border-bottom: 5px solid black;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent; 

	border-bottom: 5px solid black;
}

.sign-in-form {
	width: 75%;
	margin: 0 auto;
	text-align: center;
}

.connexa-forms h2 {
	text-align: center;
	clear: both;
	font-size: 28px;
	line-height: 27px;
	padding: 0 4% 2% 4%;
}

.signin .connexa a {
	background-size: contain;
	margin-top: 8%;
}

.signin .connexa img {
	max-height: 145px;
	margin-top: 8%;
}

.pos-inherit {
	position: inherit !important;
}

.w-100 {
	width: 100%;
}

.w-50 {
	width: 50%;
}

.w-25 {
	width: 25%;
}

h3 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
	margin: 0;
	padding: 0 0 15px 0;
}

.brand-logo {
	/*width: 60px;*/
	margin: 0 5% 10px 0;
}

.d-inline-block {
	display: inline-block;
}

.navigation {
	border-top: 3px solid var(--color-primary);
	padding: 0 15px 10px 0;
	display: inline-block;
	width: 100%;
	background: #fff;
}

.dashboard {
	padding: 15px 0;
}

.navigation ul.links {
	margin: 0 10px;
	padding: 0;
	float: left;
}

.navigation ul.links li {
	list-style-type: none;
	float: left;
	width: auto;
	line-height: 50px;
}

.navigation ul.links li a {
	color: #333;
	font-size: 16px;
}

.nav-selct.input-field {
	width: 150px;
	margin: 0 15px;
	float: left;
}

.nav-grid2 {
	float: left;
	padding: 7px 0 0 0;
}

.navigation .input-field {
	margin-top: 0;
	margin-bottom: 0;
}

.select-sm {
	width: 80px;
	margin-right: 15px;
}

.input-field.search {
	width: 180px;
}

.input-field.search input[type='search'] {
	margin-bottom: 0;
	padding-left: 28px;
}

.input-field.search .label-icon {
	top: 12px;
	left: 5px !important;
}

.input-field.search input[type='search'] ~ .mdi-navigation-close,
.input-field.search input[type='search'] ~ .material-icons {
	position: absolute;
	top: 9px;
	right: -25px;
}

.alert-icon {
	float: left;
	margin: 13px 15px 0 0;
	padding: 2px;
}

.nav-actions {
	float: right;
	padding-top: 35px;
}

.nav-actions a {
	color: #333;
	margin: 0 5px;
}

.connexa-forms.signin p {
	margin: 5% 0;
}

.connexa-forms.signin h3 {
	margin: 15px 0;
}

.nav-actions i {
	vertical-align: middle;
}

.content-section {
	padding: 25px 15px;
}

.content-section h1 {
	font-size: 25px;
	margin: 0;
	padding: 0 0 10px 0;
}

.add-device {
	float: left;
	width: 100%;
	font-weight: bold;
	margin-bottom: 2%;
}

.table-wraper {
	width: 100%;
	overflow-x: auto;
	margin-bottom: 20px;
}

.table-wraper .highlight th {
	background: rgba(242, 242, 242, 0.8);
}

.circle-icon {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: inline-block;
	margin: 0 3px;
}

.circle-icon.on {
	background: red;
}

.circle-icon.off {
	background: green;
}

.v-align-sub {
	vertical-align: sub;
}

.v-align-mid {
	vertical-align: middle;
}

.stat {
	vertical-align: super;
}

.alert-btn {
	border: 0;
	cursor: pointer;
}

.modal .modal-close i {
	font-weight: bold;
	font-size: 30px;
}

.modal .modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
}

.col-hb-space {
	padding: 0 3%;
}

.back-to {
	font-size: 23px;
	line-height: 30px;
	margin: 10% 0 15% 0;
}

.back-to i {
	margin-right: 5px;
}

.back-to a {
	color: #000;
}

aside ul.main {
	margin: 0 0 10% 0;
	padding: 0;
}

aside ul.main li {
	list-style-type: none;
	margin: 0;
	padding: 0 0 10% 0;
}

aside ul.main li label {
	font-size: 16px;
	color: #000;
	margin-right: 7px;
	font-weight: bold;
}

aside ul.main li .circle-icon {
	margin-bottom: -4px;
}

.sidebar-menu-icon {
	margin: -20px 0 20px 0;
}

.action-btns a {
	margin-bottom: 5px;
}

.box-w100 {
	float: left;
	width: 100%;
	padding: 15px 10px;
	position: relative;
	font-size: 13px;
	margin: 0 0 10px 0;
}

.alert-pos {
	position: absolute;
	top: 0;
	right: 0;
}

h4 {
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 25px;
}

.box-head {
	margin-bottom: 15px;
}

.circle-icon.small {
	width: 10px;
	height: 10px;
}

.box-body {
	margin: 10px 0 0 0;
}

aside {
	margin-bottom: 25px;
}

/* Spacing Class */
.mb-0 {
	margin-bottom: 0 !important;
}

.mb-10 {
	margin-bottom: 10px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.mt-25 {
	margin-top: 25px;
}

.box-v2-w100 {
	float: left;
	width: 100%;
	border: 1px solid #ebebeb;
	border-radius: 3px;
	font-size: 13px;
	margin-bottom: 10px;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
		0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.box-v2-w100 .box-head {
	padding: 5px 10px;
	margin: 0;
	font-size: 16px;
}

.box-v2-w100 .box-body {
	margin: 0;
	padding: 5px 10px;
}

aside {
	display: none;
}

.table-wrap {
	float: left;
	width: 100%;
	overflow-x: auto;
}

.box-shadow {
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
		0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

ul.main li label {
	font-size: 14px;
	color: #333;
}

ul.main li {
	color: #9e9e9e;
	padding: 0 0 10px 0;
}

.no-space-col {
	padding: 0 8px !important;
}

.hide-mob {
	display: none;
}

.show-mob {
	display: block;
}

.main-menu-sm .input-field.search {
	width: 85%;
	float: left !important;
}

.main-menu-sm .input-field input[type='search'] {
	width: 100%;
}

.main-menu-sm .select-sm.right {
	float: left !important;
	width: 220px;
}

.main-menu-sm .nav-actions a {
	float: left;
	width: 100%;
}

.main-menu-sm .nav-actions a:hover {
	background: #e7e7e7;
}

.mt-15 {
	margin-top: 15px !important;
}

i.x-small {
	font-size: 20px;
}

.collapsible-header.center-text {
	text-align: center;
	display: block;
}

.gauge-center {
	margin: 0 auto;
	display: table;
}

.custom-card .card-header {
	padding: 3px 15px;
	text-align: center;
}

.custom-card {
	padding-bottom: 15px;
}

.custom-card .card-content {
	max-height: 390px;
	overflow-y: auto;
}

.custom-card .card-header {
	background: var(--color-primary);
	color: #fff;
	border-left: 4px solid var(--color-primary-dark);
}

.lbl-rhs {
	color: #757575;
	font-size: 14px;
	float: left;
	width: 55%;
}

.custom-row,
.custom-card .card-content p {
	padding: 0 0 15px 0;
	color: #757575;
	display: flex;
}

.custom-row .lbl-lhs,
.custom-card .card-content p label.lbl-lhs {
	font-weight: bold;
	font-size: 14px;
	color: #333;
	width: 150px;
	display: inline-block;
	float: left;
	width: 45%;
}

.vtoggle-sm {
	display: block;
}

.vtoggle-lg {
	display: none;
}

.spacer {
	float: left;
	width: 100%;
	height: 97px;
}

/* September 19 */
.justify-content-center {
	-webkit-box-pack: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
}

.rad-lbl {
	border: 1px solid #333;
	padding: 10px 15px;
	text-align: center;
	font-weight: bold;
	color: #000;
	width: 150px;
}

.custom-del {
	position: relative;
	z-index: 20;
	text-align: center;
}

.custom-del p {
	display: inline;
	margin-left: 5px;
	margin-right: 5px;
}

.compcode2 {
	border: 0;
	width: 200px;
	padding: 0;
}

.select-rad {
	padding: 0 10px;
}
.d-flex {
	display: table;
	width: 100%;
}
[type='radio']:checked + span.comp-code::after,
[type='radio'].with-gap:checked + span.comp-code::after,
[type='radio'] + span.comp-code::before {
	margin-top: 35px !important;
}

th.center-text,
td.center-text {
	text-align: center !important;
}

@media only screen and (max-width: 1100px) {
	.navigation .col.l2.m12.s12.x12 {
		width: 100%;
	}

	.brand-logo {
		max-width: 240px;
	}
}

@media only screen and (max-width: 767px) {
	.connexa-forms h2 {
		font-size: 25px;
	}
}
@media only screen and (max-width: 650px) {
	.select-rad {
		margin: 0 auto;
		display: table;
		margin-bottom: 34px;
		width: 254px;
	}
}
@media only screen and (max-width: 600px) {
	.load-grid {
		padding: 0 !important;
	}
}

@media only screen and (max-width: 480px) {
	.have-an-account h1 {
		font-size: 20px;
		line-height: 22px;
	}
}

@media only screen and (max-width: 380px) {
	.brand-logo {
		max-width: 40%;
	}
}

@media only screen and (min-width: 480px) {
	.connexa {
		margin: 0 auto;
		width: 40%;
	}

	.connexa a {
		height: 80px;
	}

	.sign-in-form {
		width: 50%;
	}
}
@media only screen and (min-width: 650px) {
	.d-flex {
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
	}
}
@media only screen and (min-width: 768px) {
	.vtoggle-lg {
		display: block !important;
	}

	.vtoggle-sm {
		display: none;
	}

	.connexa {
		width: 35%;
	}

	.connexa a {
		height: 100px;
	}
}

@media only screen and (min-width: 992px) {
	.sign-in-form {
		width: 35%;
	}

	.connexa {
		width: 30%;
	}

	.connexa a {
		height: 110px;
	}
}

@media only screen and (min-width: 1100px) {
	.sidenav {
		display: none;
	}

	.hide-mob {
		display: block;
	}

	.show-mob {
		display: none;
	}

	.connexa {
		width: 25%;
	}

	.connexa a {
		height: 110px;
	}

	.signin .connexa a {
		height: 145px;
		margin-top: 12%;
	}

	.signin .connexa {
		width: 35%;
	}
}

@media only screen and (min-width: 1600px) {
	.signin .connexa a {
		height: 185px;
		margin-top: 8%;
	}

	.signin .connexa {
		width: 45%;
	}

	.connexa-forms h2 {
		font-size: 38px;
		line-height: 40px;
		margin-bottom: 3%;
	}

	.sign-in-form {
		width: 35%;
	}

	.form-control {
		height: 45px;
		line-height: 45px;
		margin-bottom: 15px;
	}

	.connexa-forms h1 {
		font-size: 32px;
		line-height: 35px;
		margin-bottom: 3%;
	}

	.connexa {
		width: 30%;
	}

	.connexa a {
		margin-bottom: 4%;
	}

	.have-an-account h1 {
		font-size: 32px;
		line-height: 34px;
	}
}

@media only screen and (min-width: 2000px) {
	.dashboard {
		margin: 0 auto;
		width: 1950px;
	}
}

/* Branding-aware button */
.btn-brand {
	background-color: var(--color-primary) !important;
	color: #fff !important;
}
.btn-brand:hover,
.btn-brand:focus {
	background-color: var(--color-primary-dark) !important;
	color: #fff !important;
}
.waves-effect.btn-brand .waves-ripple {
	background-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   UI POLISH — IoT / Industrial / AI aesthetic
   All colours via CSS custom properties — adapts to any brand
   ============================================================ */

/* --- 0. Page canvas --- */
body {
	background: #f5f6f8;
}
.content-section {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	margin: 16px;
	padding: 25px 20px;
}
/* Table header styling */
.table-wrap table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #666;
	font-weight: 500;
}

/* --- I. Helper classes --- */
.primary-text {
	color: var(--color-primary) !important;
}

.brand-tap-target {
	background-color: var(--color-primary) !important;
}

.btn-brand-flat {
	color: var(--color-primary) !important;
	background: transparent !important;
	box-shadow: none !important;
}
.btn-brand-flat:hover,
.btn-brand-flat:focus {
	background: rgba(0, 0, 0, 0.05) !important;
	color: var(--color-primary-dark) !important;
}

.brand-header-bg {
	background: var(--color-primary) !important;
	color: #fff !important;
	border: none !important;
	border-left: 4px solid var(--color-primary-dark) !important;
}

/* --- G. Global micro-transitions --- */
a,
button {
	transition: background-color 0.15s ease, color 0.15s ease,
		border-color 0.15s ease, box-shadow 0.15s ease;
}

/* --- A. Navigation bar --- */
.navigation {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.nav-actions a {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.nav-actions a:hover {
	color: var(--color-primary) !important;
}
.nav-actions a.router-link-active {
	color: var(--color-primary) !important;
	font-weight: 500;
}

/* --- B. Native <details> collapsible panels --- */
details.collapsible-panel {
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	margin: 0.5rem 0 1rem 0;
}
details.collapsible-panel > summary {
	display: flex;
	cursor: pointer;
	padding: 1rem;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-left: 4px solid var(--color-primary-dark);
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 14px;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}
details.collapsible-panel > summary::-webkit-details-marker {
	display: none;
}
details.collapsible-panel > .panel-body {
	padding: 2rem;
	background: #fff;
}
details.system-sec .row .col {
	padding: 0 !important;
}

/* --- C. Table row hover accent --- */
.table-wrap table tbody tr {
	border-left: 3px solid transparent;
	transition: border-left 0.15s ease, background 0.15s ease;
}
.table-wrap table tbody tr:hover {
	background: rgba(0, 0, 0, 0.025);
	border-left: 3px solid var(--color-primary);
}

/* --- D. Section title --- */
.content-section h1 {
	font-size: 22px;
	font-weight: 400;
	color: #333;
	letter-spacing: 0.5px;
	margin: 0 0 16px 0;
	padding: 0;
}

/* --- E. Online status pulse animation --- */
.circle-icon.green {
	position: relative;
}
@keyframes pulse-ring {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}
	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}
.circle-icon.green::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid #4caf50;
	animation: pulse-ring 1.4s ease-out infinite;
	pointer-events: none;
}

/* --- F. Monospace sensor values (dashboard only) --- */
.system-sec .lbl-rhs {
	font-family: 'Roboto Mono', 'Courier New', monospace;
}

/* --- H. Login page — input focus overrides Materialize green --- */
.input-field input:focus {
	border-bottom: 1px solid var(--color-primary) !important;
	box-shadow: 0 1px 0 0 var(--color-primary) !important;
}
.input-field input:focus + label {
	color: var(--color-primary) !important;
}

/* Login: card shadow on right panel form */
.connexa-forms.signin {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	padding: 24px 32px;
	max-width: 520px;
	margin: 0 auto;
	overflow: hidden;
}

/* Login: hero text on left panel */
.have-an-account h1 {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 300;
}

/* Login: diagonal slice on left panel */
.lhs-grid {
	position: relative;
	clip-path: polygon(0 0, 93% 0, 100% 100%, 0 100%);
}

/* Login: circuit-board trace overlay (Hero Patterns "Circuit Board" — CC BY 4.0, Steve Schoger) */
.lhs-grid::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 .1 2H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50.49l-48 48v49.51h-32v-16.1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9V114H5.59L30 89.59V64h-2v24.41L3.41 113.41H0V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 4.9V3.1A3.02 3.02 0 0 0 3.1 0H5.9zm294.2 0A5 5 0 0 1 304 4.9V3.1A3.02 3.02 0 0 0 300.9 0h-.8zM0 92.1A5.02 5.02 0 0 1 6 97 5 5 0 0 1 0 101.9V92.1z' fill='rgba(255,255,255,0.1)' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-size: 304px 304px;
	pointer-events: none;
	z-index: 0;
}

/* Keep left-panel content above the dot overlay */
.have-an-account {
	position: absolute;
	z-index: 1;
}