#drupal-off-canvas {
  color: #ddd;
  background: #f7f8f9;
  max-width: fit-content;
  max-width: -webkit-fill-available;
}
#drupal-off-canvas *,
#drupal-off-canvas *:not(div),
#drupal-off-canvas *:not(.form-submit) {
  color: #314b5a;
}

// listes de layout.
.layout-selection {
  background: #575858 !important;
  .list-group-item {
    position: relative !important;
    &::before {
      content: "" !important;
      position: absolute !important;
      top: 0 !important;
      left: -20px !important;
      bottom: 0 !important;
      right: auto !important;
      width: 0 !important;
      background: #89caeb !important;
      display: block !important;
    }
    &:hover {
      background: rgba(137, 202, 235, 0.14) !important;
      &::before {
        width: 3px !important;
      }
    }
    a {
      text-decoration: none !important;
    }
  }
  img {
    max-width: 100% !important;
    max-height: 160px !important;
  }
}
//
.ui-dialog-content {
  input:not(.form-submit) {
    background: #fff !important;
    border: 1px solid #d1d1d1 !important;
    border-radius: 3px !important;
  }
}
//@at-root
.ui-dialog.ui-dialog-position-side {
  left: auto !important;
  right: 0 !important;
  width: 400px !important;
  .ui-dialog-titlebar {
    .ui-dialog-title {
      color: #587fa1 !important;
      display: flex;
    }
  }
}
.layout-builder {
  &-block {
    background-color: #fff !important;
    color: #333 !important;
  }
  &__link {
    &--add {
      &:hover {
        .visually-hidden {
          width: auto;
          height: auto;
          overflow: visible;
          clip: auto;
          display: inline-block;
          padding: 0 10px;
          color: #333;
          font-size: 90%;
          font-style: italic;
        }
      }
    }
  }
  &__add-section {
    position: relative;
    z-index: 99;
  }
}
