.btn {
	display: inline-block;
	font-weight: 400;
	color: var(--si-btn-txt);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
	.btn {
		transition: none; 
	}
}
.btn:hover {
	color: #434343;
	text-decoration: none; 
}
.btn:focus, .btn.focus {
	outline: 0;
	box-shadow: none; 
}
.btn.disabled, .btn:disabled {
	opacity: 0.65; 
}
[type=reset], [type=submit], button, html [type=button] {
	-webkit-appearance: button;
}
a.btn.disabled,
fieldset:disabled a.btn,
button:disabled {
  pointer-events: none; 
}

.btn-primary {
	color: var(--si-btn-primary-txt);
	background-color: var(--si-btn-primary-bg);
	border-color: var(--si-btn-primary-border); }
.btn-primary:hover {
	color: var(--si-btn-primary-txt);
	background-color: var(--si-btn-primary-bg-hover);
	border-color: var(--si-btn-primary-border-hover)}
.btn-primary:focus, .btn-primary.focus {
	color: var(--si-btn-primary-txt);
	background-color: var(--si-btn-primary-bg-hover);
	border-color: var(--si-btn-primary-border-hover);
	// box-shadow: 0 0 0 0 rgba(239, 102, 123, 0.5); 
}
.btn-primary.disabled, .btn-primary:disabled {
	color: var(--si-btn-primary-txt);
	background-color: var(--si-btn-primary-bg-disabled);
	border-color: var(--si-btn-primary-border-disabled); 
}

.btn-danger {
	color: var(--si-btn-danger-txt);
	background-color: var(--si-btn-danger-bg);
	border-color: var(--si-btn-danger-border); }
.btn-danger:hover {
	color: var(--si-btn-danger-txt);
	background-color: var(--si-btn-danger-bg-hover);
	border-color: var(--si-btn-danger-border-hover)}
.btn-danger:focus, .btn-danger.focus {
	color: var(--si-btn-danger-txt);
	background-color: var(--si-btn-danger-bg-hover);
	border-color: var(--si-btn-danger-border-hover);
	// box-shadow: 0 0 0 0 rgba(239, 102, 123, 0.5); 
}
.btn-danger.disabled, .btn-danger:disabled {
	color: var(--si-btn-danger-txt);
	background-color: var(--si-btn-danger-bg-disabled);
	border-color: var(--si-btn-danger-border-disabled); 
}


.btn-outline-secondary {
	// color: #6c757d;
	color: var(--si-btn-outline-secondary-txt);
	background-color: transparent;
	background-image: none;
	border-color: var(--si-btn-outline-secondary-border);
	&:hover {
		color: var(--si-btn-outline-secondary-txt);
		background-color: var(--si-btn-outline-secondary-bg-hover);
		border-color: var(--si-btn-outline-secondary-txt);
	}
}



.btn {
	&.is-loading {
		color: transparent !important;
		position: relative;

		position: relative;
		cursor: default;
		text-shadow: none!important;
		color: transparent!important;
		opacity: 1;
		pointer-events: auto;
		-webkit-transition: all 0s linear,opacity .1s ease;
		transition: all 0s linear,opacity .1s ease;

		/* Static Shape */
		&:before {

			position: absolute;
			content: '';
			top: 50%;
			left: 50%;
			margin: -8px 0 0 -8px;
			width: 16px;
			height: 16px;
			border-radius: 500rem;
			border: .2em solid rgba(0,0,0,.15);
			border-color: rgba(0,0,0,.1);
		}

		/* Active Shape */
		&:after {


			position: absolute;
			content: '';
			top: 50%;
			left: 50%;
			margin: -8px 0 0 -8px;
			width: 16px;
			height: 16px;
			-webkit-animation: pp-btn-spin .6s linear;
			animation: pp-btn-spin .6s linear;
			-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			border-radius: 500rem;
			border-color: #FFF transparent transparent;
			border-style: solid;
			border-width: .2em;
			box-shadow: 0 0 0 1px transparent;
			border-top-color: #767676;
		}
	}
}

/* Active Animation */
@keyframes pp-btn-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
