/* Global CSS variables */
:root {
  --spacing-company: 3rem;
  --font-weight: 400;
  --border-radius: 3px;
}
/* Blue Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary: #0F2D70;
  --primary-hover: #0d265f;
  --primary-focus: rgba(30, 136, 229, 0.125);
  --primary-inverse: #FFF;
  --secondary: #fff;
  --secondary-hover: #ddd;
  --secondary-inverse: #444;
  --contrast: #222;
  --contrast-hover: #000;
}

/* Blue Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary: #fff;
    --primary-hover: #ddd;
    --primary-focus: rgba(30, 136, 229, 0.25);
    --primary-inverse: #000;
  --secondary: #FFF;
  --secondary-hover: #ddd;
  --secondary-inverse: #444;
  --contrast: #ddd;
  --contrast-hover: #eee;
  }
}

/* Blue Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: #fff;
  --primary-hover: #ddd;
  --primary-focus: rgba(30, 136, 229, 0.25);
  --primary-inverse: #000;
  --secondary: #FFF;
  --secondary-hover: #ddd;
  --secondary-inverse: #444;
  --contrast: #ddd;
  --contrast-hover: #eee;
}


/* Blue (Common styles) */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
}

.orange-button {
	background-color:#0F2D70;
	border-color:#0F2D70;
}

.orange-button:hover {
	background-color:#123686;
	border-color:#123686;
}

.navbutton {
	background-color:transparent;
	border-color: transparent;
    color: #123686;
}

.navbutton:hover {
	border-color: #123686;
}

.primary {
  font-weight: bold;
}

.secondary {
  font-weight: bold;
}

.secondary:hover {
    font-weight: bold;
	text-decoration: underline;
}

.contrast {
	font-weight: bold;
}

.contrast:hover {
	font-weight: bold;
}
.blacklink {
	color: #333;
	font-weight: bold;
}
.blacklink:hover {
	color: #333;
	text-decoration: underline;
}

.bluelink {
	font-weight: bold;
}
.bluelink:hover {
	text-decoration: underline;
}

  /* hide mobile version by default */
.mobile {
    display: none;
  }
  
.formwidth65 {
	width: 65%;
}

.formwidth45 {
	width: 45%;
}
  /* when screen is less than 600px wide
     show mobile version and hide desktop */
 @media (max-width: 700px) {
.mobile {
      display: block;
    }
.desktop {
      display: none;
    }
.formwidth65 {
	width:100%;
    }
.formwidth45 {
	width:100%;
    }
}

/* Typography */
h2,
h3,
h4,
h5,
h6,
hgroup> :last-child {
  font-weight: 400;
}

.pcalc {
	font-size: fixed;
	font-style: normal;
	font-weight: normal;
	padding-bottom: 2%;
	font-size: 22px;
}


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

/* Header */
.hero {

  background-position: center;
  background-size: cover;
}

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


header hgroup> :last-child {
  color: var(--h3-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);
}



/* 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;
}

.novis {
	display:none;
}

.card-header-border-red {
    background-color:#861D13;
	border-color:#861D13;
	padding:0px;
	margin:0px;
}

.card-header-border-blue {
    background-color:#123686;
	border-color:#123686;
	padding:0px;
	margin:0px;
}

.card-header-border-purple {
    background-color:#A77C00;
	border-color:#A77C00;
	padding:0px;
	margin:0px;
}

.card-header {
	text-align:center;
	color:#fff;
	padding: 10px;
	margin:0%;
}

.divborder {
	border-color: #000;
	border-style:solid;
	border-width: 1px;
}

.sticky-header {
  position: sticky;
  top: 0;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding: 0%;
  margin: 0%;
}

.blueshadow {
  	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	padding-bottom: 5%;
}

.bluearticle {
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	padding-bottom: 5%;
}

.whitefield {
	background-color: #fff;
}