/* ../components/Language.css */
.langSelect {
  background: none;
  border: 1px solid rgb(148, 150, 189);
  border-radius: 8px;
  padding: 0.7em;
  position: absolute;
  right: 10px;
  top: 10px;
}

/* ../components/Tooltip.css */
.hasTooltip {
  display: inline-block;
  position: relative;
  text-decoration: underline dotted;
}
.tooltip {
  background: black;
  border-radius: 6px;
  box-sizing: border-box;
  color: white;
  display: none;
  font: normal 14px sans-serif;
  left: 50%;
  max-width: 200px;
  padding: 4px 8px;
  position: absolute;
  top: -5px;
  transform: translate(-50%, -100%);
  width: -moz-max-content;
  width: max-content;
}
.hasTooltip.contentIsTall .tooltip {
  top: -8px;
}
.hasTooltip:hover .tooltip {
  display: block;
}
.tooltip .arrow {
  bottom: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid black;
  height: 0;
  left: calc(50% - 6px);
  position: absolute;
  width: 0;
}

/* ../components/SkillList.css */
.filterButton {
  background: rgb(214, 207, 231);
  border: none;
  box-shadow: 0 3px 0 rgb(180, 178, 192);
  color: rgb(121, 64, 22);
  padding: 0.8em;
  margin: 10px 5px;
  text-stroke: 1px rgb(121, 64, 22);
  -webkit-text-stroke: 1px rgb(121, 64, 22);
}
.filterButton.active {
  background: rgb(86, 171, 51);
  box-shadow: 0 3px 0 rgb(86, 171, 51);
  color: white;
  text-stroke: 1px white;
  -webkit-text-stroke: 1px white;
}
.iconFilterButton {
  all: unset;
  background-size: contain;
  filter: grayscale(1);
  height: 40px;
  margin: 5px;
  width: 40px;
}
.iconFilterButton.active {
  filter: none;
}
.filterSearch {
  margin: 3px 5px;
  padding: 0.8em;
  width: calc(100% - 26px);
}
.skillList {
  display: grid;
  font-size: 16px;
  gap: 16px 0;
  grid-template-columns: repeat(auto-fit, 300px);
  list-style-type: none;
  padding: 0;
}
.skill {
  align-items: center;
  border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: 0 3px 0 rgb(180, 178, 192);
  box-sizing: border-box;
  display: flex;
  height: 3em;
  overflow: hidden;
  padding: 5px;
  width: 18em;
}
.skill:active {
  box-shadow: none;
  filter: brightness(0.95);
}
.hidden,
.skill.selected {
  display: none;
}
.skillName {
  color: rgb(121, 64, 22);
  display: flex;
  flex: 1;
  overflow: hidden;
  text-stroke: 1px rgb(121, 64, 22);
  -webkit-text-stroke: 1px rgb(121, 64, 22);
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
  text-wrap: nowrap;
}
.skillIcon {
  height: 2.2em;
  margin: 0 8px 0 0;
  width: 2.2em;
}
.skillDismiss {
  color: rgb(121, 64, 22);
  cursor: default;
  padding: 0 7px;
}
.skill-white {
  background:
    linear-gradient(
      90deg,
      rgb(255, 243, 247),
      rgb(181, 178, 198)) padding-box,
    linear-gradient(
      90deg,
      rgb(214, 207, 231),
      rgb(148, 150, 189)) border-box;
}
.skill-gold {
  background:
    linear-gradient(
      90deg,
      rgb(255, 255, 239),
      rgb(255, 190, 40)) padding-box,
    linear-gradient(
      90deg,
      rgb(255, 223, 115),
      rgb(255, 166, 16)) border-box;
}
.skill-pink {
  background:
    linear-gradient(
      90deg,
      rgb(255, 238, 239),
      rgb(255, 155, 211)) padding-box,
    linear-gradient(
      90deg,
      rgb(255, 142, 198),
      rgb(255, 89, 173)) border-box;
}
.skill-unique {
  background:
    linear-gradient(
      90deg,
      rgb(239, 255, 214),
      rgb(161, 201, 248),
      rgb(170, 170, 255),
      rgb(255, 186, 231)) padding-box,
    linear-gradient(
      90deg,
      rgb(197, 255, 190),
      rgb(189, 235, 255),
      rgb(195, 208, 255),
      rgb(255, 138, 222)) border-box;
}
.skillDetailsList {
  font-size: 16px;
  list-style-type: none;
}
.skillDetailsList > li {
  display: inline-block;
  vertical-align: top;
}
.expandedSkill {
  border-radius: 8px;
  border: 2px solid transparent;
  box-sizing: border-box;
  overflow: hidden;
  padding: 5px;
}
.expandedSkillHeader {
  align-items: center;
  display: flex;
  height: 2.1em;
  margin-bottom: 5px;
}
.skillDetails {
  border-style: solid;
  border-width: 2px 0 0 0;
  color: rgb(121, 64, 22);
}
.skillDetailsSection {
  border-style: solid;
  border-width: 0 0 1px 0;
  margin-bottom: 8px;
  padding-bottom: 8px;
}
.skillDetailsSection:last-child {
  border: none;
  margin: 0;
  padding: 0;
}
.skillDetailsSection:first-child {
  border-width: 0;
  margin: 0;
  padding: 0;
}
.skill-white .skillDetails,
.skill-white .skillDetailsSection {
  border-image: linear-gradient(rgb(172, 172, 182), rgb(169, 169, 181)) 90;
}
.skill-gold .skillDetails,
.skill-gold .skillDetailsSection {
  border-image: linear-gradient(rgb(203, 172, 89), rgb(230, 161, 58)) 90;
}
.skill-pink .skillDetails,
.skill-pink .skillDetailsSection {
  border-image: linear-gradient(rgb(230, 173, 202), rgb(228, 43, 161)) 90;
}
.skill-unique .skillDetails,
.skill-unique .skillDetailsSection {
  border-image: linear-gradient(rgb(121, 64, 22), rgb(121, 64, 22)) 90;
}
.skillConditions {
  font-family: monospace;
  margin: 0 0 0.5em 0.5em;
}
.condition {
  margin-left: 0.7em;
}
.conditionOp {
  margin: 0 2px;
}
.conditionOp {
  opacity: 0.6;
}
.operatorAnd {
  float: left;
}
.operatorOrText {
  font-style: italic;
  margin-left: 10px;
  opacity: 0.8;
}
.skillEffects {
  display: table;
  margin-left: 0.5em;
}
.skillEffect {
  display: table-row;
}
.skillEffectType {
  display: table-cell;
}
.skillEffectValue {
  display: table-cell;
  padding-left: 1em;
}
.skillDuration {
  display: inline-block;
  margin-top: 0.5em;
}

