/*
  This file contains the main CSS for the 'LAYOUT BUILDER'.
  During less -> styles conversion, only this file alone converted.

  Points to remember
  ==================
  1. Don't write any styles in the styles folder. During less to style compilation, everything in styles file get overridden by less file.
 */
/*** Common Variables ***/
:root {
  /*** Font ***/
  --base-font-family: 'Inter',Roboto,sans-serif;
  /*** Text Colors ***/
  --text-color-dark: #282828;
  --text-color-light: #fff;
  /*** Background ***/
  --section-bg: #fff;
  --primary-color: #90A9B9;
  --secondary-color: #CDE3EA;
  --sidepanel-bg: #fff;
  --layout-bg: #e6e8f0;
  --layoutinner-bg: #fff;
  /*** Border Colors ***/
  --primary-border-color: #EBEDF5;
  --holder-border-color: #A9A9A9;
  --holder-highlight-color: #3D8AFF;
  /*** Spacing ***/
  --spacing-small: 2px;
  --spacing-base: 5px;
  --spacing-medium: 8px;
  --spacing-normal: 10px;
  --spacing-large: 15px;
  --spacing-larger: 20px;
  --spacing-largest: 25px;
  /*** Dialog ***/
  --dialog-bg: #fff;
  --dialog-border: #DDD;
  --dialog-header-bg: #576168;
  --dialog-header-border: #E8E8E8;
  --lb-column: 12;
}
/*** Common layout styles ***/
.ZDC-left {
  float: left;
}
.ZDC-right {
  float: right;
}
.ZDC-top-margin {
  margin-top: var(--spacing-normal);
}
.ZDC-top-margin-small {
  margin-top: var(--spacing-base);
}
.ZDC-top-margin-large {
  margin-top: var(--spacing-large);
}
.ZDC-bottom-margin {
  margin-bottom: var(--spacing-normal);
}
.ZDC-bottom-margin-small {
  margin-bottom: var(--spacing-base);
}
.ZDC-bottom-margin-large {
  margin-bottom: var(--spacing-large);
}
.ZDC-left-margin {
  margin-left: var(--spacing-normal);
}
.ZDC-left-margin-small {
  margin-left: var(--spacing-base);
}
.ZDC-left-margin-large {
  margin-left: var(--spacing-large);
}
.ZDC-right-margin {
  margin-right: var(--spacing-normal);
}
.ZDC-right-margin-small {
  margin-right: var(--spacing-base);
}
.ZDC-right-margin-large {
  margin-right: var(--spacing-large);
}
.ZDC-no-margin {
  margin: 0;
}
.ZDC-margin-small {
  margin: var(--spacing-base);
}
.ZDC-margin-normal {
  margin: var(--spacing-normal);
}
.ZDC-margin-medium {
  margin: var(--spacing-medium);
}
.ZDC-margin-large {
  margin: var(--spacing-large);
}
.ZDC-padding-small {
  padding: var(--spacing-base);
}
.ZDC-padding-normal {
  padding: var(--spacing-normal);
}
.ZDC-padding-medium {
  padding: var(--spacing-medium);
}
.ZDC-padding-large {
  padding: var(--spacing-large);
}
/*** Used to clearfix the floats ***/
.ZDC-overflow:after {
  content: "";
  display: table;
  clear: both;
}
/***  Flex Classes ***/
.ZDC-flex {
  display: flex;
}
.ZDC-vl-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ZDC-flex-lt {
  justify-content: left;
}
.ZDC-flex-rt {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.ZDC-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ZDC-flex-wrap {
  flex-wrap: wrap;
}
.ZDC-valign-middle {
  display: flex;
  align-items: center;
}
/*** Grid Classes ***/
.ZDC-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.ZDC-grid-3cl {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}
/*** Icon styles ***/
.svg-icon-holder {
  position: absolute;
  left: -1000em;
  top: -1000em;
}
.ZDCLB-icon-holder {
  border: 1px solid var(--primary-color);
  border-radius: 6px;
}
.ZDCLB-svg-icon {
  width: 18px;
  height: 18px;
  fill: #222;
}
.ZDCLB-svg-icon-40 {
  width: 40px;
  height: 40px;
}
/*** Truncation CSS ***/
.ZDC-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*** Disable styles ***/
.ZDC-disabled {
  opacity: 0.4 !important;
  cursor: default !important;
  pointer-events: none;
}
.ZDC-disabled[data-title]:after,
.ZDC-disabled[data-title]:before {
  display: none;
}
.rb-state-hidden {
  display: none;
}
/*** Custom Form Element styles ***/
/*** Checkbox Styles ***/
.ZDC-checkbox {
  display: flex;
  cursor: pointer;
  align-items: center;
  user-select: none;
}
.ZDC-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.ZDC-checkbox input + span {
  display: inline-block;
  height: 10px;
  min-width: 10px;
  border: 1px solid var(--primary-color);
  border-radius: 3px;
  position: relative;
  margin-right: 5px;
}
.ZDC-checkbox input:checked + span {
  background-color: var(--primary-color);
}
.ZDC-checkbox input:checked + span:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.ZDC-radio {
  display: flex;
  cursor: pointer;
  align-items: center;
  user-select: none;
}
.ZDC-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.ZDC-radio input + span {
  display: inline-block;
  height: 10px;
  min-width: 10px;
  border: 1px solid var(--primary-color);
  border-radius: 3px;
  position: relative;
  margin-right: 5px;
}
.ZDC-radio input:checked + span {
  background-color: var(--primary-color);
}
.ZDC-radio input:checked + span:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.ZDC-radio input + span {
  height: 12px;
  min-width: 12px;
  border-radius: 50%;
}
.ZDC-radio input:checked + span {
  background-color: #fff;
  box-shadow: 0 0 0 2px var(--primary-color) inset;
}
.ZDC-radio input:checked + span:after {
  display: none;
}
/*** Section styles ***/
.ZDC-section {
  background: var(--section-bg);
  border-radius: 4px;
  box-shadow: 0px 2px 10px rgba(5, 0, 56, 0.08);
  padding: 2px;
}
.ZDC-dialog {
  background: var(--dialog-bg);
  border: 1px solid var(--dialog-border);
  box-shadow: 0px 0px 0px 0px rgba(31, 35, 52, 0.1), 0px 12px 25px 0px rgba(31, 35, 52, 0.1), 0px 46px 46px 0px rgba(31, 35, 52, 0.09), 0px 104px 62px 0px rgba(31, 35, 52, 0.05), 0px 185px 74px 0px rgba(31, 35, 52, 0.01), 0px 289px 81px 0px rgba(31, 35, 52, 0);
  border-radius: 8px;
  padding: 0;
  width: 296px;
}
.ZDC-dialog header {
  border-radius: 8px 8px 0px 0px;
  border-bottom: 1px solid var(--dialog-header-border);
  background: var(--dialog-header-bg);
}
.ZDC-dialog header h3 {
  margin: 0;
  color: var(--text-color-light);
}
.ZDC-dialog header .ZDCLB-svg-icon {
  fill: #fff;
}
/*** Column List styles ***/
.ZDC-column-block {
  margin: 20px 0 0;
}
.ZDC-column-block h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
}
.ZDC-column-block ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ZDC-column-block ol li {
  border-radius: 4px;
  background: #F4F5F6;
  padding: 14px;
  margin: 0 0 8px 0;
}
.ZDC-column-block ol li p {
  margin: 0;
  font-size: 13px;
  color: #535353;
}
/*.ZDCLB-board {
    position: absolute;
    height: inherit;
    width: inherit;
    background-color: #fff;
    border: dashed 1px red;
}

.ZDCLB-boardCardLayer {
    height: 0px;
    width: 0px;
}

.ZDCLB-boardGridLayer {
    height: 0px;
    width: 0px;
}

.ZDCLB-card {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #ccc;
}

.ZDCLB-placeHolder {
    position: absolute;
    background-color: #ff0000;
    opacity: 0.2;
    left: 0px;
    top: 0px;
    transition: all 100ms ease;
}

.ZDCLB-dragImage {
    position: absolute;
    left: 0px;
    top: 0px;
}

.ZDCLB-FieldDragImage {
    position: absolute;
    top: 0px;
    left: 0px;
}

.ZDCLB-container {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #ececec;
}

.ZDCLB-layout {
    position: relative;
    height: inherit;
    width: inherit;
}

.ZDCLB-cardCollection {
    display: flex;
    height: 100px;
    border: 1px dashed green;
    margin-bottom: 10px;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}


.ZDCLB-field {
    border: 1px solid black;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.ZDCLB-option {
    justify-content: center;
    align-items: center;
    align-content: center;
    padding-block: 10px;
    display: block;
    padding: 10px;
    height: max-content;
    width: max-content;
}

.ZDCLB-contextMenu {
    position: absolute;
    height: max-content;
    width: max-content;
    background-color: white;
    border: 1px solid black;
    border-radius: 8px;
}
*/
.ZDCLB-sidepanel {
  border-right: 1px solid var(--primary-border-color);
  background: var(--sidepanel-bg);
  width: 200px;
  min-width: 200px;
  height: 100%;
  box-sizing: border-box;
}
.ZDCLB-sidepanel h3 {
  margin: 0 0 12px 0;
}
.ZDCLB-field-list {
  margin: -7px 0 0 -7px;
  padding: 0;
  list-style: none;
}
.ZDCLB-field-list li > div {
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--primary-border-color);
  background: var(--section-bg);
  width: 86px;
  height: 78px;
  padding: 10px;
  cursor: grab;
  box-sizing: border-box;
  margin: 7px 0 0 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ZDCLB-field-list li > div .ZDCLB-svg-icon {
  width: 40px;
  height: 40px;
  color: #90A9B9;
  fill: #CDE3EA;
}
.ZDCLB-field {
  padding: 10px;
}
.ZDCLB-holder {
  width: 100vw;
  height: 100vh;
  font-family: var(--base-font-family);
  background: var(--layout-bg);
  box-sizing: border-box;
}
.ZDCLB-holder h3 {
  color: var(--text-color-dark);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}
