#scboard {
  padding: 0px 45px 45px 45px;

  .maininfo-num {
    position: relative;
    margin-top: -5px;
    margin-left: 14px;
    font-size: 18px;
    font-weight: bolder;

    .subinfo-num {
      font-size: 10px;
    }
  }

  .top-info {
    margin-top: 23px;
    color: white;

    .timer {
      width: 50%;
      float: left;
    }

    .total-hours {
      width: 50%;
      text-align: right;
      float: right;

      .full-screen-btn {
        margin-left: 28px;
        cursor: pointer;

        &:hover {
          color: #1cc0f3;
        }

        .full-screen-icon {
          font-size: 16px;
          position: relative;
          top: 1px;
          margin-right: 4px;
        }
      }
    }
  }

  .cards-wrapper {
    clear: both;
    padding-top: 20px;
  }

  //下排卡牌高度
  .version-card,
  .student-source-card {
    height: 450px;
  }

  //上排卡牌高度
  .heatMap-card,
  .rank-card,
  .course-card {
    height: 320px;
  }
  .rank-card-btm {
    height: 450px;
  }
  //教室清單卡牌，內部組件樣式，暫時獨立寫在ClassRoomsCard/Styles
  .classrooms-card {
    height: 790px;

    .top-infoBtn {
      margin-top: 0px;
      color: white;

      .title {
        width: 50%;
        float: left;
      }
      .map-btn {
        cursor: pointer;
      }
      .map-open {
        color: #1cc0f3;
      }

      .title-btn {
        margin-left: 2px;
        cursor: pointer;

        &:hover {
          color: #1cc0f3;
        }

        .btn-icon {
          font-size: 1rem;
          position: relative;
          top: 0.0625rem;
          margin-right: 0.25rem;
        }
      }
    }
  }

  //累積開課數排名卡牌
  .rank-card {
    .rank-card-title {
      text-decoration: none;
      color: #fff;
      border: #979797 1px solid;
      width: 207px;
      border-radius: 3px;
      padding: 4px 17px;
    }
    .rank-card-item-wrapper-btm{
      height: 395px !important;
    }
    .fs-rank-card-item-wrapper{
      height: 348px !important;
    }
    .rank-card-item-wrapper {
      margin-top: 15px;

      height: 260px;
      overflow: auto;

      .rank-card-item {
        display: flex;
        align-items: center;
        flex-direction: row;
        list-style: none;
        padding: 6px 25px 10px 5px;
        border-bottom: #979797 1px solid;

        &:nth-child(10n) {
          border: none;
        }

        .rank-card-index {
          flex: 0.3;
          font-weight: bolder;
        }

        .rank-card-avatar {
          flex: 0.6;

          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: relative;
            top: 3px;
          }
        }

        .rank-card-name {
          font-weight: bolder;
          flex:0.8;
        }

        .rank-card-num {
          flex: 0.8;
          font-size: 16px;
          font-weight: bolder;
          text-align: right;
        }

        .last-ch {
          font-size: 10px;
          font-weight: 400;
        }
      }
    }
  }
  //版本卡牌選單
  .version-card-selector {
    .version-card-title {
      text-decoration: none;
      color: #fff;
      border: #979797 1px solid;
      border-radius: 3px;
      padding: 4px 17px;
    }
  }
  //作業系統版本卡牌
  .version-card {
    .hiVer-info {
      text-align: center;
      margin-top: -110px;
      .hiVer-rooms-num {
        font-size: 24px;
        font-weight: bolder;
      }
      .hiVer-infodata {
        text-align: left !important;
        margin-top: 10px;
        margin-left: 10%;
        .hiVer-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          display: inline-block;
          margin-right: 5px;
        }
        .hiVer-val {
          font-weight: bolder;
          font-size: 16px;
        }
        .hiVer-name {
          display: inline-block;
        }
        .hiVer-percent {
          font-size: 8px;
          margin-bottom: 10px;
        }
      }
    }
    .os-info {
      text-align: center;
      .os-name {
        font-size: 18px;
      }
      .os-percent {
        font-size: 21px;
        font-weight: bolder;
        margin-top: 10px;
      }
      .os-rooms {
        margin-top: 10px;
        .os-rooms-num {
          font-size: 20px;
          font-weight: bolder;
        }
      }
    }
  }
  //開課熱度卡牌
  .heatMap-card {
    .month-classNum {
      text-align: center;
      .classNum-text {
        font-weight: bolder;
        font-size: 20px;
      }
    }
    .heatMap-card-title {
      text-decoration: none;
      color: #fff;
      border: #979797 1px solid;
      border-radius: 3px;
      padding: 4px 5px;
      margin-right: 10px;
    }
  }
  //上升下降百分比標記
  .num-percent {
    display: inline-block;
    margin-left: 3px;
  }
  .num-down {
    border: 1px solid #fa6400;
    color: #fa6400;
    font-size: 8px;
    padding: 2px 2px;
    border-radius: 4px;
    .down-icon {
      font-size: 12px;
    }
  }
  .num-up {
    border: 1px solid #00f492;
    color: #00f492;
    font-size: 8px;
    padding: 2px 2px;
    border-radius: 4px;
    .down-icon {
      font-size: 12px;
    }
  }
  .student-source-card {
    .student-infodata {
      text-align: left !important;
      margin-top: 10px;
      margin-left: 10%;
      .student-infodataItem {
        margin-bottom: 15px;
      }
      .student-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
      }
      .student-val {
        font-weight: bolder;
        font-size: 16px;
      }
      .student-name {
        display: inline-block;
      }
      .student-percent {
        font-size: 8px;
        margin-bottom: 15px;
      }
    }
  }
  //課堂參與人次觀察之環形圖
  #student-source-ringpie {
    width: 90%;
    height: 192px;
    margin-bottom: 10px;
  }

  //今日開課數量變化圖
  #classnum-lineAreaChart {
    width: 90%;
    height: 197px;
    margin-top: -40px;
  }

  //開課熱度
  #month-course-heatMap {
    position: relative;
    margin-left:12%;
    width: 90%;
    height: 240px;
  }
  //Hiteach版本餅圖
  #hiteach-version-pie {
    width: 90%;
    height: 298px;
    margin-top: 20px;
  }
  //作業系統版本餅圖
  #os-version-pie {
    width: 90%;
    height: 210px;
  }
}
//全屏幕時的樣式微調
.fs-HeatMap {
  height: 400px !important;
  transition: 1s;
}
.fs-HeatMapCanvas {
  margin-left: 18% !important;
  height: 298px !important;
}

