form {
  max-width: 500px;
  margin: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
}

mat-form-field {
  width: 100%;
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

label {
  font-size: small;
}

.ng-dirty.ng-invalid,
.ng-touched.ng-invalid {
  border-color: red;
  border-width: 1px;
}

.error {
  font-size: x-small;
  color: red;
}

.nav {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .nav-btn {
    gap: 10px;
    padding: 10px;
    cursor: pointer;
  }
}

.preview, .main {
  display: inline-block;
  vertical-align: top;
}

.preview {
  width: 300px;
  margin: 20px;
}


.main {
  width: calc(100% - 340px);
}

.button-container.left, .button-container.right {
  display: inline-block;
  width: 50%;
}

.button-container.right {
  text-align: right;
}