body {
  background: #e6e8f0;
}
.ZDCLB-wrapper {
  width: inherit;
  height: inherit;
  font-family: var(--base-font-family);
  background: #e6e8f0;
}
.ZDCLB-layout {
  width: calc(100vw - 200px - 40px);
  /* 40px - outer margin value */
  height: calc(200% - 40px);
  /* 40px - outer margin value */
  background: var(--layoutinner-bg);
  border-radius: 16px;
  margin: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.ZDCLB-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.ZDCLB-layoutbuilder {
  position: relative;
  width: calc(100% - 20px);
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
}
.ZDCLB-boardholder {
  position: absolute;
  width: 100%;
  height: 100%;
}
.ZDCLB-board {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.ZDCLB-board h4 {
  font-weight: normal;
  color: #a9a9a9;
  margin: 0;
  font-size: 13px;
}
.ZDCLB-board p {
  font-size: 11px;
  color: #858585;
}
.ZDCLB-board:hover {
  border-color: var(--holder-highlight-color);
}
.ZDCLB-board.ZDC-selected {
  border-color: var(--holder-highlight-color);
}
.ZDCLB-cardholder {
  position: absolute;
  transition: left 300ms ease,top 300ms ease;
}
.ZDCLB-cardholder:hover .ZDCLB-card {
  border-color: black;
}
.ZDCLB-card {
  transition: all 200ms ease-in-out;
  border-radius: 8px;
  border: 1px solid green;
  background: lightgreen;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ZDCLB-card:hover {
  background: lightgoldenrodyellow;
}
.ZDCLB-card-dragging .ZDCLB-card {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.26);
  transform: rotate(3deg);
}
.ZDCLB-dragImage {
  position: absolute;
}
.ZDCLB-placeHolder {
  position: absolute;
  background: transparent;
  border: 1px dashed #ccc;
  border-radius: 10px;
  top: 0px;
  left: 0px;
  transition: left 300ms ease,top 300ms ease;
}
.ZDCLB-placeHolder::before {
  content: "";
  position: absolute;
  color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.ZDCLB-newPlaceHolder::before {
  content: "Drop here";
}
/*** Interface related styles ***/
.ZDCI-container {
  width: inherit;
  height: inherit;
}
.ZDCI-board-new {
  color: #535353;
  font-size: 13px;
}
.ZDCI-board-new .ZDCI-board-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: max-content;
  height: max-content;
}
.ZDCLB-card-rightBottomResize,
.ZDCLB-card-HeightResize,
.ZDCLB-card-WidthResize {
  position: absolute;
  visibility: hidden;
  border-radius: 10px;
  background-color: #777;
  border: 1px solid #fff;
}
.ZDCLB-card:hover .ZDCLB-card-rightBottomResize,
.ZDCLB-card:hover .ZDCLB-card-HeightResize,
.ZDCLB-card:hover .ZDCLB-card-WidthResize {
  visibility: visible;
}
.ZDCLB-card-rightBottomResize {
  height: 15px;
  width: 15px;
  top: calc(100% - 9px);
  left: calc(100% - 9px);
  cursor: nwse-resize;
}
.ZDCLB-card-HeightResize {
  height: 10px;
  width: 20px;
  top: calc(100% - 3px);
  cursor: row-resize;
}
.ZDCLB-card-WidthResize {
  height: 20px;
  width: 5px;
  left: calc(100% - 3px);
  cursor: col-resize;
}
.ZDCLB-contentDom:empty::before {
  content: "Drag & Drop your Elements here";
  position: absolute;
  color: #bbb;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.ZDCLB-placeHolderGrid {
  position: absolute;
  background-color: #fff;
  border: 1px solid #eaeaea;
  box-sizing: content-box;
}
.ZDCLB-card-deleteButton,
.ZDCLB-card-grabElement {
  visibility: hidden;
  position: absolute;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px;
  height: 18px;
  width: 18px;
  transition: transform 0.3s;
  opacity: 0.6;
  background: #fafafa;
}
.ZDCLB-card-deleteButton:hover,
.ZDCLB-card-grabElement:hover {
  transform: scale(1.1);
}
.ZDCLB-card-deleteButton {
  left: 100%;
  top: 0px;
  cursor: pointer;
}
.ZDCLB-card-grabElement {
  left: -20px;
  top: 0px;
  cursor: grab;
  padding: 1px;
}
.ZDCLB-card:hover .ZDCLB-card-grabElement {
  visibility: visible;
}
.ZDCLB-card:hover .ZDCLB-card-deleteButton {
  visibility: visible;
}
.ZDCLB-placeHolderGrid:nth-last-child(1) {
  border-bottom-right-radius: 16px;
}
.ZDCLB-placeHolderGrid:nth-child(1) {
  border-top-left-radius: 16px;
}
.ZDCLB-card-duplicateIcon {
  position: absolute;
  right: 0px;
  top: 0px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px;
  height: 18px;
  width: 18px;
  transition: transform 0.3s;
  opacity: 0.6;
  background: #fafafa;
  cursor: pointer;
}
.ZDCLB-card-duplicateIcon:hover {
  transform: scale(1.1);
}
.ZDCLB-card:hover .ZDCLB-card-duplicateIcon {
  visibility: visible;
}
.ZDCLB-card-deleteIcon {
  position: absolute;
  right: 20px;
  top: 0px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px;
  height: 18px;
  width: 18px;
  transition: transform 0.3s;
  opacity: 0.6;
  background: #fafafa;
  cursor: pointer;
}
.ZDCLB-card-deleteIcon:hover {
  transform: scale(1.1);
}