.eddbk-shrinked-page {
  .wrap {
    max-width: 785px;
    //padding-right: 20px;
    //margin: 1rem auto;

    @include breakpoint(mobile) {
      //padding-right: 10px;
    }
  }
  //margin: 0 auto;
}

.inline-editor {
  background-color: #fff;
}

.editor-transition {
  &-enter, &-leave-to {
    top: 0;
    width: 100%;
    position: absolute;
    opacity: 0;
    transform: translateX(20px);
  }

  &-enter-active, &-leave-active {
    transition: all .25s ease;
  }
}
.page-transition {
  &-enter, &-leave-to {
    top: 0;
    position: absolute;
    opacity: 0;
    transform: translateX(-20px);
  }

  &-enter-active, &-leave-active {
    transition: all .25s ease;
  }
}

.rich-row {
  &s {
    padding: 1rem 0;
    @include breakpoint(mobile) {
      padding-top: 0;
    }
    &--no-padding {
      padding: 0;
    }
    &.loading-container {
      min-height: 5rem;
    }
  }

  position: relative;
  display: flex;
  padding: 1.5rem .5rem;
  margin-bottom: 2px;
  //border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 4px;
  background-color: #fff;
  align-items: center;

  @include breakpoint(mobile) {
    padding: .75rem;
    margin-bottom: 4px;
    display: block;
  }

  &--cta {
    text-align: center;
    display: block;
    padding: .75rem;
    border-radius: 4px;
    border: 2px dashed #dadada;
    margin-bottom: 0.5rem;
    font-size: 14px;
    cursor: pointer;
    &:hover {
      background-color: #f3f3f3;
    }
    &:active {
      background-color: #efefef;
    }
  }

  &--condensed {
    padding: .75rem .5rem;
  }

  &--smaller {
    border-radius: 0;
    padding: .5rem 0;

    & + .rich-row--smaller {
      border-top: 1px solid #eee;
    }

    .rich-row__column {
      padding: 0 .25rem !important;
      &:first-child {
        padding-left: 0 !important;
      }
      &:last-child {
        padding-right: 0 !important;
      }
    }
  }

  &.many {
    margin-bottom: 6px;
    &:before {
      display: block;
      content: '';
      position: absolute;
      top: 100%;
      left: 4px;
      border-radius: 0 0 4px 4px;
      width: calc(100% - 8px);
      opacity: .5;
      height: 4px;
      background-color: #fff;
    }
    //max-width: 750px;
  }

  &__column {
    padding: 0 1rem;

    &--2 {
      flex-basis: 25%;
    }

    &--4 {
      flex-basis: 40%;
    }

    &--5 {
      flex-basis: 50%;
    }

    &--6 {
      flex-basis: 60%;
    }

    & + .rich-row__column {
      padding-left: .5rem;
    }

    @include breakpoint(mobile) {
      font-size: 14px;
      padding: 0;

      &.mobile-collapsed + .rich-row__column {
        padding-top: 0;
      }

      & + .rich-row__column {
        padding-left: 0;
        padding-top: .5rem;
      }
    }
  }

  &__wide-anchor {
    width: 28.5%;
    flex-shrink: 0;

    @include breakpoint(mobile) {
      width: 100%;
    }
  }

  &__normal-anchor {
    width: 18.5%;
    flex-shrink: 0;

    @include breakpoint(mobile) {
      width: 100%;
    }
  }

  &__header {
    opacity: .6;
    font-size: .8em;
    @include breakpoint(mobile) {
      font-size: 14px;
    }
  }

  &__info {
    font-size: .8em;
    @include breakpoint(mobile) {
      font-size: 14px;
    }
  }

  &__title {
    font-size: 1rem;
    line-height: 1.55;
  }

  &__actions {
    margin-left: auto;
    @include breakpoint(mobile) {
      display: flex;
      align-items: center;
      .button-group {
        .button {
          margin-bottom: 0;
        }
        margin-left: auto;
      }
    }

    .button-icon {
      padding: 2px 4px;
      @include breakpoint(mobile) {
        padding: 4.5px 6px;
      }
    }
  }
}

.service-item-color {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 100px;
  margin-right: 2px;
}

.empty-state {
  text-align: center;
  padding: 5rem 12rem;

  @include breakpoint(mobile) {
    padding: 2rem 1rem;
  }

  &--smaller {
    padding: 2rem;
  }

  &__title {
    font-size: 16px;
    padding-bottom: 1rem;
  }

  &__text {
    font-size: 14px;
    opacity: .8;
    padding-bottom: 1rem;
  }
}

.service-staff {
  padding: 2px 0;
  display: flex;
  &__image {
    height: 20px;
    border-radius: 100px;
    margin-right: 4px;
    flex-shrink: 0;
  }
  &__name {

  }
}