/* Fix alignment of add button */
.paragraphs-tabs-wrapper .form-item .clearfix {
  margin-top: 10px;
}
/* Dialog */

.ui-dialog .ui-widget-content.paragraphs-add-dialog.ui-dialog-content {
  max-width: 600px;
  overflow: visible; /*make sure descriptions are visible when long*/
}

/* -- List */

.paragraphs-add-dialog .paragraphs-add-dialog__list {}

/*  -- List-item */

.paragraphs-add-dialog .paragraphs-add-dialog-row {
  position: relative;
  padding: 0;
  margin: 10px 0;
}

/* -- icon */

.paragraphs-add-dialog .paragraphs-add-dialog-row__icon {
  pointer-events: none;
  display: block;
  position: absolute;
  z-index: 20;
  left: 10px;
  top: 50%;
  width: 20px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.paragraphs-add-dialog .paragraphs-add-dialog-row__icon img {
  position: absolute;
  top: 50%;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  max-height: 20px;
}

/* -- description */

.paragraphs-add-dialog .paragraphs-add-dialog-row__description {

}

.paragraphs-add-dialog .paragraphs-add-dialog-row__description__icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
  width: 32px;
  height: 100%;
  background: url('../images/info-circle.svg')  50% 50% no-repeat;
  background-size: 16px 16px;
}

.paragraphs-add-dialog .paragraphs-add-dialog-row__description__content {
  position: absolute;
  right: 30px;
  bottom: -10px;
  z-index: -1;
  opacity: 0;
  transition: margin .25s ease-out, opacity .25s ease-out;
}

.paragraphs-add-dialog .paragraphs-add-dialog-row.js-open .paragraphs-add-dialog-row__description__content {
  transition: margin .25s ease-in, opacity .25s ease-in;
  width: calc(100% - 50px);
  z-index: 30;
  padding: 8px;
  background: white;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0,0,0,.2);
  opacity: 1;
}

.paragraphs-add-dialog .paragraphs-add-dialog-row:nth-child(-n+3) .paragraphs-add-dialog-row__description__content {
  top: -10px;
  bottom: auto;
}

.paragraphs-add-dialog .paragraphs-add-dialog-row:last-child .paragraphs-add-dialog-row__description__content,
.paragraphs-add-dialog .paragraphs-add-dialog-row:nth-last-child(2) .paragraphs-add-dialog-row__description__content {
  top:  auto;
  bottom: -10px;
}

.paragraphs-add-dialog .paragraphs-add-dialog-row .paragraphs-add-dialog-row__description__content:before {
  content: '';
  display: none;
  position: absolute;
  right: -11px;
  bottom: 16px;
  border-left: 6px solid white;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid transparent;
}

.paragraphs-add-dialog .paragraphs-add-dialog-row:nth-child(-n+3) .paragraphs-add-dialog-row__description__content:before {
  bottom: auto;
  top: 17px;
}

.paragraphs-add-dialog .paragraphs-add-dialog-row:last-child .paragraphs-add-dialog-row__description__content:before,
.paragraphs-add-dialog .paragraphs-add-dialog-row:nth-last-child(2) .paragraphs-add-dialog-row__description__content:before {
  bottom: 16px;
  top: auto;
}

.paragraphs-add-dialog .paragraphs-add-dialog-row.js-open .paragraphs-add-dialog-row__description__content:before {
  display: block;
}

/* -- button */

ul.paragraphs-add-dialog-list input.field-add-more-submit {

  margin: 0;
  padding-left: 40px;
  padding-right: 40px;
  background-position: 0 0;
  background-size: auto;
}

/* Description */

/* -- default/when not collapsed -- */
.paragraph-top .paragraph-summary .paragraph-type-description {
  font-style: italic;
}

/* -- when collapsed -- */
.paragraph-top .paragraph-summary .paragraphs-collapsed-description + .paragraph-type-description {
  display: none;
}
