.rippleEffect {
    position: relative;
    overflow: hidden;
}
.ripple {
    position: absolute;
    background: rgba(0, 0, 0, .3);
    color: rgba(0, 0, 0, .3) !important;
    border-radius: 100%;
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
    pointer-events: none;
    -webkit-animation: ripple 1s ease-out;
    animation: ripple 1s ease-out;
}
@-webkit-keyframes ripple {
    from {
        opacity: 1;
    }
    to {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes ripple {
    from {
        opacity: 1;
    }
    to {
        -webkit-transform: scale(2);
        -webkit-transform: scale(2);
        transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}
.progressIndicatorArea.linear.indeterminate .indicator {
    -webkit-animation: progressBarLinearIndeterminate 3s ease-out infinite;
    animation: progressBarLinearIndeterminate 3s ease-out infinite;
}
.progressIndicatorArea.linear.indeterminate .track:after {
    -webkit-animation: progressBarLinearIndeterminate 3s ease-out infinite;
    animation: progressBarLinearIndeterminate 3s ease-out infinite;
    animation-delay: 1.5s;
}
@keyframes progressBarLinearIndeterminate {
    0% {
        width: 0%;
        left: 0;
    }
    60% {
        width: 70%;
    }
    70% {
        width: 90%;
    }
    80% {
        width: 0%;
        left: 100%;
    }
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes progressBarRotateIndeterminate {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}
@keyframes progressBarRotateIndeterminate {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}
[data-dropdown],
.expanded,
.dropdownIcon i,
.expanded .dropdownIcon i,
.bottomNavBox,
.snackbarBox,
.snackbarBox.active,
.fabArea .menu,
.progressIndicatorArea,
.progressIndicatorArea.active,
.progressIndicatorArea .track,
.progressIndicatorArea.active .track,
.timePickerArea .clockInput,
.timePickerArea.clock .clockInput,
.timePickerArea.keyboard .clockInput {
    -webkit-transition: .5s ease all;
    -moz-transition: .5s ease all;
    -ms-transition: .5s ease all;
    -o-transition: .5s ease all;
    transition: .5s ease all;
}
.button i,
.fab,
.action.active .fab,
.fabArea.relatedFab .fabCtrl.expanded i,
.fabArea.relatedFab .fabCtrl i,
.fabArea.expanded .menu,
.fabArea.relatedMenu .menu,
.fabArea.relatedMenu .relatedActionsArea,
.fabArea.relatedMenu.expanded .relatedActionsArea,
.fabArea.relatedMenu.expanded .fab,
.fabArea.relatedMenu .fab,
.switch .thumb,
.switchArea .checked .switch .thumb,
.snackbarListArea,
.snackbarListArea.active,
.timePickerArea.keyboard .clockInput,
.newOptionArea.focus .label,
.newOptionArea.data .label,
.newOptionArea.focus input,
.newOptionArea.data input {
    -webkit-transition: .2s ease-out all;
    -moz-transition: .2s ease-out all;
    -ms-transition: .2s ease-out all;
    -o-transition: .2s ease-out all;
    transition: .2s ease-out all;
}
.appBarArea,
.appBarArea.top.hide,
.appBarArea.top .appBarBox,
.appBarArea.top.compressed .appBarBox,
.appBarArea.top .appBarSection.txt,
.appBarArea.top.compressed .appBarSection.txt,
.appBarArea.top .appBarSection.txt .appBarTitle,
.appBarArea.top.compressed .appBarSection.txt .appBarTitle,
.appBarArea.bottom.hide,
.bannerArea .bannerBox,
.bannerArea.opened .bannerBox,
.tooltip,
.tooltip.hover,
.compressed,
.appBarArea.top .hamburgerBtn,
.chip.toggleIcon .iconBox.sx,
.chip.toggleIcon.checked .iconBox.sx,
.chip.icon.sx .iconBox.sx.img .overlay,
.chip.icon.sx.checked .iconBox.sx.img .overlay,
.fabArea.collapse .fabLabel span,
.fabArea.collapse.collapsed .fabLabel span,
.switchArea .selControl.checked .switch:before,
.switchArea .selControl .switch:before,
.switch .thumb:before,
.ui-sortable-handle {
    -webkit-transition: ease all .2s;
    -moz-transition: ease all .2s;
    -ms-transition: ease all .2s;
    -o-transition: ease all .2s;
    transition: ease all .2s;
}
.ripple {
    -webkit-animation: ripple .8s ease-out;
    -moz-animation: ripple .8s ease-out;
    -ms-animation: ripple .8s ease-out;
    -o-animation: ripple .8s ease-out;
    animation: ripple .8s ease-out;
}