sqm-dashboards/app/assets/stylesheets/school_categories.scss

.school_category, .question {
  border: 1px solid black;

  .title {
    height: 3.5em;
  }

  .description {
    height: 6em;
  }
}

.indicator-container {
  &.centered {
    margin-top: -3px;

    .indicator-circle {
      margin: auto;
    }
  }

  .indicator {
    padding-top: 6px;
    height: 90px;

    .indicator-circle {
      height: 100%;
      position: relative;

      .indicator-zones {
        width: 100%;
        height: 100%;

        div {
          height: 100%;
          width: 20%;
          float: left;
        }

        .zone0 {
          background-color: orange;
        }
        .zone1 {
          background-color: yellow;
        }
        .zone2 {
          background-color: lightgreen;
        }
        .zone3 {
          background-color: green;
        }
        .zone4 {
          background: repeating-linear-gradient(45deg, lightgray, green 15px);
        }
      }

      .average {
        position: absolute;
        width: 10%;
        height: 107%;
        top: -3px;
        border: 2px dashed black;
        font-weight: bold;
        font-size: 14px;

        span {
          text-align: center;
          position: absolute;
          width: 7.75em;
          margin-top: -1.5em;
        }
      }
    }

    &.small {
      height: 87px;

      .indicator-circle {
        width: 90px;
        overflow: hidden;

        .indicator-zones {
          width: 900px;
        }

        .average {
          border: none;
          text-align: center;
          width: 100%;
          line-height: 90px;
        }
      }
    }
  }

  &.short {
    .indicator {
      height: 30px;

      .indicator-circle {
        width: 100%;
        height: 100%;

        .average {
          height: 120%;

          span {
            left: -1.5em;
            font-size: 10px;
            border: none;
            line-height: 10px;
          }
        }
      }
    }
  }
}