.field {
  margin-bottom: 1em;
}

.margins-section {
  border-radius: 4px;
}

.margin-mode-selector {
  margin: 1em 0;
  display: flex;
  gap: 1em;
}

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  padding: 0.25em 0.5em;
  border: 1px solid #535f7a;
  border-radius: 4px;
  cursor: pointer;
}

input[type="radio"]:checked + label {
  background: #535f7a;
}

.margin-inputs {
  margin-top: 1em;
}

.margin-custom-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  width: 75%;
  margin: 0 auto;
}

input[type=number] {
  height: auto;
  width: 100px !important;
  margin: 0 !important;
  padding: 0.5em;
  font-size: 0.8em;
}
.margin-custom input[type=number] {
  text-align: center;
}

.margin-preview {
  padding: 1em 2em;
  border: 2px dashed #999;
  background: #f5f5f5;
}

.help-text {
  display: block;
  margin-bottom: 1em;
  color: #666;
  text-align: center;
}

[aria-busy=true]:not(input,select,textarea,html)::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #000000d1;
  background-position: center;
  background-size: 4%;
}

[type=checkbox]~label:not(:last-of-type), [type=radio]~label:not(:last-of-type) {
  margin-inline-end: 0.2em;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

main {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  padding: 30px;
  gap: 30px;
  font-size: 18px;
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#form,
#preview,
#welcome {
  flex: 1 1 400px;
}

h1 {
  margin-top: 0;
}

#welcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  opacity: 0.5;
}

#welcome img {
  width: 400px;
  margin: -75px 0;
}

#welcome ul {
  width: 400px;
}

.alert {
  padding: 1em;
  border-radius: 4px;
  background: #f5f5f5;
  border: 1px solid #999;
  color: #666;
}
.alert-success {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}
.alert-danger {
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

input[type=submit], a[role=button] {
  height: auto !important;
  padding: 0.5em !important;
}