/*
* Design System light and dark palette colors
 */

body,
body[data-theme=light] {
  --primary-brand: #1655b3;
  --primary-neutral: #051329;
  --primary-background: #ffffff;
  --success-status: #429649;
  --secondary-brand: #4586e8;
  --secondary-neutral: #4f617d;
  --secondary-background: #e4ebf6;
  --warning-status: #ebb057;
  --tertiary-brand: #0445a7;
  --tertiary-neutral: #8294b0;
  --error-status: #eb5757;
  --font-inter: "Inter", sans-serif;
}
body ::-webkit-scrollbar,
body[data-theme=light] ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
body ::-webkit-scrollbar-thumb,
body[data-theme=light] ::-webkit-scrollbar-thumb {
  background-color: var(--secondary-brand);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
body ::-webkit-scrollbar-thumb:vertical,
body[data-theme=light] ::-webkit-scrollbar-thumb:vertical {
  border-left-width: 4px;
}
body ::-webkit-scrollbar-thumb:horizontal,
body[data-theme=light] ::-webkit-scrollbar-thumb:horizontal {
  border-top-width: 4px;
}
body ::-webkit-scrollbar-thumb:active,
body ::-webkit-scrollbar-thumb:hover,
body[data-theme=light] ::-webkit-scrollbar-thumb:active,
body[data-theme=light] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-brand);
}
body ::-webkit-scrollbar-track,
body ::-webkit-scrollbar-corner,
body[data-theme=light] ::-webkit-scrollbar-track,
body[data-theme=light] ::-webkit-scrollbar-corner {
  background-color: var(--primary-background);
}

body[data-theme=dark] {
  --primary-brand: #4586E8;
  --primary-neutral: #DEDEDE;
  --primary-background: #121212;
  --success-status: #59C962;
  --secondary-brand: #72A4EE;
  --secondary-neutral: #9F9F9F;
  --secondary-background: #2D2D2D;
  --warning-status: #FFbF5E;
  --tertiary-brand: #1E77FC;
  --tertiary-neutral: #6B6B6B;
  --error-status: #FF5E5E;
  --font-inter: "Inter", sans-serif;
  /* visually "centers" because the dark edge of the shadow gives the illusion this is offset */
}
body[data-theme=dark] ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
body[data-theme=dark] ::-webkit-scrollbar-thumb {
  background-color: var(--secondary-brand);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
body[data-theme=dark] ::-webkit-scrollbar-thumb:vertical {
  border-left-width: 4px;
}
body[data-theme=dark] ::-webkit-scrollbar-thumb:horizontal {
  border-top-width: 4px;
}
body[data-theme=dark] ::-webkit-scrollbar-thumb:active,
body[data-theme=dark] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-brand);
}
body[data-theme=dark] ::-webkit-scrollbar-track,
body[data-theme=dark] ::-webkit-scrollbar-corner {
  background-color: var(--primary-background);
}

.bg-primary-brand {
  background-color: var(--primary-brand);
}

.bg-primary-brand-hover:hover {
  background-color: var(--primary-brand);
  color: var(--primary-background);
}

.b--primary-brand {
  border-color: var(--primary-brand);
}

.b--primary-brand-hover:hover {
  border-color: var(--primary-brand);
}

.primary-brand {
  color: var(--primary-brand);
}

.s-primary-brand {
  stroke: var(--primary-brand);
}

.f-primary-brand {
  fill: var(--primary-brand);
}

.primary-brand-hover:hover {
  color: var(--primary-brand);
}

.bg-primary-neutral {
  background-color: var(--primary-neutral);
}

.bg-primary-neutral-hover:hover {
  background-color: var(--primary-neutral);
}

.b--primary-neutral {
  border-color: var(--primary-neutral);
}

.b--primary-neutral-hover:hover {
  border-color: var(--primary-neutral);
}

.primary-neutral {
  color: var(--primary-neutral);
}

.s-primary-neutral {
  stroke: var(--primary-neutral);
}

.primary-neutral-hover:hover {
  color: var(--primary-neutral);
}

.bg-primary-background {
  background-color: var(--primary-background);
}

.bg-primary-background-force {
  background-color: var(--primary-background) !important;
  border: 1px solid var(--secondary-neutral) !important;
}

