:root {
  /* Colors */
  --color-primary: #3E5EFF;
  --color-primary-darken: #1e44ff;
  --color-primary-lighten: #5b76ff;
  --color-secondary: #7341FF;
  --color-secondary-darken: #5b21ff;
  --color-secondary-lighten: #7341FF;
  --color-accent: #07CCDE;
  --color-accent-darken: #06b8c8;
  --color-accent-lighten: #17e5f8;
  --color-success: #05DE93;
  --color-success-darken: #05C884;
  --color-success-lighten: #14FAAA;
  --color-warning: #f2c500;
  --color-warning-darken: #DAB100;
  --color-warning-lighten: #FFD51B;
  --color-error: #F53332;
  --color-error-darken: #F41716;
  --color-error-lighten: #F65251;
  --color-info: #1489FF;
  --color-info-darken: #007BF7;
  --color-info-lighten: #1489FF;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-1: #F8F9FA;
  --color-gray-2: #E9ECEF;
  --color-gray-3: #DEE2E6;
  --color-gray-4: #CED4DA;
  --color-gray-5: #B5BBC2;
  --color-gray-6: #9CA3AA;
  --color-gray-7: #838B92;
  --color-gray-8: #6A737A;
  --color-gray-9: #515861;
  --color-gray-10: #383E48;

  --color-primary-rgb: 62, 94, 255;
  --color-primary-darken-rgb: 30, 68, 255;
  --color-primary-lighten-rgb: 91, 118, 255;
  --color-secondary-rgb: 115, 65, 255;
  --color-secondary-darken-rgb: 91, 33, 255;
  --color-secondary-lighten-rgb: 115, 65, 255;
  --color-accent-rgb: 7, 204, 222;
  --color-accent-darken-rgb: 6, 184, 200;
  --color-accent-lighten-rgb: 23, 229, 248;
  --color-success-rgb: 5, 222, 147;
  --color-success-darken-rgb: 5, 200, 132;
  --color-success-lighten-rgb: 20, 250, 170;
  --color-warning-rgb: 242, 197, 0;
  --color-warning-darken-rgb: 218, 177, 0;
  --color-warning-lighten-rgb: 255, 213, 27;
  --color-error-rgb: 245, 51, 50;
  --color-error-darken-rgb: 244, 23, 22;
  --color-error-lighten-rgb: 246, 82, 81;
  --color-info-rgb: 20, 137, 255;
  --color-info-darken-rgb: 0, 123, 247;
  --color-info-lighten-rgb: 20, 137, 255;
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --color-gray-1-rgb: 248, 249, 250;
  --color-gray-2-rgb: 233, 236, 239;
  --color-gray-3-rgb: 222, 226, 230;
  --color-gray-4-rgb: 206, 212, 218;
  --color-gray-5-rgb: 181, 187, 194;
  --color-gray-6-rgb: 156, 163, 170;
  --color-gray-7-rgb: 131, 139, 146;
  --color-gray-8-rgb: 106, 115, 122;
  --color-gray-9-rgb: 81, 88, 97;
  --color-gray-10-rgb: 56, 62, 72;

  --gradient-primary: linear-gradient(225deg, rgba(62, 94, 255, 1) 0%, rgba(91, 33, 255,1 ) 100%);
  --gradient-primary-reverse: linear-gradient(225deg, rgba(91, 33, 255,1 ) 0%, rgba(62, 94, 255, 1) 100%);

  --gradient-white: linear-gradient(145deg, #fefefe, #ffffff);

  /* Font Size */
  --base-font-size: 16px;
  --poppins-font: 'Poppins', san-serif;
  --base-letter-spacing: 1px;
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

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

body {
  margin: 0;
  padding: 0;
  font-size: var(--base-font-size);
  font-family: var(--poppins-font);
  color: rgba(var(--color-black-rgb), 1);
  background: var(--gradient-white);
}

p {
  line-height: 1.5;
}

a {
  color: rgba(var(--color-secondary-rgb), 1);
  text-decoration: none;
}

a:hover {
    color: rgba(var(--color-secondary-darken-rgb), 1);
    text-decoration: underline;
  }

a:visited {
    color: rgba(var(--color-primary-darken-rgb), 1);
  }

a.button {
  display: block;
  margin: 10px 0px;
  padding: 10px 20px;
  border-radius: .25rem;
  text-align: center;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 400;
  color: #fff;
  line-height: 16px;
  letter-spacing: 1.2px;
  background: var(--gradient-primary);
  border: 0 solid;
  overflow: hidden;
}

a.button:hover {
    cursor: pointer;
    transition: all .3s ease-in;
    outline: 1px solid var(--color-secondary);
    box-shadow: 0px 0px 6px var(--color-secondary);
    background: var(--gradient-primary-reverse);
  }

.toggle-button {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: rgba(var(--color-accent-rgb), 1);
  color: white;
}

.toggle-button svg {
    height: 1.5rem;
  }

.toggle-button:hover {
    background: rgba(var(--color-accent-darken-rgb), 1);
  }

.authentication {
  display: flex;
  padding: .5rem;
  gap: .5rem;
}

.authentication form {
    margin-top: 0;
  }

.authentication a, .authentication button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: .25rem;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    letter-spacing: 1.2px;
    line-height: 1;
    background: var(--gradient-primary);
    border: 0 solid;
    box-shadow: 0 0 4px rgba(var(--color-white-rgb), 1);
    vertical-align: baseline;
  }

.authentication a:hover, .authentication button:hover {
      cursor: pointer;
      transition: all .3s ease-in;
      box-shadow: 0px 0px 6px var(--color-secondary);
      background: var(--gradient-primary-reverse);
    }

footer .authentication {
    padding: 0;
  }

footer .authentication a, footer .authentication button {
      padding: 0;
      background: none;
      box-shadow: none;
    }

footer .authentication a:hover, footer .authentication button:hover {
        background: none;
      }

@media (max-width: 1024px) {
    .authentication a, .authentication button {
      padding: .5rem;
      font-size: .75rem;
    }
}

.context-nav {
  position: fixed;
  top: 30vh;
  left: 1rem;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
}

.context-nav a {
    padding: 0 1rem 0 0;
    font-size: 1.5rem;
    color: rgba(var(--color-primary-rgb), 1);
  }

.context-nav a:hover {
      color: rgba(var(--color-accent-lighten-rgb), 1);
    }

.context-nav a.active {
      border-bottom: 4px solid rgba(var(--color-accent-rgb), 1);
    }

.context-nav a.active:hover {
        text-decoration: none;
        color: rgba(var(--color-accent-lighten-rgb), 1);
        border-bottom: 4px solid rgba(var(--color-accent-lighten-rgb), 1);
      }

.context-nav a:visited {
      color: rgba(var(--color-gray-3-rgb), 1);
    }

@media (max-width: 768px) {
  .context-nav {
    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 1rem;

    width: 100vw;
    padding-top: .5rem;
  }

    .context-nav a {
      font-size: 1.25rem;
    }
}

.parallax-container .context-nav a {
      color: rgba(var(--color-white-rgb), 1);
    }

#balance, #budget {
  padding: 1rem;
  border: 1px solid var(--color-gray-4);
  border-radius: .5rem;
  box-shadow: 5px 5px 15px var(--color-gray-4),
              -5px -5px 15px white;
}

