cirrus-ui-63-no-deps/dist/cirrus.css

A lightweight UI framework written in CSS

/*
* Cirrus 0.6.3
* Stanley Lim, Copyright 2021
* https://spiderpig86.github.io/Cirrus
*/
/* BASE STYLING FOR CIRRUS */
/*@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Nunito+Sans:400,700");*/
/*
  Functions
*/
/*
    Converts a given hex value to RGB.
*/
/*
    Generates delimited class name prefix.
*/
/*
    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
*/
/* Spacing */
/* Fonts */
/* Grid Count (Columns + Grid) */
/* Grid Percents */
/* Tab Sizes */
/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
/* Color scheme for Cirrus */
/* v2 Colors */
:root {
  /* v1 Colors */
  --cirrus-fg: #374054;
  --cirrus-bg: #fff;
  --cirrus-primary: #f03d4d;
  --cirrus-primary-rgb: 240, 61, 77;
  --cirrus-primary-light: #ffdadd;
  --cirrus-accent-hover: #d62939;
  --cirrus-accent-border: #c21b2b;
  --cirrus-light: #f6f9fc;
  --cirrus-light-gray: #f8f9fa;
  --cirrus-gray: #d5d7dc;
  --cirrus-dark-gray: #909090;
  --cirrus-dark: #363636;
  --cirrus-link: #5e5cc7;
  --cirrus-link-dark: #4643e2;
  --cirrus-info: #2972fa;
  --cirrus-success: #0dd157;
  --cirrus-success-rgb: 13, 209, 87;
  --cirrus-warning: #fab633;
  --cirrus-danger: #fb4143;
  --cirrus-light-hover: #d0e0ef;
  --cirrus-dark-hover: #505050;
  --cirrus-info-hover: #1062f9;
  --cirrus-link-hover: #f8f7ff;
  --cirrus-success-hover: #0cb94d;
  --cirrus-warning-hover: #f9ad1a;
  --cirrus-danger-hover: #eb0507;
  --cirrus-select-bg: rgba(0, 161, 255, 0.2);
  --cirrus-code-bg: var(--cirrus-primary-light);
  --cirrus-code-fg: #dc4753;
  --cirrus-form-group-bg: var(--cirrus-light-gray);
  --cirrus-form-group-fg: var(--cirrus-dark-gray);
  --toast-primary-bg: rgba(49, 59, 80, 0.9);
  --animation-duration: 0.2s;
  --focus-opacity: 0.55;
  --space-size: 0.5rem;
  --font-size-xs: 0.75rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.25rem;
  --font-size-xl: 1.5rem; }

* {
  margin: 0;
  padding: 0;
  /* Prevent setting borders from increasing the size of an elrement */
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; }

html,
body {
  margin: 0;
  padding: 0;
  border: none;
  height: 100%; }

/* Nunito Sans for the font */
body {
  letter-spacing: 0.01rem;
  line-height: 1.8;
  /* Globally adjust line height */
  font-size: 1rem;
  font-weight: 400;
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
 "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
 "Segoe UI Emoji", "Segoe UI Symbol";
  letter-spacing: 0.01rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  color: var(--cirrus-fg); }

/* Remove bullets from unordered lists */
ul {
  list-style: none; }

/* Setting up embedded content */
img,
embed,
object,
video {
  max-width: 100%;
  height: auto; }

.hero.fullscreen video {
  height: 100%;
  object-fit: fill;
  position: absolute;
  width: 100%;
  z-index: -1; }

iframe {
  outline: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }

article,
aside,
figure,
footer,
header,
hgroup,
section {
  display: block; }

input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit; }

label {
  display: inline-block;
  margin: 0.25rem 0; }

fieldset {
  padding: 1rem; }
  fieldset legend {
    font-weight: bold; }

[hidden] {
  display: none !important; }

/* Selection Color */
::selection {
  background-color: var(--cirrus-select-bg); }

/* When focusing any element */
:focus {
  box-shadow: 0 0 0.1rem 0.15rem rgba(240, 61, 77, 0.13);
  outline: none; }

