.ui-e-fluid-canvas
{
    position: absolute;
    border-radius: inherit;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    --ui-fluid-1: #ecbec4;
    --ui-fluid-2: #eed5b6;
    --ui-fluid-3: #93d6eb;
    --ui-fluid-4: #a8e2c4;
}
.ui-fluid-gradient
{
    background: radial-gradient(circle at 80% 3%,var(--ui-fluid-1),rgba(255,255,255,0) 35%),radial-gradient(circle at 60% 60%,var(--ui-fluid-3),rgba(255,255,255,0) 45%),radial-gradient(circle at 36% 65%,var(--ui-fluid-1),rgba(255,255,255,0) 9%);
    background-size: 200% 200%;
    opacity: 0;
    transition: all .5s;
}
.ui-fluid-gradient:after
{
    content: "";
    position: absolute;
    border-radius: inherit;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 55%,var(--ui-fluid-1),rgba(255,255,255,0) 25%),radial-gradient(circle at 40% 15%,var(--ui-fluid-2),rgba(255,255,255,0) 26%),radial-gradient(circle at 80% 3%,#fff,rgba(255,255,255,0) 15%),radial-gradient(circle at 43% 82%,var(--ui-fluid-3),rgba(255,255,255,0) 19%);
    background-size: 200% 200%;
}
.has-ui-fluid-gradient .ui-fluid-gradient
{
    opacity: 1;
}
.ui-fluid-gradient-wrapper:after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 40% 50%,var(--ui-fluid-4),rgba(255,255,255,0) 30%),radial-gradient(circle at 74% 69%,var(--ui-fluid-3),rgba(255,255,255,0) 20%),radial-gradient(circle at 10% 33%,var(--ui-fluid-1),rgba(255,255,255,0) 25%),radial-gradient(ellipse 122% 172%,var(--ui-fluid-4) rgba(255,255,255,0) 50%);
    background-size: 180% 190%;
}
.ui-fluid-animation-1 .ui-fluid-gradient
{
    animation: testalt4 15s linear infinite;
}
.ui-fluid-animation-1 .ui-fluid-gradient:after
{
    animation: testalt2 17s linear infinite;
}
.ui-fluid-animation-1 .ui-fluid-gradient-wrapper:after
{
    animation: test 12s linear infinite;
}
.ui-fluid-animation-2 .ui-fluid-gradient
{
    animation: testalt3 14s linear infinite;
}
.ui-fluid-animation-2 .ui-fluid-gradient:after
{
    animation: testalt2 20s linear infinite;
}
.ui-fluid-animation-2 .ui-fluid-gradient-wrapper:after
{
    animation: test 12s linear infinite;
}
.ui-fluid-animation-3 .ui-fluid-gradient
{
    animation: testalt2 15s linear infinite;
}
.ui-fluid-animation-3 .ui-fluid-gradient:after
{
    animation: test 25s linear infinite;
}
.ui-fluid-animation-3 .ui-fluid-gradient-wrapper:after
{
    animation: testalt3 18s linear infinite;
}
.ui-fluid-animation-4 .ui-fluid-gradient
{
    animation: testalt3 16s linear infinite;
}
.ui-fluid-animation-4 .ui-fluid-gradient:after
{
    animation: testalt2 15s linear infinite;
}
.ui-fluid-animation-4 .ui-fluid-gradient-wrapper:after
{
    animation: test 28s linear infinite;
}
.ui-fluid-animation-5 .ui-fluid-gradient
{
    animation: testalt3 7s linear infinite;
}
.ui-fluid-animation-5 .ui-fluid-gradient:after
{
    animation: testalt2 20s linear infinite;
}
.ui-fluid-animation-5 .ui-fluid-gradient-wrapper:after
{
    animation: test 12s linear infinite;
}
@keyframes test
{
    0%
    {
        background-position: 10% 10%;
    }
    20%
    {
        background-position: 10% 40%;
    }
    35%
    {
        background-position: 50% 80%;
    }
    55%
    {
        background-position: 90% 90%;
    }
    80%
    {
        background-position: 60% 70%;
    }
    100%
    {
        background-position: 10% 10%;
    }
}
@keyframes testalt2
{
    0%
    {
        background-position: 10% 28%;
        opacity: .8;
    }
    16%
    {
        background-position: 10% 40%;
        opacity: .3;
    }
    25%
    {
        background-position: 50% 50%;
        opacity: 1;
    }
    50%
    {
        background-position: 55% 90%;
        opacity: .6;
    }
    50%
    {
        background-position: 42% 70%;
        opacity: 1;
    }
    100%
    {
        background-position: 19% 50%;
        opacity: .5;
    }
}
@keyframes testalt3
{
    0%
    {
        background-position: 50% 80%;
        opacity: 1;
    }
    10%
    {
        background-position: 60% 70%;
        opacity: 1;
    }
    20%
    {
        background-position: 10% 10%;
        opacity: .8;
    }
    30%
    {
        background-position: 10% 30%;
        opacity: 1;
    }
    40%
    {
        background-position: 10% 40%;
        opacity: .6;
    }
    50%
    {
        background-position: 50% 80%;
        opacity: .1;
    }
    60%
    {
        background-position: 55% 50%;
        opacity: .4;
    }
    70%
    {
        background-position: 60% 25%;
        opacity: 1;
    }
    80%
    {
        background-position: 40% 12%;
        opacity: 0;
    }
    90%
    {
        background-position: 53% 45%;
        opacity: .7;
    }
    100%
    {
        background-position: 50% 80%;
        opacity: 1;
    }
}
@keyframes testalt4
{
    0%
    {
        background-position: 50% 80%;
        opacity: 1;
    }
    20%
    {
        background-position: 60% 70%;
        opacity: 1;
    }
    40%
    {
        background-position: 10% 10%;
        opacity: .8;
    }
    60%
    {
        background-position: 10% 10%;
        opacity: 1;
    }
    80%
    {
        background-position: 10% 40%;
        opacity: .9;
    }
    100%
    {
        background-position: 50% 80%;
        opacity: 1;
    }
}