/*
  These variables should mirror the configuration in tailwind-rebrand.config.cjs.
  They allow us to reference our color palette in places where Tailwind's classes
  can't be used.
*/

:root {
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-heading: "Kit Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --black: #000000;

  --gray-50: #f7f7f7;
  --gray-100: #f0f0f0;
  --gray-200: #e3e3e3;
  --gray-300: #d4d4d4;
  --gray-400: #c4c4c4;
  --gray-500: #b8b8b8;
  --gray-600: #919191;
  --gray-700: #6e6e6e;
  --gray-800: #3d3d3d;
  --gray-900: #1e1e1e;

  --gray-50-rgb: 247, 247, 247;
  --gray-100-rgb: 240, 240, 240;
  --gray-200-rgb: 227, 227, 227;
  --gray-300-rgb: 212, 212, 212;
  --gray-400-rgb: 196, 196, 196;
  --gray-500-rgb: 184, 184, 184;
  --gray-600-rgb: 145, 145, 145;
  --gray-700-rgb: 110, 110, 110;
  --gray-800-rgb: 61, 61, 61;
  --gray-900-rgb: 30, 30, 30;

  --red-50: #fef2f2; /* waiting on design */
  --red-100: #fee2e2; /* waiting on design */
  --red-200: #fecaca; /* waiting on design */
  --red-300: #fca5a5; /* waiting on design */
  --red-400: #f87171; /* waiting on design */
  --red-500: #ef4444; /* waiting on design */
  --red-600: #dc2626; /* waiting on design */
  --red-700: #b91c1c; /* waiting on design */
  --red-800: #991b1b; /* waiting on design */
  --red-900: #7f1d1d; /* waiting on design */

  --red-50-rgb: 254, 242, 242; /* waiting on design */
  --red-100-rgb: 254, 226, 226; /* waiting on design */
  --red-200-rgb: 254, 202, 202; /* waiting on design */
  --red-300-rgb: 252, 165, 165; /* waiting on design */
  --red-400-rgb: 248, 113, 113; /* waiting on design */
  --red-500-rgb: 239, 68, 68; /* waiting on design */
  --red-600-rgb: 220, 38, 38; /* waiting on design */
  --red-700-rgb: 185, 28, 28; /* waiting on design */
  --red-800-rgb: 153, 27, 27; /* waiting on design */
  --red-900-rgb: 127, 29, 29; /* waiting on design */

  --blue-50: #f0f9ff;
  --blue-100: #bce1fa;
  --blue-200: #a2d1f1;
  --blue-300: #81c5f3;
  --blue-400: #63bbf9;
  --blue-500: #44b1ff;
  --blue-600: #3197e0;
  --blue-700: #2b7ab1;
  --blue-800: #144264;
  --blue-900: #0a2940;

  --blue-50-rgb: 240, 249, 255;
  --blue-100-rgb: 188, 225, 250;
  --blue-200-rgb: 162, 209, 241;
  --blue-300-rgb: 129, 197, 243;
  --blue-400-rgb: 99, 187, 249;
  --blue-500-rgb: 68, 177, 255;
  --blue-600-rgb: 49, 151, 224;
  --blue-700-rgb: 43, 122, 177;
  --blue-800-rgb: 20, 66, 100;
  --blue-900-rgb: 10, 41, 64;

  --green-50: #f0fff3;
  --green-100: #d0f5d9;
  --green-200: #b9e9c5;
  --green-300: #94e3a9;
  --green-400: #83de9e;
  --green-500: #65dc8d;
  --green-600: #4ec776;
  --green-700: #27a14f;
  --green-800: #157033;
  --green-900: #083818;

  --green-50-rgb: 240, 255, 243, 1;
  --green-100-rgb: 208, 245, 217, 1;
  --green-200-rgb: 185, 233, 197, 1;
  --green-300-rgb: 148, 227, 169, 1;
  --green-400-rgb: 131, 222, 158, 1;
  --green-500-rgb: 101, 220, 141, 1;
  --green-600-rgb: 78, 199, 118, 1;
  --green-700-rgb: 39, 161, 79, 1;
  --green-800-rgb: 21, 112, 51, 1;
  --green-900-rgb: 8, 56, 24, 1;

  --yellow-50: #fff6f0;
  --yellow-100: #ffe7d6;
  --yellow-200: #ffd0ad;
  --yellow-300: #ff9f6b;
  --yellow-400: #ff8b59;
  --yellow-500: #ff7647;
  --yellow-600: #e56a40;
  --yellow-700: #a65821;
  --yellow-800: #82450d;
  --yellow-900: #5e2d00;

  --yellow-50-rgb: 255, 246, 240, 1;
  --yellow-100-rgb: 255, 231, 214, 1;
  --yellow-200-rgb: 255, 208, 173, 1;
  --yellow-300-rgb: 255, 159, 107, 1;
  --yellow-400-rgb: 255, 139, 89, 1;
  --yellow-500-rgb: 255, 118, 71, 1;
  --yellow-600-rgb: 229, 106, 64, 1;
  --yellow-700-rgb: 166, 88, 33, 1;
  --yellow-800-rgb: 130, 69, 13, 1;
  --yellow-900-rgb: 94, 45, 0, 1;

  --light-blue: #e7fafa;

  --warm-white-100: #f9f7f4;
  --warm-white-200: #f2efe9;
  --warm-white-300: #e9e6dc;

  --warm-white-100-rgb: 249, 247, 244, 1;
  --warm-white-200-rgb: 242, 239, 233, 1;
  --warm-white-300-rgb: 233, 230, 220, 1;

  /* primary-* variables are temporary until after the rebrand. */

  --primary-50: #f0f9ff;
  --primary-100: #bce1fa;
  --primary-200: #a2d1f1;
  --primary-300: #81c5f3;
  --primary-400: #63bbf9;
  --primary-500: #44b1ff;
  --primary-600: #3197e0;
  --primary-700: #2b7ab1;
  --primary-800: #144264;
  --primary-900: #0a2940;

  --primary-50-rgb: 240, 249, 255, 1;
  --primary-100-rgb: 188, 225, 250, 1;
  --primary-200-rgb: 162, 209, 241, 1;
  --primary-300-rgb: 129, 197, 243, 1;
  --primary-400-rgb: 99, 187, 249, 1;
  --primary-500-rgb: 68, 177, 255, 1;
  --primary-600-rgb: 49, 151, 224, 1;
  --primary-700-rgb: 43, 122, 177, 1;
  --primary-800-rgb: 20, 66, 100, 1;
  --primary-900-rgb: 10, 41, 64, 1;
}

