// app-store------    .app-store (共同設定)
// application------  .appstoreApplication
// storage------      .appStorage
// package----        .appPackage
// upgrade-----       .appUpgrade
// configuration----- .appstoreConfiguration

// app-store (整體)-----------------------------------------------
.app-store{
  // 內頁管理版面
  .app-content{
    padding: 35px 30px;
    border-radius: 10px;
    border: 1px solid $border-color;
    background-color: $dashbordcontent-bg;
    @include media-breakpoint-down(sm){
      padding: 20px 15px;
    }
  }
  //步驟
  .wizard-body-actions{
    margin: 0 !important;
  }
  .horizontal .wizard-body{
    padding: 0px 25px 25px !important;
  }
  //icon
  .fa-sync{
    color: #339421;
  }
  .btn-upgrade{
    background-color: #339421;
    color: #ffffff;
    transition: all 0.3s;
    right: 5rem;
    &:hover{
      background-color: #247516;
    }
  }
  .btn-uninstall{
    background-color: #d33f3f;
    color: #ffffff;
    transition: all 0.3s;
    &:hover{
      background-color: #bb2828;
    }
  }
  //疑問
  .fa-question-circle{
    font-size: 12px;
    color: #8e8e8e;
  }
  // 項目名稱
  h3{
    font-size: 23px;
    font-weight: bold;
    // margin-bottom: 0;
    @include PC-small{
      font-size: 21px;
    }
    @include media-breakpoint-down(sm){
      font-size: 17px;
    }
  }
  .sub-info{
    padding-left: 2px;
  }  
  //Tag--完成進度
  .progress-num{
    color: #19af32;
  }
  .progress-bar{
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
    position: relative;
    span{
      background: #13a75c;
      height: 3px;
      position: relative;
      overflow: hidden;
      &::before{
        content: "";
        position: absolute;
        width: 10px;
        height: 3px;
        background-color: #33c57c;
        left: 0;
        animation: progressmove 1.5s infinite linear;
      }
    }
  }
  .vuestic-tag{
    margin-bottom: 10px;
    &.disable-tag{
      opacity: 0.4;
      pointer-events: none;
    }
  }
  //無圖片的列表
  .no-image-box{
    width: 60px;
    height: 60px;
    border-radius: 10px;
    position: relative;
    background:#e8e8e8;
    &.big-image{
      width: 120px;
      height: 120px;
      @include media-breakpoint-down(sm){
        width: 100px;
        height: 100px;
      }
    }
  }
  .no-pic-text{
    font-size: 37px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-transform:uppercase;
    &+i{
      opacity: 0.9;
      font-size: 12px;
      height: 23px;
      width: 23px;
      text-align: center;
      line-height: 23px;
      border-radius: 99%;
      color: #ffffff;
      background: #329bbb;
      position: absolute;
      bottom: 3px;
      right: -7px;
    }
  }
  //上傳圖片的版面
  .app-upload-image-box{
    width: 100%;
    @include media-breakpoint-down(xs){
      flex-wrap: wrap;
    }

  }
  // 上傳圖片
  .img-input {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    width: 26px;
    height: 26px;
    left: 0px;
    top: 0px;
    padding: 0px;
    z-index: 9;
  }
  // 上傳圖片(app & company)
  .upload-image{
    width: 120px;
    height: 120px;
    position: relative;
    @include PC-small{
      width: 100px;
      height: 100px;
    }
    @include media-breakpoint-down(xs){
      margin: 0 auto !important;
    }
    img{
      width: 100%;
      // border: 1px solid #aaaaaa;
      overflow: hidden;
      border-radius: 12%;
    }
    .upload-image-button{
      position: absolute;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.5);
      width: 26px;
      height: 26px;
      color: #ffffff;
      border-radius: 99%;
      text-align: center;
      line-height: 26px;
      cursor: pointer;
    }

  }
  .app-name-input{
    width: 70%;
    padding-top: 10px;
    @include media-breakpoint-down(xs){
      width: 100%;
    }
  }

  // 列表中無圖片狀態
  .default-img {
    width: 100%;
    height: 100%;
    border: 1px solid #aaaaaa;
    overflow: hidden;
    border-radius: 12%;
  }
  //選擇分類
  .multiselect__option{
    width: 100%;
    max-width: 100%;
  }
  .multiselect, .multiselect__tags{
    @include media-breakpoint-down(xs){
      height: auto;
    }
  }
  // 更小的按鈕
  .btn-xxs{
    display: inline-block;
    width: auto;
    height: 24px;
    line-height: 14px;
    font-size: 13px;
  }
  // 版面
  .title-category.hidden + .box-content{
    padding-top: 0px;
  }
  .title-category.hidden + .box-no-bottom .toggle-Filter-icon, .title-category.hidden + .box-content .toggle-Filter-icon{
    margin-top: 22px !important;
  }

  // 已上傳圖片img的外框
  .show-uploaded-image{
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid #aaaaaa;
    img{
      width: auto;
      min-width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    &.w60{
      width: 60px;
      height: 60px;
    }
    &.w100{
      width: 100px;
      height: 100px;
    }
  }

  .form-group textarea{
    border: 1px solid $border-color;
    border-radius: 3px;
  }

}


