:root {
  /* PRIMARY */
  --x-primary-color-h: 184;
  --x-primary-color-s: 36;
  --x-primary-color-l: 58;
  --primary-color: var(--x-primary-color-h), calc(var(--x-primary-color-s) * 1%), calc(var(--x-primary-color-l) * 1%);
  --primary-color-hsl: hsl(var(--x-primary-color-h), calc(var(--x-primary-color-s) * 1%), calc(var(--x-primary-color-l) * 1%));
  --primary-color-rgb: rgb(110, 182, 187);
  --primary-color-hex: #6EB6BB;
  /* ACCENT */
  --x-accent-color-h: 153;
  --x-accent-color-s: 100;
  --x-accent-color-l: 43;
  --accent-color: var(--x-accent-color-h), calc(var(--x-accent-color-s) * 1%), calc(var(--x-accent-color-l) * 1%);
  --accent-color-hsl: hsl(var(--x-accent-color-h), calc(var(--x-accent-color-s) * 1%), calc(var(--x-accent-color-l) * 1%));
  --accent-color-rgb: rgb(0, 221, 123);
  --accent-color-hex: #00dd7b;
  /* BACKGROUND */
  --x-bg-color-h: 184;
  --x-bg-color-s: 36;
  --x-bg-color-l: 30;
  --bg-color: var(--x-bg-color-h), calc(var(--x-bg-color-s) * 1%), calc(var(--x-bg-color-l) * 1%);
  --bg-color-hsl: hsl(var(--x-bg-color-h), calc(var(--x-bg-color-s) * 1%), calc(var(--x-bg-color-l) * 1%));
  --bg-color-rgb: rgb(49, 100, 104);
  --bg-color-hex: #316468;
  /* BACKGROUND GRADIENT */
  --x-bg-gradient: radial-gradient(circle at top, rgba(20, 85, 93, 1) 0%, rgba(12, 44, 58, 1) 75%, rgba(9, 31, 40, 1) 100%);
  /* ICON */
  --x-icon-color-h: 184;
  --x-icon-color-s: 41;
  --x-icon-color-l: 73;
  --icon-color: var(--x-icon-color-h), calc(var(--x-icon-color-s) * 1%), calc(var(--x-icon-color-l) * 1%);
  --icon-color-hsl: hsl(var(--x-icon-color-h), calc(var(--x-icon-color-s) * 1%), calc(var(--x-icon-color-l) * 1%));
  --icon-color-rgb: rgb(110, 182, 187);
  --icon-color-hex: #6eb6bb;
  /* TEXT */
  --x-text-color-h: 0;
  --x-text-color-s: 0;
  --x-text-color-l: 100;
  --text-color: var(--x-text-color-h), calc(var(--x-text-color-s) * 1%), calc(var(--x-text-color-l) * 1%);
  --text-color-hsl: hsl(var(--x-text-color-h), calc(var(--x-text-color-s) * 1%), calc(var(--x-text-color-l) * 1%));
  --text-color-rgb: rgb(255, 255, 255);
  --text-color-hex: #fff;
}

.is-dark {
  /* BEER MAPPING */
  --color-1: var(--primary-color-hsl);
  --color-1a: var(--bg-color-hsl);
  --color-1b: #ba68c800;
  --color-2: var(--text-color-hsl);
  --color-2a: #ffffff10;
  --color-2b: #ffffff20;
  --color-3: var(--accent-color-hsl);
  --color-4: #37474f;
  --color-4a: rgba(55, 71, 79, 0.9);
  --color-5: #263238;
}

.small-padding-top {
  padding-top: 8rem !important;
}

.medium-padding-top {
  padding-top: 16rem !important;
}

.large-padding-top {
  padding-top: 24rem !important;
}

.small-padding-bottom {
  padding-bottom: 8rem !important;
}

.medium-padding-bottom {
  padding-bottom: 16rem !important;
}

.large-padding-bottom {
  padding-bottom: 24rem !important;
}

