.slider-bar {
    position: fixed;
    top: 0;
    
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    height: 100%;


    .header {
  
  
      .title {
        display: flex;
        flex-direction: row;
        align-items: top;
        justify-content: space-between;
  
  
      }
  
      .stepper {
  
        .items {
  
          .item {
  
            .num {
  
              &:after {
  
              }
            }
            .name {
  
            }
            &.active {
              .num {
  
                &:after {
  
                }
              }
              .name {
  
              }
            }
            &.finished {
              .num {
  
                &:after {
  
                }
              }
              .name {
  
              }
            }
          }
        }
      }
    }
  
    .body {

        flex-grow: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
  
    [footer] {
  
      .left {
        .reset {
  
          cursor: pointer;
        }
  
        .notice {
  
        }
      }
  
      .right {
  
        button {
  
        }
      }
    }
  }
  
  .slider-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
  
  
  @media screen and (max-width: 767px) {
    .slider-bar {
      .header, .body, .footer {
  
      }
  
      [footer] {
        .left {
  
        }
        .right {
          button {
  
          }
        }
      }
    }
  }