/**
* Buttons
**/

.btn {
	display: inline-block;
	position: relative;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	text-decoration: none !important;
	border: 1px solid transparent;
	padding: 10px 15px;
	font-size: 16px;
	line-height: 22px;
	border-radius: 3px;
	transition: all .15s ease-in-out;
	cursor: pointer;
	font-family: "Open Sans",Verdana,Arial,"Lucida Grande",sans-serif;
	min-width: 110px;
}
body[dir="RTL"] .btn {
	font-family: "Cairo", "Open Sans",Verdana,Arial,"Lucida Grande",sans-serif;
}

/* Primary */
.btn-primary {
	color: var( --white ) !important;
	border-color: var( --blue );
	background: var( --blue );
}

.btn-primary:not(:disabled):not(.disabled):hover {
	border-color: var( --blue-light );
	background: var( --blue-light );
}


/* Outline Primary */
.btn[class*=" btn-outline"],
.btn[class^=btn-outline] {
	font-weight: 600;
	border-width: 2px;
	padding: 8px 13px;
}

.btn-outline-primary {
	color: var( --blue );
	border-color: var( --blue );
	background: var( --white );
}

/* -- Hover */
.btn-outline-primary:not(:disabled):not(.disabled):hover {
	border-color: var( --blue-light );
	color: var( --blue-light );
}


.btn.full-width ~ .btn.full-width {
	margin-top:  calc( var( --grid-gutter-width ) / 2 );
}

/* Button Loading */
.buttonLoading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border: 4px solid transparent;
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
	from {
		transform: rotate(0turn);
	}

	to {
		transform: rotate(1turn);
	}
}