@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;600&family=Open+Sans&family=Roboto:ital,wght@0,400;0,900;1,700&display=swap');

/*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --bright-blue: #0d6efd;
  --bright-blue-light: hsl(213, 74%, 54%);
  --aqua: hsl(182, 76%, 47%);
  --aqua-light: hsl(182, 88%, 47%);
  --bright-red: hsl(1deg, 100%, 46%);
  --text-color: hsl(350deg, 75%, 3%);
  --white: hsl(0deg, 0%, 100%);

  --hf-light-blue: #E6EFFF;
  --hf-light-aqua: #e6fff8;
  --hf-light-gray: hsl(210deg, 17%, 98%);
  --hf-light-gray-alt: hsl(210deg, 17%, 94%);
  --hf-dark-green: hsl(85, 95%, 26%);
  --hf-green: hsl(85, 100%, 40%);
  --hf-light-green: hsl(106, 38%, 70%);
  --hf-green-highlight: hsl(103, 82%, 93%);
  --hf-red: hsl(360, 99%, 46%);
  --hf-light-red: hsl(0, 80%, 53%);
  --hf-yellow: hsl(51, 100%, 74%);
  --hf-light-yellow: hsl(49, 100%, 80%);
  --hf-orange: hsl(43, 100%, 50%);
  --hf-pink: hsl(0, 100%, 83%);
  --hf-light-orange: hsl(42, 100%, 59%);
  --hf-banner-blue: hsl(212deg 83.14% 91.86%);

  --body-font-family: "Libre Franklin", "Helvetica Neue", Serif;
  --body-font-size: 1rem;
  --body-font-weight: 400;
  --body-line-height: 1.5;

  --bold-font-weight: 600;

  --blue: hsl(240deg, 98%, 17%);
  --indigo: hsl(263deg, 90%, 51%);
  --purple: hsl(261deg, 51%, 51%);
  --pink: hsl(332deg, 79%, 58%);
  --red: hsl(3deg, 75%, 37%);
  --orange: hsl(27deg, 98%, 54%);
  --yellow: hsl(34deg, 100%, 34%);
  --green: hsl(120deg, 32%, 39%);
  --teal: hsl(194deg, 66%, 61%);
  --cyan: hsl(207deg, 49%, 37%);

  --gray-100: hsl(210deg, 17%, 98%);
  --gray-200: hsl(210deg, 16%, 93%);
  --gray-300: hsl(210deg, 14%, 89%);
  --gray-400: hsl(210deg, 14%, 83%);
  --gray-500: hsl(210deg, 11%, 71%);
  --gray-600: hsl(210deg, 7%, 46%);
  --gray-700: hsl(210deg, 9%, 31%);
  --gray-800: hsl(210deg, 10%, 23%);
  --gray-900: hsl(210deg, 11%, 15%);
  --primary: hsl(240deg, 98%, 17%);
  --secondary: hsl(210deg, 7%, 46%);
  --success: hsl(120deg, 32%, 39%);
  --info: hsl(207deg, 49%, 37%);
  --warning: hsl(34deg, 100%, 34%);
  --danger: hsl(3deg, 75%, 37%);
  --light: hsl(210deg, 17%, 98%);
  --dark: hsl(210deg, 10%, 23%);
  --primary-rgb: 1, 1, 86;
  --secondary-rgb: 109, 117, 126;
  --success-rgb: 68, 131, 68;
  --info-rgb: 48, 99, 141;
  --warning-rgb: 173, 98, 0;
  --danger-rgb: 165, 31, 24;
  --light-rgb: 249, 250, 251;
  --dark-rgb: 53, 59, 65;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --body-color-rgb: 34, 38, 42;
  --body-bg-rgb: 255, 255, 255;
  --font-sans-serif: -apple-system, BlinkMacSystemFont, "Libre Franklin", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

  --body-color: hsl(210deg, 11%, 15%);
  --menu-text: hsl(210deg, 11%, 15%);
  --body-bg: hsl(0deg, 0%, 100%);
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* Shared common elements */

.nohp {
  padding-left: 0; padding-right: 0;
}
.novp {
  padding-top: 0; padding-bottom: 0;
}
.nolp {
  padding-left: 0;
}
.norp {
  padding-right: 0;
}
.nohm {
  margin-right: 0; margin-left: 0;
}
.novm {
  margin-top: 0; margin-right: 0;
}
.nolm {
  margin-left: 0;
}
.norm {
  margin-right: 0;
}

