:root{
    --indigo: #3f51b5;
    --primary: #3f51b5;
    /* --primary: #57c8e1; */
    --secondary: #7986cb;
    --accent: #F44336;
    /* --accent: #e157c8; */
    --disabled: #6c757d;
    --background: #e8eaf6;
    --mdb-primary-rgb: 63,81,181!important; /* 63 81 181 is #3f51b5 */
    --pony-club-purple: #691f74;
    --pony-club-purple-alternate: #c98bdb;
    --pony-club-gold: #cb9700;
    --pony-club-gold-alternate: #fedb00;
    --pony-club-blue: #b8d8eb;
    --pony-club-blue-alternate: #002169;
}
.bg-pony-club{
    background-color: var(--pony-club-purple);
    background-image: linear-gradient(
        135deg,
        var(--pony-club-purple) 0%,
        var(--pony-club-purple) 33.333%,
        var(--pony-club-gold) 33.333%,
        var(--pony-club-gold) 66.666%,
        var(--pony-club-blue) 66.666%,
        var(--pony-club-blue) 100%
    );
    color: white;
    border: 1px solid var(--pony-club-blue-alternate);
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.18);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bg-pony-club:hover,
.bg-pony-club:focus,
.bg-pony-club:active{
    background-image: linear-gradient(
        135deg,
        var(--pony-club-purple-alternate) 0%,
        var(--pony-club-purple-alternate) 33.333%,
        var(--pony-club-gold-alternate) 33.333%,
        var(--pony-club-gold-alternate) 66.666%,
        var(--pony-club-blue-alternate) 66.666%,
        var(--pony-club-blue-alternate) 100%
    );
    color: white;
    border-color: var(--pony-club-blue-alternate);
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.24);
}