*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    margin: var(--generic-margin);
    cursor: pointer;
}

a:hover {
    filter: brightness(var(--active-brightness));
}

p {
    margin: var(--generic-margin);
}

p a {
    margin-bottom: initial;
}

h1, h2, h3, h4, h5, h6 {
    margin: var(--generic-margin);
    font-weight: bold;
}

h6 {
    font-size: 1.00rem;
}

h5 {
    font-size: 1.15rem;
}

h4 {
    font-size: 1.30rem;
}

h3 {
    font-size: 1.45rem;
}

h2 {
    font-size: 1.60rem;
}

h1 {
    font-size: 1.75rem;
}

section {
    --padding: 1rem;

    padding: var(--padding);
    margin-bottom: 2rem;

    box-shadow: 0 0 15px var(--color-shadow);
    border-radius: calc(var(--round-corner) * 2);
}

section > *:last-child {
    margin-bottom: 0;
}

@media (width < 800px) {
    section {
        border-radius: 0;
    }
}

input {
    outline: none;
    border: none;
    border-bottom: 1px solid;
    border-color: var(--color-primary);
    border-radius: var(--round-corner) var(--round-corner) 0 0;

    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);

    padding: 0.4rem;
    margin: var(--generic-margin);
    width: 100%;
}

input::placeholder {
    color: var(--color-placeholder);
}

input:hover:not(:disabled),
input:focus:not(:disabled),
input:active:not(:disabled) {
    outline: none;
    border: none;
    border-bottom: 1px solid;
    border-color: var(--color-primary);

    background-color: var(--color-light);
}

input:disabled {
    border-color: var(--color-light);
}

input:disabled::placeholder {
    color: var(--color-light);
}

input:not([type="radio"]):not([type="checkbox"]).ok {
    color: var(--color-ok);
    border-color: var(--color-ok);
}

input:not([type="radio"]):not([type="checkbox"]).warn,
input:not([type="radio"]):not([type="checkbox"]).warning {
    color: var(--color-warning);
    border-color: var(--color-warning);
}

input:not([type="radio"]):not([type="checkbox"]).err,
input:not([type="radio"]):not([type="checkbox"]).error,
input:not([type="radio"]):not([type="checkbox"]).danger {
    color: var(--color-error);
    border-color: var(--color-error);
}

.input-icon {
    position: relative;
}

.input-icon > i {
    position: absolute;
    right: 0.3rem;
    top: 0.4rem;

    font-size: 1.2em;
    color: var(--color-primary);

    margin: 0;
    padding: 0;

    text-align: center;
    vertical-align: middle;
}

.input-icon > input.ok + i {
    color: var(--color-ok);
}

.input-icon > input.warn + i,
.input-icon > input.warning + i {
    color: var(--color-warning);
}

.input-icon > input.err + i,
.input-icon > input.error + i,
.input-icon > input.danger + i {
    color: var(--color-error);
}

.input-icon > input {
    padding-right: 1.8rem;
}

.input-icon.ok > input,
.input-icon.ok > i {
    color: var(--color-ok);
}

.input-icon.warn > i,
.input-icon.warn > input,
.input-icon.warning > i,
.input-icon.warning > input {
    color: var(--color-warning);
}

.input-icon.err > i,
.input-icon.err > input,
.input-icon.error > i,
.input-icon.error > input,
.input-icon.danger > i,
.input-icon.danger > input {
    color: var(--color-error);
}

input[type="radio"],
input[type="checkbox"],
label > input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
    margin: 0;
    width: initial;
}

label,
input[type="radio"] + label,
input[type="checkbox"] + label {
    display: block;
    width: fit-content;
    padding: 0.4rem 0.8rem;
    margin: var(--generic-margin);

    justify-content: center;
    justify-items: center;

    background-color: var(--color-primary);
    border-radius: var(--round-corner);
    cursor: pointer;
}

label:hover,
input[type="radio"] + label:hover,
input[type="checkbox"] + label:hover {
    filter: brightness(var(--hover-brightness));
    background-color: var(--color-primary);
}

