.card--stream.social-post-album--form {
  form {
    .tabledrag-toggle-weight {
      display: none;
    }

    .form--post-create .field--name-field-post-image {
      width: 100%;
    }

    > .field--name-field-post-image.post-images-loaded {
      width: 100%;
    }

    .table-responsive + .image-widget:not(.hidden) {
      position: absolute;
      display: block;
      top: calc(1.25rem + 1px);
      left: 1.25rem;
      width: calc(50% - 1.75rem);
      border: 1px dashed #adadad;
      margin: -1px 0;
      z-index: 1;
      border-radius: .5rem;

      [dir='rtl'] & {
        left: auto;
        right: 1.25rem;
      }

      @media (min-width: 600px) {
        width: calc((100% / 3) - 1.5rem);
      }

      @media (min-width: 1200px) {
        width: calc(25% - 1.5rem);
      }

      .js-hide.form-submit[disabled] {
        position: absolute;

        .ajax-throbber {
          top: 5px;
          left: 15px;
        }
      }

      input[type='file'] {
        cursor: pointer;
      }

      input[type='file'],
      .add-image-help {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      .add-image-help {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;

        svg {
          width: 30px;
          height: 30px;
          margin-bottom: .5rem;

          @media (max-width: 599px) {
            width: 24px;
            height: 24px;
            margin-bottom: 0;
          }
        }

        .text {
          font-size: .75rem;

          @media (max-width: 599px) {
            display: none;
          }
        }
      }

      input[type='file'] {
        opacity: 0;
        z-index: 2;
      }

      img {
        visibility: hidden;
        max-height: 220px;
      }

      > .messages {
        display: none;
      }

    }

    table {
      display: block;
      padding: 1rem 1rem 0;
      background: #f3f3f3;
      margin-bottom: 1rem;
      min-height: 176px;

      @media(min-width: 600px) {
        padding: 1.25rem 1.25rem 0;
      }
    }

    thead {
      display: none;
    }

    tbody {
      display: flex;
      align-items: flex-start;
      margin: 0 -.5rem;
      flex-wrap: wrap;

      > tr {
        position: relative;
        display: block;
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 1rem;
        padding: 0 .5rem;
        background: none;

        @media (min-width: 600px) {
          flex: 0 0 calc(100% / 3);
          max-width: calc(100% / 3);
        }

        @media (min-width: 1200px) {
          flex: 0 0 25%;
          max-width: 25%;
        }

        td {
          padding: 0;
          border: none;
        }

        .image-widget {
          margin-bottom: 0;
        }

        .btn {
          position: absolute;
          top: .25rem;
          right: .75rem;
          width: 24px;
          height: 24px;
          padding: 0;
          border-radius: 50% !important;
          background: rgba(#adadad, .8);
          font-size: 0;
          transition: background .2s linear;

          &:hover,
          &:focus {
            background: #adadad;
          }

          &:after,
          &:before {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            top: 10px;
            left: 3px;
            background: #fff;
          }

          &:after {
            transform: rotate(45deg);
          }

          &:before {
            transform: rotate(-45deg);
          }
        }

        img {
          border-radius: .5rem;
          margin-bottom: -6px;
        }

        .image-widget {
          margin: 0;
          padding: 0;
        }

        .preview {
          box-shadow: none;
        }

        .image-widget-data,
        .tabledrag-handle,
        .btn--post-remove-image {
          display: none;
        }

        &:first-child {
          margin-left: 50%;

          [dir='rtl'] & {
            margin-right: 50%;
            margin-left: 0;
          }

          @media (min-width: 600px) {
            margin-left: calc(100% / 3);

            [dir='rtl'] & {
              margin-left: 0;
              margin-right: calc(100% / 3);
            }
          }

          @media (min-width: 1200px) {
            margin-left: 25%;

            [dir='rtl'] & {
              margin-left: 0;
              margin-right: 25%;
            }
          }
        }
      }
    }

    #edit-field-album-wrapper {
      display: flex;
      width: 100%;
      margin-top: -1rem;
      padding: 0 1.25rem .25rem;
      background: #f3f3f3;
      border-radius: 0;

      @media(max-width: 599px) {
        flex-wrap: wrap;
      }

      > * {
        flex: 0 0 100%;
        max-width: 100%;

        @media(min-width: 600px) {
          flex: 0 0 50%;
          max-width: 50%;
          padding: 0.5rem;

          &:nth-child(1) {
            padding-left: 0;
          }

          &:nth-child(2){
            padding-right: 0;

            .help-block {
              position: relative;
              width: 200%;
              left: calc(-100% - 1rem);
            }
          }
        }
      }

      .select-wrapper,
      select,
      .form-control {
        @media(max-width: 599px) {
          max-width: 100%;
        }
      }
    }

    .container-post-image {
      > [id*='edit-field-post-image'] > [id*='edit-field-post-image'] {
        position: relative;
      }
    }

    .form-submit {
      position: relative;

      .post-loading {
        display: none;
      }

      &.post-loading-active {
        .text {
          visibility: hidden;
        }

        .post-loading {
          position: absolute;
          display: block;
          width: 40px;
          height: 40px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;

          .loader {
            width: 40px;
            height: 40px;
            transform: rotate(-90deg);
            stroke-linecap: round;
            stroke-width: 6;
            fill: none;

            .internal-circle {
              stroke: #fff;
              stroke-dashoffset: 0;
              transform-origin: center;
              stroke-dasharray: 187;
              animation: internal 1s ease-in-out infinite;
            }
          }

          @keyframes internal {
            0% {
              stroke-dashoffset: 187;
            }
            25% {
              stroke-dashoffset: 80;
            }
            100% {
              stroke-dashoffset: 187;
              transform: rotate(360deg);
            }
          }
        }
      }
    }
  }
}
