/* Bootstrap form classes in the marketing look, for the older builder pages (ViewData["LegacyForms"]).
   Loaded after bootstrap.min.css and marketing.css; everything is scoped to the marketing page body. */
.mk-page .container { max-width: none; padding-left: 0; padding-right: 0; }
.mk-page .bg-white { background: transparent !important; }
.mk-page h4, .mk-page h5 { font-family: var(--mk-serif); font-variation-settings: "opsz" 72, "WONK" 0; font-weight: 550; letter-spacing: -.02em; color: var(--mk-graphite); margin: 1.6em 0 .6em; }
.mk-page h4 { font-size: 1.45rem; }
.mk-page h5 { font-size: 1.2rem; }
.mk-page #mainForm { background: var(--mk-card); border-radius: 16px; padding: 28px; box-shadow: 0 0 0 1px var(--mk-rule), 0 30px 50px -40px #213A3099; max-width: 980px; }
.mk-page #mainForm > :first-child h4:first-child, .mk-page #mainForm h4:first-of-type { margin-top: .4em; }
.mk-page .form-control, .mk-page .form-select {
  border: 1px solid var(--mk-rule); border-radius: 8px; background-color: var(--mk-paper); color: var(--mk-graphite);
  font: 400 16px/1.4 var(--mk-sans); min-height: 50px;
}
.mk-page .form-control:focus, .mk-page .form-select:focus { border-color: var(--mk-fern); background-color: #fff; box-shadow: 0 0 0 3px #2F5D4722; }
.mk-page .form-floating > .form-control, .mk-page .form-floating > .form-select { height: calc(3.5rem + 2px); }
.mk-page .form-floating > label, .mk-page label { color: var(--mk-muted); font-family: var(--mk-sans); }
.mk-page .form-check-input:checked { background-color: var(--mk-fern); border-color: var(--mk-fern); }
.mk-page .form-text, .mk-page .text-muted, .mk-page .small { color: var(--mk-muted) !important; }
.mk-page hr { border-color: var(--mk-rule); opacity: 1; }
.mk-page .btn { font: 600 16px var(--mk-sans); border-radius: 8px; padding: 12px 24px; }
.mk-page .btn-primary { background: var(--mk-fern); border-color: var(--mk-fern); color: #fff; }
.mk-page .btn-primary:hover, .mk-page .btn-primary:focus { background: var(--mk-graphite); border-color: var(--mk-graphite); }
.mk-page .btn-secondary, .mk-page .btn-outline-primary, .mk-page .btn-outline-secondary { background: transparent; border: 1px solid var(--mk-rule); color: var(--mk-graphite); }
.mk-page .alert { background: var(--mk-card); color: var(--mk-graphite); border: 0; border-left: 4px solid var(--mk-pencil); border-radius: 0 10px 10px 0; box-shadow: 0 0 0 1px var(--mk-rule); }
.mk-page .table { color: var(--mk-graphite); }
@media (max-width: 560px) { .mk-page #mainForm { padding: 20px 16px; } }
