.message-box-container {
  transition: all 0.5s;

  &.closed {
    opacity: 0;
    height: 0;
  }

  .message-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 10px;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 45px;
    margin: 0 0 4px 0;
    border-radius: 4px;
    box-sizing: border-box;
    color: #000;
    transition: all 0.5s;

    &.success {
      background: #7ce0bb;
    }

    &.error {
      background: #ff6b6b;
    }

    &.warning {
      background: #f7bb00;
    }

    button {
      width: 30px;
      height: 45px;
      border: 0;
      cursor: pointer;
      background: none;
    }
  }

  .show-box {
    opacity: 1;
    min-height: 45px;
  }

  .hide-box {
    opacity: 0;
    height: 0;
    min-height: 0;
  }
}