button {
	padding: 8px 16px;
	border-radius: 4px;
	-webkit-transition-duration: 0.2s; /* Safari */
	transition-duration: 0.2s;
	height: 40px;
	
	text-overflow: ellipsis;
    white-space: nowrap;

	&:active {
		opacity: 0.6;
	}

	&:disabled {
		cursor: not-allowed;
		filter: grayscale(1);
	}
}

button[type="menu"] {
	border-radius: 0px !important;
	padding: 12px 0px !important;
	height: 48px;
}

.button-submit {
	background-color: var(--imaGreen) !important;
	color: white !important;
	&:hover {
		background-color: var(--imaGreenHover) !important;
	}

	&:disabled {
		filter: grayscale(1);
	}
}

.button-primary,
button.swal2-confirm {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 4px;
	background-color: var(--imaBlue);
	text-wrap: nowrap;
	color: white !important;
	&:hover {
		background-color: var(--imaBlueHover);
	}

	&:disabled {
		filter: grayscale(1);
	}
}

.button-error,
button.swal2-cancel {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 4px;
	background-color: var(--imaRed) !important;
	color: white !important;
	&:hover {
		background-color: var(--imaRedHover);
	}

	&:disabled {
		filter: grayscale(1);
	}
}

button.swal2-deny {
	display: flex;
	justify-content: center !important;
	align-items: center !important;
	gap: 4px;
	background-color: #32A4d5 !important;
	color: white !important;
	&:hover {
		background-color: opacity(0.8);
	}

	&:disabled {
		filter: grayscale(1);
	}
}

.swal2-actions {
	justify-content: space-between !important;
	width: 100%;
	padding: 0px 24px;
}

.swal2-three-actions {
	justify-content: start;
}
.swal2-three-actions .swal2-deny {
	order: 1;
}
.swal2-three-actions .swal2-cancel {
	order: 2;
	margin-right: auto;
	display: none !important;
}
.swal2-three-actions .swal2-confirm {
	order: 3;
}

.swal2-close {
	margin-top: 10px;
	margin-right: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	content: url(/icons/close-icon.svg) !important;
	width: 18px;
	height: 18px;

	&:focus-visible {
		outline: none !important;
	}
}

.cancel-button-for-delete {
	background-color: var(--imaBlue) !important;
	&:hover {
		background-color: var(--imaBlueHover) !important;
	}
}

.confirm-button-for-delete {
	background-color: var(--imaRed) !important;
	&:hover {
		background-color: var(--imaRedHover) !important;
	}
}

.confirm-button-for-redirect {
	background-color: var(--imaBlue) !important;
	&:hover {
		background-color: var(--imaBlueHover) !important;
	}
}

.close-btn {
	padding: 0 !important;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(/icons/close-icon.svg) !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 18px;
	height: 18px;

	&:focus-visible {
		outline: none !important;
	}
}

.table-action-button {
	padding: 10px;
	background-repeat: no-repeat !important;
	background-position: center !important;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	border: 1px solid var(--IMA-BORDER, #d3dae7);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: white;
}

.table-action-button-borderless {
	padding: 10px;
	background-repeat: no-repeat !important;
	background-position: center !important;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.edit-table-button {
	background: url(/icons/edit_icon.svg);
	background-color: white;
}

.delete-table-button {
	background: url(/icons/delete_icon.svg);
	background-color: white;
}

.disable-table-button {
	background: url(/icons/unavailable_icon.svg);
	background-color: white;
	background-size: 20px;
}

.allow-table-button {
	background: url(/icons/check_icon.svg);
	background-color: white;
	background-size: 20px;
}

.show-table-button {
	background: url(/icons/eye-icon.svg);
	background-color: white;
}

.button-redirect {
	padding: 0px;
	text-decoration: underline;
	color: var(--imaBlue);
	cursor: pointer;
}

.expand-button {
	color: var(--imaBlue);
	background-color: var(--imaTableFilterWrapper);
	position: absolute;
}

.red-button {
	color: var(--imaRed);
}

.table-detail-button {
	font-size: 15px;
	border: solid var(--imaBlue) 1px;
	color: var(--imaBlue);
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
	width: 100%;
	justify-content: center;
	word-wrap: break-word;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.button-view {
	height: 70px;
	border-radius: 0px;
	background: #e7edf3;
	font-size: 21px;
	font-weight: 700;
}

.button-view.active {
	background: white;
	color: var(--imaBlue);
}

@media (max-width: 640px) {
	.button-view {
		height: 50px;
		font-size: 16px;
		padding: 2px 8px !important;
	}
}

.button-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.button-outlined {
	border: solid var(--imaBlue) 1px;
	color: var(--imaBlue);
}

.edit-calendar-button {
	background: url(/icons/edit_icon.svg);
	border: none;
}

.restore-table-button {
	i {
		color: var(--imaGreen);
	}
}