/*
 * Custom CSS for Tailwind to Bootstrap 5 migration
 * Add this to your main CSS file
 */

.w-1\/3 {
	width: 33.333333% !important;
}

.w-2\/3 {
	width: 66.666667% !important;
}

.w-1\/5 {
	width: 20% !important;
}

.w-2\/5 {
	width: 40% !important;
}

.w-3\/5 {
	width: 60% !important;
}

.w-4\/5 {
	width: 80% !important;
}

.w-1\/6 {
	width: 16.666667% !important;
}

.w-5\/6 {
	width: 83.333333% !important;
}

.p-6 {
	padding: 1.5rem !important;
}

.p-8 {
	padding: 2rem !important;
}

.p-10 {
	padding: 2.5rem !important;
}

.px-6 {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

.px-8 {
	padding-left: 2rem !important;
	padding-right: 2rem !important;
}

.px-10 {
	padding-left: 2.5rem !important;
	padding-right: 2.5rem !important;
}

.py-6 {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

.py-8 {
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
}

.py-10 {
	padding-top: 2.5rem !important;
	padding-bottom: 2.5rem !important;
}

.pt-12 {
	padding-top: 3rem !important;
}

.pt-32 {
	padding-top: 8rem !important;
}

.pb-6 {
	padding-bottom: 1.5rem !important;
}

.pb-32 {
	padding-bottom: 8rem !important;
}

.mb-6 {
	margin-bottom: 1.5rem !important;
}

.mb-12 {
	margin-bottom: 3rem !important;
}

.custom-negative-m-24 {
	margin: -6rem !important;
}

.-m-24 {
	margin: -6rem !important;
}

.min-w-0 {
	min-width: 0 !important;
}

.break-words {
	word-wrap: break-word !important;
	word-break: break-word !important;
}

.antialiased {
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

.appearance-none {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

.leading-normal {
	line-height: 1.5 !important;
}

.list-none {
	list-style: none !important;
}

.border-b-1 {
	border-bottom: 1px solid !important;
}

.focus\:outline-none:focus {
	outline: none !important;
}

.focus\:shadow-outline:focus {
	box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5) !important;
}

.hover\:bg-blue-700:hover {
	background-color: #2c5aa0 !important;
}

.hover\:text-gray-400:hover {
	color: #cbd5e0 !important;
}

@media (min-width: 1200px) {
	.xl\:w-4\/12 {
		width: 33.333333% !important;
	}
	.xl\:w-8\/12 {
		width: 66.666667% !important;
	}
	.xl\:mb-0 {
		margin-bottom: 0 !important;
	}
}

@media (min-width: 768px) {
	.md\:px-10 {
		padding-left: 2.5rem !important;
		padding-right: 2.5rem !important;
	}
	.md\:pt-32 {
		padding-top: 8rem !important;
	}
	.md\:justify-between {
		justify-content: space-between !important;
	}
	.md\:w-4\/12 {
		width: 33.333333% !important;
	}
	.md\:w-8\/12 {
		width: 66.666667% !important;
	}
}

:root {
	--app-radius: 36px;
	--bs-border-radius: 36px;
	--bs-border-radius-sm: 36px;
	--bs-border-radius-lg: 36px;
	--bs-border-radius-xl: 36px;
	--bs-border-radius-xxl: 36px;
	--bs-border-radius-pill: 36px;
}

.btn,
.form-control,
.form-select,
.input-group-text,
.card,
.modal-content,
.dropdown-menu,
.alert,
.badge,
.pagination .page-link,
.nav-pills .nav-link {
	border-radius: var(--app-radius) !important;
}