.pace-tracker {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "CTVSans-Regular", sans-serif;
  font-weight: normal;
  border: 1px solid var(--white);
  border-radius: 20px;
  box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.14);
  padding: 10px;
  margin: 10px auto;
  max-width: 750px;

  --color-dark: #187ec6;
  --color-light: #cee8fa;
  --color-extra-dark: #0a4c7a;
  --black: #222;
  --white: #fdfdfd;
  --off-white: #aaa;
}

.bold {
  font-family: "CTVSans-Bold", sans-serif;
}

.black {
  font-family: "CTVSans-Black", sans-serif;
}

.pace-tracker .section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 6px;
  background-color: var(--white);
  line-height: 1.25;
  /* border-top: 1px solid var(--black); */
}

.pace-tracker .container {
  margin: 5px auto;
  display: flex;
  flex-direction: row;
  gap: 6px;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: var(--white);
}

.pace-tracker .intro-title {
  font-size: 28px;
  text-align: center;
}

.pace-tracker .intro-text {
  font-size: 14px;
  text-align: center;
  margin: 5px 0 20px;
}
.pace-tracker .dropdown-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0;
  width: 100%;
}
.pace-tracker select {
  font-family: "CTVSans-Bold", Roboto, sans;
  font-size: 36px;
  text-align-last: center;
  border: none;
  border-radius: 25px;
  padding: 2px 4px;
  width: calc(100% - 20px);
  background-color: var(--color-light);
  box-shadow: 5px 5px 10px #eee, -5px -5px 10px #e1fdff33;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.pace-tracker .section.note {
  width: calc(100% - 60px);
  font-size: 14px;
  background: rgba(225, 168, 27, 0.5);
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}

.section.note span {
  font-family: "CTVSans-Bold", sans-serif;
}

.pace-tracker select option {
  -moz-appearance: none;

  font-family: inherit;
}

.pace-tracker .dropdown-arrow {
  height: 100%;
  width: 65px;
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pace-tracker option {
  font-size: 18px;
  background-color: var(--white);
  font-family: "CTVSans-Regular", Roboto, sans;
}

.pace-tracker .target-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 25px;
  background: var(--color-light);
  color: var(--black);
  margin: 5px;
  padding: 6px 0;
  overflow: hidden;
}
.target-card.inactive {
  opacity: 0.5;
  pointer-events: none;
  background: #dedede;
}
.pace-tracker .target-title {
  font-size: 22px;
  /* border-bottom: 2px solid #fdfdfd; */
  width: 100%;
  text-align: center;
  padding: 5px 0;
}
.pace-tracker .section.target {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: stretch;
}

.pace-tracker .target-text {
  text-align: center;
  font-size: 18px;
  padding: 10px 20px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}

.target-text > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.target-text > div > span {
  margin: 3px 5px;
}

.target-text span {
  /* font-family: "CTVSans-Black", Roboto, sans; */
}

.target-text span.date {
  font-family: "CTVSans-Bold", Roboto, sans;
  color: var(--white);
  background: var(--color-dark);
  padding: 0px 8px;
  border-radius: 15px;
  white-space: nowrap;
}

.section.target .target-label {
  font-size: 12px;
  margin-top: 10px;
}

.section.target .current {
  font-size: 22px;
  margin-bottom: 2px;
}

.section.target .current > span {
  font-size: 12px;
  font-family: "CTVSans-Regular", sans-serif;
}

.target-card > .toggle {
  color: var(--white);
  background: var(--color-dark);
  border-radius: 50px;
  margin: 8px;
  box-shadow: 0 0 0 4px var(--white);
}

.target-card.inactive .toggle {
  background-color: var(--white);
  opacity: 1;
  pointer-events: all;
}

.target-card.inactive .toggle > span {
  opacity: 0;
}

.target-card.inactive .toggle:hover {
  opacity: 0.75;
  box-shadow: 0 0 0 5px var(--white);
}

