/*Global TailwindCSS color, cloned for custom styles*/
:root {
	--text-transparent: transparent;
	--text-black: #000;
	--text-white: #fff;
	--text-gray-100: #f7fafc;
	--text-gray-200: #edf2f7;
	--text-gray-300: #e2e8f0;
	--text-gray-400: #cbd5e0;
	--text-gray-500: #a0aec0;
	--text-gray-600: #718096;
	--text-gray-700: #4a5568;
	--text-gray-800: #2d3748;
	--text-gray-900: #1a202c;
	--text-red-100: #fff5f5;
	--text-red-200: #fed7d7;
	--text-red-300: #feb2b2;
	--text-red-400: #fc8181;
	--text-red-500: #f56565;
	--text-red-600: #e53e3e;
	--text-red-700: #c53030;
	--text-red-800: #9b2c2c;
	--text-red-900: #742a2a;
	--text-orange-100: #fffaf0;
	--text-orange-200: #feebc8;
	--text-orange-300: #fbd38d;
	--text-orange-400: #f6ad55;
	--text-orange-500: #ed8936;
	--text-orange-600: #dd6b20;
	--text-orange-700: #c05621;
	--text-orange-800: #9c4221;
	--text-orange-900: #7b341e;
	--text-yellow-100: #fffff0;
	--text-yellow-200: #fefcbf;
	--text-yellow-300: #faf089;
	--text-yellow-400: #f6e05e;
	--text-yellow-500: #ecc94b;
	--text-yellow-600: #d69e2e;
	--text-yellow-700: #b7791f;
	--text-yellow-800: #975a16;
	--text-yellow-900: #744210;
	--text-green-100: #f0fff4;
	--text-green-200: #c6f6d5;
	--text-green-300: #9ae6b4;
	--text-green-400: #68d391;
	--text-green-500: #48bb78;
	--text-green-600: #38a169;
	--text-green-700: #2f855a;
	--text-green-800: #276749;
	--text-green-900: #22543d;
	--text-teal-100: #e6fffa;
	--text-teal-200: #b2f5ea;
	--text-teal-300: #81e6d9;
	--text-teal-400: #4fd1c5;
	--text-teal-500: #38b2ac;
	--text-teal-600: #319795;
	--text-teal-700: #2c7a7b;
	--text-teal-800: #285e61;
	--text-teal-900: #234e52;
	--text-blue-100: #ebf8ff;
	--text-blue-200: #bee3f8;
	--text-blue-300: #90cdf4;
	--text-blue-400: #63b3ed;
	--text-blue-500: #4299e1;
	--text-blue-600: #3182ce;
	--text-blue-700: #2b6cb0;
	--text-blue-800: #2c5282;
	--text-blue-900: #2a4365;
	--text-indigo-100: #ebf4ff;
	--text-indigo-200: #c3dafe;
	--text-indigo-300: #a3bffa;
	--text-indigo-400: #7f9cf5;
	--text-indigo-500: #667eea;
	--text-indigo-600: #5a67d8;
	--text-indigo-700: #4c51bf;
	--text-indigo-800: #434190;
	--text-indigo-900: #3c366b;
	--text-purple-100: #faf5ff;
	--text-purple-200: #e9d8fd;
	--text-purple-300: #d6bcfa;
	--text-purple-400: #b794f4;
	--text-purple-500: #9f7aea;
	--text-purple-600: #805ad5;
	--text-purple-700: #6b46c1;
	--text-purple-800: #553c9a;
	--text-purple-900: #44337a;
	--text-pink-100: #fff5f7;
	--text-pink-200: #fed7e2;
	--text-pink-300: #fbb6ce;
	--text-pink-400: #f687b3;
	--text-pink-500: #ed64a6;
	--text-pink-600: #d53f8c;
	--text-pink-700: #b83280;
	--text-pink-800: #97266d;
	--text-pink-900: #702459;
	--text-purple-1: #5539CC;
	--text-purple-2: #5a3c7e;
	--text-lightpurple: rgba(120, 81, 169, 0.14);
	--text-lightpurple-2: rgba(85, 57, 204, 0.4);
	--text-gold-1: #CC9E39;
	--text-lightgold: rgba(204, 158, 57, 0.14);
	--text-gunmetal-1: #182825;
}

.text-purple-1 {
	color: #5539CC;
}

.text-purple-2 {
	color: #5a3c7e;
}

.text-gold-1 {
	color: #CC9E39;
}

.bg-purple-1 {
	background-color: #5539CC;
}

.bg-purple-2 {
	background-color: #5a3c7e;
}

.bg-purple-3 {
	background-color: rgba(85, 57, 204, 0.51);
}

.bg-gold-1 {
	background-color: #CC9E39;
}

.bg-gold-2 {
	background-color: rgba(204, 158, 57, 0.51);
}

.bg-site-lightPurple {
	background: var(--text-lightpurple);
}

.border-purple-1 {
	border-color: #5539CC;
	color: #5539CC;
}

.border-purple-2 {
	border-color: #5a3c7e;
}

.border-gold-1 {
	border-color: #CC9E39;
}

.outline-purple-1 {
	outline-color: #5539CC;
}

.outline-gold-1 {
	outline-color: #CC9E39;
}

.bg-lightgold {
	background: var(--text-lightgold);
}

.bg-lightpurple {
	background: var(--text-lightpurple);
}

.bg-lightpurple-2 {
	background: var(--text-lightpurple-2);
}

.bg-gunmetal-1 {
	background: var(--text-gunmetal-1);
}

.outline-lightpurple {
	outline-color: var(--text-lightpurple);
}

img {
	image-rendering: auto;
	transform: translateZ(0);
}

#post-prayer-error {
	transition: opacity 0.3s ease;
	opacity: 0;
}

#post-prayer-error:not(.hidden) {
	opacity: 1;
}

textarea.comment-input,
#input-newPrayerPost,
#input-lightCandleText,
#input-seekGuidanceText,
#input-confessText,
#input-postDiscussionText {
	resize: none;
}

.fade-in {
	animation: fadeIn 0.15s ease-out forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Navbar Styles */
.navbar-searchbar {
	transition: background-color 0.6s ease;
}

.navbar-searchbar::placeholder {
	font-size: 0.75rem;
}

/* Navbar Search Dropdown items styling */
.navbarSearchDropdownItem-hover-highlight:hover {
	background-color: var(--text-lightgold);
	color: white;
}

.navbarSearchDropdownItem-pointer-cursor {
	cursor: pointer;
}

@media (max-width: 767px) {
	#navbar-searchDropdown {
		width: 350px;
		max-width: 350px;
		z-index: 100;
		left: 50%;
		transform: translate(-50%, 0%);
	}
}

.text-searchResult-size1 {
	font-size: 0.875rem;
	line-height: 1.2;
}

.text-searchResult-size2 {
	font-size: 0.80rem;
	line-height: 1.4;
}

.text-searchResult-size3 {
	font-size: 0.675rem;
	line-height: 1.4;
}

.truncate-text-navbarSearchResult {
	white-space: nowrap;
	max-width: 80%;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 767px) {
	.truncate-text-navbarSearchResult {
		max-width: 250px;
	}
}

img[alt="MapTiler logo"] { display: none; }

.leaflet-control-attribution {
    display: none;
}