@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;600;700;800;900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Space+Grotesk:wght@300..700&display=swap');

:root {
   --bs-font-sans-serif: 'Instrument Sans', Arial, sans-serif;
   --font-industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
   --font-heading: 'Space Grotesk', monospace;
   --font-fancy: 'Merienda', cursive;
   --color-orange: #FF7E00;
   --color-greengray: #305551;
   --color-blue: #1E3A8A;
   --color-blue-dark: #192586;
   --color-blue-dark-rgb: 25,37,134;
   --color-green-light: #F4FCFB;
   --color-lighblue-dark: #193A4B;
   --color-greengrey-lighter: #F7FCFC;
   --color-bluegrey-dark: #1F2937;
   --color-teal: #2DD4BF;
   --color-paper: #f4f6fb;
   --color-action: #2a1200;
   --orgColor: var(--color-orange);
   --textColor: var(--color-greengray);
   --thmColor: var(--color-blue-dark);
   --thmColorRGB: var(--color-blue-dark-rgb);
   --thmColor2: var(--color-green-light);
   --thmColor3: var(--color-lighblue-dark);
   --footerColor: var(--color-greengrey-lighter);
   --primary-blue: var(--color-blue);
   --secondary-teal: var(--color-teal);
   --text-dark: var(--color-bluegrey-dark);
   --text-medium: #4B5563;
   --text-light: #626b7f;
   --background: #F9FAFB;
   --white: #FFFFFF;
   --success: #10B981;
   --warning: #F59E0B;
   --error: #EF4444;
   --info: #3B82F6;
   --bs-offcanvas-width: 320px;
}

html {
   scroll-behavior: smooth;
}

body {
   font-weight: 400;
   font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
}

.awesomplete {
   display: block;
   -ms-flex-positive: 1 !important;
   flex-grow: 1 !important;
}

   .awesomplete > ul {
      z-index: 50;
      background: #fff;
   }

.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
   position: static;
}

.form-control::placeholder {
   color: rgba(var(--bs-body-color-rgb), .45);
   opacity: 1; /* Firefox */
}
.form-floating > label {
   color: rgba(var(--bs-body-color-rgb), .45);
}

h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-heading);
   font-weight:600;
}

.medium {
   font-size: .925rem;
}
.eyebrow {
   font-size: .6875rem;
}

.clickable {
	cursor: pointer;
}

.plain, .plain:hover, .plain:focus, .plain:active {
   text-decoration:none;
}

.text-alternate {
   color: var(--orgColor);
}
.text-main {
   color: var(--thmColor);
}
.text-action {
   color: var(--color-action);
}
.text-eyebrow {
	color: var(--text-light);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.font-industrial {
   font-family: var(--font-industrial);
}
.font-heading {
   font-family: var(--font-heading);
}
.font-fancy {
   font-family: var(--font-fancy);
}

.bg-paper {
   background-color: var(--color-paper);
}
.bg-org {
   background-color: var(--orgColor);
}
.bg-thm {
   --bs-bg-opacity: 1;
   background-color: rgba(var(--thmColorRGB), var(--bs-bg-opacity))!important;
}
.bg-thm2 {
   background-color: var(--thmColor2);
}
.bg-thm3 {
   background-color: var(--thmColor3);
}
.bg-footer {
   background-color: var(--footerColor);
}
.bg-hero {
   background: linear-gradient(120deg, var(--primary-blue), var(--secondary-teal));
}

.border-org {
   border-color: var(--orgColor) !important;
}
.border-thm {
   border-color: var(--thmColor) !important;
}

.btn-main {
   background-color: var(--orgColor);
}
   .btn-main:hover {
      background-color: var(--orgColor);
      color: white;
      border-color: var(--orgColor);
   }

.btn-alt {
   color: var(--thmColor);
   background-color: white;
   border-color: var(--thmColor);
}
   .btn-alt:hover {
      background-color: var(--thmColor);
      color: white;
      border-color: var(--thmColor);
   }

.btn-alt2 {
   background-color: var(--thmColor);
   color: white;
   border-color: var(--thmColor);
}
   .btn-alt2:hover {
      background-color: var(--thmColor);
      color: white;
      border-color: var(--thmColor);
   }

.box {
	display: flex;
	justify-content: center;
	align-items: center;
}
.box-xs {
   width:2rem;
   height:2rem;
}
.box-sm {
	width: 3rem;
	min-width: 3rem;
	height: 3rem;
}
.box-action {
   width: 20rem;
}
.box-info {
   width:260px;
}