#balance h3, #budget h3 {
    color: var(--color-gray-8);
  }

#balance h4, #budget h4 {
    margin: 1.5rem 0;
    font-size: 3rem;
    line-height: 1;
  }

#budget div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

#budget button {
    background: var(--color-secondary);
    border-radius: 4px;
    border: 0px;
    padding: 6px;
    box-shadow: 0 0 12px rgba(60,60,60, .7);
    text-align: center;
    line-height: 1rem;
  }

#budget button svg {
      fill: white;
      height: 2rem;
    }

#budget button:hover {
      background: var(--color-secondary-darken);
    }

header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 4px rgba(0,0,0,.5);
}

header .logo img {
      height: 5rem;
    }

header nav {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
    align-items: center;
    gap: .25rem;
    margin-right: 1rem;
  }

header nav a {
      padding: 0 .5rem;
      font-size: 1.5rem;
      font-weight: 600;
      color: rgba(var(--color-primary-rgb), 1);
    }

header nav a:hover {
        color: rgba(var(--color-accent-lighten-rgb), 1);
      }

header nav a.active {
        border-bottom: 4px solid rgba(var(--color-accent-rgb), 1);
      }

header nav a.active:hover {
          text-decoration: none;
          color: rgba(var(--color-accent-lighten-rgb), 1);
          border-bottom: 4px solid rgba(var(--color-accent-lighten-rgb), 1);
        }

