/*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);
}
.bg-nav-and-footer {
	background: #F1F2F9;
}
.outline-lightpurple {
	outline-color: var(--text-lightpurple);
}

.hoverChangeBackground:hover {
	background-color: var(--text-lightpurple-2);
}

.heading-2 {
	color: #000000;
	-webkit-text-stroke: 1.5px #000000; 
}

@font-face {
    font-family: Montserrat-Regular;
    src: url(/static/css/fonts/Montserrat/Montserrat-Regular.woff)
}

@font-face {
    font-family: Montserrat-Bold;
	src: url(/static/css/fonts/Montserrat/Montserrat-Bold.woff)
}

@font-face {
    font-family: Montserrat-Medium;
    src: url(/static/css/fonts/Montserrat/Montserrat-Medium.woff)
}

@font-face {
    font-family: Montserrat-Light;
    src: url(/static/css/fonts/Montserrat/Montserrat-Light.woff)
}

.height-10 {
	height: 2.5rem;
}

h1, h2, h3 {
	font-family: Montserrat-Bold;
	color: #000;
	letter-spacing: 0%;
}

p, span, div, section, ol, ul, li {
	font-family: Montserrat-Regular;
	font-weight: 400;
	font-style: normal;
	color: #000;
	letter-spacing: 0%;
}

a {
	font-family: Montserrat-Regular;
	font-weight: 400;
	font-style: normal;
	color: --var(text-blue-500);
	letter-spacing: 0%;
}

.longText-wordBreak {
	word-break: normal;
}

.font-votyv-bold {
	font-family: Montserrat-Bold;
	letter-spacing: 0%;
}

.font-votyv-medium {
	font-family: Montserrat-Medium;
	letter-spacing: 0%;
}

.font-votyv-light {
	font-family: Montserrat-Light;
	letter-spacing: 0%;
}

html, body {
	/*height: 100%;*/
	margin: 0;
	padding: 0;

	scroll-behavior: smooth;
}
.overall-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	/*overflow-x: hidden;*/
	/*overflow-y: scroll;*/
}
.mainContent {
	flex: 1;
}

#mainBody {
	display: flex;
	flex-direction: column;
	height: 100vh;
    /*background: var(--text-gray-100);*/
    background: #ffffff;
	/*background: rgba(120, 81, 169, 0.14);*/
	/*background: #F1F2F9;*/
	/*background: #f7f8fa;*/
}

button:focus {
    outline: none;
}

