:root {
    --mdc-ripple-theme-primary: #000;
}

.darkTheme {
    --mdc-ripple-theme-primary: #fff;
}

@-webkit-keyframes mdc-ripple-fg-radius-in {
    from {
        -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
        transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
    }

    to {
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
        transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    }
}

@keyframes mdc-ripple-fg-radius-in {
    from {
        -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
        transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
    }

    to {
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
        transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    }
}

@-webkit-keyframes mdc-ripple-fg-opacity-in {
    from {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: 0;
    }

    to {
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
}

@keyframes mdc-ripple-fg-opacity-in {
    from {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: 0;
    }

    to {
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
}

@-webkit-keyframes mdc-ripple-fg-opacity-out {
    from {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }

    to {
        opacity: 0;
    }
}

@keyframes mdc-ripple-fg-opacity-out {
    from {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }

    to {
        opacity: 0;
    }
}

.mdc-ripple-surface {
    --mdc-ripple-fg-size: 0;
    --mdc-ripple-left: 0;
    --mdc-ripple-top: 0;
    --mdc-ripple-fg-scale: 1;
    --mdc-ripple-fg-translate-end: 0;
    --mdc-ripple-fg-translate-start: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    outline: none;
    overflow: hidden;
}

    .mdc-ripple-surface::before, .mdc-ripple-surface::after {
        position: absolute;
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        content: "";
    }

    .mdc-ripple-surface::before {
        transition: opacity 15ms linear, background-color 15ms linear;
        z-index: 1;
    }

    .mdc-ripple-surface.mdc-ripple-upgraded::before {
        -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
        transform: scale(var(--mdc-ripple-fg-scale, 1));
    }

    .mdc-ripple-surface.mdc-ripple-upgraded::after {
        top: 0;
        /* @noflip */
        left: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }

    .mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
        top: var(--mdc-ripple-top, 0);
        /* @noflip */
        left: var(--mdc-ripple-left, 0);
    }

    .mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
        -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
        animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
    }

    .mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
        -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
        animation: mdc-ripple-fg-opacity-out 150ms;
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
        transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    }

    .mdc-ripple-surface::before, .mdc-ripple-surface::after {
        background-color: var(--mdc-ripple-theme-primary, #000) !important;
    }

    .mdc-ripple-surface:hover::before {
        opacity: 0.04;
    }

    .mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
        transition-duration: 75ms;
        opacity: 0.12;
    }

    .mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
        transition: opacity 150ms linear;
    }

    .mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
        transition-duration: 75ms;
        opacity: 0.12;
    }

    .mdc-ripple-surface.mdc-ripple-upgraded {
        --mdc-ripple-fg-opacity: 0.12;
    }

    .mdc-ripple-surface::before, .mdc-ripple-surface::after {
        top: calc(50% - 100%);
        /* @noflip */
        left: calc(50% - 100%);
        width: 200%;
        height: 200%;
    }

    .mdc-ripple-surface.mdc-ripple-upgraded::after {
        width: var(--mdc-ripple-fg-size, 100%);
        height: var(--mdc-ripple-fg-size, 100%);
    }

    .mdc-ripple-surface[data-mdc-ripple-is-unbounded] {
        overflow: visible;
    }

        .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after {
            top: calc(50% - 50%);
            /* @noflip */
            left: calc(50% - 50%);
            width: 100%;
            height: 100%;
        }

        .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
            top: var(--mdc-ripple-top, calc(50% - 50%));
            /* @noflip */
            left: var(--mdc-ripple-left, calc(50% - 50%));
            width: var(--mdc-ripple-fg-size, 100%);
            height: var(--mdc-ripple-fg-size, 100%);
        }

        .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
            width: var(--mdc-ripple-fg-size, 100%);
            height: var(--mdc-ripple-fg-size, 100%);
        }

.mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after {
    background-color: #6200ee;
    /* @alternate */
    background-color: var(--mdc-theme-primary, #6200ee);
}

.mdc-ripple-surface--primary:hover::before {
    opacity: 0.04;
}

.mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before {
    transition-duration: 75ms;
    opacity: 0.12;
}

.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear;
}

.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.12;
}

.mdc-ripple-surface--primary.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: 0.12;
}

.mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after {
    background-color: #018786;
    /* @alternate */
    background-color: var(--mdc-theme-secondary, #018786);
}

.mdc-ripple-surface--accent:hover::before {
    opacity: 0.04;
}

.mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before {
    transition-duration: 75ms;
    opacity: 0.12;
}

.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear;
}

.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.12;
}

.mdc-ripple-surface--accent.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: 0.12;
}