*, *:after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'icomoon';
	src:url('fonts/icomoon/icomoon.eot');
	src:url('fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon/icomoon.ttf') format('truetype'),
		url('fonts/icomoon/icomoon.woff') format('woff'),
		url('fonts/icomoon/icomoon.svg#icomoon') format('svg');
}

/* General styles for all types of buttons */
.progress-button {
	position: relative;
	/* background: var(--progress-button-color); */
	/* display: inline-block;
	padding: 0 60px;
	outline: none;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1em;
	line-height: 4; */
	border: none;
	/* -webkit-transition: background-color 0.5s;
	transition: background-color 0.5s; */
}

.progress-button[disabled],
.progress-button[disabled].state-loading {
	cursor: default;
}

.progress-button .content {
	position: relative;
	display: block;
	border-radius: var(--progress-button-border-radius) !important;
	border: var(--progress-button-border) !important;
	box-shadow: var(--progress-button-box-shadow) !important;
	padding: var(--progress-button-padding) !important;
	transition: inherit !important;
}

/* .progress-button:not(:disabled) .content:hover {
	background-color: inherit !important;
    border-color: inherit !important;
} */

.progress-button .content::after  {
	content: '';
	position: absolute;
	right: 20px;
	color: var(--progress-button-fill-color);
	font-family: "icomoon";
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.progress-button[data-show-status-icon="true"].state-success .content::after {
	content: "\e600" !important; /* Checkmark for success */
	opacity: 1;
}

.progress-button[data-show-status-icon="true"].state-error .content::after {
	content: "\e601" !important; /* Cross for error */
	opacity: 1;
}

.notransition {
	-webkit-transition: none !important;
	transition: none !important;
}

.progress-button .progress-bar-stroke {
	background: var(--progress-button-stroke-color);
}

.progress-button .progress-bar-fill {
	position: absolute;
	left: 0;
	background: var(--progress-button-fill-color);
}

.progress-button[data-animation-direction="horizontal"] .progress-bar-fill {
	top: 0;
	width: 0;
	height: 100%;
	-webkit-transition: width 0.3s, opacity 0.3s;
	transition: width 0.3s, opacity 0.3s;
}

.progress-button[data-animation-direction="vertical"] .progress-bar-fill {
	bottom: 0;
	width: 100%;
	height: 0;
	-webkit-transition: height 0.3s, opacity 0.3s;
	transition: height 0.3s, opacity 0.3s;
}

/* Necessary 3d styles for buttons with perspective */

.progress-button[data-perspective] {
	position: relative;
	display: inline-block;
	padding: 0;
	background: transparent;
	-webkit-perspective: 900px;
	perspective: 900px;
}

.progress-button[data-perspective] .content {
	padding: var(--progress-button-padding);
	background: var(--progress-button-color);
}

.progress-button[data-perspective] .progress-wrap {
	display: block;
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.progress-button[data-perspective] .content,
.progress-button[data-perspective] .progress-bar-stroke {
	outline: 1px solid rgba(0,0,0,0); /* Smoothen jagged edges in FF */
}

/* Individual styles */
/* Choose the effect(s) you want, delete the rest */

/* Fill horizontal */
/* ====================== */

.progress-button[data-animation-type="fill"][data-animation-direction="horizontal"] {
	overflow: hidden;
}

.progress-button[data-animation-type="fill"][data-animation-direction="horizontal"] .content {
	z-index: 10;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.progress-button[data-show-status-icon="true"][data-animation-type="fill"][data-animation-direction="horizontal"] .content::after {
	top: 100%;
	right: auto;
	left: 50%;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.progress-button[data-animation-type="fill"][data-animation-direction="horizontal"].state-success .content,
.progress-button[data-animation-type="fill"][data-animation-direction="horizontal"].state-error .content {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

/* Fill vertical */
/* ====================== */

.progress-button[data-animation-type="fill"][data-animation-direction="vertical"] {
	overflow: hidden;
}

.progress-button[data-animation-type="fill"][data-animation-direction="vertical"] .content {
	z-index: 10;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.progress-button[data-show-status-icon="true"][data-animation-type="fill"][data-animation-direction="vertical"] .content::after {
	top: 100%;
	right: auto;
	left: 50%;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.progress-button[data-animation-type="fill"][data-animation-direction="vertical"].state-success .content,
.progress-button[data-animation-type="fill"][data-animation-direction="vertical"].state-error .content {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

/* Shrink horizontal */
/* ====================== */

.progress-button[data-animation-type="shrink"] { /* common for horizontal and vertical */
	overflow: hidden;
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
}

.progress-button[data-animation-type="shrink"][data-animation-direction="horizontal"] .content {
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.progress-button[data-show-status-icon="true"][data-animation-type="shrink"][data-animation-direction="horizontal"] .content::after {
	top: 100%;
	right: auto;
	left: 50%;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.progress-button[data-animation-type="shrink"][data-animation-direction="horizontal"].state-loading {
	-webkit-transform: scaleY(0.3);
	transform: scaleY(0.3);
}

.progress-button[data-animation-type="shrink"][data-animation-direction="horizontal"].state-loading .content {
	opacity: 0;
}

.progress-button[data-animation-type="shrink"][data-animation-direction="horizontal"].state-success .content,
.progress-button[data-animation-type="shrink"][data-animation-direction="horizontal"].state-error .content {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

/* Shrink vertical */
/* ====================== */

.progress-button[data-animation-type="shrink"][data-animation-direction="vertical"] .content {
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.progress-button[data-show-status-icon="true"][data-animation-type="shrink"][data-animation-direction="vertical"] .content::after {
	top: 100%;
	right: auto;
	left: 50%;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.progress-button[data-animation-type="shrink"][data-animation-direction="vertical"].state-loading {
	-webkit-transform: scaleX(0.1);
	transform: scaleX(0.1);
}

.progress-button[data-animation-type="shrink"][data-animation-direction="vertical"].state-loading .content {
	opacity: 0;
}

.progress-button[data-animation-type="shrink"][data-animation-direction="vertical"].state-success .content,
.progress-button[data-animation-type="shrink"][data-animation-direction="vertical"].state-error .content {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

/* Rotate bottom 3d */
/* ====================== */

.progress-button[data-animation-type="rotate-angle-bottom"] .progress-bar-stroke {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 20px;
	box-shadow: 0 -1px 0 var(--progress-button-stroke-color); /* fix the blurriness that causes a gap */
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

.progress-button[data-animation-type="rotate-angle-bottom"].state-loading .progress-wrap {
	-webkit-transform: rotateX(45deg);
	transform: rotateX(45deg);
}

/* Rotate top 3d */
/* ====================== */

.progress-button[data-animation-type="rotate-angle-top"] .progress-bar-stroke {
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 20px;
	box-shadow: 0 1px 0 var(--progress-button-stroke-color); /* fix the blurriness that causes a gap */
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.progress-button[data-animation-type="rotate-angle-top"].state-loading .progress-wrap {
	-webkit-transform: rotateX(-45deg);
	transform: rotateX(-45deg);
}

/* Rotate left 3d */
/* ====================== */

.progress-button[data-animation-type="rotate-angle-left"] .progress-bar-stroke {
	position: absolute;
	top: 0;
	right: 100%;
	width: 20px;
	height: 100%;
	box-shadow: 1px 0 0 var(--progress-button-stroke-color); /* fix the blurriness that causes a gap */
	-webkit-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

.progress-button[data-animation-type="rotate-angle-left"].state-loading .progress-wrap {
	-webkit-transform: rotateY(45deg);
	transform: rotateY(45deg);
}

/* Rotate right 3d */
/* ====================== */

.progress-button[data-animation-type="rotate-angle-right"] .progress-bar-stroke {
	position: absolute;
	top: 0;
	left: 100%;
	width: 20px;
	height: 100%;
	box-shadow: -1px 0 0 var(--progress-button-stroke-color); /* fix the blurriness that causes a gap */
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}

.progress-button[data-animation-type="rotate-angle-right"].state-loading .progress-wrap {
	-webkit-transform: rotateY(-45deg);
	transform: rotateY(-45deg);
}

/* Rotate side down 3d */
/* ====================== */

.progress-button[data-animation-type="rotate-side-down"] .progress-bar-stroke {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 20px;
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.progress-button[data-animation-type="rotate-side-down"].state-loading .progress-wrap {
	-webkit-transform: rotateX(90deg) translateZ(10px);
	transform: rotateX(90deg) translateZ(10px);
}

/* Rotate side up 3d */
/* ====================== */

.progress-button[data-animation-type="rotate-side-up"] .progress-bar-stroke {
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 20px;
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.progress-button[data-animation-type="rotate-side-up"].state-loading .progress-wrap {
	-webkit-transform: rotateX(-90deg) translateZ(10px);
	transform: rotateX(-90deg) translateZ(10px);
}

/* Rotate side left 3d */
/* ====================== */

.progress-button[data-animation-type="rotate-side-left"] .progress-wrap {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

.progress-button[data-animation-type="rotate-side-left"] .progress-bar-stroke {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 100%;
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

.progress-button[data-animation-type="rotate-side-left"].state-loading .progress-wrap {
	-webkit-transform: translateX(50%) rotateY(90deg) translateZ(10px);
	transform: translateX(50%) rotateY(90deg) translateZ(10px);
}

/* Rotate side right 3d */
/* ====================== */

.progress-button[data-animation-type="rotate-side-right"] .progress-wrap {
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

.progress-button[data-animation-type="rotate-side-right"] .progress-bar-stroke {
	position: absolute;
	top: 0;
	left: 100%;
	width: 20px;
	height: 100%;
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

.progress-button[data-animation-type="rotate-side-right"].state-loading .progress-wrap {
	-webkit-transform: translateX(-50%) rotateY(-90deg) translateZ(10px);
	transform: translateX(-50%) rotateY(-90deg) translateZ(10px);
}

/* Rotate back 3d */
/* ====================== */

.progress-button[data-animation-type="rotate-back"] .progress-wrap {
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.progress-button[data-animation-type="rotate-back"] .content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.progress-button[data-animation-type="rotate-back"] .progress-bar-stroke {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.progress-button[data-animation-type="rotate-back"].state-loading .progress-wrap {
	-webkit-transform: rotateX(180deg) scaleX(0.6) scaleY(0.3);
	transform: rotateX(180deg) scaleX(0.6) scaleY(0.3);
}

/* flip open 3d */
/* ====================== */

.progress-button[data-animation-type="flip-open"] .content {
	z-index: 10;
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

.progress-button[data-animation-type="flip-open"] .progress-bar-stroke {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.progress-button[data-animation-type="flip-open"].state-loading .content {
	-webkit-transform: rotateX(45deg);
	transform: rotateX(45deg);
}

/* slide down */
/* ====================== */

.progress-button[data-animation-type="slide-down"] {
	padding: 0;
	overflow: visible;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.progress-button[data-animation-type="slide-down"] .content {
	z-index: 10;
	padding: var(--progress-button-padding);
	background: var(--progress-button-color);
}

.progress-button[data-animation-type="slide-down"] .progress-bar-stroke {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
}

.progress-button[data-animation-type="slide-down"].state-loading .progress-bar-stroke {
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
}

/* move-up */
/* ====================== */

.progress-button[data-animation-type="move-up"] {
	padding: 0;
	overflow: visible;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.progress-button[data-animation-type="move-up"] .content {
	z-index: 10;
	padding: 0 60px;
	background: var(--progress-button-color);
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
}

.progress-button[data-animation-type="move-up"] .progress-bar-stroke {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.progress-button[data-animation-type="move-up"].state-loading .content {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}

/* top-line */
/* ====================== */

.progress-button[data-animation-type="top-line"] .progress-bar-fill {
	height: 3px;
}

.progress-button[data-show-status-icon="true"][data-animation-type="top-line"] .content::after {
	right: auto;
	left: 100%;
	margin-left: 25px;
}

/* lateral-lines */
/* ====================== */

.progress-button[data-animation-type="lateral-lines"] .progress-bar-fill {
	width: 100%;
	border-right: 3px solid var(--progress-button-fill-color);
	border-left: 3px solid var(--progress-button-fill-color);
	background: transparent;
}

.progress-button[data-show-status-icon="true"][data-animation-type="lateral-lines"] .content::after {
	right: auto;
	left: 100%;
	margin-left: 25px;
}