.document-letter-sheet() {
  display: inline-block;
  width: @paper-width;
  min-height: @paper-min-height;
  margin: 0 auto;
  background-color: @paper-bg;
  border: 1px solid #cacaca;
  padding: 10px 30px 20px 35px;
  box-shadow: 0 0 7px rgba(0,0,0,.2);

  &::after {
    content: " ";
    display: table;
  }

  &::before {
    content: " ";
    display: table;
  }
}

.without-bg {
  background: none;
  background-color: @background-color;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
}

.connection {
  border-color: rgb(214, 207, 126) !important;
}

body {
  min-height: 100%;
  padding: 0;
  margin: 0;
  background-color: @background-color;
  overflow-x: auto;

  &.covered {
    overflow: hidden;
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background: rgba(255,255,255,0.98);
    overflow: hidden;

    .overlay-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -15px;
      margin-top: -15px;
      color: #000;
      font-size: 30px;
    }
  }

  .tq-editor {

    .top-menu {
      background-color: @menu-bg;
      z-index: 1040;

      &.fixed {
        position: fixed;
        top: 0;
        width: 100%;
      }

      .menu-content {
        border: 1px solid @menu-border;
        border-bottom: 0;
        min-height: 20px;
        text-align: left;
        border-right-width: 0;

        fieldset {
          border: 1px groove #ddd !important;
          padding: 1rem !important;
          margin: 1rem !important;
          box-shadow:  0 0 0 0 #000;
          width: auto;
          display: inline-block;
          text-align: center;


          legend {
            font-size: .8rem !important;
            font-weight: bold !important;
            text-align: left !important;
            text-transform: uppercase;
            width:inherit;
            padding:0 1rem;
            margin: 0;
            border-bottom:none;
          }
        }
      }

      .toggle-down, .toggle-up {
        text-align: center;
        border: 1px solid @menu-border;
        cursor: pointer;
        border-right-width: 0;
      }
    }

    .workspace {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      position: relative;

      > div.header {
        width: @paper-width;
        margin: 0 auto;
        z-index: 1;
        position: relative;
        bottom: -25px;
        padding: 0 10px;
        height: 15px;
        pointer-events: none;

        &[data-orientation="landscape"] {
          width: @paper-landscape-width;
        }

        > .document-header {
          text-transform: uppercase;
          padding: 5px 10px;
          font-size: 18px;
          color: #fff;
          text-align: center;
          border-radius: 4px;
          margin-bottom: 10px;

          .uncontrolled_state_style() {
            background: #fff;
            border-radius: 3px;
            padding: 2px 5px;
            font-size: 15px;
          }

          &.in_process {
            background-color: #f0ad4e;
            > .uncontrolled_state {
              .uncontrolled_state_style;
              color: #f0ad4e;
            }
          }

          &.inactive {
            background-color: #d9534f;
            > .uncontrolled_state {
              .uncontrolled_state_style;
              color: #d9534f;
            }
          }

          &.active {
            background-color: #5cb85c;
            > .uncontrolled_state {
              .uncontrolled_state_style;
              color: #5cb85c;
            }
          }

          &.restricted {
            border: 1px solid #d9534f;
            border-radius: 3px;
            padding: 2px 5px;
            font-size: 15px;
            color: #d9534f;
            font-weight: bold;
            text-align: center;
            text-transform: uppercase;
          }
        }
      }

      > div.footer {
        width: @paper-width;
        margin: 0 auto;
        z-index: 1;
        position: relative;
        top: -45px;
        padding: 0 10px;
        height: 0;
        pointer-events: none;

        &[data-orientation="landscape"] {
          width: @paper-landscape-width;
        }

        > .document-footer {
          font-size: 11px;
          color: #aaa;
          text-align: right;
          margin-top: 20px;
        }
      }

      .main-document, .other-document {
        .document-letter-sheet;
        padding-top: 55px;
        padding-bottom: 25px;
        word-wrap: break-word;
        overflow-x: hidden;

        &[data-orientation="landscape"] {
          width: @paper-landscape-width;
          min-height: @paper-landscape-min-height;
        }

        // text-aling normalizer
        h1, h2 {
          text-align: center;
        }
        > * {
          text-align: initial;
          > * {
            text-align: inherit;
          }
        }

        p {
          p {
            display: inline-block;
            margin-bottom: 0;
          }
        }
      }
      .other-document {
        margin-top: 15px;
      }
    }
  }
}


// Overbody
.connection {
  border-color: darkgray;
  border-style: dashed;
  border-radius: 3px !important;
}