article.layout-model h3, article.layout-model h4 {
  display: none; }
article.layout-model .buttons.toolbox,
article.layout-model .pages.tabber {
  background-image: linear-gradient(to bottom, #f8f8f8 50%, #efefef); }
article.layout-model .buttons.toolbox ul,
article.layout-model .pages.tabber ul {
  border: none;
  font-size: 0;
  padding: 10px;
  white-space: nowrap; }
  article.layout-model .buttons.toolbox ul > li,
  article.layout-model .pages.tabber ul > li {
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    margin-left: -1px;
    height: 28px; }
    article.layout-model .buttons.toolbox ul > li:first-child,
    article.layout-model .pages.tabber ul > li:first-child {
      border-bottom-left-radius: 2px;
      border-top-left-radius: 2px; }
    article.layout-model .buttons.toolbox ul > li:last-child,
    article.layout-model .pages.tabber ul > li:last-child {
      border-bottom-right-radius: 2px;
      border-top-right-radius: 2px; }
    article.layout-model .buttons.toolbox ul > li > *,
    article.layout-model .pages.tabber ul > li > * {
      font-size: 0;
      height: 28px; }
article.layout-model .buttons.toolbox > .pages {
  display: none; }
article.layout-model .buttons.toolbox > section {
  display: inline-block;
  font-size: 0; }
  article.layout-model .buttons.toolbox > section > ul {
    display: inline-block; }
  article.layout-model .buttons.toolbox > section > .selected.tools > label {
    display: none; }
article.layout-model .buttons.toolbox ul > li {
  border: 1px solid #ddd;
  width: 28px; }
  article.layout-model .buttons.toolbox ul > li:hover:not(.selected) {
    background-color: #eee !important; }
  article.layout-model .buttons.toolbox ul > li.selected {
    background-color: #04b497 !important;
    border-color: #03a388 !important; }
  article.layout-model .buttons.toolbox ul > li.align.center {
    background: #f7f7f7 url("img/align-center-24.svg") center no-repeat; }
    article.layout-model .buttons.toolbox ul > li.align.center.selected {
      background-image: url("img/align-center-24-white.svg"); }
  article.layout-model .buttons.toolbox ul > li.align.left {
    background: #f7f7f7 url("img/align-left-24.svg") center no-repeat; }
    article.layout-model .buttons.toolbox ul > li.align.left.selected {
      background-image: url("img/align-left-24-white.svg"); }
  article.layout-model .buttons.toolbox ul > li.align.right {
    background: #f7f7f7 url("img/align-right-24.svg") center no-repeat; }
    article.layout-model .buttons.toolbox ul > li.align.right.selected {
      background-image: url("img/align-right-24-white.svg"); }
  article.layout-model .buttons.toolbox ul > li.free-text {
    background: #f7f7f7 url("img/free-text-24.svg") center no-repeat; }
  article.layout-model .buttons.toolbox ul > li.horizontal.line {
    background: #f7f7f7 url("img/horizontal-line-24.svg") center no-repeat; }
  article.layout-model .buttons.toolbox ul > li.image {
    background: #f7f7f7 url("img/image-24.svg") center no-repeat; }
    article.layout-model .buttons.toolbox ul > li.image.selected {
      background-image: url("img/image-24-white.svg"); }
  article.layout-model .buttons.toolbox ul > li.page-number-count {
    background: #f7f7f7 url("img/page-number-24.svg") center no-repeat; }
  article.layout-model .buttons.toolbox ul > li.page-number, article.layout-model .buttons.toolbox ul > li.pages-count {
    display: none; }
  article.layout-model .buttons.toolbox ul > li.rectangle {
    background: #f7f7f7 url("img/rectangle-24.svg") center no-repeat; }
  article.layout-model .buttons.toolbox ul > li.size.bigger {
    background: #f7f7f7 url("img/bigger-font-24.svg") center no-repeat; }
  article.layout-model .buttons.toolbox ul > li.size.smaller {
    background: #f7f7f7 url("img/smaller-font-24.svg") center no-repeat; }
  article.layout-model .buttons.toolbox ul > li.text {
    background: #f7f7f7 url("img/text-auto-24.svg") center no-repeat; }
  article.layout-model .buttons.toolbox ul > li.text-cr {
    background: #f7f7f7 url("img/text-manual-24.svg") center no-repeat; }
  article.layout-model .buttons.toolbox ul > li.vertical.line {
    background: #f7f7f7 url("img/vertical-line-24.svg") center no-repeat; }
article.layout-model .data .properties {
  display: flex; }
article.layout-model .page {
  border-top: 1px solid #d8d8d8;
  grid-template-areas: "angle horizontal" "vertical page";
  grid-template-columns: 15px 1fr;
  grid-template-rows: 15px 1fr;
  overflow: hidden; }
  article.layout-model .page.active {
    display: grid; }
  article.layout-model .page > .scrollable {
    grid-area: page;
    overflow: auto; }
  article.layout-model .page > .horizontal {
    border-top: 1px dashed darkgrey;
    grid-area: horizontal;
    top: 7px; }
    article.layout-model .page > .horizontal > .handle {
      cursor: ns-resize;
      margin: -7px 0; }
  article.layout-model .page > .snap.line.tool {
    font-size: 0;
    position: relative; }
    article.layout-model .page > .snap.line.tool > .handle {
      height: 100%;
      position: absolute;
      width: 100%; }
  article.layout-model .page > .vertical {
    border-left: 1px dashed darkgrey;
    grid-area: vertical;
    left: 7px; }
    article.layout-model .page > .vertical > .handle {
      cursor: ew-resize;
      margin: 0 -7px; }
article.layout-model .pages.tabber > ul > li {
  margin: 0;
  padding: 0; }
  article.layout-model .pages.tabber > ul > li:not(.unique-page) {
    width: 34px; }
  article.layout-model .pages.tabber > ul > li:not(.active) {
    border: 1px solid #ccc;
    box-shadow: inset 0 2px rgba(232, 232, 232, 0.7), inset 0 -2px #ccc; }
  article.layout-model .pages.tabber > ul > li:hover:not(.active) {
    background-color: #eee !important; }
  article.layout-model .pages.tabber > ul > li.active {
    background-color: #04b497 !important;
    border: 1px solid #03a388;
    box-shadow: inset 0 2px #03a388, inset 0 -2px #68d2c1; }
  article.layout-model .pages.tabber > ul > li.all-page {
    background: #d8d8d8 url("img/all-pages-24.svg") center no-repeat; }
    article.layout-model .pages.tabber > ul > li.all-page.active {
      background-image: url("img/all-pages-24-white.svg"); }
  article.layout-model .pages.tabber > ul > li.first-page {
    background: #d8d8d8 url("img/first-page-24.svg") center no-repeat; }
    article.layout-model .pages.tabber > ul > li.first-page.active {
      background-image: url("img/first-page-24-white.svg"); }
  article.layout-model .pages.tabber > ul > li.last-page {
    background: #d8d8d8 url("img/last-page-24.svg") center no-repeat; }
    article.layout-model .pages.tabber > ul > li.last-page.active {
      background-image: url("img/last-page-24-white.svg"); }
  article.layout-model .pages.tabber > ul > li.middle-page {
    background: #d8d8d8 url("img/middle-page-24.svg") center no-repeat; }
    article.layout-model .pages.tabber > ul > li.middle-page.active {
      background-image: url("img/middle-page-24-white.svg"); }
  article.layout-model .pages.tabber > ul > li.unique-page {
    background: #d8d8d8 url("img/unique-page-24.svg") center no-repeat;
    width: 28px; }
    article.layout-model .pages.tabber > ul > li.unique-page.active {
      background-image: url("img/unique-page-24-white.svg"); }
article.layout-model .property-select {
  border-right: 2px solid #d8d8d8;
  overflow: hidden auto; }
  article.layout-model .property-select input {
    margin: 9px 8px;
    padding: 14px 10px !important;
    width: calc(100% - 16px); }

article.layout-model:not(.form) {
  grid-template-areas: "header" "header2" "content" "pages" "page" "footer";
  grid-template-columns: 1fr; }
  article.layout-model:not(.form) .property-select,
  article.layout-model:not(.form) .snap.line,
  article.layout-model:not(.form) .toolbox {
    display: none; }
article.layout-model > form {
  grid-template-areas: "header     header  header " "header2    header2 header2" "content    content content" "properties pages   toolbox" "properties page    page   " "footer     footer  footer ";
  grid-template-columns: 200px min-content 1fr; }
  article.layout-model > form ul.data {
    background: white; }
article.layout-model:not(.form),
article.layout-model > form {
  grid-template-rows: min-content min-content min-content min-content 1fr min-content; }
  article.layout-model:not(.form) > .buttons.toolbox,
  article.layout-model > form > .buttons.toolbox {
    grid-area: toolbox; }
  article.layout-model:not(.form) > .page,
  article.layout-model > form > .page {
    grid-area: page; }
  article.layout-model:not(.form) > .pages,
  article.layout-model > form > .pages {
    grid-area: pages; }
  article.layout-model:not(.form) > .property-select,
  article.layout-model > form > .property-select {
    grid-area: properties; }