@font-face {
  font-family: 'Roboto';
  src: url('/static/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('/static/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

html
{
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body
{
  margin: 0;
}

main
{
  display: block;
}

h1
{
  font-size: 2em;
  margin: .67em 0;
}

a
{
  background-color: transparent;
}

img
{
  border-style: none;
}

input
{
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

input
{
  overflow: visible;
}

::-webkit-file-upload-button
{
  -webkit-appearance: button;
  font: inherit;
}

h1,p
{
  margin: 0;
}

html
{
  font-family: Roboto,sans-serif;
  line-height: 1.5;
}

*,::after,::before
{
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #d7d7db;
}

img
{
  border-style: solid;
}

input::-ms-input-placeholder
{
  color: #a0aec0;
}

[role=button]
{
  cursor: pointer;
}

h1
{
  font-size: inherit;
  font-weight: inherit;
}

a
{
  color: inherit;
  text-decoration: inherit;
}

input
{
  padding: 0;
  line-height: inherit;
  color: inherit;
}

img,svg
{
  display: block;
  vertical-align: middle;
}

img
{
  max-width: 100%;
  height: auto;
}

html
{
  line-height: 1.15;
}

:not(input)
{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

:root
{
  --violet-gradient: linear-gradient(
      -180deg,      rgba(144, 89, 255, 0.8) 0%,      rgba(144, 89, 255, 0.4) 100%
    );
}

a
{
  color: inherit;
  text-decoration: none;
}

a:focus
{
  outline: 1px dotted grey;
}

body
{
  overflow-x: hidden;
}

.btn
{
  --bg-opacity: 1;
  background-color: #0060df;
  background-color: rgba(0,96,223,var(--bg-opacity));
  --text-opacity: 1;
  color: #fff;
  color: rgba(255,255,255,var(--text-opacity));
  cursor: pointer;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 700;
}

.btn:hover
{
  --bg-opacity: 1;
  background-color: #003eaa;
  background-color: rgba(0,62,170,var(--bg-opacity));
}

.btn:focus
{
  --bg-opacity: 1;
  background-color: #003eaa;
  background-color: rgba(0,62,170,var(--bg-opacity));
}

.btn:disabled
{
  background-color: hsla(250,13%,9%,.2);
  cursor: not-allowed;
}

.link-blue
{
  --text-opacity: 1;
  color: #0060df;
  color: rgba(0,96,223,var(--text-opacity));
}

.link-blue:hover
{
  --text-opacity: 1;
  color: #003eaa;
  color: rgba(0,62,170,var(--text-opacity));
}

.link-blue:focus
{
  --text-opacity: 1;
  color: #003eaa;
  color: rgba(0,62,170,var(--text-opacity));
}

.main-header img
{
  height: 32px;
  width: auto;
}

.intro
{
  max-width: 100%;
  height: unset;
}

.main
{
  display: flex;
  position: relative;
  max-width: 90rem;
  width: 100%;
  height: 100%;
}

.main>section
{
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255,255,255,var(--bg-opacity));
}

@media (min-width:768px)
{
  .main-header img
  {
    height: 48px;
    width: auto;
  }

  .intro
  {
    height: unset;
    margin-bottom: -3rem;
    margin-right: -7rem;
  }

  .main
  {
    flex: 1 1 0%;
    align-self: center;
    align-items: center;
    margin: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
    min-height: 42rem;
    max-height: 50rem;
    width: calc(100% - 3rem);
  }
}

.appearance-none
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bg-transparent
{
  background-color: transparent;
}

.bg-white
{
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255,255,255,var(--bg-opacity));
}

.bg-grey-10 {
  --bg-opacity: 1;
  background-color: #f9f9fa;
  background-color: rgba(249, 249, 250, var(--bg-opacity));
}

.border-grey-transparent
{
  border-color: hsla(250,13%,9%,.2);
}

.rounded
{
  border-radius: .25rem;
}

.rounded-lg
{
  border-radius: .5rem;
}

.border-dashed
{
  border-style: dashed;
}

.border-2
{
  border-width: 2px;
}

.hidden {
  display: none;
}

.flex
{
  display: flex;
}

.flex-row
{
  flex-direction: row;
}

.flex-col
{
  flex-direction: column;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink {
  flex-shrink: 1;
}

.items-start
{
  align-items: flex-start;
}

.items-center
{
  align-items: center;
}

.items-end
{
  align-items: flex-end;
}

.self-start
{
  align-self: flex-start;
}

.shadow-light {
  box-shadow: 0 0 8px 0 rgba(12, 12, 13, 0.1);
}

.justify-center
{
  justify-content: center;
}

.justify-between
{
  justify-content: space-between;
}

.flex-none
{
  flex: none;
}

.font-sans
{
  font-family: Roboto,sans-serif;
}

.font-extra-light
{
  font-weight: 100;
}

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

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

.font-medium
{
  font-weight: 500;
}

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

.h-0
{
  height: 0;
}

.h-10
{
  height: 2.5rem;
}

.h-16
{
  height: 4rem;
}

.h-full
{
  height: 100%;
}

.text-upper{
  text-transform: uppercase;
  font-weight: 700;
}

.text-xs
{
  font-size: .75rem;
}

.text-sm
{
  font-size: .875rem;
}

.text-base
{
  font-size: 1rem;
}

.text-lg
{
  font-size: 1.125rem;
}

.text-2xl
{
  font-size: 1.6rem;
}


.text-3xl
{
  font-size: 2rem;
}

.leading-loose
{
  line-height: 1.75;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-6
{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mx-2
{
  margin-left: .5rem;
  margin-right: .5rem;
}

.mb-0
{
  margin-bottom: 0;
}

.mb-6
{
  margin-bottom: 1.5rem;
}

.mt-4
{
  margin-top: 1rem;
}

.mt-6
{
  margin-top: 1.5rem;
}

.mt-12
{
  margin-top: 3rem;
}

.max-w-sm
{
  max-width: 30rem;
}

.max-w-md {
  max-width: 40rem;
}

.opacity-0
{
  opacity: 0;
}

.opacity-75 {
  opacity: .75;
}

.overflow-hidden
{
  overflow: hidden;
}

.max-h-90 {
  max-height: 90%;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.float-none {
  float: none;
}

.ml-4 {
  margin-left: 1rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-6
{
  padding: 1.5rem;
}

.px-2
{
  padding-left: .5rem;
  padding-right: .5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6
{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.px-6
{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-8
{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-16
{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.pb-2
{
  padding-bottom: .5rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-6
{
  padding-top: 1.5rem;
}

.pb-6
{
  padding-bottom: 1.5rem;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.absolute
{
  position: absolute;
}

.relative
{
  position: relative;
}

.text-center
{
  text-align: center;
}

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

.text-grey-60
{
  --text-opacity: 1;
  color: #4a4a4f;
  color: rgba(74,74,79,var(--text-opacity));
}

.text-grey-50
{
  --text-opacity: 1;
  color: #737373;
  color: rgba(115,115,115,var(--text-opacity));
}

.tracking-wide
{
  letter-spacing: .05em;
}

.word-break-all {
  word-break: break-all;
  line-break: anywhere;
}

.w-0
{
  width: 0;
}

.w-10
{
  width: 2.5rem;
}

.w-full
{
  width: 100%;
}

.z-20
{
  z-index: 20;
}

@media (min-width:768px)
{

  .md\:bg-grey-10
  {
    --bg-opacity: 1;
    background-color: #f9f9fa;
    background-color: rgba(249,249,250,var(--bg-opacity));
  }

  .md\:rounded-xl
  {
    border-radius: 1rem;
  }

  .md\:flex
  {
    display: flex;
  }

  .md\:flex-row
  {
    flex-direction: row;
  }

  .md\:items-center
  {
    align-items: center;
  }

  .md\:h-24
  {
    height: 6rem;
  }

  .md\:h-screen
  {
    height: 100vh;
  }

  .md\:-m-2
  {
    margin: -.5rem;
  }

  .md\:mt-2
  {
    margin-top: .5rem;
  }

  .md\:mr-8
  {
    margin-right: 2rem;
  }

  .md\:p-8
  {
    padding: 2rem;
  }

  .md\:py-0
  {
    padding-top: 0;
    padding-bottom: 0;
  }

  .md\:px-0
  {
    padding-left: 0;
    padding-right: 0;
  }

  .md\:px-8
  {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:pb-2
  {
    padding-bottom: .5rem;
  }

  .md\:w-1\/3
  {
    width: 33.33333%;
  }

  .md\:w-2\/3
  {
    width: 66.66667%;
  }

  .md\:shadow-big
  {
    box-shadow: 0 12px 18px 2px rgba(34,0,51,.04),0 6px 22px 4px rgba(7,48,114,.12),0 6px 10px -4px rgba(14,13,26,.12);
  }
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: left;
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

#footer {
  margin-top: auto;
  padding-bottom: .5rem;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 2rem;
  border: 1px solid #888;
  border-radius: 1rem;
  box-shadow: 0 12px 18px 2px rgba(34,0,51,.04),0 6px 22px 4px rgba(7,48,114,.12),0 6px 10px -4px rgba(14,13,26,.12);
}

.modal-title {
  flex-direction: column;
  align-items: flex-start;
}

.modal-title > div {width: 100%;}
.modal-title > div:first-child {margin-bottom: 1rem;}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  margin-bottom: auto;
}
.lg-only {
  display: none;
}
.sm-only {margin-left: auto;}

@media (min-width:650px) {
  .modal-title {
    flex-direction: row;
  }

  .modal-title > div {width: unset;}
  .modal-title > div:first-child {margin-bottom: unset;}

  .lg-only {display: block;}
  .sm-only {display: none;}
}
@media (min-width:1280px) {
  .modal-content {
    width: 50%; 
  }
}

.modal-content hr {
  border-top: 1px dashed #bbb;
  padding-bottom: .5rem;
}



.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}