/*
  Functions
*/
/*
    Converts a given hex value to RGB.
*/
/*
    Generates delimited class name prefix.
*/
/*
    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
*/
/*
  Functions
*/
/*
    Converts a given hex value to RGB.
*/
/*
    Generates delimited class name prefix.
*/
/*
    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
*/
/* Spacing */
/* Fonts */
/* Grid Count (Columns + Grid) */
/* Grid Percents */
/* Tab Sizes */
/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
/* Color scheme for Cirrus */
/* v2 Colors */
/*
    Global Mixins
*/
/*
    Bring to front on focus.
*/
/*
    Group selectors that share common styling.
*/
/* Spacing */
/* Fonts */
/* Grid Count (Columns + Grid) */
/* Grid Percents */
/* Tab Sizes */
/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
/*
  Functions
*/
/*
    Converts a given hex value to RGB.
*/
/*
    Generates delimited class name prefix.
*/
/*
    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
*/
/* Spacing */
/* Fonts */
/* Grid Count (Columns + Grid) */
/* Grid Percents */
/* Tab Sizes */
/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
/* Color scheme for Cirrus */
/* v2 Colors */
/* BUTTONS */
/* Button styling */
/* Un-themed */
.btn, button, [type="submit"], [type="reset"], [type="button"] {
  line-height: 2rem;
  overflow: hidden;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  text-align: center;
  transition: all var(--animation-duration);
  background-color: var(--btn-color);
  border-color: var(--btn-border-color);
  color: var(--btn-fg);
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  font-family: Montserrat;
  min-width: 2rem;
  user-select: none;
  margin-bottom: 1rem;
  outline: none;
  --btn-color: #f8f9fa;
  --btn-fg: #495057;
  --btn-border-color: #e9ecef;
  /* Base States */
  /* Loading Button*/
  /* Make the loading circle, if present, white when button is active */
  /* Animated Button */
  /* Close Button */
  /* BUTTON STYLES */
  /* Regular */
  /* Extra small button */
  /* Small button */
  /* Big button */
  /* STATES */
  /* GLYPHS */
  /* Alternatives to pad-left and pad-right */ }
  .btn:hover, button:hover, [type="submit"]:hover, [type="reset"]:hover, [type="button"]:hover {
    transition: all var(--animation-duration);
    --btn-color: #f1f3f5;
    color: var(--btn-fg); }
  .btn:active, button:active, [type="submit"]:active, [type="reset"]:active, [type="button"]:active {
    transition: var(--animation-duration) ease; }
  .btn:focus, button:focus, [type="submit"]:focus, [type="reset"]:focus, [type="button"]:focus {
    outline: none; }
  .btn:disabled, button:disabled, [type="submit"]:disabled, [type="reset"]:disabled, [type="button"]:disabled {
    cursor: not-allowed;
    opacity: 0.5; }
    .btn:disabled:active, button:disabled:active, [type="submit"]:disabled:active, [type="reset"]:disabled:active, [type="button"]:disabled:active {
      pointer-events: none; }
  .btn.outline, button.outline, [type="submit"].outline, [type="reset"].outline, [type="button"].outline {
    --btn-color: transparent; }
    .btn.outline:hover, button.outline:hover, [type="submit"].outline:hover, [type="reset"].outline:hover, [type="button"].outline:hover {
      --btn-color: #e9ecef; }
  .btn.loading:active::after, button.loading:active::after, [type="submit"].loading:active::after, [type="reset"].loading:active::after, [type="button"].loading:active::after {
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    transition: var(--animation-duration) ease; }
  .btn.btn-animated, button.btn-animated, [type="submit"].btn-animated, [type="reset"].btn-animated, [type="button"].btn-animated {
    transition: calc(var(--animation-duration) / 2) ease; }
    .btn.btn-animated:active, button.btn-animated:active, [type="submit"].btn-animated:active, [type="reset"].btn-animated:active, [type="button"].btn-animated:active {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      transition: calc(var(--animation-duration) / 2) ease; }
  .btn.btn-close, button.btn-close, [type="submit"].btn-close, [type="reset"].btn-close, [type="button"].btn-close {
    background-color: rgba(10, 10, 10, 0.2);
    border: none;
    border-radius: 290486px;
    cursor: pointer;
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 0;
    height: 20px;
    outline: 0;
    position: relative;
    vertical-align: top;
    width: 20px;
    padding: 0;
    min-width: 20px;
    /* Render the x in the close button */ }
    .btn.btn-close:hover, button.btn-close:hover, [type="submit"].btn-close:hover, [type="reset"].btn-close:hover, [type="button"].btn-close:hover {
      background-color: rgba(10, 10, 10, 0.3); }
    .btn.btn-close::before, button.btn-close::before, [type="submit"].btn-close::before, [type="reset"].btn-close::before, [type="button"].btn-close::before {
      background-color: var(--cirrus-bg);
      content: '';
      display: block;
      left: 50%;
      position: absolute;
      top: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      -webkit-transform-origin: center center;
      transform-origin: center center;
      height: 2px;
      width: 50%; }
    .btn.btn-close::after, button.btn-close::after, [type="submit"].btn-close::after, [type="reset"].btn-close::after, [type="button"].btn-close::after {
      background-color: var(--cirrus-bg);
      content: '';
      display: block;
      left: 50%;
      position: absolute;
      top: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      -webkit-transform-origin: center center;
      transform-origin: center center;
      height: 50%;
      width: 2px; }
  .btn.btn-transparent, button.btn-transparent, [type="submit"].btn-transparent, [type="reset"].btn-transparent, [type="button"].btn-transparent {
    --btn-color: transparent;
    --btn-fg: var(--cirrus-dark);
    --btn-border-color: transparent; }
    .btn.btn-transparent:focus, button.btn-transparent:focus, [type="submit"].btn-transparent:focus, [type="reset"].btn-transparent:focus, [type="button"].btn-transparent:focus {
      box-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5); }
    .btn.btn-transparent:hover, button.btn-transparent:hover, [type="submit"].btn-transparent:hover, [type="reset"].btn-transparent:hover, [type="button"].btn-transparent:hover {
      --btn-color: rgba(0, 0, 0, 0.1); }
    .btn.btn-transparent.outline, button.btn-transparent.outline, [type="submit"].btn-transparent.outline, [type="reset"].btn-transparent.outline, [type="button"].btn-transparent.outline {
      --btn-fg: var(--cirrus-dark); }
  .btn.btn-light, button.btn-light, [type="submit"].btn-light, [type="reset"].btn-light, [type="button"].btn-light {
    --btn-color: var(--cirrus-light);
    --btn-fg: var(--cirrus-dark);
    --btn-border-color: var(--cirrus-light); }
    .btn.btn-light:hover, button.btn-light:hover, [type="submit"].btn-light:hover, [type="reset"].btn-light:hover, [type="button"].btn-light:hover {
      --btn-color: var(--cirrus-light-hover); }
    .btn.btn-light:focus, button.btn-light:focus, [type="submit"].btn-light:focus, [type="reset"].btn-light:focus, [type="button"].btn-light:focus {
      box-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5); }
  .btn.btn-dark, button.btn-dark, [type="submit"].btn-dark, [type="reset"].btn-dark, [type="button"].btn-dark {
    --btn-color: var(--cirrus-dark);
    --btn-fg: var(--cirrus-light);
    --btn-border-color: var(--cirrus-dark); }
    .btn.btn-dark:focus, button.btn-dark:focus, [type="submit"].btn-dark:focus, [type="reset"].btn-dark:focus, [type="button"].btn-dark:focus {
      box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.5); }
    .btn.btn-dark:hover, button.btn-dark:hover, [type="submit"].btn-dark:hover, [type="reset"].btn-dark:hover, [type="button"].btn-dark:hover {
      --btn-color: var(--cirrus-dark-hover); }
    .btn.btn-dark.outline:hover, button.btn-dark.outline:hover, [type="submit"].btn-dark.outline:hover, [type="reset"].btn-dark.outline:hover, [type="button"].btn-dark.outline:hover {
      --btn-color: var(--cirrus-dark); }
  .btn.btn-black, button.btn-black, [type="submit"].btn-black, [type="reset"].btn-black, [type="button"].btn-black {
    --btn-color: #000;
    --btn-fg: var(--cirrus-light);
    --btn-border-color: #000; }
    .btn.btn-black:focus, button.btn-black:focus, [type="submit"].btn-black:focus, [type="reset"].btn-black:focus, [type="button"].btn-black:focus {
      box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.5); }
    .btn.btn-black:hover, button.btn-black:hover, [type="submit"].btn-black:hover, [type="reset"].btn-black:hover, [type="button"].btn-black:hover {
      --btn-color: #000; }
  .btn.btn-primary, button.btn-primary, [type="submit"].btn-primary, [type="reset"].btn-primary, [type="button"].btn-primary {
    --btn-color: var(--cirrus-primary);
    --btn-fg: var(--cirrus-light);
    --btn-border-color: var(--cirrus-accent-border); }
    .btn.btn-primary:focus, button.btn-primary:focus, [type="submit"].btn-primary:focus, [type="reset"].btn-primary:focus, [type="button"].btn-primary:focus {
      box-shadow: 0 0 0 0.2rem rgba(240, 61, 77, 0.5); }
    .btn.btn-primary:hover, button.btn-primary:hover, [type="submit"].btn-primary:hover, [type="reset"].btn-primary:hover, [type="button"].btn-primary:hover {
      --btn-color: var(--cirrus-accent-hover); }
    .btn.btn-primary.outline:hover, button.btn-primary.outline:hover, [type="submit"].btn-primary.outline:hover, [type="reset"].btn-primary.outline:hover, [type="button"].btn-primary.outline:hover {
      --btn-color: var(--cirrus-primary); }
  .btn.btn-info, button.btn-info, [type="submit"].btn-info, [type="reset"].btn-info, [type="button"].btn-info {
    --btn-color: var(--cirrus-info);
    --btn-fg: var(--cirrus-light);
    --btn-border-color: var(--cirrus-info); }
    .btn.btn-info:focus, button.btn-info:focus, [type="submit"].btn-info:focus, [type="reset"].btn-info:focus, [type="button"].btn-info:focus {
      box-shadow: 0 0 0 0.2rem rgba(41, 114, 250, 0.5); }
    .btn.btn-info:hover, button.btn-info:hover, [type="submit"].btn-info:hover, [type="reset"].btn-info:hover, [type="button"].btn-info:hover {
      --btn-color: var(--cirrus-info-hover); }
    .btn.btn-info.outline:hover, button.btn-info.outline:hover, [type="submit"].btn-info.outline:hover, [type="reset"].btn-info.outline:hover, [type="button"].btn-info.outline:hover {
      --btn-color: var(--cirrus-info); }
  .btn.btn-link, button.btn-link, [type="submit"].btn-link, [type="reset"].btn-link, [type="button"].btn-link {
    --btn-color: var(--cirrus-link);
    --btn-fg: var(--cirrus-light);
    --btn-border-color: var(--cirrus-link); }
    .btn.btn-link:focus, button.btn-link:focus, [type="submit"].btn-link:focus, [type="reset"].btn-link:focus, [type="button"].btn-link:focus {
      box-shadow: 0 0 0 0.2rem rgba(94, 92, 199, 0.5); }
    .btn.btn-link:hover, button.btn-link:hover, [type="submit"].btn-link:hover, [type="reset"].btn-link:hover, [type="button"].btn-link:hover {
      --btn-color: var(--cirrus-link-dark); }
    .btn.btn-link.outline, button.btn-link.outline, [type="submit"].btn-link.outline, [type="reset"].btn-link.outline, [type="button"].btn-link.outline {
      --btn-fg: var(--cirrus-link);
      border: 1px solid transparent; }
    .btn.btn-link.outline:hover, button.btn-link.outline:hover, [type="submit"].btn-link.outline:hover, [type="reset"].btn-link.outline:hover, [type="button"].btn-link.outline:hover {
      --btn-color: var(--cirrus-link-hover);
      border: 1px solid transparent;
      text-decoration: underline; }
  .btn.btn-success, button.btn-success, [type="submit"].btn-success, [type="reset"].btn-success, [type="button"].btn-success {
    --btn-color: var(--cirrus-success);
    --btn-fg: var(--cirrus-light);
    --btn-border-color: var(--cirrus-success); }
    .btn.btn-success:focus, button.btn-success:focus, [type="submit"].btn-success:focus, [type="reset"].btn-success:focus, [type="button"].btn-success:focus {
      box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.5); }
    .btn.btn-success:hover, button.btn-success:hover, [type="submit"].btn-success:hover, [type="reset"].btn-success:hover, [type="button"].btn-success:hover {
      --btn-color: var(--cirrus-success-hover); }
    .btn.btn-success.outline:hover, button.btn-success.outline:hover, [type="submit"].btn-success.outline:hover, [type="reset"].btn-success.outline:hover, [type="button"].btn-success.outline:hover {
      --btn-color: var(--cirrus-success); }
  .btn.btn-warning, button.btn-warning, [type="submit"].btn-warning, [type="reset"].btn-warning, [type="button"].btn-warning {
    --btn-color: var(--cirrus-warning);
    --btn-fg: var(--cirrus-dark);
    --btn-border-color: var(--cirrus-warning); }
    .btn.btn-warning:focus, button.btn-warning:focus, [type="submit"].btn-warning:focus, [type="reset"].btn-warning:focus, [type="button"].btn-warning:focus {
      box-shadow: 0 0 0 0.2rem rgba(250, 182, 51, 0.5); }
    .btn.btn-warning:hover, button.btn-warning:hover, [type="submit"].btn-warning:hover, [type="reset"].btn-warning:hover, [type="button"].btn-warning:hover {
      --btn-color: var(--cirrus-warning-hover); }
    .btn.btn-warning.outline:hover, button.btn-warning.outline:hover, [type="submit"].btn-warning.outline:hover, [type="reset"].btn-warning.outline:hover, [type="button"].btn-warning.outline:hover {
      --btn-color: var(--cirrus-warning); }
  .btn.btn-danger, button.btn-danger, [type="submit"].btn-danger, [type="reset"].btn-danger, [type="button"].btn-danger {
    --btn-color: var(--cirrus-danger);
    --btn-fg: var(--cirrus-light);
    --btn-border-color: var(--cirrus-danger); }
    .btn.btn-danger:focus, button.btn-danger:focus, [type="submit"].btn-danger:focus, [type="reset"].btn-danger:focus, [type="button"].btn-danger:focus {
      box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.5); }
    .btn.btn-danger:hover, button.btn-danger:hover, [type="submit"].btn-danger:hover, [type="reset"].btn-danger:hover, [type="button"].btn-danger:hover {
      --btn-color: var(--cirrus-danger-hover); }
    .btn.btn-danger.outline:hover, button.btn-danger.outline:hover, [type="submit"].btn-danger.outline:hover, [type="reset"].btn-danger.outline:hover, [type="button"].btn-danger.outline:hover {
      --btn-color: var(--cirrus-danger); }
  .btn.btn-xsmall, button.btn-xsmall, [type="submit"].btn-xsmall, [type="reset"].btn-xsmall, [type="button"].btn-xsmall {
    padding: 0 0.5rem;
    font-size: 50%; }
  .btn.btn-small, button.btn-small, [type="submit"].btn-small, [type="reset"].btn-small, [type="button"].btn-small {
    padding: 0.25rem 1rem;
    font-size: 70%; }
  .btn.btn-large, button.btn-large, [type="submit"].btn-large, [type="reset"].btn-large, [type="button"].btn-large {
    padding: 0.75rem 2rem;
    font-size: 90%; }
  .btn.btn-xlarge, button.btn-xlarge, [type="submit"].btn-xlarge, [type="reset"].btn-xlarge, [type="button"].btn-xlarge {
    padding: 1rem 2.5rem;
    font-size: 110%; }
  .btn.btn-success, button.btn-success, [type="submit"].btn-success, [type="reset"].btn-success, [type="button"].btn-success {
    border-color: var(--cirrus-success); }
    .btn.btn-success:focus, button.btn-success:focus, [type="submit"].btn-success:focus, [type="reset"].btn-success:focus, [type="button"].btn-success:focus {
      box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
  .btn.btn-error, button.btn-error, [type="submit"].btn-error, [type="reset"].btn-error, [type="button"].btn-error {
    border-color: var(--cirrus-danger); }
    .btn.btn-error:focus, button.btn-error:focus, [type="submit"].btn-error:focus, [type="reset"].btn-error:focus, [type="button"].btn-error:focus {
      box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
  .btn .fa-wrapper.pad-right, button .fa-wrapper.pad-right, [type="submit"] .fa-wrapper.pad-right, [type="reset"] .fa-wrapper.pad-right, [type="button"] .fa-wrapper.pad-right {
    margin-right: 0.4rem; }
  .btn .fa-wrapper.pad-left, button .fa-wrapper.pad-left, [type="submit"] .fa-wrapper.pad-left, [type="reset"] .fa-wrapper.pad-left, [type="button"] .fa-wrapper.pad-left {
    margin-left: 0.4rem; }
  .btn span:first-child, button span:first-child, [type="submit"] span:first-child, [type="reset"] span:first-child, [type="button"] span:first-child {
    margin-right: 0.2rem; }
  .btn span:last-child, button span:last-child, [type="submit"] span:last-child, [type="reset"] span:last-child, [type="button"] span:last-child {
    margin-left: 0.2rem; }

[class^='btn-']:not(.btn-container):not(.btn-close),
[class*=' btn-']:not(.btn-container):not(.btn-close) {
  background-color: var(--btn-color);
  border: 1px solid var(--btn-border-color);
  color: var(--btn-fg);
  transition: all var(--animation-duration);
  /* Outline Variants */ }
  [class^='btn-']:not(.btn-container):not(.btn-close):hover,
  [class*=' btn-']:not(.btn-container):not(.btn-close):hover {
    background-color: var(--btn-color);
    border-color: var(--btn-border-color);
    transition: all var(--animation-duration); }
  [class^='btn-']:not(.btn-container):not(.btn-close).outline,
  [class*=' btn-']:not(.btn-container):not(.btn-close).outline {
    background-color: transparent;
    color: var(--btn-color); }
    [class^='btn-']:not(.btn-container):not(.btn-close).outline:hover,
    [class*=' btn-']:not(.btn-container):not(.btn-close).outline:hover {
      background-color: var(--btn-color);
      color: var(--btn-fg);
      transition: all var(--animation-duration); }
    [class^='btn-']:not(.btn-container):not(.btn-close).outline.btn-transparent,
    [class*=' btn-']:not(.btn-container):not(.btn-close).outline.btn-transparent {
      color: #495057 !important; }

/* Make the loader white so it is visible */
.loading.btn-accent:after {
  border: 2px solid #fff;
  border-right-color: transparent;
  border-top-color: transparent; }

/* BUTTON GROUPS */
/* Will group buttons with components in a single component */
.btn-group {
  display: -webkit-inline-box;
  display: inline-flex;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex; }
  .btn-group .btn, .btn-group button, .btn-group [type="submit"], .btn-group [type="reset"], .btn-group [type="button"] {
    -ms-flex: 1 0 auto;
    -webkit-box-flex: 1;
    flex: 1 0 auto;
    margin: 0; }
    .btn-group .btn:first-child:not(:last-child), .btn-group button:first-child:not(:last-child), .btn-group [type="submit"]:first-child:not(:last-child), .btn-group [type="reset"]:first-child:not(:last-child), .btn-group [type="button"]:first-child:not(:last-child) {
      /* Style the first child in group > 1 buttons */
      border-top-right-radius: 0;
      border-bottom-right-radius: 0; }
    .btn-group .btn:last-child:not(:first-child), .btn-group button:last-child:not(:first-child), .btn-group [type="submit"]:last-child:not(:first-child), .btn-group [type="reset"]:last-child:not(:first-child), .btn-group [type="button"]:last-child:not(:first-child) {
      /* Style the last child in group > 1 buttons */
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      margin-left: -1px; }
    .btn-group .btn:not(:first-child):not(:last-child), .btn-group button:not(:first-child):not(:last-child), .btn-group [type="submit"]:not(:first-child):not(:last-child), .btn-group [type="reset"]:not(:first-child):not(:last-child), .btn-group [type="button"]:not(:first-child):not(:last-child) {
      /* Style button in middle of group */
      border-radius: 0;
      /* Remove roundness from center buttons */
      margin-left: -1px; }
    .btn-group .btn:focus, .btn-group button:focus, .btn-group [type="submit"]:focus, .btn-group [type="reset"]:focus, .btn-group [type="button"]:focus {
      z-index: 1; }
  .btn-group.btn-group-fill {
    /* Makes the button group fill the width and proportion the buttons to fill the space */
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox; }
    .btn-group.btn-group-fill .btn, .btn-group.btn-group-fill button, .btn-group.btn-group-fill [type="submit"], .btn-group.btn-group-fill [type="reset"], .btn-group.btn-group-fill [type="button"] {
      -ms-flex: 1 0;
      -webkit-box-flex: 1;
      flex: 1 0;
      /* Make the buttons fill the available width and proportion themselves */ }
    .btn-group.btn-group-fill:focus {
      z-index: 1; }

@media screen and (max-width: 767px) {
  .btn-group {
    display: flex;
    flex-direction: column; }
    .btn-group .btn, .btn-group button, .btn-group [type="submit"], .btn-group [type="reset"], .btn-group [type="button"] {
      margin-bottom: -1px; }
      .btn-group .btn:first-child:not(:last-child), .btn-group button:first-child:not(:last-child), .btn-group [type="submit"]:first-child:not(:last-child), .btn-group [type="reset"]:first-child:not(:last-child), .btn-group [type="button"]:first-child:not(:last-child) {
        border-radius: 0.25rem 0.25rem 0 0; }
      .btn-group .btn:not(:first-child):not(:last-child), .btn-group button:not(:first-child):not(:last-child), .btn-group [type="submit"]:not(:first-child):not(:last-child), .btn-group [type="reset"]:not(:first-child):not(:last-child), .btn-group [type="button"]:not(:first-child):not(:last-child) {
        margin-left: 0; }
      .btn-group .btn:last-child:not(:first-child), .btn-group button:last-child:not(:first-child), .btn-group [type="submit"]:last-child:not(:first-child), .btn-group [type="reset"]:last-child:not(:first-child), .btn-group [type="button"]:last-child:not(:first-child) {
        border-radius: 0 0 0.25rem 0.25rem;
        margin-left: 0; } }

/*
  Functions
*/
/*
    Converts a given hex value to RGB.
*/
/*
    Generates delimited class name prefix.
*/
/*
    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
*/
/* Spacing */
/* Fonts */
/* Grid Count (Columns + Grid) */
/* Grid Percents */
/* Tab Sizes */
/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
/* Color scheme for Cirrus */
/* v2 Colors */
/* CODE */
code {
  --cirrus-code-label-fg: #868e96;
  padding: 0.3rem;
  margin: 0.5em 0;
  overflow: auto;
  background-color: var(--cirrus-code-bg);
  color: var(--cirrus-code-fg);
  border-radius: 3px;
  /* Dark theme for code */ }
  code:before {
    color: var(--cirrus-code-label-fg);
    content: attr(data-lang);
    font-size: 0.9rem;
    position: absolute;
    right: 1rem;
    top: 0.7rem; }
  code.dark {
    --cirrus-code-bg: #343a40;
    --cirrus-code-fg: #f8f9fa;
    --cirrus-border-left-bg: #212529;
    --cirrus-code-label-fg: #ced4da; }

pre > code {
  --cirrus-code-bg: #f8f9fa;
  --cirrus-code-fg: #343a40;
  --cirrus-border-left-bg: #e9ecef;
  background-color: var(--cirrus-code-bg);
  font-size: 14px;
  display: block;
  padding: 1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  text-align: left;
  line-height: 1.5;
  -moz-tab-size: 4;
  tab-size: 4;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  border-left: 0.3rem solid var(--cirrus-border-left-bg);
  margin: 0;
  position: relative;
  color: var(--cirrus-code-fg); }
  pre > code[data-lang]:not([data-lang='']) {
    padding: 2rem 1.5rem 1rem; }

/* Spacing */
/* Fonts */
/* Grid Count (Columns + Grid) */
/* Grid Percents */
/* Tab Sizes */
/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
/*
  Functions
*/
/*
    Converts a given hex value to RGB.
*/
/*
    Generates delimited class name prefix.
*/
/*
    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
*/
/* Spacing */
/* Fonts */
/* Grid Count (Columns + Grid) */
/* Grid Percents */
/* Tab Sizes */
/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
/* Color scheme for Cirrus */
/* v2 Colors */
@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
/* FONT */
/* Constants */
/* Headers */
h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem; }

h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem; }

h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem; }

h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem; }

