.overlay {
  position: fixed;
  background-color: rgba(50,50,50,0.75);
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay--disconnected {
  text-align: center;
  .overlay__item {
    max-width: 750px;
  }
}

.overlay__item {
  position: fixed;
  z-index: 101;
  top: 50%;
  left: 50%;
  width: 90%;
  max-height: 90%;
  background: #fff;
  border: 1px solid $border-color;
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
  padding: 20px;
  overflow-y: auto;
  transform: translateY(-50%) translateX(-50%);
  @include desktop {
    padding: 30px 50px;
    max-width: 1100px;
  }
  .model-content {
    padding-left: 0;
    padding-right: 0;
    min-height: auto;
  }
  .model__attribute {
    margin-right: 0;
  }
  .model__attribute-content {
    padding-top: 0;
    min-height: auto;
  }
  .group__item {
    padding: 6px 0;
  }
  .group__button {
    top: 0;
    margin: 6px 0 0 0 !important;
    height: auto;
    border: none !important;
  }
}

.overlay__title {
  margin-bottom: 20px;
}

.group {
  &__item {
    border-bottom: 1px solid $border-color;
    padding: ($base-spacing / 2) 0;
    position: relative;

    &:last-child {
      margin-bottom: $base-spacing;
    }
  }

  &__title {
    margin-right: 50px;
  }

  &__button {
    position: absolute;
    right: 0;
    top: 38px;
  }
}

@-webkit-keyframes new {
  0%   { background: rgba($main-color, .15); }
  100% { background: #fff; }
}
@-moz-keyframes new {
  0%   { background: rgba($main-color, .15); }
  100% { background: #fff; }
}
@-o-keyframes new {
  0%   { background: rgba($main-color, .15); }
  100% { background: #fff; }
}
@keyframes new {
  0%   { background: rgba($main-color, .15); }
  100% { background: #fff; }
}

.newly-created {
  animation: new 2s;
}