header nav .app-nav {
      display: flex;
      gap: 1rem;
      align-items: center;
      margin: auto;

      text-align: center;
    }

header nav .app-nav a {
        display: inline-block;
      }

.parallax-container header {
    background: rgba(var(--color-black-rgb), .9);
    color: rgba(var(--color-white-rgb), 1);
  }

.parallax-container header nav a {
        color: rgba(var(--color-white-rgb), 1);
      }

@media (max-width: 1200px) {
      header .logo img {
        height: 4rem;
      }
      header nav a {
        font-size: 1.25rem;
      }

      header nav .app-nav {
        gap: .5rem;
      }
}

@media (max-width: 1024px) {
      header .logo img {
        height: 3rem;
      }
      header nav a {
        font-size: 1rem;
      }

      header nav .app-nav {
        gap: .25rem;
      }
}

@media (max-width: 768px) {
  header {
    position: fixed;
    top: 15px;
    left: 0;
    width: 100vw;

    margin-top: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

    header .logo {
      /* width: 100vw; */
      display: flex;
      justify-content: center;
    }


      header .logo img {
        height: 80px;
      }

    header nav {
      /* width: 100vw; */
      justify-content: center;
    }

      header nav .app-nav {
        display: none;
      }
}

@media (max-width: 350px) {
      header .logo img {
        height: 50px;
      }
}

footer {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  padding-top: .5rem;

  width: 100vw;

  background: var(--gradient-primary-reverse);
}

footer nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
  }

footer nav .app-nav-container {
      display: none;
    }

footer nav .essential-links {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding-left: 1rem;
    }

footer nav #legal-nav {
      display: flex;
      gap: .25rem;
      padding-right: 1rem;
      font-size: .75rem;
      align-items: center;
      color: rgba(var(--color-white-rgb), 1);
    }

footer nav #legal-nav a {
        color: rgba(var(--color-white-rgb), 1);
      }

footer #credits {
    font-size: .75rem;
    color: white;
  }

footer #credits a {
      color: white;
    }

@media (max-width: 768px) {
    footer nav {
      flex-direction: column;
      align-items: flex-start;
      padding: 0;
    }

      footer nav .essential-links {
        display: grid;
        grid-template-columns: 1f 1fr;
        grid-template-rows: 1fr 1fr;
      }

        footer nav .essential-links .authentication {
          grid-column-start: 1;
          grid-row-start: 1;
        }

        footer nav .essential-links #legal-nav {
          grid-column-start: 2;
          grid-row-start: 1;
          justify-content: flex-end;
        }

        footer nav .essential-links #credits {
          grid-column-start: 1;
          grid-column-end: 3;
          grid-row-start: 2;
          text-align: center;
        }

      footer nav .app-nav-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-self: center;
      }

        footer nav .app-nav-container .toggle-button {
          margin-top: -2.5rem;
        }

        footer nav .app-nav-container .app-nav {
          position: absolute;
          top: -125px;
          display: flex;
          gap: .5rem;
          flex-wrap: wrap;
          width: 350px;
          justify-content: center;

          opacity: 0;
          visibility: hidden;

          transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

          footer nav .app-nav-container .app-nav.show {
            opacity: 1;
            visibility: visible;
          }

          footer nav .app-nav-container .app-nav li {
            display: flex;
            justify-content: center;

          }

          footer nav .app-nav-container .app-nav a {
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(var(--color-accent-rgb), 1);
            border-radius: 50%;
            width: 100px;
            height: 100px;
            color: white;
            text-decoration: none;
            text-align: center;

            border: 1px solid black;
          }

            footer nav .app-nav-container .app-nav a.active {
              background-color: rgba(var(--color-accent-lighten-rgb), 1);
            }

      footer nav #legal-nav {
        padding-left: 1rem;
        padding-bottom: .5rem;
      }
}

#carousel {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 768px;
  margin-top: 10rem;
}

#carousel .slide {
    position: absolute;
  }

#carousel p {
    color: rgba(var(--color-white-rgb), 1);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
  }

#carousel img {
    width: 100%;
    max-width: 500px;
  }

#carousel .refresh {
    padding: 10px;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