/* End variables */

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base */
hr {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Temp button/input helper */
.leading-5 {
  line-height: 1.25rem;
}

.design-custom-box {
  --active: var(--active-checkbox, rgb(var(--green-500-rgb)));
  --active-inner: var(--active-checkbox-inner, #fff);
  --focus: 2px rgba(var(--blue-500-rgb), 0.3);
  --border: var(--gray-200);
  --border-hover: var(--gray-200);
  --background: #fff;
  --disabled: #f6f8ff;
  --disabled-inner: #e1e6f9;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 20px;
  width: 20px;
  outline: none !important;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--bc, var(--border));
  background: var(--b, var(--background));
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}

.design-custom-box:checked {
  --b: var(--active);
  --bc: var(--active);
  --d-o: 0.3s;
  --d-t: 0.6s;
  --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  --o: 1;
  --r: 43deg;
  --ab: var(--active-inner);
  --x: 17px;
}

.design-custom-box:after {
  content: "";
  display: block;
  position: absolute;
  opacity: var(--o, 0);
  border: 2px solid var(--active-inner);
}

.design-custom-box:disabled {
  --b: var(--disabled);
  cursor: not-allowed;
  opacity: 0.9;
}
.design-custom-box:disabled:checked {
  --b: var(--disabled-inner);
  --bc: var(--border);
}
.design-custom-box:disabled:not(:checked) {
  opacity: 0.6;
}
.design-custom-box:hover:not(:checked):not(:disabled) {
  --bc: var(--border-hover);
}
.design-custom-box:focus {
  box-shadow: 0 0 0 var(--focus);
}

.design-checkbox {
  border-radius: 0.4rem;
}

.design-checkbox:after {
  content: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.21326 0.176602C4.65788 0.184808 5.02498 0.551902 5.03318 0.99653L5.16675 8.23375C5.18174 8.29327 5.19023 8.35519 5.19141 8.4187C5.19961 8.86333 4.84582 9.21712 4.40119 9.20891L1.11157 9.1482C0.666936 9.13999 0.299843 8.7729 0.291636 8.32827C0.283431 7.88364 0.637221 7.52985 1.08185 7.53806L3.54515 7.58352L3.42304 0.966815C3.41484 0.522186 3.76863 0.168397 4.21326 0.176602Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
    opacity var(--d-o, 0.2s);
  left: 6.5px;
  top: -4px;
  transform: rotate(var(--r, 10deg));
  border: none;
}

.design-checkbox:indeterminate {
  --b: var(--active);
  --bc: var(--active);
}
.design-checkbox:indeterminate::after {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23FFFFFF'%3E%3Cpath d='M16 11.25a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1 0-1.5h8z'%3E%3C/path%3E%3C/svg%3E");
  left: -3px;
  top: -3px;
  opacity: 1;
  transform: none;
}

.design-radio {
  border-radius: 100%;
}

.design-radio:after {
  border-radius: 100%;
  width: 18px;
  height: 18px;
  left: 0;
  top: 0;
}

.design-slider {
  position: relative;
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--rangeValue) - var(--min)) / var(--range));
  --progress: calc(var(--ratio) * 100%);
  --progressColor: var(--primary-500);
  --thumbColor: var(--primary-500);
  --trackColor: var(--gray-300);
}

