/* Unchanged output from SUP-173 branch 2024-03-21 */
/* 173 fixed checkbox issues, not yet merged to main */


:root {
  --fg-action: rgba(45, 97, 150, 1.0);
  --bg-action-pressed: rgba(197, 217, 238, 1.0);
  --border-action: rgba(56, 121, 186, 1.0);
  --inner-dark: rgba(0, 0, 0, 0.25);
  --fg-on-emphasis: rgba(255, 255, 255, 1.0);
  --bg-action-emphasis: rgba(56, 121, 186, 1.0);
  --bg-default: rgba(255, 255, 255, 1.0);
  --bg-action-emphasis-hover: rgba(45, 97, 150, 1.0);
  --border-action-hover: rgba(45, 97, 150, 1.0);
  --focus: rgba(86, 145, 204, 0.30);
  --bg-action-emphasis-pressed: rgba(36, 76, 117, 1.0);
  --bg-action-hover: rgba(234, 241, 249, 1.0);
  --fg-muted: rgba(84, 96, 111, 1.0);
  --fg-subtle: rgba(108, 119, 133, 1.0);
  --border-text-input: rgba(123, 169, 215, 1.0);
  --fg-default: rgba(40, 54, 70, 1.0);
  --bg-tooltip: rgba(40, 54, 70, 1.0);
  --fg-tooltip: rgba(241, 241, 244, 1.0);
  --scaled-danger-70: rgba(173, 50, 50, 1.0);
}
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  font-family: 'Inter', system-ui, 'Segoe UI', sans-serif;
  padding: 30px;
}

.sui-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sui-Button--primary {
  background-color: var(--bg-action-emphasis);
  color: var(--fg-on-emphasis);
}

.sui-Button--secondary {
  background-color: var(--bg-default);
  color: var(--fg-action);
}

.sui-Button--tertiary {
  background-color: var(--bg-default);
  color: var(--fg-muted);
}

.sui-Button--small {
  gap: 6px;
  padding: 0 14px 0 14px;
  border-radius: 4px;
  height: 32px;
}

.sui-Button--medium {
  gap: 8px;
  padding: 0 16px 0 16px;
  border-radius: 6px;
  height: 40px;
}

.sui-Button--large {
  gap: 12px;
  padding: 0 20px 0 20px;
  border-radius: 8px;
  height: 48px;
}

.sui-Button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background-color 0.2s ease-in-out;
  border: 1px solid var(--border-action);
}

.sui-Button img,
.sui-Button svg {
  height: 16px;
  width: 16px;
  fill: currentColor;
}

.sui-Button--icon-right {
  margin-left: auto;
}

:focus-visible {
  outline: 5px solid var(--focus);
  outline-offset: 0;
}

.sui-Checkbox--right {
  justify-content: space-between;
}

.sui-Checkbox {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sui-Checkbox__input:checked {
  background: var(--bg-action-emphasis) center url('data:image/svg+xml;charset=utf-8,%3Csvg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.40903 9.88948L1.22705 6.7075L2.64205 5.2925L4.40903 7.06448L9.35799 2.11052L10.773 3.52552L4.40903 9.88948Z" fill="white"/%3E%3C/svg%3E');
}

.sui-Checkbox__input {
  appearance: none;
  margin: 0;
  transition: 0.2s background-color linear;
  border: 2px solid var(--border-action);
  background-color: var(--bg-default);
  border-radius: 3px;
  height: 16px;
  width: 16px;
}

.sui-Checkbox__label {
  color: var(--fg-default);
}

.sui-Slider {
  display: flex;
  align-items: center;
}

.sui-Slider__input {
  padding: 0px 66px 0px 0px;
  position: absolute;
  width: 126px;
  height: 6px;
  left: 20px;
  top: 97px;
  background-color: var(--border-action);
  border-radius: 3px;
  box-sizing: border-box;
}

.sui-Slider__input:disabled {
  opacity: 0.5;
}

.sui-Slider__value-fill {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 200px;
}

.sui-Slider__value-fill::-webkit-slider-runnable-track {
  background: #337F88;
  height: 6px;
  border-radius: 3px;
}

.sui-Slider__value-fill::-moz-range-track {
  background: #337F88;
  height: 6px;
  border-radius: 3px;
}

.sui-Slider__value-fill::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  margin-top: -5px;
  border: 2px solid var(--border-action);
  border-radius: 50%;
}

.sui-Slider__value-fill::-moz-range-thumb {
  border: 2px solid var(--border-action);
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  margin-top: -5px;
  border-radius: 50%;
}

