.outline-blue {
    border-color: mediumblue;
    color: mediumblue;
    background-color: none;
}

.solid-blue {
    color: whitesmoke;
    background-color: mediumblue;
}

.outline-red {
    border-color: darkred;
    color: darkred;
    background-color: none;
}

.solid-red {
    color: whitesmoke;
    background-color: darkred;
}

.outline-green {
    border-color: forestgreen;
    color: forestgreen;
    background-color: none;
}

.solid-green {
    color: whitesmoke;
    background-color: forestgreen;
}

.outline-yellow {
    border-color: goldenrod;
    color: goldenrod;
    background-color: none;
}

.solid-yellow {
    color: whitesmoke;
    background-color: goldenrod;
}

.outline-white {
    border-color: white;
    color: white;
    background-color: none !important;
}

.solid-white {
    color: black;
    background-color: white;
}

.outline-black {
    border-color: black;
    color: black;
    background-color: none !important;
}

.solid-black {
    color: white;
    background-color: black;
}

.solid-light-blue {
    color: white;
    background-color: cornflowerblue
}

.toolbar-button-24 {
    display: block;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    line-height: .5;
    padding: 2px;
}

.solid-grey {
    color: black;
    background-color: grey;
}

.solid-dark-grey {
    color: whitesmoke;
    background-color: #888888;
}

.toolbar-button-20 {
    display: block;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    line-height: .5;
    padding: 2px;
    font-size: smaller;
}

.toolbar-button-16 {
    display: block;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    line-height: .5;
    padding: 2px;
    font-size: x-small;
}

.transparent-button {
    border: none;
    outline: none;
    background: none;
}

    .transparent-button.outline-white {
        background: none;
        border: solid;
        border-width: 1px;
    }

    .transparent-button.outline-black {
        background: none;
        border: solid;
        border-width: 1px;
    }