/**
	@Author:	Paul Strandoo
	@Date:		Sept 2026
	@Notes:		Flat Glass Solutions: Portal styles
*/

:root {
	--display-font: "Raleway", sans-serif;
	--body-font: "Raleway", sans-serif;
	--fw-light: 300;
	--fw-medium: 400;
	--fw-semibold: 600;
	--fw-bold: 700;
	
	--brand-light: #006185;
	--brand-dark: #01364a;
	--brand-pale: #a2bfc9;
	--white: #ffffff;
	
	--inner-wide: 1500px;
    --inner-very-wide: 1970px;
    --inner-full: 100%;
}
html, body {
	height: 100%;   /* flex-grow needs a height to grow into */
	margin: 0;
	}
	
p, li, td {
	font-size: 1.1rem;
	}
	
h2,.h2 {}
h3,.h3 {
	font-size: 1.3rem;
	font-weight: var(--fw-bold);
	color: var(--brand-dark);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}
h4,.h4,
.sidebar-box h3 {
	font-size: 1.15rem;
	font-weight: var(--fw-bold);
	color: var(--brand-dark);
	text-transform: uppercase;
	letter-spacing: 0.04em; 
	}

.page-wrapper {
	display: flex;
	flex-direction: column;
	position: relative;
	padding-top: 0;
	background: #fff;
	min-height: 100%;
	min-height: 100vh;
	/* z-index: 2; */
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	}

.inner-wide {
	max-width: var(--inner-wide);
	}
	
.page-header,
.page-header.small {
	position: sticky;
	top: 0;
	margin: 0;
	background: var(--brand-light);
	height: auto;
	}
.page-header.menu-is-open {
	height: 100%;
	background: none;
	}
	
.page-header .inner {
	display: flex;
	justify-content: space-between;
	}
.small .inner {
	height: auto;
	}
	
.logowrap,
.small .logowrap {
	width: 240px;
	float: none;
	padding: 0;
	margin: 20px 1em 20px 0;
	}
	
.cd-main-nav-wrapper {
	flex: 1;
	text-align: right;
	}
.cd-main-nav {
	padding: 20px 0 10px;
	}
.menu-is-open .cd-main-nav {
	height: 100vh;
	}
.page-header .button {
	margin-right: 10px;
	}
	
.support-button {
	display: none;
	}
@media (min-width: 1024px) {
	.support-button {
		display: inline-block;
		}
}


/* content */
.main-section {
	margin-top: 2em;
	}
.content-row {
	display: flex;
	flex-direction: column;
	gap: 2em;
	}

@media (min-width: 720px) {
	.content-row {
		flex-direction: row;
		gap: 4%;
		}
	.row-reverse {
		flex-direction: row-reverse;
		}
	.content-row-main {
		flex: 2;
		}
	.content-row-sidebar {
		flex: 1;
		max-width: 380px;
		height: auto;
		}
}

.sidebar.sticky2 {
	position: sticky;
	top: 200px;
	}
.sidebar-box {
	padding: 1em 1.5em;
	margin-bottom: 1em;
	border: 1px solid var(--brand-dark);
	}
.sidebar-box h3 {
	padding-bottom: 0.35em;
	margin-bottom: 0.65em;
	border-bottom: 2px solid var(--brand-pale);
	}
.sidebar-box h4 {
	font-size: 1.5rem;
	margin: 0 0 0.5em;
	}
	
.content-row img {
	max-width: 100%;
	}

/* 'table' layouts */
.table {
	--cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--cols), 1fr);
	gap: 0;
	}
	
.table.col-3 { --cols: 3; }
.table.col-4 { --cols: 4; }
.table.col-5 { --cols: 5; }

.machine-list {
	grid-template-columns: 2fr 1fr 3fr 1fr 1fr;
	}
.machine-row { 
	display: contents;
	}
.machine-row.header {
	font-weight: var(--fw-semibold);
	}
	
