body,
html {
  background-color: #fff;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 32px;
  min-height: calc(100vh);
  max-width: 768px;
  min-width: 320px;
  width: 100% !important;
}

.container.in-client {
  min-height: calc(100vh - 28px);
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.buttons {
  text-align: center;
}

.btn,
.btn-flat {
  margin-right: 12px;
}

.btn:last-child,
.btn-flat:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 600px) {
  .buttons {
    margin-top: 32px;
    display: flex;
    flex-direction: column-reverse;
  }

  .btn,
  .btn-flat {
    margin-right: 0;
    margin-bottom: 12px;
    height: 48px !important;
    width: 100% !important;
  }

  .btn:first-child,
  .btn-flat:first-child {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 601px) {
  .container {
    background-color: #fff;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%),
      0 1px 5px 0 rgb(0 0 0 / 20%);
  }
  body,
  html {
    background-color: #eee;
  }
}