/* @import url("https://fonts.googleapis.com/css?family=Roboto"); */

:host {
  display: block;
  width: 928px;
  height: 785px;
  position: relative;
  transform-origin: top left;
  font-size: 16px;
  color: white;
  font-family: Roboto, Arial;
  /* background is set from chart.tsx due to "publicPath" */
}
_:-ms-lang(x), :host { cursor: auto; }
_:-ms-lang(x), :host(:active) { cursor: auto; }

:host([rank="1"]) .chart.rank-2 { display: none; }
:host([rank="2"]) .chart.rank-1 { display: none; }

.chart-left {
  position: absolute;
  width: 202px;
  height: 100%;
}

.chart {
  position: absolute;
  left: 202px;
  width: 726px;
  height: 100%;
}
.class-icon {
  width: 100%;
  height: 100%;
  /* background is set from chart.tsx due to "publicPath" */
  background-repeat: no-repeat;
  background-position: center center;
}
.chart > .class-icon > div {
  width: 100%;
  height: 100%;
  /* background is set from chart.tsx due to "publicPath" */
  background-position: 100px 98px;
  background-repeat: no-repeat;
}

.chart-ranks {
  position: absolute;
  top: 4px;
  left: 4px;
}
.chart-ranks a {
  position: relative;
  display: block;
  width: 124px;
  height: 133px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-ranks span {
  position: absolute;
  top: 95px;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 14px;
}

.level-intervals {
  position: absolute;
  top: 15px;
  left: 143px;
  color: #686868;
  font-size: 14px;
}
.level-intervals > div { margin-bottom: 107px; }

ms-footer {
  margin-top: -30px;
  transition: .3s margin-top ease-in-out;
}

:host(:hover) ms-footer {
  margin-top: 0;
}

::slotted(ms-skill) {
  position: absolute;
}

::slotted(ms-skill[row="1"]) { top: 14px; }
::slotted(ms-skill[row="2"]) { top: 142px; }
::slotted(ms-skill[row="3"]) { top: 270px; }
::slotted(ms-skill[row="4"]) { top: 398px; }
::slotted(ms-skill[row="5"]) { top: 526px; }
::slotted(ms-skill[row="6"]) { top: 654px; }

::slotted(ms-skill[column="1"]) { left: 67px; }
::slotted(ms-skill[column="2"]) { left: 247px; }
::slotted(ms-skill[column="3"]) { left: 427px; }
::slotted(ms-skill[column="4"]) { left: 607px; }