.sui-Slider__value-fill:focus {
  outline: none;
}

.sui-Slider__value-fill:disabled {
  opacity: 0.5;
}

.sui-Slider__value-fill:focus::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px 5px #A4E3EBB2;
}

.sui-Slider__value-fill:focus::-moz-range-thumb {
  box-shadow: 0px 0px 0px 5px #A4E3EBB2;
}

.sui-Slider__knob {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-action);
  background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, #337F88, #337F88);
  box-shadow: 1px 2px 2px 0px #00000026;
  animation-duration: 0ms;
}

.sui-IconButton--small {
  height: 32px;
  width: 32px;
  border-radius: 4px;
}

.sui-IconButton--medium {
  height: 40px;
  width: 40px;
  border-radius: 6px;
}

.sui-IconButton--large {
  height: 48px;
  width: 48px;
  border-radius: 8px;
}

.sui-IconButton {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, box-shadow 0.2s;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.sui-Input--small {
  height: 32px;
  border-radius: 4px;
  gap: 12px;
  padding: 0 10px 0 10px;
}

.sui-Input--medium {
  height: 40px;
  border-radius: 6px;
  gap: 14px;
  padding: 0 12px 0 12px;
}

.sui-Input--large {
  height: 48px;
  border-radius: 8px;
  gap: 16px;
  padding: 0 16px 0 16px;
}

.sui-Input {
  width: 150px;
  border: 1px solid var(--border-text-input);
  font-family: inherit;
}

.sui-Tooltip {
  position: relative;
}

.sui-Tooltip::before,
.sui-Tooltip::after {
  position: absolute;
  z-index: 999;
  display: none;
}

.sui-Tooltip::before {
  content: attr(data-tooltip);
  width: max-content;
  padding: 8px 8px 8px 8px;
  border-radius: 2px;
  color: var(--fg-tooltip);
  background-color: var(--bg-tooltip);
}

.sui-Tooltip:hover::before,
.sui-Tooltip:hover::after {
  display: block;
}

.sui-Tooltip::after {
  content: '';
}

.sui-Tooltip--top::before,
.sui-Tooltip--top::after {
  top: -4px;
  left: 50%;
}

.sui-Tooltip--bottom::before,
.sui-Tooltip--bottom::after {
  bottom: -4px;
  left: 50%;
}

.sui-Tooltip--right::before,
.sui-Tooltip--right::after {
  right: -4px;
  top: 50%;
}

.sui-Tooltip--left::before,
.sui-Tooltip--left::after {
  left: -4px;
  top: 50%;
}

.sui-Tooltip--small::before {
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.12px;
  text-align: center;
}

.sui-Tooltip--small.sui-Tooltip--top::before {
  transform: translate(-50%, calc(-100% - 6px));
}

.sui-Tooltip--small.sui-Tooltip--top::after {
  border: solid transparent;
  border-top-color: var(--bg-tooltip);
  border-width: 6px 4px;
  transform: translate(-50%, -6px);
}

.sui-Tooltip--small.sui-Tooltip--bottom::before {
  transform: translate(-50%, calc(100% + 6px));
}

.sui-Tooltip--small.sui-Tooltip--bottom::after {
  border: solid transparent;
  border-bottom-color: var(--bg-tooltip);
  border-width: 6px 4px;
  transform: translate(-50%, 6px);
}

.sui-Tooltip--small.sui-Tooltip--right::before {
  transform: translate(calc(100% + 6px), -50%);
}

.sui-Tooltip--small.sui-Tooltip--right::after {
  border: solid transparent;
  border-right-color: var(--bg-tooltip);
  border-width: 4px 6px;
  transform: translate(calc(100% - 6px), -50%);
}

.sui-Tooltip--small.sui-Tooltip--left::before {
  transform: translate(calc(-100% - 6px), -50%);
}

.sui-Tooltip--small.sui-Tooltip--left::after {
  border: solid transparent;
  border-left-color: var(--bg-tooltip);
  border-width: 4px 6px;
  transform: translate(calc(-100% + 6px), -50%);
}

.sui-Tooltip--large::before {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  text-align: center;
}

.sui-Tooltip--large.sui-Tooltip--top::before {
  transform: translate(-50%, calc(-100% - 7px));
}

.sui-Tooltip--large.sui-Tooltip--top::after {
  border: solid transparent;
  border-top-color: var(--bg-tooltip);
  border-width: 7px 5px;
  transform: translate(-50%, -7px);
}

.sui-Tooltip--large.sui-Tooltip--bottom::before {
  transform: translate(-50%, calc(100% + 7px));
}

.sui-Tooltip--large.sui-Tooltip--bottom::after {
  border: solid transparent;
  border-bottom-color: var(--bg-tooltip);
  border-width: 7px 5px;
  transform: translate(-50%, 7px);
}

.sui-Tooltip--large.sui-Tooltip--right::before {
  transform: translate(calc(100% + 7px), -50%);
}

.sui-Tooltip--large.sui-Tooltip--right::after {
  border: solid transparent;
  border-right-color: var(--bg-tooltip);
  border-width: 5px 7px;
  transform: translate(calc(100% - 7px), -50%);
}

.sui-Tooltip--large.sui-Tooltip--left::before {
  transform: translate(calc(-100% - 7px), -50%);
}

.sui-Tooltip--large.sui-Tooltip--left::after {
  border: solid transparent;
  border-left-color: var(--bg-tooltip);
  border-width: 5px 7px;
  transform: translate(calc(-100% + 7px), -50%);
}

.sui-TextField {
  display: flex;
  flex-direction: column;
}

.sui-TextField__input--small {
  width: 200px;
  height: 32px;
  border-radius: 4px;
  gap: 12px;
  padding: 0 10px 0 10px;
}

.sui-TextField__input--medium {
  width: 220px;
  height: 40px;
  border-radius: 6px;
  gap: 14px;
  padding: 0 12px 0 12px;
}

.sui-TextField__input--large {
  width: 240px;
  height: 48px;
  border-radius: 8px;
  gap: 16px;
  padding: 0 16px 0 16px;
}

.sui-TextField__input {
  border: 1px solid var(--border-text-input);
  font-family: inherit;
}

.sui-TextField__span {
  color: var(--fg-muted);
}

.sui-Button--primary:not(:disabled):hover {
  background-color: var(--bg-action-emphasis-hover);
  border: 1px solid var(--border-action-hover);
}

.sui-Button--secondary:not(:disabled):hover {
  background-color: var(--bg-action-hover);
}

.sui-Button--primary:focus {
  background-color: var(--bg-action-emphasis-hover);
  border: 1px solid var(--border-action-hover);
}

.sui-Button--tertiary:focus {
  background-color: rgba(255, 255, 255, 1.0);
}

.sui-Button--primary:active {
  background-color: var(--bg-action-emphasis-pressed);
  box-shadow: inset 1px 2px 4px var(--inner-dark);
}

.sui-Button--secondary:active {
  background-color: var(--bg-action-pressed);
  box-shadow: inset 1px 2px 4px var(--inner-dark);
}

.sui-Button--tertiary:active {
  background-color: var(--bg-action-hover);
}

.sui-Checkbox__input--default:not(:disabled):hover {
  border: 2px solid var(--border-action-hover);
  box-shadow: 0 0 0 var(--focus);
}

.sui-Checkbox__input--default:checked {
  background-color: var(--bg-action-emphasis);
}

.sui-IconButton:not(:disabled):hover {
  background-color: var(--bg-action-hover);
}

.sui-IconButton:focus {
  background-color: var(--bg-action-hover);
}

.sui-IconButton:active {
  background-color: var(--bg-action-pressed);
  box-shadow: inset 1px 2px 4px var(--inner-dark);
}

.sui-IconButton--selected {
  background-color: var(--bg-action-emphasis);
}

.sui-Input:not(:disabled):hover {
  border: 1px solid var(--border-action-hover);
}

.sui-Input:focus {
  border: 1px solid var(--border-action-hover);
}

.sui-TextField__input--error {
  border: 1px solid var(--scaled-danger-70);
}

.sui-TextField__span--error {
  color: var(--scaled-danger-70);
}

.sui-typography--button-sm {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
}

.sui-typography--button-lg {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.sui-typography--button-md {
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
}

.sui-typography--input-sm {
  font-size: 14px;
  line-height: 17px;
}

.sui-typography--input-md {
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.16px;
}

.sui-typography--input-lg {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.4px;
}

.sui-typography--label-md {
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  letter-spacing: -0.16px;
}

.sui-typography--body-xxs {
  font-size: 10px;
  line-height: 150%;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.sui-typography--label-xs {
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0.12px;
  text-align: center;
}

.sui-typography--label-sm {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  text-align: center;
}

.sui-typography--body-xs {
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0.12px;
}