html,
body,
#widget-container {
    width: 100%;
    height: 100%;
    margin: 0;
}

#widget-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#widget {
    width: fit-content;
    height: fit-content;
    margin: 1em;
    border: solid lightgray medium;
    padding: 100px;
}

#controls {
    display: flex;
    justify-content: left;
    font-family: Arial, sans-serif;
    font-size: 21px;
}

.control {
    margin-inline: 1em;
    font-family: Arial, sans-serif;
    font-size: 21px;
}

.control select,
.control button {
    margin-inline: 0.5em;
}

#colorer {
    margin: 1em;
}

.color-selector-dialog {
    position: absolute;
    margin: 0;
    padding: 0;
}

.color-selector {
    padding: 0.5em;
}

.color-buttons {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.5em;
    justify-content: space-evenly;
    justify-items: center;
    align-items: center;
}

.color-button>input {
    display: none;
}

.color-button>input:checked+.color-box-outer {
    border: solid grey medium;
}

.color-box-outer {
    padding: 1px;
}

.color-box-inner {
    width: 2em;
    height: 2em;
    border: solid lightgray thin;
}

.text-fields {
    width: fit-content;
    margin-top: 1em;
}

.text-field {
    display: flex;
    justify-content: right;
    margin-top: 0.5em;
}

.text-field input {
    margin-inline: 0.5em;
}

.svg-area-hover {
    filter: contrast(50%);
}