.invalid-feedback {
    display: inline-block;
}
[v-cloak] {
    display: none;
}
.unusable {
    pointer-events: none;
    opacity: .7;
}
button[disabled], a[disabled] {
    pointer-events: none;
    opacity: .4;
}
span.user-bal {
    font-weight: bold;
    font-size: 20px;
}

/* Overlay for the wheel section to prevent click */
div.s-wheel-ctn-div {
    position: relative;
}
div.s-wheel-ctn-div > div.overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    /* background: rgba(0, 0, 0, 0.8); */
    /* opacity: .5; */
    /* transition: all .3s; */
    z-index: 2;
}
.shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/*
 * Password show/hide toggle buttons. Deliberately not using
 * .btn-outline-secondary here: this app's dark-purple theme recolors
 * that class to #1a0031 (near-black), which is invisible against the
 * dark-purple modal backgrounds these buttons appear in. Fixed colors
 * instead, legible on both the light auth pages and the dark modals.
 */
.toggle-password {
    color: #6c757d !important;
    border-color: #6c757d !important;
    background-color: transparent !important;
}
.toggle-password:hover,
.toggle-password:focus {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}