.success-snackbar .variantSuccess {
  background-color: var(--success-status);
  color: var(--primary-neutral);
}

.error-snackbar {
  background-color: var(--error-status);
  color: var(--primary-neutral);
}

.info-snackbar {
  background-color: var(--primary-brand);
  color: var(--primary-neutral);
}

.warning-snackbar {
  background-color: var(--warning-status);
  color: var(--primary-neutral);
}

.bg-textfield .bg-textfield:-webkit-autofill .bg-textfield:autofill {
  background-color: var(--primary-background) !important;
  color: var(--primary-neutral)  !important;
  border-color: var(--secondary-background) !important;
}

.bg-textfield:focus {
  background-color: var(--secondary-background) !important;
  color: var(--primary-neutral) !important;
  border-color: var(--secondary-brand) !important;
}

.bg-textfield:hover {
  border-color: var(--secondary-brand) !important;
}

.bg-primary-background-select .select__control {
  background-color: var(--primary-background);
  color: var(--primary-neutral);
}
.bg-primary-background-select .select__single-value {
  color: var(--primary-neutral);
}
.bg-primary-background-select .select__multi-value {
  color: var(--primary-neutral);
  background-color: var(--secondary-background);
}
.bg-primary-background-select .select__multi-value__label {
  color: var(--primary-neutral);
  background-color: var(--secondary-background);
}
.bg-primary-background-select .select__multi-value__remove {
  background-color: var(--secondary-background);
}
.bg-primary-background-select .select__menu {
  border: 1px solid var(--secondary-background);
  background-color: var(--primary-background);
  color: var(--primary-neutral);
}
.bg-primary-background-select .select__option {
  background-color: var(--primary-background);
  color: var(--primary-neutral);
}
.bg-primary-background-select .select__option:hover {
  background-color: var(--secondary-background);
  color: var(--primary-neutral);
}

.bg-primary-brand-select-navbar {
  border: none !important;
}
.bg-primary-brand-select-navbar svg {
  stroke: var(--primary-background) !important;
}
.bg-primary-brand-select-navbar .select__control {
  background-color: var(--primary-brand) !important;
  color: var(--primary-background) !important;
}
.bg-primary-brand-select-navbar .select__single-value {
  color: var(--primary-background) !important;
}
.bg-primary-brand-select-navbar .select__multi-value {
  color: var(--primary-neutral) !important;
  background-color: var(--secondary-background) !important;
}
.bg-primary-brand-select-navbar .select__multi-value__label {
  color: var(--primary-neutral) !important;
  background-color: var(--secondary-background) !important;
}
.bg-primary-brand-select-navbar .select__multi-value__remove {
  background-color: var(--secondary-background) !important;
}
.bg-primary-brand-select-navbar .select__menu {
  border: 1px solid var(--secondary-background) !important;
  background-color: var(--primary-background) !important;
  color: var(--primary-neutral) !important;
}
.bg-primary-brand-select-navbar .select__option {
  font-size: 1rem;
  background-color: var(--primary-background) !important;
  color: var(--primary-neutral) !important;
}
.bg-primary-brand-select-navbar .select__option:hover {
  background-color: var(--secondary-background) !important;
  color: var(--primary-neutral) !important;
}

.bg-primary-background-tooltip .rc-tooltip-inner {
  background-color: var(--primary-background) !important;
  border: 1px solid var(--primary-neutral) !important;
}

.bg-secondary-background-tooltip .rc-tooltip-inner {
  background-color: var(--secondary-background) !important;
  color: var(--primary-neutral) !important;
  border: 1px solid var(--secondary-neutral) !important;
  border-radius: 0 !important;
}

.bg-primary-background-hover:hover {
  background-color: var(--primary-background);
}

.b--primary-background {
  border-color: var(--primary-background);
}

.b--primary-background-hover:hover {
  border-color: var(--primary-background);
}

.primary-background {
  color: var(--primary-background);
}

.s-primary-background {
  stroke: var(--primary-background);
}

.primary-background-hover:hover {
  color: var(--primary-background);
}

.bg-success-status {
  background-color: var(--success-status);
}

.bg-success-status-hover:hover {
  background-color: var(--success-status);
}

