/* Small additions on top of the Duegho template so myOgaStudio's existing
   auth/contact form markup (error placeholders, dropdown selects) matches
   the template's visual language. Intentionally kept minimal. */

/* myOgaStudio inline-JS error placeholders (unchanged workflow, just restyled) */
.loadingHidden { display: none; }
.font-size20 { font-size: 20px; }
.font-1xx { font-size: 1.5rem; }
.margin-bottom10 { margin-bottom: 10px; }
.margin-bottom20 { margin-bottom: 20px; }
.margin-bottom15m { margin-bottom: -15px; }
.margin-top25 { margin-top: 25px; }

/* Bordered <select> to match the template's bordered <input>/<textarea> boxes
   (the template only ships a compact pill-style select for toolbars/footers) */
.formbox-body .formgroup.custom-selects { position: relative; }
.formbox-body .formgroup select {
    width: 100%;
    border: #4F5368 solid 1px;
    border-radius: 10px;
    padding: 6px 40px 6px 22px;
    height: 68px;
    font-size: 21px;
    font-weight: 400;
    color: #4F5368;
    background: none;
}
.formbox-body .formgroup.custom-selects:after {
    content: '';
    border-top: solid 6px #4F5368;
    border-right: solid 6px transparent;
    border-left: solid 6px transparent;
    position: absolute;
    right: 24px;
    top: 50%;
    margin-top: -3px;
}

/* Header logo: the template ships an already-small logo.svg, ours is a large
   raster (logo300.png) with no intrinsic size constraint from the template CSS */
#logo img { height: 40px; width: auto; }

/* Buttons full-width, matching the inputs/selects they sit next to */
.formbox-body .formgroup > .cmbutton,
.formbox-body .formgroup > button.cmbutton {
    display: block;
    width: 100%;
    text-align: center;
}

/* Floating label: the template's own responsive.css disagrees with itself across
   breakpoints on where '.has-content span' should sit (one of its own rules is
   even malformed — a `left:` declaration with no value) — the cascade ends up
   leaving the label sitting on top of whatever the user is typing. Decisive,
   viewport-independent override so the label reliably clears the typed text. */
.formgroup.has-content > span {
    top: -22px !important;
    left: 16px !important;
    font-size: 13px !important;
    padding: 0 6px !important;
}
.textareaformgroup.has-content > span {
    top: -22px !important;
    left: 10px !important;
    font-size: 13px !important;
}