input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label,
label:has(input[type="radio"]:checked),
label:has(input[type="checkbox"]:checked) {
    background-color: var(--color-tertiary);
}

button {
    border: none;
    background-color: var(--color-primary);
    border-radius: var(--round-corner);

    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);

    padding: 0.4rem 0.8rem;
    margin: var(--generic-margin);
    cursor: pointer;
}

button:hover:not(:disabled) {
    filter: brightness(var(--hover-brightness));
}

button:active:not(:disabled) {
    filter: brightness(var(--active-brightness));
}

button:disabled {
    background-color: var(--color-light);
    cursor: default;
}

button.ok {
    background-color: var(--color-ok);
}

button.warn,
button.warning {
    background-color: var(--color-warning);
}

button.err,
button.error,
button.danger {
    background-color: var(--color-error);
}

fieldset,
.fsb-input-grp,
.fsb-input-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: var(--generic-margin);

    width: fit-content;
    height: fit-content;

    border: none;
}

fieldset > label,
fieldset > input,
.fsb-input-grp > button,
.fsb-input-grp > input,
.fsb-input-grp > label,
.fsb-input-grp > input + label,
.fsb-input-group > button,
.fsb-input-group > input,
.fsb-input-group > label,
.fsb-input-group > input + label {
    margin: 0;
    border-right: 2px solid;
    border-color: var(--color-secondary);
    border-radius: 0;
}

fieldset > label:first-child,
fieldset > input:first-child,
.fsb-input-grp > button:first-child,
.fsb-input-grp > input:first-child,
.fsb-input-grp > label:first-child,
.fsb-input-grp > input:first-child + label,
.fsb-input-group > button:first-child,
.fsb-input-group > input:first-child,
.fsb-input-group > label:first-child,
.fsb-input-group > input:first-child + label {
    border-radius: var(--round-corner) 0 0 var(--round-corner);
}

fieldset > label:last-child,
fieldset > input:last-child,
.fsb-input-grp > button:last-child,
.fsb-input-grp > input:last-child,
.fsb-input-grp > label:last-child,
.fsb-input-grp > input:last-child + label,
.fsb-input-grp > input + label:last-child,
.fsb-input-group > button:last-child,
.fsb-input-group > input:last-child,
.fsb-input-group > label:last-child,
.fsb-input-group > input:last-child + label,
.fsb-input-group > input + label:last-child {
    border-radius: 0 var(--round-corner) var(--round-corner) 0;
    border: none;
}

select {
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);

    padding: 0.3rem;
    margin: var(--generic-margin);

    outline: none;

    border: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--color-primary);
}

select.ok {
    border-color: var(--color-ok);
}

select.warn,
select.warning {
    border-color: var(--color-warning);
}

select.err,
select.error,
select.danger {
    border-color: var(--color-error);
}

select:active:not(:disabled),
select:focus:not(:disabled),
select:hover:not(:disabled) {
    background-color: var(--color-light);
}

.api-result-container {
    --corner: var(--round-corner);

    position: fixed;
    width: 100%;
    z-index: 9999;

    top: 4rem;
}

.api-result-container > .api-result {
    position: relative;
    border-radius: var(--corner);

    padding: 0.5rem;
    margin: 0.3rem 1rem;
}

.api-result-container > .api-result.ok {
    background-color: var(--color-ok);
    color: var(--font-color);
}

.api-result-container > .api-result.warn {
    background-color: var(--color-warn);
    color: var(--font-color);
}

.api-result-container > .api-result.error {
    background-color: var(--color-error);
    color: var(--font-color);
}

.api-result-container > .api-result > .api-result--msg > * {
    margin: 0;
}

.api-result-container > .api-result > .api-result--close {
    position: absolute;
    top: 0;
    right: 0;

    font-size: 1.2rem;
    padding: 0.3rem;

    opacity: 0;

    background-color: var(--color-light);
    border-radius: 0 var(--corner) 0 var(--corner);
}