.classroom-detail {
  padding: 25px 45px;

  color: white;
  /*background:linear-gradient(
    0.75turn,
    rgb(57, 57, 57),
    rgba(35, 35, 35, 0.98)
  );;*/
  z-index: 10;
  margin-right: -15%;
  margin-top: -25px;
  margin-left: -45px;
  animation: slideIn 0.4s;
  @keyframes slideIn {
    0% {
      position: relative;
      opacity: 0;
      right: -100%;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
      position: relative;
      right: 0px;
    }
  }
  .classroom-title {
    float: left;
    width: 50%;
  }
  .close-btn {
    cursor: pointer;
    width: 50%;
    text-align: right;
    float: right;
    .close-icon {
      font-size: 24px;
    }
  }
  .basicInfo-wrapper {
    margin: 10px 0px;
    .using-text {
      color: rgb(28, 192, 243);
      font-weight: bolder;
    }
    .fixed-text{
      color:#f862bb;
    }
    .hot-text {
      color: rgb(250, 141, 56);
      font-weight: bolder;
    }
  }
  .update-text {
    color: rgb(0, 245, 144);
  }
  .map-area {
    padding: 20px;
    position: relative;
    img {
      width: auto;
      height: 475px;
    }

    .icon-light {
      color: white !important;
      margin-top: -20px;
      margin-left: -8px;
      font-size: 40px !important;
      /* Start the shake animation and make the animation last for 0.5 seconds */
      animation: shake 0.5s;

      /* When the animation is finished, start again */
      animation-iteration-count: infinite;
      position: absolute;
    }
    .icon-unlight {
      font-size: 20px;
      position: absolute;
    }
  }
  .toolbox-wrapper {
    margin: 10px 0px;
  }
  .toolbox {
    color: rgb(109, 114, 120);

    * {
      &:first-child {
        margin-right: 2px;
      }
    }
    .toolitem {
      font-size: 16px !important;
      margin-right: 30px;
      .tool-icon {
        font-size: 20px;
        position: relative;
        top: 1px;
        margin-right: 5px;
      }
    }
    .icon-light {
      color: rgb(0, 245, 144);
    }
  }
}
@keyframes shake {
  0% {
    transform: translate(1px, 1px);
  }
  25% {
    transform: translate(1px, -3px);
  }

  50% {
    transform: translate(1px, 3px);
  }

  100% {
    transform: translate(1px, 1px);
  }
}
