.submit-form {
  max-width: 400px;
  margin: auto;
}

.markdown-editor{
  max-width: 300px;
}
.markdown-editor-container{
  display: flex;
}

mat-card-title{
  color: cyan;
}

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}


.example-full-width {
  width: 100%;
}


.variable-binding,
.variable-textarea {
  width: 49%;
}

.variable-textarea {
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
  min-height: 420px;
  padding: 8px;
  transition: all 300ms ease-out;
}

.variable-textarea:hover {
  box-shadow: 0 6px 12px 3px rgba(0,0,0,.09),
  0 2px 3px 1px rgba(0,0,0,.06);
}

.variable-binding {
  display: block;
  float: right;
}

.preview {
  /*  display: block;
    float: right;*/
}

.label-style{
  font-size: -webkit-xxx-large;
  font-weight: bold;
}


.mat-mdc-card-outlined {
  background-color: var(--mat-card-outlined-container-color, var(--mat-sys-surface));
  border-radius:0;
  border-width: var(--mat-card-outlined-outline-width, 1px);
  border-color: var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant));
  box-shadow: var(--mat-card-outlined-container-elevation, var(--mat-sys-level0));
}