/* CSS variables */

:root {
  /* Layout variables */
  --container-max-width: 1100px;
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;

  /* Font families */
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
  --font-titles: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
  --font-numbers: "Questa Grande", Georgia, "Times New Roman", serif;

  /* Font sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */

  /* Colors */
  --primary-color: #ff5c39;
  --secondary-color: #333f48;
  --accent-color: #333f48;

  /* Edifecs Brand Colors */
  --edifecs-primary: #333f48;
  --danger: #ff5c39;
  --vermillion: #ff5c39;
  --link-color: #e02900;
  --edifecs-gray: #5c6670;
  --indigo: #00416a;
  --plum: #6e139d;
  --computer-gray: #bec6c4;
  --health-blue: #41b6e6;
  --medical-mint: #40c1ac;
  --value-yellow: #fdd26e;
  --background-gray: #f2f2f2;
  --light-gray: #f2f2f2;
  --white: #ffffff;
  --black: #000000;
  --card-background: rgba(238, 238, 238, 0.4);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

/* Sticky footer layout */
html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#hs-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1 0 auto;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.row-fluid .span1,
.row-fluid .span2,
.row-fluid .span3,
.row-fluid .span4,
.row-fluid .span5,
.row-fluid .span6,
.row-fluid .span7,
.row-fluid .span8,
.row-fluid .span9,
.row-fluid .span10,
.row-fluid .span11,
.row-fluid .span12 {
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .row-fluid .span1 {
    width: calc(
      var(--column-width-multiplier) * 1% * 1 - var(--column-gap) *
        (11 * var(--column-width-multiplier) / 100)
    );
  }
  .row-fluid .span2 {
    width: calc(
      var(--column-width-multiplier) * 1% * 2 - var(--column-gap) *
        (10 * var(--column-width-multiplier) / 100)
    );
  }
  .row-fluid .span3 {
    width: calc(
      var(--column-width-multiplier) * 1% * 3 - var(--column-gap) *
        (9 * var(--column-width-multiplier) / 100)
    );
  }
  .row-fluid .span4 {
    width: calc(
      var(--column-width-multiplier) * 1% * 4 - var(--column-gap) *
        (8 * var(--column-width-multiplier) / 100)
    );
  }
  .row-fluid .span5 {
    width: calc(
      var(--column-width-multiplier) * 1% * 5 - var(--column-gap) *
        (7 * var(--column-width-multiplier) / 100)
    );
  }
  .row-fluid .span6 {
    width: calc(
      var(--column-width-multiplier) * 1% * 6 - var(--column-gap) *
        (6 * var(--column-width-multiplier) / 100)
    );
  }
  .row-fluid .span7 {
    width: calc(
      var(--column-width-multiplier) * 1% * 7 - var(--column-gap) *
        (5 * var(--column-width-multiplier) / 100)
    );
  }
  .row-fluid .span8 {
    width: calc(
      var(--column-width-multiplier) * 1% * 8 - var(--column-gap) *
        (4 * var(--column-width-multiplier) / 100)
    );
  }
  .row-fluid .span9 {
    width: calc(
      var(--column-width-multiplier) * 1% * 9 - var(--column-gap) *
        (3 * var(--column-width-multiplier) / 100)
    );
  }
  .row-fluid .span10 {
    width: calc(
      var(--column-width-multiplier) * 1% * 10 - var(--column-gap) *
        (2 * var(--column-width-multiplier) / 100)
    );
  }
  .row-fluid .span11 {
    width: calc(
      var(--column-width-multiplier) * 1% * 11 - var(--column-gap) *
        (1 * var(--column-width-multiplier) / 100)
    );
  }
}