.paper-page {
  color: #000;
  .page-box {
    &-A3 {
      &.page-box-0 {
        .page-main-inner {
          padding: 60px 40px 80px 160px;

          &.page-main-noside {
            padding: 60px 60px 80px;
          }
        }
      }
      &.page-box-1 {
        .page-main-inner {
          padding: 60px 160px 80px 40px;
          &.page-main-noside {
            padding: 60px 60px 80px;
          }
        }
        .page-column-side {
          right: 10px;
          left: auto;
        }
      }
    }

    &-8K {
      .page-column-side {
        top: 40px;
        bottom: 40px;
        width: 110px;
        left: 10px;
      }

      &.page-box-0 {
        .page-main-inner {
          padding: 40px 20px 40px 130px;
          &.page-main-noside {
            padding: 40px;
          }
        }
      }
      &.page-box-1 {
        .page-main-inner {
          padding: 40px 130px 40px 20px;
          &.page-main-noside {
            padding: 40px;
          }
        }
        .page-column-side {
          right: 10px;
          top: 40px;
          left: auto;
        }
      }
    }

    &-A4 {
      .page-main-inner {
        padding: 60px 45px 80px;
      }
    }

    .page-column-body {
      word-wrap: normal;
      white-space: normal;
    }
  }

  .page-column-side {
    position: absolute;
    top: 60px;
    bottom: 60px;
    width: 130px;
    left: 10px;
    z-index: 10;

    .column-side-body {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9;
    }

    .element-item {
      position: absolute;
    }
  }

  .page-column-element .element-item::before {
    border: none;
  }
}

// elem-field-text
.elem-field-text {
  .text-body {
    width: 100%;
    position: relative;
    min-height: 28px;
    overflow: hidden;

    > span {
      display: inline-block;
      vertical-align: top;
      position: relative;
      line-height: 1;
      padding: 7px 0;
      z-index: 9;

      &.text-label {
        background-color: #fff;
      }
    }

    &.underline {
      &::before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        border-bottom: 1px solid #000;
        bottom: 2px;
        left: 0;
        z-index: 1;
      }
    }
  }
  &.is-side {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
}

// elem-pane-box
.elem-pane-box {
  .elem-body {
    min-height: 60px;
    position: relative;
  }
  .elem-pane-box-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 8;
  }
  .elem-pane-box-element {
    .element-item {
      position: absolute;
    }
  }
}
// elem-rich-text
.elem-rich-text {
  img {
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
  }
}
// elem-paper-struct
.elem-paper-struct {
  li {
    padding-left: 30px;
    text-indent: -30px;

    > span {
      display: inline-block;
      vertical-align: middle;
      width: 30px;
      text-align: right;
    }
  }
}
// elem-score-table
.elem-score-table {
  text-align: center;

  .score-table {
    width: 80%;
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0 auto;
  }
  td,
  th {
    border: 1px solid #000;
    padding: 0 2px;
    height: 30px;
    line-height: 30px;
  }
}
// elem-paper-props
.elem-paper-props {
  display: table;
  width: 80%;
  margin: 0 auto;
  .paper-prop {
    &-item {
      display: table-cell;
      vertical-align: middle;
      padding: 6px 10px;
      line-height: 20px;
      font-size: 0;

      &:first-child {
        text-align: left !important;
      }
      &:nth-of-type(2) {
        text-align: center;
      }
      &:last-child {
        text-align: right;
      }
    }

    &-label {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
    }
    &-content {
      display: inline-block;
      vertical-align: middle;
      font-size: 0;

      > span {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
      }
    }
    &-option {
      display: inline-block;
      vertical-align: middle;
      margin: 0 5px;
      font-size: 0;

      > span {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
      }
    }
    &-checkbox {
      width: 16px;
      height: 16px;
      border: 1px solid #000;
      margin-left: 5px;
      position: relative;

      &.is-checked {
        &::before {
          content: "";
          display: block;
          position: absolute;
          width: 5px;
          height: 9px;
          left: 4px;
          top: 0;
          border-right: 2px solid #000;
          border-bottom: 2px solid #000;
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
        }
      }
    }
    &-val {
      padding: 0 5px;
      min-width: 30px;
      height: 18px;
      line-height: 18px;
      margin-left: 5px;
      border-bottom: 1px solid #000;
      text-align: center;
    }
  }
}

// paper-template-view
.paper-template-view {
  .element-item-paper-struct {
    height: auto !important;
  }
  .page-column-body {
    font-size: 0px;
  }
  .page-column-main {
    overflow: visible;
  }
  .page-column .page-number {
    bottom: -60px;
  }
  .rich-text {
    font-size: 14px;
  }
  .topic-element-preview {
    font-size: 14px;
  }
  .group-item {
    .elem-rich-text {
      display: inline-block;
      white-space: pre-wrap;
      width: 100%;
    }
    &.is-detail-title {
      overflow: hidden;
      padding-bottom: 5px;

      .rich-text {
        display: inline;
      }
    }
    &.is-detail-description {
      padding-bottom: 5px;
    }

    .detail-score-table {
      float: left;
      width: 120px;
      border-spacing: 0;
      border-collapse: collapse;
      margin-right: 10px;

      td,
      th {
        height: 30px;
        line-height: 30px;
        border: 1px solid #000;
        font-size: 16px;
      }
    }
  }
  .p-no {
    margin-top: -3px;
  }
  .page-number-text-cont {
    overflow: hidden;
    white-space: pre;
  }
}