#carousel .next,
  #carousel .previous {
    top: calc(50% - 20px);
    position: absolute;
    background: var(--gradient-primary);
    border-radius: 30px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,.7);
    font-weight: bold;
    font-size: 18px;
    z-index: 0;
    color: white;
  }

#carousel .next svg, #carousel .previous svg {
      fill: white;
    }

#carousel .dots {
    position: absolute;
    bottom: 0px;
    display: flex;
    gap: 1rem;
  }

#carousel .dots button {
      background: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }

#carousel .dots button.active {
        background: var(--color-accent);
      }

#carousel .next {
    right: 5px;
  }

#carousel .previous {
    left: 0px;
  }

#how-we-work {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

@media screen and (max-width: 650px) {

#how-we-work {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-left: 1rem;
    margin-right: 1rem;
}
  }

#how-we-work .card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 0 0 1rem;
    border-radius: .5rem;
    background: #ffffff;
    box-shadow: 5px 5px 15px #2b42b3,
             -5px -5px 15px #517aff;
  }

#how-we-work .card .icon {
      padding: 1rem;
      position: absolute;
      top: -.5rem;
      left: -1.5rem;
      border-radius: 50%;
      box-shadow:  2px 2px 6px #d8d8d8,
        -2px -2px 6px #517aff;
      background: linear-gradient(145deg, #683be6, #7b46ff);
    }

#how-we-work .card .icon svg {
        height: 2rem;
        fill: var(--color-white);
      }

#how-we-work .card h3 {
      padding-top: .5rem;
      color: var(--color-primary);
    }

#how-we-work .card p {
      padding: 0 2rem;
      font-size: 1.25rem;
      color: var(--color-gray-8);
      text-align: left;
    }

#how-we-work .card p .callout {
        font-weight: bold;
        color: var(--color-accent);
      }

#how-we-work .card img {
      margin: 0;
      padding: 0;
      width: 100%;
    }

#stats {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

@media screen and (max-width: 460px) {

#stats {
    flex-direction: column;
    justify-content: center;
}
  }

#stats .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex: 1 1 250px;
    padding: 1rem;
    width: 250px;
    height: 200px;
    border-radius: .5rem;
    box-shadow: inset 20px 20px 60px #6237d9,
            inset -20px -20px 60px #844bff;
    background: var(--color-secondary);
    color: white;
  }

#stats .card h3 {
      font-size: 2rem;
    }

#stats .card svg {
      height: 3rem;
      fill: white;
    }

#stats .card .stat {
      font-size: 2.5rem;
    }

@property --gradient-degrees {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

#partners section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
  }

#partners #thanks {
    position: relative;
    padding: 3px;
    animation: 5s rotate-gradient infinite ease-in-out;
    background: linear-gradient(var(--gradient-degrees), #a391ff, #918cff, #7e77ff, #a391ff);
    background-size: 200% 200%;
    border-radius: .25rem;
    box-shadow: 0px 0px 4px 2px  rgba(255, 255, 255, .3);
    z-index: 1;

  }

#partners section:first-child {
    position: relative;
    background: rgba(0, 0, 0, .85);
    border-radius: .25rem;
    gap: 1rem;
  }

#partners section:first-child::before {
      position: absolute;
      top: 1.25rem;
      bottom: 0rem;
      left: 0;
      right: 0;
      content: "";
      animation: 5s rotate-gradient infinite ease-in-out;
      background-image: linear-gradient(var(--gradient-degrees), #a391ff, #918cff, #7e77ff, #a391ff);
      z-index: -1;

      filter: blur(40px);

      border-radius: 2rem;
    }

#partners section + section {
    padding: 2rem;
  }

#partners .stamp {
    padding: 1rem;
    color: white;
  }

#partners p {
    font-size: 1.25rem;
    line-height: 1.5;
    color: white;
    max-width: 300px;
    text-align: center;
  }

#partners img {
    width: 100%;
    max-width: 200px;
  }

#partners span {
    font-size: 1.5rem;
  }

#partners #partner-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));;
    gap: 1rem;
    align-items: center;
    color: white;
  }

@keyframes rotate-gradient {
  0% {
    --gradient-degrees: 0deg;
  }
  100% {
    --gradient-degrees: 360deg;
  }
}

form, form section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: .5rem;
  line-height: 1.5;
}

