.ac-drag-option-wrapper {
  display: grid;
  grid-template-columns: calc(50% - 7.5px) calc(50% - 7.5px);
  width: 100%;
  grid-gap: 15px;
  padding: 20px;

  .list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    h5 {
      font-size: 16px;
      font-family: $font-paragraph;
      color: $color-heading;
      font-weight: 500;
    }
  }

  .dragable-list-items {
    background-color: $color-border;
    border-radius: 4px;
    max-height: 400px;

    .is-highlight {
      background-color: $white-100;
      border: 1px dashed $gray-80;
      border-radius: 4px;
      margin: 4px 0;
      overflow: hidden;
    }

    ul {
      li {
        padding-left: 40px;
        padding-top: 4px;
        padding-bottom: 4px;

        &.is-not-change {
          background-color: $color-border;
          margin-left: -40px !important;
          padding-left: 80px;
        }

        span,
        strong {
          font-size: 1rem;
          color: $color-heading;
          padding: 0 5px;
          font-weight: 500;
          display: block;

          img {
            padding-right: 10px;
            opacity: 0;
            visibility: hidden;
          }

          &.is-dragable {
            height: 30px;
            padding-left: 15px !important;
            border-radius: 2px;
            display: grid;
            grid-template-columns: 25px auto auto;
            align-items: center;
            user-select: none;
            margin-left: -35px;

            &:hover {
              background-color: $white-100;
              box-shadow: $ac-shadow-1;
              cursor: move;

              img,
              .dragable-options {
                opacity: 1;
                visibility: visible;
              }
            }

            strong {
              padding-left: 0;
            }

            input[type="text"] {
              background-color: $color-border;
              border: none;
              font-weight: 500;
              padding: 4px 5px;
              margin-left: -4px;
              line-height: 1;
              border-radius: 2px;

              &:focus {
                outline: none;
              }
            }

            .dragable-options {
              display: inline-flex !important;
              justify-content: flex-end;
              align-items: center;
              opacity: 0;
              visibility: hidden;

              .dragable-item-edit {
                padding: 1px 5px;
              }

              .move-options {
                padding-left: 10px;
                border-left: 1px solid #d7d8da;
                margin-left: 10px;

                button {
                  border: none;
                  background-color: transparent;
                  display: block;
                  cursor: pointer;
                  padding: 0 5px;
                  margin: 0;
                  height: auto;
                  line-height: 0;
                  font-size: 11px;

                  &:hover {
                    color: #a4afb7;
                  }
                }
              }
            }
          }
        }

        ul {
          li {
            span,
            strong {
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}

/****************************************
Responsive Classes
*****************************************/
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
  .ac-drag-option-wrapper {
    grid-template-columns: 100%;

    .dragable-list-items {
      ul {
        min-width: 360px;

        li {
          padding-left: 30px;

          &.is-not-change {
            margin-left: -30px !important;
            padding-left: 60px;
          }

          &.is-dragable {
            height: auto;
          }
        }
      }
    }
  }
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
  .ac-content-header.drag-n-drop {
    grid-template-columns: 240px auto;
  }

  .ac-drag-option-wrapper {
    grid-template-columns: 100%;

    .dragable-list-items {
      ul {
        min-width: 360px;

        li {
          padding-left: 30px;

          &.is-not-change {
            margin-left: -30px !important;
            padding-left: 60px;
          }

          &.is-dragable {
            height: auto;
          }
        }
      }
    }
  }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
  .ac-content-header.drag-n-drop {
    grid-template-columns: 240px auto;
  }

  .ac-drag-option-wrapper {
    grid-template-columns: 100%;

    .dragable-list-items {
      ul {
        min-width: 360px;

        li {
          padding-left: 30px;

          &.is-not-change {
            margin-left: -30px !important;
            padding-left: 60px;
          }

          &.is-dragable {
            height: auto;
          }
        }
      }
    }
  }
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ac-content-header.drag-n-drop {
    grid-template-columns: 240px auto;
  }
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
}