/* LATO */
@font-face {
  font-family: "LatoLight";
  font-style: normal;
  font-weight: 300;
  src: local("Lato Light"), local("Lato-Light"), url(./fonts/lato-light.woff2) format("woff2"),
    url(./fonts/lato-light.ttf) format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: local("Lato Regular"), local("Lato-Regular"), url(./fonts/lato-regular.woff2) format("woff2"),
    url(./fonts/lato-regular.ttf) format("truetype");
}
@font-face {
  font-family: "LatoSemibold";
  font-style: normal;
  font-weight: 500;
  src: local("Lato Semibold"), local("Lato-Semibold"), url(./fonts/Lato-Semiold.woff2) format("woff2"),
    url(./fonts/Lato-Semibold.ttf) format("truetype");
}
@font-face {
  font-family: "LatoBold";
  font-style: normal;
  font-weight: 500;
  src: local("Lato Bold"), local("Lato-Bold"), url(./fonts/Lato-Semibold.woff2) format("woff2"),
    url(./fonts/Lato-Semibold.ttf) format("truetype");
}

/* RUBIK */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  src: local("Rubik Regular"), local("Rubik-Regular"), url(./fonts/Rubik-regular.ttf) format("ttf"),
  url(./fonts/Rubik-regular.ttf) format("truetype");
}

@font-face {
  font-family: "RubikBold";
  font-style: normal;
  font-weight: 500;
  src: local("Rubik Bold"), local("Rubik-Bold"), url(./fonts/Rubik-Bold.ttf) format("ttf"),
  url(./fonts/Rubik-Bold.ttf) format("truetype");
}

/* Work Sans */
@font-face {
  font-family: "WorkSans-Light";
  font-style: normal;
  font-weight: 300;
  src: local("Work Sans Light"), local("WorkSans-Light"), url(./fonts/WorkSans/WorkSans-Light.woff2) format("woff2"),
    url(./fonts/WorkSans-Light.ttf) format("truetype");
}
@font-face {
  font-family: "WorkSans";
  font-style: normal;
  font-weight: 400;
  src: local("Work Sans Regular"), local("WorkSans-Regular"), url(./fonts/WorkSans/WorkSans-Regular.woff2) format("woff2"),
    url(./fonts/WorkSans-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "WorkSansMedium";
  font-style: normal;
  font-weight: 500;
  src: local("Work Sans Medium"), local("WorkSans-Medium"), url(./fonts/WorkSans/WorkSans-Medium.woff2) format("woff2"),
    url(./fonts/WorkSans/WorkSans-Medium.ttf) format("truetype");
}
@font-face {
  font-family: "WorkSansSemibold";
  font-style: normal;
  font-weight: 600;
  src: local("Work Sans Semibold"), local("WorkSans-Semibold"), url(./fonts/WorkSans/WorkSans-SemiBold.woff2) format("woff2"),
    url(./fonts/WorkSans/WorkSans-SemiBold.ttf) format("truetype");
}
@font-face {
  font-family: "WorkSansBold";
  font-style: normal;
  font-weight: 700;
  src: local("Work Sans Bold"), local("WorkSans-Bold"), url(./fonts/WorkSans/WorkSans-Bold.woff2) format("woff2"),
    url(./fonts/WorkSans/WorkSans-Bold.ttf) format("truetype");
}


html,
body {
  font-family: WorkSans, sans-serif;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

/* Stop vertical sliding on iOS */
#root {
  overflow-x: hidden;
}

/* Keep scroll bar on the side at all times, stops jumping of ui when scroll bar disappears */
body,
.modal-open .modal {
  overflow-y: scroll;
  overflow-x: hidden;
}

.search-modal > .modal-dialog {
  width: 100%;
}

/* Full bleed (created for mobile) */
.modal-full-screen {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.modal-full-screen .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.modal-full-screen .modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
  border: 0;
}
.modal-full-screen .modal-header {
  border: none;
}

.modal-full-screen .card {
  border: none;
}
/* Slide-up: default fades in (created for mobile) */
.modal-slide-up.fade {
  top: 100%;
  -webkit-transition: top 0.25s linear;
  -o-transition: top 0.25s linear;
  transition: top 0.25s linear;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.modal-slide-up.fade.in {
  top: 0;
}

.center {
  text-align: center;
}

[data-is-loading] * {
  color: transparent !important;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

.nav a:not(.btn),
.navbar a:not(.btn) {
  text-decoration: none !important;
}

.text-helper {
  color: #bbb;
  line-height: 15px !important;
}

/* SPACING HELPERS */
.push {
  margin: 20px !important;
}

.push--top {
  margin-top: 20px !important;
}

.push--bottom {
  margin-bottom: 20px !important;
}

.push--left {
  margin-left: 20px !important;
}

.push--right {
  margin-right: 20px !important;
}

.flush {
  margin: 0 !important;
}

.flush--top {
  margin-top: 0 !important;
}

.flush--bottom {
  margin-bottom: 0 !important;
}

.flush--left {
  margin-left: 0 !important;
}

.flush--right {
  margin-right: 0 !important;
}

.soft {
  padding: 20px !important;
}

.soft--top {
  padding-top: 20px !important;
}

.soft--bottom {
  padding-bottom: 20px !important;
}

.soft--left {
  padding-left: 20px !important;
}

.soft--right {
  padding-right: 20px !important;
}

.hard {
  padding: 0 !important;
}

.hard--top {
  padding-top: 0 !important;
}

.hard--bottom {
  padding-bottom: 0 !important;
}

.hard--left {
  padding-left: 0 !important;
}

.hard--right {
  padding-right: 0 !important;
}

.cf {
  clear: both;
}

/*
  Best practice for readability
  Also 16px avoids zoom on iOS devices
*/
@media (max-width: 780px) {
  input[type="color"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  select:focus,
  textarea {
    font-size: 16px;
  }
}

/*
  I hate bootstrap sometimes. Only way to apply custom styling to tooltip is via global styling.
*/
.tooltip-inner {
  text-align: left;
}

.form-control {
  border-radius: 2px;
  margin: 8px 0;
  padding: 16px;
}

.form-control:focus {
  box-shadow: 0 0 4px 0 rgba(4, 150, 255, 0.8);
}

.form-control::-webkit-input-placeholder {
  color: #98a1a4;
}

.has-error .form-control {
  box-shadow: 0 0 2px 0 rgba(222, 52, 52, 0.5);
}

.has-error .form-control:focus {
  border-color: #de3434;
  box-shadow: 0 0 4px 0 rgba(222, 52, 52, 0.5);
}

a {
  color: #000;
  text-decoration: none;
}
a:hover,
a:focus {
  outline: none;
  text-decoration: none;
}
a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: 1px;
}

label {
  width: 100%;
  font-weight: 400;
}

/* override blue background when using autofill on inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 48px white inset !important;
}

/* Check apps/web/app/src/index.tsx for usage */
.no-focus-outline a:focus,
.no-focus-outline button:focus {
  outline: none;
}