button {
    display: inline-block;
    font-size: medium;

    width: 12rem;
    height: 2rem;

    text-align: center;
    text-decoration: none;

    transition-duration: 0.2s;
    cursor: pointer;

    color: white;
    background-color: #2088ce;
    border: 1px solid white;
    border-radius: 1rem;
}

button:active {
    background-color: #fff;
    color: #2088ce;
    border: 1px solid #2088ce;
    transform: translateY(2px);
}

button:disabled {
    background-color: gray;
}

button.wide {
    width: 20rem;
}

button.tall {
    height: 4rem;
}

button.thin {
    width: 7rem;
}

button.big {
    min-width: 14rem;
    min-height: 8rem;
    text-align: center;
}

button.max {
    width: 100%;
    height: 100%;
    border-radius: 2rem;
}

button.icon {
    width: 3rem;
    text-align: center;
    overflow: hidden;
    /* Required for iOS icons */
    padding: 0;
}

button.largeIcon {
    /* width: 2rem; */
    width: 4rem;
    height: 4rem;
    border-radius: 2rem;
    text-align: center;
    font-size: xxx-large;
    overflow: hidden;
    /* Required for iOS icons */
    padding: 0;
}

button:active {
    background-color: #fff;
    color: #2088ce;
    border: 1px solid #2088ce;
    transform: translateY(2px);
}

button[color="green"] {
    background-color: #20ce54;
}

button[color="green"]:active {
    background-color: #fff;
    color: #20ce54;
    border: 1px solid #20ce54;
}

button[color="gray"] {
    background-color: gray;
}

button[color="gray"]:active {
    background-color: #fff;
    color: gray;
    border: 1px solid gray;
}

button[color="red"] {
    background-color: rgb(255, 77, 77);
}

button[color="red"]:active {
    background-color: #fff;
    color: rgb(255, 77, 77);
    border: 1px solid rgb(255, 77, 77);
}