.b--success-status {
  border-color: var(--success-status);
}

.f-success-status {
  fill: var(--success-status);
}

.b--success-status-hover:hover {
  border-color: var(--success-status);
}

.success-status {
  color: var(--success-status);
}

.s-success-status {
  stroke: var(--success-status);
}

.success-status-hover:hover {
  color: var(--success-status);
}

.bg-secondary-brand {
  background-color: var(--secondary-brand);
}

.bg-secondary-brand-hover:hover {
  background-color: var(--secondary-brand);
  color: var(--secondary-background);
}

.b--secondary-brand {
  border-color: var(--secondary-brand);
}

.b--secondary-brand-hover:hover {
  border-color: var(--secondary-brand);
}

.secondary-brand {
  color: var(--secondary-brand);
}

.secondary-brand-hover:hover {
  color: var(--secondary-brand);
}

.bg-secondary-neutral {
  background-color: var(--secondary-neutral);
}

.bg-secondary-neutral-hover:hover {
  background-color: var(--secondary-neutral);
}

.b--secondary-neutral {
  border-color: var(--secondary-neutral);
}

.b--secondary-neutral-hover:hover {
  border-color: var(--secondary-neutral);
}

.s-secondary-neutral {
  stroke: var(--secondary-neutral);
}

.secondary-neutral {
  color: var(--secondary-neutral);
}

.f-secondary-neutral {
  fill: var(--secondary-neutral);
}

.s-secondary-neutral {
  stroke: var(--secondary-neutral);
}

.secondary-neutral-hover:hover {
  color: var(--secondary-neutral);
}

.bg-secondary-background {
  background-color: var(--secondary-background);
}

.bg-secondary-background-hover:hover {
  background-color: var(--secondary-background);
}

.f-secondary-background {
  fill: var(--secondary-background);
}

.b--secondary-background {
  border-color: var(--secondary-background);
}

.b--secondary-background-hover:hover {
  border-color: var(--secondary-background);
}

.secondary-background {
  color: var(--secondary-background);
}

.secondary-background-hover:hover {
  color: var(--secondary-background);
}

.bg-warning-status {
  background-color: var(--warning-status);
}

.bg-warning-status-hover:hover {
  background-color: var(--warning-status);
}

.f-warning-status {
  fill: var(--warning-status);
}

.b--warning-status {
  border-color: var(--warning-status);
}

.b--warning-status-hover:hover {
  border-color: var(--warning-status);
}

.warning-status {
  color: var(--warning-status);
}

.s-warning-status {
  stroke: var(--warning-status);
}

.warning-status-hover:hover {
  color: var(--warning-status);
}

.bg-tertiary-brand {
  background-color: var(--tertiary-brand);
}

.bg-tertiary-brand-hover:hover {
  background-color: var(--tertiary-brand);
}

.b--tertiary-brand {
  border-color: var(--tertiary-brand);
}

.b--tertiary-brand-hover:hover {
  border-color: var(--tertiary-brand);
}

.tertiary-brand {
  color: var(--tertiary-brand);
}

.tertiary-brand-hover:hover {
  color: var(--tertiary-brand);
}

.bg-tertiary-neutral {
  background-color: var(--tertiary-neutral);
}

.bg-tertiary-neutral-hover:hover {
  background-color: var(--tertiary-neutral);
}

.b--tertiary-neutral {
  border-color: var(--tertiary-neutral);
}

.b--tertiary-neutral-hover:hover {
  border-color: var(--tertiary-neutral);
}

.tertiary-neutral {
  color: var(--tertiary-neutral);
}

.tertiary-neutral-hover:hover {
  color: var(--tertiary-neutral);
}

.bg-error-status {
  background-color: var(--error-status);
}

.s-error-status {
  stroke: var(--error-status);
}

.bg-error-status-hover:hover {
  background-color: var(--error-status);
}

.b--error-status {
  border-color: var(--error-status);
}

.b--error-status-hover:hover {
  border-color: var(--error-status);
}

.error-status {
  color: var(--error-status);
}

.error-status-hover:hover {
  color: var(--error-status);
}

.editable-textbox {
  border-color: var(--primary-brand) !important;
}