:is(form,form section) h3 {
    margin: 0;
  }

:is(form,form section) .row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
  }

:is(form,form section) .row .field {
      width: min-content;
    }

@media screen and (max-width: 675px) {

:is(form,form section) .row {
      flex-direction: column;
      width: 100%;
  }

      :is(form,form section) .row .field {
        width: 100%;
        max-width: 100%;
      }
    }

:is(form,form section) .guidance {
    width: 50%;
    margin-top: .5rem;
    padding: 0 .5rem;
    color: var(--color-gray-8);
    background: rgba(20,137,255,.1);
    border: 1px solid var(--color-info);
    border-radius: .25rem;
    font-size: .875rem;
  }

@media screen and (max-width: 675px) {

:is(form,form section) .guidance {
      width: 100%;
  }
    }

:is(form,form section) .error {
    padding: 0;
    margin: 0;
    color: var(--color-error);
    word-wrap: break-word;
    max-width: 400px;
    font-size: .875rem;
    text-align: left;
  }

:is(form,form section) .divider {
    border: none;
    height: 1px;
    background: var(--color-secondary);
    margin: 1rem 0;
  }

:is(form,form section) .field, :is(form,form section) .select-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-self: start;
  }

@media screen and (max-width: 675px) {

:is(form,form section) .field, :is(form,form section) .select-field {
      max-width: 100%;
  }
    }

:is(form,form section) .field .help-text, :is(form,form section) .select-field .help-text {
      margin: 0;
      color: var(--color-gray-9);
      text-align: left;
    }

:is(form,form section) .field label, :is(form,form section) .select-field label {
      color: var(--color-gray-10);
      text-align: left;
    }

:is(form,form section) .field input, :is(form,form section) .select-field input {
      padding: .25rem 1rem;
      border: 1px solid var(--color-gray-4);
      border-radius: .5rem;
      background: #fefefe;
      width: min-content;
    }

@media screen and (max-width: 675px) {

:is(form,form section) .field input, :is(form,form section) .select-field input {
        width: 100%;
    }
      }

:is(form,form section) .field input[type=email], :is(form,form section) .select-field input[type=email] {
        width: 100%;
      }

:is(form,form section) .field input:focus, :is(form,form section) .select-field input:focus {
        outline: none;
        border: 1px solid var(--color-primary);
        box-shadow: 0px 0px 2px var(--color-primary-lighten);
      }

:is(form,form section) .field label.checkbox, :is(form,form section) .select-field label.checkbox {
      display: flex;
      align-items: start;
      max-width: 500px;
    }

:is(form,form section) .field input[type="checkbox"], :is(form,form section) .select-field input[type="checkbox"] {
      margin-right: .5rem;
      width: 1rem;
      height: 1rem;
    }

:is(form,form section) .field select, :is(form,form section) .select-field select {
      width: 100%;
      padding: .5rem 1rem;
      border: 1px solid var(--color-gray-4);
      border-radius: .5rem;
      background: #fefefe;
      font-size: 1rem;
      color: var(--color-gray-8);
    }

:is(form,form section) .field select::after, :is(form,form section) .select-field select::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      pointer-events: auto;
    }

:is(form,form section) .field button.plain, :is(form,form section) .select-field button.plain {
      background: transparent;
      border: 0;
      color: var(--color-primary);
      font-size: .875rem;
      text-decoration: underline;
      text-align: left;
      align-self: start;
    }

:is(form,form section) .field button.plain:hover, :is(form,form section) .select-field button.plain:hover {
        cursor: pointer;
        color: var(--color-primary-darker);
      }

:is(form,form section) .field .input-with-prefix, :is(form,form section) .select-field .input-with-prefix {
      display: flex;
      width: 100%;
      border: 1px solid transparent;
      border-radius: .5rem;
      box-shadow: inset 2px 2px 5px #BABECC,
                  inset -5px -5px 10px #ffffff73;
      background: #dde1e730;
      font-size: 2rem;
      color: var(--color-gray-8);
    }

:is(form,form section) .field .input-with-prefix:focus-within, :is(form,form section) .select-field .input-with-prefix:focus-within {
        border: 1px solid var(--color-primary);
        box-shadow: 0px 0px 2px var(--color-primary-lighten),
                    inset 1px 1px 2px #BABECC,
                    inset -1px -1px 2px #ffffff73;
      }

