//清單組件內受到IviewCard，引入時如需寫成scoped，記得組件樣式要拉到外面，否則吃不到樣式
.classroom-list {
  margin: -16px;
  margin-top: 16px;
  clear: both;
  .classroom-filterArea {
    background-color: rgb(43, 43, 46);

    .filter-col {
      cursor: pointer;
      position: relative;
      border-right: 1px solid #ffffff2c;
      padding: 20px 0px;
      text-align: center;
      &:hover {
        background-color: rgb(57, 57, 58);
      }
      &:last-child {
        border-right: none;
      }
      .check-triangle {
        width: 0;
        height: 0;
        right: 0;
        top: 0;
        position: absolute;
        border-style: solid;
        border-width: 0 20px 20px 0;
        border-color: transparent #1cc0f3 transparent transparent;
      }
      .uncheck-triangle {
        border-color: transparent gray transparent transparent;
      }
      .smartroom-text {
        color: rgb(28, 192, 243) !important;
        font-weight: bolder;
      }
      .scorateroom-text {
        color: rgb(0, 245, 144) !important;
        font-weight: bolder;
      }
      .normalroom-text{
        color: white !important;
        font-weight: bolder;
      }
      .sort-icon {
        right: 10px;
        top: 10px;
        position: absolute;
        color: #1cc0f3;
      }
      .sortText-using{
        color: #1ed3ff;
        font-weight: bolder;
      }
      .sortText-noUsing{
        color: #ffab5d;
        font-weight: bolder;
      }
      .sortText-fixing{
        color:#f862bb;
        font-weight: bolder;
      }
      .sortText-unOpening{
        color:rgb(175, 175, 175);
        font-weight: bolder;
      }
    }
  }

  .infobtn-wrapper {
    background-color: rgb(43, 43, 46);

    color: black;
    display: flex;
    justify-content: center;
    align-items: center;

    .infobtn {
      cursor: pointer;
      flex: 1;
      height: 98px;
      padding-top: 10px;
      text-align: center;
      color: white;
      border: 1px solid rgb(69, 69, 69);
      border-bottom: none;
      &:hover {
        background-color: rgb(57, 57, 58);
      }

      .percent-icon {
        font-size: 10px;
      }
    }
    .infobtn-active {
      background-color: rgb(57, 57, 58) !important;
    }
    
  }
  .open-filter {
    height: 476px !important;
  }
  .hide-statusfilter{
    height: 632px !important;
  }
  .list-wrapper {
    height: 528px;

    overflow: auto;
    background-color: #39393a;
    .list-item-hover {
      cursor: pointer;
      &::hover {
        background: linear-gradient(
          -0.75turn,
          rgb(57, 57, 57),
          rgba(35, 35, 35, 0.98)
        );
      }
    }
    .list-item {
      padding: 17px 20px;
      padding-left: 0px;
      margin-left: 20px;
      border-bottom: 1px solid rgba(151, 151, 151, 0.1);
      background-color: #39393a;

      .classroomName-row {
        display: flex;
        .classroomName-col {
          flex: 2;
        }
        .status-col {
          flex: 1;
          text-align: right;
        }
      }
      .badge {
        padding: 1px 10px;
        margin-right: 11px;
        border-radius: 4px;
        background-color: rgb(99, 99, 99);
        font-size: 14px;
        
      }
      .classroomName {
        font-size: 18px;
        position: relative;
        top: 1px;
        margin-right: 5px;
      }

      .classroom-status {
        margin-top: 8px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .license {
          flex: 1.2;
          font-size: 12px;
        }
        .toolbox {
          flex: 1;
          text-align: right;
        }
        .current-status {
          flex: 1;
          font-size: 12px;
          font-weight: bolder;
          .fix-status {
            color: rgb(247, 181, 0);

            .fix-icon {
              margin-right: 3px;
              top: 1px;
              position: relative;
            }
          }

          .teachNow-status {
            color: rgb(28, 192, 243);
            .teachNow-icon {
              position: relative;
              top: 2px;
              margin-right: 5px;
              margin-left: 1px;
            }
            .teachNow-name {
              color: white;
              font-weight: normal;
            }
          }
        }
      }
     

      .hotdegree {
        color: #fa6400;
        border: 1px solid #fa6400;
        display: inline-block;
        margin-right: 4px;
        line-height: 18px;
        border-radius: 4px;
        text-align: center;
        height: 20px;
        width: 20px;
      }
      .status-noUsing {
        
        padding:0px 3px;
        border-radius: 4px;
        display: inline-block;
        height: 20px;
        line-height: 18px;
        color:#ffab5d;
        border: 1px solid#ffab5d;
      }
      .status-using {
        padding:0px 3px;
        border-radius: 4px;
        height: 20px;
        display: inline-block;
        color: #1ed3ff;
        
        line-height: 18px;
        border: 1px solid#1ed3ff;
      }
      .status-fixing {
       
        border-radius: 4px;
        padding:0px 3px;
        height: 20px;
        display: inline-block;
        color: #f862bb;
        line-height: 18px;
        border: 1px solid #f862bb;
      }
      .status-unOpening {
        
        border-radius: 4px;
        padding:0px 3px;
        display: inline-block;
        height: 20px;
        color:  rgb(175, 175, 175);
        line-height: 18px;
        border: 1px solid rgb(175, 175, 175);
      }
      .fire-icon {
        margin-right: 3px;
        position: relative;
        top: -1px;
      }
      .toolbox {
        color: rgb(109, 114, 120);
        * {
          margin: 0px 1px;
          &:first-child {
            margin-right: 2px;
          }
        }

        .icon-light {
          color: rgb(0, 245, 144);
        }
      }
    }
    .list-item-selected {
      background: linear-gradient(
        -0.75turn,
        rgb(57, 57, 57),
        rgba(35, 35, 35, 0.98)
      );
    }
  }
  .no-data-text {
    text-align: center;
    margin-top: 60px;
  }
}

//全螢幕狀態
.fs-list-wrapper {
  height: 623px !important;
}
.fs-list-wrapper.open-filter {
  height: 570px !important;
}