.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}

.login-panel h1,
.homefront-front .signup-panel h1 {
  font-size: 1.5rem;
  font-family: var(--body-font-family);
  font-weight: 300;
  text-transform: uppercase;
  background: transparent;
  color: #212547;
}

.login-panel h4,
.homefront-front  .signup-panel h4 {
  font-size: 1rem;
}

.login-panel .control-label label,
.login-panel .form-check label,
.homefront-front .signup-panel label,
.homefront-front .signup-panel .btn-text {
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: normal;
}

.login-panel .form-check label,
.homefront-front .signup-panel .form-check label {
  text-transform: none;
}

.login-panel .control-group input,
.homefront-front .signup-panel .control-group input {
  /*width: 60%;*/
}

.logged-out-bg {
  background: var(--gray-100);
}

.com-users-login__submit button {
  background: var(--bright-red);
}

.login-panel .com-users-login__options a {
  font-size: .75rem;
  text-transform: uppercase;
  color: var(--bright-red);
}

.logged-out-logo-banner {
  /*background: hsl(212deg 83.14% 91.86%);*/
  background: transparent;
}

.logged-in-menu-bar {
  background: hsl(212deg 83.14% 91.86%);
}

div#system-message-container {
  margin-top: 10px !important;
}

/* Template specifics */
html, body {
  font-family: var(--body-font-family);
}
body .top-bar {
  height: 35px;
  background-color: var(--bright-blue);
}

label {
  font-weight: var(--bold-font-weight);
}

.main-menu ul.nav,
.top-menu ul {
  float: right;
}
.main-menu ul.nav li a {
  text-decoration: none;
  color: var(--text-color);
}
.main-menu ul.nav li {
  margin-left: 2em;
  text-transform: uppercase;
}
.main-menu ul.nav li a.box-menu {
  padding: 8px 16px;
  border: 2px solid var(--bright-red);
}
.main-menu ul.nav li a.box-menu.order-menu-item {
  background: var(--bright-red);
  color: #fff;
  font-weight: 900;
}
.main-menu ul.nav li a.box-menu.login-menu-item {
  font-weight: 900;
}

ul.navbar-nav a,
ul.navbar-nav .nav-item.dropdown .nav-link {
  color: var(--menu-text);
}

ul.navbar-nav li.nav-item a{
  padding: 1px 0;
  text-decoration: none;
}

ul.navbar-nav .nav-item.dropdown ul.dropdown-menu {
  min-width: max-content;
  background: var(--gray-100);
  color: var(--menu-text);
  border: 0 none;
  padding: 5px 0;
}

ul.navbar-nav li.nav-item {
  background: var(--gray-100);
  border-radius: 3px;
  padding: 3px 10px;
  margin-right: .25rem;
}

ul.navbar-nav .nav-item.dropdown ul.dropdown-menu li.nav-item {
  border-radius: 0;
  margin: 0;
}

ul.navbar-nav li.nav-item:hover {
  background: var(--gray-200);
}

.below-component span {
  font-size: .75rem;
}


.top-bar i {
  float: right;
  padding: 8px 0 10px 0;
  color: var(--white);
}
.top-bar ul {
  list-style: none;
  float: right;
  padding-left: 0;
}
.top-bar ul li {
  display: inline-flex;
}
.top-bar ul li a {
  color: var(--white);
  text-decoration: none;
  padding: 5px 10px;
}
div[role="tooltip"] {
  display: none;
}

.ml-0 {
  margin-left: 0;
}
.ml-1 {
  margin-left: .2em;
}
.ml-2 {
  margin-left: .4em;
}
.ml-3 {
  margin-left: .6em;
}
.ml-4 {
  margin-left: .8em;
}
.ml-5 {
  margin-left: 1em;
}
.mr-0 {
  margin-right: 0;
}
.mr-1 {
  margin-right: .2em;
}
.mr-2 {
  margin-right: .4em;
}
.mr-3 {
  margin-right: .6em;
}
.mr-4 {
  margin-right: .8em;
}
.mr-5 {
  margin-right: 1em;
}

/* Forms */
span.req {
  color: var(--bright-red);
}

/* Buttons */
.clickable {
  cursor: pointer;
}

.gray-text {
  color: var(--gray-700);
}

.hf-btn-green {
  background: var(--hf-green);
  border: 1px solid var(--hf-green);
  color: #fff;
}

