dialogcontainer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: double 8px #ebf5f8;
    padding: 10px;
    /* width: 90vw; */
    /* height: 89vh; */
    border-radius: 20px;
    background-color: darkslategrey;
    visibility: collapse;
}

dialogcontainer.active {
    visibility: visible;
}

dialogcontents {
    height: -webkit-fill-available;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    color: #ebf5f8;
}

dialogheader {
    text-align: center;
    font-size: var(--fontSize_title);
    font-weight: bold;
    padding: .2em;
    color: #ebf5f8;
}

button.cancel:after {
    content: 'Cancel';
}

dialogcontents.newPlayer button.okay:after {
    content: 'Add Player';
}

dialogcontents button {
    color: #ebf5f8;
    font-weight: bold;
    font-size: 24pt;
    width: fit-content;
    border: solid 4px #ebf5f8;
    border-radius: 10px;
    margin: 4px;
    background: darkslategrey;
}

dialogcontents buttons {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-items: end;
}

dialogcontents center {
    align-content: center;
}

dialogcontents form, dialogcontents input {font-size: 30px;}

form label {
    padding-right: 8px;
}

form input {
    border-radius: 4px;
    padding: 4px;
    font-weight: bold;
    /* text-transform: uppercase; */
    color: darkslategrey;
}

dialogcontents center {
    margin: 16px;
}