.no-lateral-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.blur-bg::before {
  content: " ";
  transform: translateZ(0);
  z-index: -1;
  backdrop-filter: blur(32px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  position: absolute;
  background-color: hsla(var(--bg-color), 0.4);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 7px;
  background-clip: content-box;
  box-shadow: inset 0 0 0 10px hsla(var(--text-color), 0.2);
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

:root {
  --display-4: 26px;
  --display-4-lh: 32px;
  --display-3: 26px;
  --display-3-lh: 32px;
  --display-2: 22px;
  --display-2-lh: 32px;
  --display-1: 22px;
  --display-1-lh: 30px;
  --headline: 26px;
  --headline-lh: 34px;
  --title: 26px;
  --title-lh: 34px;
  --subheading-2: 18px;
  --subheading-2-lh: 24px;
  --subheading-1: 16px;
  --subheading-1-lh: 22px;
  --body-1: 18px;
  --body-1-lh: 20px;
  --body-2: 18px;
  --body-2-lh: 20px;
  --caption: 18px;
  --caption-lh: 20px;
  --button: 14px;
  --button-lh: 14px;
  --input: 18px;
  --input-lh: 18px;
}
@media (min-width: 321px) {
  :root {
    --display-4: 36px;
    --display-4-lh: 46px;
    --display-3: 28px;
    --display-3-lh: 38px;
    --display-2: 22px;
    --display-2-lh: 28px;
    --display-1: 22px;
    --display-1-lh: 28px;
    --headline: 36px;
    --headline-lh: 46px;
    --title: 28px;
    --title-lh: 34px;
    --subheading-2: 22px;
    --subheading-2-lh: 26px;
    --subheading-1: 16px;
    --subheading-1-lh: 22px;
    --body-1: 16px;
    --body-1-lh: 20px;
    --body-2: 16px;
    --body-2-lh: 20px;
    --caption: 12px;
    --caption-lh: 14px;
    --button: 12px;
    --button-lh: 14px;
    --input: 16px;
    --input-lh: 16px;
  }
}

h1 {
  font-size: var(--display-4);
}

h2 {
  font-size: var(--display-3);
}

h3 {
  font-size: var(--display-2);
}

h4 {
  font-size: var(--display-1);
}

h5 {
  font-size: var(--subheading-1);
}

h6 {
  font-size: var(--caption-lh);
}

.container {
  min-height: calc(100vh - 160px);
}
.container.max {
  max-width: 100%;
  padding: 80rem 20px;
}

.is-dark {
  --shadow-1: 0 2rem 2rem 0 rgba(0, 0, 0, 0.14), 0 1rem 5rem 0 rgba(0, 0, 0, 0.12), 0 3rem 1rem -2rem rgba(0, 0, 0, 0.2);
  --shadow-2: 0 6rem 10rem 0 rgba(0, 0, 0, 0.14), 0 1rem 18rem 0 rgba(0, 0, 0, 0.12), 0 3rem 5rem -1rem rgba(0, 0, 0, 0.3);
  --size: 1px ;
}

.menu.top {
  background: hsla(var(--primary-color), 0.3);
  box-shadow: unset;
  justify-content: space-between;
  padding: 0 20px;
}
.menu.top a.navbar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu.top a.navbar-brand img {
  max-height: 40px;
  width: auto;
}

.card {
  background: hsla(var(--bg-color), 0.5);
}

.responsive {
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.field > i {
  color: var(--icon-color-hsl);
}
.field > input, .field > textarea {
  border-radius: unset;
}
.field label {
  color: var(--text-color-hsl);
}
.active .field label {
  color: var(--primary-color-hsl);
}
.field:focus-within label {
  color: var(--primary-color-hsl);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: all 0s 50000s;
}

dl dd {
  margin: 0 0 10px 0;
  border-bottom: 1px solid hsla(var(--text-color), 0.4);
  padding: 0 0 10px 0;
  user-select: all;
}

.dropdown {
  background-color: transparent;
  padding: 10px 0;
  border-radius: 5px;
}
.dropdown::before {
  content: " ";
  position: absolute;
  background-color: hsla(var(--bg-color), 0.4);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

body {
  background-image: radial-gradient(circle at top, #14555d 0%, #0c2c3a 75%, #091f28 100%);
}

.right-nav-bar {
  display: flex;
  justify-content: right;
}

.navbar-brand {
  display: flex;
  width: auto;
}

.validation-summary-errors {
  display: inline-block;
}
.validation-summary-errors ul {
  margin: 0;
  list-style-type: none;
}

.welcome-page li {
  list-style: none;
  padding: 4px;
}

.logged-out-page iframe {
  display: none;
  width: 0;
  height: 0;
}

.grants-page .card {
  margin-top: 20px;
  border-bottom: 1px solid lightgray;
}
.grants-page .card .card-title {
  font-size: 120%;
  font-weight: bold;
}
.grants-page .card .card-title img {
  width: 100px;
  height: 100px;
}
.grants-page .card label {
  font-weight: bold;
}

.login-page {
  min-width: 360px;
}
.login-page .card {
  padding: 20px;
}
.login-page .login-buttons {
  display: flex;
}
.login-page .login-buttons .button-grow {
  flex-grow: 1;
}
.login-page .external-provider-image {
  width: auto !important;
  border-radius: unset;
}
.login-page .external-provider-login-button {
  min-width: 90%;
}