h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem; }

h6 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem; }

h1 {
  letter-spacing: 0.025rem; }

p,
article,
blockquote {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 1rem; }

p.lead {
  font-size: 1.2rem; }

blockquote {
  background-color: #f8f9fa;
  border-left: 5px solid #e9ecef;
  border-radius: 3px;
  margin-bottom: 1rem;
  padding: 1rem 2rem; }
  blockquote.text--large {
    font-size: 1.15rem; }
  blockquote p {
    margin: 0; }

cite {
  opacity: 0.7; }

mark,
.mark {
  padding: 0.2em;
  background-color: #f0e8c4; }

/* Headlines (for larger titles) */
.headline-1 {
  font-size: 6.5rem;
  letter-spacing: 0.05rem; }

.headline-2 {
  font-size: 5.5rem;
  letter-spacing: 0.05rem; }

.headline-3 {
  font-size: 4.5rem;
  letter-spacing: 0.05rem; }

.headline-4 {
  font-size: 3.5rem;
  letter-spacing: 0.05rem; }

.font-alt {
  font-family: 'Nunito Sans'; }

.content h1 {
  line-height: 1.125em;
  margin: 1rem 0; }

.content h2 {
  line-height: 1.125em;
  margin: 1rem 0; }

.content h3 {
  line-height: 1.125em;
  margin: 1rem 0; }

.content h4 {
  line-height: 1.125em;
  margin: 1rem 0; }

.content h5 {
  line-height: 1.125em;
  margin: 1rem 0; }

.content h6 {
  line-height: 1.125em;
  margin: 1rem 0; }

/* TODO: To deprecate */
.title {
  font-weight: bold; }

.title:not(:last-child),
.subtitle:not(:last-child) {
  margin-bottom: 1rem; }

.title + .subtitle {
  /* Make the subtitlte closer to the title */
  margin-top: -0.75rem; }

/* Use default line-height for these texts and when line-height-inherit is specified */
.card-tile p,
.card-tile article,
.card-tile blockquote {
  line-height: inherit; }

/* Weights */
.font-thin {
  font-weight: 200; }

.font-light {
  font-weight: 300; }

.font-normal {
  font-weight: 400; }

.font-semibold {
  font-weight: 600; }

.font-bold {
  font-weight: 700; }

/* Text Transformations */
.uppercase {
  text-transform: uppercase; }

.lowercase {
  text-transform: lowercase; }

.capitalize {
  text-transform: capitalize; }

.rtl {
  direction: rtl; }

.white {
  color: #fff !important; }

.faded {
  opacity: 0.75; }

/* Font Awesome */
.icon {
  /* Usually used in spans */
  display: inline-block;
  /* font-size: 21px; Allow font sizes for icons to be overwritten */
  /* line-height: 1.5rem; Allow line height to be inherited or overwritten */
  text-align: center;
  width: 1.5rem;
  vertical-align: baseline; }
  .icon.x-small {
    margin: 0.55rem 0 0 0.1rem; }
  .icon.small {
    margin: 0.95rem 0 0 0.1rem; }
  .icon .fa-wrapper {
    font-size: inherit; }

.info {
  display: block;
  font-size: var(--font-size-s);
  margin-top: 0.25rem;
  color: #868e96; }
  .info.inline {
    /* Keeps the extra info inline */
    display: inline-block;
    margin-left: 0.5rem; }

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid\9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent; }

/* Other text elements */
abbr[title] {
  border-bottom: 0.1rem dotted;
  cursor: help;
  text-decoration: none; }

kbd {
  background-color: var(--cirrus-fg);
  border-radius: 0.2rem;
  color: #fff;
  display: inline-block;
  line-height: 1;
  padding: 0.5rem;
  vertical-align: baseline; }

/* MOBILE */
@media screen and (max-width: 639px) {
  h1 {
    font-size: 2.25rem; }
  h2 {
    font-size: 2rem; }
  h3 {
    font-size: 1.75rem; }
  h4 {
    font-size: 1.5rem; }
  h5 {
    font-size: 1.25rem; }
  h6 {
    font-size: 1rem; }
  .headline-1 {
    font-size: 3.75rem; }
  .headline-2 {
    font-size: 3.5rem; }
  .headline-3 {
    font-size: 3.25rem; }
  .headline-4 {
    font-size: 3rem; }
  p,
  article,
  blockquote {
    margin: 1rem 0; } }

/*
  Functions
*/
/*
    Converts a given hex value to RGB.
*/
/*
    Generates delimited class name prefix.
*/
/*
    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
*/
/* Spacing */
/* Fonts */
/* Grid Count (Columns + Grid) */
/* Grid Percents */
/* Tab Sizes */
/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
/* Color scheme for Cirrus */
/* v2 Colors */
/* FOOTER */
.footer {
  background-color: #343a40;
  padding: 6rem 0;
  text-align: center;
  margin-top: 5rem;
  width: 100%; }
  .footer.footer--fixed {
    bottom: 0;
    position: fixed; }
  .footer a {
    color: #e9ecef;
    font-weight: bolder; }
  .footer a:hover {
    color: #ced4da; }
  .footer p {
    color: #868e96; }
  .footer ul {
    margin: 0.5rem 0;
    /* Remove the left margin seen in global style */ }
  .footer .footer__title {
    text-align: center;
    letter-spacing: 6px;
    position: relative;
    padding-bottom: 10px; }
  .footer .footer__list-title {
    color: #ced4da;
    font-size: 75%;
    text-transform: uppercase;
    font-weight: bolder; }
    .footer .footer__list-title::after {
      content: '';
      display: block;
      width: 10%;
      margin: auto;
      border-bottom: 2px solid;
      border-color: #343b49; }
  .footer ul a .footer__list-item,
  .footer .footer__list-item {
    margin: 0.1rem;
    color: #868e96;
    transition: all var(--animation-duration);
    font-size: 75%;
    text-transform: uppercase; }

/*
  Functions
*/
/*
    Converts a given hex value to RGB.
*/
/*
    Generates delimited class name prefix.
*/
/*
    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
*/
/* Spacing */
/* Fonts */
/* Grid Count (Columns + Grid) */
/* Grid Percents */
/* Tab Sizes */
/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
/* Color scheme for Cirrus */
/* v2 Colors */
/*
  Functions
*/
/*
    Converts a given hex value to RGB.
*/
/*
    Generates delimited class name prefix.
*/
/*
    Fetch feature flag for different utility class types for generating viewport classes (e.g., u-flex-sm, u-flex-md, etc.).
*/
/* Spacing */
/* Fonts */
/* Grid Count (Columns + Grid) */
/* Grid Percents */
/* Tab Sizes */
/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
/* Color scheme for Cirrus */
/* v2 Colors */
/*
    Global Mixins
*/
/*
    Bring to front on focus.
*/
/* FORMS */
/*
    Mixins
*/
/*
    Styles
*/
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']),
select {
  width: 100%;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  font-family: 'Nunito Sans';
  font-size: var(--font-size-m);
  letter-spacing: 0.02rem;
  transition: all 0.3s;
  outline: none;
  padding: 0.85rem 1.1rem;
  /* Input Field Sizes */
  /* Hold Font Awesome glyphs inside input fields */
  /* More sizes coming soon */
  /* Search field */ }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-xsmall,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-xsmall,
  select.input-xsmall,
  select select.input-xsmall {
    font-size: var(--font-size-xs);
    padding: 0.35rem 0.9rem; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-small,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-small,
  select.input-small,
  select select.input-small {
    font-size: var(--font-size-s);
    padding: 0.55rem 1rem; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-large,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-large,
  select.input-large,
  select select.input-large {
    font-size: var(--font-size-l); }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-xlarge,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-xlarge,
  select.input-xlarge,
  select select.input-xlarge {
    font-size: var(--font-size-xl); }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left,
  select.input-contains-icon,
  select.input-contains-icon-left {
    padding-left: 2.75rem; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right,
  select.input-contains-icon-right {
    padding-right: 2.75rem; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xsmall, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xsmall,
  select.input-contains-icon.input-xsmall,
  select.input-contains-icon-right.input-xsmall {
    padding-left: 2rem; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xsmall ~ .icon,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-xsmall ~ .icon,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xsmall ~ .icon.icon-right,
  select.input-contains-icon.input-xsmall ~ .icon,
  select.input-contains-icon-left.input-xsmall ~ .icon,
  select.input-contains-icon-right.input-xsmall ~ .icon.icon-right {
    line-height: 1.75rem;
    width: 1.75rem;
    font-size: 7px; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-small, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-small,
  select.input-contains-icon.input-small,
  select.input-contains-icon-right.input-small {
    padding-left: 2.5rem; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-small ~ .icon,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-small ~ .icon,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-small ~ .icon.icon-right,
  select.input-contains-icon.input-small ~ .icon,
  select.input-contains-icon-left.input-small ~ .icon,
  select.input-contains-icon-right.input-small ~ .icon.icon-right {
    width: 2.5rem;
    font-size: 14px; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-large, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-large,
  select.input-contains-icon.input-large,
  select.input-contains-icon-right.input-large {
    padding-left: 3.5rem; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-large ~ .icon,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-large ~ .icon,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-large ~ .icon.icon-right,
  select.input-contains-icon.input-large ~ .icon,
  select.input-contains-icon-left.input-large ~ .icon,
  select.input-contains-icon-right.input-large ~ .icon.icon-right {
    line-height: 3.5rem;
    width: 3.5rem;
    font-size: 28px; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xlarge, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xlarge,
  select.input-contains-icon.input-xlarge,
  select.input-contains-icon-right.input-xlarge {
    padding-left: 4rem; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xlarge ~ .icon,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-xlarge ~ .icon,
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xlarge ~ .icon.icon-right,
  select.input-contains-icon.input-xlarge ~ .icon,
  select.input-contains-icon-left.input-xlarge ~ .icon,
  select.input-contains-icon-right.input-xlarge ~ .icon.icon-right {
    line-height: 2.5rem;
    width: 3.75rem;
    font-size: 35px; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset'])[type='search'], input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).search,
  select[type='search'],
  select.search {
    background-repeat: no-repeat;
    background-position: left 0.6rem center;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path opacity="0.45" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>');
    /* NEEDS FIXING */
    padding-left: 2rem !important;
    -webkit-appearance: none;
    /* Fix Safari issue */ }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset'])[type='color'],
  select[type='color'] {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    transition: 0.3s;
    outline: 0;
    position: relative;
    height: 3rem;
    background-color: #fff;
    padding: 0.55rem 0.8rem !important; }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-success,
  select.input-success {
    border-color: var(--cirrus-success);
    background-color: rgba(0, 224, 0, 0.05) !important; }
    input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-success:focus,
    select.input-success:focus {
      box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-error,
  select.input-error {
    border-color: var(--cirrus-danger);
    background-color: rgba(244, 67, 54, 0.05) !important; }
    input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-error:focus,
    select.input-error:focus {
      box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }

textarea,
textarea[type='text'] {
  width: 100%;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  font-family: 'Nunito Sans';
  font-size: var(--font-size-m);
  letter-spacing: 0.02rem;
  transition: all 0.3s;
  outline: none;
  padding: 0.85rem 1.1rem;
  /* Input Field Sizes */
  /* Hold Font Awesome glyphs inside input fields */
  /* More sizes coming soon */
  margin: 0.5rem 0;
  padding: 1rem 1.3rem;
  min-height: 8rem;
  line-height: 1.5rem;
  resize: vertical; }
  textarea.input-xsmall,
  textarea select.input-xsmall,
  textarea[type='text'].input-xsmall,
  textarea[type='text'] select.input-xsmall {
    font-size: var(--font-size-xs);
    padding: 0.35rem 0.9rem; }
  textarea.input-small,
  textarea select.input-small,
  textarea[type='text'].input-small,
  textarea[type='text'] select.input-small {
    font-size: var(--font-size-s);
    padding: 0.55rem 1rem; }
  textarea.input-large,
  textarea select.input-large,
  textarea[type='text'].input-large,
  textarea[type='text'] select.input-large {
    font-size: var(--font-size-l); }
  textarea.input-xlarge,
  textarea select.input-xlarge,
  textarea[type='text'].input-xlarge,
  textarea[type='text'] select.input-xlarge {
    font-size: var(--font-size-xl); }
  textarea.input-contains-icon, textarea.input-contains-icon-left,
  textarea[type='text'].input-contains-icon,
  textarea[type='text'].input-contains-icon-left {
    padding-left: 2.75rem; }
  textarea.input-contains-icon-right,
  textarea[type='text'].input-contains-icon-right {
    padding-right: 2.75rem; }
  textarea.input-contains-icon.input-xsmall, textarea.input-contains-icon-right.input-xsmall,
  textarea[type='text'].input-contains-icon.input-xsmall,
  textarea[type='text'].input-contains-icon-right.input-xsmall {
    padding-left: 2rem; }
  textarea.input-contains-icon.input-xsmall ~ .icon,
  textarea.input-contains-icon-left.input-xsmall ~ .icon,
  textarea.input-contains-icon-right.input-xsmall ~ .icon.icon-right,
  textarea[type='text'].input-contains-icon.input-xsmall ~ .icon,
  textarea[type='text'].input-contains-icon-left.input-xsmall ~ .icon,
  textarea[type='text'].input-contains-icon-right.input-xsmall ~ .icon.icon-right {
    line-height: 1.75rem;
    width: 1.75rem;
    font-size: 7px; }
  textarea.input-contains-icon.input-small, textarea.input-contains-icon-right.input-small,
  textarea[type='text'].input-contains-icon.input-small,
  textarea[type='text'].input-contains-icon-right.input-small {
    padding-left: 2.5rem; }
  textarea.input-contains-icon.input-small ~ .icon,
  textarea.input-contains-icon-left.input-small ~ .icon,
  textarea.input-contains-icon-right.input-small ~ .icon.icon-right,
  textarea[type='text'].input-contains-icon.input-small ~ .icon,
  textarea[type='text'].input-contains-icon-left.input-small ~ .icon,
  textarea[type='text'].input-contains-icon-right.input-small ~ .icon.icon-right {
    width: 2.5rem;
    font-size: 14px; }
  textarea.input-contains-icon.input-large, textarea.input-contains-icon-right.input-large,
  textarea[type='text'].input-contains-icon.input-large,
  textarea[type='text'].input-contains-icon-right.input-large {
    padding-left: 3.5rem; }
  textarea.input-contains-icon.input-large ~ .icon,
  textarea.input-contains-icon-left.input-large ~ .icon,
  textarea.input-contains-icon-right.input-large ~ .icon.icon-right,
  textarea[type='text'].input-contains-icon.input-large ~ .icon,
  textarea[type='text'].input-contains-icon-left.input-large ~ .icon,
  textarea[type='text'].input-contains-icon-right.input-large ~ .icon.icon-right {
    line-height: 3.5rem;
    width: 3.5rem;
    font-size: 28px; }
  textarea.input-contains-icon.input-xlarge, textarea.input-contains-icon-right.input-xlarge,
  textarea[type='text'].input-contains-icon.input-xlarge,
  textarea[type='text'].input-contains-icon-right.input-xlarge {
    padding-left: 4rem; }
  textarea.input-contains-icon.input-xlarge ~ .icon,
  textarea.input-contains-icon-left.input-xlarge ~ .icon,
  textarea.input-contains-icon-right.input-xlarge ~ .icon.icon-right,
  textarea[type='text'].input-contains-icon.input-xlarge ~ .icon,
  textarea[type='text'].input-contains-icon-left.input-xlarge ~ .icon,
  textarea[type='text'].input-contains-icon-right.input-xlarge ~ .icon.icon-right {
    line-height: 2.5rem;
    width: 3.75rem;
    font-size: 35px; }

input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):focus,
select:focus,
textarea:focus,
textarea[type='text']:focus,
input[type='text'].input-focused,
.input-focused {
  border-color: #3dabf0;
  box-shadow: 0 0 0 0.2rem rgba(61, 171, 240, 0.45), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):focus.input-success,
  select:focus.input-success,
  textarea:focu