@import "../../themes/index.less";
.abm-home-page {
  // margin-bottom: -8px;
  height: calc(100vh) ;
  background-size: 100% 100% ;

  .header {

     display: flex;
     justify-content: space-between;
     background: transparent;
     height: 48px;
     color: #fff;

     .left-logo {
       display: flex;
       justify-content: space-between;
       min-width: 270px;
       align-items: center;
       font-size: 12px;

       .logo-link {
         cursor: pointer;
       }
       .logo-link:hover {
         color: @primary-color;
       }

     }

     .right-user {
      margin-right: 16px;
       .userImg{
         width: 20px;
         border-radius: 20px;
         box-sizing: border-box;
         background-color: transparent;
       }

       .block-item {
         width: 24px;
         height: 100%;
         text-align: center;
         line-height: 42px;
         font-size: 16px;
         color: #fff;
         margin: 0 10px;
         cursor: pointer;
       }

       .block-item:hover {
         color: @primary-color;
       }

     }

     .center {
        width: 500px;
     }



  }

  .workspace {
    background: transparent;
    input {
      background-color: white;
      color: black;
    }
    .ant-carousel .slick-slide {
      text-align: center;
      height: calc(90vh);
      background: transparent;
      overflow: hidden;
    }
    .slick-dots li.slick-active button:before {
      opacity: 0;
    }
    .switch-handle-content {
      padding-left:0px !important;
    }
    .ant-carousel .slick-slider {
        .switch-handle {
           align-self: center;
           font-size: 18px;
           margin:0px 24px;
           .icon {
              border-radius: 18px;
           }
          .icon:hover {
            cursor: pointer;
            background-color: rgba(255,255,255,0.5);
          }
        }
    }

    .search-content {
        display: flex;
        height: 160px;
        justify-content: center;
        align-items: center;

      .header-search {
         max-width: 580px;

        .ant-select .ant-select-selection {
          background-color: rgba(255, 255, 255, 0.08);
          border: 1px solid #ffffff91;
        }

        .ant-select-selection-item {
          color: #fff
        }


      }
      .ant-select-selector {
        background: none;
      }

      .panel-container .panel-container-card {
        box-shadow: none;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        .more-btn {
          cursor:pointer;
          text-align: center;
          padding-left:14px;
          color:lightskyblue;
          text-align:left;
        }
        .suggest-list-cell {
          height: 30px;
          line-height: 30px;
          vertical-align: middle;
          padding-left: 20px;
          padding-right:10px;
          margin:0;
          cursor:pointer;
          overflow: hidden;
          &:hover {
            background-color:#D7E9FD;
            font-weight:bold;
          }
        }
      }

    }

    .mian-content {
      display: flex;
      height: 420px;
      justify-content: center;
      align-items: center;

      .react-grid-item.react-grid-placeholder {
        background:lightgrey;
      }
      .shaky {
        display: inline-block;
        padding: 1px;
        font-size: 12px;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-name: shaky-slow;
        -ms-animation-name: shaky-slow;
        animation-name: shaky-slow;
        -webkit-animation-duration: 6s;
        -ms-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -ms-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-delay: 0s;
        -ms-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-play-state: running;
        -ms-animation-play-state: running;
        animation-play-state: running;
      }
      @-webkit-keyframes shaky-slow {
        0% {
          -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
        2% {
          -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg);
        }
        4% {
          -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg);
        }
        6% {
          -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg);
        }
        8% {
          -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg);
        }
        10% {
          -webkit-transform: translate(1.4px, 0px) rotate(-2deg);
        }
        12% {
          -webkit-transform: translate(-1.3px, -1px) rotate(-2deg);
        }
        14% {
          -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg);
        }
        16% {
          -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg);
        }
        18% {
          -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg);
        }
        20% {
          -webkit-transform: translate(1px, 1px) rotate(-0.5deg);
        }
        22% {
          -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg);
        }
        24% {
          -webkit-transform: translate(-1.4px, -1px) rotate(2deg);
        }
        26% {
          -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg);
        }
        28% {
          -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg);
        }
        30% {
          -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
        }
        32% {
          -webkit-transform: translate(-1px, 0px) rotate(2deg);
        }
        34% {
          -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg);
        }
        36% {
          -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg);
        }
        38% {
          -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg);
        }
        40% {
          -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg);
        }
        42% {
          -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
        }
        44% {
          -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg);
        }
        46% {
          -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
        }
        48% {
          -webkit-transform: translate(1px, 1.6px) rotate(1.5deg);
        }
        50% {
          -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg);
        }
        52% {
          -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg);
        }
        54% {
          -webkit-transform: translate(1.6px, -1px) rotate(-2deg);
        }
        56% {
          -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg);
        }
        58% {
          -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg);
        }
        60% {
          -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg);
        }
        62% {
          -webkit-transform: translate(0px, 0px) rotate(-1.5deg);
        }
        64% {
          -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        66% {
          -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg);
        }
        68% {
          -webkit-transform: translate(0px, -1.6px) rotate(-2deg);
        }
        70% {
          -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg);
        }
        72% {
          -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        74% {
          -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg);
        }
        76% {
          -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg);
        }
        78% {
          -webkit-transform: translate(-1px, 1.4px) rotate(2deg);
        }
        80% {
          -webkit-transform: translate(1.4px, 1.6px) rotate(2deg);
        }
        82% {
          -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
        }
        84% {
          -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg);
        }
        86% {
          -webkit-transform: translate(1px, 1.4px) rotate(-2deg);
        }
        88% {
          -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
        }
        90% {
          -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        92% {
          -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        94% {
          -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        96% {
          -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg);
        }
        98% {
          transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
        }
        100% {
          transform: translate(0px, 0px) rotate(0deg);
        }
      }
      @keyframes shaky-slow {
        0% {
          transform: translate(0px, 0px) rotate(0deg);
        }
        2% {
          transform: translate(-1px, 1.5px) rotate(1.5deg);
        }
        4% {
          transform: translate(1.3px, 0px) rotate(-0.5deg);
        }
        6% {
          transform: translate(1.4px, 1.4px) rotate(-2deg);
        }
        8% {
          transform: translate(-1.3px, -1px) rotate(-1.5deg);
        }
        10% {
          transform: translate(1.4px, 0px) rotate(-2deg);
        }
        12% {
          transform: translate(-1.3px, -1px) rotate(-2deg);
        }
        14% {
          transform: translate(1.5px, 1.3px) rotate(1.5deg);
        }
        16% {
          transform: translate(1.5px, -1.5px) rotate(-1.5deg);
        }
        18% {
          transform: translate(1.3px, -1.3px) rotate(-2deg);
        }
        20% {
          transform: translate(1px, 1px) rotate(-0.5deg);
        }
        22% {
          transform: translate(1.3px, 1.5px) rotate(-2deg);
        }
        24% {
          transform: translate(-1.4px, -1px) rotate(2deg);
        }
        26% {
          transform: translate(1.3px, -1.3px) rotate(0.5deg);
        }
        28% {
          transform: translate(1.6px, -1.6px) rotate(-1.5deg);
        }
        30% {
          transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
        }
        32% {
          transform: translate(-1px, 0px) rotate(2deg);
        }
        34% {
          transform: translate(1.3px, 1.3px) rotate(-0.5deg);
        }
        36% {
          transform: translate(1.3px, 1.6px) rotate(1.5deg);
        }
        38% {
          transform: translate(1.3px, -1.6px) rotate(1.5deg);
        }
        40% {
          transform: translate(-1.4px, -1px) rotate(-0.5deg);
        }
        42% {
          transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
        }
        44% {
          transform: translate(-1.6px, 1.4px) rotate(0.5deg);
        }
        46% {
          transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
        }
        48% {
          transform: translate(1px, 1.6px) rotate(1.5deg);
        }
        50% {
          transform: translate(1.6px, 1.6px) rotate(1.5deg);
        }
        52% {
          transform: translate(-1.4px, 1.6px) rotate(0.5deg);
        }
        54% {
          transform: translate(1.6px, -1px) rotate(-2deg);
        }
        56% {
          transform: translate(1.3px, -1.6px) rotate(-2deg);
        }
        58% {
          transform: translate(-1.3px, -1.6px) rotate(0.5deg);
        }
        60% {
          transform: translate(1.3px, 1.6px) rotate(-0.5deg);
        }
        62% {
          transform: translate(0px, 0px) rotate(-1.5deg);
        }
        64% {
          transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        66% {
          transform: translate(1.6px, -1.6px) rotate(0.5deg);
        }
        68% {
          transform: translate(0px, -1.6px) rotate(-2deg);
        }
        70% {
          transform: translate(-1.6px, 1px) rotate(1.5deg);
        }
        72% {
          transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        74% {
          transform: translate(1.3px, -1.6px) rotate(-0.5deg);
        }
        76% {
          transform: translate(1.4px, 1px) rotate(-0.5deg);
        }
        78% {
          transform: translate(-1px, 1.4px) rotate(2deg);
        }
        80% {
          transform: translate(1.4px, 1.6px) rotate(2deg);
        }
        82% {
          transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
        }
        84% {
          transform: translate(-1.4px, 1.4px) rotate(-2deg);
        }
        86% {
          transform: translate(1px, 1.4px) rotate(-2deg);
        }
        88% {
          transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
        }
        90% {
          transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        92% {
          transform: translate(-1.4px, 1.6px) rotate(2deg);
        }
        94% {
          transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        96% {
          transform: translate(-1.4px, 1.3px) rotate(-2deg);
        }
        98% {
          transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
        }
        100% {
          transform: translate(0px, 0px) rotate(0deg);
        }
      }
      .item-block {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         color: #fff;
         .icon-wrapper {
           z-index: 2;
           cursor: pointer;
           .icon {
             width: 48px;
             height: 48px;
           }
           :hover{
             cursor: pointer;
           }
         }
         .item-mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
         }
        //  .removeHandle {
        //    position: absolute;
        //    right: -5px;
        //    color: #a5a2a2!important;
        //    top: -9px;
        //    font-size: 18px;
        //    cursor: pointer;
        //    display: none;
        //  }

      }
      .item-block:hover {
        .item-mask{
          background-color: #fff;
          cursor: move;
          opacity: 0.3;
        }
      }

    }

  }

  .workspace-setting {
      position: absolute;
      right: 36px;
      bottom: 36px;
      width: 110px;
      height: 32px;
      border-radius: 32px;
      .edit-icon {
         display: flex;
         width: 110px;
         height: 32px;
         border-radius: 32px;
         justify-content: space-around;
         align-items: center;
         color: white;
         .icon {
            background-color: rgba(255, 255, 255, 0);
            font-size: 18px ;
            :hover {
              cursor: pointer;
            }
         }
      }
      :hover {
        background-color:rgba(255,255,255,0.2);
      }
  }

}

.abm-home-page-modal {
  .app-items {
    display: flex;
    position: relative;
    margin: 10px 10px 10px 0;
    padding: 10px;
    width: 25%;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 3px;
    .app-name {
      color: #333;
      font-size: 15px;
      font-weight: bold;
    }

    .right-text {
      flex: 2
    }

    .check-img{
      position: absolute;
      right: 10px;
      font-size: 20px;
    }

    .description {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      width: 100px;
    }

    .icon-img {
      width: 20px;
      height: 30px;
      flex: 1
    }
  }
  .appSet {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;

    .item{
      display: flex;
      width: 25%;
      flex-direction: column;
      padding: 12px 8px;
      .middle-icon {
        width: 48px;
        height: 48px;
        cursor: pointer;
      }
    }
  }

  .desktop-item-block {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position:relative;
    margin: 24px 12px;
    .icon-wrapper {
        width: 146px;
        height: 106px;
      z-index: 2;
      overflow: hidden;
      .icon {
        width: 146px;
        height: 106px;
        overflow: hidden;
      }
      .icon-mask{
        width: 146px;
        height: 106px;
        display: inline-block;
        opacity:0.7;
        background-color: black;
       }
      &:hover{
        cursor: pointer;
        .icon-mask {
          width: 146px;
          height: 106px;
          display: inline-block;
          opacity:0.7;
          background-color: black;
          transform: translateY(-100%);
        }
      }
    }
    .removeHandle {
      position: absolute;
      right: 5px;
      margin-top: -90px;
      color: #CC3333;
      cursor: pointer;
      z-index:200;
    }
  }

}