/* ==========================================================
   Waste Water Monitoring
   animation.css
========================================================== */

/* ===========================
   FADE IN
=========================== */

.fade-in{
    animation:fadeIn .6s ease;
}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* ===========================
   SLIDE UP
=========================== */

.slide-up{
    animation:slideUp .5s ease;
}

@keyframes slideUp{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ===========================
   SCALE
=========================== */

.scale-in{
    animation:scaleIn .4s ease;
}

@keyframes scaleIn{

    from{
        opacity:0;
        transform:scale(.9);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

/* ===========================
   CARD UPDATE
=========================== */

.card-update{
    animation:cardUpdate .55s ease;
}

@keyframes cardUpdate{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }

}

/* ===========================
   VALUE FLASH
=========================== */

.value-update{

    animation:valueUpdate .45s;

}

@keyframes valueUpdate{

    0%{

        color:#FFFFFF;

        transform:scale(1);

    }

    35%{

        color:var(--primary);

        transform:scale(1.10);

    }

    100%{

        color:inherit;

        transform:scale(1);

    }

}

/* ===========================
   LED BLINK
=========================== */

.led.online{

    animation:ledBlink 2s infinite;

}

.led.offline{

    animation:ledBlinkOff 2s infinite;

}

@keyframes ledBlink{

    0%{

        opacity:1;

        box-shadow:0 0 5px #55ff55;

    }

    50%{

        opacity:.45;

        box-shadow:0 0 18px #55ff55;

    }

    100%{

        opacity:1;

        box-shadow:0 0 5px #55ff55;

    }

}

@keyframes ledBlinkOff{

    0%{

        opacity:1;

        box-shadow:0 0 5px #fa0202;

    }

    50%{

        opacity:.45;

        box-shadow:0 0 18px #fa0202;

    }

    100%{

        opacity:1;

        box-shadow:0 0 5px #fa0202;

    }

}

/* ===========================
   WARNING PULSE
=========================== */

.warning-pulse{

    animation:warningPulse 1s infinite;

}

@keyframes warningPulse{

    0%{

        box-shadow:0 0 0 rgba(255,193,7,0);

    }

    50%{

        box-shadow:0 0 22px rgba(255,193,7,.7);

    }

    100%{

        box-shadow:0 0 0 rgba(255,193,7,0);

    }

}

/* ===========================
   DANGER PULSE
=========================== */

.danger-pulse{

    animation:dangerPulse .8s infinite;

}

@keyframes dangerPulse{

    0%{

        box-shadow:0 0 0 rgba(255,80,80,0);

    }

    50%{

        box-shadow:0 0 24px rgba(255,80,80,.85);

    }

    100%{

        box-shadow:0 0 0 rgba(255,80,80,0);

    }

}

/* ===========================
   SHIMMER LOADING
=========================== */

.loading{

    position:relative;

    overflow:hidden;

}

.loading::after{

    content:"";

    position:absolute;

    top:0;
    left:-150%;

    width:70%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );

    animation:shimmer 1.5s infinite;

}

@keyframes shimmer{

    from{

        left:-150%;

    }

    to{

        left:150%;

    }

}

/* ===========================
   ROTATE
=========================== */

.rotate{

    animation:rotate360 1s linear infinite;

}

@keyframes rotate360{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ===========================
   TOAST
=========================== */

.toast{

    position:fixed;

    top:25px;

    right:25px;

    min-width:320px;

    padding:18px;

    border-radius:12px;

    background:#222D35;

    border-left:6px solid var(--primary);

    color:#FFF;

    box-shadow:0 10px 25px rgba(0,0,0,.4);

    animation:toastShow .35s ease;

    z-index:99999;

}

.toast.success{

    border-left-color:var(--success);

}

.toast.warning{

    border-left-color:var(--warning);

}

.toast.danger{

    border-left-color:var(--danger);

}

@keyframes toastShow{

    from{

        opacity:0;

        transform:translateX(100%);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.toast-hide{

    animation:toastHide .35s forwards;

}

@keyframes toastHide{

    from{

        opacity:1;

        transform:translateX(0);

    }

    to{

        opacity:0;

        transform:translateX(100%);

    }

}

/* ===========================
   NUMBER GLOW
=========================== */

.number-glow{

    text-shadow:
        0 0 8px rgba(0,207,255,.45),
        0 0 18px rgba(0,207,255,.25);

}

/* ===========================
   HOVER LIFT
=========================== */

.hover-lift{

    transition:.25s;

}

.hover-lift:hover{

    transform:translateY(-5px);

}

/* ===========================
   BUTTON RIPPLE
=========================== */

.ripple{

    position:relative;

    overflow:hidden;

}

.ripple::after{

    content:"";

    position:absolute;

    width:12px;
    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    transform:scale(0);

    opacity:0;

    pointer-events:none;

}

.ripple:active::after{

    left:50%;
    top:50%;

    transform:translate(-50%,-50%) scale(15);

    opacity:1;

    transition:
        transform .45s,
        opacity .45s;

}

/* ===========================
   PAGE LOADER
=========================== */

.page-loader{

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:#161D22;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.page-loader.hide{

    animation:loaderHide .45s forwards;

}

@keyframes loaderHide{

    to{

        opacity:0;

        visibility:hidden;

    }

}

/* ===========================
   SPINNER
=========================== */

.spinner{

    width:65px;
    height:65px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.12);

    border-top:5px solid var(--primary);

    animation:rotate360 .8s linear infinite;

}

/* ===========================
   TABLE ROW FLASH
=========================== */

.flash-row{

    animation:flashRow .8s;

}

@keyframes flashRow{

    0%{

        background:rgba(0,207,255,.35);

    }

    100%{

        background:transparent;

    }

}

/* ===========================
   CHART FADE
=========================== */

.chart-refresh{

    animation:chartRefresh .5s;

}

@keyframes chartRefresh{

    from{

        opacity:.3;

    }

    to{

        opacity:1;

    }

}