.siguan-view {
  width: 100%;
  height: 100%;
  position: relative;
  
  .side-panel {
     position: absolute;
     top: 20px;
     bottom: 20px;
     width: 25%;
     min-width: 300px;
     display: flex;
     flex-direction: column;
     z-index: 10;
     transition: all 0.3s;
     pointer-events: none;
 
     &.left {
       left: 20px;
     }
 
     &.right {
       right: 20px;
     }
 
     > * {
       pointer-events: auto;
     }
   }

   .panel-card {
       flex: 1;
       margin-bottom: 10px;
       &:last-child {
           margin-bottom: 0;
       }
   }

   .left {
    .card-1 { flex: 6; }
    .card-2 { flex: 3; }
    .card-3 { flex: 4; }
    .card-4 { flex: 6; }
  }

  .right {
    .card-1 { flex: 1; }
    .card-2 { flex: 1; }
    .card-3 { flex: 1; }
  }

  .placeholder-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
  }
}