body {
  background-color: #e6e6e6;
  overflow-x: auto;
}

[v-cloak] {
  display: none;
}

#app {
  padding: 15px;
  box-sizing: border-box;
}

.border-0 {
  border-width: 0 !important;
}

.t-all {
  background-color: #c5c5c5;
}

.t-misspell {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #8593e7;
}

.t-sense-word {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #fde45e;
}

.t-punctuation {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #59cf9a;
}

.t-grammar-order {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #65cede;
}

.t-political {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #f12827;
}

.t-leadership {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #b086cb;
}

.t-knowledge-check {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #bdcf5a;
}

.t-inner-duplicate {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #f09900;
}

.t-conciseness {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #4a888a;
}

.t-formality {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #e6b7bc;
}

.t-unit {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #6b95b9;
}

.t-ignore {
  display: inline;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #c5c5c5;
}

.right-hidden-box {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.right-hidden-box .show-icon {
  display: inline-block;
  width: 26px;
  height: 61px;
  background: url(../../img/btn_fold.png) 0px 0px no-repeat;
  cursor: pointer;
}
.right-hidden-box .d-pos {
  background-position: -29px 0px;
}

.report-content {
  padding: 20px 30px;
  box-sizing: border-box;
  margin: 0 auto;
  background-color: #fff;
  line-height: 24px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.11), 0px 1px 15px 0px rgba(0, 0, 0, 0.24);
  min-height: 100vh;
  transform-origin: center top;
}
.report-content .report-html {
  margin: 0 auto;
  transform-origin: center top;
  word-break: break-all;
}
.report-content .subsection {
  overflow: hidden;
  margin: 10px 0;
}
.report-content .subsection > span {
  font-size: 14px;
  background: #f2f2f2;
  display: inline;
  padding: 0 10px;
  border-radius: 5px;
  border: 2px solid #eaeaea;
  box-shadow: 0px 10px 100px 0px rgba(45, 49, 52, 0), 0px 10px 70px 0px rgba(45, 49, 52, 0.13), inset 0px 10px 0px 0px rgba(255, 255, 255, 0.38);
}

.tools {
  position: fixed;
  right: 32px;
  bottom: 50px;
  z-index: 999;
  display: flex;
  align-items: center;
  box-shadow: 0px 3px 10px 0px rgba(45, 49, 52, 0.09), 0px 5px 13px 0px rgba(45, 49, 52, 0.13), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.38);
  border: 1px solid #d4d4d4;
  border-right: none;
  border-radius: 4px;
}
.tools .left-tool-box {
  display: flex;
  align-items: center;
}
.tools .tool-item {
  width: 38px;
  height: 30px;
  background: #f2f2f2;
  cursor: pointer;
  border-right: 1px solid #d4d4d4;
}
.tools .tool-item > span {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url(../../img/text-icon.png);
}
.tools .tool-item .tool-0 {
  background-position: -102px -104px;
}
.tools .tool-item .tool-1 {
  background-position: -49px -54px;
}
.tools .tool-item .tool-2 {
  background-position: -133px -53px;
}
.tools .tool-item .tool-3 {
  background-position: -37px -103px;
}
.tools .tool-item .tool-5 {
  background-position: -69px -103px;
}
.tools .tool-item:hover {
  background: -webkit-linear-gradient(90deg, #d8d8d8 0%, #efefef 100%);
}
.tools .tool-4-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  position: relative;
}
.tools .tool-4-box .tool-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3px;
}
.tools .tool-4-box .chose-percent {
  position: absolute;
  top: -280px;
  left: -162px;
  width: 50px;
  border: 1px solid #d4d4d4;
  box-shadow: 0px 14px 10px 0px rgba(45, 49, 52, 0.09), 0px 8px 13px 0px rgba(45, 49, 52, 0.13), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.38);
  margin-left: 155px;
  background: #f2f2f2;
}
.tools .tool-4-box .chose-percent div {
  padding: 10px 0;
  color: #3f3f3f;
  font-size: 13px;
  text-align: center;
}
.tools .tool-4-box .chose-percent div:hover {
  background-color: #e9e9e9;
}