/*!
 *
 *  * Copyright © ProgramCMS. All rights reserved.
 *  * See COPYING.txt for license details.
 *  *
 *  * Developed by Mohamed EL QUCHIRI <elquchiri@gmail.com>
 *
 */

@import "_begin-ignore.css";
@import '~grapesjs/dist/css/grapes.min.css';
@import "coloris";
@import "_end-ignore.css";

@import "editor/top_panel";

.pcms-editor {
  width: 100%;
  height: 100%;
  display: none;
  border-top: 2px solid #0b5ed7;

  ::-webkit-scrollbar {
    width: 0;
  }

  ::-webkit-scrollbar-track {
    background: #e5e5e5;
  }

  ::-webkit-scrollbar-thumb {
    background: #acacac;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #747474;
  }
}

.editor-row {
  display: flex;
  gap: 21px;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  height: calc(100% - 40px - 58px);
  padding: 17px 11px 0 11px;
  background-color: #f8f8f8;

  .editor-column {
    flex: 1; /* Each column takes equal width */
    //background-color: #FFFFFF;
  }

  #blocks {
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    overflow-y: auto;
    flex: 1.2;
    background-color: #EEEEEE;
  }

  .editor-canvas {
    flex: 2;
    flex-grow: 4;
    //border: 2px solid #cecece;
    border-radius: 5px;
  }

  #components {
    flex: 1.4;
    overflow-y: auto;
    border: 2px solid #cecece;
    border-radius: 5px;
    background-color: #ffffff;

    #styles-container {
      display: block;
    }

    #traits-container {
      display: none;
      padding: 11px;
    }

    #layers-container {
      display: none;
      position: relative;
    }

    #settings-container {
      display: none;
    }
  }
}

.editor-rte-action {
  margin: 0 2px 0 2px;
  border-radius: 3px;
  cursor: pointer;
}

.editor-icon {
  width: 29px;
  height: 29px;
}

.editor-rte-action:hover {
  background-color: #bbbbbb;
}

.editor-rte-action.active {
  background-color: #bbbbbb;
}

.editor-header {
  display: flex;
  //justify-content: space-between;
  align-items: center; /* Vertically center items */
}

.image-input-container {
  display: flex;
  flex: 1;
  align-items: center;
}

.image-input-container img {
  max-width: 100px;
}

.editor_title {
  width: 100%;
  border: 0;
  outline: none;
  box-shadow: none;
  background-color: inherit;
  font-size: 15px;
  font-weight: bold;

  &:hover, &:focus, &:active {
    border: 0 !important;
    outline: none !important;
  }
}

.editor-header ::placeholder {
  color: #000000;
  opacity: 1; /* Firefox */
}

.editor-header ::-ms-input-placeholder { /* Edge 12 -18 */
  color: #000000;
}

.gjs-one-bg {
  background-color: #FFFFFF;
  color: #000000;
}

.btn-redo {
  background: url("../../../../../public/images/editor/redo.png") no-repeat center center;
}

.btn-undo {
  background: url("../../../../../public/images/editor/undo.png") no-repeat center center;
}

.btn-print {
  background: url("../../../../../public/images/editor/print.png") no-repeat center center;
}

.btn-bold {
  background: url("../../../../../public/images/editor/bold.png") no-repeat center center;
}

.btn-italic {
  background: url("../../../../../public/images/editor/italic.png") no-repeat center center;
}

.btn-underline {
  background: url("../../../../../public/images/editor/underline.png") no-repeat center center;
}

.btn-text-color {
  position: relative;
  background: url("../../../../../public/images/editor/text-color.png") no-repeat center 3px;
}

.btn-link {
  position: relative;
  background: url("../../../../../public/images/editor/link.png") no-repeat center center;
}

.btn-image {
  position: relative;
  background: url("../../../../../public/images/editor/image.png") no-repeat center center;
}

.btn-unordered-list {
  position: relative;
  background: url("../../../../../public/images/editor/unordered-list.png") no-repeat center center;
}

.btn-numbered-list {
  position: relative;
  background: url("../../../../../public/images/editor/numbered-list.png") no-repeat center center;
}

.btn-check-list {
  position: relative;
  background: url("../../../../../public/images/editor/check-list.png") no-repeat center center;
}

.btn-center-align {
  position: relative;
  background: url("../../../../../public/images/editor/center-align.png") no-repeat center center;
}

.btn-left-align {
  position: relative;
  background: url("../../../../../public/images/editor/left-align.png") no-repeat center center;
}

.btn-right-align {
  position: relative;
  background: url("../../../../../public/images/editor/right-align.png") no-repeat center center;
}

