/**,
*::before,
*::after {
    transition-property: background-color;
    transition-duration: .4s;
    transition-timing-function: ease;
}*/

.ripple:active {
    background-color: var(--gray100);
    transform: translateY(1px) scale(0.98);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fade {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

.fade.ng-hide {
    opacity: 0;
}

.fade.ng-leave {
    display: none;
}

.fade.ng-hide {
    opacity: 0;
}

.fade.ng-hide-remove,
.fade.ng-hide-add {
    display: block !important; /* or inline-block, as appropriate */
}

.fade.ng-hide-remove {
    transition: all linear 200ms;
}

.fade.ng-hide-add {
    transition: all linear 200ms;
}


@keyframes animation {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.anim {
    animation: animation 1s ease both;
}
.d01 { animation-delay: 0.1s }
.d03 { animation-delay: 0.3s }
.d05 { animation-delay: 0.5s }
.d1 { animation-delay: 1s }
.d15 { animation-delay: 1.5s }
.d2 { animation-delay: 2s }
.d25 { animation-delay: 2.5s }
.d3 { animation-delay: 3s }









*[md-ink-ripple] {
    position: relative;
}


.menu-item {
    position: relative;
    z-index: 3;
    cursor: pointer;
}
.nav-indicator {
    position: absolute;
    z-index: 2;
    top: 8px;
    bottom: 8px;
    left: var(--indicator-left, 16px);
    width: var(--indicator-width, 0px);
    background-color: rgba(0, 123, 255, 0.2);
    border-radius: 32px;
    transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}