.mime-form h1,
.mime-form h2,
.mime-form h3,
.mime-form h4,
.mime-form h5,
.mime-form h6 {
	padding-bottom: 0;
	padding-top: 10px;
}

.mime-form-wrap {
	display: flex;
	flex-wrap: wrap;
	max-width: 1024px;
	margin: 20px auto;	
  border: 2px solid black;
  border-radius: 10px;
  overflow: hidden;
}

.mime-form p {
	font-size: small;
	padding-bottom: 0px;
}

/* move the last row down to the bottom of the .mime-form container */
.mime-form > :where( div ):last-of-type:not(:first-of-type) {
	margin-top: auto;
}

.mime-form {
/*  max-width: 768px; */
  margin: 0 auto;
  padding: 20px;
/*  border: 2px solid black; */
  border-radius: 10px;
  background-color: #e9f3fb;
  flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mime-form-row {
  display: flex;
  flex-wrap: wrap;
}

.mime-form-field {
  padding: 0 10px;
  margin-bottom: 1em;
  width: 100%;
  box-sizing: border-box;
}

.mime-form-col-6 {
  width: 100%;
}
.mime-form-col-12 {
  width: 100%;
}

.mime-element-input input:disabled {
	background-color: unset;	
}

.mime-element-input input,
.mime-element-password input {
	width: 80%; 
	padding: 8px !important;
	margin-bottom: 10px !important;
}

.mime-element-input input[type="checkbox"] {
	width: auto;
}

.mime-element-password .password-wrapper {
	width: 100%;
}

.mime-element-select select {
	padding: 8px;
	width: 80%; 
	margin-bottom: 10px;
}

.mime-element-submit button {
	padding: 5px 10px;
	font-size: 20px;
	font-weight: 600;
}

@media (min-width: 768px) {
  .mime-form-col-6 {
    width: 50%;
  }
  .mime-form-field:first-child {
    padding-left: 0;
  }
  .mime-form-field:last-child {
    padding-right: 0;
  }
}

.mime-text-center {
	display: block;
  text-align: center;
}
.mime-text-left {
	display: block;
  text-align: left;
}
.mime-text-right {
	display: block;
  text-align: right;
}

.mime-form-response-actions {
	margin-top: 20px; 
	text-align: center;
}

/* fade-in/out switchable elements: gateway instructions */
[data-target] {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

[data-target].visible {
  opacity: 1;
  max-height: 1000px; /* big enough to show content */
}

.mime-checkbox,
.mime-radio-button {
	transform: scale( 1.5 );
}

/* --- also in admin.css --- */
.mime-fieldset {
  border: 1px solid #ccd0d4;
  padding: 1em;
  background: #f9f9f9;
}

.mime-fieldset legend {
  font-weight: 500;
  padding: 0 0.5em;
}

label.mime_form_label {
	
	padding: 5px;
	font-size: 20px;
	font-weight: 500;
	color: #333;
	display: block;			/* force the label onto it's own line .. will stack vertically with siblings */
}

.mime-form input {
	border: 1px solid #bbb;
}