/* ../components/RaceTrack.css */
.distanceMarker {
  font-weight: 600;
  paint-order: stroke;
  stroke: white;
  stroke-width: 2px;
}
.sectionText {
  dominant-baseline: central;
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: white;
  stroke-width: 2px;
  text-anchor: middle;
}
.racetrackName {
  color: rgb(121, 64, 22);
  font: 22px bold sans-serif;
  margin-bottom: 0.3em;
  text-align: center;
  text-stroke: 1px rgb(121, 64, 22);
  -webkit-text-stroke: 1px rgb(121, 64, 22);
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
}
.mouseoverText {
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: white;
  stroke-width: 2px;
}

/* app.css */
.racetrackWrapper {
  margin: auto;
}
#skillDetailsWrapper {
  margin-top: 1em;
}
.skillDetailsList {
  margin: auto;
  width: 85%;
}
.skillDetailsList .expandedSkill {
  margin: 10px;
  width: 19.3em;
}
.expandedSkillColorMarker {
  height: 5px;
  margin: 0 12px;
}
.expandedSkillItem.hasNotice {
  margin-right: 20px;
}
.hasNotice .expandedSkill {
  filter: brightness(0.8);
}
.skillNotice {
  background: red;
  float: right;
  height: 12px;
  left: 16px;
  position: relative;
  width: 22px;
}
.skillNotice::before {
  border-bottom: 6px solid red;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  content: " ";
  height: 0;
  position: absolute;
  top: -6px;
  width: 0;
}
.skillNotice::after {
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 6px solid red;
  bottom: -6px;
  content: " ";
  height: 0;
  position: absolute;
  width: 0;
}
.skillNotice > span {
  color: white;
  font: bold 16px sans-serif;
  position: absolute;
  text-align: center;
  top: -2px;
  width: 100%;
}
.skillNotice .tooltip {
  top: -15px;
}
#buttonsRow {
  margin: auto;
  position: relative;
  width: 960px;
}
.trackSelect > select {
  background: none;
  border: 1px solid rgb(148, 150, 189);
  border-radius: 0 8px 8px 0;
  padding: 0.7em;
}
.trackSelect > select:first-child {
  border-radius: 8px 0 0 8px;
  border-right: none;
}
#thresholds {
  font-size: 0.8em;
  left: 50%;
  line-height: 2.8em;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translate(-50%, 0);
}
#addSkill {
  background: none;
  border: 1px solid rgb(148, 150, 189);
  border-radius: 8px;
  padding: 0.7em;
  position: absolute;
  right: 0;
  top: 0;
}
#skillListWrapper {
  background: white;
  bottom: 0;
  display: none;
  left: 10%;
  margin: auto;
  overflow-y: auto;
  padding: 1em;
  position: fixed;
  top: 2em;
  width: 80%;
  z-index: 20;
}
#skillListWrapper.skillListWrapper-open {
  display: block;
}
#overlay {
  background: rgba(25, 25, 25, 0.6);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
#overlay.skillListWrapper-open {
  display: block;
}