#ImageGalleryLayout {
  #LayoutType {
    color: rgb(134, 134, 134);
  }

  .select2-container--bootstrap4 {
    max-width: 200px;
    margin: auto;
  }
}

#standardPage {
  .sp-pb-0 {
    padding-bottom: 0 !important;
  }

  .sp-card {
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
  }
}

[aria-expanded="false"] {
  span.more {
    display: inline;
  }
  span.less {
    display: none;
  }
}

[aria-expanded="true"] {
  span.more {
    display: none;
  }
  span.less {
    display: inline;
  }
}

button#cmsSectionEditorFullScreen {
  span.exit {
    display: none;
  }

  &.active {
    span.exit {
      display: inline;
    }
  }
}

#liveViewCont {
  height: 100%;

  .embed-responsive {
    height: 100%;
  }
}

#draggableSectionsHolder {
  max-height: 750px;
}

#cmsPagesectionsArea {
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 100%;

  .border {
    border-color: #9c9c9c !important;
  }

  // Hide scroll-bar in live preview
  // sidebar.
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  &::-webkit-scrollbar {
    display: none;
  }
}

@include media-breakpoint-up(md) {
  body[data-sections-editor-full-screen] {
    .hide-on-full-screen-mode {
      display: none;
    }

    #pageSectionsArea {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      background: white;
      padding: 15px 15px 0 15px;
      height: 100vh;

      #cmsPagesectionsArea {
        max-height: 90vh;
      }

      .embed-responsive-4by3 {
        height: 90vh;
      }
    }

    #draggableSectionsHolder {
      max-width: 350px;
    }
   }
}

#pageLivePreview {
  transform-origin: top left;
  background: rgb(62, 62, 62);
}

.desktopLiveView {
  #pageLivePreview {
    width: 200.5%;
    height:200.5%;
    inset: 50%;
    transform: scale(0.5) translate(-50%, -50%);
    max-width: 2600px;
  }
}

.tabletLiveView {
  #pageLivePreview {
    width: 85%;
    height: 133.5%;
    inset: 50%;
    transform: scale(0.75) translate(-50%, -50%);
    max-width: 991px;
    min-width: 768px;
  }
}

.mobileLiveView {
    #pageLivePreview {
    width: 60%;
    height: 133.5%;
    inset: 50%;
    transform: scale(0.75) translate(-50%, -50%);
    max-width: 767px;
    min-width: 375px;
  }
}