.header {
  background-color: rgba(82, 220, 235, 0.91);
}

.content {
  background-color: rgba(204, 204, 204, 0.91);
}

.bg-white {
  background-color: #ffffff;
}

.bg-gray {
  background-color: #eeeeee;
}

.bg {
  background-color: #6495ed;
}

.bg1 {
  color: #ffffff;
  background-color: #0088cc;
}

.bg2 {
  color: #ffffff;
  background-color: #008b8b;
}

.bg3 {
  color: #ffffff;
  background-color: #6495ed;
}

.bg4 {
  color: #ffffff;
  background-color: #ff69b4;
}

.bg5 {
  color: #ffffff;
  background-color: #b8860b;
}

.bg6 {
  color: #ffffff;
  background-color: #d9534f;
}

.bg7 {
  color: #ffffff;
  background-color: #ea4738;
}

.bg8 {
  color: #ffffff;
  background-color: #6495ed;
}

.demo-main {
  & .bg1 {
    background-color: #178cdf;
  }
}

.demo-editor {
  border: 1px solid rgb(204, 204, 204);
}

.demo-clolor {
  color: #1a1a1a;
}

.demo-border {
  border: solid 1px #1a1a1a;
}

.user-select(@none) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.background-color(@color, @alpha) {
  background-color: fade(@color, @alpha);
  @ieColor: argb(fade(@color, @alpha));
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
}

html,
button,
input,
select,
textarea,
* {
  font-family: "Microsoft YaHei", "Hiragino Sans GB W3";
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  background-repeat: repeat;
  .user-select(none);
  color: #666666;
  font: normal 12px "Microsoft YaHei", "Hiragino Sans GB W3";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  -kthml-user-focus: normal;
  -moz-user-focus: normal;
  -moz-outline: 0 none;
  outline: 0 none;
  background-color: #eff1f4;
}

#app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

div,
textarea {
  &::-webkit-scrollbar {
    -webkit-appearance: none;
    .background-color(#666666, 5%);
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0;
    .background-color(#666666, 30%);
    &:hover {
      .background-color(#666666, 70%);
    }
  }
}