@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import '../../styles/variables.css';

:root {
  --main-size: 16px;
  --color-disputed: #fb6a6e;
  --color-undisputed: #bdbdbd;
  --button-color: #333745;
  --multitoggle-highlight: #494f62;
  --hover-highlight: #7380ac;
}

.demo {
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

span.rect {
  display: inline-block;
  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin: 0px calc(var(--main-size) / 2 - 4px) 0px 0px;
  text-align: center;
  width: 27px;
  height: 18px;
}

input ~ .check::before {
  content: '\f070';
  font-size: 19px;
  font-weight: 900;
}

input:checked ~ .check::before {
  content: '\f06e';
  font-size: 18px;
  font-weight: 900;
}

.circle-cardholder-no-disputes {
  color: var(--color-undisputed);
  font-size: 120%;
  padding: 1px;
}

.circle-cardholder-disputes {
  color: var(--color-disputed);
  font-size: 120%;
  padding: 1px;
}
.demo__rhs-panel {
  background-color: #242c35;
  padding: 0px;
}

.demo__options-panel {
  background-color: #242c35;
  border-bottom: 1px solid hsla(0, 0%, 100%, 5%);
  padding: var(--main-size);
  margin: 0px;
}

.demo__rhs-panel > .demo__options-panel + .demo__options-panel {
  margin: 0px;
}

.demo__options-panel label {
  padding: 0px 0px var(--main-size);
  margin: 0px;
}

.demo__options-panel label:last-child {
  padding: 0px;
}

#tooltip .fa-arrow-right {
  display: inline-block;
  color: var(--color-undisputed);
}

.transaction > * + * {
  margin-left: var(--s-3);
}

#transaction-info span {
  font-size: 14px;
}

.demo__legend-line-disputed {
  border: 2px solid var(--color-disputed);
  background-color: var(--color-disputed);
}

.demo__legend-line-undisputed {
  border: 2px solid var(--color-undisputed);
  background-color: var(--color-undisputed);
}

#transaction-date {
  text-align: center;
  font-size: 14px;
  margin: 4px 0px;
}

#tooltip .fa-credit-card {
  color: #ffab40;
}

#tooltip.disputed .fa-arrow-right {
  color: var(--color-disputed);
}

#transaction-status {
  margin: 4px 0px;
  display: none;
}

#tooltip.disputed #transaction-status {
  color: var(--color-disputed);
  display: block;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0;
}

#tooltip .wrapper {
  border-left: solid 6px #383b3f;
  border-right: solid 6px var(--color-undisputed);
}

#tooltip.disputed .wrapper {
  border-right-color: var(--color-disputed);
}

#tooltip.multiple .wrapper {
  border-right-color: #383b3f;
}

.scale-mode-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  height: 36px;
  background-color: #333745;
}

.scale-mode-toggle-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.scale-mode-toggle-item > span {
  font-size: var(--main-size);
  font-weight: 300;
}

.scale-mode-toggle-item[selected] {
  background-color: #494f62;
}

.options-title {
  font-weight: 700;
  size: 14px;
  line-height: var(--main-size);
  color: #ffffff;
  width: 100%;
  display: block;
  padding: 0px 0px var(--main-size);
  margin: 0px;
}

.subtitle {
  font-weight: 400;
}

.button-container {
  padding: 0px;
  margin: 0px 0px var(--main-size);
}

button {
  width: 100%;
  height: 36px;
  color: #fff;
  background-color: var(--button-color);
  font-size: var(--main-size);
  font-weight: 700;
  padding: calc(var(--main-size) / 2);
  border: none;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  cursor: pointer;
  margin: 0px;
}

button:not(:last-child) {
  margin-bottom: var(--main-size);
}

button:hover {
  background-color: var(--hover-highlight);
}

.multitoggle-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 3px;
  padding: 0px;
  margin: 0px 0px var(--half-size);
  overflow: clip;
  border: 1px solid var(--button-color);
}

button.multitoggle {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-radius: 0px;
  padding: 10px;
  background-color: var(--button-color);
  color: #ffffff;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-width: 0px 1px 0px 0px;
  border-style: solid;
  border-color: var(--button-color);
  font-size: var(--main-size);
  font-weight: 700;
  text-transform: none;
  margin: 0px;
}

.multitoggle-label {
  padding: var(--half-size) 0px;
}

.multitoggle:last-child {
  border-width: 0px 0px 0px 0px;
}

.multitoggle.selected {
  background-color: var(--multitoggle-highlight);
}

.multitoggle:hover,
.multitoggle.selected:hover {
  background-color: var(--hover-highlight);
}

#exportimg {
  min-height: 200px;
}