/**
 * Custom CSS for Grid editor
 */
/* Add notice to unsupported grid types */
.grid-new-element {
  /* Allowed grid container types: */
}

.grid-new-element > .grid-new-container-slots {
  position: relative;
}

.grid-new-element > .grid-new-container-slots:before {
  content: "No Theme Support";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin-top: -6px;
  -webkit-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
          transform: rotate(-3deg);
  text-align: center;
  line-height: 12px;
  font-size: 12px;
  color: red;
  text-transform: uppercase;
  pointer-events: none;
}

.grid-new-element > .grid-new-container-slots > .grid-slot {
  opacity: 0.3;
}

.grid-new-element[data-type="c-1d1"] > .grid-new-container-slots:before, .grid-new-element[data-type="c-1d4-1d4-1d4-1d4"] > .grid-new-container-slots:before {
  content: none;
}

.grid-new-element[data-type="c-1d1"] > .grid-new-container-slots > .grid-slot, .grid-new-element[data-type="c-1d4-1d4-1d4-1d4"] > .grid-new-container-slots > .grid-slot {
  opacity: 1;
}

.grid-container {
  position: relative;
  /* Allowed grid container types: */
}

.grid-container:before {
  content: "No Theme Support";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin-top: 15px;
  -webkit-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
          transform: rotate(-3deg);
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  color: red;
  text-transform: uppercase;
  pointer-events: none;
}

.grid-container > .grid-container-content {
  opacity: 0.3;
}

.grid-container[data-type="c-1d1"]:before, .grid-container[data-type="c-1d4-1d4-1d4-1d4"]:before {
  content: none;
}

.grid-container[data-type="c-1d1"] > .grid-container-content, .grid-container[data-type="c-1d4-1d4-1d4-1d4"] > .grid-container-content {
  opacity: 1;
}