@media (max-width: 720px) { 
	.table { 
		--cols: 1; 
		gap: 1rem;
		}
	.machine-list {
		grid-template-columns: 1fr;
		}
	.machine-row  {
		/*grid-template-columns: 1fr;  /* stack instead of wrap */
		}
	.machine-row.header {
		display: none;
		}
	.machine-row {
		display: grid; /* row is its own 2-col grid now */
		grid-template-columns: 5rem 1fr; /* label column, value column */
		gap: 0;
		padding: 0.5rem 0;
		border-bottom: 1px solid #ddd;
		}
	.machine-row > div {
		display: contents; /* let the label/value below join this row's grid */
		}
	.machine-row > div::before {
		content: attr(data-label);
		font-weight: bold;
		}
}
@media (min-width: 721px) {
	.machine-row > div,
	.machine-row.header > div {
		padding: 0.5em 0;
		border-bottom: 1px solid #ddd;
		}
}
	
.machine-section {
	display: none;
	}
.machine-section.active {
	display: block;
	}
.tab-link,
.tabs-navigation a {
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	}
.tab-link.active { 
	font-weight: var(--fw-bold);
	}
	
.back-inventory {
	padding: 0.5rem 0 0;
	margin-top: 0.4em;
	border-top: 2px solid var(--brand-pale);
	}
	
.Inputfield_profile_email {
	width: 100% !important;
	}
.Inputfield_profile_company {
	margin-left: 0 !important;
	}
.Inputfield_profile_contact_person.InputfieldColumnWidthFirst {
	margin-left: 1% !important;
	clear: none;
	}
@media (max-width: 720px) {
	.InputfieldColumnWidth {
		width: 100% !important;
		}
	.Inputfield_profile_contact_person.InputfieldColumnWidthFirst,
	.InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) {
		margin-left: 0 !important;
		}
}
	
p strong {
	font-weight: var(--fw-bold);
	}
.overflow-visible {
	overflow: visible;
	}
.overflow-hidden {
	overflow: hidden;
	}
	
	
.button-rev {
	font-weight: var(--fw-bold);
	color: var(--brand-light);
	background: var(--white);
	border: 2px solid var(--white);
	}
.button-rev:hover {
	color: var(--white);
	background: var(--brand-light);
	}
.ui-button {
	margin: 10px 0;
	}

.page-footer,
footer {
	color: var(--brand-dark);
	background: #fff;
	background: var(--brand-dark);
	margin-top: auto;
	}
	
	/* ----- [ Webinar Form Modal ] ----------------------------- */
.modal {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 0;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.75);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	opacity: 0;
	visibility: hidden;
	}
.modal.is-open {
	opacity: 1;
	visibility: visible;
	height: 100%;
	overflow: auto;
	}
.modal-body {
	position: relative;
	padding: 0;
	margin: 30px 0;
	border-radius: 1em;
	background: #fff;
	max-width: 780px;
	max-height: 96vh;
	overflow: auto;
	width: 100%;
	}
.modal-close-button {
	position: absolute;
	/*position: fixed;*/
	height: 36px;
	width: 36px;
	right: 10px;
	top: 10px;
	padding: 6px;
	border-radius: 50%;
	color: #fff;
	background: #000;
	cursor: pointer;
	}
.modal-close-button.rev {
	color: #000;
	background: #fff;
	
	}
.modal-close-button.rev svg {
	}
.modal-close-button:hover {
	transform: scale(1.1);
	}
	
.qr-code-wrapper {
	margin: 2em 0;
	}
.qr-logo-wrapper {
	max-width: 260px; 
	margin: 2em 0;
	}
	
@media only screen and (min-width: 400px) {
	.modal-body {
		padding: 1.5em;
		margin: 0;
		}
}

/* ----- [ Print ] ----- */
@media print {
    header, footer, aside, form,
    .page-header, .page-footer {
        display: none;
    	}
	section {
		width:100%!important;
		padding:0!important;
		margin:0!important;
		width: 800px!important;
		}
	img {
		max-width: 500px !important;
		max-height: 300px !important;
		}
	h1 {
		font-size: 24pt;
		margin: 0 !important;
		padding: 0 !important;
		}
	.hero {
		min-height: 100px!important;
		height: auto;
		}
	.image {
		display: none;
		}
}
@page {
	margin: 2cm;
}
@page:first {
    margin: 0cm;
}
@page:last {
    margin: 5cm;
}
@page:left {
    margin: 2cm 1.5cm 2cm 2cm;
}
@page:right {
    margin: 2cm 2cm 2cm 1.5cm;
}
@media print {
  a:after {
    content: "("attr(href)")";
  }
}