// appstoreApplication--------------------------------------------
.appstoreApplication{
  // 搜尋
  .box-serch{
    .input-serch{
      height: 32px;
      width: 420px;
      border-radius: 4px 0 0 4px;
      @include media-breakpoint-down(sm){
        width: 70%;
      }
    }
    button{
      margin-top: -4px;
      background-color: $main-theme;
      border-radius: 0 !important;
      @include media-breakpoint-down(sm){
        margin-top: 1px;
        padding: 0 !important;
      }
      
    }
    use{
      color: #ffffff;
    }
  }
  
  // app 項目
  .app-list{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    @include media-breakpoint-down(sm){
      justify-content: space-between;
    }
    li{
      width: 11%;
      padding: 15px;
      margin-right: 1rem;
      margin-bottom: 1rem;
      position: relative;
      background: $dashbordcontent-bg;
      border-radius: 6px;
      border: 1px solid $border-color;
      cursor: pointer;
      @include PC-small {
        width: 18%;
      }
      @include media-breakpoint-down(sm){
        width: 48%;
        margin-right: 0rem;
      }
      &:hover{
        border: 1px solid $main-theme;
        box-shadow: 0px 0px 7px rgba(0,0,0,0.34);
        .app-description_short{
          opacity: 1;
        }
      }
      &:last-child{
        margin-right: 0rem;
      }
      &.more-list{
        background: rgba(255,255,255,0.07);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #848484;
        border: 1px solid #ffffff;
        font-weight: initial;
        @include media-breakpoint-down(sm){
          width: 100%;
          color: #424242;
          border: 1px solid #a9a9a9;
        }
      }
    }
  }
  .app-description_short{
    font-size: 15px;
    font-weight: initial;
    word-break: break-all;
    padding: 0 10px;
    display: flex;
    align-items: center;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 3;
    color: $text-color;
    border-radius: 4px;
    opacity: 0;
    background: $dashbordcontent-bg;
    transition: all 0.3s;
  }
  .app-image-box{
    width: 100%;
    padding-bottom:97%; 
    height:0;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid #aaaaaa;
  }
  .show-uploaded-image{
    border: 0px;
  }
  .no-app-pic{
    border-radius: 10px;
    text-align: center;
  }
  .app-pic{
    width: 100%;
  }
  .app-name{
    font-size: 20px;

    @include media-breakpoint-down(xs){
      font-size: 15px;
    }
  }
  .app-company{
    font-size: 12px;
  }
}

// 分類標題
.app-category{
  font-size: 25px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}


.container-pic{
  width: 40px !important;
  height: 40px !important;
  padding: 2px;
  position: absolute;
  right: 1px;
  bottom: 1px;
  border-radius: 99% !important;
  border: 1px solid #099cec;
  background: #ffffff;
  margin-right: 0 !important;
  box-shadow: 0px 0px 4px rgba(0,49,93,0.9);
}