.design-slider input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  height: 22px !important;
}
.design-slider input[type="range"]:focus {
  outline: none;
}
/* CHROME */
.design-slider input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background-image: linear-gradient(var(--progressColor), var(--progressColor));
  background-size: var(--progress) 100%;
  background-repeat: no-repeat;
  background-color: var(--trackColor);
  border-radius: 2px;
}
.design-slider input[type="range"]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: var(--thumbColor);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
/* FIREFOX */
.design-slider input[type="range"]::-moz-range-progress {
  background: var(--progressColor);
}
.design-slider input[type="range"]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: var(--trackColor);
  border-radius: 2px;
}
.design-slider input[type="range"]::-moz-range-thumb {
  border: 0;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: var(--thumbColor);
  cursor: pointer;
}

/* Utilities */

@variants focus {
  .outline-blue {
    outline: none;
    border-color: rgba(var(--blue-500-rgb), 0.3);
    box-shadow: rgba(var(--blue-500-rgb), 0.3) 0 0 0 1px;
  }

  .outline-red {
    outline: none;
    border-color: rgb(251, 80, 88);
    box-shadow: rgb(251, 80, 88) 0 0 0 1px;
  }

  .outline-green {
    outline: none;
    border-color: rgb(88, 157, 120);
    box-shadow: rgb(88, 157, 120) 0 0 0 1px;
  }
}

@variants focus-visible {
  .outline-blue {
    outline: none;
    border-color: rgba(var(--blue-500-rgb), 0.3);
    box-shadow: rgba(var(--blue-500-rgb), 0.3) 0 0 0 1px;
  }

  .outline-red {
    outline: none;
    border-color: rgb(251, 80, 88);
    box-shadow: rgb(251, 80, 88) 0 0 0 1px;
  }

  .outline-green {
    outline: none;
    border-color: rgb(88, 157, 120);
    box-shadow: rgb(88, 157, 120) 0 0 0 1px;
  }
}

