@import "app/styles/bootstrap/variables"
@import "app/styles/mixins"
@import "app/styles/style-flat-variables"

#teacher-student-view

  .course-row
    padding-left: 75px
    padding-top: 15px
    padding-bottom: 30px

  .progress-dot
    margin: 5px

  .progress-dot
    display: inline-block
    margin-right: 6px
    min-width: 34px
    height: 34px
    border-radius: 16px
    padding: 0 5px
    // margin-top: 23px
    // margin-bottom: 23px
    background: $gray-light
    position: relative
    a
      text-decoration: none

    .dot-label
      padding-top: 2px
      .dot-label-inner
        font-size: 11px
        font-weight: bold
        color: white

  .progress-dot-lg .dot-label .dot-label-inner
    font-size: 13px

  .progress-dot.forest
    background: $forest
    .tooltip-inner
      color: $forest
      border-color: $forest
    .tooltip-arrow
      border-top-color: $forest

  .progress-dot.gold
    background: $gold
    .tooltip-inner
      color: $navy
      border-color: $navy
    .tooltip-arrow
      border-top-color: $navy

  .progress-dot.navy
    background: $navy
    .tooltip-inner
      color: $navy
      border-color: $navy
    .tooltip-arrow
      border-top-color: $navy



  svg[id|="visualisation"]
    // background-color: $navy
    display: none

    text.label
        font-size: 10px
        fill: #000000
        font-weight: bold

    .domain
      // fill: $navy

  .graphs :first-child
    display: block

  .graphsSelector
    text-align: center
    margin-bottom: 15px