/* ==========================================
   Theme Effects
========================================== */

body{

    transition:
        background .3s,
        color .3s;

}

.sidebar,
.header,
.card,
.table-card,
.search-box,
.input,
.icon-btn,
.nav-item,
.btn,
.office-card{

    transition:all .25s ease;

}

/* Glass */

.header{

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

/* Hover */

.card:hover{

    transform:translateY(-4px);

}

.icon-btn:hover{

    transform:translateY(-2px);

}

.btn:hover{

    transform:translateY(-2px);

}

.nav-item:hover{

    transform:translateX(4px);

}

/* Ripple */

.btn{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

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

    transform:scale(0);

    animation:ripple .6s linear;

}

@keyframes ripple{

    to{

        transform:scale(40);

        opacity:0;

    }

}

/* Tooltip */

.tooltip{

    position:fixed;

    background:#111827;

    color:white;

    padding:8px 12px;

    border-radius:10px;

    font-size:13px;

    z-index:9999;

    pointer-events:none;

    animation:fade .2s;

}

[data-theme="dark"] .tooltip{

    background:white;

    color:#111827;

}