.mobile{
  width: 100%;
  height: 100%;
  position: relative;
  background: #444;
  border-radius: 5px;
  &:before{
    content: ' ';
    position: absolute;
    left: 50%;
    top:17px;
    width: 40px;
    height: 6px;
    background: #666;
    border-radius: 3px;
    margin-left: -20px;


  }

  &:after{
    content: ' ';
    position: absolute;
    left: 50%;
    bottom:10px;
    width: 30px;
    height: 30px;
    background: #666;
    border-radius: 15px;
    margin-left: -15px;

  }

  .screen{
    position: absolute;
    top:40px;
    left: 5px;
    right: 5px;
    bottom: 50px;
    background: #fff;
    overflow-y:auto;
    overflow-x: hidden;
  }


  .screen::-webkit-scrollbar {
    width: 0px;
  }
  .screen::-webkit-scrollbar-thumb {
    background-color: #FF6633;
    border-left: 0px solid transparent;
  }
  .screen::-webkit-scrollbar-track {
    background-color: #fff;
    border-left: 0px solid transparent;
  }
}

.mobile-top{


  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  .screen{
    position: absolute;
    top:40px;
    left: 5px;
    right: 5px;
    bottom: 0;
    background: #fff;
    overflow-y:auto;
    overflow-x: hidden;
  }

  &:after{
     content: ' ';
     height:1px;
     line-height: 1px;
     background: none;
     border-bottom: 1px #eee solid;
     position: absolute;
     left: 50%;
     bottom:0;
     width: 380px;
     margin-left: -190px;
     //box-shadow: -2px 0 2px #000;
  }
}


.mobile-bottom{
  &:before{
     content: ' ';
     height:1px;
     line-height: 1px;
     background: none;
     border-bottom: 1px #eee solid;
     position: absolute;
     left: 50%;
     top:0;
     z-index: 999;
     width: 380px;
     margin-left: -190px;
     //box-shadow: -2px 0 2px #000;
  }
  border-top-left-radius: 0;
  border-top-right-radius: 0;

  .screen{
    position: absolute;
    top:0px;
    left: 5px;
    right: 5px;
    bottom: 50px;
    background: #fff;
    overflow-y:auto;
    overflow-x: hidden;
  }
}