:root {
  --color-black: #000;
  --color-white: #fff;
  --color-blue-100: #e8f2ff;
  --color-blue-500: #4b96ff;
  --color-blueGray-500: #a9adc1;
  --color-gray-100: #f7f7f7;
  --color-gray-200: #e6e9ee;
  --color-gray-300: #dde0e4;
  --color-gray-400: #818890;
  --color-gray-500: #808080;
  --color-gray-600: #4b4c53;
  --color-gray-700: #3a3d4a;
  --color-gray-800: #2e3039;
  --color-gray-900: #1f2028;
  --color-green-100: #e7f9ed;
  --color-green-500: #a0bb49;
  --color-green-600: #68d94a;
  --color-green-800: #404c1d;
  --color-red-500: #ff4545;
  --color-yellow-500: #FFDE59;
  --color-magenta-500: #9649bb;
  --color-purple: #5E17EB;

}

.light {
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-100);
  --bg-alt: var(--color-gray-200);
  --border-secondary: var(--color-gray-200);
  --text-primary: var(--color-black);
  --text-secondary: var(--color-gray-500);
}

:focus:not(:focus-visible) {
  outline: none;
}

body {
  overflow-x: hidden;
}

* {
  -webkit-tap-highlight-color: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: black !important;
  box-shadow: 0 0 0 999px var(--color-gray-100) inset !important;
  background-clip: content-box !important;
}

input:-webkit-autofill::first-line {
  font-size: 1.125rem;
  font-weight: 500;
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system,
    'Helvetica Neue', Arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
}

/* I kinda feel like this should be the default... 🤷‍♂️ */

[hidden] {
  pointer-events: none;
}

/* These elements get removed before hydration but they can look funny before hydrating */

dark-mode,
light-mode {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  :focus {
    transition: outline-offset 0.1s ease;
    outline-offset: 4px;
  }
}

a {
  color: var(--color-green-500);
}

.underlined {
  position: relative;
  text-decoration: none !important;
  white-space: nowrap;
}

.underlined:focus {
  outline: none;
  text-decoration: none !important;
}

.underlined:after {
  content: '';
  height: 2px;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  transform-origin: left;
  left: 0;
  bottom: -4px;
  width: 100%;
  display: block;
  position: absolute;
}

.underlined:hover:after,
.underlined:focus:after,
.active.underlined:after {
  background-color: currentColor;
  transform: scaleX(1);
}

@media (prefers-reduced-motion) {
  .underlined:after {
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .underlined:hover:after,
  .underlined:focus:after,
  .active.underlined:after {
    opacity: 1;
  }
}

/* transistor embed has rounded edges with white background 😬 */

.dark iframe[src*='transistor'] {
  border-radius: 8px;
}

.yt-lite {
  border-radius: 0.5rem;
  max-height: 90vh;
  max-width: 90vw;
}

/* this is for react-lite-youtube-embed */

/* Annoyingly the background image can be a pixel taller than the video in front of it when the video is playing */

.lyt-activated {
  background-image: none !important;
}

.flickity-slider {
  height: 100%;
}

.flickity-enabled:focus {
    outline: none;
}

.flickity-slider .slide {
  min-height: 100%;
  outline: none;
}

.flickity-button {
  position: absolute;
  border: none;
}

.flickity-button:hover {
  cursor: pointer;
  color: var(--color-green-500);
}

.flickity-button:hover .flickity-button-icon {
  fill: var(--color-green-500);
}

.flickity-button:focus {
  outline: none;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: var(--color-white);
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}

.flickity-button.flickity-prev-next-button {
  top: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-button.flickity-prev-next-button.previous {
  left: 20px;
}

.flickity-button.flickity-prev-next-button.next {
  left: auto;
  right: 20px;
}

.instagram .flickity-button.flickity-prev-next-button.previous {
  left: 0;
}

.instagram .flickity-button.flickity-prev-next-button.next {
  left: auto;
  right: 0;
}

.instagram .flickity-button.flickity-prev-next-button {
  border-radius: 0;
  background-color: var(--color-blue-500);
  display: none;
}

.instagram .flickity-button.flickity-prev-next-button:hover {
  opacity: 0.5;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
}

.instagram .flickity-page-dots {
  position: relative;
  width: auto;
  margin-top: 80px;
  display: none;
}

.instagram h2 em {
  font-style: normal;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: var(--color-white);
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}

.flickity-page-dots .dot.is-selected {
  transform: scale(1.5);
  background: var(--color-green-500);
}

.st-btn {
  min-width: auto !important;
  display: inline-block !important;
  background-color: var(--color-purple) !important;
}

.st-label {
  display: none !important;
}

.footer-social .st-inline-share-buttons {
  margin-top:  3px;
  margin-left:  5px;
  z-index: 45 !important;
}

.footer-social .st-btn:first-child {
  display: none !important;
}

.react-datepicker-wrapper {
  overflow: hidden;
  border: 1px solid var(--color-green-500);
  border-radius: 2px;
}

.submit-job .react-datepicker-wrapper {
  border: 1px solid var(--color-blue-500);
}

.react-datepicker__input-container {
  background-color: var(--color-white);
  display: flex;
}

.exposed.pretty.p-curve .state label:after {
  background: var(--color-white);
}

.visually-hidden {
    position: absolute !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    word-wrap: normal;
}

.alert-info, .alert-primary, .alert-secondary {
  background-color:  var(--color-yellow-500);
}

.alert-success {
  background-color:  var(--color-green-500);
}

.alert-danger, .alert-warning {
  background-color:  var(--color-red-500);
}

.alert-light {
  background-color:  var(--color-gray-200);
}

.alert-dark {
  background-color:  var(--color-green-800);
}

.alert-dark .alert-content,
.alert-danger .alert-content,
.alert-warning .alert-content {
  color: #ffffff !important;
}

.alert-content a {
  color: inherit !important;
  text-decoration: none;
}

.masonry {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
  grid-auto-rows: 0;
}

.masonry-content {
  overflow: hidden;
}

.ProseMirror {
  min-height: 150px;
}

.ProseMirror ul, .ProseMirror ol {
  margin-bottom: 1rem;
}

.ProseMirror ul li {
  list-style-type: disc;
  margin-left: 2rem;
}

.ProseMirror ol li {
  list-style-type: decimal;
  margin-left: 2rem;
}

.ProseMirror > p {
  margin-bottom: 1rem;
}

.ProseMirror:focus {
    outline: none;
}

/* Placeholder (at the top) */

.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #adb5bd;
  pointer-events: none;
  height: 0;
}

@media (min-width: 560px) {
  .field--type-image {
      float: left;
      margin: 0 1em 0 0;
  }
  .instagram .flickity-page-dots {
    display: block;
  }
  .instagram .flickity-button.flickity-prev-next-button {
    display: block;
  }
}