@charset "utf-8";
/*Buttons*/
.btn {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
	border-radius: 5px;
	background-color: transparent;
	border: 1px solid transparent;
	transition: color 0.1s cubic-bezier(0.5, 0.2, 0.9, 0.4),background-color 0.1s cubic-bezier(0.5, 0.2, 0.9, 0.4),border-color 0.1s cubic-bezier(0.5, 0.2, 0.9, 0.4),box-shadow 0.1s cubic-bezier(0.5, 0.2, 0.9, 0.4);
    text-decoration: none;
}

.btn-sm {
	padding: 0px 16px;
	height: 32px;
}
.btn-md {
	padding: 0px 24px;
	height: 40px;
	font-size: 16px;
}
.btn-lg {
	padding: 0px 24px;
	height: 56px;
}

.btn-sm-sq {
	min-width: 32px;
	height: 32px;
}
.btn-md-sq {
	min-width: 40px;
	height: 40px;
}
.btn-sm-sq {
	min-width: 56px;
	height: 56px;
}
.btn-w-600 {
	font-weight: 600;
}
.btn-icon {
	display: inline-flex;
}
.btn-icon-sm {
	font-size: 16px;
}
.btn-icon-left {
	margin-left: 4px;
}
.btn-icon-right {
	margin-right: 4px;
}

.btn-full {
	width: 100%;
	justify-content: center;
}
.btn-center {
	justify-content: center;
}
/*Button Colors*/

/*Button Normal*/
.btn-primary {
	color: var(--blue-700);
	background-color: transparent;
}
.btn-primary:hover {
	color: var(--blue-800);
	background-color: var(--zinc-100);
}
.btn-secondary {
	color: var(--zinc-900);
	background-color: transparent;
}
.btn-secondary:hover {
	color: var(--zinc-950);
	background-color: var(--zinc-100);
}
.btn-gray {
	color: var(--zinc-500);
	background-color: transparent;
}
.btn-gray:hover {
	color: var(--zinc-600);
	background-color: var(--zinc-100);
}
.btn-success {
	color: var(--green-600);
	background-color: transparent;
}
.btn-success:hover {
	color: var(--green-700);
	background-color: var(--zinc-100);
}
.btn-danger {
	color: var(--red-600);
	background-color: transparent;
}
.btn-danger:hover {
	color: var(--red-700);
	background-color: var(--zinc-100);
}
.btn-warning {
	color: var(--orange-600);
	background-color: transparent;
}
.btn-warning:hover {
	color: var(--orange-700);
	background-color: var(--zinc-100);
}
.btn-info {
	color: var(--sky-600);
	background-color: transparent;
}
.btn-info:hover {
	color: var(--sky-700);
	background-color: var(--zinc-100);
}
.btn-primary:disabled, .btn-primary:disabled, .btn-success:disabled, .btn-danger:disabled, .btn-warning:disabled, .btn-info:disabled, .btn-third:disabled {
	color: var(--zinc-600);
    background-color: var(--zinc-300);
    cursor: not-allowed;
}

.btn-primary:disabled, .btn-secondary:disabled, .btn-gray:disabled, .btn-success:disabled, .btn-danger:disabled, .btn-warning:disabled, .btn-info:disabled { 
	background-color: var(--zinc-300);
	color: var(--zinc-500); 
}

/*Button Solid*/
.btn-primary-solid {
	color: var(--white);
	background-color: var(--blue-700);
}
.btn-primary-solid:hover {
	color: var(--white);
	background-color: var(--blue-800);
}
.btn-secondary-solid {
	color: var(--white);
	background-color: var(--zinc-800);
}
.btn-secondary-solid:hover {
	color: var(--white);
	background-color: var(--zinc-900);
}
.btn-gray-solid {
	color: var(--white);
	background-color: var(--zinc-600);
}
.btn-gray-solid:hover {
	color: var(--white);
	background-color: var(--zinc-700);
}
.btn-success-solid {
	color: var(--white);
	background-color: var(--green-600);
}
.btn-success-solid:hover {
	color: var(--white);
	background-color: var(--green-700);
}
.btn-danger-solid {
	color: var(--white);
	background-color: var(--red-600);
}
.btn-danger-solid:hover {
	color: var(--white);
	background-color: var(--red-700);
}
.btn-warning-solid {
	color: var(--white);
	background-color: var(--orange-600);
}
.btn-warning-solid:hover {
	color: var(--white);
	background-color: var(--orange-700);
}
.btn-info-solid {
	color: var(--white);
	background-color: var(--sky-600);
}
.btn-info-solid:hover {
	color: var(--white);
	background-color: var(--sky-700);
}

.btn-primary-solid:disabled, .btn-secondary-solid:disabled, .btn-gray-solid:disabled, .btn-success-solid:disabled, .btn-danger-solid:disabled, .btn-warning-solid:disabled, .btn-info-solid:disabled { 
	background-color: var(--zinc-300);
	color: var(--zinc-500); 
}

