.darkmodus .popupmessage.calculator .popupmessage-window {
    background-color: #232323f2;
    border-color: #adadad;
}
.darkmodus .popupmessage.calculator .popupmessage-content {
    color: white;
}
.popupmessage.calculator .popupmessage-window {
    width: 95%;
    max-width: 450px;
}

div.calculatordialog div[name*=mushroom], div.calculatordialog div[name*=attackpower], div.calculatordialog div[name*=health], div.calculatordialog .icon, div.remainingtime, div[name^=remainingtime] {
    line-height: 1.8;
}
div.calculatordialog h3 {
    margin-top: 5px;
    margin-bottom: 5px;
}
div.calculatordialog .columns {
    display: grid;
    grid-template-columns: 93px auto;
    max-width: 340px;
}
div.calculatordialog .columns div, div.calculatordialog .divborder {
    border: 1px solid lightgray;
}
div.calculatordialog .columns3 {
    display: grid;
    grid-template-columns: 220px 75px 100px;
}
div.calculatordialog .spacing {
    margin-top: 5px;
}
div.calculatordialog .remaining.zero { /* .days .hours .minutes .seconds */
    color: #a9a9a9;
}
div.calculatordialog .inline {
    display: inline;
}
div.calculatordialog .lowattackpower {
    color: red;
}
div.calculatordialog .grid2columns {
    display: grid;
    width: fit-content;
    grid-template-columns: auto auto;
}
div.calculatordialog .starttargettime {
    display: grid;
    grid-template-columns: fit-content(0) fit-content(0) auto fit-content(0);
    grid-column-gap: 5px;
}
div.calculatordialog .timegrid {
    display: grid;
    grid-template-columns: 80px 75px 60px;
    width: fit-content;
    padding: 2px;
    margin: auto;
}
div.calculatordialog div.remainingtime {
    text-align: center;
}
div.calculatordialog span[name=remainingtime] {
    margin: auto;
}
div.calculatordialog .timegrid > span {
    line-height: 1.5;
}
div.calculatordialog .timegrid > span:not(:first-child) {
    text-align: right;
}
div.calculatordialog .calculatemushroom {
    display: grid;
    grid-template-columns: fit-content(0) fit-content(0) auto fit-content(0);
    column-gap: 4px;
}
div.calculatordialog .grid6columns {
    display: grid;
    width: fit-content;
    grid-template-columns: repeat(6, auto);
    column-gap: 4px;
}
div.calculatordialog .grid-colspan-2 {
    grid-column: 1 / span 2;
}
div.calculatordialog .grid-colspan-3 {
    grid-column: 1 / span 3;
}
div.calculatordialog .grid-colspan-5 {
    grid-column: 3 / span 5;
}
div.calculatordialog .grid-1-colspan-4 {
    grid-column: 1 / span 4;
}
div.calculatordialog .grid-1-colspan-5 {
    grid-column: 1 / span 5;
}
div.calculatordialog .grid-2-colspan-3 {
    grid-column: 2 / span 3;
}
div.calculatordialog .grid-3-colspan-3 {
    grid-column: 3 / span 3;
}
div.calculatordialog .grid-2-colspan-4 {
    grid-column: 2 / span 4;
}
div.calculatordialog button[name*=edit], div.calculatordialog button[class*=lock], div.calculatordialog button[class*=trash], div.calculatordialog button[class*=info], div.calculatordialog button[class*=rotate], div.calculatordialog button[class*=check] {
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 15px;
    height: 25px;
    width: 25px;
}
div.calculatordialog button, div.calculatordialog div[datetime] {
    cursor: pointer;
}
div.calculatordialog div.exactendtime {
    border: 1px solid green;
    border-radius: 4px;
}
div.calculatordialog [name*=attackpower-total-], div.calculatordialog [name=actualhealth] {
    text-align: center;
}
div.calculatordialog .mushroombuttons {
    display: grid;
    row-gap: 2px;
}
div.calculatordialog .mushroombuttons .mushroombutton {
    cursor: pointer;
    user-select: none;
    border: 2px solid #e3e3e3;
    border-radius: 4px;
    display: grid;
    grid-template-columns: fit-content(0) 1fr fit-content(0) auto fit-content(0);
    column-gap: 5px;
}
div.calculatordialog .mushroombuttons .mushroombutton.selected, div.calculatordialog .sizebuttons .selected, div.calculatordialog .attackpowerbuttons .selected {
    border-color: green;
}
/*
div.calculatordialog .mushroombutton .health, div.calculatordialog .mushroombutton .attackpower {
    text-align: right;
}
*/
div.calculatordialog .mushroombutton .customattackpower {
    color: green;
}
div.calculatordialog .hide-info .info {
    display: none;
}

div.calculatordialog .controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
div.calculatordialog .controls div:first-child {
    text-align: left;
}
div.calculatordialog .controls div:last-child {
    text-align: right;
}
div.calculatordialog form.mushroomselected .endtimersheader, div.calculatordialog form.mushroomselected:not(.hide-info) .endtimersinfo {
    display: block;
}
div.calculatordialog .endtimers {
    display: grid;
    width: fit-content;
    grid-template-columns: fit-content(0) fit-content(0) fit-content(0) auto;
    column-gap: 4px;
}
/*
div.calculatordialog .endtimersheader, div.calculatordialog .endtimersinfo, .endtimers {
    display: none;
}
*/

div.calculatordialog form.mushroomselected .playertimersheader, div.calculatordialog form.mushroomselected:not(.hide-info) .playertimersinfo {
    display: block;
}
div.calculatordialog .playertimers {
    display: grid;
    width: fit-content;
    /* grid-template-columns: auto auto fit-content(0) auto; */
    column-gap: 4px;
}
div.calculatordialog .playertimers button {
    white-space: nowrap;
}
div.calculatordialog .playertimers hr {
    border: none;
    border-top: 1px solid #ffffff;
    grid-column: 1 / span 4;
    width: 100%;
    margin: 2px 0px;
}
/*
div.calculatordialog form.mushroomselected .playertimers .fa-flag-checkered {
    grid-column: 1 / span 1;
}
div.calculatordialog form.mushroomselected .playertimers .colspan-2-2 {
    grid-column: 2 / span 2;
}
div.calculatordialog form.mushroomselected .playertimers .colspan-4-2 {
    grid-column: 4 / span 2;
}
div.calculatordialog form.mushroomselected .playertimers .colspan-6-2 {
    grid-column: 6 / span 2;
}
*/
/*
div.calculatordialog .playertimersheader, .playertimersinfo, .playertimers {
    display: none;
}
*/
div.calculatordialog button[name=selectcolor] {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 9px;
    font-weight: bold;
    font-size: 12pt;
    display: grid;
    grid-template-columns: fit-content(0) 1fr;
}
div.calculatordialog button[name=selectcolor] .img {
    background-image: url(mushroom-selector.png);
    background-color: #fdfdfd;
    background-repeat: no-repeat;
    background-size: 23px;
    width: 23px;
    height: 23px;
    border-radius: 23px;
    border: 1px solid #a3a3a3;
    margin: 1px;
}
div.calculatordialog button[name=selectcolor] .text {
    margin-left: 5px;
    line-height: 1.5;
}
.selectmushroom {
    display: grid;
    grid-template-columns: auto fit-content(0);
}
div.calculatordialog .edittimerbuttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 5px;
}