.dfptBlock {
  margin: 50px auto;
  position: relative;
  padding: 2rem 0;
}

.field--name-field-webgl-dfp-code-javascript:not(.form-wrapper),
.field--name-field-webgl-dfp-tag-id:not(.form-wrapper) {
  display: none;
}

.cke_editable .webgl_dfp_embed-block {
  display: block;
  width: fit-content;
  border: 1px dashed #ccc;
  padding: 10px;
  margin: 50px auto;
  background: #fffde3;
}

.cke_editable .webgl_dfp_embed-block::before {
  content: url('../plugins/embed_block/icons/icon_back.png');
  margin-right: 15px;
  vertical-align: middle;
}

.dfptBackground {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
  display: none;
}

.ui-dialog {
  .color_field_widget_box__square ,
  .color_field_widget_box__square--transparent {
    width: 50px;
    height: 50px;
    margin-left: 50px;
    border: none;
    box-shadow: none;

    &:hover,
    &.active {
      width: 50px;
      height: 50px;
    }

    &::before {
      content: '';
      height: 20px;
      width: 20px;
      display: block;
      transform: translateX(-36px);
      border-radius: 50%;
      border: 1px solid #8e929c;
    }

    &:hover {
      &::before {
        border-color: #232429;
      }
    }

    &:focus {
      box-shadow: none;
      &::before {
        border-color: rgba(0, 0, 0, .2);
        box-shadow: inset 0 0 0 5px rgb(5, 80, 230) , 0 0 0 1px rgba(0, 0, 0, .2) , 0 0 0 4px rgba(0, 125, 250, .6);
      }
    }

    &.active {
      &::before {
        background: #ffffff;
        box-shadow: inset 0 0 0 5px rgb(5, 80, 230);
      }
      
      &:focus {
        box-shadow: none;
        &::before {
          border-color: rgba(0, 0, 0, .2);
          box-shadow: inset 0 0 0 5px rgb(5, 80, 230) , 0 0 0 1px rgba(0, 0, 0, .2) , 0 0 0 4px rgba(0, 125, 250, .6);
        }
      }
    }
  }

  .color_field_widget_box__square--transparent {
    float: left;
    background-image: none;

    &:hover,
    &.active {
      background-image: none;
    }
  }

}