.show-banner-blueBox {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 15px;
	left: 15px;
	background-image: linear-gradient(90deg, #007bff, #091353);
}

.navbar-mainLink:hover {
	color: var(--text-purple-1);
}

.loginBtn-navbar:hover {
	background: var(--text-purple-2);
}

.apseAvatar {
	width: 180px; 
	height: 180px;
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
	background-position: center;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
	flex-shrink: 0; 

	position:relative;
	display:inline-block;
}
@media (max-width: 1023px) {
    .apseAvatar {
		width: 120px;
		height: 120px;
    }
}
@media (max-width: 767px) {
    .apseAvatar {
		width: 80px;
		height: 80px;
    }
}
.apseAvatar-small {
	width: 96px; 
	height: 96px;
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
	background-position: center;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
	flex-shrink: 0; 
}
.apseAvatar-smaller {
	width: 64px; 
	height: 64px;
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
	background-position: center;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
	flex-shrink: 0; 
}
.apseAvatar-smallest {
	width: 48px; 
	height: 48px;
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
	background-position: center;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
	flex-shrink: 0; 
}
.apseAvatar-navbarSearch {
	width: 48px; 
	height: 48px;
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
	background-position: center;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
	flex-shrink: 0; 
}
.apseAvatar-browseResults {
	width: 150px;
	height: 150px;
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
	background-position: center;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
	flex-shrink: 0; 
}

.apseAvatar-navbar {
	width: 50px;
	height: 50px;
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
	background-position: center;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
	flex-shrink: 0; 
}

.apseAvatar-parent {
	-webkit-text-size-adjust: 100%;
    font-size: 14px;
    line-height: 20px;
    font-family: Montserrat, sans-serif;
    -webkit-text-fill-color: inherit;
    list-style-type: none;
    box-sizing: border-box;
    width: 180px;
    height: 180px;
	border-top-left-radius: 50%;
    border-top-right-radius: 50%;
	overflow: hidden;
    /*box-shadow: 0 20px 40px rgba(0, 0, 0, .3);*/
	/*border: 2px solid;*/
	border-color: var(--text-gray-400);
	flex-shrink: 0; 

}
.apseAvatar-parent.error {
	border-color: var(--text-red-500);
}
.apseAvatar-parent.smaller {
	width: 140px;
    height: 140px;
}

.apseAvatar-child, .apseAvatar-child-noHover {
    width: 100%;
    height: 100%;
    /*background-position: 50% 0;*/
    background-size: 200px;
    transition: transform .35s cubic-bezier(.165, .84, .44, 1);
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
	background-position: center;
	flex-shrink: 0; 
}

.apseAvatar-parent:hover > .apseAvatar-child, .apseAvatar-parent:focus > .apseAvatar-child {
	transform: scale(1.2, 1.2);
}

.apseAvatar-textOverlay {
	position: absolute;
	top: 50%; /* Move the text to the center vertically */
	left: 50%; /* Move the text to the center horizontally */
	transform: translate(-50%, -50%); /* Adjust for centering */
	background-color: rgba(255, 255, 255, 0.7); /* Add a background color to make the text more readable */
	/*padding: 10px;*/ 
}
/*
.entryField.error {
	border: 2px solid var(--text-red-500);
}
*/

input.error, textarea.error, select.error {
	border: 2px solid var(--text-red-500);
}

.votyvCheckbox {
	/*-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	appearance: none;*/
	width: 20px;
	height: 20px;
}
.votyvCheckbox.error {
	outline: 2px solid var(--text-red-500);
}

.no-resize {
	resize: none;
}

.inputColumn1 {
	max-width:600px;
}
@media (max-width: 767px) {
    .inputColumn1 {
		max-width:470px;
	}
}

.inputColumn2 {
	max-width:900px;
}
@media (max-width: 767px) {
    .inputColumn1 {
		max-width:470px;
	}
}


.niceColumn1 {
	max-width: 470px;
}

.buttonDisabled {
	background: var(--text-gray-500);
	pointer-events: none;
}

input.otp-input {
	text-transform: uppercase;
	font-style: bold;
	letter-spacing: 0.3em;
	text-align: center;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none!important;
	font-weight: 400!important;
	font-style: normal!important;
	letter-spacing: 0em!important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none!important;
	font-weight: 400!important;
	font-style: normal!important;
	letter-spacing: 0em!important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none!important;
	font-weight: 400!important;
	font-style: normal!important;
	letter-spacing: 0em!important;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none!important;
	font-weight: 400!important;
	font-style: normal!important;
	letter-spacing: 0%!important;
}
::placeholder { /* Recent browsers */
    text-transform: none!important;
	font-weight: 400!important;
	font-style: normal!important;
	letter-spacing: 0em!important;
}




/*Tab Styling*/
.accountactivity-tab.active {
	border-bottom: 4px solid var(--text-purple-1);
	color: var(--text-purple-1);
	font-weight: bold;
}

/* Annotations */
.annotation {
	background: #fff;
	box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
	0 8px 16px -8px rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	max-width: 800px;
	margin: 25px auto;
	padding: 10px 22px;
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
	z-index: 10;
}

.annotation.landing.alert {
	border: 1px solid var(--red1);
}

.annotation h4 {
	color: #525f7f;
	font-size: 16px;
	font-weight: 500;
	width: 100%;
	margin-bottom: 15px;
}

.annotation ol {
	font-weight: 400;
	font-size: 14px;
	color: #525f7f;
	margin-left: 16px;
}

.annotation p {
	font-size: 15px;
	font-weight: 400;
	color: #6a7c94;
}

.annotation.info strong {
	display: block;
}

.annotation a {
	font-weight: 400;
	color: #666ee8;
}

.annotation a.stripe {
	flex: 0 0 53px;
	margin-right: 10px;
	background: url(/images/stripe.svg) center center no-repeat;
	text-indent: -9999px;
}

.annotation.card {
	position: fixed;
	left: 25px;
	bottom: 25px;
	margin: 0;
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 20px;
	max-width: 500px;
	animation: slide-in-vertical 0.4s cubic-bezier(0.23, 1, 0.32, 1) both 0.2s;
}

.annotation.card h2 {
	color: var(--gray4);
	font-size: 18px;
	margin-bottom: 10px;
}

.annotation.card p {
	color: #51586d;
	font-size: 14px;
}

.annotation.card p + p {
	margin-top: 10px;
}

.annotation.card form {
	width: 100%;
	margin-top: 15px;
	margin-bottom: 0;
}

.annotation.card form.right {
	text-align: right;
}

.annotation.card input[type='submit'],
.annotation.card button {
	margin: 0;
	display: inline-block;
	margin-right: 10px;
}

.annotation.card input[type='submit'].primary-action,
.annotation.card button.primary-action {
	background: var(--text-purple-1);
	color: #fff;
}

.annotation.card.hidden {
	display: none;
}

.annotation a.show-more {
	display: none;
	text-decoration: none;
}

.annotation a.show-more.expanded {
	display: none;
}

/* Generic alert icons and text */
.alertIcon-generic {
	position: absolute;
	top: 0;
	right: 0;
	background-color: red!important;
	color: white;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	line-height: 20px;
}

.alertIcon-customIcon {
	position: absolute;
	top: 0;
	right: 0;
	color: red!important;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	font-size: 20px;
}

.successIcon-customIcon {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--text-green-500);
	width: 15px;
	height: 15px;
	text-align: center;
	line-height: 15px;
	font-size: 15px;
}