@variants focus-within {
  .outline-blue {
    outline: none;
    border-color: rgba(var(--blue-500-rgb), 0.3);
    box-shadow: rgba(var(--blue-500-rgb), 0.3) 0 0 0 1px;
  }

  .outline-red {
    outline: none;
    border-color: rgb(251, 80, 88);
    box-shadow: rgb(251, 80, 88) 0 0 0 1px;
  }

  .outline-green {
    outline: none;
    border-color: rgb(88, 157, 120);
    box-shadow: rgb(88, 157, 120) 0 0 0 1px;
  }

  .border-blue {
    border-color: rgba(var(--blue-500-rgb), 0.3);
  }
}

.right-10 {
  right: 10px;
}

/* Reach UI */
:root {
  --reach-tooltip: 1;
}

[data-reach-tooltip] {
  background: #000000;
  box-shadow: 0 2px 9px 0 rgba(210, 214, 220, 0.45);
  border: solid 1px #000000;
  border-radius: 0.25rem;
  color: #ffffff;
  font-size: 0.75rem;
  pointer-events: none;
  position: absolute;
  padding: 2px 6px;
  white-space: nowrap;
  z-index: 10; /* 10: To render above other parallel portals that may come after it in DOM */
}

[data-reach-dialog-overlay] {
  background: hsla(0, 0%, 0%, 0.7);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  z-index: 51;
}
[data-reach-dialog-content] {
  margin: 27vh auto;
  outline: none;
}

/* Popover Styles */
.popover-arrow .stroke {
  fill: var(--gray-200);
}

.popover-arrow .fill {
  fill: #ffffff;
}

/* DatePickerInput Styles */
.react-datepicker-wrapper {
  display: block !important;
}

.react-datepicker-popper {
  width: 330px !important;
}

.react-datepicker {
  border: none !important;
  overflow: hidden !important;
  @apply shadow-lg rounded !important;
}

.react-datepicker__header {
  @apply bg-white border-none !important;
}

.react-datepicker__day-name {
  @apply my-0 !important;
}

.react-datepicker__triangle {
  display: none !important;
}

.react-datepicker__navigation--previous {
  left: 3px !important;
}

.react-datepicker__navigation--next {
  right: 88px !important;
}

.design-date-field .react-datepicker__navigation--next {
  right: 10px !important;
}

.react-datepicker__current-month {
  @apply font-normal !important;
}

.react-datepicker__day-names {
  @apply bg-gray-50 border-b border-t border-gray-200 !important;
}

.react-datepicker__header--time {
  @apply py-1 !important;
}

.react-datepicker-time__header {
  @apply font-normal !important;
}

.react-datepicker__time-list-item {
  @apply py-1 px-2 h-auto !important;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 0px !important;
}

.design-progress {
  height: 3px;
  width: 100%;
  pointer-events: none;
}

.design-progress .bar {
  background: var(--blue-500);
}

/* Bounce Spinner */
.loading-animation {
  width: 40px;
  height: 40px;

  position: relative;
}

.loading-animation--top,
.loading-animation--bottom {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #c1c1c1;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2s infinite ease-in-out;
}

.loading-animation--bottom {
  animation-delay: -1s;
}

/* Overides app styles for plain inputs */
.design-input {
  border: 0 !important;
  color: var(--gray-800) !important;
  padding: 0 !important;
  font-size: 14px !important;
}

@-webkit-keyframes sk-bounce {
  0%,
  100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bounce {
  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
  }
}

/* Adjusts default toast width and fixes a conflict with Bootstrap. */
.Toaster__manager-bottom {
  max-width: 700px !important;
}

@media (min-width: 768px) {
  .Toaster__message .md\:flex {
    display: flex !important;
  }
}
