/* Global CSS variables */
:root {
  --spacing-company: 3rem;
  --font-weight: 400;
  --border-radius: 0;
/*
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 1rem;
*/
}
html {
    overflow-y: scroll;
}
/* Typography */
h2,
h3,
hgroup> :last-child {
  font-weight: 200;
}

small {
  color: var(--muted-color);
}

/* Header */
.hero {
  background-color: #394046;
  background-image: url("../img/433104671_17910202694923096_3046584220600920577_n.jpg");
  background-position: center;
  background-size: cover;
  margin-bottom: var(--spacing-company);
}

header {
  padding: var(--spacing-company) 0;
}

header hgroup> :last-child {
  color: var(--pico-h1-color);
}

header hgroup {
  margin-bottom: var(--spacing-company);
}

/* Nav */
summary[role="link"].contrast:is([aria-current], :hover, :active, :focus) {
  background-color: transparent;
  color: var(--contrast-hover);
}

nav {
	position: sticky;
	top: 0;
	background: #13171f;
	--pico-nav-element-spacing-vertical: 0.5em;
/*
	z-index: 2;
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    background-color: var(--pico-header-background);
    transition: border-top-color .4s ease-in-out, box-shadow .4s ease-in-out;
    border-bottom-color: var(--pico-header-border-color);
    box-shadow: var(--pico-card-box-shadow);
    border-bottom: var(--pico-border-width) solid transparent;
*/
/*
    background: #fff;
    border-bottom: 1px solid #ddd;
*/
}
nav.subnav {
	top: 2.5em;
}
table thead.stickythead {
	position: sticky;
	top: 5.5em;
}

.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.error{
	color: #EE402E;
}
.success{
	color: #409614;
}
[role=group] {
	margin-bottom: var(--spacing-company) 0;
}

section {
  margin-bottom: var(--spacing-company);
}

/* Main */
@media (min-width: 992px) {
/*
  main .grid {
    grid-column-gap: var(--spacing-company);
    grid-template-columns: auto 25%;
  }
*/
}

form.grid {
  grid-row-gap: 0;
}

/* Aside nav */
aside img {
  margin-bottom: 0.25rem;
}

aside p {
  margin-bottom: var(--spacing-company);
  line-height: 1.25;
}
.photos {
	margin-bottom: var(--pico-spacing);
}

/*
[data-theme="light"],
main:not([data-theme="dark"]) {
  --pico-primary: #f4511e;
  --pico-primary-hover: #ff5722;
  --pico-primary-focus: rgba(244, 81, 30, 0.25);
  --pico-primary-inverse: #FFF;
}
[data-theme="dark"],
main:not([data-theme="light"]) {
  --pico-primary: #fb8c00;
  --pico-primary-hover: #f57c00;
  --pico-primary-focus: rgba(251, 140, 0, 0.125);
  --pico-primary-inverse: #FFF;
}
*/



html, body {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  margin: 0;
}
.wrapper {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
nav, footer {
  flex-grow: 0;
  flex-shrink: 0;
}
main {
  flex-grow: 1;
}
footer {
  padding: 1rem 0;
}

/*
.table.sticky th {
	position: sticky;
	top: 0;
}
.table.sticky th::after {
	content: '';
	width:100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: black;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--scroll-padding, 50px);
}
const navigationHeight=document.querySelector('.primary-navigation').offsetHeight;
document.documentElement.style.setProperty('--scroll-padding',navigationHeight-1+'px');
*/

/*
Prevent Fixed Navbar from Overlapping Content (Content Shifting Upwards)
body {
	padding-top: 60px;
}
.header {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: black;
	z-index: 9999;
} 
.header_content{
	height: 60px;
}
*/

/*
#toast.htmx-settling {
  opacity: 100;
}

#toast {
  background: #E1F0DA;
  opacity: 0;
  transition: opacity 3s ease-out;
}
*/
@media print {
    @page {
        margin-left: 1em;
        margin-right: 1em;
        size: auto;
    }
/*
    body {
        padding-top: 0;
        line-height: 1;
        color: #555;
    }
    .container-fluid {
        margin-top: 0;
        margin-bottom: 0;
    }
*/
    nav {
        display: none !important;
    }
    .nopr {
        display: none !important;
    }
    table thead.stickythead {
		position: static;
		top: 1em;
	}
}