/*Booking Fee Controller*/
.number-field {
	display: inline-flex;
	align-items: center;
}

.widget-bookingFee {
	width: 120px;
	text-align: center;
}

.up-btn, .down-btn {
	width: 30px;
	height: 30px;
}
/*END Booking Fee Controller*/

.creditCardInput:focus-within {
	border-color: var(--text-blue-500);
}

/* Denomination Dropdown items styling */
.denominationDropdownItem-hover-highlight:hover {
	background-color: var(--text-blue-500);
	color: white;
}

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

/* 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;
	}
}

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

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

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

.truncate-text-bibleVerseSearchResult {
	white-space: nowrap;
	max-width: 80%;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 767px) {
	.truncate-text-bibleVerseSearchResult {
		max-width: 250px;
	}
}

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

.truncate-text-ordersPanel {
	white-space: nowrap;
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 767px) {
	.truncate-text-ordersPanel {
		max-width: 230px;
	}
}

.browseIntercessors-result-image-container {
	position: relative;
	width: 100%;
}
.browseIntercessors-result-image-container:before {
	content: "";
	display: block;
	padding-bottom: 100%; /* 1:1 aspect ratio */
}

.browseIntercessors-result-image-container img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	object-fit: cover; /* Add this line */
}

/*
.featuredProviders-image-container {
	position: relative;
	width: 200px;
	height: 200px;
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
	background-position: center;
}

.featuredProviders-image-container img {
	width: 100%;
	display: block; 
	border-top-left-radius: 50%;
    border-top-right-radius: 50%;
	flex-shrink: 1;
	height: 100%;
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
	background-position: center;
}
*/

.order-element-style {
	/*box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .1);*/
	background: #F1F2F9;/*#F1F2F9;*/
	border-width: 1px;
	max-width: 450px;
}

/*For Reviews stars*/
.review-star {
	color: var(--text-gray-400); /* Yellow color for stars to the left of the hovered star and the hovered star */
}

.review-star.yellow, .review-star.star-locked {
	color: var(--text-yellow-500); /* Yellow color for stars to the left of the hovered star and the hovered star */
}

.review-input::placeholder {
	font-size: 0.875rem; /* 14px */
}

/* Tooltip Popup Styling */
.tippy-content{
	background: var(--text-purple-1);
	font-size: 12px;
	color: white;
}