.mmui-err-card {
  background-color: $mm-neutral-white;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 475px;
  padding: 40px;
  box-shadow: $mm-boxshadow;
  margin: 0 auto;
}

.mmui-err-icon-holder {
  flex: 1 1 20%;
  font-size: 32px;
  margin-right: 22px;
  width: 72px;
  margin-top: 55px;
}

.mmui-err-icon {
  width: 72px;
  height: 72px;
  border-radius: 36px;

  i {
    font-size: 36px;
    position: relative;
    top: 25%;
    left: 25%;
    color: $mm-neutral-white;
    text-align: center;
    width: 50%;
  }

  &.mmui-client-err-icon {
    background-color: $mm-core-digital-blue-70;
  }

  &.mmui-server-err-icon {
    background-color: $mm-core-digital-blue-70;
  }

  &.mmui-forbidden-icon {
    background-color: $mm-core-digital-blue-70;
  }
}

// for Data Mode:
.mmui-mode-container {
  .mmui-err-icon {
    margin: 0 auto;
    margin-bottom: 2rem;
  }
  .mmui-body-copy {
    text-align: center;
    margin-bottom: 1rem;
  }
  .mmui-sm-copy {
    text-align: center;
    margin-bottom: 1rem;
  }
  .mmui-err-link-margin {
    text-align: center;
    font-size: 1.4rem;
  }
}

.mmui-err-content {
  color: $mm-neutral-black;
  flex: 12 1 auto;
  width: 280px;

  h3 {
    margin-bottom: 1rem;
  }

  p.mmui-body-copy {
    margin-bottom: 1rem;
  }

  .mmui-err-link-margin {
    margin-top: 3rem;
  }
}

@media (max-width: 767.98px) {
  .mmui-err-card {
    width: 300px;
  }

  .mmui-err-icon {
    margin: 0 auto;
  }

  .mmui-err-icon-holder {
    font-size: 32px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 22px;
  }
}