.editor {
    background-color: white;
    color: black;
}
.editor {
    margin-top: 5px;
    border: 2px solid blue;
    border-radius: 8px;
    border-width: 4px;
    box-shadow: 4px 4px 3px grey;
    padding: 5px;
    max-width: 400px;
    /* background-repeat: repeat-x; */
    background-position-x: right;
    background-size: contain;
    white-space: nowrap;
    user-select: none;
}
.editor button {
    box-shadow: 0 3px #999;
}
.editor button:active, .editor button.pressed {
    background-color: #3e8e41;
    box-shadow: 0 1px #666;
    transform: translateY(2px);
}
@media only screen and (max-width: 380px) {
    .editor .editorrow4 {
        font-size: 10pt;
    }
}
.editor button {
    padding: 4px;
}
.editor button[name=selectcolor] {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 9px;
    font-weight: bold;
    font-size: 12pt;
    display: grid;
    grid-template-columns: fit-content(0) 1fr;
}
@media only screen and (max-width: 380px) {
    .editor button[name=selectcolor] {
        font-size: 10pt;
    }
}
.editor .editorrow1 {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) fit-content(0) fit-content(0);
}
.editor .editorrow1 select {
    margin-left: 5px;
}
.editor .editorrow1 div {
    margin-left: 5px;
    line-height: 1.5;
}
.editor .editorattackrow {
    display: grid;
    grid-template-columns: fit-content(0) minmax(0, 1fr) fit-content(0) minmax(0, 1fr) fit-content(0) fit-content(0);
}
.editor .editorattackrow .icon {
    line-height: 1.8;
}
.editor .editorattackrow .health, .editor .editorattackrow .attackpower {
    line-height: 1.8;
    padding-left: 5px;
}
.editor .editorattackrow [name=attackpower] {
    margin-left: 5px;
}
.editor .editorattackrow button[name=paste] {
    margin-left: 5px;
}
.editor .planned .editorrow1 .timertitle {
    display: none!important;
}
.editor .planned .editorrowpaste {
    display: none!important;
}
.editor .planned .editorrow2 {
    display: none !important;
}
.editor .planned .editorattackrow div.attackpower {
    display: block !important;
}
.editor .planned .editorattackrow [name=attackpower] {
    display: none !important;
}
.editor .endtimerow {
    display: grid;
    grid-template-columns: fit-content(0) auto fit-content(0);
}
@media only screen and (max-width: 380px) {
    .editor .endtimerow {
        grid-template-columns: auto fit-content(0);
    }
}
.editor.hidepaste .editorrowpaste {
    display: none!important;
}
.editor .plannedtitle {
    display: none;
}
.editor .planned .plannedtitle {
    display: block;
}
.editorrow1 div.size {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
/*
.sizesmall, .sizenormal, .sizelarge, .sizegiant {
    height: 23px;
    width: 23px;
    font-size: 12px;
    line-height: 0px;
    padding: 0 !important;
}
*/
.editorrow2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(0) fit-content(0);
}
.editorrow2 input[name=title] {
    min-width: 0;
}
.editorrow2 button {
    margin-left: 5px;
}
.editorrowpaste {
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(0) fit-content(0);
}
.editorrowpaste textarea {
    grid-row: 1 / span 2;
    resize: none;
    min-height: 5em;
    max-height: calc(-495px + 100dvh);
}
.editorrowpaste button {
    width: 24px;
    height: 24px;
    margin-left: 5px;
}
.editorrow3 {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr fit-content(0) fit-content(0);
}
@media only screen and (max-width: 380px) {
    .editorrow3 {
        font-size: 8pt;
    }
}
.editorrow3 :first-child {
    line-height: 1.5;
}
.editorrow4 table td {
    line-height: 1.5;
}
.editorrow5 {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr fit-content(0) fit-content(0) fit-content(0);
}
.editorrow5 .label {
    line-height: 1.5;
}
.editorrow5 .horn {
    margin-left: 5px;
    display: grid;
    grid-template-columns: fit-content(0) fit-content(0) fit-content(0);
}
.editorrow5 .horn button {
    width: 28px;
    height: 25px;
}
.editorrow1 .size button.selected, .editorrow4 button.selected, .editorrow5 .horn button.selected {
    border: 2px solid green;
    background-color: #44d944;
}

.editor input.number {
    text-align: right;
    width: 2ch;
    font-family: monospace;
}
.editor input.number[name=days] {
    width: 3ch;
}

.numberpad {
    background-color: lightgray;
    border: 1px solid black;
    padding: 10px;
    border-radius: 6px;
    position: absolute;
}
.numberpad button {
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px;
    cursor: pointer;
    box-shadow: 0 3px #999;
}
.numberpad button:active, .numberpad button.pressed {
    background-color: #3e8e41;
    box-shadow: 0 1px #666;
    transform: translateY(2px);
}
/*
.numberpad button.number {
    font-family: monospace;
    font-size: x-large;
}
*/