/**
 * Common styling for all registration pages
 */
 :root {
  /* Setup global color variables */
  --design-orange: #fa8420;
  --design-orange-dark: #d56e1b;
  --design-blue: #2c9ed3;
  --design-blue-dark: #1e7999;
  --white: #FFFFFF;
  --light-grey: #f5f5f5;
  --mid-grey: #e6e6e6;
  --grey-background: #eeeeee;
  --light-grey-background: #f5f5f5;
  --light-blue: #d5f6ff;

  --background-red: #dc3545;
  --background-red-dark: #b02533;

  --text-color: #0a2434; /* blue-ish black */
  --text-color-light: #6b6b6b; /* mid grey */
  --text-blue: #00457a;

  --footer-height: 200px;
  --footer-blue: #002440;
  --footer-blue-dark: #001e36;

  --error-red-dark: #c50101;
  --error-red-light: #ffd5d5;

  --loading-light-grey: #757575;

  --graph-red: #e74c3c;
  --graph-green: #2ecc71;
  --graph-black: #000000;
}

/** Fade text in and out for loading */
@keyframes loading-fade {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

* {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

*:focus { outline: solid 2px var(--design-blue); }

html, body {
  height: 100%;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

body { background-color: var(--grey-background); }

body, h1, h2, h3, h4, h5, h6, p, span, label, input {
  color: var(--text-color);
}

a, .link {
  color: #007db7;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  font-size: 1em;
  cursor: pointer;
}
a:hover, a:focus, .link:hover, .link:focus { color: #005e8a; }
a:visited, .link:visited { color: #7400da; }
a:visited:focus, .link:visited:focus,
a:visited:hover, .link:visited:hover { color: #6102b5; }

a .new-tab, .link .new-tab {
  display: inline-block;
  position: relative;
  top: 3px;
  margin-left: 3px;
  width: 16px;
}

.inner-cont {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.hidden { display: none; }

/**
 * An attribute to hide things until Vue is done and we know they should be
 * shown, like errors and overlays.
 *
 * Learn more: https://vuejs.org/v2/api/#v-cloak
 */
[v-cloak] { display: none; }

h1, h2 { font-weight: 500; }

.button-row {
  display: flex;
  margin-top: 30px;
}

.button-row > button + button { margin-left: 10px;  }

.inner-cont.-logos-cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inner-cont.-logos-cont .bbb-logo {
  height: 60px;
}

/* Ensure even short pages like 404 have footer on screen bottom */
main {
  min-height: calc(100vh - 119px);
  padding-bottom: 80px; /* must be greater than --footer-height */
}

header {
  background-color: var(--white);
  padding: 15px 0;
  font-size: 24px;
  font-weight: bold;
}

header img {
  height: 80px;
}

footer {
  font-size: 12px;
  width: 100%;
  margin-top: calc(var(--footer-height) * -1);
}

footer .top-sect {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 120px;
  background-color: var(--footer-blue);
}

footer .bot-sect {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: center;
  background-color: var(--footer-blue-dark);
}

footer img { height: 80px; }

footer, footer * {
  color: var(--white);
}

input, textarea, select { font-size: 1rem; }

/* Fade disabled inputs */
input:disabled { opacity: 0.7; }

input, textarea {
  background-color: var(--light-grey);
  border: solid 1px var(--mid-grey);
  padding: 15px;
  max-width: 100%;
}

textarea {
  width: 800px;
  min-height: 150px;
}

input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

select {
  border: solid 1px var(--mid-grey);
  color: var(--text-color);
  background: var(--white);
  padding: 0 15px;
}

input:not([type="checkbox"]):focus {
  box-shadow: inset 2px 2px 5px var(--mid-grey);
}

.radio-cont {
  display: flex;
  align-items: center;
}

.radio-cont input { margin: 0; }
.radio-cont label {
  margin: 0 10px 0 0;
  padding: 0 15px 0 10px;
}

.radio-cont label { font-weight: normal; }

input.full-width, textarea.full-width { width: 100%; }

label, .label {
  display: block;
  color: var(--footer-blue);
  font-weight: bold;
  margin-bottom: 5px;
}

.center { text-align: center; }
.bold { font-weight: bold; }

.main-form {
  position: relative;
  top: -100px;
  background-color: var(--white);
  margin: 0 auto 70px auto;
  padding: 50px 100px 100px;
  box-shadow: rgba(0,0,0,0.2) 0px 2px 50px;
}

.main-form, .form-limited {
  width: 700px;
  max-width: 100%;
}

.btn {
  position: relative;
  display: block;
  cursor: pointer;
  border: none;
  padding: 15px;
  font-weight: bold;
  font-size: 1rem;
  transition: background-color 0.2s, opacity 0.3s;
}

.btn[disabled] { cursor: default; }

.btn.-mini {
  font-size: 14px;
  padding: 5px 10px;
}

.btn, .btn span { color: var(--white); }

.btn[type="submit"] { margin-top: 15px; }

.btn.-full-width { width: 100%; }

.btn.-orange {
  background-color: var(--design-orange);
  outline-color: var(--design-orange);
}

.btn.-orange:not([disabled]):hover,
.btn.-orange:focus,
.btn.-orange .arrow {
  background: var(--design-orange-dark);
}

.btn.-blue {
  background-color: var(--design-blue);
  outline-color: var(--design-blue);
}

.btn.-blue:not([disabled]):hover,
.btn.-blue:focus,
.btn.-blue .arrow {
  background: var(--design-blue-dark);
}

.btn.-red {
  background-color: var(--background-red);
  outline-color: var(--background-red);
}

.btn.-red:not([disabled]):hover,
.btn.-red:focus,
.btn.-red .arrow {
  background: var(--background-red-dark);
}

.btn.-outline {
  background: none;
  transition: color 0.2s, border-color 0.2s, opacity 0.3s;
  color: var(--text-color-light);
  border: solid 2px var(--text-color-light);
}

.btn.-outline:not([disabled]):hover,
.btn.-outline:focus {
  color: var(--text-color);
  border-color: var(--text-color);
}


.btn .arrow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  padding: 0;
  font-size: 2rem;
  color: var(--white);
}

/* Style the loading spinner image to spin */
.loading {
  display: inline;
  transition: right 0.5s, opacity 0.5s; /* slide in from right */
  width: 30px;
  position: absolute;
  right: 60px;
  top: 0;
  bottom: 0;
  margin: auto;
  animation: spin 1s linear infinite;
}

.loading.hidden {
  right: 0;
  opacity: 0;
}

button.tooltip {
  position: relative;
  font-weight: bold;
  background: var(--design-blue);
  border: none;
  border-radius: 100px;
  width: 20px;
  height: 20px;
  color: var(--white);
}

button.tooltip:hover, button.tooltip:focus {
  background-color: var(--design-blue-dark);
}

button.tooltip:focus {
  outline: none;
  box-shadow: 0px 0px 0px 2px var(--design-blue);
}

.tooltip-text {
  width: 500px;
  max-width: 80vw;
  background: var(--footer-blue);
  text-align: left;
  z-index: 10;
  position: absolute;
  padding: 0px 15px;
  top: 15px;
  right: 5px;
  box-shadow: 2px 3px 5px rgba(0,0,0,0.5);
}

.tooltip-text p { color: var(--white); }

.inline-error {
  color: var(--error-red-dark);
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/** Most errors take up space when hidden, -invis ones don't */
.inline-error.-hidden { visibility: hidden; }
.inline-error.-invis.-hidden { display: none; }

.inline-error a {
  color: var(--error-red-dark);
  font-weight: 600;
}

.error-msg {
  color: var(--error-red-dark);
  background: var(--error-red-light);
  padding: 5px 10px;
  margin: 5px 0;
  opacity: 1;
}

.error-msg.-hidden { display: none; }
.error-msg.-block {
  margin-top: 30px;
  padding: 15px;
}

.error-msg a {
  color: var(--error-red-dark);
  font-weight: 600;
}

.loading-text {
  animation: loading-fade 2s;
  animation-iteration-count: infinite;
  background-color: var(--mid-grey);
  padding: 10px;
  text-align: center;
  margin-top: 15px;
}

.hero {
  background: #2e3a44;
  overflow: hidden;
}

.hero h1 { margin: 50px 0 150px 0; }

/**
 * Overlay CSS
 */
.overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  /* Use display: flex to ensure the actual overlay contents are centered */
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay .overlay-inner {
  width: 800px;
  max-width: 90%;
  max-height: 90%;
  padding: 25px;
  background-color: var(--white);
}

.overlay .overlay-inner.-small { width: 500px; }

.overlay h1 {
  font-size: 1.25rem;
  font-weight: 600;
}

.overlay-blurred { filter: blur(5px); }

.overlay-inner input {
  width: 100%;
  margin-bottom: 15px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/**
 * Mobile styling - on mobile make the form the full width (since we don't have
 * much horizontal space) and don't show the background below the form
 */
@media (max-width: 800px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.4rem; }

  .hero h1 { padding: 0 15px; }

  .main-form {
    padding: 30px;
    margin-bottom: 20px;
  }

  .button-row { flex-direction: column; }
  .button-row > button + button { margin: 10px 0 0 0; }

  .form-row > * { flex: none; }

  /** Don't have inline errors take up space on mobile */
  .inline-error.-hidden { display: none; }
}