:is(form,form section) .field .input-with-prefix .prefix, :is(form,form section) .select-field .input-with-prefix .prefix {
        padding: .5rem .5rem .5rem 1.5rem;
        border-top-left-radius: .5rem;
        border-bottom-left-radius: .5rem;
      }

:is(form,form section) .field .input-with-prefix input, :is(form,form section) .select-field .input-with-prefix input {
        font-size: 2rem;
        background: transparent;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border: 0;
        outline: 0;
      }

:is(form,form section) .field .input-with-prefix input:focus, :is(form,form section) .select-field .input-with-prefix input:focus {
          border: 0;
          box-shadow: none;
        }

:is(form,form section) button[type="submit"], :is(form,form section) button.primary {
    align-self: start;
    padding: 0 40px;
    border-radius: .25rem;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    -webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
    clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
    height: 40px;
    font-size: 0.875rem;
    line-height: 14px;
    letter-spacing: 1.2px;
    transition: .2s .1s;
    background: var(--gradient-primary);
    border: 0 solid;
    overflow: hidden;
  }

:is(form,form section) button[type="submit"]:hover, :is(form,form section) button.primary:hover {
      cursor: pointer;
      transition: all .3s ease-in;
      padding-right: 50px;
      padding-left: 50px;
    }

:is(form,form section) button[type="submit"]:disabled, :is(form,form section) button.primary:disabled {
      background: var(--color-gray-7);
      cursor: not-allowed;
    }

.login-divider {
  border-top: 1px dashed var(--color-primary-lighten);
  color: var(--color-gray-5);
  text-align: center;
  padding-bottom: 1rem;
}

#magic-link {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
}

#magic-link .field {
    max-width: 100%;
    align-self: stretch;
  }

#magic-link button[type="submit"] {
    align-self: stretch;
  }

.terms {
  padding-top: 1rem;
}

.panel {
  flex-basis: 1;
  flex-grow: 1;
  max-width: 1280px;
  margin: 2rem auto;
  padding: 1rem;
  box-shadow:  20px 20px 60px #d2d3d9,
             -20px -20px 60px #ffffff;  border-radius: .25rem;
}

@media screen and (max-width: 675px) {

.panel {
    margin: 0;
    box-shadow: none;
}
  }

.panel.small {
    min-width: 250px;
    max-width: 450px;
  }

.panel .title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-accent);
    color: var(--color-primary);
    font-size: 1.25rem;
    padding-bottom: 1rem;
  }

@media screen and (max-width: 675px) {

.panel .title {
      font-size: .875rem;
  }
    }

.panel .title a {
      font-size: .875rem;
    }

.panel .lead {
    color: var(--color-gray-7);
  }

.google-button {
  display: inline-block;
  background: white;
  color: #444;
  width: 100%;
  border-radius: 5px;
  border: thin solid #888;
  box-shadow: 1px 1px 1px grey;
  white-space: nowrap;
  margin-bottom: 1rem;
  text-align: center;
}

.google-button:hover {
  cursor: pointer;
}

.google-button span.icon {
  background: url('/images/identity/btn_google_light_normal_ios.svg') transparent 5px 50% no-repeat;
  display: inline-block;
  vertical-align: middle;
  width: 42px;
  height: 42px;
}

.google-button span.buttontext {
  display: inline-block;
  vertical-align: middle;
  padding-left: 1rem;
  padding-right: 42px;
  font-size: 14px;
  font-weight: bold;
  /* use the roboto font that is loaded in the <head> */
  font-family: 'roboto', sans-serif;
}

.instructions {
  width: 100%;
  text-align: left;
}

.instructions button.info {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4px;
    background: none;
    border: 0;
    color: var(--color-info);
  }

.instructions button.info svg {
      fill: var(--color-info);
    }

.instructions ol {
    color: var(--color-gray-7);
  }

.instructions ol li:not(:last-child) {
      padding-bottom: .5rem;
    }

.container {
  text-align: center;
}

.container main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-bottom: 3rem;
    text-align: left;
  }

#transactions h3 {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

#money-form .field {
    align-self: stretch;
  }

#money-form .field .input-with-prefix {
      margin-bottom: 1.5rem;
    }

#money-form .field label {
      padding-left: 1.5rem;
    }

#plaid-oda {
  text-align: left;
}