/*Button Subtle*/
.btn-primary-subtle {
	color: var(--blue-700);
	background-color: var(--blue-100);
}
.btn-primary-subtle:hover {
	color: var(--blue-800);
	background-color: var(--blue-200);
}
.btn-secondary-subtle {
	color: var(--zinc-800);
	background-color: var(--zinc-100);
}
.btn-secondary-subtle:hover {
	color: var(--zinc-900);
	background-color: var(--zinc-200);
}
.btn-gray-subtle {
	color: var(--zinc-600);
	background-color: var(--zinc-100);
}
.btn-gray-subtle:hover {
	color: var(--zinc-700);
	background-color: var(--zinc-200);
}
.btn-success-subtle {
	color: var(--green-600);
	background-color: var(--green-100);
}
.btn-success-subtle:hover {
	color: var(--green-700);
	background-color: var(--green-200);
}
.btn-danger-subtle {
	color: var(--red-600);
	background-color: var(--red-100);
}
.btn-danger-subtle:hover {
	color: var(--red-700);
	background-color: var(--red-200);
}
.btn-warning-subtle {
	color: var(--orange-600);
	background-color: var(--orange-100);
}
.btn-warning-subtle:hover {
	color: var(--orange-700);
	background-color: var(--orange-200);
}
.btn-info-subtle {
	color: var(--sky-600);
	background-color: var(--sky-100);
}
.btn-info-subtle:hover {
	color: var(--sky-700);
	background-color: var(--sky-200);
}

.btn-primary-subtle:disabled, .btn-secondary-subtle:disabled, .btn-gray-subtle:disabled, .btn-success-subtle:disabled, .btn-danger-subtle:disabled, .btn-warning-subtle:disabled, .btn-info-subtle:disabled { 
	background-color: var(--zinc-300);
	color: var(--zinc-500); 
}

/*Button Outline*/
.btn-primary-outline {
	color: var(--blue-700);
	background-color: transparent;
	border-color: var(--blue-700);
}
.btn-primary-outline:hover {
	color: var(--white);
	background-color: var(--blue-700);
	border-color: var(--blue-700);
}
.btn-secondary-outline {
	color: var(--zinc-900);
	background-color: transparent;
	border-color: var(--zinc-900);
}
.btn-secondary-outline:hover {
	color: var(--white);
	background-color: var(--zinc-900);
	border-color: var(--zinc-900);
}
.btn-gray-outline {
	color: var(--zinc-600);
	background-color: transparent;
	border-color: var(--zinc-600);
}
.btn-gray-outline:hover {
	color: var(--white);
	background-color: var(--zinc-600);
	border-color: var(--zinc-600);
}
.btn-success-outline {
	color: var(--green-600);
	background-color: transparent;
	border-color: var(--green-600);
}
.btn-success-outline:hover {
	color: var(--white);
	background-color: var(--green-600);
	border-color: var(--green-600);
}
.btn-danger-outline {
	color: var(--red-600);
	background-color: transparent;
	border-color: var(--red-600);
}
.btn-danger-outline:hover {
	color: var(--white);
	background-color: var(--red-600);
	border-color: var(--red-600);
}
.btn-warning-outline {
	color: var(--orange-600);
	background-color: transparent;
	border-color: var(--orange-600);
}
.btn-warning-outline:hover {
	color: var(--white);
	background-color: var(--orange-600);
	border-color: var(--orange-600);
}
.btn-info-outline {
	color: var(--sky-600);
	background-color: transparent;
	border-color: var(--sky-600);
}
.btn-info-outline:hover {
	color: var(--white);
	background-color: var(--sky-600);
	border-color: var(--sky-600);
}

.btn-primary-outline:disabled, .btn-secondary-outline:disabled, .btn-gray-outline:disabled, .btn-success-outline:disabled, .btn-danger-outline:disabled, .btn-warning-outline:disabled, .btn-info-outline:disabled { 
	background-color: var(--zinc-300);
	color: var(--zinc-500); 
}

/*Button link*/
.btn-normal-link {
	color: var(--zinc-950);
}
.btn-normal-link:hover {
	color: var(--blue-700);
}
.btn-primary-link {
	color: var(--blue-700);
}
.btn-primary-link:hover {
	color: var(--blue-800);
}
.btn-secondary-link {
	color: var(--zinc-900);
}
.btn-secondary-link:hover {
	color: var(--zinc-950);
}
.btn-gray-link {
	color: var(--zinc-600);
}
.btn-gray-link:hover {
	color: var(--zinc-700);
}
.btn-success-link {
	color: var(--green-600);
}
.btn-success-link:hover {
	color: var(--green-700);
}
.btn-danger-link {
	color: var(--red-600);
}
.btn-danger-link:hover {
	color: var(--red-700);
}
.btn-warning-link {
	color: var(--orange-600);
}
.btn-warning-link:hover {
	color: var(--orange-700);
}
.btn-info-link {
	color: var(--sky-600);
}
.btn-info-link:hover {
	color: var(--sky-700);
}

.btn-primary-link:disabled, .btn-secondary-link:disabled, .btn-gray-link:disabled, .btn-success-link:disabled, .btn-danger-link:disabled, .btn-warning-link:disabled, .btn-info-link:disabled { 
	color: var(--zinc-500); 
}
/*SPECIAL COLORS*/
.btn-gray-special {
	color: var(--zinc-950);
	background-color: var(--zinc-50);
}
.btn-gray-special i{
	color: var(--blue-700);
}
.btn-gray-special:hover {
	color: var(--zinc-950);
	background-color: var(--zinc-100);
}