
.paragraph-form-item--has-subform .field--type-grid-field-type .form-item__toggle-description-placeholder {
  display: none;
}

.field--type-grid-field-type {
  &.paragraphs-content {
    position: relative;
  }

  .mdc-fab {
    background-color: var(--mdc-theme-secondary, #009fe3);
  }

  .btn-toggle-widget {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    .material-icons {
      background: transparent no-repeat center center scroll;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 18h5v-6h-5v6zm-6 0h5V5H4v13zm12 0h5v-6h-5v6zM10 5v6h11V5H10z' fill='%23FFFFFF'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
      background-size: 28px 28px;
    }
  }

  header.pg-bp-header {
    padding-top: 50px;

    .device-icon {
      display: inline-block;
      width: 32px;
      height: 32px;
      background: transparent no-repeat center center scroll;
      background-size: contain;
      position: relative;
      z-index: 3;

      &.mobile {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
      }
      &.smartphone {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23999999' d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E");
      }
      &.tablet {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M18.5 0h-14C3.12 0 2 1.12 2 2.5v19C2 22.88 3.12 24 4.5 24h14c1.38 0 2.5-1.12 2.5-2.5v-19C21 1.12 19.88 0 18.5 0zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm7.5-4H4V3h15v16z'/%3E%3C/svg%3E");
      }
      &.laptop {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23999999' d='M20 18c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2H0c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2h-4zM4 5h16v11H4V5zm8 14c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E");
      }
      &.desktop {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23999999' d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 12H3V4h18v10z'/%3E%3C/svg%3E");
      }
    }

    sub {
      position: relative;
      top: -10px;
    }
  }

  .pg-widget-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: -24px 0 45px;
    height: 0;
    overflow: hidden;
    transition: all .5s;
    border: solid rgb(37, 160, 225);
    border-width: 1px 0;

    .form-item {
      position: relative;
      z-index: 2;
    }

    select {
      width: 80%;
      min-width: 70px;
    }

    > .pg-widget-view-mode {
      padding: 0 15px;
    }

    > .pg-widget-bpoint {
      flex: 1 1 auto;
      padding: 0 15px 15px;
      background: transparent no-repeat left 18px top 45px scroll;
      position: relative;
      z-index: 2;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 700%;
        height: 120%;
        background-color: rgba(127,127,127,0.08);
        box-shadow: 4px 4px 9px #000;
      }

      &:nth-child(1) { &:before {background-color: #CEE4F1;top: 0;} color: #979797; }
      &:nth-child(2) { &:before {background-color: darken(#CEE4F1, 3%); top: 8px;}  color: darken(#979797, 3%); }
      &:nth-child(3) { &:before {background-color: darken(#CEE4F1, 6%); top: 16px;} color: darken(#979797, 6%); }
      &:nth-child(4) { &:before {background-color: darken(#CEE4F1, 9%); top: 24px;} color: darken(#979797, 9%); }
      &:nth-child(5) { &:before {background-color: darken(#CEE4F1, 12%);top: 32px;} color: darken(#979797, 12%);}
      &:nth-child(6) { &:before {background-color: darken(#CEE4F1, 15%);top: 40px;} color: darken(#979797, 15%);}
      &:nth-child(7) { &:before {background-color: darken(#CEE4F1, 18%);top: 48px;} color: darken(#979797, 18%);}
    }

    &.pg-open {
      height: auto;
    }

  }

  .pg-widget-view-mode {
    flex: 1 1 100%;
    position: relative;
    z-index: 3;
    background-color: #eaf6fe;
    border: solid rgb(37, 160, 225);
    border-width: 1px 0 0;
  }
}