#account-list .account {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--color-gray-1);
    border-bottom: var(--color-gray-4);
    box-shadow: 0px 0px 5px rgba(200,200,200, .5);
  }

#account-list .account .details {
      flex-basis: 1;
      flex-grow: 1;
      text-align: left;
    }

#account-list .account .name {
      font-size: 1.25rem;
      font-weight: 700;
    }

#account-list .account .transferType span {
        display: inline-block;
        padding: 0 4px;
      }

#account-list .account .transferType span:not(:last-child) {
          border-right: 1px solid var(--color-gray-6);
        }

#account-list .account .remove {
      align-self: center;
      padding: .5rem .5rem .25rem;
      background: var(--color-error);
      border: 0;
      border-radius: .25rem;
      color: white;
    }

#account-list .account .remove svg {
        height: 1.5rem;
        fill: white;
      }

#account-list .account .remove:hover {
        cursor: pointer;
        box-shadow: inset 5px 5px 10px #ae2424,
                    inset -5px -5px 10px #ff4241;
      }

.parallax-container {
  min-height: 100vh;
  padding-bottom: 5rem;
  background: url('/images/isometric-users.webp'), var(--gradient-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.parallax-container #parallax-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
  }

.parallax-container #parallax-content > div, .parallax-container #parallax-content > section {

      min-height: 50vh;
    }

.parallax-container #parallax-content > div:not(:first-child), .parallax-container #parallax-content > section:not(:first-child) {
        margin-top: 25vh;
      }

.parallax-container #parallax-content h2 {
      scroll-margin-top: 10rem;
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: white;
    }

.parallax-container #parallax-content h3 {
      padding: 1rem;
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
    }

:is(.parallax-container #parallax-content) p + p  {
      margin-top: 1rem;
    }

@media (max-width: 768px) {
  .parallax-container {
    padding-bottom: 10rem;
  }
}

#about, #privacy-policy, #terms, #login, #confirm-email, #concierge-service-agreement {
  padding: 3rem 1rem 4rem;
  max-width: 800px;
  text-align: center;
}

#about section::before, #privacy-policy section::before, #terms section::before, #login section::before, #confirm-email section::before, #concierge-service-agreement section::before, #about section::after, #privacy-policy section::after, #terms section::after, #login section::after, #confirm-email section::after, #concierge-service-agreement section::after {
    display: table;
    margin: auto;
    clear: both;
    content: " ";
  }

#about h1, #privacy-policy h1, #terms h1, #login h1, #confirm-email h1, #concierge-service-agreement h1 {
    padding-bottom: .5rem;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-secondary);
  }

#about h2, #privacy-policy h2, #terms h2, #login h2, #confirm-email h2, #concierge-service-agreement h2, #about h3, #privacy-policy h3, #terms h3, #login h3, #confirm-email h3, #concierge-service-agreement h3 {
    padding-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-secondary);
  }

#about h2, #privacy-policy h2, #terms h2, #login h2, #confirm-email h2, #concierge-service-agreement h2 {
    color: var(--color-primary);
  }

#about p, #privacy-policy p, #terms p, #login p, #confirm-email p, #concierge-service-agreement p {
    text-align: left;
  }

#about p.lead, #privacy-policy p.lead, #terms p.lead, #login p.lead, #confirm-email p.lead, #concierge-service-agreement p.lead {
      font-size: 1.5rem;
      color: var(--color-primary);
      text-align: center;
    }

#about p + p, #privacy-policy p + p, #terms p + p, #login p + p, #confirm-email p + p, #concierge-service-agreement p + p {
    margin-top: 1rem;
  }

#about strong, #privacy-policy strong, #terms strong, #login strong, #confirm-email strong, #concierge-service-agreement strong {
    font-weight: 700;
  }

#about ul, #privacy-policy ul, #terms ul, #login ul, #confirm-email ul, #concierge-service-agreement ul {
    margin: 1rem;
    text-align: left;
    list-style-type: disc;
    list-style-position: outside;
  }

#about li, #privacy-policy li, #terms li, #login li, #confirm-email li, #concierge-service-agreement li {
    margin-bottom: .5rem;
  }

#about img, #privacy-policy img, #terms img, #login img, #confirm-email img, #concierge-service-agreement img {
    margin: 1rem auto;
    max-width: 300px;
    /* float: left; */
  }

