/**
 * Buttons
 * 
 * MSI website theme
 * @author Jeroen Butenaerts
 * @version 1.0
 * @package 
 */
/**
 * Default button
 */
.btn {
	background-color: #404040;
	border: none;
	border-radius: 4px;
	box-shadow: none;
	color: #fff;
	font-family: 'Open Sans','sans-serif';
	font-size: 16px;
	font-weight: 600;
	line-height: 36px;
	min-height: 36px;
	min-width: 36px;
	outline: none !important;
	overflow: hidden;
	padding: 0 10px;
	position: relative;
	text-overflow: ellipsis;
	text-transform: uppercase;
	transition: background 500ms ease-out, box-shadow 200ms ease-out, color 200ms ease-out;
	white-space: nowrap;
}
.btn.focus,
.btn:focus,
.btn.hover,
.btn:hover {
	background-color: #fff;
	color: #404040;
	font-weight: 700;
	letter-spacing: -0.0148em;
}
.btn.active,
.btn:active {
	background-color: #404040;
	box-shadow: none;
	color: #000;
	font-weight: 600;
	letter-spacing: 0;
}
.btn.disabled,
.btn[disabled] {
	background-color: #404040;
	color: #000;
	opacity: 0.5;
	pointer-events: none;
}
/**
 * Default outlined button
 */
.btn.btn-outline {
	background-color: transparent;
	box-shadow: inset 0px 0px 0px 2px #404040;
}
.btn.btn-outline.focus,
.btn.btn-outline:focus,
.btn.btn-outline.hover,
.btn.btn-outline:hover {
	box-shadow: inset 0px 0px 0px 2px #fff;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0;
}
.btn.btn-outline.active,
.btn.btn-outline:active {
	background-color: transparent;
	box-shadow: inset 0px 0px 0px 2px #404040;
	color: #404040;
}
.btn.btn-outline.disabled,
.btn.btn-outline[disabled] {
	background-color: transparent;
	box-shadow: inset 0px 0px 0px 2px #404040;
	color: #404040;
}
/**
 * Primary button
 */
.btn.btn-primary {
	background-color: #f00;
}
.btn.btn-primary.focus,
.btn.btn-primary:focus,
.btn.btn-primary.hover,
.btn.btn-primary:hover {
	background-color: #fff;
	color: #f00;
}
.btn.btn-primary.active,
.btn.btn-primary:active {
	background-color: #f00;
	color: #000;
}
.btn.btn-primary.disabled,
.btn.btn-primary[disabled] {
	background-color: #f00;
	color: #000;
	opacity: 0.3;
}
.btn.btn-primary.btn-outline {
	background-color: transparent;
	box-shadow: inset 0px 0px 0px 2px #f00;
}
/**
 * Primary outlined button
 */
.btn.btn-primary.btn-outline.focus,
.btn.btn-primary.btn-outline:focus,
.btn.btn-primary.btn-outline.hover,
.btn.btn-primary.btn-outline:hover {
	background-color: transparent;
	box-shadow: inset 0px 0px 0px 2px #f00;
	color: #f00;
}
.btn.btn-primary.btn-outline.active,
.btn.btn-primary.btn-outline:active {
	box-shadow: inset 0px 0px 0px 2px #f00;
	color: #404040;
}
.btn.btn-primary.btn-outline.disabled,
.btn.btn-primary.btn-outline[disabled] {
	background-color: transparent;
	color: #f00;
}
/**
 * Assistive buttons
 */
.btn-danger {
	background-color: #c9302c;
}
.btn-danger.hover,
.btn-danger:hover {
	background-color: #d9534f;
	color: #fff;
}
.btn-info {
	background-color: #31b0d5;
}
.btn-info.hover,
.btn-info:hover {
	background-color: #5bc0de;
	color: #fff;
}
.btn-success {
	background-color: #449d44;
}
.btn-success.hover,
.btn-success:hover {
	background-color: #5cb85c;
	color: #fff;
}
.btn-warning {
	background-color: #ec971f;
}
.btn-warning.hover,
.btn-warning:hover {
	background-color: #f0ad4e;
	color: #fff;
}
/**
 * Button icons
 */