.pace-tracker .container input {
  font-family: Roboto, sans-serif;
  font-size: 32px;
  width: 70px;
  text-align: center;
  border: none;
  /* border-bottom: 2px dotted #222; */
  border-radius: 0;
  background-color: transparent;
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.radio-container .label {
  font-size: 12px;
  color: var(--off-white);
}

.pace-tracker .radio {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
}

.radio-option {
  cursor: pointer;
  user-select: none;
  border: none;
  border-radius: 50px;
  padding: 5px 12px;
  font-size: inherit;
  font-family: inherit;
  background-color: var(--white);
  box-sizing: border-box;
  border: 2px solid transparent;
  transition-duration: 0.05s;
  transition-property: border;
  letter-spacing: 0.4px;
}

.radio-option:hover {
  background: var(--color-light);
}

.radio-option.active {
  /* border: 2px solid var(--black); */
  background-color: var(--color-dark);
  color: var(--white);
  font-family: "CTVSans-Bold", sans-serif;
  letter-spacing: 0px;
}

.pace-tracker .number-input {
  /* border: 2px solid #222; */
  padding: 4px 6px;
  border-radius: 50px;
  background: linear-gradient(145deg, #fff, #eee);
  box-shadow: 5px 5px 10px #bbd3e4, -5px -5px 10px #e1fdff33;
}

.pace-tracker .number-input > span {
  font-family: Roboto;
  font-size: 24px;
  margin-left: -15px;
  color: var(--black);
}
.pace-tracker .number-input button,
.pace-tracker .toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  padding: 6px;
  border-radius: 50px;
  background: var(--color-dark);
  color: var(--white);
  user-select: none;
}

/* CHART */

.chart svg {
  font-family: "CTVSans-Regular", Roboto, sans;
  fill: #666;
  font-size: 10px;
  width: calc(100% - 40px);
  min-width: 350px;
  height: 300px;
  /* box-shadow: 0 0 2px 1px #ccc; */
}

.chart svg .title text {
  fill: #222;
  text-anchor: middle;
}
.chart svg .legend text {
  font-size: 12px;
}
.chart svg .date-highlight.inactive {
  display: none;
}
.chart svg .date-highlight > text {
  text-anchor: middle;
  font-size: 14px;
  fill: var(--white);
}

.chart svg .date-highlight > rect {
  fill: var(--color-dark);
  rx: 10;
}
.chart svg .date-highlight > line {
  stroke-width: 4px;
  stroke: #bbb;
  /* stroke-dasharray: 2 2; */
}
.chart svg .date-highlight > .percent-line {
  stroke-width: 3px;
  stroke: #ddd;
}
.chart svg .title text.sub-title {
  font-family: "CTVSans-Regular", Roboto, sans;
  fill: #222;
  text-anchor: middle;
}

.chart svg .chart line {
  fill: none;
  stroke: #222;
  stroke-width: 1px;
}

.chart svg path,
.chart svg .legend line {
  fill: none;
  stroke: var(--black);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart svg path.first,
.chart svg line.first {
  stroke: var(--color-dark);
}

.chart svg path.filled,
.chart svg line.filled {
  fill: var(--color-light);
  stroke: none;
}

.chart svg path.fully,
.chart svg line.fully {
  stroke: var(--color-extra-dark);
}

.chart .dashed,
.chart svg .legend line.dashed {
  stroke-dasharray: 0 7;
  opacity: 1;
}

.chart line {
  shape-rendering: crispEdges;
}

.chart .y-axis line {
  stroke-dasharray: 2 4;
  stroke: #ddd;
  stroke-width: 1px;
}

.chart line.zero {
  stroke-dasharray: none;
  stroke: #999;
}

.chart .x-axis line {
  stroke: #999;
}

.chart .x-axis text {
  text-anchor: middle;
}

/* MATERIAL ICONS  */

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga";
}

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px;
}
.material-icons.md-24 {
  font-size: 24px;
}
.material-icons.md-36 {
  font-size: 36px;
}
.material-icons.md-48 {
  font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

.material-icons.md-18 {
  font-size: 18px;
}
.material-icons.md-24 {
  font-size: 24px;
}
.material-icons.md-36 {
  font-size: 36px;
}
.material-icons.md-48 {
  font-size: 48px;
}

.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}

.material-icons.md-light {
  color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

.material-icons.red {
  color: rgb(226, 40, 45);
}

.material-icons.yellow {
  color: rgb(225, 168, 27);
}

.material-icons.green {
  color: rgb(32, 147, 27);
}

@media only screen and (max-width: 600px) {
  .pace-tracker .target-title {
    font-size: 18px;
  }
  .section.target .current {
    font-size: 18px;
  }

  .section.target .target-label {
    font-size: 11px;
    margin-top: 9px;
  }

  .pace-tracker .container input {
    font-size: 28px;
    width: 50px;
  }

  .pace-tracker .number-input > span {
    font-family: Roboto;
    font-size: 18px;
  }

  .pace-tracker select {
    font-size: 26px;
  }

  .pace-tracker .target-text {
    font-size: 14px;
  }
}