/* TODO: title attribute is not widely supported. Alternative needs to be used, like a description text underneath */


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

body {
    --header-background: #555555;
    --footer-background: #333333;
    --main-background: lightgreen;
    --settings-background: goldenrod;
    --sentence-list-background: lightcoral;
    --message-block-background: #DD7733;

    --outputview-border-color: #CC5533;
    --message-block-border-color: #AA3322;

    --footer-height: 30px;
}

header {
    width: 100%;
    background: var(--header-background);
}

main {
    width: 100%;
    flex: 1;
    overflow: auto;
    background: var(--main-background);
    display: flex;
    flex-flow: row;
}

ul {
    list-style-type: none;
}

*[title], *[title] * {
    cursor: help;
}

.logo * {
    cursor: unset;
}

.settings-view {
    width: 300px;
    background: var(--settings-background);
}

.output-view {
    flex: 1;
    background: var(--sentence-list-background);
    border: 3px solid var(--outputview-border-color);
    margin: 30px;
}

.sentence-list {
    padding: 5px;
}

.message-block {
    min-height: 30px;
    margin: 5px 0;
    background: var(--message-block-background);
    border: 1px solid var(--message-block-border-color);
}

.message-block .text-field {
    display: block;
    padding: 5px;
}

.message-block .edit-field-copy {
    display: none;
}

/* Only set display to none of edit-elements when not editing */
.message-block:not(.editing) .onlyedit {
    display: none;
}

.message-block .edit-field {
    width: 100%;
    padding: 5px;
    resize: vertical;
}

.message-block.editing .text-field,
.message-block.editing .editbttn {
    display: none;
}

.message-block .controls {
    width: 100%;
    display: flex;
    flex-flow: row;
    padding: 10px 5px;
}

.controls {
    display: flex;
    flex-flow: row;
}

.controls span.filler {
    flex: 1;
}

.controls input[type=button] {
    margin: 0 5px;
}

.option {
    display: block;
}

.wide-button-wrapper {
    padding: 4px;
}

.wide-button {
    display: block;
    width: 100%;
    padding: 5px;
    border-radius: 0;
    border: none;
}

form > * {
    display: block;
}

.biscuit-msg {
    width: 100%;
    background: var(--footer-background);
    color: var(--title-color);
    display: flex;
    flex-flow: row;
}

.biscuit-msg p {
    padding: 5px 20px;
    display: inline-block;
    flex: 1;
}

.biscuit-msg #resetls {
    display: inline-block;
    margin: auto 5px;
}