.btn-icon:before {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: buttonicons;
	font-size: inherit;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	height: auto;
	line-height: 1;
	position: relative;
	speak: none;
	text-transform: none;
	top: 0.05em;
	vertical-align: initial;
	width: auto;
}
.btn > .btn-icon:before {
	margin-right: 10px;
}
.btn-icon-add:before {
	content: '\e908';
}
.btn-icon-arrow-down:before {
	content: '\e90c';
}
.btn-icon-arrow-left:before {
	content: '\e90d';
}
.btn-icon-arrow-right:before {
	content: '\e90e';
}
.btn-icon-arrow-up:before {
	content: '\e90f';
}
.btn-icon-bottom:before {
	content: '\e915';
}
.btn-icon-check:before {
	content: '\e912';
}
.btn-icon-close:before {
	content: '\e904';
}
.btn-icon-compare:before {
	content: '\e90a';
}
.btn-icon-download:before {
	content: '\e911';
}
.btn-icon-remove:before {
	content: '\e907';
}
.btn-icon-search:before {
	content: '\e905';
}
.btn-icon-searchreset:before {
	content: '\e906';
}
.btn-icon-settings:before {
	content: '\e909';
}
.btn-icon-top:before {
	content: '\e914';
}
.btn-icon-upload:before {
	content: '\e910';
}
.btn-icon-warning:before {
	content: '\e913';
}
/**
 * Flipping button
 */
.btn-flipping {
  -webkit-animation: btn-flipping 3000ms infinite ease-in-out;
  animation: btn-flipping 3000ms infinite ease-in-out;
	cursor: progress;
	z-index: 10;
}
.btn-flipping.focus,
.btn-flipping:focus,
.btn-flipping.hover,
.btn-flipping:hover {
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes btn-flipping {
  0% {
		-webkit-transform: perspective(120px);
	}
  30% {
		-webkit-transform: perspective(120px);
	}
  48% {
		-webkit-transform: perspective(120px) rotateY(180deg);
	}
  65% {
		-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
	}
  83% {
		-webkit-transform: perspective(120px) rotateY(0deg) rotateX(180deg);
	}
  100% {
		-webkit-transform: perspective(120px) rotateY(0deg) rotateX(0deg);
		}
}
@keyframes btn-flipping {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  30% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
	48% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
	65% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
	83% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
  }
	100% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
}
/**
 * Loading button
 */
.btn-loading {
	color: #000;
	cursor: progress;
/*	pointer-events: none;*/
}
.btn-loading:after {
  -webkit-animation: btn-loading 1000ms infinite ease-out;
  animation: btn-loading 1000ms infinite ease-out;
	color: #fff;
	content: '\e90b';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: buttonicons;
	font-size: inherit;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	height: auto;
	left: 50%;
	line-height: inherit;
	margin-left: -8px;
	position: absolute;
	speak: none;
	text-transform: none;
	vertical-align: initial;
	width: auto;
}
@-webkit-keyframes btn-loading {
  from {
		-webkit-transform: rotate(0deg);
	}
  to {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes btn-loading {
  from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
  }
  to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
  }
}
.btn.btn-loading.focus,
.btn.btn-loading:focus,
.btn.btn-loading.hover,
.btn.btn-loading:hover {
	background-color: #404040;
	color: #000;
}
.btn.btn-loading.btn-outline {
	box-shadow: inset 0px 0px 0px 2px #404040;
	color: #404040;
}
.btn.btn-loading.btn-outline.focus,
.btn.btn-loading.btn-outline:focus,
.btn.btn-loading.btn-outline.hover,
.btn.btn-loading.btn-outline:hover {
	background-color: transparent;
	box-shadow: inset 0px 0px 0px 2px #404040;
	color: #404040;
}
.btn.btn-loading.btn-primary.focus,
.btn.btn-loading.btn-primary:focus,
.btn.btn-loading.btn-primary.hover,
.btn.btn-loading.btn-primary:hover {
	background-color: #f00;
	color: #000;
}
.btn.btn-loading.btn-primary.btn-outline {
	box-shadow: inset 0px 0px 0px 2px #f00;
	color: #404040;
}
.btn.btn-loading.btn-primary.btn-outline.focus,
.btn.btn-loading.btn-primary.btn-outline:focus,
.btn.btn-loading.btn-primary.btn-outline.hover,
.btn.btn-loading.btn-primary.btn-outline:hover {
	background-color: transparent;
	color: #404040;
}