.noneditable-textbox {
  border-color: transparent;
  cursor: default;
}

.editable-textbox:hover {
  border-color: var(--primary-brand) !important;
}

.editable-textbox-compact {
  min-width: 4rem;
  max-width: 6.25rem;
}

.brand-header {
  font-family: var(--font-inter);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 2.5625rem;
  letter-spacing: 0.005em;
}

.brand-subhead {
  font-family: var(--font-inter);
  font-size: 1.75rem;
  line-height: 2.125rem;
  letter-spacing: 0.005em;
}

.page-heading {
  font-family: var(--font-inter);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.75rem;
  letter-spacing: 0rem;
}

.section-heading {
  font-family: var(--font-inter);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5625rem;
  letter-spacing: 0rem;
}

.body-emphasized {
  font-family: var(--font-inter);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.375rem;
  letter-spacing: 0rem;
}

.body-default {
  font-family: var(--font-inter);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.3125rem;
  letter-spacing: 0rem;
}

.button-emphasized {
  font-family: var(--font-inter);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3125rem;
  letter-spacing: 0rem;
}

.button-default {
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: 1.3125rem;
  font-weight: 400;
  letter-spacing: 0rem;
}

.input-uppercase {
  font-family: var(--font-inter);
  font-size: 0.9375rem;
  text-transform: uppercase;
  line-height: 1.25rem;
  letter-spacing: 0rem;
}

.input-default {
  font-family: var(--font-inter);
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0rem;
}

.input-emphasized {
  font-family: var(--font-inter);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25rem;
  letter-spacing: 0.005em;
}

.footnote {
  font-family: var(--font-inter);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  letter-spacing: 0rem;
}

.caption-regular {
  font-family: var(--font-inter);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0rem;
}

.caption-emphasized {
  font-family: var(--font-inter);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0rem;
}

.caption-uppercase {
  font-family: var(--font-inter);
  font-size: 0.6875rem;
  text-transform: uppercase;
  line-height: 0.8125rem;
  letter-spacing: 0.005em;
}

.caption-emphasized-uppercase {
  font-family: var(--font-inter);
  font-size: 0.6875rem;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.8125rem;
  letter-spacing: 0.01em;
}

.checkbox .label {
  position: relative;
  display: inline-block;
  /*16px width of fake checkbox + 6px distance between fake checkbox and text*/
  padding-left: 1.375rem;
}

.checkbox .disabled {
  position: relative;
  display: inline-block;
  padding-left: 1.375rem;
}

.checkbox .label::before {
  position: absolute;
  content: "";
  /*Needed for the line-height to take effect*/
  display: inline-block;
}

.checkbox .disabled::before {
  position: absolute;
  content: "";
  display: inline-block;
}

/*Outer box of the fake checkbox*/
.checkbox .label::before {
  height: 1rem;
  width: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4V3.6C3 3.26863 3.26863 3 3.6 3H20.4C20.7314 3 21 3.26863 21 3.6Z' stroke='%231655b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  left: 0rem;
  /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
   *to vertically center it.
   */
  top: 0.1875rem;
}

.checkbox .disabled::before {
  height: 1rem;
  width: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4V3.6C3 3.26863 3.26863 3 3.6 3H20.4C20.7314 3 21 3.26863 21 3.6Z' stroke='%238294b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  left: 0rem;
  top: 0.1875rem;
}

.checkbox input[type=checkbox]:checked + .label::before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.60001 3C3.26862 3 3 3.26863 3 3.60001V20.4C3 20.7314 3.26862 21 3.60001 21H20.4C20.7314 21 21 20.7314 21 20.4V3.60001C21 3.26863 20.7314 3 20.4 3H3.60001ZM6.53033 11.955C6.23743 11.6621 5.76257 11.6621 5.46967 11.955C5.17679 12.2479 5.17679 12.7227 5.46967 13.0156L8.86377 16.4097C9.15668 16.7026 9.63156 16.7026 9.92444 16.4097L18.4097 7.92445C18.7026 7.63156 18.7026 7.15669 18.4097 6.86378C18.1168 6.57089 17.642 6.57089 17.3491 6.86378L9.3941 14.8188L6.53033 11.955Z' fill='%231655b3'/%3E%3C/svg%3E");
}