.eventdialog button.selected {
    background: linear-gradient(#46e6c0, #12a785);
}
@media only screen and (max-width: 600px) {
    div[name=tasks].columns {
        zoom: 0.9;
    }
}
@media only screen and (max-width: 560px) {
    div[name=tasks].columns {
        zoom: 0.8;
    }
}
@media only screen and (max-width: 500px) {
    div[name=tasks].columns {
        zoom: 0.7;
    }
}
@media only screen and (max-width: 440px) {
    div[name=tasks].columns {
        zoom: 0.6;
    }
}
div[name=tasks] {
    user-select: none;
    color: black;
    background-color: #e1ffd5; /* #ffe2f6; */
    opacity: 1;
    display: grid;
}
div[name=tasks] .stage1 {
    --completedcolor: #00c296;
}
div[name=tasks] .stage2 {
    --completedcolor: #30beca;
}
div[name=tasks] .stage3 {
    --completedcolor: #f87c5a;
}
div[name=tasks] .stage4 {
    --completedcolor: #5c76fe;
}
div[name=tasks] .taskimage {
    height: 17px;
    width: 17px;
}
div[name=tasks].rows .taskimage {
    padding-left: 5px;
    padding-right: 5px;
}
div[name=tasks] .taskrow {
    display: grid;
    row-gap: 2px;
    font-size: 7pt;
    font-weight: bold;
    line-height: 2;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}
div[name=tasks].rows .taskrow {
    grid-template-columns: 12px 1fr;
    margin-left: 20px;
}
div[name=tasks].columns .taskrow {
    grid-template-columns: 12px repeat(3, 1fr);
}
div[name=tasks].rows {
    zoom: 1.2;
}
div[name=tasks] .taskrow > div:first-child {
    text-align: center;
}
div[name=tasks].rows .taskrow[taskcount="2"] > div:first-child {
    grid-row: 1 / span 2;
}
div[name=tasks].rows .taskrow[taskcount="3"] > div:first-child {
    grid-row: 1 / span 3;
}
div[name=tasks].rows .taskrow {
    max-width: 250px;
}
div[name=tasks] .taskflower {
    white-space: nowrap;
}
div[name=tasks] .taskrow.odd {
    background-color: #fff9db;
}
div[name=tasks] .taskrow.even {
    background-color: white;
}
div[name=tasks] .taskrow.completed .taskcolumn {
    background-color: var(--completedcolor);
    border-radius: 10px;
}
div[name=tasks] .taskcolumn:not(:has(.taskdestroy)), div[name=tasks] .taskcolumn .taskdestroy {
    display: grid;
    grid-template-columns: fit-content(0) auto;
    cursor: pointer;
}
div[name=tasks] .taskcolumn[taskcount] .taskdestroy {
    background-image: linear-gradient(to right, var(--completedcolor) 1px, transparent 1px);
    border-radius: 10px;
}
div[name=tasks] .taskcolumn[tasktotal="2"] .taskdestroy {
    background-size: 50%;
}
div[name=tasks] .taskcolumn[tasktotal="3"] .taskdestroy {
    background-size: 33.3%;
}
div[name=tasks] .taskcolumn[tasktotal="4"] .taskdestroy {
    background-size: 25%;
}
div[name=tasks] .taskcolumn[tasktotal="5"] .taskdestroy {
    background-size: 20%;
}
div[name=tasks] .taskcolumn.completed {
    background-color: var(--completedcolor);
    border-radius: 10px;
}
div[name=tasks] .stageheader {
    font-weight: bold;
    margin-top: 5px;
}
div[name=tasks] .stagerounds button {
    margin-left: 5px;
    margin-right: 5px;
    font-size: smaller;
    line-height: 1.8;
    border-radius: 15px;
}
div[name=tasks] .taskcolumn[tasktotal]:not([taskcount]) {
    border: 1px solid #00000000;
}
div[name=tasks] .taskcolumn[tasktotal][taskcount] {
    border: 1px solid var(--completedcolor);
    border-radius: 10px;
}
div[name=tasks] .taskcolumn[tasktotal="2"][taskcount="1"] {
    background: linear-gradient(to right, var(--completedcolor) 50%, #00000000 50%);
}
div[name=tasks] .taskcolumn[tasktotal="2"][taskcount="2"] {
    background-color: var(--completedcolor);
}
div[name=tasks] .taskcolumn[tasktotal="3"][taskcount="1"] {
    background: linear-gradient(to right, var(--completedcolor) 33.3%, #00000000 33.3%);
}
div[name=tasks] .taskcolumn[tasktotal="3"][taskcount="2"] {
    background: linear-gradient(to right, var(--completedcolor) 67.7%, #00000000 67.7%);
}
div[name=tasks] .taskcolumn[tasktotal="3"][taskcount="3"] {
    background-color: var(--completedcolor);
}
div[name=tasks] .taskcolumn[tasktotal="4"][taskcount="1"] {
    background: linear-gradient(to right, var(--completedcolor) 25%, #00000000 25%);
}
div[name=tasks] .taskcolumn[tasktotal="4"][taskcount="2"] {
    background: linear-gradient(to right, var(--completedcolor) 50%, #00000000 50%);
}
div[name=tasks] .taskcolumn[tasktotal="4"][taskcount="3"] {
    background: linear-gradient(to right, var(--completedcolor) 75%, #00000000 75%);
}
div[name=tasks] .taskcolumn[tasktotal="4"][taskcount="4"] {
    background-color: var(--completedcolor);
}
div[name=tasks] .taskcolumn[tasktotal="5"][taskcount="1"] {
    background: linear-gradient(to right, var(--completedcolor) 20%, #00000000 20%);
}
div[name=tasks] .taskcolumn[tasktotal="5"][taskcount="2"] {
    background: linear-gradient(to right, var(--completedcolor) 40%, #00000000 40%);
}
div[name=tasks] .taskcolumn[tasktotal="5"][taskcount="3"] {
    background: linear-gradient(to right, var(--completedcolor) 60%, #00000000 60%);
}
div[name=tasks] .taskcolumn[tasktotal="5"][taskcount="4"] {
    background: linear-gradient(to right, var(--completedcolor) 80%, #00000000 80%);
}
div[name=tasks] .taskcolumn[tasktotal="5"][taskcount="5"] {
    background-color: var(--completedcolor);
}
.tasksconfigrow {
    display: grid;
    grid-template-columns: auto fit-content(0) fit-content(0);
    column-gap: 5px;
}