$sipsd-card-header-height:36px;

.sipsd-card-host {
  width: 100%;
  height: 100%;

  /deep/ {
    * {
      box-sizing: border-box;
    }
  }
}

.sipsd-card {
  height: 100%;
  width: 100%;
  background-color: #fff;
  padding-left: 20px;
  padding-right: 8px;
  padding-bottom: 5px;
  margin: auto;
  font-family: '微软雅黑';
  color: #333;
  animation: sipsd-card-animation .55s;
}

@keyframes sipsd-card-animation {
  from {
    width: 0;
    height: 0;
    margin-left: -99px;
  }

  to {
    width: 100%;
    height: 100%;
    margin-left: 0;
  }
}

.sipsd-card-header {
  width: 100%;
  height: $sipsd-card-header-height;
  line-height: $sipsd-card-header-height;
  text-align: left;
  margin-bottom: -2px;
  border-bottom: 1px solid #ddd;
}

.sipsd-card-title {
  float: left;
  font-size: 16px;
}

.sipsd-card-icon {
  float: right;

  div {
    width: 16px;
    height: 16px;
    margin: 10px 0px 10px 12px;
    float: left;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAQCAYAAACBSfjBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjREN0Q4RkRDQTVCMTFFNjhBRUVFN0E1MTRDMTU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjREN0Q4RkVDQTVCMTFFNjhBRUVFN0E1MTRDMTU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGNEQ3RDhGQkNBNUIxMUU2OEFFRUU3QTUxNEMxNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNEQ3RDhGQ0NBNUIxMUU2OEFFRUU3QTUxNEMxNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkzkdSYAAANySURBVHja1Jh/aE1hGMfv7nbX0FDsDxGKEKkVyn9GEkp2m02RNcVtiF3JjUnm5/wotvy+5Fcpds3dFJOwoURh+0OxP5TyI/Mjs0XDrvk+9T16O73nnHuP7F5PfTrnvu/z3vPe7/u87/Ocm9bT0+NJpoXD4aQ+PxAI/NV4ryf1bQ1YDjIc/AY69Pf5F5PTTSoPREEL8IP2JAk3AEwG00E+CIJ14LqF/2fl/jBYDdTtVQYqlc9ppp0goTgKbAFdFs/IAlvBC0Ru2CoC87iacm1088s3763ygi5Q6mL4UHAOvAc3KZ7YeNAAjjuM/wi2mcQTu+AQDGNBiM/2afp97AvR13ILVzH6xHLB6UQV2B4K/sLlBjgKEcsSGDoRNIMl4BWoBk1K/1VQ7iDeYAqfo7SPZDBIYLy2GFsBroBCcBGkK33pbCukT4WdgO3cNoaIJW5EhC0A12RBIOKGOPz70z+H22Qct+0D0A3kO+aBT1aBzwV4xutCpc9PEe+DCWCHZnwnKAB19K9V+mrZVkefTqckYoj40q2IiMIfXDFZ+UqIuNNhyHowTKKWK9zN9jdgBtij2ZaqiSjvOO9V4JDSd4CJaA7ooNg6k2cWgQiYz1wQ5X2Efd3xZuF2UxIpYUQkIuI3PvSrbD2ImG7jLmLHGH2qiRD3EnhsGziiaT9J8ZzsJ+cc5fmbz/si9vVeGQPB+uJSA/qBXRA0ZuM+mudem+c/Mq9DXRVV6qszTDDxipfJsJcttRHibXIY0kGhnUzquUc8j1QbriSMtZpxK8GQOL7fx0U3zjzjTKzRZWevjXiNnIwh3tIEF+cSmCvbHuLtjsP/MRPIFAe/2WAS+G5qv8WxkrX3g2XqCwdrw9sUsdLiu9VsW0/h/LzXZWetgIZ4uW7FkzoQl1lgBcSrjvetjteDINOmuDYW44TmCHgIRjDbRpS+y6wqJLM/ZUY3W7aSbaPMtoYVsM3Iztl2byJBRbwWF5Fn1IFZLiK2nhnvDrdcs9I/DRwDY8BZ1npmS2PSk3Lni6k+nAmes060qgONbLuYCc2wGMui84zECr4VaSOwiZNo4vnVWyYlyiL+gKngCcsoiaq3nI9E0CluSbuzW1fnlduIJ9YK9oFiXbZlWzF9Wv+sWIr+GyP1WinPtEHgA4WU4+BuKv0bk+FJTWsgKW+/BRgAMoTqm6oCxmMAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    cursor: pointer;
  }
}

.sipsd-card-refresh {
  background-position-x: -16px*2;
}

.sipsd-card-full-screen-icon-max {
  background-position-x: -16px*3;
}

.sipsd-card-full-screen-icon-min {
  background-position-x: -16px*4;
}

.sipsd-card-closed {
  background-position-x: -16px*4;
}

.sipsd-card-body {
  width: 100%;
  padding-top: 1px;
}

.sipsd-card-full-screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;

  .sipsd-card {
    position: relative;
    z-index: 1;
    animation: sipsd-card-full-screen-sipsd-card-animation .55s;
  }
}

@keyframes sipsd-card-full-screen-sipsd-card-animation {
  from {
    width: 0;
    height: 0;
  }

  to {
    width: 100%;
    height: 100%;
  }
}

.sipsd-card-background {
  position: fixed;
  top: 0;
  background-color: black;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}

.clearFloat {
  overflow: hidden;
}