body {
    font-family: "Roboto Condensed", Roboto, Helvetica, sans-serif;
    font-size: 16px;
    background-color: aliceblue;
    color: inherit;
    margin: 0;
}

.body {
    background-color: white;
    display: grid;
    grid-template-columns: repeat(4, minmax(50px, 100px));
}

#rollingStonesCalculator {
    margin: 0 auto;
    text-align: center;
    line-height: 60px;
    min-width: 320px;
    max-width: 400px;
}

.material-icons {
    line-height: inherit;
}


/* keys */

.key,
.menu-toggle {
    height: 60px;
    line-height: 60px;
    background-color: #eee;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

div {
    user-select: none;
}

.key.calculate {
    grid-column: span 3;
}

.clickable {
    cursor: pointer;
}

.clickable:active {
    filter: brightness(75%);
}

@media (hover: hover) {
    .key:hover,
    .menu-toggle:hover,
    .menu-toggle.active:hover,
    .menu .clickable.favourite:hover,
    .menu .clickable.option:hover,
    .menu .edit:hover,
    .menu .details:hover,
    .key.calculate:hover,
    .menu .submit:hover,
    .menu .roll:hover,
    .recommendation:hover {
        background-color: pink;
    }
    .key.disabled.key.calculate:hover,
    .key.disabled:hover {
        background-color: #ccc;
    }
    .invalid .key.calculate:hover,
    .menu .delete:hover {
        background-color: crimson;
    }
}

.key.red {
    color: crimson;
}

.key.orange {
    color: tomato;
}

.key.blue {
    color: royalblue;
}

.invalid .key.calculate {
    cursor: not-allowed;
}

.key.disabled.calculate {
    cursor: not-allowed;
    background-color: #eee;
}

.key.disabled,
.menu-toggle.disabled {
    background-color: #ccc;
    color: black;
    cursor: not-allowed;
}

.key.advanced {
    display: none;
}

.display input.equasion.advanced {
    display: none;
}

#rollingStonesCalculator.advanced .key.advanced {
    display: block;
}

#rollingStonesCalculator.advanced .display input.equasion.advanced {
    display: block;
}


/* misc */

.upcased {
    text-transform: uppercase;
}

.display {
    background-color: #fff;
}

.invalid .display {
    color: #bc0f0e;
}

input {
    font-weight: normal;
    border: none;
    line-height: 60px;
    margin: 0 0 0 10px;
    font-family: "Roboto Condensed", Roboto, Helvetica, sans-serif;
    font-size: 16px;
    text-align: right;
    flex: 1;
    border-radius: 0;
}

input:focus {
    outline: none;
}

.display input.equasion {
    display: block;
    width: 100%;
    padding: 0 5px;
    margin: 0;
    color: #888;
    text-align: center;
    height: 30px;
    line-height: 40px;
}

