#yys-page-progress {
    position: fixed;
    z-index: 2147483000;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

#yys-page-progress.is-active {
    opacity: 1;
}

#yys-page-progress .yys-progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: #2874e8;
    background: linear-gradient(90deg, #2874e8, #439cff 65%, #74d4ff);
    box-shadow: 0 0 10px rgba(40, 116, 232, .45);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms ease-out;
}

#yys-page-progress.is-complete {
    opacity: 0;
    transition-delay: 180ms;
}

.yys-content-enter {
    animation: yys-content-enter 280ms ease-out both;
}

.yys-click-ripple {
    position: fixed;
    z-index: 2147483001;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border: 2px solid rgba(50, 137, 245, .55);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 175, 255, .2), rgba(92, 175, 255, 0) 72%);
    pointer-events: none;
    animation: yys-click-ripple 540ms cubic-bezier(.15, .55, .3, 1) forwards;
}

html[data-yys-effects] .pn,
html[data-yys-effects] button,
html[data-yys-effects] input[type="button"],
html[data-yys-effects] input[type="submit"],
html[data-yys-effects] a.btn,
html[data-yys-effects] a.pnc {
    transition: transform 160ms ease, box-shadow 180ms ease, filter 180ms ease;
}

html[data-yys-effects] .pn:active,
html[data-yys-effects] button:active,
html[data-yys-effects] input[type="button"]:active,
html[data-yys-effects] input[type="submit"]:active,
html[data-yys-effects] a.btn:active,
html[data-yys-effects] a.pnc:active {
    transform: translateY(1px) scale(.98);
}

html[data-yys-effects] a:focus-visible,
html[data-yys-effects] button:focus-visible,
html[data-yys-effects] input[type="button"]:focus-visible,
html[data-yys-effects] input[type="submit"]:focus-visible {
    outline: 2px solid #398af0;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    html[data-yys-effects] .fl_tb td,
    html[data-yys-effects] .tl tbody tr {
        transition: background-color 180ms ease, box-shadow 180ms ease;
    }

    html[data-yys-effects] .fl_tb td:hover {
        background-color: rgba(58, 139, 240, .045);
        box-shadow: inset 0 0 0 1px rgba(58, 139, 240, .12);
    }

    html[data-yys-effects] .tl tbody tr:hover {
        background-color: rgba(58, 139, 240, .045);
    }

    html[data-yys-effects] .pn:hover,
    html[data-yys-effects] button:hover,
    html[data-yys-effects] a.btn:hover {
        filter: brightness(1.04);
        box-shadow: 0 3px 10px rgba(35, 91, 160, .12);
    }
}

@keyframes yys-content-enter {
    from {
        opacity: .65;
    }
    to {
        opacity: 1;
    }
}

@keyframes yys-click-ripple {
    from {
        opacity: .85;
        transform: scale(.25);
    }
    to {
        opacity: 0;
        transform: scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    #yys-page-progress,
    #yys-page-progress .yys-progress-bar,
    html[data-yys-effects] .pn,
    html[data-yys-effects] button,
    html[data-yys-effects] input[type="button"],
    html[data-yys-effects] input[type="submit"],
    html[data-yys-effects] a.btn,
    html[data-yys-effects] a.pnc,
    html[data-yys-effects] .fl_tb td,
    html[data-yys-effects] .tl tbody tr {
        transition: none;
    }

    .yys-content-enter,
    .yys-click-ripple {
        animation: none;
    }

    .yys-click-ripple {
        display: none;
    }

    html[data-yys-effects] .pn:active,
    html[data-yys-effects] button:active,
    html[data-yys-effects] input[type="button"]:active,
    html[data-yys-effects] input[type="submit"]:active,
    html[data-yys-effects] a.btn:active,
    html[data-yys-effects] a.pnc:active {
        transform: none;
    }
}