/*=========================================================
  BOOK2LOOK PREMIUM BACKGROUND
=========================================================*/

:root{
    --pink:#70004A;
    --orange:#FF7A01;
    --green:#006E6B;
    --maroon:#910000;
    --yellow:#FFD425;
    --blue:#6B8BC8;
    --lightgreen:#9ED424;
    --darkmaroon:#2C0001;
    --gray:#A69F8F;
}
/*====================================================
    BUBBLE BACKGROUND
=====================================================*/
.auth-main{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 30%, rgba(196,205,115,.12), transparent 28%),
        radial-gradient(circle at 85% 80%, rgba(255,200,70,.10), transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 65%),
        #fbfaf5;
}
/* Bubble Layer */
.bubble-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}

/* Common Bubble */
.bubble{
    position:absolute;
    border-radius:50%;
    opacity:0;
    transform:scale(0);
    filter:blur(.5px);
    will-change:transform,opacity;

    animation:
        bubbleBounce .9s cubic-bezier(.175,.885,.32,1.35) forwards,
        bubbleFloat 18s ease-in-out infinite/*,
        bubbleScale 6s ease-in-out infinite;*/
}
/*====================================================
    BUBBLE POSITIONS
=====================================================*/
.bubble-1{
    width:260px;
    height:260px;
    top:-80px;
    left:-80px;
    background:rgba(0,110,107,.20);    
    border: 1px solid rgba(0,110,107,0.30);
    animation-delay:0s,1s,1s;
}
.bubble-2{
    width:170px;height:170px;
    top:40px;right:-40px;
    background:rgba(255,170,40,.22);
    border: 1px solid rgba(255,170,40,0.30);
    animation-delay:.2s,1.2s,1.2s;
}
.bubble-3{
    width:85px;height:85px;
    left:70px;top:180px;
    background:rgba(145,0,0,.24);
    border: 1px solid rgba(145,0,0,0.30);
    animation-delay:.4s,1.4s,1.4s;
}
.bubble-4{
    width:120px;height:120px;
    left:120px;bottom:220px;
    background:rgba(255,210,37,.40);
    border: 1px solid rgba(255,210,37,0.30);
    animation-delay:.6s,1.6s,1.6s;
}
.bubble-5{
    width:280px;height:280px;
    left:-90px;bottom:40px;
    background:rgba(190,190,70,.50);
    border: 1px solid rgba(190,190,70,0.30);
    animation-delay:.8s,1.8s,1.8s;
}
.bubble-6{
    width:90px;height:90px;
    left:38%;top:70px;
    background:rgba(166,159,143,.17);
    border: 1px solid rgba(166,159,143,0.30);
    animation-delay:1s,2s,2s;
}
.bubble-7{
    width:220px;height:220px;
    right:120px;top:20px;
    background:rgba(255,120,120,.20);
    border: 1px solid rgba(255,120,120,0.30);
    animation-delay:1.2s,2.2s,2.2s;
}
.bubble-8{
    width:90px;height:90px;
    right:140px;bottom:250px;
    background:rgba(255,90,90,.18);
    border: 1px solid rgba(255,90,90,0.30);
    animation-delay:1.4s,2.4s,2.4s;
}
.bubble-9{
    width:180px;height:180px;
    left:42%;bottom:-20px;
    background:rgba(160,180,255,.40);
    border: 1px solid rgba(160,180,255,0.30);
    animation-delay:1.6s,2.6s,2.6s;
}
.bubble-10{
    width:240px;height:240px;
    right:-80px;bottom:-40px;
    background:rgba(255,212,37,.40);
    border: 1px solid rgba(255,212,37,0.30);
    animation-delay:1.8s,2.8s,2.8s;
}
.bubble-11{
    width:70px;height:70px;
    left:18%;top:12%;
    background:rgba(255,122,1,.20);
    border: 1px solid rgba(255,122,1,0.30);
    animation-delay:2s,3s,3s;
}
.bubble-12{
    width:90px;height:90px;
    left:28%;top:45%;
    background:rgba(0,110,107,.15);
    border: 1px solid rgba(0,110,107,0.30);
    animation-delay:2.2s,3.2s,3.2s;
}
.bubble-13{
    width:60px;height:60px;
    left:14%;bottom:18%;
    background:rgba(145,0,0,.20);
    border: 1px solid rgba(145,0,0,0.30);
    animation-delay:2.4s,3.4s,3.4s;
}
.bubble-14{
    width:130px;height:130px;
    left:24%;bottom:-20px;
    background:rgba(255,120,120,.40);
    border: 1px solid rgba(255,120,120,0.30);
    animation-delay:2.6s,3.6s,3.6s;
}
.bubble-15{
    width:80px;height:80px;
    left:48%;top:28%;
    background:rgba(145,0,0,.23);
    border: 1px solid rgba(145,0,0,0.30);
    animation-delay:2.8s,3.8s,3.8s;
}
.bubble-16{
    width:180px;height:180px;
    left:52%;bottom:8%;
    background:rgba(255,212,37,.50);
    border: 1px solid rgba(255,212,37,0.30);
    animation-delay:3s,4s,4s;
}
.bubble-17{
    width:75px;height:75px;
    left:60%;top:12%;
    background:rgba(0,110,107,.17);
    border: 1px solid rgba(0,110,107,0.30);
    animation-delay:3.2s,4.2s,4.2s;
}
.bubble-18{
    width:55px;height:55px;
    left:46%;bottom:34%;
    background:rgba(255,122,1,.20);
    border: 1px solid rgba(255,122,1,0.30);
    animation-delay:3.4s,4.4s,4.4s;
}
.bubble-19{
    width:80px;height:80px;
    right:20%;top:8%;
    background:rgba(166,159,143,.17);
    border: 1px solid rgba(166,159,143,0.30);
    animation-delay:3.6s,4.6s,4.6s;
}
.bubble-20{
    width:270px;height:270px;
    right:-90px;bottom:18%;
    background:rgba(0,110,107,.15);
    border: 1px solid rgba(0,110,107,0.30);
    animation-delay:3.8s,4.8s,4.8s;
}
.bubble-21{
    width:65px;height:65px;
    right:30%;top:52%;
    background:rgba(145,0,0,.18);
    border: 1px solid rgba(145,0,0,0.30);
    animation-delay:4s,5s,5s;
}
.bubble-22{
    width:150px;height:150px;
    right:4%;bottom:-30px;
    background:rgba(92, 255, 0, 0.50);
    border: 1px solid rgba(92, 255, 0,0.30);
    animation-delay:4.2s,5.2s,5.2s;
}
.bubble-23{
    width:45px;height:45px;
    left:72%;top:68%;
    background:rgba(255,122,1,.25);
    border: 1px solid rgba(255,122,1,0.30);
    animation-delay:4.4s,5.4s,5.4s;
}
.bubble-24{
    width:55px;height:55px;
    left:78%;top:34%;
    background:rgba(0,110,107,.25);
    border: 1px solid rgba(0,110,107,0.30);
    animation-delay:4.6s,5.6s,5.6s;
}
/*====================================================
    ANIMATIONS
=====================================================*/
@keyframes bubbleBounce{
    0%{
        opacity:0;
        transform:translate(0,0) scale(0);
    }

    60%{
        opacity:.35;
        transform:translate(0,0) scale(1.15);
    }

    75%{
        transform:translate(0,0) scale(.92);
    }

    90%{
        transform:translate(0,0) scale(1.05);
    }

    100%{
        opacity:.28;
        transform:translate(0,0) scale(1);
    }
}
@keyframes bubbleFloat{
    0%,100%{
        translate:0 0;
    }

    20%{
        translate:18px -12px;
    }

    40%{
        translate:-16px -28px;
    }

    60%{
        translate:22px -10px;
    }

    80%{
        translate:-18px 16px;
    }
}
@keyframes bubbleScale{
    0%,100%{
        scale:.8;
    }

    50%{
        scale:1;
    }
}
/* Login Card Above Bubbles */
.login-card,
.auth-card,
.auth-form{
    position:relative;
    z-index:2;
}

/*=========================================================
BOOK COLORS
=========================================================*/
.bg-brand-color-1{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#8fd2c8 0%,#2aa69c 55%,#006e6b 100%);
}
/* Floating Book */
.bg-brand-color-1 img{
    /*width:220px;*/
    z-index:2;
    position:relative;
    animation:
        floatBook 4s ease-in-out infinite,
        glowBook 3s ease-in-out infinite;
    transform-origin:center;
}
/* Up Down */
@keyframes floatBook{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-12px);
    }
    100%{
        transform:translateY(0px);
    }
}