.media-container-component,
.mt-repeater-main-container,
.mt-repeater-section {
  width        : 100%;
  background   : $lightgrey;
  border       : 1px solid $lightblue;
  border-radius: 5px;
  padding      : 20px;
  margin-bottom: 20px;

  position     : relative;
}

.mt-repeater-section + .mt-repeater-section {
  margin-top: 20px;

}

.media-component,
.mt-repeater-actions {
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.mt-repeater-section-header {
  position: absolute;
  top     : -16px;
  right   : 10px;

  svg {
    background: $lightgrey;

    &:focus {
      border: 1px solid $red;
    }
  }

  path {
    fill: $red;
  }

  .m-widget__header--delete {
    width : 30px;
    height: 30px;

    cursor: pointer;

  }
}

.repeater-container-columns {
  padding   : 0;
  border    : 0 solid transparent;
  background: transparent;

  label:focus {
    color: $red;
  }

  .mt-repeater-sections,
  .mt-repeater-sections > div {
    width          : 100%;
    display        : flex;
    justify-content: space-between;
    flex-wrap      : wrap;
  }

  .mt-repeater-section + .mt-repeater-section {
    margin-top: 0;

  }

  .mt-repeater-section {
    width        : calc(100% - 20px);
    border       : 0 solid transparent;

    padding      : 60px 20px 20px;

    background   : $white;

    box-shadow   : 0 2px 4px 0 $peacock-blue-10;

    margin-bottom: 40px;

    @include media-min(xl){
      width        : calc(50% - 20px);
    }
  }

  .mt-field + .mt-field {
    margin-top: 20px;
  }

  .m_editor__area {
    border: 1px solid $mediumblue;
  }

  input {
    border: 1px solid $mediumblue;
  }

  .m_editor__toolbar--view {
    display: none;

  }

  select {
    @include rem-size(10);
    margin-right: 0;
  }
}

.repeater-container-columns .mt-repeater {
  display   : flex;
  flex-wrap : wrap;
  background: transparent;

  .mt-repeater-section-header {
    top: 10px;

    svg {
      background: transparent;
    }
  }

  .mt-repeater-actions {
    width        : calc(50% - 20px);
    height       : 300px;
    background   : $white;
    box-shadow   : 0 2px 4px 0 $peacock-blue-10;
    border       : 0 solid transparent;
    border-radius: 5px;
    padding      : 20px;
    margin-bottom: 20px;

    position     : relative;
  }
}

.btn-duplicate{
  text-align: right;
}
.mt-repeater-section-footer{
  display: flex;
  justify-content: flex-end;
  align-items: center;

  span{
    text-indent: -99999px;

    width: 20px;
    height: 20px;

    border: 2px solid $darkblue;
  }

  svg{
    background: $white;
    border-radius: 50%;

    transform: translateX(10px);
  }
}