/* ==========================================================================
   10. Modern inline states and animation
   ========================================================================== */

@keyframes mlc-inline-animate {
	from {
	}

	to {
	}
}

@keyframes mlc-width-collapse {
	from {
		max-width: 180px;
	}

	to {
		max-width: 0;
	}
}

@keyframes mlc-width-collapse-40 {
	from {
		max-width: 180px;
	}

	to {
		max-width: 40px;
	}
}

@keyframes mlc-slide-collapse {
	from {
		transform: translate(0,0) scale(1,1);
	}

	to {
		transform: translate(50%,50%) scale(0,0);
	}
}

@keyframes mlc-scale-collapse {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(0);
	}
}

@keyframes mlc-rotate-collapse {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(180deg);
	}
}

@keyframes mlc-opacity-collapse {
	from {
		opacity: 1;
	}

	50% {
		opacity: .01;
	}

	to {
		opacity: 0;
	}
}

mlc-inline.mlc-state-collapsing,
mlc-inline.mlc-state-expanding {
	animation: mlc-inline-animate linear .34s;
}

.mlc-state-collapsing mlc-layout {
	animation: mlc-slide-collapse ease-in .34s;
}

.mlc-state-expanding mlc-layout {
	animation: mlc-slide-collapse reverse ease-out .34s;
}

.mlc-state-expanding mlc-floatbtn-close svg {
	animation: mlc-rotate-collapse reverse linear .34s, mlc-opacity-collapse reverse linear .34s;
}

.mlc-state-collapsing mlc-floatbtn-close svg {
	animation: mlc-rotate-collapse linear .34s, mlc-opacity-collapse linear .34s;
}

.mlc-state-expanding mlc-floatbtn-flyup svg {
	animation: mlc-opacity-collapse linear .34s, mlc-scale-collapse linear .34s;
}

.mlc-state-collapsing mlc-floatbtn-flyup svg {
	animation: mlc-opacity-collapse reverse linear .34s, mlc-scale-collapse reverse linear .34s;
}

.mlc-state-expanding .mlc-floatbtn-barmode-text mlc-floatbtn-content {
	animation: mlc-width-collapse-40 ease-out .34s;
	overflow: hidden;
}

.mlc-state-collapsing .mlc-floatbtn-barmode-text mlc-floatbtn-content {
	animation: mlc-width-collapse-40 reverse ease-out .34s;
}

.mlc-state-expanding .mlc-floatbtn-barmode-texticon mlc-floatbtn-content,
.mlc-state-expanding .mlc-floatbtn-barmode-icontext mlc-floatbtn-content {
	animation: mlc-width-collapse ease-out .34s;
	overflow: hidden;
}

.mlc-state-collapsing .mlc-floatbtn-barmode-texticon mlc-floatbtn-content,
.mlc-state-collapsing .mlc-floatbtn-barmode-icontext mlc-floatbtn-content {
	animation: mlc-width-collapse reverse ease-out .34s;
}

.mlc-state-collapsing mlc-floatbtn-close,
.mlc-state-expanding mlc-floatbtn-close {
	position: absolute;
	top: 0;
	left: 0;
}

.mlc-state-collapsed mlc-layout {
	display: none;
}

.mlc-state-expanded mlc-floatbtn-content {
	display: none;
}

.mlc-state-expanded mlc-quicktip,
.mlc-state-expanded mlc-floattip,
.mlc-state-expanding mlc-quicktip,
.mlc-state-expanding mlc-floattip,
.mlc-state-collapsing mlc-quicktip,
.mlc-state-collapsing mlc-floattip {
	display: none;
}

/* Dashboard config: UIDisableBarAnimation */
.mylivechat_no_animation,
.mylivechat_no_animation * {
	animation: none !important;
	transition: none !important;
}