.btn-style-manager {
  position: relative;
  background: url("../../../../../public/images/editor/traits/style_manager.png") no-repeat center center;
}

.btn-traits {
  position: relative;
  background: url("../../../../../public/images/editor/traits/traits.png") no-repeat center center;
}

.btn-layers {
  position: relative;
  background: url("../../../../../public/images/editor/traits/layers.png") no-repeat center center;
}

.btn-settings {
  position: relative;
  background: url("../../../../../public/images/editor/traits/settings.png") no-repeat center center;
}

.editor-dropdown {
  background-color: inherit;
  padding: 0 9px 0 9px;
  border: 0;
  color: #000000;
  font-size: 15px;
  z-index: 100;
}

.panel__actions {
  display: flex;
  position: relative;
  padding: 0 5px 0 5px;

  &:after {
    content: '';
    height: 50%;
    width: 1px;
    position: absolute;
    left: 0;
    top: 25%;
    background-color: #c2c0c0;
  }
}

.panel__devices {
  display: flex;
  position: relative;
  padding: 0 5px 0 5px;
  background: transparent;

  &:after {
    content: '';
    height: 50%;
    width: 1px;
    position: absolute;
    left: 0;
    top: 25%;
    background-color: #c2c0c0;
  }
}

.panel__top {
  display: flex;
  width: 100%;
  background-color: #e7e7e7;
  border-radius: 5px;
  padding: 3px 0 3px 0;
  box-shadow: 1px 1px 3px #9e9d9d;

  .components_menu {
    .editor-rte-action {
      padding-left: 21px;
      padding-right: 21px;
      width: auto;
      background-position: center center;

      &.with_text {
        font-size: 13px;
        padding-top: 5px;
        padding-left: 35px;
        padding-right: 13px;
        font-weight: bold;
        background-position: 7px center;
      }
    }
  }
}

.gjs-highlighter {
  outline: none !important;
  box-shadow: none !important;
  border: 1px dashed #888888;
}

.gjs-badge {
  display: none !important;
}

.gjs-cv-canvas {
  top: 0;
  width: 100%;
  height: 100%;
}

.panel__basic-actions-zoom {
  position: static;
}

.panel__basic-actions-title {
  position: static;
}

.panel__left {
  flex-basis: 230px;
  position: relative;
  overflow-y: auto;
}

.block-icon {
  width: 50px;
  height: 50px;

  &.section-icon {
    background: url("../../../../../public/images/editor/undo.png") no-repeat center center;
  }
}

.gjs-block {
  width: 28% !important;
  min-height: 70px !important;

  .gjs-block-label {
    font-weight: bold;
  }

  &.gjs-four-color-h:hover {
    color: #c2502b;
    border: 1px solid #c2502b;
  }
}

.components_manager {

}

.gjs-sm-properties {
  background: #FFFFFF !important;
  color: #000000;
}

.gjs-sm-sector-title {
  background: #e2e2e2 !important;
  padding-left: 5px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  font-size: 14px;
  color: #3d3d3d;
}

.gjs-sm-sector-caret {
  height: 25px !important;
}

.gjs-sm-icon {
  font-weight: bold;
}

.gjs-title {
  padding-left: 11px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: 14px;
  color: #3d3d3d;
}

.gjs-field {
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #CCCCCC;
}

.gjs-block {
  padding: 0;
  justify-content: normal;
  min-height: auto !important;
  margin: 5px;
  width: 21% !important;
  min-width: auto !important;
  border: 1px solid #cccccc;
}

.gjs-block__media {
  margin-bottom: 0;
}

.gjs-block-label {
  padding: 3px;
  align-items: center;
  justify-content: center;
}

.gjs-sm-field input, .gjs-clm-select input, .gjs-clm-field input, .gjs-sm-field select, .gjs-clm-select select, .gjs-clm-field select {
  color: #000000 !important;
}

/* Menu bar styling */
.menu-bar {
  background-color: #FFFFFF;
  color: #000000;
}

.root-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.root-menu .menu-item {
  position: relative;
  padding: 2px 11px 2px 11px;
  color: #2d2d2d;
  font-size: 14px;
  cursor: pointer;
}

.root-menu .menu-item:hover {
  background-color: #dedede;
}

.sub-menu {
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  display: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.sub-menu .menu-item {
  white-space: nowrap;
  padding: 10px 15px;
}

.sub-menu .menu-item:hover {
  background-color: #dedede;
}

.sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

.menu-item:hover > .sub-menu {
  display: block;
}

.gjs-four-color {
  color: #0a58ca;
}

.editor_message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 500px;
  min-height: 20px;
  background-color: rgba(255, 227, 16, 0.4);
  z-index: 99999;
  border-radius: 0 0 3px 3px
}