p {
    color: var(--color-dark);
}

a:focus,
a:hover,
a.url {
    text-decoration: underline;
}

section {
    clear: both;
}

section header {
    margin-bottom: 0.25rem;
}

section {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
section:last-child {
    margin-bottom: 0rem;
}
section h2:after {
    content: ":";
}

.container {
    display: flex;
    margin-bottom: 0.25rem;
}

.container > .icon-none {
    display: inline-block;
    padding: 0.5rem;
    font-size: 1rem;
    justify-content: center;
   /* height: fit-content; */
    min-width: 2rem;
    width: 2rem;
}
.container > .icon {
    background-color: var(--color-light);
    border: 1px solid var(--color-light);
    color: var(--color-dark);
    display: inline-block;
    padding: 0.5rem;
    font-size: 1rem;
    justify-content: center;
    height: fit-content;
    width: 2rem;
}
.container > .icon-middle {
    border-radius: 0.25rem;
}
.container > .icon-lhs {
    border-radius: 0.25rem 0 0 0.25rem;
}
.container > .icon-rhs {
    border-radius: 0 0.25rem 0.25rem 0;
}
.container > input[type="email"],
.container > input[type="text"],
.container > input[type="password"],
.container > textarea {
    background-color: var(--color-edit-light);
    border: 1px solid var(--color-light);
    color: var(--color-dark);
    display: inline-block;
    padding: 0.5rem;
    border-radius: 0 0.25rem 0.25rem 0;
    width: 100%;
}
.container > input[type="email"]::placeholder,
.container > input[type="text"]::placeholder,
.container > input[type="password"]::placeholder,
.container > textarea::placeholder {
    color: var(--color-light-mid);
}

.container > button {
    background-color: var(--color-button-light);
    border: 1px solid var(--color-light);
    color: var(--color-dark);
    display: inline-block;
    padding: 0.5rem;
    border-radius: 0.25rem;
}
.container > button:focus,
.container > button:hover {
    background-color: var(--color-button-mid);
    color: var(--color-light);
}
.container > button:active {
    border-color: var(--color-selected-dark);
}

.container > .message,
.container > .notice,
.container > .warning,
.container > .error {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border-radius: 0.25rem;
}
.container > .notice {
    background-color: var(--color-notice);
    border: 1px solid var(--color-light);
    color: var(--color-very-light);
}
.container > .warning {
    background-color: var(--color-warning);
    border: 1px solid var(--color-light);
    color: var(--color-dark);
}
.container > .error {
    background-color: var(--color-error);
    border: 1px solid var(--color-light);
    color: var(--color-very-light);
}

ul.error {
    width: auto;
    color: var(--color-error);
    border: 1px solid var(--color-dark);
    border-radius: 0.25rem;
}
li.error {
/*    width: 100%;  */
/*    margin-bottom: 1rem;  */
}
li.error:last-child {
    margin-bottom: 0;
}


/* FIXME : is this used ? */
body > header .dropdown-button {
    padding: 0.0.5rem 0.5rem 0 0.5rem;
    margin-right: -0.5rem;
    cursor: pointer;
}


.editing .dropdown-container a.selected {
    background-color: var(--color-selected-mid);
    color: var(--color-light);
}
.editing .dropdown-container a.selected:focus,
.editing .dropdown-container a.selected:hover {
    background-color: var(--color-selected-dark);
    color: var(--color-light);
}