#about hr, #privacy-policy hr, #terms hr, #login hr, #confirm-email hr, #concierge-service-agreement hr {
    margin: 1.5rem auto 1.5rem;
    max-width: 50%;
    border-color: var(--color-primary);
    height: 1px;
  }

#about ul {
    display: inline-block;
    margin: 1rem auto 1.5rem;
    padding: 1rem;
    list-style: disc;
  }

#about section:nth-of-type(odd) {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    gap: 8px;
  }

#about section:nth-of-type(odd) img {
      grid-column: 1;
      grid-row: 1 / span 2;
    }

#about section:nth-of-type(odd) h3 {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
    }

#about section:nth-of-type(odd) p, #about section:nth-of-type(odd) ul {
      grid-column: 2;
      grid-row: 2;
      align-self: start;
    }

#about section:nth-of-type(even) {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
  }

#about section:nth-of-type(even) img {
      grid-column: 2;
      grid-row: 1 / span 2;
    }

#about section:nth-of-type(even) h3 {                        /**/
      grid-column: 1;
      grid-row: 1;
      align-self: end;
    }

#about section:nth-of-type(even) p, #about section:nth-of-type(even) ul {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
    }

@media (max-width: 768px) {
  #about, #privacy-policy, #terms, #concierge-service-agreement {
    padding-top: 12rem;
    padding-bottom: 10rem;
  }

  #login, #confirm-email {
    padding-top: 10rem;
  }
}

#dashboard {
  margin: auto auto 3rem;
  padding-top: 2rem;
  width: 100%;
  max-width: 800px;
  text-align: center;

}

#dashboard > section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

#dashboard h2 {
    color: var(--color-gray-8);
    position: relative;
    text-align: left;
    padding-left: 3rem;
  }

#dashboard h2 .icon {
      display:inline-block;
      position:absolute;
      top: -1rem;
      left: -1rem;
      width: 3rem;
      height: 3rem;
      padding: 1rem .5rem;
      background: var(--color-secondary);
      border-radius: 50%;
      box-shadow: 0 0 12px rgba(60,60,60, .7);
      text-align: center;
    }

#dashboard h2 .icon svg {
        fill: white;
      }

#dashboard nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--color-secondary);
    border-radius: .5rem;
    text-align: left;
  }

#dashboard nav a {
      padding: 1rem;
      color: white;
      text-transform: uppercase;
    }

@media screen and (max-width: 500px) {

#dashboard nav a {
        text-align: center;
    }
      }

#dashboard nav a svg {
        height: 1rem;
        fill: white;
      }

#dashboard nav a span {
        display: inline-block;
        padding-left: 1rem;
      }

@media screen and (max-width: 500px) {

#dashboard nav a span {
          display: block;
          padding: 0;
      }
        }

#dashboard nav a:nth-child(odd) {
        border-right: 1px solid white;
      }

#dashboard nav a:first-child, #dashboard nav a:nth-child(2) {
        border-bottom: 1px solid white;
      }

#dashboard nav a:hover {
        background: #7341FF;
        box-shadow: inset 20px 20px 60px #6237d9,
            inset -20px -20px 60px #844bff;
        border-radius: .5rem;
      }

@media (max-width: 1200px) {
  #dashboard {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  #dashboard {
    padding-top: 12rem;
  }

  #wallet-dashboard {
    padding-top: 10rem;
    padding-bottom: 6rem;
  }
}

@media (max-width: 350px) {
  #dashboard {
    padding-top: 10rem;
  }
}

:is(#wallet-dashboard form,#wallet-dashboard form section) .input-with-prefix {
      border: 1px solid var(--color-gray-4);
      box-shadow: none;
      background: #fefefe;
      font-size: 1rem;
    }

:is(#wallet-dashboard form,#wallet-dashboard form section) .input-with-prefix .prefix {
        padding: .5rem .5rem .5rem 1.5rem;
        border-top-left-radius: .5rem;
        border-bottom-left-radius: .5rem;
      }

:is(#wallet-dashboard form,#wallet-dashboard form section) .input-with-prefix input {
        font-size: 1rem;
        background: #fefefe;
      }

@media (max-width: 768px) {
  #wallet-dashboard {
    padding-top: 10rem;
    padding-bottom: 6rem;
  }
}

.content.error {
  margin-top: 10rem;
}