//popup - detail app infomation
.appDetailInfomation{
  // 上面
  .app-description{
    img{
      width: 100px;
      height: 100px;
      margin-right: 15px;
      margin-bottom: 20px;
      border-radius: 12px;
    }
    .no-image-box{
      width: 100px;
      height: 100px;
      margin-right: 15px;
      margin-bottom: 20px;
      border-radius: 12px;
    }
    //docker
    .container-pic{
      right: 0px;
      bottom: 0;
      left: 77px;
      top: 77px;
      width: 30px !important;
      height: 30px !important;
    }
    .app-category{
      margin-bottom: 0;
    }
    .company-name{
      font-size: 12px;
      font-weight: inherit;
      margin-bottom: 17px;
    }
    .device-is-installing{
      margin-right: 30px;
      span{
        &:first-child{
          border-left: 3px solid $main-theme;
          color: $main-theme;
          font-size: 17px;
          padding-left: 4px;
          padding-right: 8px;
        }
      }
    }
    .btn-install{
      color: #ffffff;
      background-color: $main-theme;
      border: 1px solid $main-theme;
      &:hover{
        color: $main-theme;
        background-color: transparent;
      }
    }
    .detail-top{
      height: 60px;
    }
  }
  
  // 中間
  .being-installed{
    border-bottom: 1px solid #dadada !important;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    
  }
  .Installing-list{
    margin-bottom: 20px;
    .account{
      color: $main-theme;
      margin-bottom: 8px;
      font-size: 17px;
    }
  }


  




}
// popup - select device
.select-device-tree{
  .tree-root{
    .tree-checkbox{
      display: none;
    }
    .tree-text{
      pointer-events: none;
    }
    .tree-children{
      .tree-checkbox{
        display: inline-block;
      }
      .tree-text{
        pointer-events:inherit;
      }
    }
  }
}
// popup - select device
.selectDevice{
  .tree-children{
    .tree-text{
      width: 100%;
    }
  }
  .sustomization-tree{
    padding: 0 0;
  }
  
  .select-box{
    height: 280px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    @include PC-small{
      height: 170px;
    }
  }
  .select-account{
    width: 48%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .device-tag-list{
    width: 48%;
    height: 100%;
    padding-top: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    .vuestic-tag{
      margin-bottom: 25px;
    }
  }
  .show-result{
    height: 268px;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid #dedede;
    @include PC-small{
      height: 250px;
    }
    h3{
      margin-top: 30px;
      margin-bottom: 25px;
    }
    .account-group{
      color: $main-theme;
      margin-bottom: 10px;
    }
    .result-item{
      margin-bottom: 30px;
    }
  }
}
// device tag
.device-tag{
  display: inline-block;
  @include media-breakpoint-down(md){
    display: block;
    padding-top: 6px;
  }
  li{
    display: inline-block;
    border: 1px solid;
    margin-right: 6px;
    padding: 0 10px;
    border-radius: 20px;
    margin-bottom: 6px;
    border: 1px solid #2299d2;
    color:  #2299d2;
  }
}
// popup 
.select-storage-dropdown{
  display: flex;
  margin-right: 10px;
  padding-top: 3px;
  .vuestic-simple-select{
    margin-top: -6px;
  }
  @include media-breakpoint-down(md){
    flex-wrap: wrap;
  }
}
// popup -  company detail
.companyDetail{
  .company-top-image{
    width: 150px;
    height: 150px;
    border: 1px solid #eeeeee;
    border-radius: 99%;
    margin-bottom: 15px;
  }
  .item-text-link{
    margin-bottom: 20px;
  }
  .company-description{
    margin-bottom: 30px;
  }
}

.proviede-app-list{
  margin-bottom: 15px;
  h3{
    margin-bottom: 15px;
  }
  .container-pic{
    width: 30px !important;
    height: 30px !important;
    right: 20px;
    bottom: 63px;
  }
}
.proviede-app-item{
  padding: 15px;
  margin-right: 1rem;
  margin-bottom: 1rem;
  position: relative;
  background: $dashbordcontent-bg;
  border-radius: 6px;
  border: 1px solid $border-color;
  cursor: pointer;
  position: relative;
  &:hover{
    .app-description_short{
      opacity: 1;
    }
  }
  .app-name{
    font-size: 15px;
  }
}



// storage--------------------------------------------------------
.appStorage{

}
.storage-tag{
  display: inline-block;
  @include media-breakpoint-down(md){
    display: block;
    padding-top: 6px;
  }
  li{
    display: inline-block;
    border: 1px solid #2299d2;
    margin-right: 6px;
    border-radius: 20px;
    margin-bottom: 6px;
    font-size: 14px;
    height: auto;
    padding: 4px 10px;
    color: #2299d2;
    @include media-breakpoint-down(sm){
      font-size: 12px;
      padding: 2px 10px;
    }
  }
}
.app-storage-item{
  padding-bottom: 0;
  @include media-breakpoint-down(sm){
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
  h3{
    margin-bottom: 0;
  }
}
.installing-txt{
  margin-bottom: 10px;
  font-weight: bold;
  color: #0d80bf;
  span{
    font-size: 20px;
  }
}
.device-amount-txt{
  color:$main-theme;
  margin-bottom: 10px;
  font-weight: bold;
  span{
    font-size: 20px;
  }
}







// package--------------------------------------------------------
.appPackage{
  //關鍵字
  .keyword-box{
    @include media-breakpoint-down(xs){
      flex-wrap: wrap;
    }
    // &>div{
    //   width: 50%;
    //   @include media-breakpoint-down(xs){
    //     width: 100%;
    //   }
    // }
    .form-group{
      padding-right: 15px;
      @include media-breakpoint-down(xs){
        padding-right: 0px;
      }
    }
  }
  .keyword-tag{
    max-height: 80px;
    overflow-x: hidden;
    overflow-y: auto;
    @include media-breakpoint-down(xs){
      height: auto;
    }
  }
  .no-pic-text{
    &+i{
      background:#246d4e;
    }
  }

  .get-image{
    width: 60px;
    height: 60px;
    border-radius: 10px;
  } 
}
// popup - add new app - 安裝環境
.ul-installation{
  justify-content: space-between;
  flex-wrap: wrap;
  @include media-breakpoint-down(xs){
    flex-wrap: wrap-reverse;
  }
  li{
    width: 47%;
    margin-bottom: 10px;
    @include media-breakpoint-down(xs){
      width: 100%;
    }
    .label-text{
      white-space: normal;
    }
  }
  .form-radio{
    display: inline-block;
  }
  .os-tag{
    margin-left: 20px;
    color: #737373;
    font-size: 13px;
  }
  .more-link{
    display: inline-block;
    margin-top: 0;
    margin-left: 16px;
    font-size: 13px;
    cursor: pointer;
  }
}
// popup - add new app - 是否要解安裝功能+選擇檔案
.select-package-box{
  justify-content: space-between;
  @include media-breakpoint-down(sm){
    flex-wrap: wrap;
  }
  .item-list{
    &:first-child{
      width: 64%;
      @include media-breakpoint-down(sm){
        width: 100%;
      }
    }
    &:last-child{
      width: 30%;
      @include media-breakpoint-down(sm){
        width: 100%;
      }
    }
  }
}
// popup - add new app - 進階設定(重新togglec和選擇script檔案)
.advanced-box{
  .item-list{
    &:nth-child(1){
      width: 25%;
    }
    &:nth-child(2){
      width: 25%;
    }
    &:nth-child(3){
      width: 50%;
    }
  }
}

// popup - hisVersion and addNewVersion - 簡單的app資訊
.easy-app-info{
  margin-bottom: 15px;
  .upload-image{
    width: 80px;
    height: auto;
    margin-right: 30px;
  }
  .item-list{
    width: 30%;
  }
  .no-image-box{
    width: 80px;
    height: 80px;
  }
  @include media-breakpoint-down(sm){
    flex-wrap: wrap;
    margin-bottom: 0px;
    .upload-image{
      width: 100px;
      margin-right: 0px;
      margin-bottom: 15px;
    }
    .item-list{
      width: 100%;
    }
    .no-image-box{
      width: 100px;
      height: 100px;
    }
  }
}
// popup - hisVersion - 版號框
.version-list{
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 20px;
  margin-bottom: 15px;
  @include media-breakpoint-down(sm){
    max-height: 100%;
  }
}
//popup - hisVersion - 版號列表
.version-item{
  span{
    display: inline-block;
  }
  .version{
    font-size: 22px;
    margin-right: 30px;
    color: $main-theme;
  }
  .package-txt{
    font-size: 13px;
    margin-bottom: 10px;
  }
}
//popup - devicelist for OS
.device-forOS-header{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  div{
    background-color: $main-theme;
    color: #ffffff;
    text-align: center;
  }
  .deviceName{
    width: 40%;
  }
  .deviceID{
    width: 58%;
  }
}
.device-forOS-item{
  display: flex;
  justify-content: space-between;
  div{
    padding: 0 10px;
  }
  .deviceName{
    width: 40%;
    border-right: 1px solid $border-color;
  }
  .deviceID{
    width: 58%;
  }
}

// popup - 打包package 選擇底下的安裝檔案 + 解安裝檔案
.select-executable-file{
  width: 100%;
  display: flex;
  justify-content: space-between;
  @include media-breakpoint-down(sm){
    flex-wrap: wrap;
  }
}



// upgrade--------------------------------------------------------
.appUpgrade{
  .device-item{
    .content-text{
      padding-left: 34px;
    }
  }
  .group-item{
    .content-text{
      padding-left: 0;
    }
  }
  .need-upgrade{
    background-color: #bb2828;
    width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    border-radius: 99%;
    color: #ffffff;
    margin-left: 3px;
    font-weight: initial;
  }
}
// popup - detail
.device-app-status{
  margin-bottom: 30px;
  h3{
    margin-bottom: 15px;
  }
  .has-top-button{
    button{
      @include media-breakpoint-down(md){
        position: relative;
        right: 0;
        margin-right: 10px;
      }
    }
  }
}
.group-app-status{
  .installing-item{
    cursor: pointer;
    &:hover, &.focus{
      background-color: #ebf2fd;
      border: 1px solid #7eb2d4;
    }
  }
}
// popup - detail - (group and device)正在安裝
.installing-item{
  display: flex;
  align-items: center;
  border: 1px solid #d4d3d3;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 35px;
  position: relative;
  img{
    width: 90px;
    height: 90px;
    margin-right: 15px;
  }
  .stop-icon{
    position: absolute;
    right: 21px;
    top: 8px;
    color: #404040;
    font-size: 12px;
    cursor: pointer;
    &:hover{
      color: $main-theme;
    }
    &.enabled {
      cursor: not-allowed;
      opacity: 0.3;
    }
  }
  h4{
    font-weight: bold;
    font-size: 20px;
  }
  .company-name{
    font-size: 13px;
    color: #636363;
    margin-bottom: 10px;
  }
  .progress-num{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }
}
//popup - detail -device已經安裝好的軟體(用在更新或解安裝)
.installed-item{
  margin-bottom: 1rem;
  border-bottom: 1px solid #b7b7b7;
  position: relative;
  .content-top{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  img{
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  .app-name{
    font-size: 15px;
    margin-bottom: 3px;
  }
  .app-update{
    font-size: 12px;
    color: #848484;
  }
}
//popup - 升級排程
.upgrade-item{
  padding-bottom: 0rem;
  img{
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
}
//popup - detail 群組
.small-item{
  .installing-item{
    padding: 9px;
    img{
      width: 65px;
      height: 65px;
      margin-right: 10px;
    }
    h4{
      font-size: 19px;
    }
  }
}
//popup - schedule add 
.noLimitH{
  .modal-body.modal-body-Limit-height{
    max-height: none !important;
    overflow-y: inherit !important;
    overflow-x: inherit !important;
  }
}





// configuration--------------------------------------------------
.appstoreConfiguration{
  .no-image-box{
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
  }
  .no-pic-text{
    &+i{
      bottom: 0px;
      right: 0px;
      background:#333b9e;
    }
  }
}
.self-configuration{
  display: flex;
  align-items: center;
  justify-content: space-between;
  @include media-breakpoint-down(md){
    flex-wrap: wrap;
  }
  .upload-image{
    width: 175px;
    height: 175px;
    @include media-breakpoint-down(md){
      margin-bottom: 47px;
    }
    .upload-image-button{
      right: -20px;
      bottom: 15px;
    }
  }
  .company-item-list{
    width: 50%;
    padding-right: 30px ;
    @include media-breakpoint-down(md){
      width: 100%;
      padding-right: 0px ;
    }
    &+.item-list{
      width: 50%;
      @include media-breakpoint-down(md){
        width: 100%;
      }
    }
  }
}
.other-configuration{
  display: flex;
  flex-wrap: wrap;
  li{
    width: 15%;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    padding: 15px;
    margin: 0 6px;
    margin-bottom: 25px;
    @include PC-small {
      width: 18%;
    }
    @include media-breakpoint-down(md){
      width: 48%;
      margin: 0 0px;
    }
  }

  img{
    width: 100%;
    margin-bottom: 10px;
  }
  .company-name{
    margin-bottom: 6px;
  }
}





// other--------------------------------------------------

//tooltip
.app-tooltip{
  .tooltip-inner{
    border-radius: 4px !important;
  }
  .vuestic-accordion{
    &>div{
      text-align: center;
      padding: 5px 15px;
      &:hover{
        background-color: #e2e2e2;
      }
    }
    &>div:not(:last-child){
      border-bottom: 1px solid #d6d6d6;
    }
  }
}
//modal
.vuestic-modal.app-popup{
  .modal-content{
    border-radius: 5px;
  }
  .modal-header{
    background-color: transparent;
    height: auto;
    font-weight: 600;
  }
  .modal-body{
    border-radius: 5px;
  }

  .modal-title{
    div{
      font-size: 23px;
      letter-spacing: 0.5px;
      padding-top: 15px;
    }
  }
}




// 未分類------------------------------------------------------


// 列表框架-------------------------------------------------
.app-list-item{
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #b7b7b7;
  position: relative;

  &-2rem{
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }

  &-1rem{
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  img{
    width: 80px;
    height: 80px;
    margin-right: 20px;
    @include media-breakpoint-down(sm){
      width: 40px;
      height: 40px;
    }
  }

  .icon-dot{
    margin-right: 20px;
  }

  .sub-info{
    @include media-breakpoint-down(sm){
      font-size: 13px;
    }
    span{
      margin-right: 30px;
      @include media-breakpoint-down(sm){
        font-size: 13px;
        display: block;
      }
    }
  }
  
  .content-top{
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    @include media-breakpoint-down(sm){
      // flex-direction: column;
      margin-bottom: 5px;
    }
  }
  
  .content-text{
    font-size: 14px;
    padding-left: 10px;
    @include media-breakpoint-down(md){
      padding-left: 0px;
    }
  }
}
//右上角按鈕 (more 點點點)
.has-top-button{
  .v-popover{
    position: absolute;
    right: 0;
    top: 0px;
    @include media-breakpoint-down(xs){
      top: -7px;
    }
  }
  button{
    position: absolute;
    right: 0;
    top: 0;
  }
}
.last-no-border{
  .app-list-item{
    &:last-child{
      border-bottom: 0px;
      padding-bottom: 0rem;
      margin-bottom: 0rem;
    }
  }
}


// popup - 設備 或群組 或app 的詳細資訊最上面
.detail-top{
  max-height: 120px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 30px;
  transition: all 0.3s;
  &.overflow-auto{
    max-height: fit-content !important;
    padding-bottom: 60px;
  }
  .item-list{
    width: 33.3333%;
    @include media-breakpoint-down(lg){
      width: 100%;
    }
  }
}
.hidden-cover{
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  z-index: 9;
  background: linear-gradient(to top, $dashbordcontent-bg 20%, rgba(255,255,255,0));
  border-bottom: 1px solid $border-color;
  &.no-cover{
    background:none;
    height: 20px;
  }
  span{
    color:$main-theme;
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    opacity: 0.8;
    &:hover{
      opacity: 1;
    }
  }
}

// popup - 正在忙碌的設備tag
.active-tag{
  .vuestic-tag {
    cursor: pointer;
    &.hight-light-tag{
      background-color: #ffebf5;
      border: solid 1px $main-theme !important;
      color: $main-theme;
    }
    &:hover{
      background-color: $main-theme;
      border: solid 1px $main-theme !important;
      color: #ffffff;
      .progress-num{
        color: #d5ffdc;
      }
      .ion-md-close{
        color: #ffffff;
      }
    }
  }
}

// popup - device / group detail
.half-item{
  &>div{
    width: 49%;
    @include media-breakpoint-down(md){
      width: 100%
    }
  }
}
.three-item{
  &>div{
    width: 32%;
    @include media-breakpoint-down(md){
      width: 100%
    }
  }
}

// app 圖片未上傳
.no-app-pic-text{
  position: relative;
  width: 100%;
  height: 100%;
  span{
    font-size: 5rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
}


// 連結
.item-text-link{
  color: #0d80bf;
  border-bottom: 1px solid;
  display: inline-block;
  cursor: pointer;
}

@keyframes progressmove{
  0% { left: 0; }
  100% { left: 100%; }
}