form input, form section, form textarea, form select,
.medium-editor-element
{
    border      : 1px solid var(--table-header-blue);
    background  : var(--white);
    font-family : inherit;
    font-size   : var(--fs-secondary);
    width       : 100%;
    padding     : 8px;
    margin      : 7px 0;
}

select {
    border-radius: 0;
    outline : none;
}

select:focus::-ms-value {
    background-color : transparent;
}

form input[type=checkbox], form input[type=radio] {
    width: auto;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color   : var(--table-header-blue);
    opacity : 1; /* Firefox */
}

fieldset legend {
    color            : var(--black);
    background-color : var(--table-header-blue);
    width            : 100%;
    padding          : 8px;
    margin           : 7px 0;
    font-weight      : bold;
}

button, a[role=button], a.btn {
    background  : var(--white);
    font-family : inherit;
    font-size   : var(--fs-secondary);
    padding     : 8px;
    margin      : 20px 15px;
}

button:last-child {margin-right : 0;}
button:first-child {margin-left : 0;}

button.btn, a.btn {
    display         : inline-block;
    border          : 1px solid var(--marine-blue);
    padding         : 0.5em 1em;
    line-height     : inherit;
    text-align      : center;
    text-decoration : none;
    cursor          : pointer;
}

button.btn-primary, a.btn-primary {
    color            : var(--white);
    background-color : var(--marine-blue);
}

button.btn:hover, a.btn:hover {
    opacity: 0.7;
}

button.btn:focus-visible, a.btn:focus-visible {
    outline        : 0.125em solid var(--marine-blue);
    outline-offset : 0.125em;
}

/*due to issues in Safari:*/
/*noinspection CssOptimizeSimilarProperties*/
button.btn-promo {
    margin-top          : 20px;
    margin-bottom       : 20px;
    position            : relative;
    height              : 80px;
    width               : 302px;
    line-height         : 1.33;
    color               : var(--black);
    padding             : 0 calc(18px) 0 calc(80px + 18px);
    background-color    : var(--pale-grey);
    background-repeat   : no-repeat;
    background-position : bottom left;
    background-image    : url("/images/button_promo-0ffbb4e451d69b518d7307e817d51f75.svg");
    background-size     : 83px 80px;
    border              : none;
    text-align          : center;
}

button[type=reset] {
    border: none;
}
button[type=reset]::before {
    content: "◀︎ ";
}

/*
 * Icon-only action target that reads as a link, for row actions such as
 * show, edit, delete and end-handicap.
 *
 * Anchors and buttons share one definition so every icon target keeps the
 * same 24x24 hit area. Anchors inherit 18px from `body` while buttons get
 * 16px from `button, a[role=button]`, so the font size is pinned to 1rem:
 * without it `1.5em` would resolve to 27px on anchors and 24px on buttons
 * and icons within one table row would no longer line up.
 */
button.btn-icon,
a.btn-icon {
    font-size       : 1rem;
    height          : auto;
    width           : auto;
    /* WCAG 2.5.8 (Level AA) floor of 24x24 CSS px; a bare glyph is 16px */
    min-width       : 1.5em;
    min-height      : 1.5em;
    margin          : 0;
    padding         : 0;
    /* centre the glyph inside the min-* box on every browser */
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    line-height     : inherit;
    text-align      : inherit;
    background-color: transparent;
    background-image: none;
    color           : var(--marine-blue);
    text-decoration : none;
    cursor          : pointer;
}

button.btn-icon:hover,
a.btn-icon:hover {
    opacity: 0.7;
}

button.btn-icon:focus-visible,
a.btn-icon:focus-visible {
    outline        : 0.125em solid var(--marine-blue);
    outline-offset : 0.125em;
}

/*
 * Labelled submit buttons inside an inline action form, e.g. the delete
 * button on events/show and home/show. They sit next to other labelled
 * actions and must stay compact. `:not(.btn-icon)` keeps the icon-only
 * variant above on its own tighter rule.
 */
form.form-inline > button[type=submit]:not(.btn-icon) {
    height          : auto;
    width           : auto;
    margin          : 0;
    padding         : 0.5em;
    line-height     : inherit;
    background-image: none;
}

/* Form that must not break the surrounding inline flow, e.g. inside a table cell */
form.form-inline {
    display: inline;
}

.button-bar {
    width: 100%;
    text-align: right;
}
.button-bar legend {
    display: none;
    visibility: hidden;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {color : var(--table-header-blue);}
/* Microsoft Edge */
::-ms-input-placeholder {color : var(--table-header-blue);}

label {
    color      : var(--black);
    display    : block;
    margin-top : 15px;
}

input[type=checkbox] ~ label,
input[type=radio] ~ label
{
    display    : inline;
    margin-top : 0;
    margin-left: 5px;
}

input[type=number] {
    text-align: right;
    /*padding-right: 3px;*/
}
input[type=number]::placeholder {
    text-align: left;
}

form input:invalid, .input-error {
    border-left-color : var(--brick);
    border-left-width : 4px;
    font-size         : var(--fs-secondary);
    margin-bottom     : 15px;
    color             : var(--brick);
}
.success-message {
    color: var(--marine-blue);
}