/* iconfont.css */
@font-face {
  font-family: "iconfont";
  src: url(https://at.alicdn.com/t/font_1767841_c53vd4a4n0v.eot);
  src:
    url(https://at.alicdn.com/t/font_1767841_c53vd4a4n0v.eot?#iefix) format("embedded-opentype"),
    url(https://at.alicdn.com/t/font_1767841_c53vd4a4n0v.woff2) format("woff2"),
    url(https://at.alicdn.com/t/font_1767841_c53vd4a4n0v.woff) format("woff"),
    url(https://at.alicdn.com/t/font_1767841_c53vd4a4n0v.ttf) format("truetype"),
    url(https://at.alicdn.com/t/font_1767841_c53vd4a4n0v.svg#iconfont) format("svg");
}
i.icon {
  font-family: "iconfont";
  font-style: normal;
}
i.icon-note:before {
  content: "\e622";
}
i.icon-line:before {
  content: "\e628";
}
i.icon-rect:before {
  content: "\e640";
}
i.icon-text:before {
  content: "\e624";
}
i.icon-eraser:before {
  content: "\e619";
}
i.icon-select:before {
  content: "\e625";
}
i.icon-cross:before {
  content: "\e618";
}
i.icon-circle:before {
  content: "\e662";
}
i.icon-arrow:before {
  content: "\e7c9";
}
i.icon-save:before {
  content: "\e621";
}
i.icon-delete:before {
  content: "\e61b";
}
i.icon-hand:before {
  content: "\e663";
}
i.icon-tick:before {
  content: "\e61a";
}
i.icon-heart:before {
  content: "\e623";
}
i.icon-question:before {
  content: "\e627";
}
i.icon-undo:before {
  content: "\e626";
}
i.icon-redo:before {
  content: "\e620";
}
i.icon-image:before {
  content: "\e6fb";
}
i.icon-arrow-left:before {
  content: "\e606";
}

/* index.css */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.toolbar-wrapper {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  pointer-events: none;
  text-align: center;
}
.toolbar {
  margin: auto;
  list-style-type: none;
  padding: 0;
  display: inline-flex;
  background: rgba(29, 35, 42, 0.9);
  color: #fff;
  border: 1px solid #000;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.tool-item {
  pointer-events: auto;
  white-space: nowrap;
  border: 0;
  padding: 5px 0;
  max-width: 60px;
  flex-grow: 1;
  min-width: 55px;
  cursor: default;
  user-select: none;
  position: relative;
}
.tool-item:hover {
  background-color: rgba(255, 255, 255, .1);
}
.tool-item.active {
  color: #01BDE8;
}
.tool-item .tool-icon {
  display: block;
  font-size: 24px;
  line-height: 1;
}
.tool-item .tool-name {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.tool-item .color-indicator {
  height: 14px;
  width: 14px;
  margin: 4px auto 5px;
  border: 1px solid #fff;
  border-radius: 3px;
}
.popup .tool-item {
  min-width: 40px;
}
canvas {
  display: block;
  margin: auto;
  background-color: #ffffff;
}
.whiteboard-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  display: flex;
  align-items: center;
}
.mouse-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.cursor-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.cursor-container .cursor {
  border-radius: 100%;
  position: fixed;
  border: 1px solid gray;
}
.btn-pages {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: #575864;
  line-height: 0;
  padding: 17px;
  border-radius: 100px;
  cursor: pointer;
}
.btn-pages:hover,
.btn-pages:active {
  background: #53616f;
}
.btn-pages.show-popup .page-list {
  display: block;
}
.btn-add-page {
  position: absolute;
  bottom: 20px;
  left: 100px;
  background: #575864;
  line-height: 0;
  padding: 17px;
  border-radius: 100px;
  cursor: pointer;
}
.btn-add-page:hover,
.btn-add-page:active {
  background: #53616f;
}
.page-list {
  position: absolute;
  bottom: 80px;
  left: 0;
  border-radius: 5px;
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.1);
  background: #fff;
  max-height: 80vh;
  overflow: auto;
  display: none;
}
.page-item {
  width: 220px;
  height: 120px;
  display: flex;
  background: #ebedef;
  border: 1px solid #d9d9d9;
  margin: 20px;
  position: relative;
}
.pages-count {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #000;
  color: #fff;
  width: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
}
.page-item {
  width: 220px;
  height: 120px;
  display: flex;
  background: #ebedef;
  border: 1px solid #d9d9d9;
  margin: 20px;
  position: relative;
  align-items: center;
  justify-content: center;
}
.page-item canvas {
  max-width: 100%;
  max-height: 100%;
}
.page-item svg {
  background: #fff;
  margin: auto;
}
.page-item.active {
  border-color: #31B0DF;
  border-width: 2px;
}
.page-item.focus {
  border-color: #31B0DF;
}
.page-item .page-index {
  position: absolute;
  left: 0;
  top: 0;
  color: #504f5e;
  line-height: 20px;
  border-radius: 0 0 100px 0;
  background: rgba(219, 217, 217, 0.50);
  width: 20px;
  text-align: center;
  padding: 0 5px 5px 0;
}
.page-item.active .page-index {
  background: #31B0DF;
  color: #fff;
}
.page-item.active .btn-delete {
  display: none;
}
.btn-delete {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
.popup {
  background-color: rgba(29, 35, 42, 0.9);
  border-radius: 4px;
  position: absolute;
  top: 65px;
  left: -55px;
  display: none;
}
.popup.show {
  display: block;
}
.row {
  display: flex;
}
.row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.size-wrapper {
  display: flex;
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.size-item .size-inner {
  height: 25px;
  background-color: #fff;
  margin: 15px auto;
  transform: rotate(135deg);
}
.size-item.active .size-inner {
  background-color: #01BDE8;
}
.size-wrapper .size-item {
  width: 60px;
}
.color-wrapper {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-around;
}
.color-item {
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.color-item.active {
  border-color: #01BDE8;
}
.color-inner {
  height: 20px;
  width: 20px;
  border-radius: 4px;
}
.text-box {
  border: 1px dashed gray;
  cursor: text;
}
.text-content {
  padding: 5px 8px;
  outline: none;
  line-height: 1;
}
.hidden {
  display: none;
}
.log-pane {
  position: fixed;
  top: 100px;
  left: 100px;
  z-index: 1;
  color: red;
}
.eraser-cursor {
  position: absolute;
  width: 3em;
  margin-top: -2.5em;
  margin-left: -1.5em;
  pointer-events: none;
}
@media screen and (max-width: 480px) {
  .tool-item {
    min-width: 42px;
  }
}