button.hf-btn-green:hover,
button.hf-btn-green:focus {
  background: var(--hf-light-green);
}

button.hf-btn-light-yellow {
  background: #e7dd99;
  border: 1px solid #b4ac78;
  color: #2e2e2e;
}

button.hf-btn-light-yellow:hover,
button.hf-btn-light-yellow:focus {
  background: #e7dd99;
  border: 1px solid #b4ac78;
  color: #2e2e2e;
  cursor: unset;
}

button.hf-btn-md-yellow {
  background: #e8a638;
  border: 1px solid #e8a638;
  color: #fff;
}

button.hf-btn-md-yellow:hover,
button.hf-btn-md-yellow:focus {
  background: #a47729;
}

button.hf-btn-md-yellow-sq {
  background: #e8a638;
  border: 1px solid #e8a638;
  color: #fff;
  border-radius: 0;
  text-transform: uppercase;
  font-size: .75rem;
}

button.hf-btn-md-yellow-sq:hover,
button.hf-btn-md-yellow-sq:focus {
  background: #a47729;
}

.btn-info.hf-btn,
.homefront-front .btn-info.hf-btn {
  background: var(--bright-blue);
  border: 1px solid var(--bright-blue);
  color: var(--white);
  padding: 5px 20px;
}

.btn-info.hf-btn:hover,
.homefront-front .btn-info.hf-btn:hover {
  background: var(--bright-blue-light);
  border: 1px solid var(--bright-blue-light);
  color: var(--white);
}

.btn-info.hf-btn.aqua,
.homefront-front .btn-info.hf-btn.aqua {
  background: var(--aqua);
  border: 1px solid var(--aqua);
  color: var(--white);
}

.btn-info.hf-btn.aqua:hover,
.homefront-front .btn-info.hf-btn.aqua:hover {
  background: var(--aqua-light);
  border: 1px solid var(--aqua);
  color: var(--white);
}

.btn-info.hf-btn.green,
.homefront-front .btn-info.hf-btn.green {
  background: var(--hf-green);
  border: 1px solid var(--hf-green);
  color: var(--white);
}

.btn-info.hf-btn.green:hover,
.homefront-front .btn-info.hf-btn.green:hover {
  background: var(--hf-light-green);
  border: 1px solid var(--hf-green);
  color: var(--white);
}

.btn-info.hf-btn.red,
.homefront-front .btn-info.hf-btn.red {
  background: var(--bright-red);
  border: 1px solid var(--bright-red);
  color: var(--white);
}

.btn-info.hf-btn.red:hover,
.homefront-front .btn-info.hf-btn.red:hover {
  background: var(--bright-red);
  color: var(--white);
}

button.hf-red-btn {
  background: var(--bright-red);
  color: var(--white);
  border: red;
}

button.hf-red-btn:hover {
  opacity: .6;
}

button.hf-red-btn-sq {
  background: var(--bright-red);
  color: var(--white);
  border: red;
  border-radius: 0;
  text-transform: uppercase;
  font-size: .75rem;
}

button.hf-red-btn-sq:hover {
  opacity: .6;
}

.btn-info.hf-btn.white,
.homefront-front .btn-info.hf-btn.white {
  background: var(--gray-100);
  border: 1px solid var(--gray-400);
  color: #2e2e2e;
}

.btn-info.hf-btn.white:hover,
.homefront-front .btn-info.hf-btn.white:hover {
  background: var(--gray-300);
  color: #000;
}

a.hf-btn.btn-info,
.homefront-front a.hf-btn.btn-info {
  padding: 5px 7px;
  text-decoration: none;
  border-radius: 3px;
  display: block;
}

.soft-blue-button {
  background: var(--bright-blue);
  color: var(--white);
  padding: 5px 20px;
  border-radius: 10px;
  box-shadow: inset 0 0 5px #5e5e5e;
  border: 1px solid #fff;
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

#system-message-container joomla-alert[type=success] {
  --alert-accent-color: var(--bright-blue) !important;
  --alert-heading-text: hsla(0,0%,100%,.95);
  --alert-close-button: var(--bright-blue) !important;
  background-color: #fff;
}

.homefront-front .blue-gradient {
  background: rgb(41,130,236);
  background: linear-gradient(0deg, rgba(41,130,236,1) 0%, rgba(2,99,214,1) 100%);
  color: #fff;
}