.mycolor {
    color: #999999;
    transition: background-color 500ms;
    padding: 7px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    font-size: 14pt;
}

.mycolor:hover {
    color: #ffffff;
}

.mycolor-1 {
    background-color: #323E36;
}

.mycolor-2 {
    background-color: #19323E;
}

.mycolor-3 {
    background-color: #1E2739;
}

.mycolor-4 {
    background-color: #2F1934;
}

.mycolor-5 {
    background-color: #3B1632;
}

.mycolor-6 {
    background-color: #413033;
}

.mycolor-7 {
    background-color: #484836;
}

.mycolor-8 {
    background-color: #446337; 
}

.mycolor-9 {
    background-color: #2A4C38;
}

.mycolor-1:hover:not(.mycolor-nohover) {
    background-color: #9DC48F;
}

.mycolor-2:hover:not(.mycolor-nohover) {
    background-color: #2C9CB9;
}

.mycolor-3:hover:not(.mycolor-nohover) {
    background-color: #456BD4;
}

.mycolor-4:hover:not(.mycolor-nohover) {
    background-color: #9347C2;
}

.mycolor-5:hover:not(.mycolor-nohover) {
    background-color: #B61490;
}

.mycolor-6:hover:not(.mycolor-nohover) {
    background-color: #B35C7D;
}

.mycolor-7:hover:not(.mycolor-nohover) {
    background-color: #B7B27C;
}

.mycolor-8:hover:not(.mycolor-nohover) {
    background-color: #9AE743;
}

.mycolor-9:hover:not(.mycolor-nohover) {
    background-color: #3CA856;
}

.mycolor-text-1 {
    color: #9DC48F;
}

.mycolor-text-2 {
    color: #2C9CB9;
}

.mycolor-text-3 {
    color: #456BD4;
}

.mycolor-text-4 {
    color: #9347C2;
}

.mycolor-text-5 {
    color: #B61490;
}

.mycolor-text-6 {
    color: #B35C7D;
}

.mycolor-text-7 {
    color: #B7B27C;
}

.mycolor-text-8 {
    color: #9AE743;
}

.mycolor-text-9 {
    color: #3CA856;
}

.btn-small {
    padding: 5px;
    font-size: 12pt;
}