.display .equasion {
    line-height: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.display .equasion .token {
    width: 40px;
    height: 40px;
    margin: 5px;
}

.hidden {
    display: none;
}


/* menus */

.menu .element {
    background-color: white;
    display: flex;
}

.menu .details {
    flex: 50%;
    background-color: white;
    text-align: left;
}

.menu .favourite,
.menu .edit,
.menu .delete {
    flex: 25%;
    background-color: white;
}

.menu .roll,
.menu .submit {
    flex: 25%;
    background-color: white;
}

.menu-toggle.active {
    background-color: white;
}

.menu .element .editor,
.menu .element .favourites {
    display: none;
}

.menu .element .viewer {
    display: flex;
    width: 100%;
    background-color: inherit;
}

.menu .element.editing .editor {
    display: flex;
    width: 100%;
}

.menu .element.editing .favourites {
    display: block;
}

.menu .element .favourites .icon {
    flex: 25%;
}

.menu .element .favourites .name {
    flex: 75%;
}

.menu .element.editing .viewer {
    display: none;
}

.menu .element input.name {
    padding-left: 0;
}

.menu .element .name {
    padding-left: 10px;
    text-align: left;
    display: block;
    background-color: inherit;
}

.menu .element.favourite .details .name {
    height: 40px;
    line-height: 46px;
}

.menu .element .equasion {
    font-size: 12px;
    color: gray;
    display: block;
    width: 100%;
    text-align: left;
    margin-left: 10px;
}

.menu .element .equasion {
    height: 20px;
    line-height: 8px;
}

.menu.groups .element {
    display: block;
}

.menu.groups .recommendations {
    width: 75%;
    margin-left: 25%;
}

.menu.groups .recommendations {
    display: none;
}

.menu.groups .editing .recommendations {
    display: block;
}

.menu.groups .recommendations .recommendation {
    height: 30px;
    line-height: 30px;
    display: flex;
}

.menu.groups .recommendations .recommendation .roll-name {
    text-align: left;
    flex: 90%;
}

.menu.groups .recommendations .recommendation .icon {
    flex: 10%;
}

.menu .element .small-header {
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    display: flex;
}

.menu .element .small-header div {
    text-transform: uppercase;
    font-weight: bold;
    color: #888;
    text-align: left;
    margin-left: 5px;
}


/* settings */

.settings .setting .name {
    text-align: center;
    flex: 25%;
    padding-left: 0;
}

.settings .setting .options {
    flex: 75%;
    display: flex;
}

.settings .setting .option {
    text-align: center;
    flex: 1;
}

.settings .setting .current .selection {
    background-color: mediumaquamarine;
    display: inline;
    padding: 4px 10px;
    border-radius: 50px;
}


/* groups */

.group-rolls .group-roll {
    display: flex;
}

.group-rolls .material-icons {
    height: 30px;
    line-height: 30px;
    flex: 25%;
}

.group .material-icons.arrow {
    flex: 10%;
}

.group .roll-name {
    flex: 40%;
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: left;
}

.group .roll-name .roll-value {
    font-size: 12px;
    color: gray;
}

.group-rolls .material-icons.delete {
    display: none;
}

.group-rolls .result {
    flex: 25%;
    display: block;
    height: 30px;
    line-height: 30px;
}

.editing .group-rolls .result {
    display: none;
}

.editing .group-rolls .material-icons.delete {
    display: block;
}

.group-rolls.hidden {
    display: none;
}

.group-rolls .reorder {
    color: white;
}


/* dice keys */

.die {
    font-weight: bold;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    position: relative;
}

.die>div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.key .die {
    margin-top: 10px;
}

.die .value {
    line-height: 40px;
    font-size: 12px;
}

.die .cutter {
    background-color: mediumaquamarine;
}

.cutter.shadow.base {
    background-color: teal;
}

.cutter.shadow.light {
    background-color: lightseagreen;
}

.cutter.shadow.dark {
    background-color: darkslategrey;
}

.dx .cutter {
    border-radius: 100%;
    background: radial-gradient(circle at 17px 16px, aquamarine 0%, mediumaquamarine 40%, darkslategrey 70%);
}

.flat .die .cutter {
    background-color: mediumaquamarine;
}

.flat .cutter.shadow.base {
    background-color: mediumaquamarine;
}

.flat .cutter.shadow.light {
    background-color: mediumaquamarine;
}

.flat .cutter.shadow.dark {
    background-color: mediumaquamarine;
}

.flat .dx .cutter {
    background: radial-gradient(circle at 17px 16px, mediumaquamarine 0%, mediumaquamarine 40%, mediumaquamarine 70%);
}

.d4 .cutter {
    clip-path: polygon(50% 10%, 15% 70%, 85% 70%);
    -webkit-clip-path: polygon(50% 10%, 15% 70%, 85% 70%);
}

.d4 .cutter.shadow.base {
    clip-path: polygon(15% 70%, 85% 70%, 95% 75%, 90% 60%, 65% 15%, 50% 0%, 35% 15%, 10% 60%, 5% 75%, 15% 70%);
    -webkit-clip-path: polygon(15% 70%, 85% 70%, 95% 75%, 90% 60%, 65% 15%, 50% 0%, 35% 15%, 10% 60%, 5% 75%, 15% 70%);
}

.d4 .cutter.shadow.dark {
    clip-path: polygon(85% 85%, 15% 85%, 5% 75%, 15% 70%, 85% 70%, 95% 75%);
    -webkit-clip-path: polygon(85% 85%, 15% 85%, 5% 75%, 15% 70%, 85% 70%, 95% 75%);
}

.d6 .cutter {
    clip-path: polygon(20% 15%, 20% 80%, 85% 80%, 85% 15%);
    -webkit-clip-path: polygon(20% 15%, 20% 80%, 85% 80%, 85% 15%);
}

.d6 .cutter.shadow.base {
    clip-path: polygon(20% 80%, 10% 100%, 10% 45%, 20% 15%);
    -webkit-clip-path: polygon(20% 80%, 10% 100%, 10% 45%, 20% 15%);
}

.d6 .cutter.shadow.dark {
    clip-path: polygon(20% 80%, 10% 100%, 71% 100%, 85% 80%);
    -webkit-clip-path: polygon(20% 80%, 10% 100%, 71% 100%, 85% 80%);
}

.d8 .cutter {
    clip-path: polygon(50% 0%, 0% 75%, 100% 75%);
    -webkit-clip-path: polygon(50% 0%, 0% 75%, 100% 75%);
}

.d8 .cutter.shadow.base {
    clip-path: polygon(50% 0%, 90% 30%, 100% 75%, 50% 100%, 0% 75%, 10% 30%);
    -webkit-clip-path: polygon(50% 0%, 90% 30%, 100% 75%, 50% 100%, 0% 75%, 10% 30%);
}

.d8 .cutter.shadow.dark {
    clip-path: polygon(100% 75%, 50% 100%, 0% 75%);
    -webkit-clip-path: polygon(100% 75%, 50% 100%, 0% 75%);
}

.d10 .cutter {
    clip-path: polygon(50% 0%, 15% 57%, 50% 80%, 85% 57%);
    -webkit-clip-path: polygon(50% 0%, 15% 57%, 50% 80%, 85% 57%);
}

.d10 .cutter.shadow.base {
    clip-path: polygon(50% 0%, 1% 33%, 0% 55%, 50% 100%, 100% 55%, 99% 33%);
    -webkit-clip-path: polygon(50% 0%, 1% 33%, 0% 55%, 50% 100%, 100% 55%, 99% 33%);
}

.d10 .cutter.shadow.dark {
    clip-path: polygon(15% 57%, 0% 55%, 50% 100%, 100% 55%, 85% 57%);
    -webkit-clip-path: polygon(15% 57%, 0% 55%, 50% 100%, 100% 55%, 85% 57%);
}

.d12 .cutter {
    clip-path: polygon(50% 10%, 85% 38%, 72% 80%, 28% 80%, 15% 38%);
    -webkit-clip-path: polygon(50% 10%, 85% 38%, 72% 80%, 28% 80%, 15% 38%);
}

.d12 .cutter.shadow.base {
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
    -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

.d12 .cutter.shadow.light {
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 85% 38%, 15% 38%, 0% 35%, 20% 10%);
    -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 85% 38%, 15% 38%, 0% 35%, 20% 10%);
}

.d12 .cutter.shadow.dark {
    clip-path: polygon(28% 80%, 70% 78%, 80% 90%, 50% 100%, 20% 90%);
    -webkit-clip-path: polygon(28% 80%, 70% 78%, 80% 90%, 50% 100%, 20% 90%);
}

.d20 .cutter {
    clip-path: polygon(50% 10%, 15% 70%, 85% 70%);
    -webkit-clip-path: polygon(50% 10%, 15% 70%, 85% 70%);
}

.d20 .cutter.shadow.base {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.d20 .cutter.shadow.light {
    clip-path: polygon(50% 10%, 100% 25%, 85% 70%, 50% 100%, 15% 70%, 0% 25%);
    -webkit-clip-path: polygon(50% 10%, 100% 25%, 85% 70%, 50% 100%, 15% 70%, 0% 25%);
}

.d20 .cutter.shadow.dark {
    clip-path: polygon(50% 100%, 85% 70%, 100% 75%, 50% 100%, 0% 75%, 15% 70%);
    -webkit-clip-path: polygon(50% 100%, 85% 70%, 100% 75%, 50% 100%, 0% 75%, 15% 70%);
}