.fs-course-card {
  height: 400px !important;
  transition: 1s;
}
.fs-course-chart {
  margin-bottom: 10% !important;
}
.fs-classrooms-card {
  height: 885px !important;
  transition: 1s;
}
.fs-scboard {
  padding-top: 50px !important;
  background-color: rgb(34, 34, 34);
  transition: 2s;
}
.fs-rank-card-top {
  height: 400px !important;
  transition: 1s;
}
.fs-rank-card-bottom {
  height: 465px !important;
  transition: 1s;
}
.fs-version-card {
  height: 465px !important;
  transition: 1s;
}
.fs-student-source-card {
  height: 465px !important;
  transition: 1s;
}
.fs-classroomDetail {
  margin-top: -25px !important;
  position: fixed;
  margin-right:0;
  
  animation: slideIn 0.2s;
  @keyframes slideIn {
    0% {
      //position: relative;
      opacity: 0.5;
      //right: -100%;
    }
    50% {
      opacity: 0.8;
    }
    100% {
      opacity: 1;
      //position: relative;
      //right: 0px;
    }
  }
}
.fs-OSVersionPie,
.fs-HiteachVersionPie {
  margin-top: -20px !important;
  margin-left: 4%;
}
.fs-hiVer-info {
  margin-top: -120px !important;
  margin-left: -10px !important;
}
.fs-os-info {
  margin-top: -30px !important;
}
